From 818a8297ec168340f759fa0c859a918e26411c53 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Wed, 6 Nov 2024 08:35:19 -0600
Subject: [PATCH 001/127] docs(SpecialSponsor): remove hardcoded value

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

diff --git a/packages/docs/src/components/home/SpecialSponsor.vue b/packages/docs/src/components/home/SpecialSponsor.vue
index e991327296a..9abf5f32531 100644
--- a/packages/docs/src/components/home/SpecialSponsor.vue
+++ b/packages/docs/src/components/home/SpecialSponsor.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-if="hasSpecialSponsor" class="mb-8">
+  <div v-if="specialSponsor" class="mb-8">
     <v-divider class="mx-auto" />
 
     <div class="d-flex align-center justify-center my-1 px-4">
       <small class="font-weight-bold me-4 text-no-wrap">Special Sponsor</small>
 
       <SponsorCard
+        :slug="specialSponsor.slug"
         min-height="64"
-        slug="teamwork"
         width="240"
       />
     </div>
@@ -19,5 +19,5 @@
 <script setup>
   const store = useSponsorsStore()
 
-  const hasSpecialSponsor = computed(() => store.byTier[-2]?.length > 0)
+  const specialSponsor = computed(() => store.byTier[-2]?.[0])
 </script>

From 741f771d41575da37de7e53c41e02bfaca5b494e Mon Sep 17 00:00:00 2001
From: Andrew Scott <ascott18@gmail.com>
Date: Sat, 9 Nov 2024 23:23:27 -0800
Subject: [PATCH 002/127] docs(VList): fix misnamed prop (#20682)

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

diff --git a/packages/docs/src/pages/en/components/lists.md b/packages/docs/src/pages/en/components/lists.md
index cf36a0ac3fe..900c72b3b19 100644
--- a/packages/docs/src/pages/en/components/lists.md
+++ b/packages/docs/src/pages/en/components/lists.md
@@ -130,6 +130,6 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 
 #### Action and item groups
 
-A **three-line** list with actions. Utilizing **selection-strategy**, easily connect actions to your tiles.
+A **three-line** list with actions. Utilizing **select-strategy**, easily connect actions to your tiles.
 
 <ExamplesExample file="v-list/misc-actions" />

From a80c18f9d0ef8b22a3afb268c415a98a56623ad5 Mon Sep 17 00:00:00 2001
From: Vasyl <vatres@ukr.net>
Date: Mon, 11 Nov 2024 23:05:24 +0200
Subject: [PATCH 003/127] docs: add Epicmax support section to home page
 (#20679)

---
 packages/docs/components.d.ts                 |  1 +
 .../src/components/home/EpicmaxSupport.vue    | 24 +++++++++++++++++++
 packages/docs/src/i18n/messages/en.json       |  5 ++++
 packages/docs/src/pages/en/index.md           |  2 ++
 4 files changed, 32 insertions(+)
 create mode 100644 packages/docs/src/components/home/EpicmaxSupport.vue

diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
index 421ea1bea37..d3430970b17 100644
--- a/packages/docs/components.d.ts
+++ b/packages/docs/components.d.ts
@@ -124,6 +124,7 @@ declare module 'vue' {
     GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
     HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
     HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
+    HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
     HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
     HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
diff --git a/packages/docs/src/components/home/EpicmaxSupport.vue b/packages/docs/src/components/home/EpicmaxSupport.vue
new file mode 100644
index 00000000000..72e50bfe865
--- /dev/null
+++ b/packages/docs/src/components/home/EpicmaxSupport.vue
@@ -0,0 +1,24 @@
+<template>
+  <section class="bg-light-blue-darken-4 py-8">
+    <h2 class="v-heading mb-2 text-h4 text-sm-h4">{{ t("epicmax.title") }}</h2>
+    <p class="mx-auto" style="max-width: 700px">{{ t("epicmax.message") }}</p>
+    <v-btn
+      :aria-label="t('epicmax.learn-more')"
+      class="px-16 text-light-blue-darken-4"
+      color="grey-lighten-5"
+      href="https://www.epicmax.co/?ref=vuetify"
+      rounded="0"
+      size="large"
+      variant="flat"
+    >
+      <span
+        class="text-capitalize font-weight-regular"
+        v-text="t('epicmax.learn-more')"
+      />
+    </v-btn>
+  </section>
+</template>
+
+<script setup>
+  const { t } = useI18n()
+</script>
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 642fc57ec57..9edd159e23d 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -148,6 +148,11 @@
   "enable-pwa-refresh": "Enable Refresh Prompt",
   "enable-pwa-refresh-message": "Display the refresh prompt when new documentation updates have been downloaded.",
   "enterprise": "Enterprise",
+  "epicmax": {
+    "learn-more": "Learn more",
+    "title": "Need support with your Vuetify project?",
+    "message": "Epicmax is here to support you - whether it's migrating to Vue3, adjusting your Vue.js code, or building custom front-ends."
+  },
   "email-address": "Email address",
   "esc": "Esc",
   "extra-extra-large": "Extra extra large",
diff --git a/packages/docs/src/pages/en/index.md b/packages/docs/src/pages/en/index.md
index 50c5d7f92af..bca124a674d 100644
--- a/packages/docs/src/pages/en/index.md
+++ b/packages/docs/src/pages/en/index.md
@@ -45,3 +45,5 @@ Check out these beautiful apps, plugins, and themes built using Vuetify.{style="
 <br>
 <br>
 <br>
+
+<HomeEpicmaxSupport />

From fd3ff3c4e4c87df8841cc52f47aa30afc68322bb Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 13 Nov 2024 23:24:43 +1100
Subject: [PATCH 004/127] chore: remove umami

---
 packages/docs/vite.config.mts | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
index 26540a32fc7..3d35d4abdef 100644
--- a/packages/docs/vite.config.mts
+++ b/packages/docs/vite.config.mts
@@ -350,23 +350,6 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
         },
       },
 
-      {
-        name: 'inject-umami',
-        transformIndexHtml (html, ctx) {
-          if (mode !== 'production') return
-
-          return [{
-            tag: 'script',
-            attrs: {
-              defer: true,
-              src: 'https://umami.vuetifyjs.com/script.js',
-              'data-website-id': 'c635330a-f1a7-49cf-8894-3ff2cfa0331e',
-            },
-            injectTo: 'head',
-          }]
-        },
-      },
-
       Inspect(),
 
       process.env.HTTPS === 'true' ? basicSsl() : undefined,

From 1ba11c95343ac742d7e0f011129dc0221497d679 Mon Sep 17 00:00:00 2001
From: MajesticPotatoe <amajesticpotatoe@gmail.com>
Date: Wed, 13 Nov 2024 18:34:49 -0500
Subject: [PATCH 005/127] docs(flex): fix incorrect flex 1-1/0 value

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

diff --git a/packages/docs/src/pages/en/styles/flex.md b/packages/docs/src/pages/en/styles/flex.md
index 8911227c88d..9dd9c84030a 100644
--- a/packages/docs/src/pages/en/styles/flex.md
+++ b/packages/docs/src/pages/en/styles/flex.md
@@ -34,16 +34,16 @@ Control the layout of flex containers with alignment, justification and more wit
 | **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-1-1** | flex: 1 1 auto; |
+| **flex-sm-1-1** | flex: 1 1 auto; |
+| **flex-md-1-1** | flex: 1 1 auto; |
+| **flex-lg-1-1** | flex: 1 1 auto; |
+| **flex-xl-1-1** | flex: 1 1 auto; |
+| **flex-1-0** | flex: 1 0 auto; |
+| **flex-sm-1-0** | flex: 1 0 auto; |
+| **flex-md-1-0** | flex: 1 0 auto; |
+| **flex-lg-1-0** | flex: 1 0 auto; |
+| **flex-xl-1-0** | flex: 1 0 auto; |
 | **flex-0-1** | flex: 0 1 auto; |
 | **flex-sm-0-1** | flex: 0 1 auto; |
 | **flex-md-0-1** | flex: 0 1 auto; |

From 797cd88691e813b9e1c4c41323c5e8aaa7f9b356 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 14 Nov 2024 23:13:35 +1100
Subject: [PATCH 006/127] test(VNumberInput): update to vitest

---
 .../src/labs/VNumberInput/VNumberInput.tsx    |   6 +-
 .../__tests__/VNumberInput.spec.browser.tsx   | 205 +++++++++++++++
 .../__tests__/VNumberInput.spec.cy.tsx        | 235 ------------------
 3 files changed, 209 insertions(+), 237 deletions(-)
 create mode 100644 packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 7835d768bd5..bbf59a65c74 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -209,7 +209,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             flat
             key="increment-btn"
             height={ controlNodeDefaultHeight.value }
-            name="increment-btn"
+            data-testid="increment"
+            aria-hidden="true"
             icon={ incrementIcon.value }
             onClick={ onClickUp }
             onMousedown={ onControlMousedown }
@@ -241,7 +242,8 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             flat
             key="decrement-btn"
             height={ controlNodeDefaultHeight.value }
-            name="decrement-btn"
+            data-testid="decrement"
+            aria-hidden="true"
             icon={ decrementIcon.value }
             size={ controlNodeSize.value }
             tabindex="-1"
diff --git a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.browser.tsx b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.browser.tsx
new file mode 100644
index 00000000000..34b774a003c
--- /dev/null
+++ b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.browser.tsx
@@ -0,0 +1,205 @@
+// Components
+import { VNumberInput } from '../VNumberInput'
+import { VForm } from '@/components/VForm'
+
+// Utilities
+import { render, screen, userEvent } from '@test'
+import { ref } from 'vue'
+
+describe('VNumberInput', () => {
+  it.each([
+    { typing: '---', expected: '-' }, // "-" is only allowed once
+    { typing: '1-', expected: '1' }, // "-" is only at the start
+    { typing: '.', expected: '.' }, // "." is allowed at the start
+    { typing: '..', expected: '.' }, // "." is only allowed once
+    { typing: '1...0', expected: '1.0' }, // "." is only allowed once
+    { typing: '123.45.67', expected: '123.4567' }, // "." is only allowed once
+    { typing: 'ab-c8+.iop9', expected: '-8.9' }, // Only numbers, "-", "." are allowed to type in
+  ])('prevents NaN from arbitrary input', async ({ typing, expected }) => {
+    const { element } = render(VNumberInput)
+    await userEvent.click(element)
+    await userEvent.keyboard(typing)
+    expect(screen.getByCSS('input')).toHaveValue(expected)
+  })
+
+  it('resets v-model to null when click:clear is triggered', async () => {
+    const model = ref(5)
+    render(() => (
+      <VNumberInput
+        clearable
+        v-model={ model.value }
+        readonly
+      />
+    ))
+
+    await userEvent.click(screen.getByLabelText('Clear'))
+    expect(model.value).toBeNull()
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20337
+  it('emits model-value when input value is a legit number within range of the max and min', async () => {
+    const model = ref(null)
+    const { element } = render(() => (
+      <VNumberInput
+        v-model={ model.value }
+        min={ 5 }
+        max={ 125 }
+      />
+    ))
+
+    await userEvent.click(element)
+    await userEvent.keyboard('1')
+    expect(model.value).toBeNull()
+
+    await userEvent.keyboard('0')
+    expect(model.value).toBe(10)
+
+    await userEvent.keyboard('0')
+    expect(model.value).toBe(100)
+
+    await userEvent.keyboard('0')
+    expect(model.value).toBe(100)
+
+    await userEvent.click(document.body)
+    expect(model.value).toBe(125)
+  })
+
+  describe('readonly', () => {
+    it('prevents mutation when readonly', async () => {
+      const model = ref(1)
+
+      const { element } = render(() => (
+        <VNumberInput v-model={ model.value } readonly />
+      ))
+
+      await userEvent.click(screen.getByTestId('increment'))
+      expect(model.value).toBe(1)
+
+      await userEvent.click(screen.getByTestId('decrement'))
+      expect(model.value).toBe(1)
+
+      await userEvent.click(element)
+      await userEvent.keyboard('{ArrowUp}')
+      expect(model.value).toBe(1)
+
+      await userEvent.keyboard('{ArrowDown}')
+      expect(model.value).toBe(1)
+    })
+
+    it('prevents mutation in readonly form', async () => {
+      const model = ref(1)
+
+      const { element } = render(() => (
+        <VForm readonly>
+          <VNumberInput v-model={ model.value } />
+        </VForm>
+      ))
+
+      await userEvent.click(screen.getByTestId('increment'))
+      expect(model.value).toBe(1)
+
+      await userEvent.click(screen.getByTestId('decrement'))
+      expect(model.value).toBe(1)
+
+      await userEvent.click(element)
+      await userEvent.keyboard('{ArrowUp}')
+      expect(model.value).toBe(1)
+
+      await userEvent.keyboard('{ArrowDown}')
+      expect(model.value).toBe(1)
+    })
+
+    it('keeps original value when readonly or disabled', async () => {
+      const value1 = ref(120)
+      const value2 = ref(-15)
+      const value3 = ref(40.4)
+      const value4 = ref(-8.6)
+
+      render(() => (
+        <>
+          <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
+          />
+        </>
+      ))
+
+      expect(screen.getByCSS('.readonly-input-1 input')).toHaveValue('120')
+      expect(screen.getByCSS('.readonly-input-2 input')).toHaveValue('-15')
+      expect(screen.getByCSS('.disabled-input-1 input')).toHaveValue('40.4')
+      expect(screen.getByCSS('.disabled-input-2 input')).toHaveValue('-8.6')
+    })
+  })
+
+  describe('native number input quirks', () => {
+    it('should not bypass min', async () => {
+      const model = ref(1)
+      render(() =>
+        <VNumberInput min={ 5 } max={ 15 } v-model={ model.value } />
+      )
+
+      expect.element(screen.getByCSS('input')).toHaveValue('5')
+      expect(model.value).toBe(5)
+    })
+
+    it('should not bypass max', () => {
+      const model = ref(20)
+      render(() =>
+        <VNumberInput min={ 5 } max={ 15 } v-model={ model.value } />
+      )
+
+      expect.element(screen.getByCSS('input')).toHaveValue('15')
+      expect(model.value).toBe(15)
+    })
+
+    it('supports decimal step', async () => {
+      const model = ref(0)
+      render(() => (
+        <VNumberInput
+          step={ 0.03 }
+          v-model={ model.value }
+        />
+      ))
+
+      await userEvent.click(screen.getByTestId('increment'))
+      expect.element(screen.getByCSS('input')).toHaveValue('0.03')
+      expect(model.value).toBe(0.03)
+
+      await userEvent.click(screen.getByTestId('increment'))
+      expect.element(screen.getByCSS('input')).toHaveValue('0.06')
+      expect(model.value).toBe(0.06)
+
+      await userEvent.click(screen.getByTestId('decrement'))
+      expect.element(screen.getByCSS('input')).toHaveValue('0.03')
+      expect(model.value).toBe(0.03)
+
+      await userEvent.click(screen.getByTestId('decrement'))
+      expect.element(screen.getByCSS('input')).toHaveValue('0')
+      expect(model.value).toBe(0)
+    })
+  })
+})
diff --git a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx b/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
deleted file mode 100644
index 0e9a5c5307f..00000000000
--- a/packages/vuetify/src/labs/VNumberInput/__tests__/VNumberInput.spec.cy.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VNumberInput } from '../VNumberInput'
-import { VForm } from '@/components/VForm'
-
-// Utilities
-import { ref } from 'vue'
-
-describe('VNumberInput', () => {
-  it('should prevent NaN from arbitrary input', () => {
-    const scenarios = [
-      { typing: '---', expected: '-' }, // "-" is only allowed once
-      { typing: '1-', expected: '1' }, // "-" is only at the start
-      { typing: '.', expected: '.' }, // "." is allowed at the start
-      { typing: '..', expected: '.' }, // "." is only allowed once
-      { typing: '1...0', expected: '1.0' }, // "." is only allowed once
-      { typing: '123.45.67', expected: '123.4567' }, // "." is only allowed once
-      { typing: 'ab-c8+.iop9', expected: '-8.9' }, // Only numbers, "-", "." are allowed to type in
-    ]
-    scenarios.forEach(({ typing, expected }) => {
-      cy.mount(() => <VNumberInput />)
-        .get('.v-number-input input').focus().realType(typing)
-        .get('.v-number-input input').should('have.value', expected)
-    })
-  })
-
-  it('should reset v-model to null when click:clear is triggered', () => {
-    const model = ref(5)
-
-    cy.mount(() => (
-        <>
-          <VNumberInput
-            clearable
-            v-model={ model.value }
-            readonly
-          />
-        </>
-    ))
-      .get('.v-field__clearable .v-icon--clickable').click()
-      .then(() => {
-        expect(model.value).equal(null)
-      })
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/20337
-  it('should emit model-value when input value is a legit number within range of the max and min', () => {
-    const model = ref(null)
-
-    cy.mount(() => (
-        <>
-          <VNumberInput
-            v-model={ model.value }
-            min={ 5 }
-            max={ 125 }
-          />
-        </>
-    ))
-      .get('.v-number-input input')
-      .focus().realType('1')
-      .then(() => {
-        expect(model.value).equal(null)
-      })
-      .get('.v-number-input input')
-      .realType('0')
-      .then(() => {
-        expect(model.value).equal(10)
-      })
-      .realType('0')
-      .then(() => {
-        expect(model.value).equal(100)
-      })
-      .realType('0')
-      .get('.v-number-input input')
-      .then(() => {
-        expect(model.value).equal(100)
-      })
-      .get('.v-number-input input')
-      .blur()
-      .then(() => {
-        expect(model.value).equal(125)
-      })
-  })
-
-  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)
-      cy.mount(() =>
-        <VNumberInput min={ 5 } max={ 15 } v-model={ numberInputValue.value } ></VNumberInput>
-      )
-        .get('.v-number-input input').should('have.value', '5')
-        .should(() => expect(numberInputValue.value).to.equal(5))
-    })
-
-    it('should not bypass max', () => {
-      const numberInputValue = ref(20)
-      cy.mount(() =>
-        <VNumberInput min={ 5 } max={ 15 } v-model={ numberInputValue.value } ></VNumberInput>
-      )
-        .get('.v-number-input input').should('have.value', '15')
-        .should(() => expect(numberInputValue.value).to.equal(15))
-    })
-
-    it('should support decimal step', () => {
-      const numberInputValue = ref(0)
-      cy.mount(() =>
-        (
-        <VNumberInput
-          step={ 0.03 }
-          v-model={ numberInputValue.value }
-        ></VNumberInput>
-        )
-      )
-        .get('button[name="increment-btn"]')
-        .click()
-        .get('.v-number-input input').should('have.value', '0.03')
-        .then(() => expect(numberInputValue.value).to.equal(0.03))
-        .get('button[name="increment-btn"]')
-        .click()
-        .get('.v-number-input input').should('have.value', '0.06')
-        .then(() => expect(numberInputValue.value).to.equal(0.06))
-        .get('button[name="decrement-btn"]')
-        .click()
-        .get('.v-number-input input').should('have.value', '0.03')
-        .then(() => expect(numberInputValue.value).to.equal(0.03))
-        .get('button[name="decrement-btn"]')
-        .click()
-        .get('.v-number-input input').should('have.value', '0')
-        .then(() => expect(numberInputValue.value).to.equal(0))
-    })
-  })
-})

From 7aae81ec53747e38a01113ff6b7c773f261059f4 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 20 Nov 2024 16:33:01 +1100
Subject: [PATCH 007/127] feat(VConfirmEdit): pass props to actions

closes #20704
---
 .../src/components/VConfirmEdit/VConfirmEdit.tsx  | 15 ++++++++++-----
 .../__test__/VConfirmEdit.spec.browser.tsx        |  2 +-
 .../vuetify/src/labs/VDateInput/VDateInput.tsx    |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
index 6250146aaed..730c6b66234 100644
--- a/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
+++ b/packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx
@@ -19,7 +19,7 @@ export type VConfirmEditSlots<T> = {
     save: () => void
     cancel: () => void
     isPristine: boolean
-    get actions (): VNode
+    get actions (): (props?: {}) => VNode
   }
 }
 
@@ -77,9 +77,8 @@ export const VConfirmEdit = genericComponent<new <T> (
       emit('cancel')
     }
 
-    let actionsUsed = false
-    useRender(() => {
-      const actions = (
+    function actions (actionsProps?: {}) {
+      return (
         <>
           <VBtn
             disabled={ isPristine.value }
@@ -87,6 +86,7 @@ export const VConfirmEdit = genericComponent<new <T> (
             color={ props.color }
             onClick={ cancel }
             text={ t(props.cancelText) }
+            { ...actionsProps }
           />
 
           <VBtn
@@ -95,9 +95,14 @@ export const VConfirmEdit = genericComponent<new <T> (
             color={ props.color }
             onClick={ save }
             text={ t(props.okText) }
+            { ...actionsProps }
           />
         </>
       )
+    }
+
+    let actionsUsed = false
+    useRender(() => {
       return (
         <>
           {
@@ -113,7 +118,7 @@ export const VConfirmEdit = genericComponent<new <T> (
             })
           }
 
-          { !actionsUsed && actions }
+          { !actionsUsed && actions() }
         </>
       )
     })
diff --git a/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.browser.tsx b/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.browser.tsx
index 0e6a7b53889..5be730c0c61 100644
--- a/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.browser.tsx
+++ b/packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.browser.tsx
@@ -79,7 +79,7 @@ describe('VConfirmEdit', () => {
     it('render actions', () => {
       render(() => (
         <VConfirmEdit>
-          { ({ actions }) => actions }
+          { ({ actions }) => actions() }
         </VConfirmEdit>
       ))
       expect(screen.getAllByCSS('button')).toHaveLength(2)
diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
index e451bfc76e9..54202f7cddc 100644
--- a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
+++ b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
@@ -146,7 +146,7 @@ export const VDateInput = genericComponent()({
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                     >
                       {{
-                        actions: !props.hideActions ? () => actions : undefined,
+                        actions: !props.hideActions ? actions : undefined,
                       }}
                     </VDatePicker>
                   )

From 74fc9676c8bba2fb748dfaca3759a92b840f9878 Mon Sep 17 00:00:00 2001
From: raphaelmonnard <raphaelmonnard@users.noreply.github.com>
Date: Wed, 20 Nov 2024 06:39:48 +0100
Subject: [PATCH 008/127] fix(locale): translate calendar.today to french
 (#20712)

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

diff --git a/packages/vuetify/src/locale/fr.ts b/packages/vuetify/src/locale/fr.ts
index 717e2902829..0bf6954ac79 100644
--- a/packages/vuetify/src/locale/fr.ts
+++ b/packages/vuetify/src/locale/fr.ts
@@ -57,7 +57,7 @@ export default {
   },
   calendar: {
     moreEvents: '{0} de plus',
-    today: 'Today',
+    today: 'Aujourd\'hui',
   },
   input: {
     clear: 'Vider {0}',

From fd844e1372d8b46865be4b497198f5718b69a789 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Wed, 20 Nov 2024 06:45:40 +0100
Subject: [PATCH 009/127] fix(VBadge): restore unused SASS variables (#20709)

resolves #19834
---
 packages/vuetify/src/components/VBadge/VBadge.sass | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/vuetify/src/components/VBadge/VBadge.sass b/packages/vuetify/src/components/VBadge/VBadge.sass
index 0c815887d28..2d83462679c 100644
--- a/packages/vuetify/src/components/VBadge/VBadge.sass
+++ b/packages/vuetify/src/components/VBadge/VBadge.sass
@@ -10,6 +10,7 @@
     align-items: center
     display: inline-flex
     border-radius: $badge-border-radius
+    font-family: $badge-font-family
     font-size: $badge-font-size
     font-weight: $badge-font-weight
     height: $badge-height
@@ -25,6 +26,9 @@
 
     @include tools.theme($badge-theme...)
 
+    &:has(.v-icon)
+      padding: $badge-icon-padding
+
     .v-badge--bordered &
       &::after
         border-radius: inherit

From 72df0b4b39ce944bd05053b50b601dea037d4e3c Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 20 Nov 2024 16:56:54 +1100
Subject: [PATCH 010/127] fix(VList): only set aria-selected on selectable
 items

fixes #20666
closes #20708
---
 packages/vuetify/src/components/VList/VListItem.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index dcd422e06ba..ad9d7ed2a3c 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -135,10 +135,11 @@ export const VListItem = genericComponent<VListItemSlots>()({
       (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value))
     )
     const isLink = computed(() => props.link !== false && link.isLink.value)
+    const isSelectable = computed(() => (!!list && (root.selectable.value || root.activatable.value || props.value != null)))
     const isClickable = computed(() =>
       !props.disabled &&
       props.link !== false &&
-      (props.link || link.isClickable.value || (!!list && (root.selectable.value || root.activatable.value || props.value != null)))
+      (props.link || link.isClickable.value || isSelectable.value)
     )
 
     const roundedProps = computed(() => props.rounded || props.nav)
@@ -244,7 +245,13 @@ export const VListItem = genericComponent<VListItemSlots>()({
             props.style,
           ]}
           tabindex={ isClickable.value ? (list ? -2 : 0) : undefined }
-          aria-selected={ root.activatable.value ? isActivated.value : isSelected.value }
+          aria-selected={
+            isSelectable.value ? (
+              root.activatable.value ? isActivated.value
+              : root.selectable.value ? isSelected.value
+              : isActive.value
+            ) : undefined
+          }
           onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={ isClickable.value && props.ripple }

From 54e430ff1aba72cbcd72ea3683e745020100504e Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sat, 23 Nov 2024 23:52:01 +1100
Subject: [PATCH 011/127] docs: you're fired

---
 packages/docs/src/components/about/TeamMember.vue | 2 +-
 packages/docs/src/data/team.json                  | 1 -
 packages/docs/src/i18n/messages/en.json           | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/components/about/TeamMember.vue b/packages/docs/src/components/about/TeamMember.vue
index cd48347ecd0..2884e44a483 100644
--- a/packages/docs/src/components/about/TeamMember.vue
+++ b/packages/docs/src/components/about/TeamMember.vue
@@ -174,7 +174,7 @@
         color: '#212121',
         href: `https://x.com/${props.member.twitter}`,
         icon: '$x',
-        tooltip: 'X',
+        tooltip: 'Xitter',
       })
     }
 
diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json
index dc76b77bfce..294163b331d 100644
--- a/packages/docs/src/data/team.json
+++ b/packages/docs/src/data/team.json
@@ -53,7 +53,6 @@
     "location": "Melbourne, Australia",
     "name": "Kael Watts-Deuchar",
     "team": "core",
-    "twitter": "kaelwd",
     "joined": "Oct 2017"
   },
   "nekosaur": {
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 9edd159e23d..045129a726d 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -359,5 +359,5 @@
   "view-source": "View source",
   "viewport": "Viewport",
   "vuetify": "Vuetify",
-  "x": "X"
+  "x": "Xitter"
 }

From b7df7f06146bbe4652e483a8cc03a5ef794d0e29 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 27 Nov 2024 23:47:48 +1100
Subject: [PATCH 012/127] fix(inputs): normalise inheriting readonly and
 disabled from form

fixes #20730
---
 .../VAutocomplete/VAutocomplete.tsx           |  8 +++----
 .../src/components/VCombobox/VCombobox.tsx    |  8 +++----
 .../src/components/VSelect/VSelect.tsx        |  6 ++---
 packages/vuetify/src/composables/form.ts      |  9 ++++++--
 .../vuetify/src/composables/validation.ts     | 22 +++++++++----------
 .../src/labs/VNumberInput/VNumberInput.tsx    |  6 ++---
 6 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index d9118990211..841821ba2a1 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -166,7 +166,7 @@ export const VAutocomplete = genericComponent<new <
         : typeof props.counterValue === 'number' ? props.counterValue
         : model.value.length
     })
-    const form = useForm()
+    const form = useForm(props)
     const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value)
 
     const displayItems = computed(() => {
@@ -192,7 +192,7 @@ export const VAutocomplete = genericComponent<new <
 
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
-      props.readonly || form?.isReadonly.value
+      form.isReadonly.value || form.isDisabled.value
     ))
 
     const listRef = ref<VList>()
@@ -224,7 +224,7 @@ export const VAutocomplete = genericComponent<new <
       }
     }
     function onKeydown (e: KeyboardEvent) {
-      if (props.readonly || form?.isReadonly.value) return
+      if (form.isReadonly.value) return
 
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
@@ -450,7 +450,7 @@ export const VAutocomplete = genericComponent<new <
             props.class,
           ]}
           style={ props.style }
-          readonly={ props.readonly }
+          readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 262ab674406..29cbded359b 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -165,7 +165,7 @@ export const VCombobox = genericComponent<new <
         return props.multiple ? transformed : (transformed[0] ?? null)
       }
     )
-    const form = useForm()
+    const form = useForm(props)
 
     const hasChips = computed(() => !!(props.chips || slots.chip))
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
@@ -243,7 +243,7 @@ export const VCombobox = genericComponent<new <
 
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
-      props.readonly || form?.isReadonly.value
+      form.isReadonly.value || form.isDisabled.value
     ))
 
     const listRef = ref<VList>()
@@ -276,7 +276,7 @@ export const VCombobox = genericComponent<new <
     }
     // eslint-disable-next-line complexity
     function onKeydown (e: KeyboardEvent) {
-      if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
+      if (isComposingIgnoreKey(e) || form.isReadonly.value) return
 
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
@@ -494,7 +494,7 @@ export const VCombobox = genericComponent<new <
             props.class,
           ]}
           style={ props.style }
-          readonly={ props.readonly }
+          readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 36483e21859..f76fee78fac 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -167,7 +167,7 @@ export const VSelect = genericComponent<new <
         : typeof props.counterValue === 'number' ? props.counterValue
         : model.value.length
     })
-    const form = useForm()
+    const form = useForm(props)
     const selectedValues = computed(() => model.value.map(selection => selection.value))
     const isFocused = shallowRef(false)
     const label = computed(() => menu.value ? props.closeText : props.openText)
@@ -184,7 +184,7 @@ export const VSelect = genericComponent<new <
 
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
-      props.readonly || form?.isReadonly.value
+      form.isReadonly.value || form.isDisabled.value
     ))
 
     const computedMenuProps = computed(() => {
@@ -215,7 +215,7 @@ export const VSelect = genericComponent<new <
       }
     }
     function onKeydown (e: KeyboardEvent) {
-      if (!e.key || props.readonly || form?.isReadonly.value) return
+      if (!e.key || form.isReadonly.value) return
 
       if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
         e.preventDefault()
diff --git a/packages/vuetify/src/composables/form.ts b/packages/vuetify/src/composables/form.ts
index 803c6d43bee..b87f5204b17 100644
--- a/packages/vuetify/src/composables/form.ts
+++ b/packages/vuetify/src/composables/form.ts
@@ -192,6 +192,11 @@ export function createForm (props: FormProps) {
   }
 }
 
-export function useForm () {
-  return inject(FormKey, null)
+export function useForm (props?: { readonly: boolean | null, disabled: boolean | null }) {
+  const form = inject(FormKey, null)
+  return {
+    ...form,
+    isReadonly: computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
+    isDisabled: computed(() => !!(props?.disabled ?? form?.isDisabled.value)),
+  }
 }
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
index 5567e71f351..01a1868e4fa 100644
--- a/packages/vuetify/src/composables/validation.ts
+++ b/packages/vuetify/src/composables/validation.ts
@@ -83,22 +83,20 @@ export function useValidation (
 ) {
   const model = useProxiedModel(props, 'modelValue')
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue)
-  const form = useForm()
+  const form = useForm(props)
   const internalErrorMessages = ref<string[]>([])
   const isPristine = shallowRef(true)
   const isDirty = computed(() => !!(
     wrapInArray(model.value === '' ? null : model.value).length ||
     wrapInArray(validationModel.value === '' ? null : validationModel.value).length
   ))
-  const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value))
-  const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value))
   const errorMessages = computed(() => {
     return props.errorMessages?.length
       ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors))
       : internalErrorMessages.value
   })
   const validateOn = computed(() => {
-    let value = (props.validateOn ?? form?.validateOn.value) || 'input'
+    let value = (props.validateOn ?? form.validateOn?.value) || 'input'
     if (value === 'lazy') value = 'input lazy'
     if (value === 'eager') value = 'input eager'
     const set = new Set(value?.split(' ') ?? [])
@@ -125,8 +123,8 @@ export function useValidation (
     return {
       [`${name}--error`]: isValid.value === false,
       [`${name}--dirty`]: isDirty.value,
-      [`${name}--disabled`]: isDisabled.value,
-      [`${name}--readonly`]: isReadonly.value,
+      [`${name}--disabled`]: form.isDisabled.value,
+      [`${name}--readonly`]: form.isReadonly.value,
     }
   })
 
@@ -134,7 +132,7 @@ export function useValidation (
   const uid = computed(() => props.name ?? unref(id))
 
   onBeforeMount(() => {
-    form?.register({
+    form.register?.({
       id: uid.value,
       vm,
       validate,
@@ -144,14 +142,14 @@ export function useValidation (
   })
 
   onBeforeUnmount(() => {
-    form?.unregister(uid.value)
+    form.unregister?.(uid.value)
   })
 
   onMounted(async () => {
     if (!validateOn.value.lazy) {
       await validate(!validateOn.value.eager)
     }
-    form?.update(uid.value, isValid.value, errorMessages.value)
+    form.update?.(uid.value, isValid.value, errorMessages.value)
   })
 
   useToggleScope(() => validateOn.value.input || (validateOn.value.invalidInput && isValid.value === false), () => {
@@ -175,7 +173,7 @@ export function useValidation (
   })
 
   watch([isValid, errorMessages], () => {
-    form?.update(uid.value, isValid.value, errorMessages.value)
+    form.update?.(uid.value, isValid.value, errorMessages.value)
   })
 
   async function reset () {
@@ -228,8 +226,8 @@ export function useValidation (
   return {
     errorMessages,
     isDirty,
-    isDisabled,
-    isReadonly,
+    isDisabled: form.isDisabled,
+    isReadonly: form.isReadonly,
     isPristine,
     isValid,
     isValidating,
diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index bbf59a65c74..5e0a2835bbe 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -91,9 +91,9 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const stepDecimals = computed(() => getDecimals(props.step))
     const modelDecimals = computed(() => typeof model.value === 'number' ? getDecimals(model.value) : 0)
 
-    const form = useForm()
+    const form = useForm(props)
     const controlsDisabled = computed(() => (
-      props.disabled || props.readonly || form?.isReadonly.value
+      form.isDisabled.value || form.isReadonly.value
     ))
 
     const canIncrease = computed(() => {
@@ -119,7 +119,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const decrementSlotProps = computed(() => ({ click: onClickDown }))
 
     onMounted(() => {
-      if (!props.readonly && !props.disabled) {
+      if (!controlsDisabled.value) {
         clampModel()
       }
     })

From aa4c7bb17d8671c09779293aa73bdff00d10fae2 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:52:42 +0100
Subject: [PATCH 013/127] fix: expand accepted icon prop types (#20727)

fixes #19858
---
 packages/vuetify/src/components/VChip/VChip.tsx          | 2 +-
 .../src/components/VDatePicker/VDatePickerHeader.tsx     | 3 ++-
 packages/vuetify/src/components/VList/VList.tsx          | 5 +++--
 packages/vuetify/src/components/VStepper/VStepper.tsx    | 7 ++++---
 .../vuetify/src/components/VStepper/VStepperItem.tsx     | 9 +++++----
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index 8c38e4e7bf6..ad36f615d76 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -68,7 +68,7 @@ export const makeVChipProps = propsFactory({
   draggable: Boolean,
   filter: Boolean,
   filterIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete',
   },
   label: Boolean,
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx
index 15e13d99bee..2149d8dd912 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx
@@ -7,6 +7,7 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 
 // Composables
 import { useBackgroundColor } from '@/composables/color'
+import { IconValue } from '@/composables/icons'
 import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
@@ -20,7 +21,7 @@ export type VDatePickerHeaderSlots = {
 }
 
 export const makeVDatePickerHeaderProps = propsFactory({
-  appendIcon: String,
+  appendIcon: IconValue,
   color: String,
   header: String,
   transition: String,
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index cbdc04b2cce..c5cc5d8b490 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -13,6 +13,7 @@ import { provideDefaults } from '@/composables/defaults'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
+import { IconValue } from '@/composables/icons'
 import { makeItemsProps } from '@/composables/list-items'
 import { makeNestedProps, useNested } from '@/composables/nested/nested'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
@@ -86,8 +87,8 @@ export const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
-  expandIcon: String,
-  collapseIcon: String,
+  expandIcon: IconValue,
+  collapseIcon: IconValue,
   lines: {
     type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,
     default: 'one',
diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
index bdd67183429..d8cdbc408fe 100644
--- a/packages/vuetify/src/components/VStepper/VStepper.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -15,6 +15,7 @@ import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'
 import { provideDefaults } from '@/composables/defaults'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { makeGroupProps, useGroup } from '@/composables/group'
+import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { computed, toRefs } from 'vue'
@@ -48,10 +49,10 @@ export type VStepperSlots = {
 export const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
-  completeIcon: String,
-  editIcon: String,
+  completeIcon: IconValue,
+  editIcon: IconValue,
   editable: Boolean,
-  errorIcon: String,
+  errorIcon: IconValue,
   hideActions: Boolean,
   items: {
     type: Array as PropType<readonly StepperItem[]>,
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 7873532a86c..0ffa8529790 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 { IconValue } from '@/composables/icons'
 import { genOverlays } from '@/composables/variant'
 
 // Directives
@@ -47,20 +48,20 @@ export const makeStepperItemProps = propsFactory({
   subtitle: String,
   complete: Boolean,
   completeIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete',
   },
   editable: Boolean,
   editIcon: {
-    type: String,
+    type: IconValue,
     default: '$edit',
   },
   error: Boolean,
   errorIcon: {
-    type: String,
+    type: IconValue,
     default: '$error',
   },
-  icon: String,
+  icon: IconValue,
   ripple: {
     type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,
     default: true,

From 0fb92ed59c2c212508265238599e0b25d56df409 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Fri, 29 Nov 2024 14:14:19 +0800
Subject: [PATCH 014/127] fix(VTreeview): activated emits twice on leafs
 (#20739)

---
 .../src/labs/VTreeview/VTreeviewItem.tsx      | 11 +++-------
 .../__tests__/VTreeview.spec.browser.tsx      | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index c3a33eee6ba..b6968afa059 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -47,13 +47,8 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
       (props.link || link.isClickable.value || (props.value != null && !!vListItemRef.value?.list) || isActivatableGroupActivator.value)
     )
 
-    function activateItem (e: MouseEvent | KeyboardEvent) {
-      if (
-        !isClickable.value ||
-        (!isActivatableGroupActivator.value && vListItemRef.value?.isGroupActivator)
-      ) return
-
-      if (vListItemRef.value?.root.activatable.value) {
+    function activateGroupActivator (e: MouseEvent | KeyboardEvent) {
+      if (isClickable.value && isActivatableGroupActivator.value) {
         vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e)
       }
     }
@@ -78,7 +73,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             props.class,
           ]}
           ripple={ false }
-          onClick={ props.onClick ?? activateItem }
+          onClick={ props.onClick ?? activateGroupActivator }
         >
           {{
             ...slots,
diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
index 0e9ef6b7ec1..ec74dfca194 100644
--- a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
+++ b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
@@ -156,6 +156,27 @@ describe.each([
       await userEvent.click(screen.getByText(/Nekosaur/))
       expect(activated.value).toStrictEqual([203])
     })
+
+    // https://github.com/vuetifyjs/vuetify/issues/20665
+    it('should emit only once', async () => {
+      const onActivated = vi.fn()
+      render(() => (
+        <VTreeview
+          open-all
+          items={ items }
+          item-value="id"
+          activatable
+          active-strategy="independent"
+          onUpdate:activated={ onActivated }
+        />
+      ))
+
+      await userEvent.click(screen.getByText(/John/))
+      expect(onActivated).toHaveBeenCalledOnce()
+
+      await userEvent.click(screen.getByText(/Human Resources/))
+      expect(onActivated).toHaveBeenCalledTimes(2)
+    })
   })
 
   describe('select', () => {

From 1e099f2c1858617a4447c308326cf204f9e9d112 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:24:02 +0100
Subject: [PATCH 015/127] feat(VChip): add base-color prop (#20702)

resolves #19678
---
 .../api-generator/src/locale/en/VChipGroup.json  |  1 +
 packages/vuetify/src/components/VChip/VChip.tsx  | 16 ++++++++++++----
 .../src/components/VChipGroup/VChipGroup.tsx     |  2 ++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VChipGroup.json b/packages/api-generator/src/locale/en/VChipGroup.json
index 66adad8c9ed..cc886fadebc 100644
--- a/packages/api-generator/src/locale/en/VChipGroup.json
+++ b/packages/api-generator/src/locale/en/VChipGroup.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "baseColor": "Sets the color of component when not focused. Recommended with `color` or `filter` to properly highlight selected items.",
     "centerActive": "Forces the selected chip to be centered.",
     "column": "Remove horizontal pagination and wrap items as needed.",
     "filter": "Applies an checkmark icon in front of every chip for using it like a filter.",
diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index 8c38e4e7bf6..31e97c3fe29 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -56,6 +56,7 @@ export const makeVChipProps = propsFactory({
   activeClass: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   closable: Boolean,
   closeIcon: {
     type: IconValue,
@@ -122,7 +123,6 @@ export const VChip = genericComponent<VChipSlots>()({
   setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
     const { borderClasses } = useBorder(props)
-    const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
@@ -150,6 +150,15 @@ export const VChip = genericComponent<VChipSlots>()({
       },
     }))
 
+    const variantProps = computed(() => {
+      const showColor = !group || group.isSelected.value
+      return ({
+        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        variant: props.variant,
+      })
+    })
+    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)
+
     function onClick (e: MouseEvent) {
       emit('click', e)
 
@@ -174,7 +183,6 @@ export const VChip = genericComponent<VChipSlots>()({
       const hasFilter = !!(slots.filter || props.filter) && group
       const hasPrependMedia = !!(props.prependIcon || props.prependAvatar)
       const hasPrepend = !!(hasPrependMedia || slots.prepend)
-      const hasColor = !group || group.isSelected.value
 
       return isActive.value && (
         <Tag
@@ -189,7 +197,7 @@ export const VChip = genericComponent<VChipSlots>()({
             },
             themeClasses.value,
             borderClasses.value,
-            hasColor ? colorClasses.value : undefined,
+            colorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             roundedClasses.value,
@@ -199,7 +207,7 @@ export const VChip = genericComponent<VChipSlots>()({
             props.class,
           ]}
           style={[
-            hasColor ? colorStyles.value : undefined,
+            colorStyles.value,
             props.style,
           ]}
           disabled={ props.disabled || undefined }
diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
index 8c9b12747b3..af8883637b5 100644
--- a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
+++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
@@ -23,6 +23,7 @@ import type { GenericProps } from '@/util'
 export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')
 
 export const makeVChipGroupProps = propsFactory({
+  baseColor: String,
   column: Boolean,
   filter: Boolean,
   valueComparator: {
@@ -69,6 +70,7 @@ export const VChipGroup = genericComponent<new <T>(
 
     provideDefaults({
       VChip: {
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled'),
         filter: toRef(props, 'filter'),

From b42fa06a988e1830c85952ae8c90346fd68de264 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:24:53 +0100
Subject: [PATCH 016/127] docs(border): fix typo in colors example (#20746)

resolves #20745
---
 packages/docs/src/examples/border/colors.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/examples/border/colors.vue b/packages/docs/src/examples/border/colors.vue
index 3d22020222b..9e239d1cc95 100644
--- a/packages/docs/src/examples/border/colors.vue
+++ b/packages/docs/src/examples/border/colors.vue
@@ -11,7 +11,7 @@
       <v-col cols="auto">
         <div class="text-center">
           <v-sheet border="success sm" height="64" width="64" rounded></v-sheet>
-          <div class="text-caption">"sucess sm"</div>
+          <div class="text-caption">"success sm"</div>
         </div>
       </v-col>
 

From f07b54c83228f73d607361bd34d113b0c365f662 Mon Sep 17 00:00:00 2001
From: Malachi Batt <137836110+MalachiBatt@users.noreply.github.com>
Date: Tue, 3 Dec 2024 23:20:24 +1300
Subject: [PATCH 017/127] docs(VProgressLinear): change dark-blue color
 selection (#20750)

---
 packages/docs/src/examples/v-progress-linear/usage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/examples/v-progress-linear/usage.vue b/packages/docs/src/examples/v-progress-linear/usage.vue
index 9b374fcc9ea..f0f3a6305e7 100644
--- a/packages/docs/src/examples/v-progress-linear/usage.vue
+++ b/packages/docs/src/examples/v-progress-linear/usage.vue
@@ -12,7 +12,7 @@
     <template v-slot:configuration>
       <v-select
         v-model="color"
-        :items="['primary', 'blue-lighten-3', 'error', 'dark-blue']"
+        :items="['primary', 'blue-lighten-3', 'error', 'blue-darken-3']"
         label="Color"
         clearable
       ></v-select>

From 501fa1bc935457af174d385f9cdf692c3b48fe19 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:20:50 +0100
Subject: [PATCH 018/127] fix(VChip): utilize `active-class` (#20716)

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

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index ad36f615d76..0aac78b625b 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -186,6 +186,7 @@ export const VChip = genericComponent<VChipSlots>()({
               'v-chip--link': isClickable.value,
               'v-chip--filter': hasFilter,
               'v-chip--pill': props.pill,
+              [`${props.activeClass}`]: props.activeClass && link.isActive?.value,
             },
             themeClasses.value,
             borderClasses.value,

From 8b9cca4079e4f31258c0a83592db7bf059e36bb6 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 3 Dec 2024 17:24:53 +0700
Subject: [PATCH 019/127] fix(VField): only render field label if label is
 passed (#20722)

fixes #20427
---
 packages/vuetify/src/components/VField/VField.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index b3d658c127a..6ad56c5efdb 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -303,9 +303,11 @@ export const VField = genericComponent<new <T>(
               </VFieldLabel>
             )}
 
-            <VFieldLabel ref={ labelRef } for={ id.value }>
-              { label() }
-            </VFieldLabel>
+            { hasLabel.value && (
+              <VFieldLabel key="label" ref={ labelRef } for={ id.value }>
+                { label() }
+              </VFieldLabel>
+            )}
 
             { slots.default?.({
               ...slotProps.value,

From ca85fc0bd098a27bcd57aa7acf51e85968061a74 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 3 Dec 2024 21:25:32 +1100
Subject: [PATCH 020/127] chore(release): publish v3.7.5

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

diff --git a/lerna.json b/lerna.json
index cc0a72a1952..7cd991bf6d8 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.4"
+  "version": "3.7.5"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index d901ba6797e..1e9e96b1e87 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.4",
+  "version": "3.7.5",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 6ea0dba64be..d5180cbebb2 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.7.4",
+  "version": "3.7.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 4a18c195cf6..24bc681ce07 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.4",
+  "version": "3.7.5",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 4a628a39ffcef6d4ce711a8a23551bc7a09eb564 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 9 Dec 2024 15:48:02 +1100
Subject: [PATCH 021/127] fix(virtual): add fallback scrollend timeout

closes #20566
closes #20757
---
 packages/vuetify/src/composables/virtual.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
index d92b5a01678..dd2eee76ede 100644
--- a/packages/vuetify/src/composables/virtual.ts
+++ b/packages/vuetify/src/composables/virtual.ts
@@ -149,6 +149,7 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     }
   })
 
+  let scrollTimeout = -1
   function handleScroll () {
     if (!containerRef.value || !markerRef.value) return
 
@@ -169,6 +170,9 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     lastScrollTop = scrollTop
     lastScrollTime = scrollTime
 
+    clearTimeout(scrollTimeout)
+    scrollTimeout = setTimeout(handleScrollend, 500)
+
     calculateVisibleItems()
   }
   function handleScrollend () {
@@ -177,6 +181,7 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     scrollVelocity = 0
     lastScrollTime = 0
 
+    clearTimeout(scrollTimeout)
     calculateVisibleItems()
   }
 

From f804c506813985494e5afa2e6610bd06fcb08cc0 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Wed, 11 Dec 2024 08:45:55 +0100
Subject: [PATCH 022/127] fix(VSelectionControl): label opacity matching
 regular text (#20738)

fixes #18804

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../src/components/VSelectionControl/VSelectionControl.sass | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
index 20806de83d8..688cc0749a3 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass
@@ -18,16 +18,12 @@
       white-space: normal
       word-break: break-word
       height: 100%
+      opacity: 1
 
     &--disabled
       opacity: var(--v-disabled-opacity)
       pointer-events: none
 
-    &--error,
-    &--disabled
-      .v-label
-        opacity: 1
-
     &--error:not(.v-selection-control--disabled)
       .v-label
         color: rgb(var(--v-theme-error))

From c19bcf69cb5d99b989fb8d46c5fd4ec89777c48b Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 11 Dec 2024 18:53:45 +1100
Subject: [PATCH 023/127] fix(VRangeSlider): do not focus other thumb if
 min==max

fixes #20726
---
 packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
index a3e4e0a195d..f9fc67613fd 100644
--- a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
+++ b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
@@ -212,6 +212,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
                     // and they are both at minimum value
                     // but only if focused from outside.
                     if (
+                      max.value !== min.value &&
                       model.value[0] === model.value[1] &&
                       model.value[1] === min.value &&
                       e.relatedTarget !== stopThumbRef.value?.$el
@@ -247,6 +248,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
                     // and they are both at maximum value
                     // but only if focused from outside.
                     if (
+                      max.value !== min.value &&
                       model.value[0] === model.value[1] &&
                       model.value[0] === max.value &&
                       e.relatedTarget !== startThumbRef.value?.$el

From 45a61116db71e3adb8eb7a52b848352a10c2d111 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 11 Dec 2024 18:55:00 +1100
Subject: [PATCH 024/127] chore: fix build error

---
 packages/vuetify/src/composables/virtual.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
index dd2eee76ede..6560d13a576 100644
--- a/packages/vuetify/src/composables/virtual.ts
+++ b/packages/vuetify/src/composables/virtual.ts
@@ -170,8 +170,8 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     lastScrollTop = scrollTop
     lastScrollTime = scrollTime
 
-    clearTimeout(scrollTimeout)
-    scrollTimeout = setTimeout(handleScrollend, 500)
+    window.clearTimeout(scrollTimeout)
+    scrollTimeout = window.setTimeout(handleScrollend, 500)
 
     calculateVisibleItems()
   }
@@ -181,7 +181,7 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     scrollVelocity = 0
     lastScrollTime = 0
 
-    clearTimeout(scrollTimeout)
+    window.clearTimeout(scrollTimeout)
     calculateVisibleItems()
   }
 

From 56fcb86a65c2b6045549258bb93e151b369bd816 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:33:36 +0100
Subject: [PATCH 025/127] docs(VCombobox): restore advanced example (#20707)

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../src/examples/v-combobox/misc-advanced.vue | 236 +++++++++++-------
 .../docs/src/pages/en/components/combobox.md  |   8 +
 2 files changed, 155 insertions(+), 89 deletions(-)

diff --git a/packages/docs/src/examples/v-combobox/misc-advanced.vue b/packages/docs/src/examples/v-combobox/misc-advanced.vue
index 0b945b77a25..21f75a7781e 100644
--- a/packages/docs/src/examples/v-combobox/misc-advanced.vue
+++ b/packages/docs/src/examples/v-combobox/misc-advanced.vue
@@ -2,112 +2,161 @@
   <v-container fluid>
     <v-combobox
       v-model="model"
-      v-model:search-input="search"
+      v-model:search="search"
       :custom-filter="filter"
-      :hide-no-data="!search"
       :items="items"
       label="Search for an option"
       variant="solo"
       hide-selected
       multiple
-      small-chips
     >
-      <template v-slot:no-data>
-        <v-list-item>
-          <span class="subheading">Create</span>
+      <template v-slot:selection="{ item, index }">
+        <v-chip
+          v-if="item === Object(item)"
+          :color="`${item.raw.color}-lighten-3`"
+          :text="item.title"
+          size="small"
+          variant="flat"
+          closable
+          label
+          @click:close="removeSelection(index)"
+        ></v-chip>
+      </template>
+      <template v-slot:item="{ props, item }">
+        <v-list-item v-if="item.raw.header && search">
+          <span class="mr-3">Create</span>
           <v-chip
-            :color="`${colors[nonce - 1]} lighten-3`"
+            :color="`${colors[nonce - 1]}-lighten-3`"
+            size="small"
+            variant="flat"
             label
-            small
           >
             {{ search }}
           </v-chip>
         </v-list-item>
-      </template>
-      <template v-slot:selection="{ attrs, item, parent, selected }">
-        <v-chip
-          v-if="item === Object(item)"
-          v-bind="attrs"
-          :color="`${item.color} lighten-3`"
-          :model-value="selected"
-          label
-          small
-        >
-          <span class="pe-2">
-            {{ item.text }}
-          </span>
-          <v-icon
-            size="small"
-            @click="parent.selectItem(item)"
-          >
-            $delete
-          </v-icon>
-        </v-chip>
-      </template>
-      <template v-slot:item="{ index, item }">
-        <v-text-field
-          v-if="editing === item"
-          v-model="editing.text"
-          bg-color="transparent"
-          variant="solo"
-          autofocus
-          flat
-          hide-details
-          @keyup.enter="edit(index, item)"
-        ></v-text-field>
-        <v-chip
-          v-else
-          :color="`${item.color} lighten-3`"
-          dark
-          label
-          small
-        >
-          {{ item.text }}
-        </v-chip>
-        <v-spacer></v-spacer>
-        <v-list-item-action @click.stop>
-          <v-btn
-            icon
-            @click.stop.prevent="edit(index, item)"
-          >
-            <v-icon>{{ editing !== item ? 'mdi-pencil' : 'mdi-check' }}</v-icon>
-          </v-btn>
-        </v-list-item-action>
+        <v-list-subheader v-else-if="item.raw.header" :title="item.title"></v-list-subheader>
+        <v-list-item v-else @click="props.onClick">
+          <v-text-field
+            v-if="editingItem === item.raw"
+            v-model="editingItem.title"
+            bg-color="transparent"
+            class="mr-3"
+            density="compact"
+            variant="plain"
+            autofocus
+            hide-details
+            @click.stop
+            @keydown.stop
+            @keyup.enter="edit(item.raw)"
+          ></v-text-field>
+          <v-chip
+            v-else
+            :color="`${item.raw.color}-lighten-3`"
+            :text="item.raw.title"
+            variant="flat"
+            label
+          ></v-chip>
+          <template v-slot:append>
+            <v-btn
+              :color="editingItem !== item.raw ? 'primary' : 'success'"
+              :icon="editingItem !== item.raw ? 'mdi-pencil' : 'mdi-check'"
+              size="small"
+              variant="text"
+              @click.stop.prevent="edit(item.raw)"
+            ></v-btn>
+          </template>
+        </v-list-item>
       </template>
     </v-combobox>
   </v-container>
 </template>
 
+<script setup>
+  import { onMounted, ref, watch } from 'vue'
+
+  const colors = ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange']
+  const editingItem = ref(null)
+  const items = ref([
+    { header: true, title: 'Select an option or create one' },
+    { title: 'Foo', color: 'blue' },
+    { title: 'Bar', color: 'red' },
+  ])
+  const nonce = ref(1)
+  const model = ref([])
+  const search = ref(null)
+
+  onMounted(() => {
+    model.value.push(items.value[1])
+  })
+
+  watch(model, (val, prev) => {
+    if (val.length === prev.length) return
+
+    model.value = val.map(v => {
+      if (typeof v === 'string') {
+        v = {
+          title: v,
+          color: colors[nonce.value - 1],
+        }
+
+        items.value.push(v)
+
+        nonce.value++
+      }
+
+      return v
+    })
+  })
+
+  function edit (item) {
+    if (!editingItem.value) {
+      editingItem.value = item
+    } else {
+      editingItem.value = null
+    }
+  }
+
+  function filter (value, queryText, item) {
+    const toLowerCaseString = val =>
+      String(val != null ? val : '').toLowerCase()
+
+    const query = toLowerCaseString(queryText)
+
+    const availableOptions = items.value.filter(x => !model.value.includes(x))
+    const hasAnyMatch = availableOptions.some(
+      x => !x.header && toLowerCaseString(x.title).includes(query)
+    )
+    if (item.raw.header) return !hasAnyMatch
+
+    const text = toLowerCaseString(item.raw.title)
+
+    return text.includes(query)
+  }
+
+  function removeSelection (index) {
+    model.value.splice(index, 1)
+  }
+</script>
+
 <script>
   export default {
     data: () => ({
-      activator: null,
-      attach: null,
       colors: ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange'],
-      editing: null,
-      editingIndex: -1,
+      editingItem: null,
       items: [
-        { header: 'Select an option or create one' },
+        { header: true, title: 'Select an option or create one' },
         {
-          text: 'Foo',
+          title: 'Foo',
           color: 'blue',
         },
         {
-          text: 'Bar',
+          title: 'Bar',
           color: 'red',
         },
       ],
       nonce: 1,
-      menu: false,
-      model: [
-        {
-          text: 'Foo',
-          color: 'blue',
-        },
-      ],
-      x: 0,
+      model: [],
       search: null,
-      y: 0,
     }),
 
     watch: {
@@ -117,7 +166,7 @@
         this.model = val.map(v => {
           if (typeof v === 'string') {
             v = {
-              text: v,
+              title: v,
               color: this.colors[this.nonce - 1],
             }
 
@@ -131,27 +180,36 @@
       },
     },
 
+    mounted () {
+      this.model = [this.items[1]]
+    },
+
     methods: {
-      edit (index, item) {
-        if (!this.editing) {
-          this.editing = item
-          this.editingIndex = index
+      edit (item) {
+        if (!this.editingItem) {
+          this.editingItem = item
         } else {
-          this.editing = null
-          this.editingIndex = -1
+          this.editingItem = null
         }
       },
-      filter (item, queryText, itemText) {
-        if (item.header) return false
+      filter (value, queryText, item) {
+        const toLowerCaseString = val =>
+          String(val != null ? val : '').toLowerCase()
 
-        const hasValue = val => val != null ? val : ''
+        const query = toLowerCaseString(queryText)
 
-        const text = hasValue(itemText)
-        const query = hasValue(queryText)
+        const availableOptions = this.items.filter(x => !this.model.includes(x))
+        const hasAnyMatch = availableOptions.some(
+          x => !x.header && toLowerCaseString(x.title).includes(query)
+        )
+        if (item.raw.header) return !hasAnyMatch
 
-        return text.toString()
-          .toLowerCase()
-          .indexOf(query.toString().toLowerCase()) > -1
+        const text = toLowerCaseString(item.raw.title)
+
+        return text.includes(query)
+      },
+      removeSelection (index) {
+        this.model.splice(index, 1)
       },
     },
   }
diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md
index 2e60804297a..8795c35c656 100644
--- a/packages/docs/src/pages/en/components/combobox.md
+++ b/packages/docs/src/pages/en/components/combobox.md
@@ -71,3 +71,11 @@ Previously known as **tags** - user is allowed to enter more than one value.
 In this example we utilize a custom **no-data** slot to provide context to the user when searching / creating items.
 
 <ExamplesExample file="v-combobox/slot-no-data" />
+
+### Misc
+
+#### Advanced custom options
+
+The `v-combobox` improves upon the added functionality from `v-select` and `v-autocomplete`. This provides you with an expansive interface to create truly customized implementations. This example takes advantage of some more advanced features such as a custom **filter** algorithm, inline list editing and dynamic input items.
+
+<ExamplesExample file="v-combobox/misc-advanced" />

From 89c58dd3b40169920d7530f6b4d2da350ac785c3 Mon Sep 17 00:00:00 2001
From: John Leider <9064066+johnleider@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:59:16 -0600
Subject: [PATCH 026/127] feat(VFileUpload): add new component (#19667)

Co-authored-by: MajesticPotatoe <amajesticpotatoe@gmail.com>
---
 packages/docs/src/data/nav.json               |   4 +
 .../examples/v-file-upload/prop-content.vue   |   8 +
 .../examples/v-file-upload/prop-density.vue   |  19 +
 .../examples/v-file-upload/prop-disabled.vue  |   3 +
 .../src/examples/v-file-upload/prop-scrim.vue |   3 +
 .../src/examples/v-file-upload/slot-item.vue  |  26 ++
 .../docs/src/examples/v-file-upload/usage.vue |  48 +++
 .../src/pages/en/components/file-upload.md    |  99 +++++
 packages/vuetify/src/iconsets/mdi.ts          |   1 +
 .../src/labs/VFileUpload/VFileUpload.sass     |  75 ++++
 .../src/labs/VFileUpload/VFileUpload.tsx      | 340 ++++++++++++++++++
 .../src/labs/VFileUpload/VFileUploadItem.tsx  | 140 ++++++++
 .../src/labs/VFileUpload/_variables.scss      |  12 +
 .../vuetify/src/labs/VFileUpload/index.ts     |   2 +
 packages/vuetify/src/labs/components.ts       |   1 +
 packages/vuetify/src/locale/af.ts             |   5 +
 packages/vuetify/src/locale/ar.ts             |   5 +
 packages/vuetify/src/locale/az.ts             |   5 +
 packages/vuetify/src/locale/bg.ts             |   5 +
 packages/vuetify/src/locale/ca.ts             |   5 +
 packages/vuetify/src/locale/ckb.ts            |   5 +
 packages/vuetify/src/locale/cs.ts             |   5 +
 packages/vuetify/src/locale/da.ts             |   5 +
 packages/vuetify/src/locale/de.ts             |   5 +
 packages/vuetify/src/locale/el.ts             |   5 +
 packages/vuetify/src/locale/en.ts             |   5 +
 packages/vuetify/src/locale/es.ts             |   5 +
 packages/vuetify/src/locale/et.ts             |   5 +
 packages/vuetify/src/locale/fa.ts             |   5 +
 packages/vuetify/src/locale/fi.ts             |   5 +
 packages/vuetify/src/locale/fr.ts             |   5 +
 packages/vuetify/src/locale/he.ts             |   5 +
 packages/vuetify/src/locale/hr.ts             |   5 +
 packages/vuetify/src/locale/hu.ts             |   5 +
 packages/vuetify/src/locale/id.ts             |   5 +
 packages/vuetify/src/locale/it.ts             |   5 +
 packages/vuetify/src/locale/ja.ts             |   5 +
 packages/vuetify/src/locale/km.ts             |   5 +
 packages/vuetify/src/locale/ko.ts             |   5 +
 packages/vuetify/src/locale/lt.ts             |   5 +
 packages/vuetify/src/locale/lv.ts             |   5 +
 packages/vuetify/src/locale/nl.ts             |   5 +
 packages/vuetify/src/locale/no.ts             |   5 +
 packages/vuetify/src/locale/pl.ts             |   5 +
 packages/vuetify/src/locale/pt.ts             |   5 +
 packages/vuetify/src/locale/ro.ts             |   5 +
 packages/vuetify/src/locale/ru.ts             |   5 +
 packages/vuetify/src/locale/sk.ts             |   5 +
 packages/vuetify/src/locale/sl.ts             |   5 +
 packages/vuetify/src/locale/sr-Cyrl.ts        |   5 +
 packages/vuetify/src/locale/sr-Latn.ts        |   5 +
 packages/vuetify/src/locale/sv.ts             |   5 +
 packages/vuetify/src/locale/th.ts             |   5 +
 packages/vuetify/src/locale/tr.ts             |   5 +
 packages/vuetify/src/locale/uk.ts             |   5 +
 packages/vuetify/src/locale/vi.ts             |   5 +
 packages/vuetify/src/locale/zh-Hans.ts        |   5 +
 packages/vuetify/src/locale/zh-Hant.ts        |   5 +
 58 files changed, 996 insertions(+)
 create mode 100644 packages/docs/src/examples/v-file-upload/prop-content.vue
 create mode 100644 packages/docs/src/examples/v-file-upload/prop-density.vue
 create mode 100644 packages/docs/src/examples/v-file-upload/prop-disabled.vue
 create mode 100644 packages/docs/src/examples/v-file-upload/prop-scrim.vue
 create mode 100644 packages/docs/src/examples/v-file-upload/slot-item.vue
 create mode 100644 packages/docs/src/examples/v-file-upload/usage.vue
 create mode 100644 packages/docs/src/pages/en/components/file-upload.md
 create mode 100644 packages/vuetify/src/labs/VFileUpload/VFileUpload.sass
 create mode 100644 packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx
 create mode 100644 packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
 create mode 100644 packages/vuetify/src/labs/VFileUpload/_variables.scss
 create mode 100644 packages/vuetify/src/labs/VFileUpload/index.ts

diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 9d0a526bde2..d0f83422675 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -237,6 +237,10 @@
         "title": "date-inputs",
         "subfolder": "components"
       },
+      {
+        "title": "file-upload",
+        "subfolder": "components"
+      },
       {
         "title": "number-inputs",
         "subfolder": "components"
diff --git a/packages/docs/src/examples/v-file-upload/prop-content.vue b/packages/docs/src/examples/v-file-upload/prop-content.vue
new file mode 100644
index 00000000000..8d9a6070318
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/prop-content.vue
@@ -0,0 +1,8 @@
+<template>
+  <v-file-upload
+    browse-text="Local Filesystem"
+    divider-text="or choose locally"
+    icon="mdi-upload"
+    title="Drag and Drop Here"
+  ></v-file-upload>
+</template>
diff --git a/packages/docs/src/examples/v-file-upload/prop-density.vue b/packages/docs/src/examples/v-file-upload/prop-density.vue
new file mode 100644
index 00000000000..12e8556663f
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/prop-density.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="text-center pa-2 mb-2">
+    <v-btn-toggle v-model="density" density="comfortable" border divided rounded>
+      <v-btn value="default">Default</v-btn>
+
+      <v-btn value="comfortable">Comfortable</v-btn>
+
+      <v-btn value="compact">Compact</v-btn>
+    </v-btn-toggle>
+  </div>
+
+  <v-file-upload :density="density"></v-file-upload>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const density = shallowRef('default')
+</script>
diff --git a/packages/docs/src/examples/v-file-upload/prop-disabled.vue b/packages/docs/src/examples/v-file-upload/prop-disabled.vue
new file mode 100644
index 00000000000..af636f7f41d
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/prop-disabled.vue
@@ -0,0 +1,3 @@
+<template>
+  <v-file-upload disabled></v-file-upload>
+</template>
diff --git a/packages/docs/src/examples/v-file-upload/prop-scrim.vue b/packages/docs/src/examples/v-file-upload/prop-scrim.vue
new file mode 100644
index 00000000000..56d88c513ad
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/prop-scrim.vue
@@ -0,0 +1,3 @@
+<template>
+  <v-file-upload scrim="primary"></v-file-upload>
+</template>
diff --git a/packages/docs/src/examples/v-file-upload/slot-item.vue b/packages/docs/src/examples/v-file-upload/slot-item.vue
new file mode 100644
index 00000000000..65f4772a483
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/slot-item.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-file-upload
+    v-model="model"
+    clearable
+    multiple
+    show-size
+  >
+    <template v-slot:item="{ props: itemProps }">
+      <v-file-upload-item v-bind="itemProps" lines="one" nav>
+        <template v-slot:prepend>
+          <v-avatar size="32" rounded></v-avatar>
+        </template>
+
+        <template v-slot:clear="{ props: clearProps }">
+          <v-btn color="primary" v-bind="clearProps"></v-btn>
+        </template>
+      </v-file-upload-item>
+    </template>
+  </v-file-upload>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef(null)
+</script>
diff --git a/packages/docs/src/examples/v-file-upload/usage.vue b/packages/docs/src/examples/v-file-upload/usage.vue
new file mode 100644
index 00000000000..417a9201e72
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/usage.vue
@@ -0,0 +1,48 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-file-upload v-bind="props"></v-file-upload>
+    </div>
+
+    <template v-slot:configuration>
+      <v-text-field v-model="title" label="Title"></v-text-field>
+
+      <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
+
+      <v-checkbox v-model="clear" label="Clearable"></v-checkbox>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-file-upload'
+  const model = ref('default')
+  const options = ['comfortable', 'compact']
+  const clear = ref(false)
+  const counter = ref(false)
+  const disabled = ref(false)
+  const title = ref()
+  const props = computed(() => {
+    return {
+      clearable: clear.value || undefined,
+      counter: counter.value || undefined,
+      disabled: disabled.value || undefined,
+      density: model.value,
+      title: title.value || undefined,
+      variant: model.value === 'default' ? undefined : model.value,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>
diff --git a/packages/docs/src/pages/en/components/file-upload.md b/packages/docs/src/pages/en/components/file-upload.md
new file mode 100644
index 00000000000..13506c501af
--- /dev/null
+++ b/packages/docs/src/pages/en/components/file-upload.md
@@ -0,0 +1,99 @@
+---
+emphasized: true
+meta:
+  title: File upload
+  description: The file upload component is a drag and drop area for uploading files.
+  keywords: file uploading, file upload, file drag and drop, file drop area, file dropzone, file upload component
+related:
+  - /components/buttons/
+  - /components/file-inputs/
+  - /components/sheets/
+features:
+  report: true
+  label: 'C: VFileUpload'
+  github: '/labs/VFileUpload/'
+---
+
+# File upload
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.7.3](/getting-started/release-notes/?version=v3.7.3)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VFileUpload } from 'vuetify/labs/VFileUpload'
+
+export default createVuetify({
+  components: {
+    VFileUpload,
+  },
+})
+```
+
+## Usage
+
+The `v-file-upload` component is a drag and drop area for uploading files. It can be customized with slots and has support for density and multiple styles.
+
+<ExamplesUsage name="v-file-upload" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-file-upload](/api/v-file-upload/) | Primary Component |
+| [v-file-upload-item](/api/v-file-upload-item/) | Item Component |
+| [v-file-input](/api/v-file-input/) | File input component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The v-file-upload component is a more visual counterpart to the [v-file-input](/components/file-inputs/) component. It provides a drag and drop area for files, and can be customized with slots.
+
+### Props
+
+Utilize various properties to customize the look and feel of the `v-file-upload` component.
+
+#### Density
+
+The **density** prop is used to control the vertical space the upload takes up.
+
+<ExamplesExample file="v-file-upload/prop-density" />
+
+#### Content
+
+Use the **browse-text**, **divider-text**, **icon**, **title**, or **subtitle** props to customize the text displayed in the component.
+
+<ExamplesExample file="v-file-upload/prop-content" />
+
+#### Disabled
+
+The **disabled** property reduces the opacity of the component and prevents interaction.
+
+<ExamplesExample file="v-file-upload/prop-disabled" />
+
+#### Scrim
+
+The **scrim** property allows you to set a colored scrim when hovering over the component with files.
+
+<ExamplesExample file="v-file-upload/prop-scrim" />
+
+### Slots
+
+The `v-file-upload` component has several slots that can be used to customize the component.
+
+#### Item
+
+The **item** slot is used to customize the appearance of the file item.
+
+<ExamplesExample file="v-file-upload/slot-item" />
diff --git a/packages/vuetify/src/iconsets/mdi.ts b/packages/vuetify/src/iconsets/mdi.ts
index d1a9e788062..059e3cf9f67 100644
--- a/packages/vuetify/src/iconsets/mdi.ts
+++ b/packages/vuetify/src/iconsets/mdi.ts
@@ -47,6 +47,7 @@ const aliases: IconAliases = {
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
   eyeDropper: 'mdi-eyedropper',
+  upload: 'mdi-cloud-upload',
 }
 
 const mdi: IconSet = {
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUpload.sass b/packages/vuetify/src/labs/VFileUpload/VFileUpload.sass
new file mode 100644
index 00000000000..eafca31e8e9
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/VFileUpload.sass
@@ -0,0 +1,75 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-file-upload
+    padding: $file-upload-padding
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    position: relative
+
+    &.v-sheet
+      display: flex
+      border-radius: 4px
+      border-style: dashed
+      border-width: 2px
+
+    &.v-file-upload--density-compact
+      padding: 32px 0
+      flex-direction: row
+      gap: 1rem
+
+    .v-overlay__scrim
+      pointer-events: none
+
+    &--disabled
+      pointer-events: none
+      opacity: var(--v-disabled-opacity)
+
+    &--dragging
+      > *
+        pointer-events: none
+
+    &--clickable
+      cursor: pointer
+
+    input[type="file"]
+      left: 0
+      opacity: 0
+      position: absolute
+      cursor: pointer
+      top: 0
+      z-index: -1
+
+  .v-file-upload-title
+    font-size: $file-upload-title-font-size
+    font-weight: 600
+
+  .v-file-upload-icon
+    opacity: var(--v-medium-emphasis-opacity)
+    font-size: $file-upload-icon-font-size
+    margin-bottom: $file-upload-icon-margin-bottom
+
+    .v-file-upload--density-comfortable &
+      font-size: $file-upload-icon-font-size - .5rem
+      margin-bottom: $file-upload-icon-margin-bottom - .5rem
+
+    .v-file-upload--density-compact &
+      font-size: $file-upload-icon-font-size - 1rem
+      margin-bottom: $file-upload-icon-margin-bottom - 1rem
+
+  .v-file-upload-divider
+    align-items: center
+    display: flex
+    margin: $file-upload-divider-margin
+    justify-content: center
+    width: 100%
+
+  .v-file-upload-items
+    margin: $file-upload-items-margin
+
+  .v-file-upload-item
+    &:not(:first-child)
+      margin-top: 8px
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx
new file mode 100644
index 00000000000..a48a79b21cc
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/VFileUpload.tsx
@@ -0,0 +1,340 @@
+// Styles
+import './VFileUpload.sass'
+
+// Components
+import { VFileUploadItem } from './VFileUploadItem'
+import { VBtn } from '@/components/VBtn/VBtn'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'
+import { makeVDividerProps, VDivider } from '@/components/VDivider/VDivider'
+import { VIcon } from '@/components/VIcon/VIcon'
+import { VOverlay } from '@/components/VOverlay/VOverlay'
+import { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'
+
+// Composables
+import { makeDelayProps } from '@/composables/delay'
+import { makeDensityProps, useDensity } from '@/composables/density'
+import { IconValue } from '@/composables/icons'
+import { useLocale } from '@/composables/locale'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue'
+import { filterInputAttrs, genericComponent, only, propsFactory, useRender, wrapInArray } from '@/util'
+
+// Types
+import type { PropType, VNode } from 'vue'
+
+export type VFileUploadSlots = {
+  browse: {
+    props: { onClick: (e: MouseEvent) => void }
+  }
+  default: never
+  icon: never
+  input: {
+    inputNode: VNode
+  }
+  item: {
+    file: File
+    props: { 'onClick:remove': () => void }
+  }
+  title: never
+  divider: never
+}
+
+export const makeVFileUploadProps = propsFactory({
+  browseText: {
+    type: String,
+    default: '$vuetify.fileUpload.browse',
+  },
+  dividerText: {
+    type: String,
+    default: '$vuetify.fileUpload.divider',
+  },
+  title: {
+    type: String,
+    default: '$vuetify.fileUpload.title',
+  },
+  subtitle: String,
+  icon: {
+    type: IconValue,
+    default: '$upload',
+  },
+  modelValue: {
+    type: [Array, Object] as PropType<File[] | File>,
+    default: null,
+    validator: (val: any) => {
+      return wrapInArray(val).every(v => v != null && typeof v === 'object')
+    },
+  },
+  clearable: Boolean,
+  disabled: Boolean,
+  hideBrowse: Boolean,
+  multiple: Boolean,
+  scrim: {
+    type: [Boolean, String],
+    default: true,
+  },
+  showSize: Boolean,
+  name: String,
+
+  ...makeDelayProps(),
+  ...makeDensityProps(),
+  ...only(makeVDividerProps({
+    length: 150,
+  }), ['length', 'thickness', 'opacity']),
+  ...makeVSheetProps(),
+}, 'VFileUpload')
+
+export const VFileUpload = genericComponent<VFileUploadSlots>()({
+  name: 'VFileUpload',
+
+  inheritAttrs: false,
+
+  props: makeVFileUploadProps(),
+
+  emits: {
+    'update:modelValue': (files: File[]) => true,
+  },
+
+  setup (props, { attrs, slots }) {
+    const { t } = useLocale()
+    const { densityClasses } = useDensity(props)
+    const model = useProxiedModel(
+      props,
+      'modelValue',
+      props.modelValue,
+      val => wrapInArray(val),
+      val => (props.multiple || Array.isArray(props.modelValue)) ? val : val[0],
+    )
+
+    const dragOver = shallowRef(false)
+    const vSheetRef = ref<InstanceType<typeof VSheet> | null>(null)
+    const inputRef = ref<HTMLInputElement | null>(null)
+
+    onMounted(() => {
+      vSheetRef.value?.$el.addEventListener('dragover', onDragOver)
+      vSheetRef.value?.$el.addEventListener('drop', onDrop)
+    })
+
+    onUnmounted(() => {
+      vSheetRef.value?.$el.removeEventListener('dragover', onDragOver)
+      vSheetRef.value?.$el.removeEventListener('drop', onDrop)
+    })
+
+    function onDragOver (e: DragEvent) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      dragOver.value = true
+    }
+
+    function onDragLeave (e: DragEvent) {
+      e.preventDefault()
+      dragOver.value = false
+    }
+
+    function onDrop (e: DragEvent) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      dragOver.value = false
+
+      const files = Array.from(e.dataTransfer?.files ?? [])
+
+      if (!files.length) return
+
+      if (!props.multiple) {
+        model.value = [files[0]]
+
+        return
+      }
+
+      const array = model.value.slice()
+
+      for (const file of files) {
+        if (!array.some(f => f.name === file.name)) {
+          array.push(file)
+        }
+      }
+
+      model.value = array
+    }
+
+    function onClick () {
+      inputRef.value?.click()
+    }
+
+    function onClickRemove (index: number) {
+      model.value = model.value.filter((_, i) => i !== index)
+
+      if (model.value.length > 0 || !inputRef.value) return
+
+      inputRef.value.value = ''
+    }
+
+    useRender(() => {
+      const hasTitle = !!(slots.title || props.title)
+      const hasIcon = !!(slots.icon || props.icon)
+      const hasBrowse = !!(!props.hideBrowse && (slots.browse || props.density === 'default'))
+      const cardProps = VSheet.filterProps(props)
+      const dividerProps = VDivider.filterProps(props)
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
+
+      const inputNode = (
+        <input
+          ref={ inputRef }
+          type="file"
+          disabled={ props.disabled }
+          multiple={ props.multiple }
+          name={ props.name }
+          onChange={ e => {
+            if (!e.target) return
+
+            const target = e.target as HTMLInputElement
+            model.value = [...target.files ?? []]
+          }}
+          { ...inputAttrs }
+        />
+      )
+
+      return (
+        <>
+          <VSheet
+            ref={ vSheetRef }
+            { ...cardProps }
+            class={[
+              'v-file-upload',
+              {
+                'v-file-upload--clickable': !hasBrowse,
+                'v-file-upload--disabled': props.disabled,
+                'v-file-upload--dragging': dragOver.value,
+              },
+              densityClasses.value,
+            ]}
+            onDragleave={ onDragLeave }
+            onDragover={ onDragOver }
+            onDrop={ onDrop }
+            onClick={ !hasBrowse ? onClick : undefined }
+            { ...rootAttrs }
+          >
+            { hasIcon && (
+              <div key="icon" class="v-file-upload-icon">
+                { !slots.icon ? (
+                  <VIcon
+                    key="icon-icon"
+                    icon={ props.icon }
+                  />
+                ) : (
+                  <VDefaultsProvider
+                    key="icon-defaults"
+                    defaults={{
+                      VIcon: {
+                        icon: props.icon,
+                      },
+                    }}
+                  >
+                    { slots.icon() }
+                  </VDefaultsProvider>
+                )}
+              </div>
+            )}
+
+            { hasTitle && (
+              <div key="title" class="v-file-upload-title">
+                { slots.title?.() ?? t(props.title) }
+              </div>
+            )}
+
+            { props.density === 'default' && (
+              <>
+                <div key="upload-divider" class="v-file-upload-divider">
+                  { slots.divider?.() ?? (
+                    <VDivider { ...dividerProps }>
+                      { t(props.dividerText) }
+                    </VDivider>
+                  )}
+                </div>
+
+                { hasBrowse && (
+                  <>
+                    { !slots.browse ? (
+                      <VBtn
+                        readonly={ props.disabled }
+                        size="large"
+                        text={ t(props.browseText) }
+                        variant="tonal"
+                        onClick={ onClick }
+                      />
+                    ) : (
+                      <VDefaultsProvider
+                        defaults={{
+                          VBtn: {
+                            readonly: props.disabled,
+                            size: 'large',
+                            text: t(props.browseText),
+                            variant: 'tonal',
+                          },
+                        }}
+                      >
+                        { slots.browse({ props: { onClick } }) }
+                      </VDefaultsProvider>
+                    )}
+                  </>
+                )}
+
+                { props.subtitle && (
+                  <div class="v-file-upload-subtitle">
+                    { props.subtitle }
+                  </div>
+                )}
+              </>
+            )}
+
+            <VOverlay
+              model-value={ dragOver.value }
+              contained
+              scrim={ props.scrim }
+            />
+
+            { slots.input?.({ inputNode }) ?? inputNode }
+          </VSheet>
+
+          { model.value.length > 0 && (
+            <div class="v-file-upload-items">
+              { model.value.map((file, i) => {
+                const slotProps = {
+                  file,
+                  props: {
+                    'onClick:remove': () => onClickRemove(i),
+                  },
+                }
+
+                return (
+                  <VDefaultsProvider
+                    key={ i }
+                    defaults={{
+                      VFileUploadItem: {
+                        file,
+                        clearable: props.clearable,
+                        disabled: props.disabled,
+                        showSize: props.showSize,
+                      },
+                    }}
+                  >
+                    { slots.item?.(slotProps) ?? (
+                      <VFileUploadItem
+                        key={ i }
+                        onClick:remove={ () => onClickRemove(i) }
+                        v-slots={ slots }
+                      />
+                    )}
+                  </VDefaultsProvider>
+                )
+              })}
+            </div>
+          )}
+        </>
+      )
+    })
+  },
+})
+
+export type VFileUpload = InstanceType<typeof VFileUpload>
diff --git a/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx b/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
new file mode 100644
index 00000000000..24e5ea5ca30
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/VFileUploadItem.tsx
@@ -0,0 +1,140 @@
+// Components
+import { VAvatar } from '@/components/VAvatar/VAvatar'
+import { VBtn } from '@/components/VBtn/VBtn'
+import { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'
+import { makeVListItemProps, VListItem } from '@/components/VList/VListItem'
+
+// Utilities
+import { computed, ref, watchEffect } from 'vue'
+import { genericComponent, humanReadableFileSize, propsFactory, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { VListItemSlots } from '@/components/VList/VListItem'
+
+export type VFileUploadItemSlots = {
+  clear: {
+    props: { onClick: () => void }
+  }
+} & VListItemSlots
+
+export const makeVFileUploadItemProps = propsFactory({
+  clearable: Boolean,
+  file: {
+    type: Object as PropType<File>,
+    default: null,
+  },
+  fileIcon: {
+    type: String,
+    // TODO: setup up a proper aliased icon
+    default: 'mdi-file-document',
+  },
+  showSize: Boolean,
+
+  ...makeVListItemProps({
+    border: true,
+    rounded: true,
+    lines: 'two' as const,
+  }),
+}, 'VFileUploadItem')
+
+export const VFileUploadItem = genericComponent<VFileUploadItemSlots>()({
+  name: 'VFileUploadItem',
+
+  props: makeVFileUploadItemProps(),
+
+  emits: {
+    'click:remove': () => true,
+    click: (e: MouseEvent | KeyboardEvent) => true,
+  },
+
+  setup (props, { emit, slots }) {
+    const preview = ref()
+    const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)
+
+    function onClickRemove () {
+      emit('click:remove')
+    }
+
+    watchEffect(() => {
+      preview.value = props.file?.type.startsWith('image') ? URL.createObjectURL(props.file) : undefined
+    })
+
+    useRender(() => {
+      const listItemProps = VListItem.filterProps(props)
+
+      return (
+        <VListItem
+          { ...listItemProps }
+          title={ props.title ?? props.file?.name }
+          subtitle={ props.showSize ? humanReadableFileSize(props.file?.size, base.value) : props.file?.type }
+          class="v-file-upload-item"
+        >
+          {{
+            ...slots,
+            prepend: slotProps => (
+              <>
+                { !slots.prepend ? (
+                  <VAvatar
+                    icon={ props.fileIcon }
+                    image={ preview.value }
+                    rounded
+                  />
+                ) : (
+                  <VDefaultsProvider
+                    defaults={{
+                      VAvatar: {
+                        image: preview.value,
+                        icon: !preview.value ? props.fileIcon : undefined,
+                        rounded: true,
+                      },
+                    }}
+                  >
+                    { slots.prepend?.(slotProps) ?? (
+                      <VAvatar />
+                    )}
+                  </VDefaultsProvider>
+                )}
+              </>
+            ),
+            append: slotProps => (
+              <>
+                { props.clearable && (
+                  <>
+                    { !slots.clear ? (
+                      <VBtn
+                        icon="$clear"
+                        density="comfortable"
+                        variant="text"
+                        onClick={ onClickRemove }
+                      />
+                    ) : (
+                      <VDefaultsProvider
+                        defaults={{
+                          VBtn: {
+                            icon: '$clear',
+                            density: 'comfortable',
+                            variant: 'text',
+                          },
+                        }}
+                      >
+                        { slots.clear?.({
+                          ...slotProps,
+                          props: { onClick: onClickRemove },
+                        }) ?? (<VBtn />)}
+                      </VDefaultsProvider>
+                    )}
+                  </>
+                )}
+
+                { slots.append?.(slotProps) }
+              </>
+            ),
+          }}
+        </VListItem>
+      )
+    })
+  },
+})
+
+export type VFileUploadItem = InstanceType<typeof VFileUploadItem>
diff --git a/packages/vuetify/src/labs/VFileUpload/_variables.scss b/packages/vuetify/src/labs/VFileUpload/_variables.scss
new file mode 100644
index 00000000000..38c3ba95aad
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/_variables.scss
@@ -0,0 +1,12 @@
+@use '../../styles/tools';
+@use '../../styles/settings';
+
+$file-upload-title-font-size: 1.5rem !default;
+$file-upload-padding: 64px 0 !default;
+$file-upload-border-radius: 4px !default;
+$file-upload-border-width: 2px !default;
+$file-upload-title-font-weight: 600 !default;
+$file-upload-icon-font-size: 3rem !default;
+$file-upload-icon-margin-bottom: 1rem !default;
+$file-upload-divider-margin: 32px 0 !default;
+$file-upload-items-margin: 16px 0 !default;
diff --git a/packages/vuetify/src/labs/VFileUpload/index.ts b/packages/vuetify/src/labs/VFileUpload/index.ts
new file mode 100644
index 00000000000..3f85597a4d3
--- /dev/null
+++ b/packages/vuetify/src/labs/VFileUpload/index.ts
@@ -0,0 +1,2 @@
+export { VFileUpload } from './VFileUpload'
+export { VFileUploadItem } from './VFileUploadItem'
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 6b753ff8790..341d9536360 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,5 +1,6 @@
 export * from './VCalendar'
 export * from './VDateInput'
+export * from './VFileUpload'
 export * from './VNumberInput'
 export * from './VPicker'
 export * from './VStepperVertical'
diff --git a/packages/vuetify/src/locale/af.ts b/packages/vuetify/src/locale/af.ts
index 34fc7bd4c76..d7fd337c043 100644
--- a/packages/vuetify/src/locale/af.ts
+++ b/packages/vuetify/src/locale/af.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/ar.ts b/packages/vuetify/src/locale/ar.ts
index b5ec2b2ea6f..e28cb07f5de 100644
--- a/packages/vuetify/src/locale/ar.ts
+++ b/packages/vuetify/src/locale/ar.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} ملفات',
     counterSize: '{0} ملفات ({1} في المجموع)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'صباحاً',
     pm: 'مساءً',
diff --git a/packages/vuetify/src/locale/az.ts b/packages/vuetify/src/locale/az.ts
index b452d1ccd95..40477c14b8e 100644
--- a/packages/vuetify/src/locale/az.ts
+++ b/packages/vuetify/src/locale/az.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fayl',
     counterSize: '{0} fayl (cəmi {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/bg.ts b/packages/vuetify/src/locale/bg.ts
index f795df46016..f2a7c345147 100644
--- a/packages/vuetify/src/locale/bg.ts
+++ b/packages/vuetify/src/locale/bg.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} файла',
     counterSize: '{0} файла ({1} общо)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'пр. обяд',
     pm: 'сл. обяд',
diff --git a/packages/vuetify/src/locale/ca.ts b/packages/vuetify/src/locale/ca.ts
index 09b06b0b9e9..93c064b55a4 100644
--- a/packages/vuetify/src/locale/ca.ts
+++ b/packages/vuetify/src/locale/ca.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fitxers',
     counterSize: '{0} fitxers ({1} en total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/ckb.ts b/packages/vuetify/src/locale/ckb.ts
index 64ffde6ea1a..ceef0ea6149 100644
--- a/packages/vuetify/src/locale/ckb.ts
+++ b/packages/vuetify/src/locale/ckb.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} فایل',
     counterSize: '{0} فایل ({1} لە کۆی گشتی)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'پێش نیوەڕۆژ',
     pm: 'دوای نیوەڕۆژ',
diff --git a/packages/vuetify/src/locale/cs.ts b/packages/vuetify/src/locale/cs.ts
index 85a8b6b613a..261fc5a4099 100644
--- a/packages/vuetify/src/locale/cs.ts
+++ b/packages/vuetify/src/locale/cs.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} souborů',
     counterSize: '{0} souborů ({1} celkem)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/da.ts b/packages/vuetify/src/locale/da.ts
index 8a80af26500..4668d8e9fde 100644
--- a/packages/vuetify/src/locale/da.ts
+++ b/packages/vuetify/src/locale/da.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} filer',
     counterSize: '{0} filer ({1} total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
index 9b350fc1222..253f9c3b7b4 100644
--- a/packages/vuetify/src/locale/de.ts
+++ b/packages/vuetify/src/locale/de.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} Dateien',
     counterSize: '{0} Dateien ({1} gesamt)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/el.ts b/packages/vuetify/src/locale/el.ts
index be1701683f9..fba9a4b9fb1 100755
--- a/packages/vuetify/src/locale/el.ts
+++ b/packages/vuetify/src/locale/el.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/en.ts b/packages/vuetify/src/locale/en.ts
index cf94f5e9786..0c59dac42d9 100644
--- a/packages/vuetify/src/locale/en.ts
+++ b/packages/vuetify/src/locale/en.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/es.ts b/packages/vuetify/src/locale/es.ts
index 849ddececaa..86142336aed 100644
--- a/packages/vuetify/src/locale/es.ts
+++ b/packages/vuetify/src/locale/es.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} archivos',
     counterSize: '{0} archivos ({1} en total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/et.ts b/packages/vuetify/src/locale/et.ts
index b420079173d..1ff3d0c9875 100644
--- a/packages/vuetify/src/locale/et.ts
+++ b/packages/vuetify/src/locale/et.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} faili',
     counterSize: '{0} faili (kokku {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/fa.ts b/packages/vuetify/src/locale/fa.ts
index d80255e4351..559789c561e 100644
--- a/packages/vuetify/src/locale/fa.ts
+++ b/packages/vuetify/src/locale/fa.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} پرونده',
     counterSize: '{0} پرونده ({1} در کل)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'قبل از ظهر',
     pm: 'بعد از ظهر',
diff --git a/packages/vuetify/src/locale/fi.ts b/packages/vuetify/src/locale/fi.ts
index d03c0703928..5d9b54d6581 100644
--- a/packages/vuetify/src/locale/fi.ts
+++ b/packages/vuetify/src/locale/fi.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} tiedostoa',
     counterSize: '{0} tiedostoa ({1} yhteensä)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'ap.',
     pm: 'ip.',
diff --git a/packages/vuetify/src/locale/fr.ts b/packages/vuetify/src/locale/fr.ts
index 0bf6954ac79..371798e0434 100644
--- a/packages/vuetify/src/locale/fr.ts
+++ b/packages/vuetify/src/locale/fr.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fichier(s)',
     counterSize: '{0} fichier(s) ({1} au total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/he.ts b/packages/vuetify/src/locale/he.ts
index ebc04e428e6..463ac6ddb7c 100644
--- a/packages/vuetify/src/locale/he.ts
+++ b/packages/vuetify/src/locale/he.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} קבצים',
     counterSize: '{0} קבצים ({1} בסך הכל)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/hr.ts b/packages/vuetify/src/locale/hr.ts
index d24be21324b..d064708a31c 100644
--- a/packages/vuetify/src/locale/hr.ts
+++ b/packages/vuetify/src/locale/hr.ts
@@ -69,6 +69,11 @@ export default {
     counter: 'Odabranih datoteka: {0}',
     counterSize: 'Odabranih datoteka: {0} ({1} ukupno)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/hu.ts b/packages/vuetify/src/locale/hu.ts
index d23db5b5e15..ce7a5fac4c4 100644
--- a/packages/vuetify/src/locale/hu.ts
+++ b/packages/vuetify/src/locale/hu.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fájl',
     counterSize: '{0} fájl ({1} összesen)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'de',
     pm: 'du',
diff --git a/packages/vuetify/src/locale/id.ts b/packages/vuetify/src/locale/id.ts
index ad689c5f478..9ddda9a693d 100644
--- a/packages/vuetify/src/locale/id.ts
+++ b/packages/vuetify/src/locale/id.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} berkas',
     counterSize: '{0} berkas (dari total {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/it.ts b/packages/vuetify/src/locale/it.ts
index cc2d11e9f53..206aeeaad90 100644
--- a/packages/vuetify/src/locale/it.ts
+++ b/packages/vuetify/src/locale/it.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} file',
     counterSize: '{0} file ({1} in totale)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/ja.ts b/packages/vuetify/src/locale/ja.ts
index 1156492f552..034842f41c7 100644
--- a/packages/vuetify/src/locale/ja.ts
+++ b/packages/vuetify/src/locale/ja.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} ファイル',
     counterSize: '{0} ファイル (合計 {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/km.ts b/packages/vuetify/src/locale/km.ts
index 10c1cd735ac..5de87fc9454 100644
--- a/packages/vuetify/src/locale/km.ts
+++ b/packages/vuetify/src/locale/km.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} ឯកសារ',
     counterSize: '{0} ឯកសារ ({1} សរុប)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'ព្រឹក',
     pm: 'ល្ងាច',
diff --git a/packages/vuetify/src/locale/ko.ts b/packages/vuetify/src/locale/ko.ts
index 1a0782eec8a..72b07e732bc 100644
--- a/packages/vuetify/src/locale/ko.ts
+++ b/packages/vuetify/src/locale/ko.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: '오전',
     pm: '오후',
diff --git a/packages/vuetify/src/locale/lt.ts b/packages/vuetify/src/locale/lt.ts
index 307340e31a3..2b2f492c4d2 100644
--- a/packages/vuetify/src/locale/lt.ts
+++ b/packages/vuetify/src/locale/lt.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} failų',
     counterSize: '{0} failų ({1} iš viso)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/lv.ts b/packages/vuetify/src/locale/lv.ts
index eb493589646..bb4b563e6be 100644
--- a/packages/vuetify/src/locale/lv.ts
+++ b/packages/vuetify/src/locale/lv.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} files',
     counterSize: '{0} files ({1} in total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
index b8c6032fe32..266996e1918 100644
--- a/packages/vuetify/src/locale/nl.ts
+++ b/packages/vuetify/src/locale/nl.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} bestanden',
     counterSize: '{0} bestanden ({1} in totaal)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
index c9fc72ddfc6..0796d33e009 100644
--- a/packages/vuetify/src/locale/no.ts
+++ b/packages/vuetify/src/locale/no.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} filer',
     counterSize: '{0} filer ({1} totalt)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/pl.ts b/packages/vuetify/src/locale/pl.ts
index 0e45ad375df..ccc577f6ed0 100644
--- a/packages/vuetify/src/locale/pl.ts
+++ b/packages/vuetify/src/locale/pl.ts
@@ -69,6 +69,11 @@ export default {
     counter: 'Liczba plików: {0}',
     counterSize: 'Liczba plików: {0} (łącznie {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/pt.ts b/packages/vuetify/src/locale/pt.ts
index d6094cb7edd..65a63d04bbe 100644
--- a/packages/vuetify/src/locale/pt.ts
+++ b/packages/vuetify/src/locale/pt.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} arquivo(s)',
     counterSize: '{0} arquivo(s) ({1} no total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/ro.ts b/packages/vuetify/src/locale/ro.ts
index 615b2861637..8f898a72fb9 100644
--- a/packages/vuetify/src/locale/ro.ts
+++ b/packages/vuetify/src/locale/ro.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fișiere',
     counterSize: '{0} fișiere ({1} în total)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/ru.ts b/packages/vuetify/src/locale/ru.ts
index 3c6eb2cde0e..3082bab7450 100644
--- a/packages/vuetify/src/locale/ru.ts
+++ b/packages/vuetify/src/locale/ru.ts
@@ -69,6 +69,11 @@ export default {
     counter: 'Файлов: {0}',
     counterSize: 'Файлов: {0} (всего {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/sk.ts b/packages/vuetify/src/locale/sk.ts
index 9b1ffe2481e..f2c8e51b043 100644
--- a/packages/vuetify/src/locale/sk.ts
+++ b/packages/vuetify/src/locale/sk.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} súborov',
     counterSize: '{0} súborov ({1} celkom)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/sl.ts b/packages/vuetify/src/locale/sl.ts
index c36e668c611..2d39a6c857f 100644
--- a/packages/vuetify/src/locale/sl.ts
+++ b/packages/vuetify/src/locale/sl.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} datotek',
     counterSize: '{0} datotek (skupno {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/sr-Cyrl.ts b/packages/vuetify/src/locale/sr-Cyrl.ts
index 6e9c1f9cc16..3230a8f1e4b 100644
--- a/packages/vuetify/src/locale/sr-Cyrl.ts
+++ b/packages/vuetify/src/locale/sr-Cyrl.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} фајлова',
     counterSize: '{0} фајлова ({1} укупно)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/sr-Latn.ts b/packages/vuetify/src/locale/sr-Latn.ts
index 485d81bd2d0..7b7c1e92857 100644
--- a/packages/vuetify/src/locale/sr-Latn.ts
+++ b/packages/vuetify/src/locale/sr-Latn.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} fajlova',
     counterSize: '{0} fajlova ({1} ukupno)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/sv.ts b/packages/vuetify/src/locale/sv.ts
index 2a0b576b7aa..63508c57130 100644
--- a/packages/vuetify/src/locale/sv.ts
+++ b/packages/vuetify/src/locale/sv.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} filer',
     counterSize: '{0} filer ({1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/th.ts b/packages/vuetify/src/locale/th.ts
index 672643cd6c0..2d2dce683eb 100644
--- a/packages/vuetify/src/locale/th.ts
+++ b/packages/vuetify/src/locale/th.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} ไฟล์',
     counterSize: '{0} ไฟล์ (รวม {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/tr.ts b/packages/vuetify/src/locale/tr.ts
index 2463d23ba1e..0bd7eaaddae 100644
--- a/packages/vuetify/src/locale/tr.ts
+++ b/packages/vuetify/src/locale/tr.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} dosya',
     counterSize: '{0} dosya (toplamda {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/uk.ts b/packages/vuetify/src/locale/uk.ts
index 4d1d28540ac..e1e6fc13dca 100644
--- a/packages/vuetify/src/locale/uk.ts
+++ b/packages/vuetify/src/locale/uk.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} файлів',
     counterSize: '{0} файлів ({1} загалом)',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/vi.ts b/packages/vuetify/src/locale/vi.ts
index 67915a2dc1e..1d6c493ad68 100644
--- a/packages/vuetify/src/locale/vi.ts
+++ b/packages/vuetify/src/locale/vi.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} tệp',
     counterSize: '{0} tệp (tổng cộng {1})',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'SA',
     pm: 'CH',
diff --git a/packages/vuetify/src/locale/zh-Hans.ts b/packages/vuetify/src/locale/zh-Hans.ts
index dec1c61f811..eed400c16c3 100644
--- a/packages/vuetify/src/locale/zh-Hans.ts
+++ b/packages/vuetify/src/locale/zh-Hans.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} 个文件',
     counterSize: '{0} 个文件（共 {1}）',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',
diff --git a/packages/vuetify/src/locale/zh-Hant.ts b/packages/vuetify/src/locale/zh-Hant.ts
index dbae45b6526..7bebfcd5b49 100644
--- a/packages/vuetify/src/locale/zh-Hant.ts
+++ b/packages/vuetify/src/locale/zh-Hant.ts
@@ -69,6 +69,11 @@ export default {
     counter: '{0} 個檔案',
     counterSize: '{0} 個檔案（共 {1}）',
   },
+  fileUpload: {
+    title: 'Drag and drop files here',
+    divider: 'or',
+    browse: 'Browse Files',
+  },
   timePicker: {
     am: 'AM',
     pm: 'PM',

From 96fca0763afbcd151ac7a2ec543c973debbb8089 Mon Sep 17 00:00:00 2001
From: Yauheni Vasiukevich <evgeniywas@gmail.com>
Date: Sun, 15 Dec 2024 00:09:53 +0100
Subject: [PATCH 027/127] fix(VNumberInput): clearing v-number-input with
 backspace resets to 0 (#20729)

Co-authored-by: Yuchao Wu <yuchao.sydneyuni@gmail.com>
---
 .../src/labs/VNumberInput/VNumberInput.tsx      | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
index 5e0a2835bbe..f3ee59cbe3b 100644
--- a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
+++ b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -74,14 +74,17 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
     const model = computed({
       get: () => _model.value,
-      set (val) {
-        if (val === null) {
+      // model.value could be empty string from VTextField
+      // but _model.value should be eventually kept in type Number | null
+      set (val: Number | null | string) {
+        if (val === null || val === '') {
           _model.value = null
           return
         }
 
-        if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
-          _model.value = +val
+        const value = Number(val)
+        if (!isNaN(value) && value <= props.max && value >= props.min) {
+          _model.value = value
         }
       },
     })
@@ -294,9 +297,9 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
               { incrementControlNode() }
             </div>
-          ) : (!props.reverse
-            ? <>{ dividerNode() }{ controlNode() }</>
-            : undefined)
+          ) : (props.reverse
+            ? undefined
+            : <>{ dividerNode() }{ controlNode() }</>)
 
       const hasAppendInner = slots['append-inner'] || appendInnerControl
 

From cda1db056ac68185e12da6f42611cc31fe1b0969 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sun, 15 Dec 2024 19:41:34 +1100
Subject: [PATCH 028/127] docs(VFileUpload): update release version

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

diff --git a/packages/docs/src/pages/en/components/file-upload.md b/packages/docs/src/pages/en/components/file-upload.md
index 13506c501af..dc5f24402eb 100644
--- a/packages/docs/src/pages/en/components/file-upload.md
+++ b/packages/docs/src/pages/en/components/file-upload.md
@@ -20,7 +20,7 @@ features:
 
 ::: warning
 
-This feature requires [v3.7.3](/getting-started/release-notes/?version=v3.7.3)
+This feature requires [v3.7.6](/getting-started/release-notes/?version=v3.7.6)
 
 :::
 

From 80d0bcc9c2b788ba8b169c2c53ddaea5a13f4679 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 16 Dec 2024 15:09:02 +1100
Subject: [PATCH 029/127] chore(ci): run percy tests

closes #20775
---
 .github/workflows/nightly-schedule.yml | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/.github/workflows/nightly-schedule.yml b/.github/workflows/nightly-schedule.yml
index 4bebb563b90..eea4206928b 100644
--- a/.github/workflows/nightly-schedule.yml
+++ b/.github/workflows/nightly-schedule.yml
@@ -66,16 +66,10 @@ jobs:
           fi
       - uses: vuetifyjs/setup-action@master
       - run: echo "COMMIT=$(git rev-parse HEAD)" >> $GITHUB_ENV
-      - run: pnpm cy:run
+      - run: pnpm test:percy
         working-directory: ./packages/vuetify
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           PERCY_BRANCH: master
           PERCY_TARGET_BRANCH: master
           PERCY_COMMIT: ${{ env.COMMIT }}
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: ./packages/vuetify/cypress/screenshots/
-          if-no-files-found: ignore

From ec269f28f62ad679066507b1e56a037fb4779c31 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 16 Dec 2024 15:11:36 +1100
Subject: [PATCH 030/127] chore(ci): run on ubuntu-24.04

---
 .github/workflows/ci.yml               | 16 ++++++++--------
 .github/workflows/close-issue.yml      |  2 +-
 .github/workflows/crowdin-uploads.yml  |  2 +-
 .github/workflows/nightly-pr.yml       |  2 +-
 .github/workflows/nightly-schedule.yml |  4 ++--
 .github/workflows/stale.yml            |  2 +-
 .github/workflows/triage.yml           |  2 +-
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2189442b9af..453215c8dd7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,7 +12,7 @@ env:
 
 jobs:
   pre_job:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     outputs:
       should_skip: ${{ steps.skip_check.outputs.should_skip }}
     steps:
@@ -28,7 +28,7 @@ jobs:
     name: Build vuetify
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: vuetifyjs/setup-action@master
@@ -44,7 +44,7 @@ jobs:
     name: Lint
     needs: [pre_job, build-vuetify]
     if: needs.pre_job.outputs.should_skip != 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
       matrix:
@@ -64,7 +64,7 @@ jobs:
     name: Test (Unit)
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: vuetifyjs/setup-action@master
@@ -75,7 +75,7 @@ jobs:
     name: Test (e2e)
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: vuetifyjs/setup-action@master
@@ -84,7 +84,7 @@ jobs:
 
   deploy:
     needs: [lint, test-unit, test-e2e, build-vuetify]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     steps:
       - uses: actions/checkout@v4
@@ -113,7 +113,7 @@ jobs:
     name: Build docs
     needs: [pre_job, build-vuetify]
     if: needs.pre_job.outputs.should_skip != 'true' && github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
@@ -144,7 +144,7 @@ jobs:
 
   publish-docs:
     needs: [lint, test-unit, build-docs]
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     environment: Production
     if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && github.ref == 'refs/heads/master'
     steps:
diff --git a/.github/workflows/close-issue.yml b/.github/workflows/close-issue.yml
index 1122540141d..539ed67ea26 100644
--- a/.github/workflows/close-issue.yml
+++ b/.github/workflows/close-issue.yml
@@ -12,7 +12,7 @@ env:
 
 jobs:
   close:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: github.repository_owner == 'vuetifyjs'
     steps:
       - uses: vuetifyjs/close-action@master
diff --git a/.github/workflows/crowdin-uploads.yml b/.github/workflows/crowdin-uploads.yml
index 97fb9f013ea..88ecc4cfa15 100644
--- a/.github/workflows/crowdin-uploads.yml
+++ b/.github/workflows/crowdin-uploads.yml
@@ -21,7 +21,7 @@ env:
 
 jobs:
   upload-to-crowdin:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
diff --git a/.github/workflows/nightly-pr.yml b/.github/workflows/nightly-pr.yml
index b55f1652a72..20f52ef9876 100644
--- a/.github/workflows/nightly-pr.yml
+++ b/.github/workflows/nightly-pr.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: ${{ github.repository_owner == 'vuetifyjs' }}
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/nightly-schedule.yml b/.github/workflows/nightly-schedule.yml
index eea4206928b..3ff8bfd46d9 100644
--- a/.github/workflows/nightly-schedule.yml
+++ b/.github/workflows/nightly-schedule.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: ${{ github.repository_owner == 'vuetifyjs' }}
     strategy:
       max-parallel: 1
@@ -49,7 +49,7 @@ jobs:
 
   percy:
     name: Visual regression tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     if: ${{ github.repository_owner == 'vuetifyjs' }}
     steps:
       - uses: actions/checkout@v4
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
index 2b7abfdfc6d..e192907708c 100644
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   stale:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/stale@v9
         with:
diff --git a/.github/workflows/triage.yml b/.github/workflows/triage.yml
index 3f25be8c898..96e89a8e845 100644
--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -5,7 +5,7 @@ on:
 
 jobs:
   triage:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
       - uses: vuetifyjs/triage-action@master

From d4ba559cda8f52192b90b5816b09680324725b4c Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 16 Dec 2024 16:02:23 +1100
Subject: [PATCH 031/127] fix(nested): ensure unregister is called before
 register

fixes #20516
closes #20603
---
 .../components/VAutocomplete/VAutocomplete.tsx   |  4 ++--
 .../src/components/VCombobox/VCombobox.tsx       |  4 ++--
 .../vuetify/src/components/VSelect/VSelect.tsx   |  4 ++--
 .../components/VVirtualScroll/VVirtualScroll.tsx |  2 +-
 .../vuetify/src/composables/nested/nested.ts     | 16 ++++++++++++++--
 packages/vuetify/src/composables/virtual.ts      |  3 ++-
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 841821ba2a1..7980fd6bede 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -493,14 +493,14 @@ export const VAutocomplete = genericComponent<new <
                       { slots['prepend-item']?.() }
 
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
-                        <VListItem title={ t(props.noDataText) } />
+                        <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
                       <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
-                            key: index,
+                            key: item.value,
                             active: (highlightFirst.value && index === 0) ? true : undefined,
                             onClick: () => select(item, null),
                           })
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 29cbded359b..e1921b8e3c7 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -537,14 +537,14 @@ export const VCombobox = genericComponent<new <
                       { slots['prepend-item']?.() }
 
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
-                        <VListItem title={ t(props.noDataText) } />
+                        <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
                       <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
-                            key: index,
+                            key: item.value,
                             active: (highlightFirst.value && index === 0) ? true : undefined,
                             onClick: () => select(item, null),
                           })
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index f76fee78fac..ad18b3bbf1f 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -414,14 +414,14 @@ export const VSelect = genericComponent<new <
                       { slots['prepend-item']?.() }
 
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
-                        <VListItem title={ t(props.noDataText) } />
+                        <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
                       <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
-                            key: index,
+                            key: item.value,
                             onClick: () => select(item, null),
                           })
 
diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
index 74e143ca53f..67ce551f4f6 100644
--- a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
+++ b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
@@ -96,7 +96,7 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
     useRender(() => {
       const children = computedItems.value.map(item => (
         <VVirtualScrollItem
-          key={ item.index }
+          key={ item.key }
           renderless={ props.renderless }
           onUpdate:height={ height => handleItemResize(item.index, height) }
         >
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index 38e2f1300e0..a97188b1c0f 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -2,7 +2,17 @@
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw, toRef } from 'vue'
+import {
+  computed,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  provide,
+  ref,
+  shallowRef,
+  toRaw,
+  toRef,
+} from 'vue'
 import {
   independentActiveStrategy,
   independentSingleActiveStrategy,
@@ -334,7 +344,9 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
     isGroupActivator: parent.isGroupActivator,
   }
 
-  !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup)
+  onBeforeMount(() => {
+    !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup)
+  })
 
   onBeforeUnmount(() => {
     !parent.isGroupActivator && parent.root.unregister(computedId.value)
diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
index 6560d13a576..2a43b0de30b 100644
--- a/packages/vuetify/src/composables/virtual.ts
+++ b/packages/vuetify/src/composables/virtual.ts
@@ -4,7 +4,7 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 
 // Utilities
 import { computed, nextTick, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue'
-import { clamp, debounce, IN_BROWSER, propsFactory } from '@/util'
+import { clamp, debounce, IN_BROWSER, isObject, propsFactory } from '@/util'
 
 // Types
 import type { Ref } from 'vue'
@@ -238,6 +238,7 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
     return items.value.slice(first.value, last.value).map((item, index) => ({
       raw: item,
       index: index + first.value,
+      key: (isObject(item) && 'value' in item) ? item.value : index + first.value,
     }))
   })
 

From cbd14a7ace7e210fab91b4b2003ff0bcd7892d32 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 16 Dec 2024 20:51:02 +1100
Subject: [PATCH 032/127] fix: replace getUid with vue's useId

fixes #19696
---
 .../src/components/VCarousel/VCarousel.tsx    |  2 +-
 .../src/components/VCheckbox/VCheckbox.tsx    |  6 ++--
 .../src/components/VChipGroup/VChipGroup.tsx  |  6 ++--
 .../vuetify/src/components/VField/VField.tsx  |  5 ++--
 .../vuetify/src/components/VInput/VInput.tsx  |  6 ++--
 .../src/components/VItemGroup/VItemGroup.tsx  |  6 ++--
 .../vuetify/src/components/VMenu/VMenu.tsx    |  6 ++--
 .../components/VRadioGroup/VRadioGroup.tsx    |  6 ++--
 .../src/components/VRating/VRating.tsx        |  7 +++--
 .../VSelectionControl/VSelectionControl.tsx   |  5 ++--
 .../VSelectionControlGroup.tsx                |  6 ++--
 .../src/components/VSparkline/VBarline.tsx    |  6 ++--
 .../src/components/VSparkline/VTrendline.tsx  |  6 ++--
 .../src/components/VSwitch/VSwitch.tsx        |  6 ++--
 .../src/components/VTooltip/VTooltip.tsx      |  6 ++--
 packages/vuetify/src/composables/group.ts     | 28 +++++++++----------
 packages/vuetify/src/composables/layout.ts    |  5 ++--
 .../vuetify/src/composables/nested/nested.ts  |  4 +--
 .../vuetify/src/composables/validation.ts     |  6 ++--
 packages/vuetify/src/framework.ts             |  4 +--
 .../vuetify/src/util/getCurrentInstance.ts    | 20 -------------
 21 files changed, 65 insertions(+), 87 deletions(-)

diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
index b4baf839e95..d432f0ebccb 100644
--- a/packages/vuetify/src/components/VCarousel/VCarousel.tsx
+++ b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
@@ -54,7 +54,7 @@ type VCarouselSlots = VWindowSlots & {
   item: {
     props: Record<string, any>
     item: {
-      id: number
+      id: string
       value: unknown
       disabled: boolean | undefined
     }
diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
index 686200e3144..79947685fea 100644
--- a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
+++ b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
@@ -10,8 +10,8 @@ import { useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'
@@ -47,7 +47,7 @@ export const VCheckbox = genericComponent<new <T>(
     const model = useProxiedModel(props, 'modelValue')
     const { isFocused, focus, blur } = useFocus(props)
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `checkbox-${uid}`)
 
     useRender(() => {
diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
index af8883637b5..47dbdca395d 100644
--- a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
+++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
@@ -41,11 +41,11 @@ export const makeVChipGroupProps = propsFactory({
 
 type VChipGroupSlots = {
   default: {
-    isSelected: (id: number) => boolean
-    select: (id: number, value: boolean) => void
+    isSelected: (id: string) => boolean
+    select: (id: string, value: boolean) => void
     next: () => void
     prev: () => void
-    selected: readonly number[]
+    selected: readonly string[]
   }
 }
 
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 6ad56c5efdb..67334075648 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -18,13 +18,12 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, useId, watch } from 'vue'
 import {
   animate,
   convertToUnit,
   EventProp,
   genericComponent,
-  getUid,
   isOn,
   nullifyTransforms,
   pick,
@@ -139,7 +138,7 @@ export const VField = genericComponent<new <T>(
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `input-${uid}`)
     const messagesId = computed(() => `${id.value}-messages`)
 
diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
index 4234aeb0aad..a4f85b3b51a 100644
--- a/packages/vuetify/src/components/VInput/VInput.tsx
+++ b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -15,8 +15,8 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeValidationProps, useValidation } from '@/composables/validation'
 
 // Utilities
-import { computed } from 'vue'
-import { EventProp, genericComponent, getUid, only, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { EventProp, genericComponent, only, propsFactory, useRender } from '@/util'
 
 // Types
 import type { ComputedRef, PropType, Ref } from 'vue'
@@ -105,7 +105,7 @@ export const VInput = genericComponent<new <T>(
     const { rtlClasses } = useRtl()
     const { InputIcon } = useInputIcon(props)
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `input-${uid}`)
     const messagesId = computed(() => `${id.value}-messages`)
 
diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
index d33ac86c024..2d8ab32dd84 100644
--- a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
+++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
@@ -26,11 +26,11 @@ export const makeVItemGroupProps = propsFactory({
 
 type VItemGroupSlots = {
   default: {
-    isSelected: (id: number) => boolean
-    select: (id: number, value: boolean) => void
+    isSelected: (id: string) => boolean
+    select: (id: string, value: boolean) => void
     next: () => void
     prev: () => void
-    selected: readonly number[]
+    selected: readonly string[]
   }
 }
 
diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 6997992fc43..fd4a7446258 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -24,6 +24,7 @@ import {
   provide,
   ref,
   shallowRef,
+  useId,
   watch,
 } from 'vue'
 import { VMenuSymbol } from './shared'
@@ -32,7 +33,6 @@ import {
   focusChild,
   genericComponent,
   getNextElement,
-  getUid,
   IN_BROWSER,
   isClickInsideElement,
   omit,
@@ -76,13 +76,13 @@ export const VMenu = genericComponent<OverlaySlots>()({
     const { scopeId } = useScopeId()
     const { isRtl } = useRtl()
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-menu-${uid}`)
 
     const overlay = ref<VOverlay>()
 
     const parent = inject(VMenuSymbol, null)
-    const openChildren = shallowRef(new Set<number>())
+    const openChildren = shallowRef(new Set<string>())
     provide(VMenuSymbol, {
       register () {
         openChildren.value.add(uid)
diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
index fe9af1fc96a..7b9f285bc18 100644
--- a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
+++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
@@ -12,8 +12,8 @@ import { IconValue } from '@/composables/icons'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VInputSlots } from '@/components/VInput/VInput'
@@ -68,7 +68,7 @@ export const VRadioGroup = genericComponent<new <T>(
   },
 
   setup (props, { attrs, slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `radio-group-${uid}`)
     const model = useProxiedModel(props, 'modelValue')
 
diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx
index 062c0b236d3..972062a5818 100644
--- a/packages/vuetify/src/components/VRating/VRating.tsx
+++ b/packages/vuetify/src/components/VRating/VRating.tsx
@@ -15,8 +15,8 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, shallowRef } from 'vue'
-import { clamp, createRange, genericComponent, getUid, propsFactory, useRender } from '@/util'
+import { computed, shallowRef, useId } from 'vue'
+import { clamp, createRange, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { Prop } from 'vue'
@@ -140,7 +140,8 @@ export const VRating = genericComponent<VRatingSlots>()({
       }
     }))
 
-    const name = computed(() => props.name ?? `v-rating-${getUid()}`)
+    const uid = useId()
+    const name = computed(() => props.name ?? `v-rating-${uid}`)
 
     function VRatingItem ({ value, index, showStar = true }: { value: number, index: number, showStar?: boolean }) {
       const { onMouseenter, onMouseleave, onClick } = eventState.value[index + 1]
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 97d024d77ae..957e6c9487b 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -16,11 +16,10 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed, inject, nextTick, ref, shallowRef } from 'vue'
+import { computed, inject, nextTick, ref, shallowRef, useId } from 'vue'
 import {
   filterInputAttrs,
   genericComponent,
-  getUid,
   matchesSelector,
   propsFactory,
   useRender,
@@ -172,7 +171,7 @@ export const VSelectionControl = genericComponent<new <T>(
       backgroundColorStyles,
       trueValue,
     } = useSelectionControl(props)
-    const uid = getUid()
+    const uid = useId()
     const isFocused = shallowRef(false)
     const isFocusVisible = shallowRef(false)
     const input = ref<HTMLInputElement>()
diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
index 5617035a128..8287fbe71ac 100644
--- a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
+++ b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
@@ -10,8 +10,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeThemeProps } from '@/composables/theme'
 
 // Utilities
-import { computed, onScopeDispose, provide, toRef } from 'vue'
-import { deepEqual, genericComponent, getUid, propsFactory, useRender } from '@/util'
+import { computed, onScopeDispose, provide, toRef, useId } from 'vue'
+import { deepEqual, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
@@ -86,7 +86,7 @@ export const VSelectionControlGroup = genericComponent<new <T>(
 
   setup (props, { slots }) {
     const modelValue = useProxiedModel(props, 'modelValue')
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-selection-control-group-${uid}`)
     const name = computed(() => props.name || id.value)
 
diff --git a/packages/vuetify/src/components/VSparkline/VBarline.tsx b/packages/vuetify/src/components/VSparkline/VBarline.tsx
index 7d765deb3b7..8319e2c8e1e 100644
--- a/packages/vuetify/src/components/VSparkline/VBarline.tsx
+++ b/packages/vuetify/src/components/VSparkline/VBarline.tsx
@@ -1,7 +1,7 @@
 // Utilities
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import { makeLineProps } from './util/line'
-import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+import { genericComponent, getPropertyFromItem, propsFactory, useRender } from '@/util'
 
 // Types
 export type VBarlineSlots = {
@@ -42,7 +42,7 @@ export const VBarline = genericComponent<VBarlineSlots>()({
   props: makeVBarlineProps(),
 
   setup (props, { slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `barline-${uid}`)
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500)
 
diff --git a/packages/vuetify/src/components/VSparkline/VTrendline.tsx b/packages/vuetify/src/components/VSparkline/VTrendline.tsx
index 4cee7027c04..45d0ccb912e 100644
--- a/packages/vuetify/src/components/VSparkline/VTrendline.tsx
+++ b/packages/vuetify/src/components/VSparkline/VTrendline.tsx
@@ -1,8 +1,8 @@
 // Utilities
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import { makeLineProps } from './util/line'
 import { genPath as _genPath } from './util/path'
-import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+import { genericComponent, getPropertyFromItem, propsFactory, useRender } from '@/util'
 
 // Types
 export type VTrendlineSlots = {
@@ -42,7 +42,7 @@ export const VTrendline = genericComponent<VTrendlineSlots>()({
   props: makeVTrendlineProps(),
 
   setup (props, { slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `trendline-${uid}`)
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000))
 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index ec2abafda44..5adf84f0e77 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -15,8 +15,8 @@ import { LoaderSlot, useLoader } from '@/composables/loader'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util'
+import { computed, ref, useId } from 'vue'
+import { filterInputAttrs, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'
 
 // Types
 import type { ComputedRef, Ref } from 'vue'
@@ -87,7 +87,7 @@ export const VSwitch = genericComponent<new <T>(
         : props.color
     })
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `switch-${uid}`)
 
     function onChange () {
diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.tsx b/packages/vuetify/src/components/VTooltip/VTooltip.tsx
index 3a5f530567e..f31e76544e7 100644
--- a/packages/vuetify/src/components/VTooltip/VTooltip.tsx
+++ b/packages/vuetify/src/components/VTooltip/VTooltip.tsx
@@ -11,8 +11,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useScopeId } from '@/composables/scopeId'
 
 // Utilities
-import { computed, mergeProps, ref } from 'vue'
-import { genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, mergeProps, ref, useId } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { StrategyProps } from '@/components/VOverlay/locationStrategies'
@@ -54,7 +54,7 @@ export const VTooltip = genericComponent<OverlaySlots>()({
     const isActive = useProxiedModel(props, 'modelValue')
     const { scopeId } = useScopeId()
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-tooltip-${uid}`)
 
     const overlay = ref<VOverlay>()
diff --git a/packages/vuetify/src/composables/group.ts b/packages/vuetify/src/composables/group.ts
index b039bbcecc6..d8cb729f43f 100644
--- a/packages/vuetify/src/composables/group.ts
+++ b/packages/vuetify/src/composables/group.ts
@@ -2,15 +2,15 @@
 import { useProxiedModel } from './proxiedModel'
 
 // Utilities
-import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, reactive, toRef, unref, watch } from 'vue'
-import { consoleWarn, deepEqual, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory, wrapInArray } from '@/util'
+import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, reactive, toRef, unref, useId, watch } from 'vue'
+import { consoleWarn, deepEqual, findChildrenWithProvide, getCurrentInstance, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { ComponentInternalInstance, ComputedRef, ExtractPropTypes, InjectionKey, PropType, Ref, UnwrapRef } from 'vue'
 import type { EventProp } from '@/util'
 
 export interface GroupItem {
-  id: number
+  id: string
   value: Ref<unknown>
   disabled: Ref<boolean | undefined>
   useIndexAsValue?: boolean
@@ -28,15 +28,15 @@ export interface GroupProps {
 
 export interface GroupProvide {
   register: (item: GroupItem, cmp: ComponentInternalInstance) => void
-  unregister: (id: number) => void
-  select: (id: number, value: boolean) => void
-  selected: Ref<Readonly<number[]>>
-  isSelected: (id: number) => boolean
+  unregister: (id: string) => void
+  select: (id: string, value: boolean) => void
+  selected: Ref<Readonly<string[]>>
+  isSelected: (id: string) => boolean
   prev: () => void
   next: () => void
   selectedClass: Ref<string | undefined>
   items: ComputedRef<{
-    id: number
+    id: string
     value: unknown
     disabled: boolean | undefined
   }[]>
@@ -45,7 +45,7 @@ export interface GroupProvide {
 }
 
 export interface GroupItemProvide {
-  id: number
+  id: string
   isSelected: Ref<boolean>
   isFirst: Ref<boolean>
   isLast: Ref<boolean>
@@ -103,7 +103,7 @@ export function useGroupItem (
     )
   }
 
-  const id = getUid()
+  const id = useId()
 
   provide(Symbol.for(`${injectKey.description}:id`), id)
 
@@ -202,7 +202,7 @@ export function useGroup (
     }
   }
 
-  function unregister (id: number) {
+  function unregister (id: string) {
     if (isUnmounted) return
 
     // TODO: re-evaluate this line's importance in the future
@@ -240,7 +240,7 @@ export function useGroup (
     }
   })
 
-  function select (id: number, value?: boolean) {
+  function select (id: string, value?: boolean) {
     const item = items.find(item => item.id === id)
     if (value && item?.disabled) return
 
@@ -312,7 +312,7 @@ export function useGroup (
     disabled: toRef(props, 'disabled'),
     prev: () => step(items.length - 1),
     next: () => step(1),
-    isSelected: (id: number) => selected.value.includes(id),
+    isSelected: (id: string) => selected.value.includes(id),
     selectedClass: computed(() => props.selectedClass),
     items: computed(() => items),
     getItemIndex: (value: unknown) => getItemIndex(items, value),
@@ -332,7 +332,7 @@ function getItemIndex (items: UnwrapRef<GroupItem[]>, value: unknown) {
 }
 
 function getIds (items: UnwrapRef<GroupItem[]>, modelValue: any[]) {
-  const ids: number[] = []
+  const ids: string[] = []
 
   modelValue.forEach(value => {
     const item = items.find(item => deepEqual(value, item.value))
diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
index e96b8e36fc8..c5e901085bb 100644
--- a/packages/vuetify/src/composables/layout.ts
+++ b/packages/vuetify/src/composables/layout.ts
@@ -13,8 +13,9 @@ import {
   reactive,
   ref,
   shallowRef,
+  useId,
 } from 'vue'
-import { convertToUnit, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory } from '@/util'
+import { convertToUnit, findChildrenWithProvide, getCurrentInstance, propsFactory } from '@/util'
 
 // Types
 import type { ComponentInternalInstance, CSSProperties, InjectionKey, Prop, Ref } from 'vue'
@@ -112,7 +113,7 @@ export function useLayoutItem (options: {
 
   if (!layout) throw new Error('[Vuetify] Could not find injected layout')
 
-  const id = options.id ?? `layout-item-${getUid()}`
+  const id = options.id ?? `layout-item-${useId()}`
 
   const vm = getCurrentInstance('useLayoutItem')
 
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index 38e2f1300e0..2c787c192d7 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -17,7 +17,7 @@ import {
   leafSelectStrategy,
   leafSingleSelectStrategy,
 } from './selectStrategies'
-import { consoleError, getCurrentInstance, getUid, propsFactory } from '@/util'
+import { consoleError, getCurrentInstance, propsFactory } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
@@ -315,7 +315,7 @@ export const useNested = (props: NestedProps) => {
 export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
   const parent = inject(VNestedSymbol, emptyNested)
 
-  const uidSymbol = Symbol(getUid())
+  const uidSymbol = Symbol('nested item')
   const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol)
 
   const item = {
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
index 01a1868e4fa..7fe84052aca 100644
--- a/packages/vuetify/src/composables/validation.ts
+++ b/packages/vuetify/src/composables/validation.ts
@@ -5,8 +5,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useToggleScope } from '@/composables/toggleScope'
 
 // Utilities
-import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue'
-import { getCurrentInstance, getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util'
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, useId, watch } from 'vue'
+import { getCurrentInstance, getCurrentInstanceName, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -79,7 +79,7 @@ export const makeValidationProps = propsFactory({
 export function useValidation (
   props: ValidationProps,
   name = getCurrentInstanceName(),
-  id: MaybeRef<string | number> = getUid(),
+  id: MaybeRef<string | number> = useId(),
 ) {
   const model = useProxiedModel(props, 'modelValue')
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue)
diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
index f9c00298a3e..9fc40d54cb7 100644
--- a/packages/vuetify/src/framework.ts
+++ b/packages/vuetify/src/framework.ts
@@ -9,7 +9,7 @@ import { createTheme, ThemeSymbol } from '@/composables/theme'
 
 // Utilities
 import { nextTick, reactive } from 'vue'
-import { defineComponent, getUid, IN_BROWSER, mergeDeep } from '@/util'
+import { defineComponent, IN_BROWSER, mergeDeep } from '@/util'
 
 // Types
 import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
@@ -101,8 +101,6 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
       }
     }
 
-    getUid.reset()
-
     if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
       app.mixin({
         computed: {
diff --git a/packages/vuetify/src/util/getCurrentInstance.ts b/packages/vuetify/src/util/getCurrentInstance.ts
index 064749f7bf0..33ca3a9eeb2 100644
--- a/packages/vuetify/src/util/getCurrentInstance.ts
+++ b/packages/vuetify/src/util/getCurrentInstance.ts
@@ -2,9 +2,6 @@
 import { getCurrentInstance as _getCurrentInstance } from 'vue'
 import { toKebabCase } from '@/util/helpers'
 
-// Types
-import type { ComponentInternalInstance } from 'vue'
-
 export function getCurrentInstance (name: string, message?: string) {
   const vm = _getCurrentInstance()
 
@@ -20,20 +17,3 @@ export function getCurrentInstanceName (name = 'composables') {
 
   return toKebabCase(vm?.aliasName || vm?.name)
 }
-
-let _uid = 0
-let _map = new WeakMap<ComponentInternalInstance, number>()
-export function getUid () {
-  const vm = getCurrentInstance('getUid')
-
-  if (_map.has(vm)) return _map.get(vm)!
-  else {
-    const uid = _uid++
-    _map.set(vm, uid)
-    return uid
-  }
-}
-getUid.reset = () => {
-  _uid = 0
-  _map = new WeakMap()
-}

From 39e4a50218f6a1870225fe68be530e4918919296 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 17 Dec 2024 19:57:06 +1100
Subject: [PATCH 033/127] fix(VListItem): wait until beforeMount to set parent
 open

---
 .../src/components/VList/VListItem.tsx        | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index ad9d7ed2a3c..cf68ff0665b 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -27,7 +27,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed, watch } from 'vue'
+import { computed, onBeforeMount, watch } from 'vue'
 import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -149,15 +149,21 @@ export const VListItem = genericComponent<VListItemSlots>()({
       variant: props.variant,
     }))
 
+    // useNestedItem doesn't call register until beforeMount,
+    // so this can't be an immediate watcher as we don't know parent yet
     watch(() => link.isActive?.value, val => {
-      if (val && parent.value != null) {
+      if (!val) return
+      handleActiveLink()
+    })
+    onBeforeMount(() => {
+      if (link.isActive?.value) handleActiveLink()
+    })
+    function handleActiveLink () {
+      if (parent.value != null) {
         root.open(parent.value, true)
       }
-
-      if (val) {
-        openOnSelect(val)
-      }
-    }, { immediate: true })
+      openOnSelect(true)
+    }
 
     const { themeClasses } = provideTheme(props)
     const { borderClasses } = useBorder(props)

From 1d34a8375917f47df76caa33e9625094983cff81 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 18 Dec 2024 22:26:43 +1100
Subject: [PATCH 034/127] chore(release): publish v3.7.6

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

diff --git a/lerna.json b/lerna.json
index 7cd991bf6d8..a56d17b2aa6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.5"
+  "version": "3.7.6"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 1e9e96b1e87..435323a47c4 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.5",
+  "version": "3.7.6",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index d5180cbebb2..e9057270748 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.7.5",
+  "version": "3.7.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 24bc681ce07..2992728a82a 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.5",
+  "version": "3.7.6",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 6dc52fe22d4e1dbe25e51abb947b11eb2725a21f Mon Sep 17 00:00:00 2001
From: Shinji Sakai <shinjisakai821@gmail.com>
Date: Thu, 26 Dec 2024 00:37:39 -0500
Subject: [PATCH 035/127] chore: update cypress tests to vitest (#20754)

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../__tests__/VAppBar.spec.browser.tsx        |  98 +++++++++
 .../VAppBar/__tests__/VAppBar.spec.cy.tsx     | 190 -----------------
 .../VBottomNavigation.spec.browser.tsx        |  50 +++++
 .../__tests__/VBottomNavigation.spec.cy.tsx   |  41 ----
 .../__tests__/VBottomSheet.spec.browser.tsx   |  48 +++++
 .../__tests__/VBottomSheet.spec.cy.tsx        |  24 ---
 .../__tests__/VBreadcrumbs.spec.browser.tsx   | 113 ++++++++++
 .../__tests__/VBreadcrumbs.spec.cy.tsx        | 193 ------------------
 .../VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx |  66 ------
 .../VChip/__tests__/VChip.spec.browser.tsx    |   2 +-
 .../__tests__/VDataIterator.spec.browser.tsx  |  42 ++++
 .../__tests__/VDataIterator.spec.cy.tsx       | 105 ----------
 .../VDataTableVirtual.spec.browser.tsx        |  43 ++++
 .../__tests__/VDataTableVirtual.spec.cy.tsx   | 121 -----------
 .../VIcon/__tests__/VIcon.spec.browser.tsx    |  59 ++++++
 .../VIcon/__tests__/VIcon.spec.cy.tsx         | 126 ------------
 16 files changed, 454 insertions(+), 867 deletions(-)
 create mode 100644 packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
 delete mode 100644 packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx
 create mode 100644 packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx

diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.browser.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.browser.tsx
new file mode 100644
index 00000000000..ad0b8616db1
--- /dev/null
+++ b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.browser.tsx
@@ -0,0 +1,98 @@
+// Components
+import { VAppBar } from '..'
+import { VLayout } from '@/components/VLayout'
+import { VMain } from '@/components/VMain'
+
+// Utilities
+import { render, screen, scroll } from '@test'
+import { ref } from 'vue'
+
+describe('VAppBar', () => {
+  it('allows custom height', async () => {
+    const height = ref(64)
+    render(() => (
+      <VLayout>
+        <VAppBar height={ height.value } />
+      </VLayout>
+    ))
+
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '64px' })
+
+    height.value = 128
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '128px' })
+  })
+
+  it('supports density', async () => {
+    const density = ref<any>('default')
+    render(() => (
+      <VLayout>
+        <VAppBar density={ density.value } />
+      </VLayout>
+    ))
+
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '64px' })
+
+    density.value = 'prominent'
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '128px' })
+
+    density.value = 'comfortable'
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '56px' })
+
+    density.value = 'compact'
+    expect.element(screen.getByCSS('.v-app-bar')).toHaveStyle({ height: '48px' })
+  })
+
+  describe('scroll behavior', () => {
+    it('hides on scroll', async () => {
+      const scrollBehavior = ref()
+      render(() => (
+        <VLayout>
+          <VAppBar scrollBehavior={ scrollBehavior.value } />
+          <VMain style="min-height: 200vh;" />
+        </VLayout>
+      ))
+
+      expect.element(screen.getByCSS('.v-app-bar')).toBeVisible()
+
+      await scroll({ top: 500 })
+      await scroll({ top: 250 })
+      expect.element(screen.getByCSS('.v-app-bar')).toBeVisible()
+
+      await scroll({ top: 0 })
+      expect.element(screen.getByCSS('.v-app-bar')).toBeVisible()
+    })
+
+    it('should hide correctly when scroll to the bottom', async () => {
+      render(() => (
+        <VLayout>
+          <VAppBar scrollBehavior="hide" />
+          <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>
+      ))
+
+      expect.element(screen.getByCSS('.v-app-bar')).toBeVisible()
+
+      await scroll({ top: 1000 })
+      expect.element(screen.getByCSS('.v-app-bar')).not.toBeVisible()
+    })
+
+    it('collapses', async () => {
+      render(() => (
+        <VLayout>
+          <VAppBar scrollBehavior="scroll" />
+          <VMain style="min-height: 200vh;" />
+        </VLayout>
+      ))
+
+      expect.element(screen.getByCSS('.v-app-bar')).toBeVisible()
+
+      await scroll({ top: 500 })
+      await scroll({ top: 0 })
+      expect.element(screen.getByCSS('.v-app-bar')).not.toHaveClass('v-toolbar--collapse')
+    })
+  })
+})
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx b/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
deleted file mode 100644
index a9efd0b63d7..00000000000
--- a/packages/vuetify/src/components/VAppBar/__tests__/VAppBar.spec.cy.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VAppBar } from '..'
-import { VLayout } from '@/components/VLayout'
-import { VMain } from '@/components/VMain'
-
-// Utilities
-import { ref } from 'vue'
-
-// Constants
-const SCROLL_OPTIONS = { ensureScrollable: true, duration: 50 }
-
-describe('VAppBar', () => {
-  it('allows custom height', () => {
-    cy
-      .mount(({ height }: any) => (
-        <VLayout>
-          <VAppBar height={ height } />
-        </VLayout>
-      ))
-      .get('.v-app-bar').should('have.css', 'height', '64px')
-      .setProps({ height: 128 })
-      .get('.v-app-bar').should('have.css', 'height', '128px')
-  })
-
-  it('supports density', () => {
-    cy
-      .mount(({ density = 'default' }: any) => (
-        <VLayout>
-          <VAppBar density={ density } />
-        </VLayout>
-      ))
-      .get('.v-app-bar').should('have.css', 'height', '64px')
-      .setProps({ density: 'prominent' })
-      .get('.v-app-bar').should('have.css', 'height', '128px')
-      .setProps({ density: 'comfortable' })
-      .get('.v-app-bar').should('have.css', 'height', '56px')
-      .setProps({ density: 'compact' })
-      .get('.v-app-bar').should('have.css', 'height', '48px')
-  })
-
-  it('is hidden on mount', () => {
-    const model = ref(false)
-
-    cy
-      .mount(() => (
-        <VLayout>
-          <VAppBar v-model={ model.value } />
-        </VLayout>
-      ))
-      .get('.v-app-bar')
-      .should('not.be.visible')
-      .then(() => (model.value = true))
-      .get('.v-app-bar')
-      .should('be.visible')
-  })
-
-  describe('scroll behavior', () => {
-    it('hides', () => {
-      cy.mount(({ scrollBehavior }: any) => (
-        <VLayout>
-          <VAppBar scrollBehavior={ scrollBehavior } />
-
-          <VMain style="min-height: 200vh;" />
-        </VLayout>
-      ))
-        .setProps({ scrollBehavior: 'hide' })
-        .get('.v-app-bar').should('be.visible')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('not.be.visible')
-        .window().scrollTo(0, 250, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('be.visible')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('be.visible')
-
-        .setProps({ scrollBehavior: 'hide inverted' })
-        .get('.v-app-bar').should('not.be.visible')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('be.visible')
-        .window().scrollTo(0, 250, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('not.be.visible')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-        .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>
-          <VAppBar scrollBehavior={ scrollBehavior } />
-
-          <VMain style="min-height: 200vh;" />
-        </VLayout>
-      ))
-        .setProps({ scrollBehavior: 'collapse' })
-        .get('.v-app-bar').should('be.visible')
-        .get('.v-app-bar').should('have.not.class', 'v-toolbar--collapse')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('have.class', 'v-toolbar--collapse')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-
-        .setProps({ scrollBehavior: 'collapse inverted' })
-        .get('.v-app-bar').should('be.visible')
-        .get('.v-app-bar').should('have.class', 'v-toolbar--collapse')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('not.have.class', 'v-toolbar--collapse')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-    })
-
-    it('elevates', () => {
-      cy.mount(({ scrollBehavior }: any) => (
-        <VLayout>
-          <VAppBar scrollBehavior={ scrollBehavior } />
-
-          <VMain style="min-height: 200vh;" />
-        </VLayout>
-      ))
-        .setProps({ scrollBehavior: 'elevate' })
-        .get('.v-app-bar').should('have.class', 'v-toolbar--flat')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('not.have.class', 'v-toolbar--flat')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-
-        .setProps({ scrollBehavior: 'elevate inverted' })
-        .get('.v-app-bar').should('not.have.class', 'v-toolbar--flat')
-        .window().scrollTo(0, 500, SCROLL_OPTIONS)
-        .get('.v-app-bar').should('have.class', 'v-toolbar--flat')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-    })
-
-    it('fades image', () => {
-      cy.mount(({ scrollBehavior, image }: any) => (
-        <VLayout>
-          <VAppBar
-            image={ image }
-            scrollBehavior={ scrollBehavior }
-          />
-
-          <VMain style="min-height: 200vh;" />
-        </VLayout>
-      ))
-        .setProps({
-          image: 'https://picsum.photos/1920/1080?random',
-          scrollBehavior: 'fade-image',
-        })
-        .get('.v-toolbar__image').should('have.css', 'opacity', '1')
-        .window().scrollTo(0, 150, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0.5')
-        .window().scrollTo(0, 300, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0')
-        .window().scrollTo(0, 60, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0.8')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '1')
-
-        .setProps({ scrollBehavior: 'fade-image inverted' })
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0')
-        .window().scrollTo(0, 150, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0.5')
-        .window().scrollTo(0, 300, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '1')
-        .window().scrollTo(0, 60, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0.2')
-        .window().scrollTo(0, 0, SCROLL_OPTIONS)
-        .get('.v-toolbar__image').should('have.css', 'opacity', '0')
-    })
-  })
-})
diff --git a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.browser.tsx b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.browser.tsx
new file mode 100644
index 00000000000..184c969cbeb
--- /dev/null
+++ b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.browser.tsx
@@ -0,0 +1,50 @@
+// Components
+import { VBottomNavigation } from '../VBottomNavigation'
+import { VLayout } from '@/components/VLayout'
+
+// Utilities
+import { render, screen } from '@test'
+import { ref } from 'vue'
+
+describe('VBottomNavigation', () => {
+  it('allows custom height', async () => {
+    const height = ref(200)
+    render(() => (
+      <VLayout>
+        <VBottomNavigation height={ height.value } />
+      </VLayout>
+    ))
+    const navigation = screen.getByCSS('.v-bottom-navigation')
+    expect.element(navigation).toHaveStyle({ height: '200px' })
+    height.value = 150
+    expect.element(navigation).toHaveStyle({ height: '150px' })
+  })
+
+  it('supports density', async () => {
+    const density = ref<any>('default')
+    render(() => (
+      <VLayout>
+        <VBottomNavigation density={ density.value } />
+      </VLayout>
+    ))
+    const navigation = screen.getByCSS('.v-bottom-navigation')
+    expect.element(navigation).toHaveStyle({ height: '56px' })
+    density.value = 'comfortable'
+    expect.element(navigation).toHaveStyle({ height: '48px' })
+    density.value = 'comfortable'
+    expect.element(navigation).toHaveStyle({ height: '40px' })
+  })
+
+  it('is not visible when inactive', async () => {
+    const active = ref<boolean>(true)
+    render(() => (
+      <VLayout>
+        <VBottomNavigation active={ active.value } />
+      </VLayout>
+    ))
+    const navigation = screen.getByCSS('.v-bottom-navigation')
+    expect.element(navigation).toHaveClass('v-bottom-navigation--active')
+    active.value = false
+    expect.element(navigation).not.toHaveClass('v-bottom-navigation--active')
+  })
+})
diff --git a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx
deleted file mode 100644
index dde80eb165a..00000000000
--- a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VBottomNavigation } from '..'
-import { VLayout } from '@/components/VLayout'
-
-describe('VBottomNavigation', () => {
-  it('should allow custom height', () => {
-    cy.mount(() => (
-      <VLayout>
-        <VBottomNavigation height="200" />
-      </VLayout>
-    ))
-
-    cy.get('.v-bottom-navigation').should('have.css', 'height', '200px')
-  })
-
-  it('should support density', () => {
-    cy.mount(({ density }: any) => (
-      <VLayout>
-        <VBottomNavigation density={ density } />
-      </VLayout>
-    ))
-
-    cy.get('.v-bottom-navigation').should('have.css', 'height', '56px')
-      .setProps({ density: 'comfortable' })
-      .get('.v-bottom-navigation').should('have.css', 'height', '48px')
-      .setProps({ density: 'compact' })
-      .get('.v-bottom-navigation').should('have.css', 'height', '40px')
-  })
-
-  it('should not be visible if active is false', () => {
-    cy.mount(() => (
-      <VLayout>
-        <VBottomNavigation active={ false }></VBottomNavigation>
-      </VLayout>
-    ))
-
-    cy.get('.v-bottom-navigation').should('not.be.visible')
-  })
-})
diff --git a/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.browser.tsx b/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.browser.tsx
new file mode 100644
index 00000000000..5f618e4095e
--- /dev/null
+++ b/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.browser.tsx
@@ -0,0 +1,48 @@
+// Components
+import { VBottomSheet } from '..'
+
+// Utilities
+import { render, screen } from '@test'
+import { ref } from 'vue'
+
+describe('VBottomSheet', () => {
+  it('renders properly with default props', async () => {
+    render(() => (
+      <VBottomSheet model-value>
+        <div>Content inside bottom sheet</div>
+      </VBottomSheet>
+    ))
+
+    const bottomSheet = screen.getByCSS('.v-bottom-sheet')
+    expect.element(bottomSheet).toBeVisible()
+    expect.element(bottomSheet).not.toHaveClass('v-bottom-sheet--inset')
+    expect.element(bottomSheet).toHaveTextContent('Content inside bottom sheet')
+  })
+
+  it('applies inset class when inset prop is true', async () => {
+    const inset = ref<boolean>(false)
+
+    render(() => (
+      <VBottomSheet model-value inset={ inset.value }>
+        <div>Content inside bottom sheet</div>
+      </VBottomSheet>
+    ))
+
+    const bottomSheet = screen.getByCSS('.v-bottom-sheet')
+    expect.element(bottomSheet).not.toHaveClass('v-bottom-sheet--inset')
+
+    inset.value = true
+    expect.element(bottomSheet).toHaveClass('v-bottom-sheet--inset')
+  })
+
+  it('applies custom styles and classes', async () => {
+    render(() => (
+      <VBottomSheet model-value class="custom-class" style="color: red;">
+        <div>Custom styles</div>
+      </VBottomSheet>
+    ))
+    const bottomSheet = screen.getByCSS('.v-bottom-sheet')
+    expect.element(bottomSheet).toHaveClass('custom-class')
+    expect.element(bottomSheet).toHaveStyle({ color: 'rgb(255, 0, 0)' })
+  })
+})
diff --git a/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx b/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx
deleted file mode 100644
index 51f41a0a6d9..00000000000
--- a/packages/vuetify/src/components/VBottomSheet/__tests__/VBottomSheet.spec.cy.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VBottomSheet } from '..'
-import { VSheet } from '@/components/VSheet'
-
-// Tests
-describe('VBottomSheet', () => {
-  it('reduces maximum width with the inset prop', () => {
-    cy.mount(({ inset }: any) => (
-      <VBottomSheet model-value inset={ inset }>
-        <VSheet class="pa-4">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed hic, iusto tenetur rerum eum libero numquam reprehenderit
-        </VSheet>
-      </VBottomSheet>
-    ))
-      .get('.v-bottom-sheet')
-      .should('have.not.class', 'v-bottom-sheet--inset')
-      .setProps({ inset: true })
-      .get('.v-bottom-sheet')
-      .should('have.class', 'v-bottom-sheet--inset')
-      .should('have.css', 'max-width', '70%')
-  })
-})
diff --git a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.browser.tsx b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.browser.tsx
new file mode 100644
index 00000000000..6cbdf6147dc
--- /dev/null
+++ b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.browser.tsx
@@ -0,0 +1,113 @@
+// Components
+import { VBreadcrumbs } from '../VBreadcrumbs'
+import { VBreadcrumbsDivider } from '../VBreadcrumbsDivider'
+import { VBreadcrumbsItem } from '../VBreadcrumbsItem'
+
+// Utilities
+import { render, screen } from '@test'
+
+describe('VBreadcrumbs', () => {
+  it('should use item slot', () => {
+    render(() => (
+      <VBreadcrumbs items={['hello', 'world']}>
+        {{
+          title: ({ item }: any) => `${item.title}!`,
+        }}
+      </VBreadcrumbs>
+    ))
+
+    const items = screen.getAllByText(/hello!|world!/i)
+    expect(items).toHaveLength(2)
+    expect.element(items[0]).toHaveTextContent('hello!')
+  })
+
+  it('should use divider slot', () => {
+    render(() => (
+      <VBreadcrumbs items={['hello', 'world']}>
+        {{
+          divider: () => '-',
+        }}
+      </VBreadcrumbs>
+    ))
+
+    expect(screen.getByText('-')).toBeVisible()
+  })
+
+  it('should use bg-color', () => {
+    render(() => (
+      <VBreadcrumbs items={['hello', 'world']} bgColor="primary"></VBreadcrumbs>
+    ))
+    expect(screen.getByCSS('.v-breadcrumbs')).toHaveClass('bg-primary')
+  })
+
+  it('should use color', () => {
+    render(() => (
+      <VBreadcrumbs items={['hello', 'world']} color="primary"></VBreadcrumbs>
+    ))
+
+    const items = screen.getAllByCSS('.v-breadcrumbs-item')
+    items.forEach(item => expect(item).toHaveClass('text-primary'))
+  })
+
+  it('should render link if href is set', () => {
+    render(() => (
+      <VBreadcrumbs
+        items={[
+          { title: 'hello', href: '/hello' },
+          { title: 'world', href: '/world' },
+        ]}
+      ></VBreadcrumbs>
+    ))
+
+    const links = screen.getAllByCSS('a.v-breadcrumbs-item--link')
+    links.forEach(link => expect(link).toHaveAttribute('href'))
+  })
+
+  it('should apply active color', async () => {
+    render(() => (
+      <VBreadcrumbs active-color="primary">
+      <VBreadcrumbsItem active text="hello"></VBreadcrumbsItem>
+      <VBreadcrumbsItem text="world" to="/world"></VBreadcrumbsItem>
+    </VBreadcrumbs>
+    ))
+    // Initial check for the active color class
+    expect(screen.getByCSS('.v-breadcrumbs-item.text-primary')).toBeInTheDocument()
+
+    const items = screen.getAllByCSS('.v-breadcrumbs-item')
+    expect.element(items[0]).toHaveClass('text-primary')
+  })
+  it('should disable last item by default if using items prop', () => {
+    render(() => (
+      <VBreadcrumbs items={['foo', 'bar']}></VBreadcrumbs>
+    ))
+
+    const lastItem = screen.getByCSS('.v-breadcrumbs-item:last-child')
+    expect.element(lastItem).toHaveClass('v-breadcrumbs-item--disabled')
+  })
+
+  it('should override last item disabled by default', () => {
+    render(() => (
+      <VBreadcrumbs
+        items={['foo', { title: 'bar', disabled: false }]}
+      ></VBreadcrumbs>
+    ))
+
+    const lastItem = screen.getByCSS('.v-breadcrumbs-item:last-child')
+    expect.element(lastItem).not.toHaveClass('v-breadcrumbs-item--disabled')
+  })
+
+  it('should provide default divider', () => {
+    render(() => (
+      <VBreadcrumbs>
+        <VBreadcrumbsItem title="foo"></VBreadcrumbsItem>
+        <VBreadcrumbsDivider></VBreadcrumbsDivider>
+        <VBreadcrumbsItem title="bar"></VBreadcrumbsItem>
+        <VBreadcrumbsDivider divider="-"></VBreadcrumbsDivider>
+        <VBreadcrumbsItem title="fizz"></VBreadcrumbsItem>
+      </VBreadcrumbs>
+    ))
+
+    expect(screen.getByText('/')).toBeInTheDocument()
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+})
diff --git a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
deleted file mode 100644
index 0f2f228f1af..00000000000
--- a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VBreadcrumbs } from '..'
-import { Application } from '../../../../cypress/templates'
-import { VBreadcrumbsDivider } from '../VBreadcrumbsDivider'
-import { VBreadcrumbsItem } from '../VBreadcrumbsItem'
-
-// Utilities
-import { createRouter, createWebHistory } from 'vue-router'
-
-describe('VBreadcrumbs', () => {
-  it('should use item slot', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['hello', 'world']}>
-          {{
-            title: ({ item }: any) => `${item.title}!`,
-          }}
-        </VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-item').should('have.length', 2).eq(0).should('have.text', 'hello!')
-  })
-
-  it('should use divider slot', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['hello', 'world']}>
-          {{
-            divider: () => '-',
-          }}
-        </VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-divider').should('have.length', 1).eq(0).should('have.text', '-')
-  })
-
-  it('should render icon', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['hello', 'world']} icon="mdi-home"></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-icon').should('exist').should('have.class', 'mdi-home').should('have.length', 1)
-  })
-
-  it('should use bg-color', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['hello', 'world']} bgColor="primary"></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs').should('have.class', 'bg-primary')
-  })
-
-  it('should use color', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['hello', 'world']} color="primary"></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-item').should('have.class', 'text-primary')
-  })
-
-  it('should render link if href is set', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={[{ title: 'hello', href: '/hello' }, { title: 'world', href: '/world' }]}></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('a.v-breadcrumbs-item--link').should('exist').should('have.attr', 'href')
-  })
-
-  it('should use router if to is set', () => {
-    const router = createRouter({
-      history: createWebHistory(),
-      routes: [
-        {
-          path: '/',
-          component: { template: 'Home' },
-        },
-        {
-          path: '/about',
-          component: { template: 'About' },
-        },
-      ],
-    })
-
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={[{ title: 'about', to: '/about' }, { title: 'something', to: '/something' }]}></VBreadcrumbs>
-      </Application>
-    ), {
-      global: {
-        plugins: [router],
-      },
-    })
-
-    cy.get('.v-breadcrumbs').should('exist')
-
-    cy.get('.v-breadcrumbs-item').should('exist').eq(0).click()
-    cy.then(() => {
-      expect(router.currentRoute.value.path).to.equal('/about')
-    })
-
-    // Return back to root to not break succeeding tests that don't have /about path.
-    cy.get('.v-breadcrumbs').then(() => {
-      router.push('/')
-    })
-  })
-
-  it('should apply active color', () => {
-    const router = createRouter({
-      history: createWebHistory(),
-      routes: [
-        {
-          path: '/',
-          component: { template: 'Home' },
-        },
-        {
-          path: '/world',
-          component: { template: 'World' },
-        },
-      ],
-    })
-
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs active-color="primary">
-          <VBreadcrumbsItem active text="hello"></VBreadcrumbsItem>
-          <VBreadcrumbsDivider>/</VBreadcrumbsDivider>
-          <VBreadcrumbsItem text="world" to="/world"></VBreadcrumbsItem>
-        </VBreadcrumbs>
-      </Application>
-    ), {
-      global: {
-        plugins: [router],
-      },
-    })
-
-    cy.get('.v-breadcrumbs-item').eq(0).should('have.class', 'text-primary')
-
-    cy.get('.v-breadcrumbs').then(() => {
-      router.push('/world')
-    })
-
-    cy.get('.v-breadcrumbs-item').eq(1).should('have.class', 'text-primary')
-  })
-
-  it('should disabled last item by default if using items prop', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['foo', 'bar']}></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-item').last().should('have.class', 'v-breadcrumbs-item--disabled')
-  })
-
-  it('should be possible to override last item disabled by default', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs items={['foo', { title: 'bar', disabled: false }]}></VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-item').last().should('not.have.class', 'v-breadcrumbs-item--disabled')
-  })
-
-  it('should provide default divider', () => {
-    cy.mount(() => (
-      <Application>
-        <VBreadcrumbs>
-          <VBreadcrumbsItem title="foo"></VBreadcrumbsItem>
-          <VBreadcrumbsDivider></VBreadcrumbsDivider>
-          <VBreadcrumbsItem title="bar"></VBreadcrumbsItem>
-          <VBreadcrumbsDivider divider="-"></VBreadcrumbsDivider>
-          <VBreadcrumbsItem title="fizz"></VBreadcrumbsItem>
-        </VBreadcrumbs>
-      </Application>
-    ))
-
-    cy.get('.v-breadcrumbs-divider').first().should('have.text', '/')
-    cy.get('.v-breadcrumbs-divider').last().should('have.text', '-')
-  })
-})
diff --git a/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx b/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
deleted file mode 100644
index ca129c7683e..00000000000
--- a/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VBtnGroup } from '..'
-import { VBtn } from '@/components/VBtn'
-
-const colors = ['success', 'info', 'warning', 'error', 'invalid'] as const
-const densities = ['default', 'comfortable', 'compact'] as const
-const variants = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'] as const
-
-// TODO: screenshot tests
-describe('VBtnGroup', () => {
-  describe('color', () => {
-    it('should render set length', () => {
-      cy.mount(() => (
-        <>
-          { colors.map(color => (
-            <VBtnGroup color={ color }>
-              <VBtn>{ color } Button 1</VBtn>
-              <VBtn>Button 2</VBtn>
-              <VBtn>Button 3</VBtn>
-            </VBtnGroup>
-          ))}
-        </>
-      ))
-        .get('.v-btn-group')
-        .should('have.length', colors.length)
-    })
-  })
-
-  describe('density', () => {
-    it('supports density props', () => {
-      cy.mount(() => (
-        <>
-          { densities.map(density => (
-            <VBtnGroup color="primary" density={ density }>
-              <VBtn>{ density } Button 1</VBtn>
-              <VBtn>Button 2</VBtn>
-              <VBtn>Button 3</VBtn>
-            </VBtnGroup>
-          ))}
-        </>
-      ))
-        .get('.v-btn-group')
-        .should('have.length', densities.length)
-    })
-  })
-
-  describe('variant', () => {
-    it('supports variant props', () => {
-      cy.mount(() => (
-        <>
-          { variants.map(variant => (
-            <VBtnGroup color="primary" variant={ variant }>
-              <VBtn>{ variant } Button 1</VBtn>
-              <VBtn>Button 2</VBtn>
-              <VBtn>Button 3</VBtn>
-            </VBtnGroup>
-          ))}
-        </>
-      ))
-        .get('.v-btn-group')
-        .should('have.length', variants.length)
-    })
-  })
-})
diff --git a/packages/vuetify/src/components/VChip/__tests__/VChip.spec.browser.tsx b/packages/vuetify/src/components/VChip/__tests__/VChip.spec.browser.tsx
index cfea3967483..bc822445272 100644
--- a/packages/vuetify/src/components/VChip/__tests__/VChip.spec.browser.tsx
+++ b/packages/vuetify/src/components/VChip/__tests__/VChip.spec.browser.tsx
@@ -1,4 +1,4 @@
-import { VChip } from '../'
+import { VChip } from '../VChip'
 
 // Utilities
 import { render, screen, userEvent } from '@test'
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.browser.tsx b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.browser.tsx
new file mode 100644
index 00000000000..829b3fcbad6
--- /dev/null
+++ b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.browser.tsx
@@ -0,0 +1,42 @@
+// Utilities
+import { render, screen } from '@test'
+import { VDataIterator } from '../VDataIterator'
+
+const DESSERT_ITEMS = [
+  { name: 'Frozen Yogurt', calories: 159 },
+  { name: 'Ice cream sandwich', calories: 237 },
+  { name: 'Eclair', calories: 262 },
+  { name: 'Cupcake', calories: 305 },
+  { name: 'Gingerbread', calories: 356 },
+  { name: 'Jelly bean', calories: 375 },
+  { name: 'Lollipop', calories: 392 },
+  { name: 'Honeycomb', calories: 408 },
+  { name: 'Donut', calories: 452 },
+  { name: 'KitKat', calories: 518 },
+]
+
+describe('VDataIterator', () => {
+  it('should render items in the default slot', async () => {
+    render(() => (
+      <VDataIterator items={ DESSERT_ITEMS } itemsPerPage={ 5 }>
+        { ({ groupedItems }) => {
+          return groupedItems.map(item => {
+            const dataItem = item as {
+              raw: { name: string, calories: number }
+            }
+            return (
+              <li>
+                { dataItem.raw.name } - { dataItem.raw.calories } calories
+              </li>
+            )
+          })
+        }}
+      </VDataIterator>
+    ))
+
+    const listItems = screen.getAllByRole('listitem')
+    expect(listItems).toHaveLength(5)
+    expect.element(listItems[0]).toContain('Frozen Yogurt - 159 calories')
+    expect.element(listItems[4]).toContain('Gingerbread - 356 calories')
+  })
+})
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
deleted file mode 100644
index c4815cf80ba..00000000000
--- a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-import { Application } from '../../../../cypress/templates'
-import { VDataIterator } from '..'
-
-const DESSERT_ITEMS = [
-  {
-    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%',
-  },
-]
-
-describe('VDataIterator', () => {
-  it('should render default slot', () => {
-    cy.mount(() => (
-      <Application>
-        <VDataIterator items={ DESSERT_ITEMS }>
-          {{
-            default: ({ items }) => items.map(item => (
-              <div class="dessert-item">{ item.raw.name }</div>
-            )),
-          }}
-        </VDataIterator>
-      </Application>
-    ))
-
-    cy.get('.dessert-item').should('have.length', 5)
-  })
-})
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx
new file mode 100644
index 00000000000..9d0c0e78509
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.browser.tsx
@@ -0,0 +1,43 @@
+// Utilities
+import { render, screen } from '@test'
+import { VDataTableVirtual } from '..'
+
+const DESSERT_HEADERS = [
+  { title: 'Dessert (100g serving)', key: 'name' },
+  { title: 'Calories', key: 'calories' },
+  { title: 'Fat (g)', key: 'fat' },
+  { title: 'Carbs (g)', key: 'carbs' },
+  { title: 'Protein (g)', key: 'protein' },
+  { title: 'Iron (%)', key: 'iron' },
+]
+
+const DESSERT_ITEMS = [
+  { 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%' },
+]
+
+describe('VDataTableVirtual', () => {
+  it('should render only visible items', async () => {
+    const items = [...new Array(10)].reduce(curr => {
+      curr.push(...DESSERT_ITEMS)
+      return curr
+    }, [])
+
+    render(() => (
+      <VDataTableVirtual items={ items } headers={ DESSERT_HEADERS } height={ 500 } />
+    ))
+
+    const rows = screen.getAllByRole('row')
+    expect(rows.length).toBeLessThan(items.length)
+    expect.element(rows[0]).not.toHaveStyle({ height: '0px' })
+    expect.element(rows[rows.length - 1]).toHaveStyle({ height: '0px' })
+  })
+})
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx
deleted file mode 100644
index cd62cae473f..00000000000
--- a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableVirtual.spec.cy.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-import { Application } from '../../../../cypress/templates'
-import { VDataTableVirtual } from '..'
-
-const DESSERT_HEADERS = [
-  { title: 'Dessert (100g serving)', key: 'name' },
-  { title: 'Calories', key: 'calories' },
-  { title: 'Fat (g)', key: 'fat' },
-  { title: 'Carbs (g)', key: 'carbs' },
-  { title: 'Protein (g)', key: 'protein' },
-  { title: 'Iron (%)', key: 'iron' },
-]
-
-const DESSERT_ITEMS = [
-  {
-    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%',
-  },
-]
-
-describe('VDataTable', () => {
-  it('should render only visible items', () => {
-    const items = [...new Array(10)].reduce(curr => {
-      curr.push(...DESSERT_ITEMS)
-      return curr
-    }, [])
-    cy.mount(() => (
-      <Application>
-        <VDataTableVirtual items={ items } headers={ DESSERT_HEADERS } height={ 500 } />
-      </Application>
-    ))
-
-    cy.get('tbody tr')
-      .should('have.length.lt', items.length)
-      .get('tbody tr')
-      .last()
-      .should('have.css', 'height')
-      .and('not.equal', '0px')
-      .get('tbody tr')
-      .first()
-      .should('have.css', 'height')
-      .and('equal', '0px')
-  })
-})
diff --git a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.browser.tsx b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.browser.tsx
new file mode 100644
index 00000000000..74c828e877b
--- /dev/null
+++ b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.browser.tsx
@@ -0,0 +1,59 @@
+import { VIcon } from '../VIcon'
+
+// Utilities
+import { render, screen } from '@test'
+
+describe('VIcon', () => {
+  describe('icon prop', () => {
+    it('should render icon from default set', () => {
+      render(() => <VIcon icon="mdi-home" />)
+
+      const icon = screen.getByText('', { selector: '.mdi-home' })
+      expect(icon).toHaveClass('mdi-home')
+      expect(icon).toHaveClass('mdi')
+    })
+  })
+
+  describe('default slot', () => {
+    it('should render icon from default set', () => {
+      render(() => <VIcon>mdi-home</VIcon>)
+
+      const icon = screen.getByText('', { selector: '.mdi-home' })
+      expect(icon).toHaveClass('mdi-home')
+      expect(icon).toHaveClass('mdi')
+    })
+
+    it('should render default slot if no icon value is found', () => {
+      const Foo = () => (
+        <svg style="width: 100%; height: 100%;" class="foo">
+          <path d="M7,10L12,15L17,10H7Z" />
+        </svg>
+      )
+
+      render(() => (
+        <VIcon>
+          <Foo />
+        </VIcon>
+      ))
+
+      const svg = screen.getByText('', { selector: '.foo' })
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  it('should render svg icon', () => {
+    render(() => <VIcon icon="svg:M7,10L12,15L17,10H7Z" />)
+
+    const svg = screen.getByText('', { selector: 'svg' })
+    expect(svg).toBeInTheDocument()
+    const path = svg.querySelector('path')
+    expect(path).toHaveAttribute('d', 'M7,10L12,15L17,10H7Z')
+  })
+
+  it('should render class icon', () => {
+    render(() => <VIcon icon="class:foo" />)
+
+    const icon = screen.getByText('', { selector: '.foo' })
+    expect(icon).toHaveClass('foo')
+  })
+})
diff --git a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx
deleted file mode 100644
index c1b34f9a4a7..00000000000
--- a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-// Components
-import { VClassIcon } from '..'
-import { VIcon } from '../VIcon'
-
-// Icons
-import { aliases } from '@/iconsets/mdi'
-
-// Utilities
-import { defineComponent } from 'vue'
-
-describe('VIcon', () => {
-  describe('icon prop', () => {
-    it('should render icon from default set', () => {
-      cy.mount(() => (
-        <VIcon icon="mdi-home" />
-      ))
-
-      cy.get('.v-icon').should('have.class', 'mdi')
-      cy.get('.v-icon').should('have.class', 'mdi-home')
-    })
-
-    it('should render aliased icon', () => {
-      cy.mount(() => (
-        <VIcon icon="$close" />
-      ), null, { icons: { aliases } })
-
-      cy.get('.v-icon').should('have.class', 'mdi')
-      cy.get('.v-icon').should('have.class', 'mdi-close')
-    })
-
-    it('should render icon from alternative set', () => {
-      cy.mount(() => (
-        <VIcon icon="foo:bar" />
-      ), null, {
-        icons: {
-          defaultSet: 'mdi',
-          sets: {
-            foo: {
-              component: props => <VClassIcon { ...props } />,
-            },
-          },
-        },
-      })
-
-      cy.get('.v-icon').should('have.class', 'bar')
-    })
-  })
-
-  describe('default slot', () => {
-    it('should render icon from default set', () => {
-      cy.mount(() => (
-        <VIcon>mdi-home</VIcon>
-      ))
-
-      cy.get('.v-icon').should('have.class', 'mdi')
-      cy.get('.v-icon').should('have.class', 'mdi-home')
-    })
-
-    it('should render aliased icon', () => {
-      cy.mount(() => (
-        <VIcon>$close</VIcon>
-      ), null, { icons: { aliases } })
-
-      cy.get('.v-icon').should('have.class', 'mdi')
-      cy.get('.v-icon').should('have.class', 'mdi-close')
-    })
-
-    it('should render icon from alternative set', () => {
-      cy.mount(() => (
-        <VIcon>
-          foo:bar
-        </VIcon>
-      ), null, {
-        icons: {
-          defaultSet: 'mdi',
-          sets: {
-            foo: {
-              component: props => <VClassIcon { ...props } />,
-            },
-          },
-        },
-      })
-
-      cy.get('.v-icon').should('have.class', 'bar')
-    })
-
-    it('should render default slot if no icon value found', () => {
-      const Foo = defineComponent({
-        setup () {
-          return () => (
-            <svg style="width: 100%; height: 100%;" class="foo">
-              <path d="M7,10L12,15L17,10H7Z"></path>
-            </svg>
-          )
-        },
-      })
-
-      cy.mount(() => (
-        <VIcon>
-          <Foo>bar</Foo>
-        </VIcon>
-      ))
-
-      cy.get('.v-icon > svg.foo').should('exist')
-    })
-  })
-
-  it('should render svg icon', () => {
-    cy.mount(() => (
-      <VIcon icon="svg:M7,10L12,15L17,10H7Z" />
-    ))
-
-    cy.get('.v-icon svg').should('exist')
-    cy.get('.v-icon path').should('have.attr', 'd', 'M7,10L12,15L17,10H7Z')
-  })
-
-  it('should render class icon', () => {
-    cy.mount(() => (
-      <VIcon icon="class:foo" />
-    ))
-
-    cy.get('.v-icon').should('have.class', 'foo')
-  })
-})

From fabc511bfbf90149b536ba09c6ba5e18bafd4c3a Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 6 Jan 2025 15:53:33 +1100
Subject: [PATCH 036/127] feat(VVirtualScroll): add itemKey prop

closes #20809
---
 .../src/locale/en/VVirtualScroll.json         |  2 +-
 .../VAutocomplete/VAutocomplete.tsx           |  2 +-
 .../src/components/VCombobox/VCombobox.tsx    |  2 +-
 .../src/components/VSelect/VSelect.tsx        |  2 +-
 packages/vuetify/src/composables/virtual.ts   | 27 ++++++++++++-------
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VVirtualScroll.json b/packages/api-generator/src/locale/en/VVirtualScroll.json
index e3fc6099fe0..f2529013bbe 100644
--- a/packages/api-generator/src/locale/en/VVirtualScroll.json
+++ b/packages/api-generator/src/locale/en/VVirtualScroll.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "height": "Height of the component as a css value/",
-    "itemKey": "Required when using **dynamic-item-height** together with object items. Should point to a property with a unique value for each item.",
+    "itemKey": "Should point to a property with a unique value for each item, if not set then item index will be used as a key which may result in unnecessary re-renders.",
     "items": "The array of items to display.",
     "renderless": "Disables default component rendering functionality."
   },
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 7980fd6bede..a927163e371 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -496,7 +496,7 @@ export const VAutocomplete = genericComponent<new <
                         <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
-                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
+                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value } itemKey="value">
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index e1921b8e3c7..3714f10fdd0 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -540,7 +540,7 @@ export const VCombobox = genericComponent<new <
                         <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
-                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
+                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value } itemKey="value">
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index ad18b3bbf1f..36e59082df5 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -417,7 +417,7 @@ export const VSelect = genericComponent<new <
                         <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
 
-                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value }>
+                      <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value } itemKey="value">
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
index 4b1d12dc0f1..4cc3344bce4 100644
--- a/packages/vuetify/src/composables/virtual.ts
+++ b/packages/vuetify/src/composables/virtual.ts
@@ -4,10 +4,11 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 
 // Utilities
 import { computed, nextTick, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue'
-import { clamp, debounce, IN_BROWSER, isObject, propsFactory } from '@/util'
+import { clamp, debounce, getPropertyFromItem, IN_BROWSER, propsFactory } from '@/util'
 
 // Types
-import type { Ref } from 'vue'
+import type { PropType, Ref } from 'vue'
+import type { SelectItemKey } from '@/util'
 
 const UP = -1
 const DOWN = 1
@@ -16,8 +17,9 @@ const DOWN = 1
 const BUFFER_PX = 100
 
 type VirtualProps = {
-  itemHeight?: number | string
-  height?: number | string
+  itemHeight: number | string | null | undefined
+  itemKey: SelectItemKey
+  height: number | string | undefined
 }
 
 export const makeVirtualProps = propsFactory({
@@ -25,6 +27,10 @@ export const makeVirtualProps = propsFactory({
     type: [Number, String],
     default: null,
   },
+  itemKey: {
+    type: [String, Array, Function] as PropType<SelectItemKey>,
+    default: null,
+  },
   height: [Number, String],
 }, 'virtual')
 
@@ -235,11 +241,14 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
   }
 
   const computedItems = computed(() => {
-    return items.value.slice(first.value, last.value).map((item, index) => ({
-      raw: item,
-      index: index + first.value,
-      key: (isObject(item) && 'value' in item) ? item.value : index + first.value,
-    }))
+    return items.value.slice(first.value, last.value).map((item, index) => {
+      const _index = index + first.value
+      return {
+        raw: item,
+        index: _index,
+        key: getPropertyFromItem(item, props.itemKey, _index),
+      }
+    })
   })
 
   watch(items, () => {

From 794a2e6999c20b69c041f94ea44d64d5e916ad68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20M=C3=BCller?= <janmueller3698@gmail.com>
Date: Mon, 6 Jan 2025 05:55:23 +0100
Subject: [PATCH 037/127] feat(theme): add stylesheetId and scope options
 (#20789)

closes #4065
---
 packages/docs/src/pages/en/features/theme.md  |  8 +++-
 .../src/composables/__tests__/theme.spec.ts   | 27 +++++++++++++
 packages/vuetify/src/composables/theme.ts     | 38 +++++++++++++------
 3 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/docs/src/pages/en/features/theme.md b/packages/docs/src/pages/en/features/theme.md
index fd24610f66f..ec49f1f2eb9 100644
--- a/packages/docs/src/pages/en/features/theme.md
+++ b/packages/docs/src/pages/en/features/theme.md
@@ -350,4 +350,10 @@ export const vuetify = createVuetify({
 
 ## Implementation
 
-Vuetify generates theme styles at runtime according to the given configuration. The generated styles are injected into the `<head>` section of the DOM in a `<style>` tag with an **id** of `vuetify-theme-stylesheet`.
+Vuetify generates theme styles at runtime according to the given configuration. The generated styles are injected into the `<head>` section of the DOM in a `<style>` tag with a default **id** of `vuetify-theme-stylesheet`.
+
+### Microfrontends
+
+An application using microfrontends with multiple instances of Vuetify may need to define unique **theme.stylesheetId** values for each microfrontend in order to prevent conflicts between their generated stylesheets.
+Further, such a scenario might require styles to be scoped to a specific microfrontend, which can be achieved by setting the **theme.scope** property.
+For example, a microfrontend mounted in an element `#my-app` can define a **theme.scope** of `#my-app` to scope its styles to that element and its children instead of `:root` and global classes.
diff --git a/packages/vuetify/src/composables/__tests__/theme.spec.ts b/packages/vuetify/src/composables/__tests__/theme.spec.ts
index e959e1c6369..8042cd80e6c 100644
--- a/packages/vuetify/src/composables/__tests__/theme.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/theme.spec.ts
@@ -148,6 +148,33 @@ describe('createTheme', () => {
     expect(theme.computedThemes.value.light.colors).toHaveProperty('color2-lighten-1')
   })
 
+  it('should allow for customization of the stylesheet id', () => {
+    const customStylesheetId = 'custom-vuetify-stylesheet-id'
+    const theme = createTheme({
+      stylesheetId: customStylesheetId,
+    })
+
+    theme.install(app)
+
+    expect(document.getElementById(customStylesheetId)).toBeDefined()
+  })
+
+  it('should allow for themes to be scoped', () => {
+    const scope = '#my-app'
+    const theme = createTheme({
+      scope,
+    })
+
+    theme.install(app)
+
+    const scopedStyles = document.getElementById('vuetify-theme-stylesheet')!.innerHTML
+    const selectors = scopedStyles.split('\n').filter(line => line.includes('{')).map(line => line.trim())
+    selectors.forEach(selector => {
+      expect(selector.startsWith(`:where(${scope})`)).toBe(true)
+      expect(selector).not.toContain(':root')
+    })
+  })
+
   // it('should use vue-meta@2.3 functionality', () => {
   //   const theme = createTheme()
   //   const set = jest.fn()
diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts
index a261035cd33..2319ecdc4e8 100644
--- a/packages/vuetify/src/composables/theme.ts
+++ b/packages/vuetify/src/composables/theme.ts
@@ -33,6 +33,8 @@ export type ThemeOptions = false | {
   defaultTheme?: string
   variations?: false | VariationsOptions
   themes?: Record<string, ThemeDefinition>
+  stylesheetId?: string
+  scope?: string
 }
 export type ThemeDefinition = DeepPartial<InternalThemeDefinition>
 
@@ -42,6 +44,8 @@ interface InternalThemeOptions {
   defaultTheme: string
   variations: false | VariationsOptions
   themes: Record<string, InternalThemeDefinition>
+  stylesheetId: string
+  scope?: string
 }
 
 interface VariationsOptions {
@@ -185,6 +189,7 @@ function genDefaults () {
         },
       },
     },
+    stylesheetId: 'vuetify-theme-stylesheet',
   }
 }
 
@@ -252,6 +257,25 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
   })
   const current = computed(() => computedThemes.value[name.value])
 
+  function createCssClass (lines: string[], selector: string, content: string[]) {
+    lines.push(
+      `${getScopedSelector(selector)} {\n`,
+      ...content.map(line => `  ${line};\n`),
+      '}\n',
+    )
+  }
+
+  function getScopedSelector (selector: string) {
+    if (!parsedOptions.scope) {
+      return selector
+    }
+    const scopeSelector = `:where(${parsedOptions.scope})`
+    if (selector === ':root') {
+      return scopeSelector
+    }
+    return `${scopeSelector} ${selector}`
+  }
+
   const styles = computed(() => {
     const lines: string[] = []
 
@@ -295,7 +319,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
     return {
       style: [{
         children: styles.value,
-        id: 'vuetify-theme-stylesheet',
+        id: parsedOptions.stylesheetId,
         nonce: parsedOptions.cspNonce || false as never,
       }],
     }
@@ -321,7 +345,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
       }
     } else {
       let styleEl = IN_BROWSER
-        ? document.getElementById('vuetify-theme-stylesheet')
+        ? document.getElementById(parsedOptions.stylesheetId)
         : null
 
       if (IN_BROWSER) {
@@ -334,7 +358,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
         if (typeof document !== 'undefined' && !styleEl) {
           const el = document.createElement('style')
           el.type = 'text/css'
-          el.id = 'vuetify-theme-stylesheet'
+          el.id = parsedOptions.stylesheetId
           if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce)
 
           styleEl = el
@@ -400,14 +424,6 @@ export function useTheme () {
   return theme
 }
 
-function createCssClass (lines: string[], selector: string, content: string[]) {
-  lines.push(
-    `${selector} {\n`,
-    ...content.map(line => `  ${line};\n`),
-    '}\n',
-  )
-}
-
 function genCssVariables (theme: InternalThemeDefinition) {
   const lightOverlay = theme.dark ? 2 : 1
   const darkOverlay = theme.dark ? 1 : 2

From 7463ccfc793a9d96bfad7925d9c3c65718c41e06 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 14 Jan 2025 10:29:30 -0600
Subject: [PATCH 038/127] chore(README): update sponsors

---
 README.md | 62 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 6197af29abf..232962ba6cd 100644
--- a/README.md
+++ b/README.md
@@ -61,8 +61,8 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
   <tbody>
     <tr>
       <td>
-        <a href="https://www.teamwork.com/" target="_blank">
-          <img height="35px" src="https://cdn.cosmicjs.com/ca146a20-bc5d-11ee-9be1-85f53db06a1d-teamwork-logo-2023.svg">
+        <a href="https://www.deepcloud.swiss/" target="_blank">
+          <img height="65px" src="https://cdn.cosmicjs.com/20504e40-6cbc-11ef-b5ae-a594bb4a8e67-deepcloud-light.svg">
         </a>
       </td>
     </tr>
@@ -75,8 +75,18 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
   <tbody>
     <tr>
       <td>
-        <a href="https://github.com/sponsors/johnleider" target="_blank">
-          Your Logo Here
+        <a href="https://route4me.com/">
+          <img height="40px" src="https://cdn.cosmicjs.com/3b7a95b0-5360-11ef-b1ea-f56c65dfade9-route-4-me-light.png">
+        </a>
+      </td>
+      <td>
+        <a href="https://www.abacus.ch/">
+          <img height="40px" src="https://cdn.cosmicjs.com/0b978be0-6cbb-11ef-b5ae-a594bb4a8e67-abacus-light.svg">
+        </a>
+      </td>
+      <td>
+        <a href="https://www.hoop.swiss/">
+          <img height="40px" src="https://cdn.cosmicjs.com/94012850-6cbc-11ef-b5ae-a594bb4a8e67-hoop-light.svg">
         </a>
       </td>
     </tr>
@@ -89,59 +99,63 @@ Funds donated through GitHub Sponsors and Patreon go directly to support John an
   <tbody>
     <tr>
       <td>
-        <a href="https://careers.lmax.com/?utm_source=vuetify&utm_medium=github-link&utm_campaign=lmax-careers">
-          <img height="30px" src="https://cdn.vuetifyjs.com/images/backers/lmax-exchange.png">
+        <a href="http://crossword-solver.io/">
+          <img height="35px" src="https://cdn.cosmicjs.com/098aa4e0-9749-11eb-bf6a-1ffd0f06b0f7-crossword-solver-logo-light.svg">
         </a>
       </td>
-      <td>
-        <a href="http://intygrate.com/?ref=vuetify-github">
-          <img height="30px" src="https://cdn.vuetifyjs.com/images/backers/intygrate.png">
+      <td style="text-align: center;">
+        <a href="https://www.muenchen.de/">
+          <img height="30px" src="https://imgix.cosmicjs.com/af2ce530-eaa2-11ed-ba82-019c4666da06-itm-logo.png">
         </a>
       </td>
       <td>
-        <a href="http://vuemastery.com/?ref=vuetify-github">
-          <img height="30px" src="https://cdn.vuetifyjs.com/images/backers/vuemastery.svg">
+        <a href="https://careers.lmax.com/?utm_source=vuetify&utm_medium=github-link&utm_campaign=lmax-careers">
+          <img height="30px" src="https://cdn.vuetifyjs.com/images/backers/lmax-exchange.png">
         </a>
       </td>
       <td>
-        <a href="http://crossword-solver.io/">
-          <img height="35px" src="https://cdn.cosmicjs.com/098aa4e0-9749-11eb-bf6a-1ffd0f06b0f7-crossword-solver-logo-light.svg">
+        <a href="http://vuemastery.com/?ref=vuetify-github">
+          <img height="30px" src="https://cdn.vuetifyjs.com/images/backers/vuemastery.svg">
         </a>
       </td>
     </tr>
     <tr></tr>
     <tr>
       <td>
-        <a href="https://www.slim.ai/">
-          <img height="30px" src="https://cdn.cosmicjs.com/e7d53ff0-4ca5-11ec-9940-53a088b36636-slim-ai.svg">
+        <a href="https://views4you.com/buy-instagram-followers/">
+          <img height="30px" src="https://cdn.cosmicjs.com/861b0ce0-50e4-11ef-b1ea-f56c65dfade9-views-4-you-light.png">
         </a>
       </td>
       <td>
-        <a href="https://crosswordanswers911.net/">
-          <img height="30px" src="https://cdn.cosmicjs.com/ef6ea2a0-7ee1-11ed-8730-d9eebcd39d9f-crossword-answers-911.jpg">
+        <a href="https://uk.nongamstopcasinos.net/">
+          <img height="30px" src="https://cdn.cosmicjs.com/dddf2570-6925-11ef-a492-5bdc7520fe60-logo_dark-bg.png.webp">
         </a>
       </td>
       <td style="text-align: center;">
-        <a href="https://www.muenchen.de/">
-          <img height="40px" src="https://imgix.cosmicjs.com/af2ce530-eaa2-11ed-ba82-019c4666da06-itm-logo.png">
+        <a href="https://poprey.com/buy-instagram-followers">
+          <img height="30px" src="https://cdn.cosmicjs.com/69ea08d0-7b20-11ef-915f-61acd7484848-256-1.png">
         </a>
       </td>
       <td>
-        <a href="https://justanotherpanel.com/">
-          <img height="30px" src="https://cdn.cosmicjs.com/8d038320-6382-11ee-b975-cb0cfadd93ad-jap.png">
+        <a href="https://www.mediamister.com/">
+          <img height="30px" src="https://cdn.cosmicjs.com/750cbe80-8d34-11ef-b5a0-93db72e2be98-logo-1.svg">
         </a>
       </td>
     </tr>
     <tr></tr>
     <tr>
+      <td style="text-align: center;">
+        <a href="https://www.slotozilla.com/">
+          <img height="30px" src="https://cdn.cosmicjs.com/21525470-ab03-11ef-bee4-3bb1d3c55332-256-2.png">
+        </a>
+      </td>
       <td>
-        <a href="https://stormlikes.net/">
-          <img height="40px" src="https://cdn.cosmicjs.com/64e6f630-a980-11ee-b417-db331415685f-stormlikes.png">
+        <a href="https://word.tips/">
+          <img height="30px" src="https://cdn.cosmicjs.com/5b16bd20-afab-11ef-bee4-3bb1d3c55332-wordtips-light.svg">
         </a>
       </td>
       <td></td>
       <td></td>
-      <td></td>
     </tr>
   </tbody>
 </table>

From 933bf24e05810d569af7c4397f0543692eac02c2 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 16:42:46 +1100
Subject: [PATCH 039/127] fix(filter): avoid unnecessary deep proxy

fixes #20849
---
 packages/vuetify/src/composables/filter.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index 43d83e90237..d4abbedbea0 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -2,7 +2,7 @@
 /* eslint-disable no-labels */
 
 // Utilities
-import { computed, ref, unref, watchEffect } from 'vue'
+import { computed, shallowRef, unref, watchEffect } from 'vue'
 import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'
 
 // Types
@@ -139,8 +139,8 @@ export function useFilter <T extends InternalItem> (
     customKeyFilter?: MaybeRef<FilterKeyFunctions | undefined>
   }
 ) {
-  const filteredItems: Ref<T[]> = ref([])
-  const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = ref(new Map())
+  const filteredItems: Ref<T[]> = shallowRef([])
+  const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = shallowRef(new Map())
   const transformedItems = computed(() => (
     options?.transform
       ? unref(items).map(item => ([item, options.transform!(item)] as const))

From d6090248e1d0fa34748fce1dcc93991aeea19b8f Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 16:51:14 +1100
Subject: [PATCH 040/127] fix(VCombobox): don't return focus to input on space
 keydown

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

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 7980fd6bede..d869a9a28fb 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -219,7 +219,7 @@ export const VAutocomplete = genericComponent<new <
       menu.value = !menu.value
     }
     function onListKeydown (e: KeyboardEvent) {
-      if (checkPrintable(e)) {
+      if (e.key !== ' ' && checkPrintable(e)) {
         vTextFieldRef.value?.focus()
       }
     }
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index e1921b8e3c7..55ec71a6a50 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -270,7 +270,7 @@ export const VCombobox = genericComponent<new <
       menu.value = !menu.value
     }
     function onListKeydown (e: KeyboardEvent) {
-      if (checkPrintable(e)) {
+      if (e.key !== ' ' && checkPrintable(e)) {
         vTextFieldRef.value?.focus()
       }
     }

From 15c6485b12cb513d293ff8691ed2b3daa7cb3f24 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 16:57:05 +1100
Subject: [PATCH 041/127] fix(VTextarea): correct area scaling when grown
 vertically in flex

fixes #20861
---
 packages/vuetify/src/components/VInput/VInput.sass       | 2 +-
 packages/vuetify/src/components/VTextarea/VTextarea.sass | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass
index 11ded05238b..449581bd1e8 100644
--- a/packages/vuetify/src/components/VInput/VInput.sass
+++ b/packages/vuetify/src/components/VInput/VInput.sass
@@ -33,7 +33,7 @@
   .v-input--horizontal
     grid-template-areas: "prepend control append" "a messages b"
     grid-template-columns: max-content minmax(0, 1fr) max-content
-    grid-template-rows: auto auto
+    grid-template-rows: 1fr auto
 
     .v-input__prepend
       margin-inline-end: $input-affix-margin-inside
diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.sass b/packages/vuetify/src/components/VTextarea/VTextarea.sass
index 4f86f5742c9..b9bce78586b 100644
--- a/packages/vuetify/src/components/VTextarea/VTextarea.sass
+++ b/packages/vuetify/src/components/VTextarea/VTextarea.sass
@@ -43,6 +43,7 @@
       opacity: 0
       flex: 1
       min-width: 0
+      height: 100%
       transition: .15s opacity settings.$standard-easing
 
       &:focus,

From 33a3f29402e3facdffea52060b16c612a123650c Mon Sep 17 00:00:00 2001
From: babu-ch <42715882+babu-ch@users.noreply.github.com>
Date: Wed, 15 Jan 2025 15:09:20 +0900
Subject: [PATCH 042/127] docs: fix typo "to to" (#20817)

---
 packages/api-generator/src/locale/en/Select.json | 4 ++--
 packages/docs/src/pages/en/components/banners.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/api-generator/src/locale/en/Select.json b/packages/api-generator/src/locale/en/Select.json
index e2af9a03120..d625eecaa29 100644
--- a/packages/api-generator/src/locale/en/Select.json
+++ b/packages/api-generator/src/locale/en/Select.json
@@ -1,6 +1,6 @@
 {
   "props": {
-    "closeText": "Text set to to the inputs `aria-label` and `title` when input menu is closed.",
+    "closeText": "Text set to the inputs `aria-label` and `title` when input menu is closed.",
     "chips": "Changes display of selections to chips.",
     "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.",
     "hideSelected": "Do not display in the select menu items that are already selected.",
@@ -9,6 +9,6 @@
     "menuProps": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended.",
     "multiple": "Changes select to multiple. Accepts array for value.",
     "openOnClear": "Open's the menu whenever the clear icon is clicked.",
-    "openText": "Text set to to the inputs **aria-label** and **title** when input menu is open."
+    "openText": "Text set to the inputs **aria-label** and **title** when input menu is open."
   }
 }
diff --git a/packages/docs/src/pages/en/components/banners.md b/packages/docs/src/pages/en/components/banners.md
index 083307c7822..778773b25e3 100644
--- a/packages/docs/src/pages/en/components/banners.md
+++ b/packages/docs/src/pages/en/components/banners.md
@@ -85,12 +85,12 @@ Banners may have one or two text buttons that don't stand out that much.
 
 #### Icon
 
-The icon slot allows you to to explicitly control the content and functionality within it.
+The icon slot allows you to explicitly control the content and functionality within it.
 
 <ExamplesExample file="v-banner/slot-icon" />
 
 #### Prepend
 
-The prepend slot allows you to to explicitly control the content and functionality within it. Icons also help to emphasize a banner's message.
+The prepend slot allows you to explicitly control the content and functionality within it. Icons also help to emphasize a banner's message.
 
 <ExamplesExample file="v-banner/slot-prepend" />

From 327a2c92404b1cb7faba68c3655550ca6f574d25 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 17:17:09 +1100
Subject: [PATCH 043/127] feat: allow tag prop to accept Component

closes #20806
---
 packages/vuetify/src/composables/icons.tsx    | 11 ++++-------
 packages/vuetify/src/composables/index.ts     |  3 ++-
 packages/vuetify/src/composables/tag.ts       |  8 ++++++--
 packages/vuetify/src/util/defineComponent.tsx |  4 ++++
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/vuetify/src/composables/icons.tsx b/packages/vuetify/src/composables/icons.tsx
index 9ede37abae9..ab5c79e1803 100644
--- a/packages/vuetify/src/composables/icons.tsx
+++ b/packages/vuetify/src/composables/icons.tsx
@@ -6,11 +6,8 @@ import { computed, inject, unref } from 'vue'
 import { consoleWarn, defineComponent, genericComponent, mergeDeep, propsFactory } from '@/util'
 
 // Types
-import type { ComponentPublicInstance, FunctionalComponent, InjectionKey, PropType, Ref } from 'vue'
-
-export type JSXComponent<Props = any> =
-  | { new (): ComponentPublicInstance<Props> }
-  | FunctionalComponent<Props>
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { JSXComponent } from '@/util'
 
 export type IconValue =
   | string
@@ -58,7 +55,7 @@ export interface IconAliases {
 }
 
 export interface IconProps {
-  tag: string
+  tag: string | JSXComponent
   icon?: IconValue
   disabled?: Boolean
 }
@@ -90,7 +87,7 @@ export const makeIconProps = propsFactory({
   },
   // Could not remove this and use makeTagProps, types complained because it is not required
   tag: {
-    type: String,
+    type: [String, Object, Function] as PropType<string | JSXComponent>,
     required: true,
   },
 }, 'icon')
diff --git a/packages/vuetify/src/composables/index.ts b/packages/vuetify/src/composables/index.ts
index 8ad3cfab6e9..7bae495e268 100644
--- a/packages/vuetify/src/composables/index.ts
+++ b/packages/vuetify/src/composables/index.ts
@@ -16,6 +16,7 @@ export type { DefaultsInstance } from './defaults'
 export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
 export type { SubmitEventPromise } from './form'
 export type { GoToInstance } from './goto'
-export type { IconAliases, IconProps, IconSet, IconOptions, JSXComponent } from './icons'
+export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'
 export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'
 export type { ThemeDefinition, ThemeInstance } from './theme'
+export type { JSXComponent } from '@/util'
diff --git a/packages/vuetify/src/composables/tag.ts b/packages/vuetify/src/composables/tag.ts
index a0a63df761b..b696a0e080e 100644
--- a/packages/vuetify/src/composables/tag.ts
+++ b/packages/vuetify/src/composables/tag.ts
@@ -1,15 +1,19 @@
 // Utilities
 import { propsFactory } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+import type { JSXComponent } from '@/util'
+
 // Types
 export interface TagProps {
-  tag: string
+  tag: string | JSXComponent
 }
 
 // Composables
 export const makeTagProps = propsFactory({
   tag: {
-    type: String,
+    type: [String, Object, Function] as PropType<string | JSXComponent>,
     default: 'div',
   },
 }, 'tag')
diff --git a/packages/vuetify/src/util/defineComponent.tsx b/packages/vuetify/src/util/defineComponent.tsx
index fee604b39f4..507182dce06 100644
--- a/packages/vuetify/src/util/defineComponent.tsx
+++ b/packages/vuetify/src/util/defineComponent.tsx
@@ -327,3 +327,7 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance<a
 type ShortEmitsToObject<E> = E extends Record<string, any[]> ? {
   [K in keyof E]: (...args: E[K]) => any;
 } : E;
+
+export type JSXComponent<Props = any> =
+  | { new (): ComponentPublicInstance<Props> }
+  | FunctionalComponent<Props>

From 0e7b814ca3dcb7e090db38faf76927d70a590588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C9=99nan=20R=C9=99c=C9=99bli?= <kenan.recebli@gmail.com>
Date: Wed, 15 Jan 2025 10:27:52 +0400
Subject: [PATCH 044/127] fix(locale): add missing Azerbaijani translations
 (#20848)

---
 packages/vuetify/src/locale/az.ts | 56 +++++++++++++++----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/vuetify/src/locale/az.ts b/packages/vuetify/src/locale/az.ts
index 40477c14b8e..3349317351f 100644
--- a/packages/vuetify/src/locale/az.ts
+++ b/packages/vuetify/src/locale/az.ts
@@ -1,11 +1,11 @@
 export default {
-  badge: 'nişan',
+  badge: 'Nişan',
   open: 'Open',
   close: 'Bağla',
-  dismiss: 'Dismiss',
+  dismiss: 'Rədd et',
   confirmEdit: {
     ok: 'OK',
-    cancel: 'Cancel',
+    cancel: 'İmtina',
   },
   dataIterator: {
     noResultsText: 'Uyğun məlumat tapılmadı',
@@ -36,18 +36,18 @@ export default {
     divider: 'to',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} seçilib',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Tarixləri seçin',
+      header: 'Tarixləri daxil edin',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Tarixi seçin',
+    header: 'Tarixi daxil edin',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Tarixi daxil edin',
     },
   },
-  noDataText: 'Bu görüntüdə məlumat yoxdur.',
+  noDataText: 'Heç bir məlumat yoxdur.',
   carousel: {
     prev: 'Əvvəlki görüntü',
     next: 'Növbəti görüntü',
@@ -57,51 +57,51 @@ export default {
   },
   calendar: {
     moreEvents: '{0} ədad daha',
-    today: 'Today',
+    today: 'Bu gün',
   },
   input: {
-    clear: 'Clear {0}',
-    prependAction: '{0} prepended action',
-    appendAction: '{0} appended action',
-    otp: 'Please enter OTP character {0}',
+    clear: 'Təmizlə {0}',
+    prependAction: '{0} qabaqcıl əməliyyat',
+    appendAction: '{0} sonrakı əməliyyat',
+    otp: 'OTP daxil et {0}',
   },
   fileInput: {
     counter: '{0} fayl',
     counterSize: '{0} fayl (cəmi {1})',
   },
   fileUpload: {
-    title: 'Drag and drop files here',
-    divider: 'or',
-    browse: 'Browse Files',
+    title: 'Faylları buraya sürüşdürün',
+    divider: 'və ya',
+    browse: 'Faylları baxın',
   },
   timePicker: {
     am: 'AM',
     pm: 'PM',
-    title: 'Select Time',
+    title: 'Vaxtı seçin',
   },
   pagination: {
     ariaLabel: {
       root: 'Səhifələmə Naviqasiyası',
       next: 'Növbəti səhifə',
-      previous: 'Əvəvlki səhifə',
+      previous: 'Əvvəlki səhifə',
       page: 'Səhifəyə get {0}',
       currentPage: 'Cari səhifə, Səhifə {0}',
-      first: 'First page',
-      last: 'Last page',
+      first: 'İlk səhifə',
+      last: 'Son səhifə',
     },
   },
   stepper: {
-    next: 'Next',
-    prev: 'Previous',
+    next: 'Növbəti',
+    prev: 'Əvvəlki',
   },
   rating: {
     ariaLabel: {
-      item: 'Rating {0} of {1}',
+      item: 'Reytinq {0}/{1}',
     },
   },
-  loading: 'Loading...',
+  loading: 'Yüklənir...',
   infiniteScroll: {
-    loadMore: 'Load more',
-    empty: 'No more',
+    loadMore: 'Daha çox yüklə',
+    empty: 'Daha yoxdur',
   },
 }

From bfc25dfdb5a551bc5c423f48d1d34213868a5925 Mon Sep 17 00:00:00 2001
From: Manoah Tervoort <46671786+mtdvlpr@users.noreply.github.com>
Date: Wed, 15 Jan 2025 07:28:29 +0100
Subject: [PATCH 045/127] fix(locale): add missing Dutch translations (#20839)

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

diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
index 266996e1918..becd4073dd7 100644
--- a/packages/vuetify/src/locale/nl.ts
+++ b/packages/vuetify/src/locale/nl.ts
@@ -2,7 +2,7 @@ export default {
   badge: 'Insigne',
   open: 'Openen',
   close: 'Sluiten',
-  dismiss: 'Dismiss',
+  dismiss: 'Sluiten',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Annuleren',
@@ -70,14 +70,14 @@ export default {
     counterSize: '{0} bestanden ({1} in totaal)',
   },
   fileUpload: {
-    title: 'Drag and drop files here',
-    divider: 'or',
-    browse: 'Browse Files',
+    title: 'Sleep en zet bestanden hier neer',
+    divider: 'of',
+    browse: 'Blader door bestanden',
   },
   timePicker: {
     am: 'AM',
     pm: 'PM',
-    title: 'Select Time',
+    title: 'Selecteer tijd',
   },
   pagination: {
     ariaLabel: {

From f9ac620bd02cad58ae29b0534420c723cfc018a8 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:34:30 +0700
Subject: [PATCH 046/127] fix(VProgressLinear): set aria-valuenow to current
 value (#20845)

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

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
index 62a43b9a7ce..a00f892dd03 100644
--- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
+++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
@@ -141,7 +141,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
         aria-hidden={ props.active ? 'false' : 'true' }
         aria-valuemin="0"
         aria-valuemax={ props.max }
-        aria-valuenow={ props.indeterminate ? undefined : normalizedValue.value }
+        aria-valuenow={ props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value) }
         onClick={ props.clickable && handleClick }
       >
         { props.stream && (

From 210488aa70aad90f8b325de952485ce48ef759e4 Mon Sep 17 00:00:00 2001
From: babu-ch <42715882+babu-ch@users.noreply.github.com>
Date: Wed, 15 Jan 2025 15:40:24 +0900
Subject: [PATCH 047/127] fix(VField): prevent rendering clear button when
 disabled (#20821)

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

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 6ad56c5efdb..b12b064782e 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -223,7 +223,7 @@ export const VField = genericComponent<new <T>(
     useRender(() => {
       const isOutlined = props.variant === 'outlined'
       const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon)
-      const hasClear = !!(props.clearable || slots.clear)
+      const hasClear = !!(props.clearable || slots.clear) && !props.disabled
       const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear)
       const label = () => (
         slots.label

From e66317dbcc9bd1746a3ab1106301ba30ee94e33a Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 21:00:28 +1100
Subject: [PATCH 048/127] fix(VStepper): add type=button to headers

fixes #20866
---
 packages/vuetify/src/components/VStepper/VStepperItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 0ffa8529790..686993a1885 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -142,6 +142,7 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
             group?.selectedClass.value,
           ]}
           disabled={ !props.editable }
+          type="button"
           v-ripple={[
             props.ripple && props.editable,
             null,

From bf13eccde630b14820f4e24b09f3b34f90bb255e Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 21:02:11 +1100
Subject: [PATCH 049/127] fix(types): optimise build (#20484)

Fixes #20480
---
 packages/api-generator/src/index.ts           |   2 +-
 .../api-generator/templates/composables.d.ts  |   2 +-
 packages/api-generator/tsconfig.json          |   1 +
 .../examples/v-date-picker/guide-locale.vue   |   2 +-
 .../vuetify/{.eslintrc.js => .eslintrc.cjs}   |   0
 packages/vuetify/babel.config.js              |   8 +-
 .../babel-plugin-replace-import-extension.js  |   2 +-
 packages/vuetify/build/remove-dts-styles.cts  |  19 ++
 .../{rollup.config.mjs => rollup.config.js}   |   4 +-
 packages/vuetify/build/rollup.types.config.js |  93 ++++++++++
 .../vuetify/build/rollup.types.config.mjs     | 117 ------------
 packages/vuetify/build/run-tests.js           |   3 +-
 packages/vuetify/build/transform-types.js     |  14 ++
 packages/vuetify/package.json                 |  56 +++---
 packages/vuetify/postcss.config.js            |   9 -
 packages/vuetify/tsconfig.dev.json            |   9 +-
 packages/vuetify/tsconfig.dist.json           |  10 +-
 packages/vuetify/tsconfig.json                |   3 +-
 .../{vite.config.mts => vite.config.ts}       |   0
 .../{vitest.config.mts => vitest.config.ts}   |   2 +-
 ...test.workspace.mts => vitest.workspace.ts} |   6 +-
 pnpm-lock.yaml                                | 175 ++++++++++++++++--
 tsconfig.json                                 |   2 +-
 23 files changed, 345 insertions(+), 194 deletions(-)
 rename packages/vuetify/{.eslintrc.js => .eslintrc.cjs} (100%)
 create mode 100644 packages/vuetify/build/remove-dts-styles.cts
 rename packages/vuetify/build/{rollup.config.mjs => rollup.config.js} (99%)
 create mode 100644 packages/vuetify/build/rollup.types.config.js
 delete mode 100644 packages/vuetify/build/rollup.types.config.mjs
 create mode 100644 packages/vuetify/build/transform-types.js
 delete mode 100644 packages/vuetify/postcss.config.js
 rename packages/vuetify/{vite.config.mts => vite.config.ts} (100%)
 rename packages/vuetify/{vitest.config.mts => vitest.config.ts} (97%)
 rename packages/vuetify/{vitest.workspace.mts => vitest.workspace.ts} (90%)

diff --git a/packages/api-generator/src/index.ts b/packages/api-generator/src/index.ts
index f9f02295a49..97e25e5ab44 100644
--- a/packages/api-generator/src/index.ts
+++ b/packages/api-generator/src/index.ts
@@ -61,7 +61,7 @@ const run = async () => {
     // await fs.writeFile(`./templates/tmp/${component}.d.ts`, template.replaceAll('__component__', component))
     await fs.writeFile(`./templates/tmp/${component}.d.ts`,
       template.replaceAll('__component__', component)
-        .replaceAll('__name__', componentsInfo[component].from.replace('.mjs', '.js'))
+        .replaceAll('__name__', componentsInfo[component].from)
     )
   }
 
diff --git a/packages/api-generator/templates/composables.d.ts b/packages/api-generator/templates/composables.d.ts
index dbc903352ae..008b98e7e1c 100644
--- a/packages/api-generator/templates/composables.d.ts
+++ b/packages/api-generator/templates/composables.d.ts
@@ -1,4 +1,4 @@
-import type vuetify from '../../vuetify/lib/index.d.mts'
+import type vuetify from '../../vuetify/lib/framework.d.ts'
 
 type IsComposable<T extends string | number | symbol> = T extends `use${Capitalize<infer _>}` ? T : never;
 
diff --git a/packages/api-generator/tsconfig.json b/packages/api-generator/tsconfig.json
index 3eaeb8309c3..919b58e3ba4 100644
--- a/packages/api-generator/tsconfig.json
+++ b/packages/api-generator/tsconfig.json
@@ -5,6 +5,7 @@
     "noUnusedLocals": false,
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "noEmit": true,
     "noEmitOnError": false,
     "resolveJsonModule": true,
     "paths": {
diff --git a/packages/docs/src/examples/v-date-picker/guide-locale.vue b/packages/docs/src/examples/v-date-picker/guide-locale.vue
index 9074cee2487..31baac744ce 100644
--- a/packages/docs/src/examples/v-date-picker/guide-locale.vue
+++ b/packages/docs/src/examples/v-date-picker/guide-locale.vue
@@ -9,7 +9,7 @@
 <playground-resources lang="json">
 {
   "imports": {
-    "vuetify/locale": "https://cdn.jsdelivr.net/npm/vuetify/lib/locale/index.mjs/+esm",
+    "vuetify/locale": "https://cdn.jsdelivr.net/npm/vuetify/lib/locale/index.js/+esm",
     "@date-io/date-fns": "https://cdn.jsdelivr.net/npm/@date-io/date-fns@2.17.0/build/index.esm.js/+esm",
     "date-fns/locale/en-US": "https://cdn.jsdelivr.net/npm/date-fns@2.30.0/esm/locale/en-US/index.js/+esm",
     "date-fns/locale/sv": "https://cdn.jsdelivr.net/npm/date-fns@2.30.0/esm/locale/sv/index.js/+esm"
diff --git a/packages/vuetify/.eslintrc.js b/packages/vuetify/.eslintrc.cjs
similarity index 100%
rename from packages/vuetify/.eslintrc.js
rename to packages/vuetify/.eslintrc.cjs
diff --git a/packages/vuetify/babel.config.js b/packages/vuetify/babel.config.js
index b9216168329..63c9f28e2ef 100644
--- a/packages/vuetify/babel.config.js
+++ b/packages/vuetify/babel.config.js
@@ -1,6 +1,8 @@
-const vuetifyPackage = require('./package.json')
+import fs from 'node:fs/promises'
 
-module.exports = {
+const vuetifyPackage = JSON.parse(await fs.readFile('./package.json', 'utf8'))
+
+export default {
   assumptions: {
     noDocumentAll: true
   },
@@ -36,7 +38,7 @@ module.exports = {
     lib: {
       ignore: ['**/__tests__'],
       plugins: [
-        ['babel-plugin-add-import-extension', { extension: 'mjs' }],
+        ['babel-plugin-add-import-extension', { extension: 'js' }],
         ['./build/babel-plugin-replace-import-extension', { extMapping: {
           '.sass': '.css',
           '.scss': '.css',
diff --git a/packages/vuetify/build/babel-plugin-replace-import-extension.js b/packages/vuetify/build/babel-plugin-replace-import-extension.js
index a3b32103739..4f0d55a0b58 100644
--- a/packages/vuetify/build/babel-plugin-replace-import-extension.js
+++ b/packages/vuetify/build/babel-plugin-replace-import-extension.js
@@ -30,7 +30,7 @@ function getOption(state, key) {
 }
 
 
-module.exports = function ({types: t}) {
+export default function ({types: t}) {
   return {
     visitor: {
       ImportDeclaration(path, state) {
diff --git a/packages/vuetify/build/remove-dts-styles.cts b/packages/vuetify/build/remove-dts-styles.cts
new file mode 100644
index 00000000000..f2bfa37d071
--- /dev/null
+++ b/packages/vuetify/build/remove-dts-styles.cts
@@ -0,0 +1,19 @@
+import type ts from 'typescript'
+import type { TransformerExtras, PluginConfig } from 'ts-patch'
+
+module.exports = function (program: ts.Program, pluginConfig: PluginConfig, { ts: tsc }: TransformerExtras) {
+  return (ctx: ts.TransformationContext) => {
+    return (sourceFile: ts.SourceFile) => {
+      function visit(node: ts.Node) {
+        if (
+          tsc.isImportDeclaration(node) &&
+          tsc.isStringLiteral(node.moduleSpecifier) &&
+          /\.s[ac]ss$/.test(node.moduleSpecifier.text)
+        ) return
+
+        return tsc.visitEachChild(node, visit, ctx)
+      }
+      return tsc.visitNode(sourceFile, visit)
+    }
+  }
+}
diff --git a/packages/vuetify/build/rollup.config.mjs b/packages/vuetify/build/rollup.config.js
similarity index 99%
rename from packages/vuetify/build/rollup.config.mjs
rename to packages/vuetify/build/rollup.config.js
index a1708bfc1cf..f79d4aad46e 100644
--- a/packages/vuetify/build/rollup.config.mjs
+++ b/packages/vuetify/build/rollup.config.js
@@ -112,7 +112,7 @@ export default [
               (await this.resolve('src/components/index.ts')).id
             )
             await Promise.all(importedIds.map(async id => {
-              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.mjs')
+              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.js')
 
               if (await this.resolve(path.join(id, '../_variables.scss')) != null) {
                 variables.push(id)
@@ -247,7 +247,7 @@ export default [
               (await this.resolve('src/labs/components.ts')).id
             )
             await Promise.all(importedIds.map(async id => {
-              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.mjs')
+              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.js')
 
               if (await this.resolve(path.join(id, '../_variables.scss')) != null) {
                 variables.push(id)
diff --git a/packages/vuetify/build/rollup.types.config.js b/packages/vuetify/build/rollup.types.config.js
new file mode 100644
index 00000000000..90e3bb6c5c9
--- /dev/null
+++ b/packages/vuetify/build/rollup.types.config.js
@@ -0,0 +1,93 @@
+import fs from 'fs/promises'
+import { fileURLToPath } from 'url'
+
+import dts from 'rollup-plugin-dts'
+import fg from 'fast-glob'
+import mm from 'micromatch'
+import MagicString from 'magic-string'
+
+import importMap from '../dist/json/importMap.json' with { type: 'json' }
+import importMapLabs from '../dist/json/importMap-labs.json' with { type: 'json' }
+
+export function codeTransform (code) {
+  return code
+    // ignore missing vue-router
+    .replaceAll(/import([^;])*?from 'vue-router'/gm, '// @ts-ignore\n$&')
+    // tsc adds extra export statements to namespaces that break module augmentation
+    .replaceAll(/^\s*export \{\s*\};?$/gm, '')
+}
+
+function createTypesConfig (input, output, renderChunk, filter) {
+  input = 'lib/' + input
+  let files = fg.sync(input)
+
+  if (filter) files = filter(files)
+
+  return files.map(file => {
+    const outputFile = output.replace('*', mm.capture(input, file)[0])
+    return {
+      input: file,
+      output: [{ file: outputFile, format: 'es', sourcemap: false }],
+      plugins: [
+        dts(),
+        {
+          async renderChunk (code) {
+            code = new MagicString(code)
+
+            if (renderChunk) await renderChunk(code)
+
+            codeTransform(code)
+
+            const map = code.generateMap({
+              // source: 'source.js',
+              // file: 'converted.js.map',
+              includeContent: false,
+            })
+            return {
+              code: code.toString(),
+              map: null,
+            }
+          }
+        },
+      ],
+    }
+  })
+}
+
+async function getShims (useImport) {
+  let components
+  if (useImport) {
+    components = Object.keys(importMap.components).map(name => (
+        `    ${name}: typeof import('vuetify/components')['${name}']`
+      )).join('\n')
+      + '\n'
+      + Object.keys(importMapLabs.components).map(name => (
+        `    ${name}: typeof import('vuetify/labs/components')['${name}']`
+      )).join('\n')
+  } else {
+    // All the components are already in scope, let's just assume rollup hasn't renamed any
+    components = [...Object.keys(importMap.components), ...Object.keys(importMapLabs.components)]
+      .map(name => `    ${name}: ${name}`).join('\n')
+  }
+
+  return (await fs.readFile(fileURLToPath(new URL('../src/shims.d.ts', import.meta.url)), { encoding: 'utf8' }))
+    .replaceAll(/^\s*\/\/ @skip-build\s[\s\S]*?\s$/gm, '')
+    .replace(/^\s*\/\/ @generate-components$/gm, components)
+}
+
+export default [
+  createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts', async code => {
+    code.replaceAll(/type index_d\$1_V(\w+) = V(\w+);/gm, 'declare const index_d$$1_V$1: typeof V$2;')
+    code.append('\n\n')
+    code.append((await getShims()).replace(', VNodeChild } from \'vue\'', ' } from \'vue\''))
+  }),
+  createTypesConfig('labs/entry-bundler.d.ts', 'dist/vuetify-labs.d.ts', async code => {
+    code.replaceAll(/type allComponents_d_V(\w+) = V(\w+);/gm, 'declare const allComponents_d_V$1: typeof V$2;')
+    code.append('\n\n')
+    code.append((await getShims()).replace(', VNodeChild } from \'vue\'', ' } from \'vue\''))
+  }),
+  createTypesConfig('framework.d.ts', 'lib/framework.d.ts', async code => {
+    code.append('\n\n')
+    code.append(await getShims(true))
+  }),
+].flat()
diff --git a/packages/vuetify/build/rollup.types.config.mjs b/packages/vuetify/build/rollup.types.config.mjs
deleted file mode 100644
index 678d084ebf2..00000000000
--- a/packages/vuetify/build/rollup.types.config.mjs
+++ /dev/null
@@ -1,117 +0,0 @@
-import path from 'path'
-import fs from 'fs/promises'
-import { readFileSync } from 'fs'
-import { fileURLToPath } from 'url'
-
-import dts from 'rollup-plugin-dts'
-import alias from '@rollup/plugin-alias'
-// import sourcemaps from 'rollup-plugin-sourcemaps'
-import fg from 'fast-glob'
-import mm from 'micromatch'
-import MagicString from 'magic-string'
-
-import importMap from '../dist/json/importMap.json' with { type: 'json' }
-import importMapLabs from '../dist/json/importMap-labs.json' with { type: 'json' }
-
-const externalsPlugin = () => ({
-  resolveId (source, importer) {
-    if (importer && (source.endsWith('.sass') || source.endsWith('.scss'))) {
-      return {
-        id: source,
-        external: true,
-        moduleSideEffects: false,
-      }
-    }
-  }
-})
-
-function createTypesConfig (input, output, renderChunk, filter) {
-  input = 'types-temp/' + input
-  let files = fg.sync(input)
-
-  if (filter) files = filter(files)
-
-  return files.map(file => {
-    const outputFile = output.replace('*', mm.capture(input, file)[0])
-    return {
-      input: file,
-      output: [{ file: outputFile, format: 'es', sourcemap: false }],
-      plugins: [
-        dts(),
-        externalsPlugin(),
-        alias({
-          entries: [
-            { find: /^@\/(.*)/, replacement: fileURLToPath(new URL('../types-temp/$1', import.meta.url)) },
-          ]
-        }),
-        {
-          async renderChunk (code) {
-            code = new MagicString(code)
-
-            if (renderChunk) await renderChunk(code)
-
-            // vue-router is optional but we need to include some of its types
-            code.replaceAll(/import([^;])*?from 'vue-router'/gm, '// @ts-ignore\n$&')
-
-            // tsc adds extra export statements to namespaces
-            code.replaceAll(/^\s*export \{\s*\};?$/gm, '')
-
-            const map = code.generateMap({
-              // source: 'source.js',
-              // file: 'converted.js.map',
-              includeContent: false,
-            })
-            return {
-              code: code.toString(),
-              map: null,
-            }
-          }
-        },
-        // sourcemaps(),
-      ],
-    }
-  })
-}
-
-async function getShims () {
-  const components = Object.keys(importMap.components).map(name => (
-    `    ${name}: typeof import('vuetify/components')['${name}']`
-  )).join('\n')
-    + '\n'
-    + Object.keys(importMapLabs.components).map(name => (
-      `    ${name}: typeof import('vuetify/labs/components')['${name}']`
-    )).join('\n')
-
-  return (await fs.readFile(fileURLToPath(new URL('../src/shims.d.ts', import.meta.url)), { encoding: 'utf8' }))
-    .replaceAll(/^\s*\/\/ @skip-build\s[\s\S]*?\s$/gm, '')
-    .replace(/^\s*\/\/ @generate-components$/gm, components)
-}
-
-export default [
-  createTypesConfig('framework.d.ts', 'lib/index.d.mts', async code => {
-    code.append('\n\n')
-    code.append(await getShims())
-  }),
-  createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts', async code => {
-    code.replaceAll(/type index_d\$1_V(\w+) = V(\w+);/gm, 'declare const index_d$$1_V$1: typeof V$2;')
-    code.append('\n\n')
-    code.append((await getShims()).replace(', VNodeChild } from \'vue\'', ' } from \'vue\''))
-  }),
-  createTypesConfig('blueprints/*.d.ts', 'lib/blueprints/*.d.mts'),
-  createTypesConfig('components/index.d.ts', 'lib/components/index.d.mts'),
-  createTypesConfig('components/*/index.d.ts', 'lib/components/*/index.d.mts', undefined, files => {
-    const index = readFileSync(fileURLToPath(new URL('../src/components/index.ts', import.meta.url)), { encoding: 'utf8' })
-    const block = Array.from(index.matchAll(/^\/\/ export \* from '\.\/(.*)'$/gm), m => m[1])
-    return files.filter(file => !block.some(name => file.includes(`/${name}/`)))
-  }),
-  createTypesConfig('labs/entry-bundler.d.ts', 'dist/vuetify-labs.d.ts', code => {
-    code.replaceAll(/type allComponents_d_V(\w+) = V(\w+);/gm, 'declare const allComponents_d_V$1: typeof V$2;')
-  }),
-  createTypesConfig('labs/components.d.ts', 'lib/labs/components.d.mts'),
-  createTypesConfig('labs/*/index.d.ts', 'lib/labs/*/index.d.mts'),
-  createTypesConfig('directives/index.d.ts', 'lib/directives/index.d.mts'),
-  createTypesConfig('locale/index.d.ts', 'lib/locale/index.d.mts'),
-  createTypesConfig('locale/adapters/*.d.ts', 'lib/locale/adapters/*.d.mts'),
-  createTypesConfig('iconsets/*.d.ts', 'lib/iconsets/*.d.mts'),
-  createTypesConfig('util/colors.d.ts', 'lib/util/colors.d.mts'),
-].flat()
diff --git a/packages/vuetify/build/run-tests.js b/packages/vuetify/build/run-tests.js
index ad9d61b233b..5d1f8a8ad22 100644
--- a/packages/vuetify/build/run-tests.js
+++ b/packages/vuetify/build/run-tests.js
@@ -1,5 +1,4 @@
-'use strict'
-const spawn = require('child_process').spawn
+import { spawn } from 'child_process'
 
 const args = process.argv.slice(2)
 
diff --git a/packages/vuetify/build/transform-types.js b/packages/vuetify/build/transform-types.js
new file mode 100644
index 00000000000..7447d36bd54
--- /dev/null
+++ b/packages/vuetify/build/transform-types.js
@@ -0,0 +1,14 @@
+import fg from 'fast-glob'
+import fs from 'node:fs/promises'
+import { codeTransform } from './rollup.types.config.js'
+
+const files = fg.sync('lib/**/*.d.ts')
+
+for (const name of files) {
+  const code = await fs.readFile(name, 'utf-8')
+
+  const newCode = codeTransform(code)
+
+  if (newCode === code) continue
+  await fs.writeFile(name, newCode, 'utf-8')
+}
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index f3ada61977b..bd07eeaa8c8 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -29,11 +29,12 @@
     "type": "github",
     "url": "https://github.com/sponsors/johnleider"
   },
-  "main": "lib/framework.mjs",
-  "module": "lib/framework.mjs",
+  "type": "module",
+  "main": "lib/framework.js",
+  "module": "lib/framework.js",
   "jsdelivr": "dist/vuetify.js",
   "unpkg": "dist/vuetify.js",
-  "types": "lib/index.d.mts",
+  "types": "lib/index.d.ts",
   "sass": "lib/styles/main.sass",
   "styles": "lib/styles/main.css",
   "sideEffects": [
@@ -54,43 +55,37 @@
     ".": {
       "sass": "./lib/styles/main.sass",
       "style": "./lib/styles/main.css",
-      "types": "./lib/index.d.mts",
-      "default": "./lib/framework.mjs"
+      "types": "./lib/framework.d.ts",
+      "default": "./lib/framework.js"
     },
     "./styles": {
       "sass": "./lib/styles/main.sass",
       "default": "./lib/styles/main.css"
     },
     "./styles/*": "./lib/styles/*",
-    "./framework": "./lib/framework.mjs",
-    "./blueprints": "./lib/blueprints/index.mjs",
-    "./blueprints/*": "./lib/blueprints/*.mjs",
-    "./components": "./lib/components/index.mjs",
-    "./components/*": "./lib/components/*/index.mjs",
-    "./directives": "./lib/directives/index.mjs",
-    "./directives/*": "./lib/directives/*/index.mjs",
-    "./locale": "./lib/locale/index.mjs",
-    "./locale/adapters/*": "./lib/locale/adapters/*.mjs",
-    "./iconsets/*": "./lib/iconsets/*.mjs",
-    "./labs/components": "./lib/labs/components.mjs",
-    "./labs/*": "./lib/labs/*/index.mjs",
-    "./util/colors": "./lib/util/colors.mjs",
+    "./framework": "./lib/framework.js",
+    "./blueprints": "./lib/blueprints/index.js",
+    "./blueprints/*": "./lib/blueprints/*.js",
+    "./components": "./lib/components/index.js",
+    "./components/*": "./lib/components/*/index.js",
+    "./directives": "./lib/directives/index.js",
+    "./directives/*": "./lib/directives/*/index.js",
+    "./locale": "./lib/locale/index.js",
+    "./locale/adapters/*": "./lib/locale/adapters/*.js",
+    "./iconsets/*": "./lib/iconsets/*.js",
+    "./labs/components": "./lib/labs/components.js",
+    "./labs/*": "./lib/labs/*/index.js",
+    "./util/colors": "./lib/util/colors.js",
     "./*": "./*"
   },
   "typesVersions": {
     "*": {
-      "lib/framework.mjs": [
-        "lib/index.d.mts"
-      ],
-      "framework": [
-        "lib/index.d.mts"
-      ],
       "*": [
         "*",
         "dist/*",
         "lib/*",
-        "lib/*.d.mts",
-        "lib/*/index.d.mts"
+        "lib/*.d.ts",
+        "lib/*/index.d.ts"
       ]
     }
   },
@@ -104,9 +99,9 @@
     "dev:prod": "concurrently \"vite build -w\" \"vite preview\"",
     "dev:typecheck": "vue-tsc --noEmit --skipLibCheck --project ./tsconfig.dev.json",
     "build": "rimraf lib dist && concurrently \"pnpm run build:dist\" \"pnpm run build:lib\" -n \"dist,lib\" --kill-others-on-fail -r && pnpm run build:types",
-    "build:dist": "rollup --config build/rollup.config.mjs",
-    "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .mjs",
-    "build:types": "rimraf types-temp && tsc --pretty --emitDeclarationOnly -p tsconfig.dist.json && rollup --config build/rollup.types.config.mjs && rimraf types-temp",
+    "build:dist": "rollup --config build/rollup.config.js",
+    "build:lib": "NODE_ENV=lib babel src --out-dir lib --source-maps --extensions \".ts\",\".tsx\",\".snap\" --copy-files --no-copy-ignored --out-file-extension .js",
+    "build:types": "tspc --pretty --emitDeclarationOnly -p tsconfig.dist.json && node build/transform-types.js && rollup --config build/rollup.types.config.js",
     "tsc": "tsc",
     "test": "vitest",
     "test:unit": "vitest --project unit",
@@ -173,6 +168,9 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "timezone-mock": "^1.3.6",
+    "ts-node": "^10.9.2",
+    "ts-patch": "^3.2.1",
+    "typescript-transform-paths": "^3.5.1",
     "unplugin-auto-import": "0.17.5",
     "unplugin-vue-components": "^0.27.4",
     "upath": "^2.0.1",
diff --git a/packages/vuetify/postcss.config.js b/packages/vuetify/postcss.config.js
deleted file mode 100644
index 7fb2bf814fa..00000000000
--- a/packages/vuetify/postcss.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const autoprefixer = require('autoprefixer')
-
-module.exports = ctx => ({
-  plugins: [
-    autoprefixer({
-      remove: false
-    })
-  ]
-})
diff --git a/packages/vuetify/tsconfig.dev.json b/packages/vuetify/tsconfig.dev.json
index 55131eda055..71f037676c5 100644
--- a/packages/vuetify/tsconfig.dev.json
+++ b/packages/vuetify/tsconfig.dev.json
@@ -5,13 +5,14 @@
     "dev",
     "test",
     "cypress",
-    "cypress.config.ts",
-    "vite.config.mts",
-    "vitest.config.mts",
-    "vitest.workspace.mts"
+    "./cypress.config.ts",
+    "./vite.config.ts",
+    "./vitest.config.ts",
+    "./vitest.workspace.ts"
   ],
   "compilerOptions": {
     "allowJs": true,
+    "allowImportingTsExtensions": true,
     "types": [
       "@vitest/browser/providers/webdriverio"
     ]
diff --git a/packages/vuetify/tsconfig.dist.json b/packages/vuetify/tsconfig.dist.json
index 0eccfe9e486..999aa4f79ca 100644
--- a/packages/vuetify/tsconfig.dist.json
+++ b/packages/vuetify/tsconfig.dist.json
@@ -1,4 +1,12 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["dev", "**/*.spec.*", "test"]
+  "exclude": ["dev", "**/*.spec.*", "test"],
+  "compilerOptions": {
+    "outDir": "./lib",
+    "emitDeclarationOnly": true,
+    "plugins": [
+      { "transform": "typescript-transform-paths", "afterDeclarations": true },
+      { "transform":  "./build/remove-dts-styles.cts", "afterDeclarations": true },
+    ],
+  },
 }
diff --git a/packages/vuetify/tsconfig.json b/packages/vuetify/tsconfig.json
index 71a3cb7a635..b05ec4a43df 100644
--- a/packages/vuetify/tsconfig.json
+++ b/packages/vuetify/tsconfig.json
@@ -4,10 +4,9 @@
     "src",
     "dev",
   ],
-  "exclude": ["types-temp", "**/*.spec.cy.ts", "**/*.spec.cy.tsx"],
+  "exclude": ["**/*.spec.cy.ts", "**/*.spec.cy.tsx"],
   "compilerOptions": {
     "baseUrl": ".",
-    "outDir": "./types-temp",
     "paths": {
       "@/*": ["src/*"],
       "@test": ["test/index.ts"]
diff --git a/packages/vuetify/vite.config.mts b/packages/vuetify/vite.config.ts
similarity index 100%
rename from packages/vuetify/vite.config.mts
rename to packages/vuetify/vite.config.ts
diff --git a/packages/vuetify/vitest.config.mts b/packages/vuetify/vitest.config.ts
similarity index 97%
rename from packages/vuetify/vitest.config.mts
rename to packages/vuetify/vitest.config.ts
index 18aac633fc7..08d1a388e53 100644
--- a/packages/vuetify/vitest.config.mts
+++ b/packages/vuetify/vitest.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from './vite.config.mjs'
+import viteConfig from './vite.config'
 import AutoImport from 'unplugin-auto-import/vite'
 import { fileURLToPath } from 'url'
 
diff --git a/packages/vuetify/vitest.workspace.mts b/packages/vuetify/vitest.workspace.ts
similarity index 90%
rename from packages/vuetify/vitest.workspace.mts
rename to packages/vuetify/vitest.workspace.ts
index d2a5abc7394..1b6048751a2 100644
--- a/packages/vuetify/vitest.workspace.mts
+++ b/packages/vuetify/vitest.workspace.ts
@@ -3,7 +3,7 @@ import { commands } from './test/setup/browser-commands.ts'
 
 export default defineWorkspace([
   {
-    extends: './vitest.config.mts',
+    extends: './vitest.config.ts',
     test: {
       name: 'unit',
       include: ['**/*.spec.{ts,tsx}'],
@@ -12,7 +12,7 @@ export default defineWorkspace([
     },
   },
   {
-    extends: './vitest.config.mts',
+    extends: './vitest.config.ts',
     test: {
       name: 'browser',
       include: ['**/*.spec.browser.{ts,tsx}'],
@@ -32,7 +32,7 @@ export default defineWorkspace([
         providerOptions: {
           capabilities: {
             'goog:chromeOptions': {
-              // @ts-ignore
+              // @ts-expect-error
               args: ['--start-maximized', process.env.TEST_BAIL && '--auto-open-devtools-for-tabs'].filter(v => !!v),
             },
           },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fda6884e11c..ee38f6e0b8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -363,10 +363,10 @@ importers:
         version: 4.0.2
       jest:
         specifier: ^28.1.3
-        version: 28.1.3(@types/node@22.5.4)
+        version: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
       jest-runner-eslint:
         specifier: ^2.2.0
-        version: 2.2.0(@jest/test-result@28.1.3)(eslint@8.57.0)(jest-runner@28.1.3)(jest@28.1.3(@types/node@22.5.4))
+        version: 2.2.0(@jest/test-result@28.1.3)(eslint@8.57.0)(jest-runner@28.1.3)(jest@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)))
       jest-silent-reporter:
         specifier: ^0.5.0
         version: 0.5.0
@@ -552,7 +552,7 @@ importers:
         version: 16.4.5
       eslint-plugin-jest:
         specifier: ^28.7.0
-        version: 28.7.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@28.1.3(@types/node@22.5.4))(typescript@5.5.4)
+        version: 28.7.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)))(typescript@5.5.4)
       eslint-plugin-vitest:
         specifier: 0.4.1
         version: 0.4.1(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)(vitest@2.1.1(@types/node@22.5.4)(@vitest/browser@2.1.1)(@vitest/ui@2.1.1)(happy-dom@8.9.0(encoding@0.1.13))(jsdom@25.0.0)(msw@2.4.2(typescript@5.5.4))(sass-embedded@1.80.1)(sass@1.80.1)(terser@5.31.3))
@@ -595,6 +595,15 @@ importers:
       timezone-mock:
         specifier: ^1.3.6
         version: 1.3.6
+      ts-node:
+        specifier: ^10.9.2
+        version: 10.9.2(@types/node@22.5.4)(typescript@5.5.4)
+      ts-patch:
+        specifier: ^3.2.1
+        version: 3.2.1
+      typescript-transform-paths:
+        specifier: ^3.5.1
+        version: 3.5.1(typescript@5.5.4)
       unplugin-auto-import:
         specifier: 0.17.5
         version: 0.17.5(rollup@3.29.4)
@@ -1319,6 +1328,10 @@ packages:
   '@cosmicjs/sdk@1.0.11':
     resolution: {integrity: sha512-Zm53TsyAGg2ytsJaBf06NcFA5FVG+tc39ZAYQgANi3uLkojnZFWGCIkwHVAn7CYVBac8dPF4tt0U6pYWNAA+Pg==}
 
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
   '@date-io/core@3.0.0':
     resolution: {integrity: sha512-S3j+IAQVBYNkQzchVVhX40eBkGDreBpScy9RXwTS5j2+k07+62pMVPisQ44Gq76Rqy5AOG/EZXCwBpY/jbemvA==}
 
@@ -1898,6 +1911,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
   '@lerna/create@8.1.7':
     resolution: {integrity: sha512-ch81CgU5pBNOiUCQx44F/ZtN4DxxJjUQtuytYRBFWJSHAJ+XPJtiC/yQ9zjr1I1yaUlmNYYblkopoOyziOdJ1w==}
     engines: {node: '>=18.0.0'}
@@ -2564,6 +2580,18 @@ packages:
   '@ts-morph/common@0.23.0':
     resolution: {integrity: sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==}
 
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
   '@tufjs/canonical-json@2.0.0':
     resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3243,6 +3271,9 @@ packages:
     resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
     engines: {node: '>= 14'}
 
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -4030,6 +4061,9 @@ packages:
       jest-runner:
         optional: true
 
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
   cross-fetch@4.0.0:
     resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
 
@@ -4329,6 +4363,10 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -5122,6 +5160,10 @@ packages:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -6209,6 +6251,9 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
   make-fetch-happen@13.0.1:
     resolution: {integrity: sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -8415,6 +8460,24 @@ packages:
   ts-morph@22.0.0:
     resolution: {integrity: sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==}
 
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': 22.5.4
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  ts-patch@3.2.1:
+    resolution: {integrity: sha512-hlR43v+GUIUy8/ZGFP1DquEqPh7PFKQdDMTAmYt671kCCA6AkDQMoeFaFmZ7ObPLYOmpMgyKUqL1C+coFMf30w==}
+    hasBin: true
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -8511,6 +8574,11 @@ packages:
   typescript-auto-import-cache@0.3.3:
     resolution: {integrity: sha512-ojEC7+Ci1ij9eE6hp8Jl9VUNnsEKzztktP5gtYNRMrTmfXVwA1PITYYAkpxCvvupdSYa/Re51B6KMcv1CTZEUA==}
 
+  typescript-transform-paths@3.5.1:
+    resolution: {integrity: sha512-nq+exuF+38rAby9zrP+S6t0HWuwv69jeFu0I5UwjdoCIDPmnKIAr6a7JfYkbft7h5OzYKEDRhT/jLvvtTvWF4Q==}
+    peerDependencies:
+      typescript: '>=3.6.5'
+
   typescript@5.5.4:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
@@ -8674,6 +8742,9 @@ packages:
     deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
     hasBin: true
 
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
   v8-to-istanbul@9.0.1:
     resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
     engines: {node: '>=10.12.0'}
@@ -9308,6 +9379,10 @@ packages:
   yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
 
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -10258,6 +10333,10 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
   '@date-io/core@3.0.0': {}
 
   '@date-io/date-fns@3.0.0(date-fns@3.6.0)':
@@ -10649,7 +10728,7 @@ snapshots:
       jest-util: 28.1.3
       slash: 3.0.0
 
-  '@jest/core@28.1.3':
+  '@jest/core@28.1.3(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))':
     dependencies:
       '@jest/console': 28.1.3
       '@jest/reporters': 28.1.3
@@ -10663,7 +10742,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 28.1.3
-      jest-config: 28.1.3(@types/node@22.5.4)
+      jest-config: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
       jest-haste-map: 28.1.3
       jest-message-util: 28.1.3
       jest-regex-util: 28.0.2
@@ -10838,6 +10917,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   '@lerna/create@8.1.7(encoding@0.1.13)(typescript@5.5.4)':
     dependencies:
       '@npmcli/arborist': 7.5.3
@@ -11734,6 +11818,14 @@ snapshots:
       mkdirp: 3.0.1
       path-browserify: 1.0.1
 
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
   '@tufjs/canonical-json@2.0.0': {}
 
   '@tufjs/models@2.0.1':
@@ -12658,6 +12750,8 @@ snapshots:
       tar-stream: 3.1.7
       zip-stream: 6.0.1
 
+  arg@4.1.3: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -13623,6 +13717,8 @@ snapshots:
       '@jest/test-result': 28.1.3
       jest-runner: 28.1.3
 
+  create-require@1.1.1: {}
+
   cross-fetch@4.0.0(encoding@0.1.13):
     dependencies:
       node-fetch: 2.7.0(encoding@0.1.13)
@@ -13907,6 +14003,8 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
+  diff@4.0.2: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -14281,13 +14379,13 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@28.7.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@28.1.3(@types/node@22.5.4))(typescript@5.5.4):
+  eslint-plugin-jest@28.7.0(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)))(typescript@5.5.4):
     dependencies:
       '@typescript-eslint/utils': 8.0.1(eslint@8.57.0)(typescript@5.5.4)
       eslint: 8.57.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)
-      jest: 28.1.3(@types/node@22.5.4)
+      jest: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14923,6 +15021,12 @@ snapshots:
       minipass: 4.2.8
       path-scurry: 1.11.1
 
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
   globals@11.12.0: {}
 
   globals@13.24.0:
@@ -15598,16 +15702,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jest-cli@28.1.3(@types/node@22.5.4):
+  jest-cli@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)):
     dependencies:
-      '@jest/core': 28.1.3
+      '@jest/core': 28.1.3(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 28.1.3(@types/node@22.5.4)
+      jest-config: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
       jest-util: 28.1.3
       jest-validate: 28.1.3
       prompts: 2.4.2
@@ -15617,7 +15721,7 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@28.1.3(@types/node@22.5.4):
+  jest-config@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)):
     dependencies:
       '@babel/core': 7.25.2
       '@jest/test-sequencer': 28.1.3
@@ -15643,6 +15747,7 @@ snapshots:
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 22.5.4
+      ts-node: 10.9.2(@types/node@22.5.4)(typescript@5.5.4)
     transitivePeerDependencies:
       - supports-color
 
@@ -15755,14 +15860,14 @@ snapshots:
       resolve.exports: 1.1.0
       slash: 3.0.0
 
-  jest-runner-eslint@2.2.0(@jest/test-result@28.1.3)(eslint@8.57.0)(jest-runner@28.1.3)(jest@28.1.3(@types/node@22.5.4)):
+  jest-runner-eslint@2.2.0(@jest/test-result@28.1.3)(eslint@8.57.0)(jest-runner@28.1.3)(jest@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))):
     dependencies:
       chalk: 4.1.2
       cosmiconfig: 7.1.0
       create-jest-runner: 0.11.2(@jest/test-result@28.1.3)(jest-runner@28.1.3)
       dot-prop: 6.0.1
       eslint: 8.57.0
-      jest: 28.1.3(@types/node@22.5.4)
+      jest: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@jest/test-result'
       - jest-runner
@@ -15903,12 +16008,12 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@28.1.3(@types/node@22.5.4):
+  jest@28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4)):
     dependencies:
-      '@jest/core': 28.1.3
+      '@jest/core': 28.1.3(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
       '@jest/types': 28.1.3
       import-local: 3.1.0
-      jest-cli: 28.1.3(@types/node@22.5.4)
+      jest-cli: 28.1.3(@types/node@22.5.4)(ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -16339,6 +16444,8 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  make-error@1.3.6: {}
+
   make-fetch-happen@13.0.1:
     dependencies:
       '@npmcli/agent': 2.2.2
@@ -18621,6 +18728,33 @@ snapshots:
       '@ts-morph/common': 0.23.0
       code-block-writer: 13.0.1
 
+  ts-node@10.9.2(@types/node@22.5.4)(typescript@5.5.4):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 22.5.4
+      acorn: 8.12.1
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.5.4
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+
+  ts-patch@3.2.1:
+    dependencies:
+      chalk: 4.1.2
+      global-prefix: 3.0.0
+      minimist: 1.2.8
+      resolve: 1.22.8
+      semver: 7.6.3
+      strip-ansi: 6.0.1
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -18719,6 +18853,11 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  typescript-transform-paths@3.5.1(typescript@5.5.4):
+    dependencies:
+      minimatch: 9.0.5
+      typescript: 5.5.4
+
   typescript@5.5.4: {}
 
   uc.micro@1.0.6: {}
@@ -18927,6 +19066,8 @@ snapshots:
 
   uuid@3.4.0: {}
 
+  v8-compile-cache-lib@3.0.1: {}
+
   v8-to-istanbul@9.0.1:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
@@ -19707,6 +19848,8 @@ snapshots:
       buffer-crc32: 0.2.13
       fd-slicer: 1.1.0
 
+  yn@3.1.1: {}
+
   yocto-queue@0.1.0: {}
 
   yoctocolors-cjs@2.1.2: {}
diff --git a/tsconfig.json b/tsconfig.json
index feefcfe3ca8..c32af6f122b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "preserve",                        /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     "declaration": true,                      /* Generates corresponding '.d.ts' file. */
-    "declarationMap": true,
+    "declarationMap": false,
     "sourceMap": true,                        /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "./dist",                       /* Redirect output structure to the directory. */

From 2e0e0f528eb36b8617cae1834a11ddb2350940f8 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 15 Jan 2025 21:32:50 +1100
Subject: [PATCH 050/127] fix(VColorPicker): handle invalid eyedropper result
 in linux

fixes #20847
---
 .../src/components/VColorPicker/VColorPickerPreview.tsx    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
index 7dc55ae0391..36d0e39592b 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
@@ -13,16 +13,17 @@ import { onUnmounted } from 'vue'
 import { nullColor } from './util'
 import {
   defineComponent,
-  HexToHSV,
   HSVtoCSS,
+  parseColor,
   propsFactory,
+  RGBtoHSV,
   SUPPORTS_EYE_DROPPER,
   useRender,
 } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { Hex, HSV } from '@/util'
+import type { HSV } from '@/util'
 
 export const makeVColorPickerPreviewProps = propsFactory({
   color: {
@@ -54,7 +55,7 @@ export const VColorPickerPreview = defineComponent({
       const eyeDropper = new window.EyeDropper()
       try {
         const result = await eyeDropper.open({ signal: abortController.signal })
-        const colorHexValue = HexToHSV(result.sRGBHex as Hex)
+        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex))
         emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue })
       } catch (e) {}
     }

From 39fe86de7da2e4f612301903e0a51dfc117e83fc Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 16 Jan 2025 15:20:59 +1100
Subject: [PATCH 051/127] fix(VDialog): restore scrollable dialog margins

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

diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
index e45e92a08df..3061d59b696 100644
--- a/packages/vuetify/src/components/VDialog/VDialog.sass
+++ b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -71,6 +71,12 @@
           border-radius: 0
 
   .v-dialog--scrollable > .v-overlay__content
+    > form
+      &,
+      > .v-card
+        max-height: 100%
+        max-width: 100%
+
     &,
     > form
       &,
@@ -78,8 +84,6 @@
         display: flex
         flex: 1 1 100%
         flex-direction: column
-        max-height: 100%
-        max-width: 100%
 
       > .v-card > .v-card-text
         backface-visibility: hidden

From 0f833be59fe7afb8f1bb86f4e04b9f809ab9d84d Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 16 Jan 2025 07:55:49 +0100
Subject: [PATCH 052/127] fix(VSparkline): accept numeric value for smooth
 (#20795)

fixes #19262
---
 packages/vuetify/src/components/VSparkline/VBarline.tsx   | 5 +++--
 packages/vuetify/src/components/VSparkline/VTrendline.tsx | 4 +++-
 packages/vuetify/src/components/VSparkline/util/line.ts   | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VSparkline/VBarline.tsx b/packages/vuetify/src/components/VSparkline/VBarline.tsx
index 7d765deb3b7..fcb2a039ae4 100644
--- a/packages/vuetify/src/components/VSparkline/VBarline.tsx
+++ b/packages/vuetify/src/components/VSparkline/VBarline.tsx
@@ -123,6 +123,7 @@ export const VBarline = genericComponent<VBarlineSlots>()({
 
     const bars = computed(() => genBars(items.value, boundary.value))
     const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2)
+    const smooth = computed(() => typeof props.smooth === 'boolean' ? (props.smooth ? 2 : 0) : Number(props.smooth))
 
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse()
@@ -155,8 +156,8 @@ export const VBarline = genericComponent<VBarlineSlots>()({
                     y={ item.y }
                     width={ lineWidth.value }
                     height={ item.height }
-                    rx={ typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0 }
-                    ry={ typeof props.smooth === 'number' ? props.smooth : props.smooth ? 2 : 0 }
+                    rx={ smooth.value }
+                    ry={ smooth.value }
                 >
                   { props.autoDraw && (
                     <>
diff --git a/packages/vuetify/src/components/VSparkline/VTrendline.tsx b/packages/vuetify/src/components/VSparkline/VTrendline.tsx
index 4cee7027c04..e3768fdc0ad 100644
--- a/packages/vuetify/src/components/VSparkline/VTrendline.tsx
+++ b/packages/vuetify/src/components/VSparkline/VTrendline.tsx
@@ -149,9 +149,11 @@ export const VTrendline = genericComponent<VTrendlineSlots>()({
     }, { immediate: true })
 
     function genPath (fill: boolean) {
+      const smoothValue = typeof props.smooth === 'boolean' ? (props.smooth ? 8 : 0) : Number(props.smooth)
+
       return _genPath(
         genPoints(items.value, boundary.value),
-        props.smooth ? 8 : Number(props.smooth),
+        smoothValue,
         fill,
         parseInt(props.height, 10)
       )
diff --git a/packages/vuetify/src/components/VSparkline/util/line.ts b/packages/vuetify/src/components/VSparkline/util/line.ts
index 04c6e264bbc..61a3df59b5f 100644
--- a/packages/vuetify/src/components/VSparkline/util/line.ts
+++ b/packages/vuetify/src/components/VSparkline/util/line.ts
@@ -4,7 +4,7 @@ import { propsFactory } from '@/util'
 // Types
 import type { PropType } from 'vue'
 
-export type SparklineItem = number | { value: number }
+export type SparklineItem = string | number | { value: number }
 
 export const makeLineProps = propsFactory({
   autoDraw: Boolean,
@@ -55,7 +55,7 @@ export const makeLineProps = propsFactory({
     default: 8,
   },
   showLabels: Boolean,
-  smooth: Boolean,
+  smooth: [Boolean, String, Number],
   width: {
     type: [Number, String],
     default: 300,

From 70deee7d77c5cefba8dfff2474520f6d00a1f124 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 16 Jan 2025 08:01:59 +0100
Subject: [PATCH 053/127] feat(VDateInput): actions slot (#20858)

resolves #20690
closes #20857
---
 .../vuetify/src/labs/VDateInput/VDateInput.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
index 54202f7cddc..9cdba2b3774 100644
--- a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
+++ b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
@@ -15,7 +15,14 @@ import { computed, shallowRef } from 'vue'
 import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
-export interface VDateInputSlots {
+export type VDateInputActionsSlot = {
+  save: () => void
+  cancel: () => void
+  isPristine: boolean
+}
+
+export type VDateInputSlots = {
+  actions: VDateInputActionsSlot
   default: never
 }
 
@@ -34,7 +41,7 @@ export const makeVDateInputProps = propsFactory({
   }), ['active']),
 }, 'VDateInput')
 
-export const VDateInput = genericComponent()({
+export const VDateInput = genericComponent<VDateInputSlots>()({
   name: 'VDateInput',
 
   props: makeVDateInputProps(),
@@ -127,9 +134,10 @@ export const VDateInput = genericComponent()({
               { ...confirmEditProps }
               v-model={ model.value }
               onSave={ onSave }
+              onCancel={ () => menu.value = false }
             >
               {{
-                default: ({ actions, model: proxyModel }) => {
+                default: ({ actions, model: proxyModel, save, cancel, isPristine }) => {
                   return (
                     <VDatePicker
                       { ...datePickerProps }
@@ -146,7 +154,7 @@ export const VDateInput = genericComponent()({
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                     >
                       {{
-                        actions: !props.hideActions ? actions : undefined,
+                        actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,
                       }}
                     </VDatePicker>
                   )

From 2cefedb55837b8e2238adae695dd9f7b1ac199d1 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:06:08 +0100
Subject: [PATCH 054/127] feat(VDateInput): pass `location` to VMenu (#20854)

---
 .../vuetify/src/labs/VDateInput/VDateInput.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
index 9cdba2b3774..9e595e55e9d 100644
--- a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
+++ b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx
@@ -14,6 +14,10 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { computed, shallowRef } from 'vue'
 import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+import type { StrategyProps } from '@/components/VOverlay/locationStrategies'
+
 // Types
 export type VDateInputActionsSlot = {
   save: () => void
@@ -28,7 +32,10 @@ export type VDateInputSlots = {
 
 export const makeVDateInputProps = propsFactory({
   hideActions: Boolean,
-
+  location: {
+    type: String as PropType<StrategyProps['location']>,
+    default: 'bottom start',
+  },
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps({
@@ -38,7 +45,7 @@ export const makeVDateInputProps = propsFactory({
   ...omit(makeVDatePickerProps({
     weeksInMonth: 'dynamic' as const,
     hideHeader: true,
-  }), ['active']),
+  }), ['active', 'location']),
 }, 'VDateInput')
 
 export const VDateInput = genericComponent<VDateInputSlots>()({
@@ -107,7 +114,7 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
 
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
-      const datePickerProps = VDatePicker.filterProps(omit(props, ['active']))
+      const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location']))
       const textFieldProps = VTextField.filterProps(props)
 
       return (
@@ -127,6 +134,7 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
             v-model={ menu.value }
             activator="parent"
             min-width="0"
+            location={ props.location }
             closeOnContentClick={ false }
             openOnClick={ false }
           >

From 2cab7e459e9c5742e3e3975afa23df1b783fddb8 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 16 Jan 2025 22:18:20 +1100
Subject: [PATCH 055/127] fix(VAutocomplete): allow searching when selected
 item is hightlighted

fixes #20796
closes #20836
---
 .../src/components/VAutocomplete/VAutocomplete.tsx | 14 +++++++-------
 .../vuetify/src/components/VCombobox/VCombobox.tsx | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index d869a9a28fb..ea4ad190782 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -229,10 +229,7 @@ export const VAutocomplete = genericComponent<new <
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
 
-      if (
-        selectionIndex.value > -1 ||
-        ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)
-      ) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault()
       }
 
@@ -265,6 +262,7 @@ export const VAutocomplete = genericComponent<new <
         ) return select(model.value[0], false)
 
         if (~selectionIndex.value) {
+          e.preventDefault()
           const originalSelectionIndex = selectionIndex.value
           select(model.value[selectionIndex.value], false)
 
@@ -272,6 +270,8 @@ export const VAutocomplete = genericComponent<new <
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1
         }
+
+        return
       }
 
       if (!props.multiple) return
@@ -289,9 +289,7 @@ export const VAutocomplete = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length)
         }
-      }
-
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return
 
         const next = selectionIndex.value + 1
@@ -302,6 +300,8 @@ export const VAutocomplete = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(0, 0)
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1
       }
     }
 
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 55ec71a6a50..54014e7bc42 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -281,10 +281,7 @@ export const VCombobox = genericComponent<new <
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
 
-      if (
-        selectionIndex.value > -1 ||
-        ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)
-      ) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault()
       }
 
@@ -326,6 +323,7 @@ export const VCombobox = genericComponent<new <
         ) return select(model.value[0], false)
 
         if (~selectionIndex.value) {
+          e.preventDefault()
           const originalSelectionIndex = selectionIndex.value
           select(model.value[selectionIndex.value], false)
 
@@ -333,6 +331,8 @@ export const VCombobox = genericComponent<new <
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1
         }
+
+        return
       }
 
       if (!props.multiple) return
@@ -350,9 +350,7 @@ export const VCombobox = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length)
         }
-      }
-
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return
 
         const next = selectionIndex.value + 1
@@ -363,6 +361,8 @@ export const VCombobox = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(0, 0)
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1
       }
     }
     function onAfterEnter () {

From cb2d96bbcf61623a6b9b007e2a09b3c7bcaa160c Mon Sep 17 00:00:00 2001
From: babu-ch <42715882+babu-ch@users.noreply.github.com>
Date: Thu, 16 Jan 2025 20:43:39 +0900
Subject: [PATCH 056/127] fix(VSlideGroup): skip disabled elements when moving
 focus (#20808)

fixes #20780

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../components/VSlideGroup/VSlideGroup.tsx    | 19 ++++++++++++++---
 .../__tests__/VSlideGroup.spec.cy.tsx         | 21 +++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
index 950df1a444a..4663b1d95c0 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -279,26 +279,39 @@ export const VSlideGroup = genericComponent<new <T>(
       }
     }
 
+    function getSiblingElement (el: HTMLElement | null, location: 'next' | 'prev') {
+      if (!el) return undefined
+      let sibling: HTMLElement | null = el
+      do {
+        sibling = sibling?.[location === 'next' ? 'nextElementSibling' : 'previousElementSibling'] as HTMLElement | null
+      } while (sibling?.hasAttribute('disabled'))
+      return sibling
+    }
+
     function focus (location?: 'next' | 'prev' | 'first' | 'last') {
       if (!contentRef.el) return
 
-      let el: HTMLElement | undefined
+      let el: HTMLElement | null | undefined
 
       if (!location) {
         const focusable = focusableChildren(contentRef.el)
         el = focusable[0]
       } else if (location === 'next') {
-        el = contentRef.el.querySelector(':focus')?.nextElementSibling as HTMLElement | undefined
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location)
 
         if (!el) return focus('first')
       } else if (location === 'prev') {
-        el = contentRef.el.querySelector(':focus')?.previousElementSibling as HTMLElement | undefined
+        el = getSiblingElement(contentRef.el.querySelector(':focus'), location)
 
         if (!el) return focus('last')
       } else if (location === 'first') {
         el = (contentRef.el.firstElementChild as HTMLElement)
+
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'next')
       } else if (location === 'last') {
         el = (contentRef.el.lastElementChild as HTMLElement)
+
+        if (el?.hasAttribute('disabled')) el = getSiblingElement(el, 'prev')
       }
 
       if (el) {
diff --git a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
index 62bfd1a3794..934eb5774ff 100644
--- a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
@@ -8,6 +8,7 @@ import { VCard } from '@/components/VCard'
 
 // Utilities
 import { createRange } from '@/util'
+import { VBtn } from '../../VBtn'
 
 describe('VSlideGroup', () => {
   it('should support default scoped slot with selection', () => {
@@ -252,4 +253,24 @@ describe('VSlideGroup', () => {
 
     cy.get('.item-7').should('exist').should('be.visible')
   })
+
+  it('Skip disabled elements when moving focus', () => {
+    cy.mount(() => (
+      <Application>
+        <VSlideGroup selectedClass="bg-primary">
+          { createRange(5).map(i => (
+            <VSlideGroupItem key={ i }>
+              <VBtn class={[`btn${i}`]} disabled={ i === 2 || i === 3 }>{ i }</VBtn>
+            </VSlideGroupItem>
+          ))}
+        </VSlideGroup>
+      </Application>
+    ))
+
+    cy.get('.btn0').focus().type('{rightArrow}{rightArrow}')
+    cy.focused().should('have.class', 'btn4')
+
+    cy.focused().type('{leftArrow}')
+    cy.focused().should('have.class', 'btn1')
+  })
 })

From 1c65f8fe9ce0bd81e5ade43c4bb51bf0b883cb80 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Fri, 17 Jan 2025 12:52:41 +0100
Subject: [PATCH 057/127] feat(VTimeline): side prop for individual items
 (#20855)

fixes #19363
---
 .../api-generator/src/locale/en/VTimeline.json   |  2 +-
 .../src/locale/en/VTimelineItem.json             |  2 +-
 .../src/components/VTimeline/VTimeline.sass      | 16 ++++++++++++----
 .../src/components/VTimeline/VTimelineItem.tsx   |  9 ++++++++-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VTimeline.json b/packages/api-generator/src/locale/en/VTimeline.json
index 25a3beabc56..2d55a575502 100644
--- a/packages/api-generator/src/locale/en/VTimeline.json
+++ b/packages/api-generator/src/locale/en/VTimeline.json
@@ -8,7 +8,7 @@
     "linePosition": "Shift the position of the line. By default the line will evenly split items before/after.",
     "lineThickness": "Thickness of the timeline line.",
     "mirror": "Mirror the before/after ordering of timeline items.",
-    "side": "Display all timeline items on one side of the timeline, either **before** or **after**.",
+    "side": "Display all timeline items on one side of the timeline, either **start** or **end**.",
     "truncateLine": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VTimelineItem.json b/packages/api-generator/src/locale/en/VTimelineItem.json
index 77a3f6450c6..f3ed38d9bdd 100644
--- a/packages/api-generator/src/locale/en/VTimelineItem.json
+++ b/packages/api-generator/src/locale/en/VTimelineItem.json
@@ -10,7 +10,7 @@
     "iconColor": "Color of the icon.",
     "index": "Used to allow dynamically shown items to be re-inserted in the correct position.",
     "lineInset": "Specifies the distance between the line and the dot of the item.",
-    "side": "Show the item either **before** or **after** the timeline. This will override the implicit ordering of items, but will in turn be overriden by the `v-timeline` **single-side** prop.",
+    "side": "Display the item on one side of the timeline, either **start** or **end**. This will override the implicit ordering of items, unless `v-timeline` has it's own **side** prop defined.",
     "size": "Size of the item dot"
   },
   "slots": {
diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass
index 36d5f396ccb..093b53c6724 100644
--- a/packages/vuetify/src/components/VTimeline/VTimeline.sass
+++ b/packages/vuetify/src/components/VTimeline/VTimeline.sass
@@ -23,7 +23,9 @@
       grid-column-gap: $timeline-item-padding
       width: 100%
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-row: 3
           padding-block-start: $timeline-item-padding
@@ -33,7 +35,9 @@
           padding-block-end: $timeline-item-padding
           align-self: flex-end
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-row: 1
           padding-block-end: $timeline-item-padding
@@ -53,7 +57,9 @@
       @include timeline-last-item()
         padding-block-end: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-column: 1
           padding-inline-end: $timeline-item-padding
@@ -62,7 +68,9 @@
           grid-column: 3
           padding-inline-start: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-column: 3
           padding-inline-start: $timeline-item-padding
diff --git a/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx b/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
index 5c616caa93a..b6777f4bfdd 100644
--- a/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
+++ b/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
@@ -15,9 +15,10 @@ import { ref, shallowRef, watch } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { PropType } from 'vue'
+import type { Prop, PropType } from 'vue'
 
 // Types
+export type TimelineItemSide = 'start' | 'end' | undefined
 export type VTimelineItemSlots = {
   default: never
   icon: never
@@ -36,6 +37,10 @@ export const makeVTimelineItemProps = propsFactory({
   icon: IconValue,
   iconColor: String,
   lineInset: [Number, String],
+  side: {
+    type: String,
+    validator: (v: any) => v == null || ['start', 'end'].includes(v),
+  } as Prop<TimelineItemSide>,
 
   ...makeComponentProps(),
   ...makeDimensionProps(),
@@ -68,6 +73,8 @@ export const VTimelineItem = genericComponent<VTimelineItemSlots>()({
           'v-timeline-item',
           {
             'v-timeline-item--fill-dot': props.fillDot,
+            'v-timeline-item--side-start': props.side === 'start',
+            'v-timeline-item--side-end': props.side === 'end',
           },
           props.class,
         ]}

From 3810c2ab9f7fdf52cc9c816b0b4e47b06c7bc219 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Sat, 18 Jan 2025 18:11:09 +1100
Subject: [PATCH 058/127] chore(ci): fix nightly build changelog

---
 .github/actions/nightly-release/action.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actions/nightly-release/action.yml b/.github/actions/nightly-release/action.yml
index d832f95f9bc..c87ffe456ff 100644
--- a/.github/actions/nightly-release/action.yml
+++ b/.github/actions/nightly-release/action.yml
@@ -47,7 +47,7 @@ runs:
       shell: bash
     - run: pnpm lerna version ${{ steps.get-version.outputs.full-version }} --no-push --no-commit-hooks --force-publish --yes
       shell: bash
-    - run: pnpm conventional-changelog -p angular --outfile ./packages/vuetify/CHANGELOG.md -r 2
+    - run: pnpm conventional-changelog -p vuetify --outfile ./packages/vuetify/CHANGELOG.md -r 2
       shell: bash
     - run: >-
         node -e "fs.writeFileSync(

From 14be656999d8061c6623cb11ef611fe06e23296e Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Sun, 19 Jan 2025 22:34:12 +1100
Subject: [PATCH 059/127] fix(VTreeview): Incorrect isOpen state in the prepend
 slot when using return-object (#20884)

---
 .../vuetify/src/composables/nested/nested.ts  |  2 +-
 .../src/labs/VTreeview/VTreeviewChildren.tsx  |  2 +-
 .../src/labs/VTreeview/VTreeviewItem.tsx      |  4 +--
 .../__tests__/VTreeview.spec.browser.tsx      | 33 +++++++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index a97188b1c0f..b3ede9a3b84 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -339,7 +339,7 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected: boolean, e?: Event) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator,
   }
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index 89a88fdfc7c..d4a6694f837 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -143,7 +143,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               return (
                 <VTreeviewItem
                   { ...listItemProps }
-                  value={ props.returnObject ? toRaw(item.raw) : itemProps.value }
+                  value={ props.returnObject ? item.raw : itemProps.value }
                   loading={ loading }
                   v-slots={ slotsWithItem }
                 />
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index b6968afa059..95732952a7f 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -12,7 +12,7 @@ import { IconValue } from '@/composables/icons'
 import { useLink } from '@/composables/router'
 
 // Utilities
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, toRaw } from 'vue'
 import { EventProp, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -68,7 +68,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             'v-treeview-item',
             {
               'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
-              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id),
+              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id)),
             },
             props.class,
           ]}
diff --git a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
index ec74dfca194..d2bee933f52 100644
--- a/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
+++ b/packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx
@@ -672,4 +672,37 @@ describe.each([
       expect(el).toBeVisible()
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20830
+  it('should return correct isOpen state in prepend slot', async () => {
+    render(() => (
+      <VTreeview
+        items={ items }
+        item-value="id"
+        open-on-click
+        return-object
+      >
+        {{
+          prepend: ({ isOpen }) => (<span class="prepend-is-open">{ `${isOpen}` }</span>),
+        }}
+      </VTreeview>
+    ))
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    const itemsPrepend = screen.getAllByCSS('.v-treeview-item .v-list-item__prepend .prepend-is-open')
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^true$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^false$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+  })
 })

From dc88c08bc630e0cdd5cd7eb4f77d51355b1e51cb Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 20 Jan 2025 17:31:30 +1100
Subject: [PATCH 060/127] chore(ci): specify triage action staleLabel

---
 .github/workflows/triage.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/triage.yml b/.github/workflows/triage.yml
index 96e89a8e845..def257ccd39 100644
--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -12,6 +12,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           triageLabel: 'S: triage'
+          staleLabel: 'S: stale'
           sponsorsFile: '.github/sponsors.yml'
           duplicateLabel: 'duplicate'
           triagedLabels: |-

From 37fb393aa3b49a2504b0256f1958d8523bfd903b Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 20 Jan 2025 21:01:14 +1100
Subject: [PATCH 061/127] chore(release): publish v3.7.7

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

diff --git a/lerna.json b/lerna.json
index a56d17b2aa6..ac46469ea9b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.6"
+  "version": "3.7.7"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 435323a47c4..6c70aac4684 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.6",
+  "version": "3.7.7",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index e9057270748..55193804367 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.7.6",
+  "version": "3.7.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 2992728a82a..3ae826187c5 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.6",
+  "version": "3.7.7",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From 7abcca1bae67660f0bd81e095b8f602cfb5d320f Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 20 Jan 2025 21:31:35 +1100
Subject: [PATCH 062/127] chore(ci): use ucacher

---
 .github/workflows/ci.yml | 19 ++++++++++++++-----
 .ucacherignore           |  4 ++++
 .ucacherignore.env       | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 .ucacherignore
 create mode 100644 .ucacherignore.env

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 453215c8dd7..b1a041a5b9e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,9 +30,15 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-24.04
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm build vuetify
+      - run: pnpm build:lib
+        working-directory: ./packages/vuetify
+      - run: ucacher pnpm build:dist
+        working-directory: ./packages/vuetify
+      - run: ucacher pnpm build:types
+        working-directory: ./packages/vuetify
       - uses: actions/upload-artifact@v4
         with:
           name: vuetify-dist
@@ -50,13 +56,14 @@ jobs:
       matrix:
         scopes: ['--scope vuetify --scope @vuetify/api-generator', '--scope vuetifyjs.com']
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
         with:
           name: vuetify-dist
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm lerna run lint $SCOPES
+      - run: ucacher pnpm lerna run lint $SCOPES
         env:
           SCOPES: ${{ matrix.scopes }}
 
@@ -87,6 +94,7 @@ jobs:
     runs-on: ubuntu-24.04
     if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
@@ -95,7 +103,7 @@ jobs:
           name: vuetify-dist
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm build api
+      - run: ucacher pnpm build api
       - run: echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
       - name: NPM Release
         run: bash scripts/deploy.sh
@@ -115,6 +123,7 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true' && github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
     runs-on: ubuntu-24.04
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
         with:
@@ -122,8 +131,8 @@ jobs:
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
       - uses: ./.github/actions/download-locales
-      - run: pnpm build api
-      - run: pnpm build docs
+      - run: ucacher pnpm build api
+      - run: ucacher pnpm build docs
         env:
           NODE_OPTIONS: --max-old-space-size=4096
           VITE_COSMIC_2_BUCKET_SLUG: ${{ secrets.COSMIC_2_BUCKET_SLUG }}
diff --git a/.ucacherignore b/.ucacherignore
new file mode 100644
index 00000000000..3ef0968d50c
--- /dev/null
+++ b/.ucacherignore
@@ -0,0 +1,4 @@
+.git/**/*
+node_modules/**/*
+/tmp/**/*
+.github/workflows/**/*
diff --git a/.ucacherignore.env b/.ucacherignore.env
new file mode 100644
index 00000000000..6ce5d51a672
--- /dev/null
+++ b/.ucacherignore.env
@@ -0,0 +1,35 @@
+GITHUB_TOKEN
+ACTIONS_RUNTIME_TOKEN
+GITHUB_PATH
+GITHUB_OUTPUT
+GITHUB_STATE
+GITHUB_ENV
+GITHUB_ACTION
+GITHUB_STEP_SUMMARY
+GITHUB_RUN_ATTEMPT
+GITHUB_RUN_NUMBER
+GITHUB_RUN_ID
+GITHUB_STEP_SUMMARY
+GITHUB_TRIGGERING_ACTOR
+GITHUB_ACTOR_ID
+GITHUB_ACTOR
+GITHUB_REF_TYPE
+GITHUB_SHA
+GITHUB_WORKFLOW_REF
+GITHUB_WORKFLOW_SHA
+GITHUB_EVENT_NAME
+GITHUB_HEAD_REF
+GITHUB_ACTION_REF
+INVOCATION_ID
+JOURNAL_STREAM
+SYSTEMD_EXEC_PID
+RUNNER_NAME
+RUNNER_TRACKING_ID
+LS_COLORS
+XDG_SESSION_ID
+SSH_CLIENT
+SSH_CONNECTION
+STATS_BLT
+HOSTNAME
+STATS_EXTP
+LOG_LEVEL

From 28ed40bc4d083ec59dc950a749305f554c1f94bd Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jan 2025 10:13:28 -0600
Subject: [PATCH 063/127] fix(VTreeview): properly indent nodes

fixes #20421
---
 .../src/labs/VTreeview/VTreeviewItem.sass     |  3 ++
 .../src/labs/VTreeview/VTreeviewItem.tsx      | 46 +++++++++----------
 .../src/labs/VTreeview/_variables.scss        |  1 +
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
index 568e9233a50..34393acf5d1 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -16,3 +16,6 @@
 
     .v-list-group__items .v-list-item
       padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+    .v-list-group__items .v-list-item.v-list-group__header
+      padding-inline-start: calc(#{$treeview-group-header-padding-inline-start} + var(--indent-padding)) !important
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
index 95732952a7f..5374e61d950 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx
@@ -80,29 +80,29 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             prepend: hasPrepend ? slotProps => {
               return (
                 <>
-                  { props.toggleIcon && (
-                    <VListItemAction start={ false }>
-                      <VBtn
-                        density="compact"
-                        icon={ props.toggleIcon }
-                        loading={ props.loading }
-                        variant="text"
-                        onClick={ props.onToggleExpand }
-                      >
-                        {{
-                          loader () {
-                            return (
-                              <VProgressCircular
-                                indeterminate="disable-shrink"
-                                size="20"
-                                width="2"
-                              />
-                            )
-                          },
-                        }}
-                      </VBtn>
-                    </VListItemAction>
-                  )}
+                  <VListItemAction start={ false }>
+                    { props.toggleIcon && (
+                        <VBtn
+                          density="compact"
+                          icon={ props.toggleIcon }
+                          loading={ props.loading }
+                          variant="text"
+                          onClick={ props.onToggleExpand }
+                        >
+                          {{
+                            loader () {
+                              return (
+                                <VProgressCircular
+                                  indeterminate="disable-shrink"
+                                  size="20"
+                                  width="2"
+                                />
+                              )
+                            },
+                          }}
+                        </VBtn>
+                    )}
+                  </VListItemAction>
 
                   { slots.prepend?.(slotProps) }
                 </>
diff --git a/packages/vuetify/src/labs/VTreeview/_variables.scss b/packages/vuetify/src/labs/VTreeview/_variables.scss
index ce050d3b605..554becdd230 100644
--- a/packages/vuetify/src/labs/VTreeview/_variables.scss
+++ b/packages/vuetify/src/labs/VTreeview/_variables.scss
@@ -4,3 +4,4 @@ $treeview-group-list-indent-size: 16px !default;
 $treeview-group-list-prepend-width: 16px !default;
 $treeview-item-padding-inline-start: 12px !default;
 $treeview-item-prepend-padding-inline-start: 44px !default;
+$treeview-group-header-padding-inline-start: 16px !default;

From e9e562545ad45cf6327fb01a488fb43676704f06 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jan 2025 10:50:37 -0600
Subject: [PATCH 064/127] fix(VTreeview): allow expansion of nodes when
 disabled

fixes #20832
---
 packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx | 4 +++-
 packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass    | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index d4a6694f837..442e7cd88f1 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -32,6 +32,7 @@ export type VTreeviewChildrenSlots<T> = {
 }
 
 export const makeVTreeviewChildrenProps = propsFactory({
+  disabled: Boolean,
   loadChildren: Function as PropType<(item: unknown) => Promise<void>>,
   loadingIcon: {
     type: String,
@@ -67,7 +68,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
   setup (props, { slots }) {
     const isLoading = reactive(new Set<unknown>())
 
-    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable)
+    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable))
 
     async function checkChildren (item: InternalListItem) {
       try {
@@ -99,6 +100,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                 <VCheckboxBtn
                   key={ item.value }
                   modelValue={ slotProps.isSelected }
+                  disabled={ props.disabled }
                   loading={ loading }
                   color={ props.selectedColor }
                   indeterminate={ slotProps.isIndeterminate }
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
index 34393acf5d1..8c68a1c05a3 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -8,6 +8,9 @@
   .v-treeview
     --indent-padding: 0px
 
+    &.v-list--disabled .v-list-item__prepend
+      pointer-events: auto
+
   .v-treeview-group.v-list-group
     --list-indent-size: #{$treeview-group-list-indent-size}
 

From 8927c69d6e537aa36118d2d81b23cb113326f8df Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jan 2025 11:35:52 -0600
Subject: [PATCH 065/127] fix(VTreeviewChildren): don't pass object as value
 when using returnObject

fixes #20477
---
 packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index 442e7cd88f1..ae5ec441459 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -130,7 +130,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
       return children ? (
         <VTreeviewGroup
           { ...treeviewGroupProps }
-          value={ props.returnObject ? item.raw : treeviewGroupProps?.value }
+          value={ props.returnObject ? item.raw?.id : treeviewGroupProps?.value }
         >
           {{
             activator: ({ props: activatorProps }) => {

From 7ad75bc28bcc4c113c5118b2d7f5a47806857078 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:12:54 +0100
Subject: [PATCH 066/127] docs(VChip): more precise description for `size` prop
 (#20705)

---
 packages/api-generator/src/locale/en/VChip.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/api-generator/src/locale/en/VChip.json b/packages/api-generator/src/locale/en/VChip.json
index 0f19ce2421c..2cbe5efb21c 100644
--- a/packages/api-generator/src/locale/en/VChip.json
+++ b/packages/api-generator/src/locale/en/VChip.json
@@ -12,6 +12,7 @@
     "label": "Applies a medium size border radius.",
     "outlined": "Removes background and applies border and text color.",
     "pill": "Remove `v-avatar` padding.",
+    "size": "Sets the height, padding and the font size of the component. Accepts only predefined options: **x-small**, **small**, **default**, **large**, and **x-large**.",
     "value": "The value used when a child of a [v-chip-group](/components/chip-groups)."
   },
   "events": {

From 0f96321dcd9d0a3d7839a5cdb22ed42c333a3074 Mon Sep 17 00:00:00 2001
From: Nioron07 <102545560+Nioron07@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:13:47 -0600
Subject: [PATCH 067/127] docs(VDataTableServer): fixes pagination examples
 (#20856)

---
 .../v-data-table/misc-server-side-paginate-and-sort.vue         | 2 +-
 packages/docs/src/examples/v-data-table/server-search.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
index d79ccfb436c..5b87d617b2c 100644
--- a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
+++ b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
@@ -112,7 +112,7 @@
               return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
             })
           }
-          const paginated = items.slice(start, end)
+          const paginated = items.slice(start, end === -1 ? undefined : end)
           resolve({ items: paginated, total: items.length })
         }, 500)
       })
diff --git a/packages/docs/src/examples/v-data-table/server-search.vue b/packages/docs/src/examples/v-data-table/server-search.vue
index a91ed5b866c..2d1fd1a2c80 100644
--- a/packages/docs/src/examples/v-data-table/server-search.vue
+++ b/packages/docs/src/examples/v-data-table/server-search.vue
@@ -139,7 +139,7 @@
               return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
             })
           }
-          const paginated = items.slice(start, end)
+          const paginated = items.slice(start, end === -1 ? undefined : end)
           resolve({ items: paginated, total: items.length })
         }, 500)
       })

From 44828688412ee4077dd66ef5c1dc2237fa59735c Mon Sep 17 00:00:00 2001
From: Tauromachian <54786476+Tauromachian@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:15:32 -0500
Subject: [PATCH 068/127] docs(VBadge): set badge specific description for the
 modelValue (#20838)

---
 packages/api-generator/src/locale/en/VBadge.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/api-generator/src/locale/en/VBadge.json b/packages/api-generator/src/locale/en/VBadge.json
index fccd3c70d29..c52c270e38d 100644
--- a/packages/api-generator/src/locale/en/VBadge.json
+++ b/packages/api-generator/src/locale/en/VBadge.json
@@ -8,7 +8,8 @@
     "label": "The **aria-label** used for the badge.",
     "max": "Sets the maximum number allowed when using the **content** prop with a `number` like value. If the content number exceeds the maximum value, a `+` suffix is added.",
     "offsetX": "Offset the badge on the x-axis.",
-    "offsetY": "Offset the badge on the y-axis."
+    "offsetY": "Offset the badge on the y-axis.",
+    "modelValue": "Controls whether the component is visible or hidden."
   },
   "slots": {
     "badge": "The slot used for the badge's content."

From 4e352d52944f02f559d2401c5513c1d4f1723147 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:17:18 +0100
Subject: [PATCH 069/127] docs: cleanup removed prop `small-chips` (#20706)

---
 packages/api-generator/src/locale/en/VFileInput.json       | 1 -
 packages/api-generator/src/locale/en/VSelect.json          | 1 -
 packages/docs/src/examples/v-combobox/slot-no-data.vue     | 2 +-
 packages/docs/src/examples/v-date-picker/prop-multiple.vue | 1 -
 packages/docs/src/examples/v-file-input/prop-chips.vue     | 5 -----
 packages/vuetify/playgrounds/Playground.items.vue          | 2 --
 6 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VFileInput.json b/packages/api-generator/src/locale/en/VFileInput.json
index 1530cc6a21d..9022f6e37f3 100644
--- a/packages/api-generator/src/locale/en/VFileInput.json
+++ b/packages/api-generator/src/locale/en/VFileInput.json
@@ -8,7 +8,6 @@
     "hideInput": "Display the icon only without the input (file names).",
     "multiple": "Adds the **multiple** attribute to the input, allowing multiple file selections.",
     "showSize": "Sets the displayed size of selected file(s). When using **true** will default to _1000_ displaying (**kB, MB, GB**) while _1024_ will display (**KiB, MiB, GiB**).",
-    "smallChips": "Changes display of selections to chips with the **small** property.",
     "truncateLength": "The length of a filename before it is truncated with ellipsis.",
     "value": "A single or array of [File objects](https://developer.mozilla.org/en-US/docs/Web/API/File)."
   },
diff --git a/packages/api-generator/src/locale/en/VSelect.json b/packages/api-generator/src/locale/en/VSelect.json
index b350a1af0d3..01ae1b6c3c6 100644
--- a/packages/api-generator/src/locale/en/VSelect.json
+++ b/packages/api-generator/src/locale/en/VSelect.json
@@ -19,7 +19,6 @@
     "overflow": "Creates an overflow button - [spec](https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons).",
     "searchInput": "Use the **.sync** modifier to catch user input from the search input.",
     "segmented": "Creates a segmented button - [spec](https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons).",
-    "smallChips": "Changes display of selections to chips with the **small** property.",
     "tags": "Tagging functionality, allows the user to create new values not available from the **items** prop."
   },
   "events": {
diff --git a/packages/docs/src/examples/v-combobox/slot-no-data.vue b/packages/docs/src/examples/v-combobox/slot-no-data.vue
index 4d0a881d9e8..5a999b6a574 100644
--- a/packages/docs/src/examples/v-combobox/slot-no-data.vue
+++ b/packages/docs/src/examples/v-combobox/slot-no-data.vue
@@ -7,10 +7,10 @@
       :items="items"
       hint="Maximum of 5 tags"
       label="Add some tags"
+      chips
       hide-selected
       multiple
       persistent-hint
-      small-chips
     >
       <template v-slot:no-data>
         <v-list-item>
diff --git a/packages/docs/src/examples/v-date-picker/prop-multiple.vue b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
index ed28f8cbe81..10ff8c2e36d 100644
--- a/packages/docs/src/examples/v-date-picker/prop-multiple.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
@@ -30,7 +30,6 @@
             chips
             multiple
             readonly
-            small-chips
             v-bind="attrs"
             v-on="on"
           ></v-combobox>
diff --git a/packages/docs/src/examples/v-file-input/prop-chips.vue b/packages/docs/src/examples/v-file-input/prop-chips.vue
index ea72e2770df..2211f6df13c 100644
--- a/packages/docs/src/examples/v-file-input/prop-chips.vue
+++ b/packages/docs/src/examples/v-file-input/prop-chips.vue
@@ -5,10 +5,5 @@
       chips
       multiple
     ></v-file-input>
-    <v-file-input
-      label="File input w/ small chips"
-      multiple
-      small-chips
-    ></v-file-input>
   </div>
 </template>
diff --git a/packages/vuetify/playgrounds/Playground.items.vue b/packages/vuetify/playgrounds/Playground.items.vue
index dd8e484eedd..ff943d1e716 100644
--- a/packages/vuetify/playgrounds/Playground.items.vue
+++ b/packages/vuetify/playgrounds/Playground.items.vue
@@ -59,7 +59,6 @@
       outlined
       dense
       chips
-      small-chips
       label="Outlined"
       multiple
     ></v-autocomplete>
@@ -71,7 +70,6 @@
       outlined
       dense
       chips
-      small-chips
       label="Outlined"
       multiple
       return-object

From b5ab35c40aa2b7fba71690a63ca5da3ab1a98835 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:18:57 +0100
Subject: [PATCH 070/127] docs(VTimePicker): fix example with selection
 restrictions (#20698)

---
 .../docs/src/examples/v-time-picker/prop-allowed-times.vue    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
index 54baf57a79d..0aa710840fd 100644
--- a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
+++ b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
@@ -25,6 +25,10 @@
 
   const time = ref('11:15')
   const timeStep = ref('10:10')
+
+  const allowedHours = v => v % 2
+  const allowedMinutes = v => v >= 10 && v <= 50
+  const allowedStep = m => m % 10 === 0
 </script>
 
 <script>

From 0a4066c5f4b325b308f1bb7c390e3c3ced16993f Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Tue, 21 Jan 2025 01:22:47 +0700
Subject: [PATCH 071/127] docs(useDisplay): update overrides example (#19610)

---
 packages/docs/src/components/examples/UsageExample.vue      | 2 +-
 packages/docs/src/pages/en/features/display-and-platform.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/components/examples/UsageExample.vue b/packages/docs/src/components/examples/UsageExample.vue
index a81c1ab9366..ad9459ed5fc 100644
--- a/packages/docs/src/components/examples/UsageExample.vue
+++ b/packages/docs/src/components/examples/UsageExample.vue
@@ -164,7 +164,7 @@
     {
       name: 'template',
       language: 'html',
-      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>\n${props.script}`,
+      content: `<template>\n  <v-app>\n    <v-container>\n      ${props.code.replaceAll('\n', '\n      ')}\n    </v-container>\n  </v-app>\n</template>\n${props.script || ''}`,
     },
   ]))
 </script>
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 d09871fd0df..fc189f75aef 100644
--- a/packages/docs/src/pages/en/features/display-and-platform.md
+++ b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -299,7 +299,7 @@ Specify a custom **mobileBreakpoint** value directly to the [useDisplay](/api/us
   import { onMounted } from 'vue'
   import { useDisplay } from 'vuetify'
 
-  const { mobile } = useDisplay({ mobileBreakpoint })
+  const { mobile } = useDisplay({ mobileBreakpoint: 580 })
 
   // Given a viewport width of 960px
   onMounted(() => {

From 6d084a17cc266136ee2a34996299067540b9b9bc Mon Sep 17 00:00:00 2001
From: Johannes Kingma <50140049+kingma-sbw@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:35:58 +0100
Subject: [PATCH 072/127] docs(installation): add ES Module setup (#20661)

Co-authored-by: J-Sek <J-Sek@users.noreply.github.com>
---
 .../pages/en/getting-started/installation.md  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/docs/src/pages/en/getting-started/installation.md b/packages/docs/src/pages/en/getting-started/installation.md
index 0f85edb2f8e..0e37e2a54b4 100644
--- a/packages/docs/src/pages/en/getting-started/installation.md
+++ b/packages/docs/src/pages/en/getting-started/installation.md
@@ -273,6 +273,34 @@ const app = createApp()
 app.use(vuetify).mount('#app')
 ```
 
+## Using as ES Module with CDN
+
+To import Vuetify (and Vue) using an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) you can use the same CDN but contain it in a ES module without tooling
+
+```html
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
+  <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />
+  <script type="importmap">
+  {
+    "imports": {
+      "vue": "https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm-browser.js",
+      "vuetify": "https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.esm.js"
+    }
+  }
+  </script>
+</head>
+```
+
+```html
+<script type="module">
+  import { createApp, ref, computed } from "vue"
+  import { createVuetify } from "vuetify"
+  //... setup as usual
+</script>
+```
+
 ## Using Vitepress
 
 You can use Vuetify's components in your Vitepress static site.

From 5b00efa98403fbfd270248b8fecc2ba0056b35c3 Mon Sep 17 00:00:00 2001
From: juanjcardona13 <45944359+juanjcardona13@users.noreply.github.com>
Date: Mon, 20 Jan 2025 17:24:15 -0500
Subject: [PATCH 073/127] docs(VEmptyState): Improve description for `size`
 prop (#20890)

---
 packages/api-generator/src/locale/en/VEmptyState.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/api-generator/src/locale/en/VEmptyState.json b/packages/api-generator/src/locale/en/VEmptyState.json
index 7e0a4593d30..72ae9b491f9 100644
--- a/packages/api-generator/src/locale/en/VEmptyState.json
+++ b/packages/api-generator/src/locale/en/VEmptyState.json
@@ -5,7 +5,8 @@
     "href": "The URL the action button links to.",
     "justify": "Control the justification of the text.",
     "textWidth": "Sets the width of the text container.",
-    "to": "The URL the action button links to."
+    "to": "The URL the action button links to.",
+    "size": "The size used to control the dimensions of the media element inside the component. Can be specified as a number or a string (e.g., '50%', '100px')."
   },
   "events": {
     "click:action": "Event emitted when the action button is clicked."

From 27ae0157728b5684035791cbc22aeb9188ea343d Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 21 Jan 2025 15:05:32 +1100
Subject: [PATCH 074/127] Revert "fix(VTreeviewChildren): don't pass object as
 value when using returnObject"

This reverts commit 8927c69d6e537aa36118d2d81b23cb113326f8df.
---
 packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index ae5ec441459..442e7cd88f1 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -130,7 +130,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
       return children ? (
         <VTreeviewGroup
           { ...treeviewGroupProps }
-          value={ props.returnObject ? item.raw?.id : treeviewGroupProps?.value }
+          value={ props.returnObject ? item.raw : treeviewGroupProps?.value }
         >
           {{
             activator: ({ props: activatorProps }) => {

From 5ca81847c03d0f16c0165ff5724b8f28328d1926 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 21 Jan 2025 06:06:44 +0100
Subject: [PATCH 075/127] fix(VField, VInput): emit `click:*` events using
 keyboard (#20878)

fixes #20864
---
 .../vuetify/src/components/VField/VField.tsx  | 21 +++++++------------
 .../src/components/VInput/InputIcon.tsx       | 17 +++++++++++++--
 packages/vuetify/src/util/helpers.ts          |  3 ++-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index b12b064782e..4288e46d4b0 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -211,15 +211,6 @@ export const VField = genericComponent<new <T>(
       }
     }
 
-    function onKeydownClear (e: KeyboardEvent) {
-      if (e.key !== 'Enter' && e.key !== ' ') return
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      props['onClick:clear']?.(new MouseEvent('click'))
-    }
-
     useRender(() => {
       const isOutlined = props.variant === 'outlined'
       const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon)
@@ -282,7 +273,10 @@ export const VField = genericComponent<new <T>(
           { hasPrepend && (
             <div key="prepend" class="v-field__prepend-inner">
               { props.prependInnerIcon && (
-                <InputIcon key="prepend-icon" name="prependInner" />
+                <InputIcon
+                  key="prepend-icon"
+                  name="prependInner"
+                />
               )}
 
               { slots['prepend-inner']?.(slotProps.value) }
@@ -342,7 +336,6 @@ export const VField = genericComponent<new <T>(
                   ? slots.clear({
                     ...slotProps.value,
                     props: {
-                      onKeydown: onKeydownClear,
                       onFocus: focus,
                       onBlur: blur,
                       onClick: props['onClick:clear'],
@@ -351,7 +344,6 @@ export const VField = genericComponent<new <T>(
                   : (
                     <InputIcon
                       name="clear"
-                      onKeydown={ onKeydownClear }
                       onFocus={ focus }
                       onBlur={ blur }
                     />
@@ -366,7 +358,10 @@ export const VField = genericComponent<new <T>(
               { slots['append-inner']?.(slotProps.value) }
 
               { props.appendInnerIcon && (
-                <InputIcon key="append-icon" name="appendInner" />
+                <InputIcon
+                  key="append-icon"
+                  name="appendInner"
+                />
               )}
             </div>
           )}
diff --git a/packages/vuetify/src/components/VInput/InputIcon.tsx b/packages/vuetify/src/components/VInput/InputIcon.tsx
index de317956e76..0ae9c6e87e5 100644
--- a/packages/vuetify/src/components/VInput/InputIcon.tsx
+++ b/packages/vuetify/src/components/VInput/InputIcon.tsx
@@ -4,12 +4,15 @@ import { VIcon } from '@/components/VIcon'
 // Composables
 import { useLocale } from '@/composables/locale'
 
+// Utilities
+import { callEvent } from '@/util'
+
 // Types
 import type { IconValue } from '@/composables/icons'
+import type { EventProp } from '@/util'
 
 type names = 'clear' | 'prepend' | 'append' | 'appendInner' | 'prependInner'
 
-type EventProp<T = (...args: any[]) => any> = T | T[]
 type InputIconProps<T extends names> = {
   label: string | undefined
 } & {
@@ -31,7 +34,16 @@ export function useInputIcon<T extends {}, K extends names = Listeners<T>> (prop
       appendInner: 'appendAction',
       clear: 'clear',
     }[name]
-    const listener = props[`onClick:${name}`]
+    const listener = props[`onClick:${name}`] as EventProp | undefined
+
+    function onKeydown (e: KeyboardEvent) {
+      if (e.key !== 'Enter' && e.key !== ' ') return
+
+      e.preventDefault()
+      e.stopPropagation()
+      callEvent(listener, new PointerEvent('click', e))
+    }
+
     const label = listener && localeKey
       ? t(`$vuetify.input.${localeKey}`, props.label ?? '')
       : undefined
@@ -41,6 +53,7 @@ export function useInputIcon<T extends {}, K extends names = Listeners<T>> (prop
         icon={ props[`${name}Icon`] }
         aria-label={ label }
         onClick={ listener }
+        onKeydown={ onKeydown }
       />
     )
   }
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index bd8eddea62e..01e719fde54 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -616,6 +616,7 @@ export function eventName (propName: string) {
   return propName[2].toLowerCase() + propName.slice(3)
 }
 
+// TODO: this should be an array but vue's types don't accept arrays: vuejs/core#8025
 export type EventProp<T extends any[] = any[], F = (...args: T) => void> = F
 export const EventProp = <T extends any[] = any[]>() => [Function, Array] as PropType<EventProp<T>>
 
@@ -624,7 +625,7 @@ export function hasEvent (props: Record<string, any>, name: string) {
   return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`])
 }
 
-export function callEvent<T extends any[]> (handler: EventProp<T> | undefined, ...args: T) {
+export function callEvent<T extends any[]> (handler: EventProp<T> | EventProp<T>[] | undefined, ...args: T) {
   if (Array.isArray(handler)) {
     for (const h of handler) {
       h(...args)

From d6ac05060267b2201423c08c9546583ceb32d6c2 Mon Sep 17 00:00:00 2001
From: Blaine Landowski <42892508+blalan05@users.noreply.github.com>
Date: Tue, 21 Jan 2025 09:16:06 -0600
Subject: [PATCH 076/127] fix(VTimePicker): emit when changing hour (#20179)

---
 packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
index 3f561279d8d..9e429f6e1ad 100644
--- a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
+++ b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
@@ -264,8 +264,7 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
           break
       }
 
-      const emitChange = selecting.value === (props.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute)
-
+      const emitChange = inputHour.value !== null && inputMinute.value !== null && (props.useSeconds ? inputSecond.value !== null : true)
       if (selecting.value === SelectingTimes.Hour) {
         selecting.value = SelectingTimes.Minute
       } else if (props.useSeconds && selecting.value === SelectingTimes.Minute) {

From ca38ce33f22d2f00d2337f719d74b45a4d8b56e4 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 22 Jan 2025 16:06:57 +1100
Subject: [PATCH 077/127] feat(nested): add trunk select strategy

closes #6759
---
 .../api-generator/src/locale/en/nested.json   |  2 +-
 .../nested/__tests__/selectStrategies.spec.ts | 61 ++++++++++++++++++-
 .../vuetify/src/composables/nested/nested.ts  |  3 +
 .../composables/nested/selectStrategies.ts    | 26 ++++++++
 4 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/packages/api-generator/src/locale/en/nested.json b/packages/api-generator/src/locale/en/nested.json
index 0ec2a7aa424..e2f7735ea24 100644
--- a/packages/api-generator/src/locale/en/nested.json
+++ b/packages/api-generator/src/locale/en/nested.json
@@ -5,6 +5,6 @@
     "opened": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.",
     "openStrategy": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected.",
     "selected": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.",
-    "selectStrategy": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model."
+    "selectStrategy": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model."
   }
 }
diff --git a/packages/vuetify/src/composables/nested/__tests__/selectStrategies.spec.ts b/packages/vuetify/src/composables/nested/__tests__/selectStrategies.spec.ts
index 8328f6b95af..cdc2483a59a 100644
--- a/packages/vuetify/src/composables/nested/__tests__/selectStrategies.spec.ts
+++ b/packages/vuetify/src/composables/nested/__tests__/selectStrategies.spec.ts
@@ -1,7 +1,14 @@
 /* eslint-disable max-len */
 /* eslint-disable sonarjs/no-identical-functions */
 // Utilities
-import { classicSelectStrategy, independentSelectStrategy, independentSingleSelectStrategy, leafSelectStrategy, leafSingleSelectStrategy } from '../selectStrategies'
+import {
+  classicSelectStrategy,
+  independentSelectStrategy,
+  independentSingleSelectStrategy,
+  leafSelectStrategy,
+  leafSingleSelectStrategy,
+  trunkSelectStrategy,
+} from '../selectStrategies'
 
 describe('selectStrategies', () => {
   describe('independent', () => {
@@ -732,4 +739,56 @@ describe('selectStrategies', () => {
       ]))
     })
   })
+
+  describe('trunk', () => {
+    it('selects individual leaves', () => {
+      const strategy = trunkSelectStrategy(false)
+
+      const value = new Map([
+        ['1', 'indeterminate'],
+        ['2', 'on'],
+        ['3', 'indeterminate'],
+        ['4', 'on'],
+      ] as const)
+
+      const children = new Map([
+        ['1', ['2', '3']],
+        ['3', ['4', '5']],
+      ])
+
+      const parents = new Map([
+        ['2', '1'],
+        ['3', '1'],
+        ['4', '3'],
+        ['5', '3'],
+      ])
+
+      expect(strategy.out(value, children, parents)).toEqual(['2', '4'])
+    })
+
+    it('selects a parent node', () => {
+      const strategy = trunkSelectStrategy(false)
+
+      const value = new Map([
+        ['1', 'indeterminate'],
+        ['3', 'on'],
+        ['4', 'on'],
+        ['5', 'on'],
+      ] as const)
+
+      const children = new Map([
+        ['1', ['2', '3']],
+        ['3', ['4', '5']],
+      ])
+
+      const parents = new Map([
+        ['2', '1'],
+        ['3', '1'],
+        ['4', '3'],
+        ['5', '3'],
+      ])
+
+      expect(strategy.out(value, children, parents)).toEqual(['3'])
+    })
+  })
 })
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
index fe217076b83..ccade1cc8bd 100644
--- a/packages/vuetify/src/composables/nested/nested.ts
+++ b/packages/vuetify/src/composables/nested/nested.ts
@@ -26,6 +26,7 @@ import {
   independentSingleSelectStrategy,
   leafSelectStrategy,
   leafSingleSelectStrategy,
+  trunkSelectStrategy,
 } from './selectStrategies'
 import { consoleError, getCurrentInstance, propsFactory } from '@/util'
 
@@ -49,6 +50,7 @@ export type SelectStrategyProp =
   | 'independent'
   | 'single-independent'
   | 'classic'
+  | 'trunk'
   | SelectStrategy
   | ((mandatory: boolean) => SelectStrategy)
 export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
@@ -154,6 +156,7 @@ export const useNested = (props: NestedProps) => {
       case 'leaf': return leafSelectStrategy(props.mandatory)
       case 'independent': return independentSelectStrategy(props.mandatory)
       case 'single-independent': return independentSingleSelectStrategy(props.mandatory)
+      case 'trunk': return trunkSelectStrategy(props.mandatory)
       case 'classic':
       default: return classicSelectStrategy(props.mandatory)
     }
diff --git a/packages/vuetify/src/composables/nested/selectStrategies.ts b/packages/vuetify/src/composables/nested/selectStrategies.ts
index 42eade6c6ae..438cadde386 100644
--- a/packages/vuetify/src/composables/nested/selectStrategies.ts
+++ b/packages/vuetify/src/composables/nested/selectStrategies.ts
@@ -209,3 +209,29 @@ export const classicSelectStrategy = (mandatory?: boolean): SelectStrategy => {
 
   return strategy
 }
+
+export const trunkSelectStrategy = (mandatory?: boolean): SelectStrategy => {
+  const parentStrategy = classicSelectStrategy(mandatory)
+
+  const strategy: SelectStrategy = {
+    select: parentStrategy.select,
+    in: parentStrategy.in,
+    out: (v, children, parents) => {
+      const arr = []
+
+      for (const [key, value] of v.entries()) {
+        if (value === 'on') {
+          if (parents.has(key)) {
+            const parent = parents.get(key)
+            if (v.get(parent) === 'on') continue
+          }
+          arr.push(key)
+        }
+      }
+
+      return arr
+    },
+  }
+
+  return strategy
+}

From 5d9db2cc957a7d1d0efec9513cd9639b7089d9e4 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 22 Jan 2025 16:40:03 +1100
Subject: [PATCH 078/127] feat(framework): add unmount function

closes #20429
---
 packages/vuetify/src/composables/display.ts |   6 +-
 packages/vuetify/src/framework.ts           | 156 +++++++++++---------
 2 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
index 98e1416ea27..36646fdbdb9 100644
--- a/packages/vuetify/src/composables/display.ts
+++ b/packages/vuetify/src/composables/display.ts
@@ -1,5 +1,5 @@
 // Utilities
-import { computed, inject, reactive, shallowRef, toRefs, watchEffect } from 'vue'
+import { computed, inject, onScopeDispose, reactive, shallowRef, toRefs, watchEffect } from 'vue'
 import { getCurrentInstanceName, mergeDeep, propsFactory } from '@/util'
 import { IN_BROWSER, SUPPORTS_TOUCH } from '@/util/globals'
 
@@ -209,6 +209,10 @@ export function createDisplay (options?: DisplayOptions, ssr?: SSROptions): Disp
 
   if (IN_BROWSER) {
     window.addEventListener('resize', updateSize, { passive: true })
+
+    onScopeDispose(() => {
+      window.removeEventListener('resize', updateSize)
+    }, true)
   }
 
   return { ...toRefs(state), update, ssr: !!ssr }
diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
index 9fc40d54cb7..e6aa93401d1 100644
--- a/packages/vuetify/src/framework.ts
+++ b/packages/vuetify/src/framework.ts
@@ -8,7 +8,7 @@ import { createLocale, LocaleSymbol } from '@/composables/locale'
 import { createTheme, ThemeSymbol } from '@/composables/theme'
 
 // Utilities
-import { nextTick, reactive } from 'vue'
+import { effectScope, getCurrentScope, nextTick, reactive } from 'vue'
 import { defineComponent, IN_BROWSER, mergeDeep } from '@/util'
 
 // Types
@@ -49,86 +49,98 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
     directives = {},
   } = options
 
-  const defaults = createDefaults(options.defaults)
-  const display = createDisplay(options.display, options.ssr)
-  const theme = createTheme(options.theme)
-  const icons = createIcons(options.icons)
-  const locale = createLocale(options.locale)
-  const date = createDate(options.date, locale)
-  const goTo = createGoTo(options.goTo, locale)
-
-  const install = (app: App) => {
-    for (const key in directives) {
-      app.directive(key, directives[key])
-    }
+  const scope = effectScope()
+  return scope.run(() => {
+    const defaults = createDefaults(options.defaults)
+    const display = createDisplay(options.display, options.ssr)
+    const theme = createTheme(options.theme)
+    const icons = createIcons(options.icons)
+    const locale = createLocale(options.locale)
+    const date = createDate(options.date, locale)
+    const goTo = createGoTo(options.goTo, locale)
+
+    function install (app: App) {
+      for (const key in directives) {
+        app.directive(key, directives[key])
+      }
 
-    for (const key in components) {
-      app.component(key, components[key])
-    }
+      for (const key in components) {
+        app.component(key, components[key])
+      }
 
-    for (const key in aliases) {
-      app.component(key, defineComponent({
-        ...aliases[key],
-        name: key,
-        aliasName: aliases[key].name,
-      }))
-    }
+      for (const key in aliases) {
+        app.component(key, defineComponent({
+          ...aliases[key],
+          name: key,
+          aliasName: aliases[key].name,
+        }))
+      }
 
-    theme.install(app)
-
-    app.provide(DefaultsSymbol, defaults)
-    app.provide(DisplaySymbol, display)
-    app.provide(ThemeSymbol, theme)
-    app.provide(IconSymbol, icons)
-    app.provide(LocaleSymbol, locale)
-    app.provide(DateOptionsSymbol, date.options)
-    app.provide(DateAdapterSymbol, date.instance)
-    app.provide(GoToSymbol, goTo)
-
-    if (IN_BROWSER && options.ssr) {
-      if (app.$nuxt) {
-        app.$nuxt.hook('app:suspense:resolve', () => {
-          display.update()
-        })
-      } else {
-        const { mount } = app
-        app.mount = (...args) => {
-          const vm = mount(...args)
-          nextTick(() => display.update())
-          app.mount = mount
-          return vm
+      const appScope = effectScope()
+      appScope.run(() => {
+        theme.install(app)
+      })
+      app.onUnmount(() => appScope.stop())
+
+      app.provide(DefaultsSymbol, defaults)
+      app.provide(DisplaySymbol, display)
+      app.provide(ThemeSymbol, theme)
+      app.provide(IconSymbol, icons)
+      app.provide(LocaleSymbol, locale)
+      app.provide(DateOptionsSymbol, date.options)
+      app.provide(DateAdapterSymbol, date.instance)
+      app.provide(GoToSymbol, goTo)
+
+      if (IN_BROWSER && options.ssr) {
+        if (app.$nuxt) {
+          app.$nuxt.hook('app:suspense:resolve', () => {
+            display.update()
+          })
+        } else {
+          const { mount } = app
+          app.mount = (...args) => {
+            const vm = mount(...args)
+            nextTick(() => display.update())
+            app.mount = mount
+            return vm
+          }
         }
       }
-    }
 
-    if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
-      app.mixin({
-        computed: {
-          $vuetify () {
-            return reactive({
-              defaults: inject.call(this, DefaultsSymbol),
-              display: inject.call(this, DisplaySymbol),
-              theme: inject.call(this, ThemeSymbol),
-              icons: inject.call(this, IconSymbol),
-              locale: inject.call(this, LocaleSymbol),
-              date: inject.call(this, DateAdapterSymbol),
-            })
+      if (typeof __VUE_OPTIONS_API__ !== 'boolean' || __VUE_OPTIONS_API__) {
+        app.mixin({
+          computed: {
+            $vuetify () {
+              return reactive({
+                defaults: inject.call(this, DefaultsSymbol),
+                display: inject.call(this, DisplaySymbol),
+                theme: inject.call(this, ThemeSymbol),
+                icons: inject.call(this, IconSymbol),
+                locale: inject.call(this, LocaleSymbol),
+                date: inject.call(this, DateAdapterSymbol),
+              })
+            },
           },
-        },
-      })
+        })
+      }
     }
-  }
 
-  return {
-    install,
-    defaults,
-    display,
-    theme,
-    icons,
-    locale,
-    date,
-    goTo,
-  }
+    function unmount () {
+      scope.stop()
+    }
+
+    return {
+      install,
+      unmount,
+      defaults,
+      display,
+      theme,
+      icons,
+      locale,
+      date,
+      goTo,
+    }
+  })
 }
 
 export const version = __VUETIFY_VERSION__

From 9e5a3c88a9bb9175990a6268d04cebfb01508d88 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 22 Jan 2025 20:25:58 +1100
Subject: [PATCH 079/127] chore: remove unused import

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

diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
index e6aa93401d1..0585afc90fb 100644
--- a/packages/vuetify/src/framework.ts
+++ b/packages/vuetify/src/framework.ts
@@ -8,7 +8,7 @@ import { createLocale, LocaleSymbol } from '@/composables/locale'
 import { createTheme, ThemeSymbol } from '@/composables/theme'
 
 // Utilities
-import { effectScope, getCurrentScope, nextTick, reactive } from 'vue'
+import { effectScope, nextTick, reactive } from 'vue'
 import { defineComponent, IN_BROWSER, mergeDeep } from '@/util'
 
 // Types

From f54ca9a12f65f69b95c0b45accc7783a2b1c6d52 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 23 Jan 2025 07:10:15 +0100
Subject: [PATCH 080/127] fix(VList): ignore input element interactions
 (#20881)

fixes #20523
---
 packages/vuetify/src/components/VList/VListGroup.tsx | 1 +
 packages/vuetify/src/components/VList/VListItem.tsx  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx
index 2d94ce78e31..6e8e552bc9a 100644
--- a/packages/vuetify/src/components/VList/VListGroup.tsx
+++ b/packages/vuetify/src/components/VList/VListGroup.tsx
@@ -67,6 +67,7 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
 
     function onClick (e: Event) {
       e.stopPropagation()
+      if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
       open(!isOpen.value, e)
     }
 
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index cf68ff0665b..e71acc01150 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -184,6 +184,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
     function onClick (e: MouseEvent) {
       emit('click', e)
+      if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
 
       if (!isClickable.value) return
 
@@ -201,6 +202,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
     }
 
     function onKeyDown (e: KeyboardEvent) {
+      if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault()
         e.target!.dispatchEvent(new MouseEvent('click', e))

From 229a9e5bdf996c7252cb8d4912dc15d16af79b56 Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:58:04 +0700
Subject: [PATCH 081/127] docs(dates): fix usage example (#20907)

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

diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md
index 41e95852a3e..46db9186c0c 100644
--- a/packages/docs/src/pages/en/features/dates.md
+++ b/packages/docs/src/pages/en/features/dates.md
@@ -37,7 +37,7 @@ Within your application, import the **useDate** function and use it to access th
 
   const date = useDate()
 
-  console.log(date.getMonth(new Date('March 1, 2021'))) // 3
+  console.log(date.getMonth(new Date('March 1, 2021'))) // 2
 </script>
 ```
 

From 61810185c1e4fabfe17843bdcd9d4f796eda2585 Mon Sep 17 00:00:00 2001
From: PHorwat <phorwat@zolitron.com>
Date: Thu, 23 Jan 2025 07:07:31 +0100
Subject: [PATCH 082/127] docs(VRating): remove onClick from v-rating item slot
 props (#20901)

---
 packages/docs/src/examples/v-rating/slot-item.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/docs/src/examples/v-rating/slot-item.vue b/packages/docs/src/examples/v-rating/slot-item.vue
index 5f18e056170..7607eb9aa90 100644
--- a/packages/docs/src/examples/v-rating/slot-item.vue
+++ b/packages/docs/src/examples/v-rating/slot-item.vue
@@ -5,7 +5,6 @@
         <v-icon
           :color="props.isFilled ? colors[props.index] : 'grey-lighten-1'"
           size="large"
-          @click="props.onClick"
         >
           {{ props.isFilled ? 'mdi-star-circle' : 'mdi-star-circle-outline' }}
         </v-icon>

From 2795792f8fee7ae785d9f40548f3e7cb05deb992 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 23 Jan 2025 20:37:08 +1100
Subject: [PATCH 083/127] fix(VDataTable): apply fixed-header when sticky prop
 is set

fixes #20903
---
 .../src/locale/en/VDataTableHeaders.json              |  3 ++-
 .../vuetify/src/components/VDataTable/VDataTable.tsx  |  1 +
 .../src/components/VDataTable/VDataTableHeaders.tsx   | 11 +++++++----
 .../src/components/VDataTable/VDataTableServer.tsx    |  2 +-
 .../src/components/VDataTable/VDataTableVirtual.tsx   |  2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json
index 1ee8ca567be..8abf879cf07 100644
--- a/packages/api-generator/src/locale/en/VDataTableHeaders.json
+++ b/packages/api-generator/src/locale/en/VDataTableHeaders.json
@@ -3,7 +3,8 @@
     "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."
+    "sticky": "Deprecated, use `fixed-header` instead.",
+    "fixedHeader": "Sticks the header to the top of the table."
   },
   "slots": {
     "[`column.${string}`]": "Slot for custom rendering of a column.",
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
index 7bc7b28a138..b7e3b5763ac 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -238,6 +238,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index 0702a348976..d985b97b43d 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -59,8 +59,8 @@ export type VDataTableHeadersSlots = {
 
 export const makeVDataTableHeadersProps = propsFactory({
   color: String,
-  sticky: Boolean,
   disableSort: Boolean,
+  fixedHeader: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -74,6 +74,9 @@ export const makeVDataTableHeadersProps = propsFactory({
     type: Object as PropType<Record<string, any>>,
   },
 
+  /** @deprecated */
+  sticky: Boolean,
+
   ...makeDisplayProps(),
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -91,12 +94,12 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const { loaderClasses } = useLoader(props)
 
     function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {
-      if (!props.sticky && !column.fixed) return undefined
+      if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined
 
       return {
         position: 'sticky',
         left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,
-        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,
+        top: (props.sticky || props.fixedHeader) ? `calc(var(--v-table-header-height) * ${y})` : undefined,
       }
     }
 
@@ -127,7 +130,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const headerCellClasses = computed(() => ([
       'v-data-table__th',
       {
-        'v-data-table__th--sticky': props.sticky,
+        'v-data-table__th--sticky': (props.sticky || props.fixedHeader),
       },
       displayClasses.value,
       loaderClasses.value,
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
index 13005194dc3..9774a021304 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -160,6 +160,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),
@@ -170,7 +171,6 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
                   <thead key="thead" class="v-data-table__thead" role="rowgroup">
                     <VDataTableHeaders
                       { ...dataTableHeadersProps }
-                      sticky={ props.fixedHeader }
                       v-slots={ slots }
                     />
                   </thead>
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index b2714f7b0d7..58b47b23731 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -189,6 +189,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),
@@ -208,7 +209,6 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                     <thead key="thead">
                       <VDataTableHeaders
                         { ...dataTableHeadersProps }
-                        sticky={ props.fixedHeader }
                         v-slots={ slots }
                       />
                     </thead>

From c1fd4f7610d74151892106ade0f7dc30c57ea46a Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 23 Jan 2025 21:04:15 +1100
Subject: [PATCH 084/127] fix(VSlider): update value before focusing thumb

fixes #20912
---
 packages/vuetify/src/components/VSlider/slider.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VSlider/slider.ts b/packages/vuetify/src/components/VSlider/slider.ts
index 56418e727a5..cc5133f1943 100644
--- a/packages/vuetify/src/components/VSlider/slider.ts
+++ b/packages/vuetify/src/components/VSlider/slider.ts
@@ -5,7 +5,7 @@ import { useRtl } from '@/composables/locale'
 import { makeRoundedProps } from '@/composables/rounded'
 
 // Utilities
-import { computed, provide, ref, shallowRef, toRef } from 'vue'
+import { computed, nextTick, provide, ref, shallowRef, toRef } from 'vue'
 import { clamp, createRange, getDecimals, propsFactory } from '@/util'
 
 // Types
@@ -237,7 +237,6 @@ export const useSlider = ({
 
     if (!activeThumbRef.value) return
 
-    activeThumbRef.value.focus()
     mousePressed.value = true
 
     if (activeThumbRef.value.contains(e.target as Node)) {
@@ -248,6 +247,7 @@ export const useSlider = ({
     }
 
     onSliderStart({ value: parseMouseMove(e) })
+    nextTick(() => activeThumbRef.value?.focus())
   }
 
   const moveListenerOptions = { passive: true, capture: true }

From 744e1e17f183b62a5883aa28fc4048e5e131fb42 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 23 Jan 2025 21:34:46 +0100
Subject: [PATCH 085/127] docs(VList): restore example for advanced action use
 (#20374)

Co-authored-by: jsek <im68889094144@outlook.com>
Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../src/examples/v-list/misc-action-stack.vue | 152 +++++-------------
 .../docs/src/pages/en/components/lists.md     |   6 +
 2 files changed, 42 insertions(+), 116 deletions(-)

diff --git a/packages/docs/src/examples/v-list/misc-action-stack.vue b/packages/docs/src/examples/v-list/misc-action-stack.vue
index e05be54071f..252c40e6c40 100644
--- a/packages/docs/src/examples/v-list/misc-action-stack.vue
+++ b/packages/docs/src/examples/v-list/misc-action-stack.vue
@@ -1,152 +1,72 @@
 <template>
-  <v-card
-    class="mx-auto"
-    max-width="500"
-  >
-    <v-toolbar
-      color="pink"
-      dark
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+  <v-card class="mx-auto" max-width="500">
+    <v-toolbar color="pink">
+      <v-btn icon="mdi-menu"></v-btn>
 
       <v-toolbar-title>Inbox</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-magnify"></v-btn>
 
-      <v-btn icon>
-        <v-icon>mdi-checkbox-marked-circle</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-checkbox-marked-circle"></v-btn>
     </v-toolbar>
 
-    <v-list lines="two">
-      <v-list-item-group
-        v-model="selected"
-        active-class="pink--text"
-        multiple
+    <v-list v-model:selected="selected" select-strategy="leaf">
+      <v-list-item
+        v-for="item in items"
+        :key="item.id"
+        :value="item.id"
+        active-class="text-pink"
+        class="py-3"
       >
-        <template v-for="(item, index) in items" :key="item.title">
-          <v-list-item>
-            <template v-slot:default="{ active }">
-              <v-list-item-header>
-                <v-list-item-title v-text="item.title"></v-list-item-title>
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
 
-                <v-list-item-subtitle
-                  class="text--primary"
-                  v-text="item.headline"
-                ></v-list-item-subtitle>
+        <v-list-item-subtitle class="mb-1 text-high-emphasis opacity-100">{{ item.headline }}</v-list-item-subtitle>
 
-                <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
-              </v-list-item-header>
+        <v-list-item-subtitle class="text-high-emphasis">{{ item.subtitle }}</v-list-item-subtitle>
 
-              <v-list-item-action>
-                <v-list-item-action-text v-text="item.action"></v-list-item-action-text>
+        <template v-slot:append="{ isSelected }">
+          <v-list-item-action class="flex-column align-end">
+            <small class="mb-4 text-high-emphasis opacity-60">{{ item.action }}</small>
 
-                <v-icon
-                  v-if="!active"
-                  color="grey-lighten-1"
-                >
-                  mdi-star-outline
-                </v-icon>
+            <v-spacer></v-spacer>
 
-                <v-icon
-                  v-else
-                  color="yellow-darken-3"
-                >
-                  mdi-star
-                </v-icon>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
+            <v-icon v-if="isSelected" color="yellow-darken-3">mdi-star</v-icon>
 
-          <v-divider
-            v-if="index < items.length - 1"
-            :key="index"
-          ></v-divider>
+            <v-icon v-else class="opacity-30">mdi-star-outline</v-icon>
+          </v-list-item-action>
         </template>
-      </v-list-item-group>
+      </v-list-item>
     </v-list>
   </v-card>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { shallowRef } from 'vue'
 
   const items = [
-    {
-      action: '15 min',
-      headline: 'Brunch this weekend?',
-      subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
-      title: 'Ali Connors',
-    },
-    {
-      action: '2 hr',
-      headline: 'Summer BBQ',
-      subtitle: `Wish I could come, but I'm out of town this weekend.`,
-      title: 'me, Scrott, Jennifer',
-    },
-    {
-      action: '6 hr',
-      headline: 'Oui oui',
-      subtitle: 'Do you have Paris recommendations? Have you ever been?',
-      title: 'Sandra Adams',
-    },
-    {
-      action: '12 hr',
-      headline: 'Birthday gift',
-      subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
-      title: 'Trevor Hansen',
-    },
-    {
-      action: '18hr',
-      headline: 'Recipe to try',
-      subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
-      title: 'Britta Holt',
-    },
+    { id: 1, action: '15 min', headline: 'Brunch this weekend?', subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`, title: 'Ali Connors' },
+    { id: 2, action: '2 hr', headline: 'Summer BBQ', subtitle: `Wish I could come, but I'm out of town this weekend.`, title: 'me, Scrott, Jennifer' },
+    { id: 3, action: '6 hr', headline: 'Oui oui', subtitle: 'Do you have Paris recommendations? Have you ever been?', title: 'Sandra Adams' },
+    { id: 4, action: '12 hr', headline: 'Birthday gift', subtitle: 'Have any ideas about what we should get Heidi for her birthday?', title: 'Trevor Hansen' },
+    { id: 5, action: '18hr', headline: 'Recipe to try', subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.', title: 'Britta Holt' },
   ]
 
-  const selected = ref([2])
+  const selected = shallowRef([2])
 </script>
 
 <script>
   export default {
     data: () => ({
-      selected: [2],
       items: [
-        {
-          action: '15 min',
-          headline: 'Brunch this weekend?',
-          subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
-          title: 'Ali Connors',
-        },
-        {
-          action: '2 hr',
-          headline: 'Summer BBQ',
-          subtitle: `Wish I could come, but I'm out of town this weekend.`,
-          title: 'me, Scrott, Jennifer',
-        },
-        {
-          action: '6 hr',
-          headline: 'Oui oui',
-          subtitle: 'Do you have Paris recommendations? Have you ever been?',
-          title: 'Sandra Adams',
-        },
-        {
-          action: '12 hr',
-          headline: 'Birthday gift',
-          subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
-          title: 'Trevor Hansen',
-        },
-        {
-          action: '18hr',
-          headline: 'Recipe to try',
-          subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
-          title: 'Britta Holt',
-        },
+        { id: 1, action: '15 min', headline: 'Brunch this weekend?', subtitle: `I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`, title: 'Ali Connors' },
+        { id: 2, action: '2 hr', headline: 'Summer BBQ', subtitle: `Wish I could come, but I'm out of town this weekend.`, title: 'me, Scrott, Jennifer' },
+        { id: 3, action: '6 hr', headline: 'Oui oui', subtitle: 'Do you have Paris recommendations? Have you ever been?', title: 'Sandra Adams' },
+        { id: 4, action: '12 hr', headline: 'Birthday gift', subtitle: 'Have any ideas about what we should get Heidi for her birthday?', title: 'Trevor Hansen' },
+        { id: 5, action: '18hr', headline: 'Recipe to try', subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.', title: 'Britta Holt' },
       ],
+      selected: [2],
     }),
   }
 </script>
diff --git a/packages/docs/src/pages/en/components/lists.md b/packages/docs/src/pages/en/components/lists.md
index 900c72b3b19..7cbceffe0e3 100644
--- a/packages/docs/src/pages/en/components/lists.md
+++ b/packages/docs/src/pages/en/components/lists.md
@@ -133,3 +133,9 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 A **three-line** list with actions. Utilizing **select-strategy**, easily connect actions to your tiles.
 
 <ExamplesExample file="v-list/misc-actions" />
+
+#### Action with text
+
+A list can contain additional meta information within an action.
+
+<ExamplesExample file="v-list/misc-action-stack" />

From 910935ede5ab91c482420f04d0f1ffad388977ab Mon Sep 17 00:00:00 2001
From: FUKUDA Kazuyuki <10156602+kzfk@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:24:52 +0900
Subject: [PATCH 086/127] fix(VImg): set crossOrigin attribute before src
 (#20915)

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

diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx
index 8ee7e43e307..7309f606597 100644
--- a/packages/vuetify/src/components/VImg/VImg.tsx
+++ b/packages/vuetify/src/components/VImg/VImg.tsx
@@ -256,10 +256,10 @@ export const VImg = genericComponent<VImgSlots>()({
         <img
           class={['v-img__img', containClasses.value]}
           style={{ objectPosition: props.position }}
+          crossorigin={ props.crossorigin }
           src={ normalisedSrc.value.src }
           srcset={ normalisedSrc.value.srcset }
           alt={ props.alt }
-          crossorigin={ props.crossorigin }
           referrerpolicy={ props.referrerpolicy }
           draggable={ props.draggable }
           sizes={ props.sizes }
@@ -291,9 +291,9 @@ export const VImg = genericComponent<VImgSlots>()({
           <img
             class={['v-img__img', 'v-img__img--preload', containClasses.value]}
             style={{ objectPosition: props.position }}
+            crossorigin={ props.crossorigin }
             src={ normalisedSrc.value.lazySrc }
             alt={ props.alt }
-            crossorigin={ props.crossorigin }
             referrerpolicy={ props.referrerpolicy }
             draggable={ props.draggable }
           />

From 02302590c8ec4feb4ae14ac36e8c756fac879f2b Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Fri, 24 Jan 2025 13:11:18 +0700
Subject: [PATCH 087/127] fix(VStepperVertical): correct slots types (#20537)

fixes #20213
fixes #20803

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../src/components/VStepper/VStepperItem.tsx  | 14 +++----
 .../VStepperVertical/VStepperVertical.tsx     | 40 ++++++++++---------
 .../VStepperVertical/VStepperVerticalItem.tsx | 31 +++++++-------
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 686993a1885..8f9e8bd1d75 100644
--- a/packages/vuetify/src/components/VStepper/VStepperItem.tsx
+++ b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -24,20 +24,20 @@ import type { RippleDirectiveBinding } from '@/directives/ripple'
 
 export type StepperItem = string | Record<string, any>
 
-export type StepperItemSlot = {
+export type StepperItemSlot<T = any> = {
   canEdit: boolean
   hasError: boolean
   hasCompleted: boolean
   title?: string | number
   subtitle?: string | number
-  step: any
+  step: T
 }
 
-export type VStepperItemSlots = {
-  default: StepperItemSlot
-  icon: StepperItemSlot
-  title: StepperItemSlot
-  subtitle: StepperItemSlot
+export type VStepperItemSlots<T = any> = {
+  default: StepperItemSlot<T>
+  icon: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
 }
 
 export type ValidationRule = () => string | boolean
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
index ba3ee62ef8a..87199cdca4a 100644
--- a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -12,21 +12,22 @@ import { computed, ref, toRefs } from 'vue'
 import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
+import type { StepperVerticalItemActionSlot } from './VStepperVerticalItem'
 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
+import type { StepperItemSlot } from '@/components/VStepper/VStepperItem'
+import type { GenericProps } from '@/util'
+
+export type VStepperVerticalSlots<T> = {
+  actions: StepperVerticalItemActionSlot<T>
+  default: VStepperSlot & { step: T }
+  icon: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
+  prev: StepperVerticalItemActionSlot<T>
+  next: StepperVerticalItemActionSlot<T>
 } & {
-  [key: `header-item.${string}`]: StepperItemSlot
-  [key: `item.${string}`]: StepperItem
+  [key: `header-item.${string}`]: StepperItemSlot<T>
+  [key: `item.${string}`]: StepperItemSlot<T>
 }
 
 export const makeVStepperVerticalProps = propsFactory({
@@ -46,7 +47,13 @@ export const makeVStepperVerticalProps = propsFactory({
   }), ['static']),
 }, 'VStepperVertical')
 
-export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
+export const VStepperVertical = genericComponent<new <T = number>(
+  props: {
+    modelValue?: T
+    'onUpdate:modelValue'?: (value: T) => void
+  },
+  slots: VStepperVerticalSlots<T>,
+) => GenericProps<typeof props, typeof slots>>()({
   name: 'VStepperVertical',
 
   props: makeVStepperVerticalProps(),
@@ -108,10 +115,7 @@ export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
         >
           {{
             ...slots,
-            default: ({
-              prev,
-              next,
-            }) => {
+            default: ({ prev, next }) => {
               return (
                 <>
                   { items.value.map(({ raw, ...item }) => (
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
index e2d719e06da..3499cc07372 100644
--- a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -16,18 +16,20 @@ 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 type StepperVerticalItemActionSlot<T = any> = StepperItemSlot<T> & {
+  next: () => void
+  prev: () => void
+}
+
+export type VStepperVerticalItemSlots<T = any> = {
+  default: StepperItemSlot<T>
+  icon: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  text: StepperItemSlot<T>
+  prev: StepperVerticalItemActionSlot<T>
+  next: StepperVerticalItemActionSlot<T>
+  actions: StepperVerticalItemActionSlot<T>
 }
 
 export const makeVStepperVerticalItemProps = propsFactory({
@@ -82,14 +84,13 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
       title: props.title,
       subtitle: props.subtitle,
       step: step.value,
-      value: props.value,
-    }))
+    } satisfies StepperItemSlot))
 
     const actionProps = computed(() => ({
       ...slotProps.value,
       prev: onClickPrev,
       next: onClickNext,
-    }))
+    } satisfies StepperVerticalItemActionSlot))
 
     function onClickNext () {
       emit('click:next')

From 556b480fd0d44b9fd073500ce41e454684cc7250 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 24 Jan 2025 17:11:39 +1100
Subject: [PATCH 088/127] chore(ci): update ucacher ignored env variables

---
 .ucacherignore     |  1 +
 .ucacherignore.env | 54 ++++++++++++++++++++++++++++++----------------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/.ucacherignore b/.ucacherignore
index 3ef0968d50c..3976e7278a6 100644
--- a/.ucacherignore
+++ b/.ucacherignore
@@ -2,3 +2,4 @@
 node_modules/**/*
 /tmp/**/*
 .github/workflows/**/*
+package.json
diff --git a/.ucacherignore.env b/.ucacherignore.env
index 6ce5d51a672..f465359016f 100644
--- a/.ucacherignore.env
+++ b/.ucacherignore.env
@@ -1,35 +1,51 @@
-GITHUB_TOKEN
 ACTIONS_RUNTIME_TOKEN
-GITHUB_PATH
-GITHUB_OUTPUT
-GITHUB_STATE
-GITHUB_ENV
 GITHUB_ACTION
-GITHUB_STEP_SUMMARY
+GITHUB_ACTION_PATH
+GITHUB_ACTION_REF
+GITHUB_ACTOR
+GITHUB_ACTOR_ID
+GITHUB_API_URL
+GITHUB_BASE_REF
+GITHUB_ENV
+GITHUB_EVENT_NAME
+GITHUB_EVENT_PATH
+GITHUB_GRAPHQL_URL
+GITHUB_HEAD_REF
+GITHUB_JOB
+GITHUB_OUTPUT
+GITHUB_PATH
+GITHUB_REF
+GITHUB_REF_NAME
+GITHUB_REF_PROTECTED
+GITHUB_REF_TYPE
+GITHUB_RETENTION_DAYS
 GITHUB_RUN_ATTEMPT
-GITHUB_RUN_NUMBER
 GITHUB_RUN_ID
+GITHUB_RUN_NUMBER
+GITHUB_SERVER_URL
+GITHUB_SHA
+GITHUB_STATE
 GITHUB_STEP_SUMMARY
+GITHUB_TOKEN
 GITHUB_TRIGGERING_ACTOR
-GITHUB_ACTOR_ID
-GITHUB_ACTOR
-GITHUB_REF_TYPE
-GITHUB_SHA
+GITHUB_WORKFLOW
 GITHUB_WORKFLOW_REF
 GITHUB_WORKFLOW_SHA
-GITHUB_EVENT_NAME
-GITHUB_HEAD_REF
-GITHUB_ACTION_REF
+GITHUB_WORKSPACE
+HOSTNAME
 INVOCATION_ID
 JOURNAL_STREAM
-SYSTEMD_EXEC_PID
+LOG_LEVEL
+LS_COLORS
+RUNNER_DEBUG
+RUNNER_ENVIRONMENT
 RUNNER_NAME
+RUNNER_TEMP
+RUNNER_TOOL_CACHE
 RUNNER_TRACKING_ID
-LS_COLORS
-XDG_SESSION_ID
 SSH_CLIENT
 SSH_CONNECTION
 STATS_BLT
-HOSTNAME
 STATS_EXTP
-LOG_LEVEL
+SYSTEMD_EXEC_PID
+XDG_SESSION_ID

From 94404861b118f1d9a94d27fbea47f4faafa8bff0 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 24 Jan 2025 17:31:22 +1100
Subject: [PATCH 089/127] docs: update LTS page

---
 packages/docs/src/pages/en/introduction/long-term-support.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/pages/en/introduction/long-term-support.md b/packages/docs/src/pages/en/introduction/long-term-support.md
index 3c24fcdcc0c..2b39e79cad8 100644
--- a/packages/docs/src/pages/en/introduction/long-term-support.md
+++ b/packages/docs/src/pages/en/introduction/long-term-support.md
@@ -17,12 +17,12 @@ Vuetify provides long-term support to the last major release for 18 months for c
 
 <VoPromotionsCardVuetify />
 
-We understand that many projects that utilize Vuetify have development cycles that prevent upgrading to the latest version. In order to provide developers and businesses peace of mind when adopting Vuetify, we commit to at minimum of **18 months** for critical bugs and security vulnerabilities for the latest _minor_ of the last _major_ release.
+We understand that many projects that utilize Vuetify have development cycles that prevent upgrading to the latest version. In order to provide developers and businesses peace of mind when adopting Vuetify, we commit to at minimum of **6 months** for critical bugs and security vulnerabilities for the latest _minor_ of the last _major_ release.
 
 | Version | Status | Initial Release Date | LTS Start Date | LTS End Date |
 | - | - | - | - | - |
 | [Vuetify 3.x](https://vuetifyjs.com/) | 🚀 Active Development | November 1st, 2022 | N/A | N/A |
-| [Vuetify 2.7](https://v2.vuetifyjs.com/) | 🛠️ Maintenance | July 23rd, 2019 | July 5th, 2023 | January 23rd, 2025 |
+| [Vuetify 2.7](https://v2.vuetifyjs.com/) | 🛠️ Archived | July 23rd, 2019 | July 5th, 2023 | January 23rd, 2025 |
 | [Vuetify 1.5](https://v15.vuetifyjs.com/) | 📦 Archived | February 5th, 2019 | July 31st, 2019 | July 31st, 2020 |
 
 Have questions? Reach out to us in our [Discord community](https://community.vuetifyjs.com).

From fb5fc01e18de357a58ca4e13405fe6bd21f69c6b Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 24 Jan 2025 17:34:39 +1100
Subject: [PATCH 090/127] docs: update roadmap

---
 .../docs/src/pages/en/introduction/roadmap.md | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/docs/src/pages/en/introduction/roadmap.md b/packages/docs/src/pages/en/introduction/roadmap.md
index b31aca97df4..e04d2c71967 100644
--- a/packages/docs/src/pages/en/introduction/roadmap.md
+++ b/packages/docs/src/pages/en/introduction/roadmap.md
@@ -22,24 +22,24 @@ Vuetify is always under development. We are constantly working towards improving
 
 The following is a list of all planned components for the year 2024.
 
-| Component                                                               | Entering Labs  | Production Release                  |
-|-------------------------------------------------------------------------|----------------|-------------------------------------|
-| [v3.8 (Andromeda)](https://github.com/vuetifyjs/vuetify/milestone/74)   |                | Q4 2024 { .bg-surface-light }  |
-| [v-number-input](/components/number-inputs/)                            | *              |                                     |
-| [v-snackbar-queue](/components/snackbar-queue/)                         | *              |                                     |
-| [v-time-picker](/components/time-pickers/)                              | *              |                                     |
-| [v-treeview](/components/treeview/)                                     | *              |                                     |
-| [v-stepper-vertical](/components/vertical-steppers/)                    | *              |                                     |
-| [v4.0 (Revisionist)](https://github.com/vuetifyjs/vuetify/milestone/62) |                | TBA { .bg-surface-light } |
-| [v-date-input](/components/date-inputs/)                                | *              |                                     |
-| [v-calendar](/components/calendars/)                                    | *              |                                     |
-| [v-time-input](https://github.com/vuetifyjs/vuetify/pull/19709)         | September 2024 |                                     |
-| Future - v4.1+                                                          |                | TBD { .bg-surface-light }           |
-| [v-file-upload](https://github.com/vuetifyjs/vuetify/pull/19667)        | September 2024 |                                     |
-| v-date-time-picker                                                      | Q1 2025        |                                     |
-| v-date-range-picker                                                     | Q1 2025        |                                     |
-| v-video                                                                 | TBD            |                                     |
-| v-feature-discovery                                                     | TBD            |                                     |
+| Component                                                               | Entering Labs | Production Release            |
+|-------------------------------------------------------------------------|---------------|-------------------------------|
+| [v3.8 (Andromeda)](https://github.com/vuetifyjs/vuetify/milestone/74)   |               | Q1 2025 { .bg-surface-light } |
+| [v-number-input](/components/number-inputs/)                            | *             |                               |
+| [v-snackbar-queue](/components/snackbar-queue/)                         | *             |                               |
+| [v-time-picker](/components/time-pickers/)                              | *             |                               |
+| [v-treeview](/components/treeview/)                                     | *             |                               |
+| [v-stepper-vertical](/components/vertical-steppers/)                    | *             |                               |
+| [v4.0 (Revisionist)](https://github.com/vuetifyjs/vuetify/milestone/62) |               | 2025 { .bg-surface-light }    |
+| [v-date-input](/components/date-inputs/)                                | *             |                               |
+| [v-calendar](/components/calendars/)                                    | *             |                               |
+| [v-time-input](https://github.com/vuetifyjs/vuetify/pull/19709)         | Q1 2025       |                               |
+| Future - v4.1+                                                          |               | TBD { .bg-surface-light }     |
+| [v-file-upload](https://github.com/vuetifyjs/vuetify/pull/19667)        | *             |                               |
+| v-date-time-picker                                                      | Q1 2025       |                               |
+| v-date-range-picker                                                     | Q1 2025       |                               |
+| v-video                                                                 | TBD           |                               |
+| v-feature-discovery                                                     | TBD           |                               |
 
 \* Already in Labs { .text-caption }
 

From 2f2eb79f9cf3889b73257cb1aa5d386020776dee Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 24 Jan 2025 20:00:10 +1100
Subject: [PATCH 091/127] chore(ci): ucacher ignore VITE_GITHUB_SHA

---
 .ucacherignore.env | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.ucacherignore.env b/.ucacherignore.env
index f465359016f..27ecbced8f0 100644
--- a/.ucacherignore.env
+++ b/.ucacherignore.env
@@ -48,4 +48,5 @@ SSH_CONNECTION
 STATS_BLT
 STATS_EXTP
 SYSTEMD_EXEC_PID
+VITE_GITHUB_SHA
 XDG_SESSION_ID

From 301576b58627a1133e0be18334d7ef72dcd05910 Mon Sep 17 00:00:00 2001
From: Manoah Tervoort <46671786+mtdvlpr@users.noreply.github.com>
Date: Fri, 24 Jan 2025 18:14:02 +0100
Subject: [PATCH 092/127] fix(VBreadcrumbsDivider): add aria-hidden attribute
 (#20893)

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

diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx
index 3673449f042..c7a224d89dc 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx
@@ -18,6 +18,7 @@ export const VBreadcrumbsDivider = genericComponent()({
   setup (props, { slots }) {
     useRender(() => (
       <li
+        aria-hidden="true"
         class={[
           'v-breadcrumbs-divider',
           props.class,

From 3ef363a3a61e6bc7f3872e73cbcc2999111456ab Mon Sep 17 00:00:00 2001
From: SonTT19 <49301480+SonTT19@users.noreply.github.com>
Date: Sat, 25 Jan 2025 03:07:48 +0700
Subject: [PATCH 093/127] fix(VField): hide label with single-line (#20773)

fixes #20751
---
 packages/vuetify/src/components/VField/VField.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 4288e46d4b0..068e54ad39c 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -137,7 +137,8 @@ export const VField = genericComponent<new <T>(
     const { rtlClasses } = useRtl()
 
     const isActive = computed(() => props.dirty || props.active)
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
+    const hasLabel = computed(() => !!(props.label || slots.label))
+    const hasFloatingLabel = computed(() => !props.singleLine && hasLabel.value)
 
     const uid = getUid()
     const id = computed(() => props.id || `input-${uid}`)
@@ -156,7 +157,7 @@ export const VField = genericComponent<new <T>(
     }))
 
     watch(isActive, val => {
-      if (hasLabel.value) {
+      if (hasFloatingLabel.value) {
         const el: HTMLElement = labelRef.value!.$el
         const targetEl: HTMLElement = floatingLabelRef.value!.$el
 
@@ -284,7 +285,7 @@ export const VField = genericComponent<new <T>(
           )}
 
           <div class="v-field__field" data-no-activator="">
-            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && (
+            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && (
               <VFieldLabel
                 key="floating-label"
                 ref={ floatingLabelRef }
@@ -377,7 +378,7 @@ export const VField = genericComponent<new <T>(
               <>
                 <div class="v-field__outline__start" />
 
-                { hasLabel.value && (
+                { hasFloatingLabel.value && (
                   <div class="v-field__outline__notch">
                     <VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
                       { label() }
@@ -389,7 +390,7 @@ export const VField = genericComponent<new <T>(
               </>
             )}
 
-            { isPlainOrUnderlined.value && hasLabel.value && (
+            { isPlainOrUnderlined.value && hasFloatingLabel.value && (
               <VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
                 { label() }
               </VFieldLabel>

From 0fe248ae57d843d2a8bdf5ca80993bc3d1a90606 Mon Sep 17 00:00:00 2001
From: viktorkratz <viktorkratz@googlemail.com>
Date: Fri, 24 Jan 2025 21:12:59 +0100
Subject: [PATCH 094/127] fix(VMenu): replace aria-owns with aria-controls
 (#20596)

Co-authored-by: Viktor Kratz <viktorkratz@gmail.com>
---
 packages/vuetify/src/components/VMenu/VMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
index 6997992fc43..4bbfce02cc7 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.tsx
+++ b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -211,7 +211,7 @@ export const VMenu = genericComponent<OverlaySlots>()({
       mergeProps({
         'aria-haspopup': 'menu',
         'aria-expanded': String(isActive.value),
-        'aria-owns': id.value,
+        'aria-controls': id.value,
         onKeydown: onActivatorKeydown,
       }, props.activatorProps)
     )

From db9fb77c1ca47c62aa0171ed966c64960d3b1019 Mon Sep 17 00:00:00 2001
From: Ameer Hamza Riaz <ameerhamza.rz@gmail.com>
Date: Sat, 25 Jan 2025 00:17:28 +0400
Subject: [PATCH 095/127] fix(VDataTable): rtl mobile alignment (#20553)

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

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
index 8789632346d..7f9b6d87b98 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTable.sass
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -153,10 +153,10 @@
 
   .v-data-table__td-title
     font-weight: VTable.$table-header-font-weight
-    text-align: left
+    text-align: start
 
   .v-data-table__td-value
-    text-align: right
+    text-align: end
 
   .v-data-table__td
     &-sort-icon

From bcce04262f03c1554d1238442dd2a3cca453e7e4 Mon Sep 17 00:00:00 2001
From: sgpinkus <sgpinkus@gmail.com>
Date: Sat, 25 Jan 2025 06:52:55 +1000
Subject: [PATCH 096/127] fix(router): check $router.beforeEach exists before
 using (#20549)

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
---
 packages/vuetify/src/composables/router.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/composables/router.tsx b/packages/vuetify/src/composables/router.tsx
index c3e086f126b..61e52495f6a 100644
--- a/packages/vuetify/src/composables/router.tsx
+++ b/packages/vuetify/src/composables/router.tsx
@@ -113,10 +113,10 @@ export function useBackButton (router: Router | undefined, cb: (next: Navigation
   let removeBefore: (() => void) | undefined
   let removeAfter: (() => void) | undefined
 
-  if (IN_BROWSER) {
+  if (IN_BROWSER && router?.beforeEach) {
     nextTick(() => {
       window.addEventListener('popstate', onPopstate)
-      removeBefore = router?.beforeEach((to, from, next) => {
+      removeBefore = router.beforeEach((to, from, next) => {
         if (!inTransition) {
           setTimeout(() => popped ? cb(next) : next())
         } else {

From ba143c1f95193766360656297c7aa7ea9190b393 Mon Sep 17 00:00:00 2001
From: vikash8813 <121934178+vikash8813@users.noreply.github.com>
Date: Sat, 25 Jan 2025 03:08:57 +0530
Subject: [PATCH 097/127] fix(VSelect): remove multiple check for keyboard
 lookup (#20475)

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

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index ad18b3bbf1f..88392f8d60b 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -238,7 +238,7 @@ export const VSelect = genericComponent<new <
       // html select hotkeys
       const KEYBOARD_LOOKUP_THRESHOLD = 1000 // milliseconds
 
-      if (props.multiple || !checkPrintable(e)) return
+      if (!checkPrintable(e)) return
 
       const now = performance.now()
       if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {

From 57047f60227c415ec47c2947202ead71c289449b Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Fri, 24 Jan 2025 23:10:31 +0100
Subject: [PATCH 098/127] fix(VDataTable): emit current items immediately
 (#20449)

fixes #20440
---
 .../vuetify/src/components/VDataTable/composables/paginate.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDataTable/composables/paginate.ts b/packages/vuetify/src/components/VDataTable/composables/paginate.ts
index 1cf90f3d9f2..7d5538382db 100644
--- a/packages/vuetify/src/components/VDataTable/composables/paginate.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/paginate.ts
@@ -129,7 +129,7 @@ export function usePaginatedItems <T> (options: {
 
   watch(paginatedItems, val => {
     vm.emit('update:currentItems', val)
-  })
+  }, { immediate: true })
 
   return { paginatedItems }
 }

From d1ed47c257de94373dd1e9e6961bd20d960f77e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Th=C3=A9baud?= <paul.thebaud29@gmail.com>
Date: Fri, 24 Jan 2025 23:16:22 +0100
Subject: [PATCH 099/127] fix(VInput/VMessages): move aria attributes to
 details (#20420)

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

diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
index 4234aeb0aad..9aebad42f27 100644
--- a/packages/vuetify/src/components/VInput/VInput.tsx
+++ b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -209,9 +209,13 @@ export const VInput = genericComponent<new <T>(
           )}
 
           { hasDetails && (
-            <div class="v-input__details">
+            <div
+              id={ messagesId.value }
+              class="v-input__details"
+              role="alert"
+              aria-live="polite"
+            >
               <VMessages
-                id={ messagesId.value }
                 active={ hasMessages }
                 messages={ messages.value }
                 v-slots={{ message: slots.message }}
diff --git a/packages/vuetify/src/components/VMessages/VMessages.tsx b/packages/vuetify/src/components/VMessages/VMessages.tsx
index 0d062f52ffd..f49449843a7 100644
--- a/packages/vuetify/src/components/VMessages/VMessages.tsx
+++ b/packages/vuetify/src/components/VMessages/VMessages.tsx
@@ -64,8 +64,6 @@ export const VMessages = genericComponent<VMessagesSlots>()({
           textColorStyles.value,
           props.style,
         ]}
-        role="alert"
-        aria-live="polite"
       >
         { props.active && (
           messages.value.map((message, i) => (

From 9d881b2ea42b263e1e538df6b404e7ac61ac9179 Mon Sep 17 00:00:00 2001
From: wyhsunflower <504910127@qq.com>
Date: Sat, 25 Jan 2025 06:29:23 +0800
Subject: [PATCH 100/127] fix(VCalendar): always assign default first day of
 week (#20378)

fixes #19999
---
 packages/vuetify/src/composables/calendar.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/composables/calendar.ts b/packages/vuetify/src/composables/calendar.ts
index a38bdb3d505..c5673daf783 100644
--- a/packages/vuetify/src/composables/calendar.ts
+++ b/packages/vuetify/src/composables/calendar.ts
@@ -93,14 +93,17 @@ export function useCalendar (props: CalendarProps) {
     v => adapter.getMonth(v)
   )
 
+  const defaultFirstDayOfWeek = computed(() => {
+    return props.firstDayOfWeek ?? props.weekdays[0]
+  })
+
   const weekDays = computed(() => {
     const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0)
-
     return props.weekdays.map(day => (day + firstDayOfWeek) % 7)
   })
 
   const weeksInMonth = computed(() => {
-    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek)
+    const weeks = adapter.getWeekArray(month.value, defaultFirstDayOfWeek.value)
 
     const days = weeks.flat()
 

From 568f71bbe6ae6b803983bbb810ebc1c4278bc2d2 Mon Sep 17 00:00:00 2001
From: Saki Adachi <58318131+sakiadachi@users.noreply.github.com>
Date: Sat, 25 Jan 2025 07:43:28 +0900
Subject: [PATCH 101/127] fix(VField): rounded with long label border-radius
 (#20349)

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

diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index 85e9b30c161..e33c0b86b92 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -399,7 +399,7 @@
       &__notch
         flex: none
         position: relative
-        max-width: calc(100% - $field-control-affixed-padding)
+        max-width: calc(100% - var(--v-input-control-height))
 
         &::before,
         &::after

From 7dd5a2018f195513db40d0ee30c46724de44e1f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Te=20Hoa=20Huynh=20=28Hu=E1=BB=B3nh=20T=E1=BB=81=20Hoa=29?=
 <huynhtehoa@gmail.com>
Date: Sat, 25 Jan 2025 06:31:46 +0700
Subject: [PATCH 102/127] fix(VDataTable): show correct items count after
 expanding group (#20347)

fixes #20313
---
 .../__tests__/VDataTable.spec.cy.tsx          | 21 +++++++++++++++++++
 .../VDataTable/composables/group.ts           |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

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 cde77da1731..4743c3af440 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -366,6 +366,27 @@ describe('VDataTable', () => {
       cy.get('.v-data-table').find('h2').should('exist')
       cy.get('.v-data-table').find('h3').should('exist')
     })
+
+    it('should have body slot and slot prop should show correct item count after group is expanded', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable
+            items={ DESSERT_ITEMS }
+            headers={ DESSERT_HEADERS }
+            itemsPerPage={ -1 }
+            groupBy={[{ key: 'group', order: 'desc' }]}
+          >
+            {{
+              'body.append': ({ items }) => <div id="body-append">{ items.length }</div>,
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table').find('div#body-append').should('have.text', DESSERT_ITEMS.length)
+      cy.get(':nth-child(1) > .v-data-table__td > .v-btn').click()
+      cy.get('.v-data-table').find('div#body-append').should('have.text', DESSERT_ITEMS.length)
+    })
   })
 
   describe('sort', () => {
diff --git a/packages/vuetify/src/components/VDataTable/composables/group.ts b/packages/vuetify/src/components/VDataTable/composables/group.ts
index 7f4ac2be468..3c93b07f5da 100644
--- a/packages/vuetify/src/components/VDataTable/composables/group.ts
+++ b/packages/vuetify/src/components/VDataTable/composables/group.ts
@@ -90,7 +90,7 @@ export function provideGroupBy (options: {
         }
       }
 
-      return arr
+      return [...new Set(arr)]
     }
     return dive({ type: 'group', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })
   }

From 36c4d46be378666088ebc275012be701ef93ff0b Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 27 Jan 2025 20:01:48 +0100
Subject: [PATCH 103/127] fix(VPagination): visible items for selection in
 middle (#20322)

fixes #18853

Co-authored-by: jsek <im68889094144@outlook.com>
---
 packages/vuetify/src/components/VPagination/VPagination.tsx   | 2 +-
 .../components/VPagination/__tests__/VPagination.spec.cy.tsx  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VPagination/VPagination.tsx b/packages/vuetify/src/components/VPagination/VPagination.tsx
index f5ac0c16561..8c56649fa75 100644
--- a/packages/vuetify/src/components/VPagination/VPagination.tsx
+++ b/packages/vuetify/src/components/VPagination/VPagination.tsx
@@ -209,7 +209,7 @@ export const VPagination = genericComponent<VPaginationSlots>()({
         const rangeStart = length.value - rangeLength + start.value
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)]
       } else {
-        const rangeLength = Math.max(1, totalVisible.value - 3)
+        const rangeLength = Math.max(1, totalVisible.value - 2)
         const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value]
       }
diff --git a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
index 7ce68874663..41b220513f6 100644
--- a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
+++ b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
@@ -82,6 +82,10 @@ describe('VPagination', () => {
 
     // 5 buttons and 1 ellipsis
     cy.get('.v-pagination__item').should('have.length', 6)
+
+    cy.get('.v-btn').contains('4').click()
+    // 5 buttons and 2 ellipsis
+    cy.get('.v-pagination__item').should('have.length', 7)
   })
 
   it('should limit items when not enough space', () => {

From 8e61f2d7c2fdaf456f0d6107079c720fd39c5363 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:53:46 +0100
Subject: [PATCH 104/127] fix(VFab): improve positioning & examples (#20318)

Co-authored-by: jsek <im68889094144@outlook.com>
Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../src/examples/v-fab/misc-speed-dial.vue    | 385 ++++++++----------
 .../en/components/floating-action-buttons.md  |   6 +
 .../vuetify/src/components/VFab/VFab.sass     |   6 +-
 packages/vuetify/src/components/VFab/VFab.tsx |  13 +-
 4 files changed, 198 insertions(+), 212 deletions(-)

diff --git a/packages/docs/src/examples/v-fab/misc-speed-dial.vue b/packages/docs/src/examples/v-fab/misc-speed-dial.vue
index a7acf084758..2ca3a6a9123 100644
--- a/packages/docs/src/examples/v-fab/misc-speed-dial.vue
+++ b/packages/docs/src/examples/v-fab/misc-speed-dial.vue
@@ -1,223 +1,198 @@
 <template>
-  <v-card id="create">
-    <v-container fluid>
-      <v-row class="child-flex">
-        <v-col
-          cols="12"
-          md="4"
-          sm="6"
-        >
-          <div class="text-subheader-2 pa-2">Options</div>
-          <v-checkbox
-            v-model="hover"
-            label="Open on hover"
-            hide-details
-          ></v-checkbox>
+  <v-app>
+    <v-card class="pa-6 mb-6" variant="flat">
+      <v-row dense>
+        <v-col cols="12" sm="3">
+          <h5>FAB position</h5>
+
+          <v-radio-group v-model="fabPosition" density="compact" hide-details>
+            <v-radio label="App (fixed)" value="fixed"></v-radio>
+            <v-radio label="Absolute" value="absolute"></v-radio>
+            <v-radio label="None" value=""></v-radio>
+          </v-radio-group>
         </v-col>
-        <v-col
-          cols="12"
-          md="4"
-          sm="6"
-        >
-          <div class="text-subheader-2 pa-2">FAB location</div>
-          <v-checkbox
-            v-model="top"
-            label="Top"
-            hide-details
-          ></v-checkbox>
-          <v-checkbox
-            v-model="right"
-            label="Right"
-            hide-details
-          ></v-checkbox>
-          <v-checkbox
-            v-model="bottom"
-            label="Bottom"
-            hide-details
-          ></v-checkbox>
-          <v-checkbox
-            v-model="left"
-            label="Left"
-            hide-details
-          ></v-checkbox>
+
+        <v-col cols="12" sm="3">
+          <h5>FAB location</h5>
+
+          <v-radio-group v-model="fabLocation" :disabled="!fabPosition" density="compact" hide-details>
+            <div class="d-flex">
+              <v-radio value="top left"></v-radio>
+              <v-radio value="top center"></v-radio>
+              <v-radio value="top right"></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio value="left center"></v-radio>
+              <v-radio :disabled="fabPosition !== 'absolute'" value="center center"></v-radio>
+              <v-radio value="right center"></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio value="left bottom"></v-radio>
+              <v-radio value="bottom center"></v-radio>
+              <v-radio value="right bottom"></v-radio>
+            </div>
+          </v-radio-group>
+
+          <code>({{ fabLocation }})</code>
         </v-col>
-        <v-col
-          cols="12"
-          md="4"
-          sm="6"
-        >
-          <div class="text-subheader-2 pa-2">Speed dial direction</div>
-          <v-radio-group
-            v-model="direction"
-            hide-details
-          >
-            <v-radio
-              label="Top"
-              value="top"
-            ></v-radio>
-            <v-radio
-              label="Right"
-              value="right"
-            ></v-radio>
-            <v-radio
-              label="Bottom"
-              value="bottom"
-            ></v-radio>
-            <v-radio
-              label="Left"
-              value="left"
-            ></v-radio>
+
+        <v-col cols="12" sm="3">
+          <h5>Menu location</h5>
+
+          <v-radio-group v-model="menuLocation" density="compact" hide-details>
+            <div class="d-flex">
+              <v-radio disabled></v-radio>
+              <v-radio value="top left"></v-radio>
+              <v-radio value="top center"></v-radio>
+              <v-radio value="top right"></v-radio>
+              <v-radio disabled></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio value="left top"></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio value="right top"></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio value="left center"></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio value="center"></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio value="right center"></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio value="left bottom"></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio disabled></v-radio>
+              <v-radio value="right bottom"></v-radio>
+            </div>
+
+            <div class="d-flex">
+              <v-radio disabled></v-radio>
+              <v-radio value="bottom left"></v-radio>
+              <v-radio value="bottom center"></v-radio>
+              <v-radio value="bottom right"></v-radio>
+              <v-radio disabled></v-radio>
+            </div>
           </v-radio-group>
+
+          <code>({{ menuLocation }})</code>
         </v-col>
-        <v-col
-          cols="12"
-          md="4"
-          sm="6"
-        >
-          <div class="text-subheader-2 pa-2">Transition</div>
-          <v-radio-group
-            v-model="transition"
-            hide-details
-          >
-            <v-radio
-              label="Slide y"
-              value="slide-y-transition"
-            ></v-radio>
-            <v-radio
-              label="Slide y reverse"
-              value="slide-y-reverse-transition"
-            ></v-radio>
-            <v-radio
-              label="Slide x"
-              value="slide-x-transition"
-            ></v-radio>
-            <v-radio
-              label="Slide x reverse"
-              value="slide-x-reverse-transition"
-            ></v-radio>
-            <v-radio
-              label="Scale"
-              value="scale-transition"
-            ></v-radio>
+
+        <v-col cols="12" sm="3">
+          <h5>Transition</h5>
+
+          <v-radio-group v-model="transition" density="compact" hide-details>
+            <v-radio label="Fade" value="fade-transition"></v-radio>
+            <v-radio label="Slide y" value="slide-y-transition"></v-radio>
+            <v-radio label="Slide y reverse" value="slide-y-reverse-transition"></v-radio>
+            <v-radio label="Slide x" value="slide-x-transition"></v-radio>
+            <v-radio label="Slide x reverse" value="slide-x-reverse-transition"></v-radio>
+            <v-radio label="Scale" value="scale-transition"></v-radio>
           </v-radio-group>
         </v-col>
       </v-row>
-    </v-container>
-    <v-speed-dial
-      v-model="fab"
-      :bottom="bottom"
-      :direction="direction"
-      :left="left"
-      :open-on-hover="hover"
-      :right="right"
-      :top="top"
-      :transition="transition"
-    >
-      <template v-slot:activator>
-        <v-btn
-          v-model="fab"
-          color="blue-darken-2"
-          dark
-          fab
-        >
-          <v-icon v-if="fab">
-            mdi-close
-          </v-icon>
-          <v-icon v-else>
-            mdi-account-circle
-          </v-icon>
-        </v-btn>
-      </template>
-      <v-btn
-        color="green"
-        size="small"
-        dark
-        fab
-      >
-        <v-icon>mdi-pencil</v-icon>
-      </v-btn>
-      <v-btn
-        color="indigo"
-        size="small"
-        dark
-        fab
-      >
-        <v-icon>mdi-plus</v-icon>
-      </v-btn>
-      <v-btn
-        color="red"
-        size="small"
-        dark
-        fab
+    </v-card>
+
+    <v-card :class="fabPosition === 'absolute' ? 'demo-panel-relative' : 'demo-panel-static'" border flat>
+      <v-fab
+        :key="fabPosition"
+        :absolute="fabPosition === 'absolute'"
+        :app="fabPosition === 'fixed'"
+        :color="open ? '' : 'primary'"
+        :location="fabLocation"
+        size="large"
+        icon
       >
-        <v-icon>mdi-delete</v-icon>
-      </v-btn>
-    </v-speed-dial>
-  </v-card>
+        <v-icon>{{ open ? 'mdi-close' : 'mdi-crown' }}</v-icon>
+        <v-speed-dial v-model="open" :location="menuLocation" :transition="transition" activator="parent">
+          <v-btn key="1" color="success" icon>
+            <v-icon size="24">$success</v-icon>
+          </v-btn>
+
+          <v-btn key="2" color="info" icon>
+            <v-icon size="24">$info</v-icon>
+          </v-btn>
+
+          <v-btn key="3" color="warning" icon>
+            <v-icon size="24">$warning</v-icon>
+          </v-btn>
+
+          <v-btn key="4" color="error" icon>
+            <v-icon size="24">$error</v-icon>
+          </v-btn>
+        </v-speed-dial>
+      </v-fab>
+    </v-card>
+  </v-app>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
-
-  const direction = ref('top')
-  const fab = ref(false)
-  const hover = ref(false)
-  const top = ref(false)
-  const right = ref(true)
-  const bottom = ref(true)
-  const left = ref(false)
-  const transition = ref('slide-y-reverse-transition')
-  watch(top, val => {
-    bottom.value = !val
-  })
-  watch(right, val => {
-    left.value = !val
-  })
-  watch(bottom, val => {
-    top.value = !val
-  })
-  watch(left, val => {
-    right.value = !val
-  })
-</script>
+  import { shallowRef, watch } from 'vue'
+
+  const open = shallowRef(false)
+  const fabPosition = shallowRef('absolute')
+  const menuLocation = shallowRef('left center')
+  const fabLocation = shallowRef('right bottom')
+  const transition = shallowRef('slide-y-reverse-transition')
 
-<script>
-  export default {
-    data: () => ({
-      direction: 'top',
-      fab: false,
-      hover: false,
-      top: false,
-      right: true,
-      bottom: true,
-      left: false,
-      transition: 'slide-y-reverse-transition',
-    }),
-
-    watch: {
-      top (val) {
-        this.bottom = !val
-      },
-      right (val) {
-        this.left = !val
-      },
-      bottom (val) {
-        this.top = !val
-      },
-      left (val) {
-        this.right = !val
-      },
-    },
+  watch(menuLocation, reopen)
+  watch(transition, reopen)
+  watch(fabLocation, () => open.value = false)
+  watch(fabPosition, () => open.value = false)
+
+  function reopen () {
+    open.value = false
+    setTimeout(() => open.value = true, 400)
   }
 </script>
 
-<style>
-  /* This is for documentation purposes and will not be needed in your application */
-  #create .v-speed-dial {
-    position: absolute;
-  }
+<style scoped>
+/* This is for documentation purposes and will not be needed in your application */
+::v-deep(.v-application__wrap) {
+  min-height: 0 !important;
+}
 
-  #create .v-btn--floating {
-    position: relative;
-  }
+.demo-panel-static,
+.demo-panel-relative {
+  margin: 0 80px 50px;
+  padding: 24px;
+  min-height: 300px;
+}
+.demo-panel-static {
+  position: static;
+}
+.demo-panel-relative {
+  position: relative;
+}
+
+.v-selection-control--disabled,
+.v-input--disabled .v-selection-control {
+  opacity: .1;
+}
+
+.v-radio {
+  flex-grow: 0 !important;
+}
+
+h5 {
+  margin-bottom: 12px;
+}
+
+code {
+  display: block;
+  font-size: .8rem;
+  margin-top: 12px;
+}
+
+::v-deep(.v-label) {
+  margin-left: 8px;
+}
 </style>
diff --git a/packages/docs/src/pages/en/components/floating-action-buttons.md b/packages/docs/src/pages/en/components/floating-action-buttons.md
index 6aa85e5f9be..11528d15ad6 100644
--- a/packages/docs/src/pages/en/components/floating-action-buttons.md
+++ b/packages/docs/src/pages/en/components/floating-action-buttons.md
@@ -72,3 +72,9 @@ When changing the default action of your button, it is recommended that you disp
 For better visual appeal, we use a small button to match our list avatars.
 
 <ExamplesExample file="v-fab/misc-small" />
+
+### Speed dial
+
+The speed-dial component has a very robust api for customizing your FAB experience exactly how you want.
+
+<ExamplesExample file="v-fab/misc-speed-dial" />
diff --git a/packages/vuetify/src/components/VFab/VFab.sass b/packages/vuetify/src/components/VFab/VFab.sass
index e6bf9eea331..806a6a6d51d 100644
--- a/packages/vuetify/src/components/VFab/VFab.sass
+++ b/packages/vuetify/src/components/VFab/VFab.sass
@@ -26,6 +26,10 @@
     &--absolute
       display: flex
 
+    &--absolute
+      position: absolute
+      inset: 0
+
     &--start,
     &--left
       justify-content: flex-start
@@ -53,11 +57,11 @@
   .v-fab__container
     align-self: center
     display: inline-flex
-    position: absolute
     vertical-align: middle
 
     .v-fab--app &
       margin: 12px
+      position: fixed
 
     .v-fab--absolute &
       position: absolute
diff --git a/packages/vuetify/src/components/VFab/VFab.tsx b/packages/vuetify/src/components/VFab/VFab.tsx
index 069034edef0..4ec1ce3204f 100644
--- a/packages/vuetify/src/components/VFab/VFab.tsx
+++ b/packages/vuetify/src/components/VFab/VFab.tsx
@@ -107,12 +107,13 @@ export const VFab = genericComponent()({
             props.class,
           ]}
           style={[
-            props.app ? {
-              ...layoutItemStyles.value,
-            } : {
-              height: 'inherit',
-              width: undefined,
-            },
+            props.app
+              ? { ...layoutItemStyles.value }
+              : {
+                height: props.absolute
+                  ? '100%'
+                  : 'inherit',
+              },
             props.style,
           ]}
         >

From cff590e3bd5ea3a58757524327ea05124dfff1e4 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:15:01 +0100
Subject: [PATCH 105/127] fix(useDisplay): more intuitive use of
 `mobile-breakpoint` (#20311)

fixes #19883

Co-authored-by: jsek <im68889094144@outlook.com>
Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
---
 packages/vuetify/src/composables/display.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
index 98e1416ea27..71d088baa78 100644
--- a/packages/vuetify/src/composables/display.ts
+++ b/packages/vuetify/src/composables/display.ts
@@ -231,14 +231,17 @@ export function useDisplay (
   if (!display) throw new Error('Could not find Vuetify display injection')
 
   const mobile = computed(() => {
-    if (props.mobile != null) return props.mobile
-    if (!props.mobileBreakpoint) return display.mobile.value
-
-    const breakpointValue = typeof props.mobileBreakpoint === 'number'
-      ? props.mobileBreakpoint
-      : display.thresholds.value[props.mobileBreakpoint]
-
-    return display.width.value < breakpointValue
+    if (props.mobile) {
+      return true
+    } else if (typeof props.mobileBreakpoint === 'number') {
+      return display.width.value < props.mobileBreakpoint
+    } else if (props.mobileBreakpoint) {
+      return display.width.value < display.thresholds.value[props.mobileBreakpoint]
+    } else if (props.mobile === null) {
+      return display.mobile.value
+    } else {
+      return false
+    }
   })
 
   const displayClasses = computed(() => {

From 73510746b9dd4ae78080f22ecdda6c4c061bc885 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:36:47 +0100
Subject: [PATCH 106/127] fix(VField): floating label respect paddings to avoid
 overflow (#20736)

fixes #20734
---
 packages/vuetify/src/components/VField/VField.sass | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
index e33c0b86b92..4914db775aa 100644
--- a/packages/vuetify/src/components/VField/VField.sass
+++ b/packages/vuetify/src/components/VField/VField.sass
@@ -278,7 +278,9 @@
       --v-field-label-scale: #{$field-label-floating-scale}em
       font-size: var(--v-field-label-scale)
       visibility: hidden
-      max-width: 100%
+
+      .v-field--variant-outlined &
+        max-width: 100%
 
       .v-field--center-affix &
         transform: none
@@ -399,7 +401,13 @@
       &__notch
         flex: none
         position: relative
-        max-width: calc(100% - var(--v-input-control-height))
+        max-width: calc(100% - $field-control-affixed-padding * 2)
+
+        @at-root
+          #{selector.append('.v-field--rounded', &)},
+          #{selector.append('[class^="rounded-"]', &)},
+          #{selector.append('[class*=" rounded-"]', &)}
+            max-width: calc(100% - var(--v-input-control-height))
 
         &::before,
         &::after

From 78ed107cb858665c800f6fc660fd6e36e3b9b8f3 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 28 Jan 2025 14:02:59 +1100
Subject: [PATCH 107/127] docs: remove deprecated props from examples

---
 packages/docs/src/components/app/Toc.vue      |   2 +-
 packages/docs/src/components/doc/VueJobs.vue  |   1 -
 .../docs/src/components/home/Features.vue     |   4 +-
 packages/docs/src/components/home/Footer.vue  |   1 -
 .../components/introduction/Comparison.vue    |   1 -
 .../docs/src/components/promoted/Promoted.vue |   1 -
 packages/docs/src/components/sponsor/Card.vue |   1 -
 .../accessibility/list-item-group.vue         |  18 +--
 .../border-radius/misc-components.vue         |   2 +-
 .../misc-removing-border-radius.vue           |   2 +-
 .../src/examples/elevation/prop-dynamic.vue   |   2 +-
 .../src/examples/transitions/misc-fab.vue     |   1 -
 .../src/examples/transitions/misc-fade.vue    |   1 -
 .../src/examples/transitions/misc-scale.vue   |   1 -
 .../transitions/prop-custom-origin.vue        |   1 -
 .../examples/v-app-bar/misc-app-bar-nav.vue   |  13 +-
 .../docs/src/examples/v-app-bar/misc-menu.vue |   5 +-
 .../src/examples/v-app-bar/prop-dense.vue     |   1 -
 .../src/examples/v-avatar/misc-advanced.vue   |   4 +-
 .../examples/v-avatar/misc-avatar-menu.vue    |   5 +-
 .../src/examples/v-breadcrumbs/prop-large.vue |  54 -------
 .../examples/v-btn-toggle/misc-toolbar.vue    |   3 +-
 .../examples/v-btn-toggle/misc-wysiwyg.vue    |   1 -
 .../docs/src/examples/v-btn-toggle/usage.vue  |  14 +-
 .../docs/src/examples/v-btn/misc-readonly.vue |   2 -
 .../docs/src/examples/v-btn/prop-floating.vue |  30 ++--
 .../src/examples/v-calendar/event-click.vue   |  11 +-
 .../examples/v-calendar/prop-type-week.vue    |   2 +-
 .../docs/src/examples/v-calendar/usage.vue    |   4 +-
 .../examples/v-chip/event-action-chips.vue    |   5 +-
 .../src/examples/v-chip/misc-in-selects.vue   |  23 +--
 .../src/examples/v-chip/prop-closable.vue     |   2 -
 .../examples/v-data-iterator/misc-filter.vue  |   2 +-
 .../src/examples/v-data-table/misc-crud.vue   |   1 -
 .../v-data-table/misc-edit-dialog.vue         |   8 +-
 .../misc-dialog-and-menu.vue                  |  11 +-
 .../examples/v-date-picker/misc-birthday.vue  |   6 +-
 .../v-date-picker/misc-dialog-and-menu.vue    |  21 +--
 .../misc-formatting-external-libraries.vue    |  10 +-
 .../v-date-picker/misc-formatting.vue         |  12 +-
 .../examples/v-date-picker/prop-multiple.vue  |   6 +-
 .../v-dialog/misc-without-activator.vue       |   1 -
 .../src/examples/v-dialog/prop-fullscreen.vue |   5 +-
 .../src/examples/v-dialog/prop-scrollable.vue |   1 -
 .../v-expansion-panels/prop-focusable.vue     |  13 --
 .../examples/v-fab/misc-lateral-screens.vue   |   3 +-
 .../docs/src/examples/v-fab/misc-small.vue    |   5 +-
 .../src/examples/v-hover/misc-transition.vue  |   2 +-
 .../docs/src/examples/v-img/prop-contain.vue  |   3 -
 .../src/examples/v-input/prop-success.vue     |   9 --
 .../src/examples/v-list/misc-card-list.vue    |  90 +++++------
 .../v-list/misc-simple-avatar-list.vue        |  30 ++--
 .../examples/v-list/misc-single-line-list.vue |  46 +++---
 .../v-list/misc-subheadings-and-dividers.vue  | 142 ++++++++----------
 .../examples/v-list/slot-expansion-lists.vue  |   1 -
 .../prop-absolute-without-activator.vue       |   4 +-
 .../v-menu/prop-close-on-content-click.vue    |   1 -
 .../src/examples/v-menu/prop-location.vue     |   1 -
 .../prop-bottom-drawer.vue                    |   5 +-
 .../src/examples/v-overlay/misc-advanced.vue  |   3 +-
 .../v-progress-linear/misc-file-loader.vue    |   7 +-
 .../v-progress-linear/misc-toolbar-loader.vue |   2 +-
 .../examples/v-radio-group/prop-colors.vue    |  10 +-
 .../examples/v-radio-group/prop-direction.vue |   5 +-
 .../docs/src/examples/v-rating/misc-card.vue  |   1 -
 .../docs/src/examples/v-rating/prop-icons.vue |   1 -
 packages/docs/src/examples/v-scroll/usage.vue |   2 +-
 .../examples/v-slider/prop-inverse-label.vue  |  13 --
 .../src/examples/v-snackbar-queue/usage.vue   |   2 +-
 .../src/examples/v-snackbar/prop-variants.vue |   2 +-
 .../examples/v-tabs/misc-dynamic-height.vue   |  24 ++-
 .../src/examples/v-tabs/misc-tab-items.vue    |   8 +-
 .../v-text-field/misc-custom-validation.vue   |   6 +-
 .../src/examples/v-textarea/prop-rows.vue     |   2 -
 .../examples/v-toolbar/prop-background.vue    |   6 +-
 .../v-toolbar/prop-light-and-dark.vue         |   4 +-
 .../src/examples/v-toolbar/prop-prominent.vue |  31 ----
 .../src/examples/v-tooltip/prop-color.vue     |  12 +-
 .../v-treeview/misc-search-and-filter.vue     |   3 +-
 .../v-window/misc-account-creation.vue        |   1 -
 .../src/examples/wireframes/three-column.vue  |   2 +-
 81 files changed, 268 insertions(+), 536 deletions(-)
 delete mode 100644 packages/docs/src/examples/v-breadcrumbs/prop-large.vue
 delete mode 100644 packages/docs/src/examples/v-expansion-panels/prop-focusable.vue
 delete mode 100644 packages/docs/src/examples/v-input/prop-success.vue
 delete mode 100644 packages/docs/src/examples/v-slider/prop-inverse-label.vue
 delete mode 100644 packages/docs/src/examples/v-toolbar/prop-prominent.vue

diff --git a/packages/docs/src/components/app/Toc.vue b/packages/docs/src/components/app/Toc.vue
index 5475251907b..ea08d92ddf9 100644
--- a/packages/docs/src/components/app/Toc.vue
+++ b/packages/docs/src/components/app/Toc.vue
@@ -38,7 +38,7 @@
         >
           <a
             :href="href"
-            class="v-toc-link d-block transition-swing text-decoration-none"
+            class="v-toc-link d-block text-decoration-none"
             @click.prevent.stop="onClick(to)"
             v-text="text"
           />
diff --git a/packages/docs/src/components/doc/VueJobs.vue b/packages/docs/src/components/doc/VueJobs.vue
index bb4b9dbc0a0..d8193165ea4 100644
--- a/packages/docs/src/components/doc/VueJobs.vue
+++ b/packages/docs/src/components/doc/VueJobs.vue
@@ -20,7 +20,6 @@
     >
       <v-card
         :href="job.url"
-        class="transition-swing"
         max-height="225"
         rel="sponsored"
         target="_blank"
diff --git a/packages/docs/src/components/home/Features.vue b/packages/docs/src/components/home/Features.vue
index dfda4d37c7b..94aedf45db4 100644
--- a/packages/docs/src/components/home/Features.vue
+++ b/packages/docs/src/components/home/Features.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-responsive class="text-xs-center">
+  <v-responsive class="text-center">
     <v-container>
       <v-row justify="center">
         <v-col
@@ -13,7 +13,7 @@
             :rel="feature.href && 'noopener noreferrer'"
             :target="feature.href && '_blank'"
             :to="feature.to"
-            class="text-xs-center mx-auto"
+            class="text-center mx-auto"
             max-width="350"
             border
             flat
diff --git a/packages/docs/src/components/home/Footer.vue b/packages/docs/src/components/home/Footer.vue
index 6701cceb749..b7062b125a5 100644
--- a/packages/docs/src/components/home/Footer.vue
+++ b/packages/docs/src/components/home/Footer.vue
@@ -11,7 +11,6 @@
             :src="`https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-${theme.current.value.dark ? 'dark' : 'light'}-slim.svg`"
             class="mx-auto"
             height="64"
-            contain
           />
         </v-col>
 
diff --git a/packages/docs/src/components/introduction/Comparison.vue b/packages/docs/src/components/introduction/Comparison.vue
index 4050d7bdbb8..498417c431c 100644
--- a/packages/docs/src/components/introduction/Comparison.vue
+++ b/packages/docs/src/components/introduction/Comparison.vue
@@ -29,7 +29,6 @@
                 height="24"
                 max-width="24"
                 width="24"
-                contain
               />
 
               <div v-text="framework.name" />
diff --git a/packages/docs/src/components/promoted/Promoted.vue b/packages/docs/src/components/promoted/Promoted.vue
index f2f10802d56..1020aaf312e 100644
--- a/packages/docs/src/components/promoted/Promoted.vue
+++ b/packages/docs/src/components/promoted/Promoted.vue
@@ -27,7 +27,6 @@
               class="mx-1 mx-md-2"
               height="56"
               max-width="56"
-              contain
             />
 
             <AppMarkdown
diff --git a/packages/docs/src/components/sponsor/Card.vue b/packages/docs/src/components/sponsor/Card.vue
index 4ab5291dace..409f59be580 100644
--- a/packages/docs/src/components/sponsor/Card.vue
+++ b/packages/docs/src/components/sponsor/Card.vue
@@ -16,7 +16,6 @@
       :src="src"
       :width="imgWidth"
       max-height="64"
-      contain
     />
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/accessibility/list-item-group.vue b/packages/docs/src/examples/accessibility/list-item-group.vue
index 169f34f0ef4..406eb5abc81 100644
--- a/packages/docs/src/examples/accessibility/list-item-group.vue
+++ b/packages/docs/src/examples/accessibility/list-item-group.vue
@@ -3,16 +3,14 @@
     class="mx-auto"
     max-width="500"
   >
-    <v-list>
-      <v-list-item-group v-model="model">
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :disabled="item.disabled"
-          :title="item.text"
-        >
-        </v-list-item>
-      </v-list-item-group>
+    <v-list v-model="model">
+      <v-list-item
+        v-for="(item, i) in items"
+        :key="i"
+        :disabled="item.disabled"
+        :title="item.text"
+        :value="item"
+      ></v-list-item>
     </v-list>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/border-radius/misc-components.vue b/packages/docs/src/examples/border-radius/misc-components.vue
index 6982676ba1c..9e17e7e352b 100644
--- a/packages/docs/src/examples/border-radius/misc-components.vue
+++ b/packages/docs/src/examples/border-radius/misc-components.vue
@@ -4,7 +4,7 @@
       color="primary"
       rounded="pill"
       text="Update Account"
-      flat
+      variant="flat"
     ></v-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
index 15f2712bcbb..5dcef89880c 100644
--- a/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
+++ b/packages/docs/src/examples/border-radius/misc-removing-border-radius.vue
@@ -4,7 +4,7 @@
       color="primary"
       rounded="0"
       text="Update Account"
-      flat
+      variant="flat"
     ></v-btn>
   </v-container>
 </template>
diff --git a/packages/docs/src/examples/elevation/prop-dynamic.vue b/packages/docs/src/examples/elevation/prop-dynamic.vue
index aa253a4f3f5..9d206132bd2 100644
--- a/packages/docs/src/examples/elevation/prop-dynamic.vue
+++ b/packages/docs/src/examples/elevation/prop-dynamic.vue
@@ -18,7 +18,7 @@
       <div
         v-bind="props"
         :class="`elevation-${isHovering ? 24 : 6}`"
-        class="mx-auto pa-6 transition-swing"
+        class="mx-auto pa-6"
       >
         Class based elevation
       </div>
diff --git a/packages/docs/src/examples/transitions/misc-fab.vue b/packages/docs/src/examples/transitions/misc-fab.vue
index 40a863405b7..44f17ddc469 100644
--- a/packages/docs/src/examples/transitions/misc-fab.vue
+++ b/packages/docs/src/examples/transitions/misc-fab.vue
@@ -4,7 +4,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Fab Transition
diff --git a/packages/docs/src/examples/transitions/misc-fade.vue b/packages/docs/src/examples/transitions/misc-fade.vue
index 9d5d76ca31f..8a8d90a3a85 100644
--- a/packages/docs/src/examples/transitions/misc-fade.vue
+++ b/packages/docs/src/examples/transitions/misc-fade.vue
@@ -4,7 +4,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Fade Transition
diff --git a/packages/docs/src/examples/transitions/misc-scale.vue b/packages/docs/src/examples/transitions/misc-scale.vue
index 4e1f4b8394b..b6801cdc1d2 100644
--- a/packages/docs/src/examples/transitions/misc-scale.vue
+++ b/packages/docs/src/examples/transitions/misc-scale.vue
@@ -4,7 +4,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Scale Transition
diff --git a/packages/docs/src/examples/transitions/prop-custom-origin.vue b/packages/docs/src/examples/transitions/prop-custom-origin.vue
index 7c36696c22e..e913ea664ce 100644
--- a/packages/docs/src/examples/transitions/prop-custom-origin.vue
+++ b/packages/docs/src/examples/transitions/prop-custom-origin.vue
@@ -7,7 +7,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Scale Transition
diff --git a/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
index 60b756c0565..4704f4bb643 100644
--- a/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
+++ b/packages/docs/src/examples/v-app-bar/misc-app-bar-nav.vue
@@ -14,17 +14,14 @@
       temporary
     >
       <v-list
-        dense
+        v-model="group"
+        color="deep-purple-accent-4"
+        density="compact"
         nav
       >
-        <v-list-item-group
-          v-model="group"
-          active-class="deep-purple--text text--accent-4"
-        >
-          <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
+        <v-list-item prepend-icon="mdi-home" title="Home" value="home"></v-list-item>
 
-          <v-list-item prepend-icon="mdi-account" title="Account"></v-list-item>
-        </v-list-item-group>
+        <v-list-item prepend-icon="mdi-account" title="Account" value="account"></v-list-item>
       </v-list>
     </v-navigation-drawer>
     <v-main>
diff --git a/packages/docs/src/examples/v-app-bar/misc-menu.vue b/packages/docs/src/examples/v-app-bar/misc-menu.vue
index 0103f1e8857..cd0cc683e4b 100644
--- a/packages/docs/src/examples/v-app-bar/misc-menu.vue
+++ b/packages/docs/src/examples/v-app-bar/misc-menu.vue
@@ -2,13 +2,10 @@
   <v-layout>
     <v-app-bar
       color="#6A76AB"
+      scroll-behavior="shrink fade-image"
       scroll-target="#scrolling-techniques-4"
       src="https://picsum.photos/1920/1080?random"
       absolute
-      dark
-      fade-img-on-scroll
-      prominent
-      shrink-on-scroll
     >
       <template v-slot:image>
         <v-img gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"></v-img>
diff --git a/packages/docs/src/examples/v-app-bar/prop-dense.vue b/packages/docs/src/examples/v-app-bar/prop-dense.vue
index 41a992cc273..85dc32169f0 100644
--- a/packages/docs/src/examples/v-app-bar/prop-dense.vue
+++ b/packages/docs/src/examples/v-app-bar/prop-dense.vue
@@ -2,7 +2,6 @@
   <div>
     <v-app-bar
       color="deep-purple-accent-4"
-      dark
       dense
     >
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
diff --git a/packages/docs/src/examples/v-avatar/misc-advanced.vue b/packages/docs/src/examples/v-avatar/misc-advanced.vue
index 3756cce2a26..d2fb5b8d539 100644
--- a/packages/docs/src/examples/v-avatar/misc-advanced.vue
+++ b/packages/docs/src/examples/v-avatar/misc-advanced.vue
@@ -33,7 +33,7 @@
           </v-col>
 
           <v-col
-            class="hidden-xs-only text-left ms-2"
+            class="hidden-xs text-left ms-2"
             md="3"
             sm="5"
           >
@@ -55,8 +55,8 @@
               v-if="message.new"
               :color="`${message.color}-lighten-1`"
               class="ms-0 me-2"
+              size="small"
               label
-              small
             >
               {{ message.new }} new
             </v-chip>
diff --git a/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
index fbcd51e6889..a50d0644020 100644
--- a/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
+++ b/packages/docs/src/examples/v-avatar/misc-avatar-menu.vue
@@ -4,10 +4,7 @@
     fluid
   >
     <v-row justify="center">
-      <v-menu
-        min-width="200px"
-        rounded
-      >
+      <v-menu min-width="200px">
         <template v-slot:activator="{ props }">
           <v-btn
             icon
diff --git a/packages/docs/src/examples/v-breadcrumbs/prop-large.vue b/packages/docs/src/examples/v-breadcrumbs/prop-large.vue
deleted file mode 100644
index 0591f0d5b4e..00000000000
--- a/packages/docs/src/examples/v-breadcrumbs/prop-large.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <v-breadcrumbs :items="items"></v-breadcrumbs>
-
-    <v-breadcrumbs
-      :items="items"
-      large
-    ></v-breadcrumbs>
-  </div>
-</template>
-
-<script setup>
-  const items = [
-    {
-      title: 'Dashboard',
-      disabled: false,
-      href: 'breadcrumbs_dashboard',
-    },
-    {
-      title: 'Link 1',
-      disabled: false,
-      href: 'breadcrumbs_link_1',
-    },
-    {
-      title: 'Link 2',
-      disabled: true,
-      href: 'breadcrumbs_link_2',
-    },
-  ]
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      items: [
-        {
-          title: 'Dashboard',
-          disabled: false,
-          href: 'breadcrumbs_dashboard',
-        },
-        {
-          title: 'Link 1',
-          disabled: false,
-          href: 'breadcrumbs_link_1',
-        },
-        {
-          title: 'Link 2',
-          disabled: true,
-          href: 'breadcrumbs_link_2',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
index 7949548473e..5a9077b149a 100644
--- a/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
+++ b/packages/docs/src/examples/v-btn-toggle/misc-toolbar.vue
@@ -54,9 +54,8 @@
     <v-btn-toggle
       v-model="toggleExclusive"
       color="primary"
+      density="compact"
       variant="plain"
-      dense
-      group
     >
       <v-btn
         :value="1"
diff --git a/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
index d8029f46b5b..3c53b471a91 100644
--- a/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
+++ b/packages/docs/src/examples/v-btn-toggle/misc-wysiwyg.vue
@@ -61,7 +61,6 @@
         rows="2"
         variant="outlined"
         auto-grow
-        full-width
         hide-details
       ></v-textarea>
     </v-sheet>
diff --git a/packages/docs/src/examples/v-btn-toggle/usage.vue b/packages/docs/src/examples/v-btn-toggle/usage.vue
index 9f33d0085a0..f0aafde030e 100644
--- a/packages/docs/src/examples/v-btn-toggle/usage.vue
+++ b/packages/docs/src/examples/v-btn-toggle/usage.vue
@@ -36,8 +36,7 @@
 
         <v-btn-toggle
           v-model="toggle_multiple"
-          background-color="primary"
-          dark
+          color="primary"
           multiple
         >
           <v-btn>
@@ -90,11 +89,7 @@
       >
         <p>Mandatory</p>
 
-        <v-btn-toggle
-          v-model="toggle_one"
-          mandatory
-          shaped
-        >
+        <v-btn-toggle v-model="toggle_one" mandatory>
           <v-btn>
             <v-icon>mdi-format-align-left</v-icon>
           </v-btn>
@@ -149,10 +144,7 @@
       >
         <p>Text &amp; Icon Options</p>
 
-        <v-btn-toggle
-          v-model="icon"
-          borderless
-        >
+        <v-btn-toggle v-model="icon" divided>
           <v-btn value="left">
             <span class="hidden-sm-and-down">Left</span>
 
diff --git a/packages/docs/src/examples/v-btn/misc-readonly.vue b/packages/docs/src/examples/v-btn/misc-readonly.vue
index 7b3b897c215..d235fe8aee4 100644
--- a/packages/docs/src/examples/v-btn/misc-readonly.vue
+++ b/packages/docs/src/examples/v-btn/misc-readonly.vue
@@ -45,7 +45,6 @@
           :variant="isSubscriber ? 'plain' : 'tonal'"
           class="me-2 text-none"
           size="small"
-          flat
           @click="isSubscriber = !isSubscriber"
         ></v-btn>
       </v-fade-transition>
@@ -60,7 +59,6 @@
           class="text-none"
           size="small"
           variant="flat"
-          flat
         ></v-btn>
       </v-fade-transition>
     </template>
diff --git a/packages/docs/src/examples/v-btn/prop-floating.vue b/packages/docs/src/examples/v-btn/prop-floating.vue
index 74c3be88257..52cd90ee142 100644
--- a/packages/docs/src/examples/v-btn/prop-floating.vue
+++ b/packages/docs/src/examples/v-btn/prop-floating.vue
@@ -4,10 +4,9 @@
       class="mx-2"
       color="primary"
       size="small"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-minus
       </v-icon>
     </v-btn>
@@ -16,10 +15,9 @@
       class="mx-2"
       color="pink"
       size="small"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-heart
       </v-icon>
     </v-btn>
@@ -27,10 +25,9 @@
     <v-btn
       class="mx-2"
       color="indigo"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-plus
       </v-icon>
     </v-btn>
@@ -38,10 +35,9 @@
     <v-btn
       class="mx-2"
       color="teal"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-format-list-bulleted-square
       </v-icon>
     </v-btn>
@@ -50,10 +46,9 @@
       class="mx-2"
       color="cyan"
       size="large"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-pencil
       </v-icon>
     </v-btn>
@@ -62,10 +57,9 @@
       class="mx-2"
       color="purple"
       size="large"
-      dark
-      fab
+      icon
     >
-      <v-icon dark>
+      <v-icon>
         mdi-android
       </v-icon>
     </v-btn>
diff --git a/packages/docs/src/examples/v-calendar/event-click.vue b/packages/docs/src/examples/v-calendar/event-click.vue
index 89e4db20fe3..c7f14be62f8 100644
--- a/packages/docs/src/examples/v-calendar/event-click.vue
+++ b/packages/docs/src/examples/v-calendar/event-click.vue
@@ -17,7 +17,7 @@
             color="grey-darken-2"
             size="small"
             variant="text"
-            fab
+            icon
             @click="prev"
           >
             <v-icon size="small">
@@ -28,7 +28,7 @@
             color="grey-darken-2"
             size="small"
             variant="text"
-            fab
+            icon
             @click="next"
           >
             <v-icon size="small">
@@ -40,12 +40,11 @@
           </v-toolbar-title>
           <v-spacer></v-spacer>
           <v-menu location="bottom end">
-            <template v-slot:activator="{ on, attrs }">
+            <template v-slot:activator="{ props }">
               <v-btn
                 color="grey-darken-2"
                 variant="outlined"
-                v-bind="attrs"
-                v-on="on"
+                v-bind="props"
               >
                 <span>{{ typeToLabel[type] }}</span>
                 <v-icon end>
@@ -87,7 +86,7 @@
           v-model="selectedOpen"
           :activator="selectedElement"
           :close-on-content-click="false"
-          offset-x
+          location="end"
         >
           <v-card
             color="grey-lighten-4"
diff --git a/packages/docs/src/examples/v-calendar/prop-type-week.vue b/packages/docs/src/examples/v-calendar/prop-type-week.vue
index b207a042531..bd00c453e91 100644
--- a/packages/docs/src/examples/v-calendar/prop-type-week.vue
+++ b/packages/docs/src/examples/v-calendar/prop-type-week.vue
@@ -6,9 +6,9 @@
           v-model="weekday"
           :items="weekdays"
           class="ma-2"
+          density="compact"
           label="weekdays"
           variant="outlined"
-          dense
           hide-details
         ></v-select>
       </v-sheet>
diff --git a/packages/docs/src/examples/v-calendar/usage.vue b/packages/docs/src/examples/v-calendar/usage.vue
index 65124fdf35a..797b064c9c3 100644
--- a/packages/docs/src/examples/v-calendar/usage.vue
+++ b/packages/docs/src/examples/v-calendar/usage.vue
@@ -9,18 +9,18 @@
         v-model="type"
         :items="types"
         class="ma-2"
+        density="compact"
         label="View Mode"
         variant="outlined"
-        dense
         hide-details
       ></v-select>
       <v-select
         v-model="weekday"
         :items="weekdays"
         class="ma-2"
+        density="compact"
         label="weekdays"
         variant="outlined"
-        dense
         hide-details
       ></v-select>
     </v-sheet>
diff --git a/packages/docs/src/examples/v-chip/event-action-chips.vue b/packages/docs/src/examples/v-chip/event-action-chips.vue
index 6303aa9cab4..b86bf2ab2b0 100644
--- a/packages/docs/src/examples/v-chip/event-action-chips.vue
+++ b/packages/docs/src/examples/v-chip/event-action-chips.vue
@@ -21,10 +21,7 @@
           class="me-4"
           size="24"
         >
-          <v-img
-            src="https://cdn.vuetifyjs.com/images/weather/part-cloud-48px.png"
-            contain
-          ></v-img>
+          <v-img src="https://cdn.vuetifyjs.com/images/weather/part-cloud-48px.png"></v-img>
         </v-avatar>
 
         <span class="text-body-2 text-grey">81° / 62°</span>
diff --git a/packages/docs/src/examples/v-chip/misc-in-selects.vue b/packages/docs/src/examples/v-chip/misc-in-selects.vue
index 861c3013afb..a4131bd0346 100644
--- a/packages/docs/src/examples/v-chip/misc-in-selects.vue
+++ b/packages/docs/src/examples/v-chip/misc-in-selects.vue
@@ -7,17 +7,12 @@
     variant="solo"
     chips
     clearable
+    closable-chips
     multiple
   >
-    <template v-slot:selection="{ attrs, item, select, selected }">
-      <v-chip
-        v-bind="attrs"
-        :model-value="selected"
-        closable
-        @click="select"
-        @click:close="remove(item)"
-      >
-        <strong>{{ item }}</strong>&nbsp;
+    <template v-slot:chip="{ props, item }">
+      <v-chip v-bind="props">
+        <strong>{{ item.raw }}</strong>&nbsp;
         <span>(interest)</span>
       </v-chip>
     </template>
@@ -30,10 +25,6 @@
   const items = ['Streaming', 'Eating']
 
   const chips = ref(['Programming', 'Playing video games', 'Watching movies', 'Sleeping'])
-
-  function remove (item) {
-    chips.value.splice(chips.value.indexOf(item), 1)
-  }
 </script>
 
 <script>
@@ -44,11 +35,5 @@
         items: ['Streaming', 'Eating'],
       }
     },
-
-    methods: {
-      remove (item) {
-        this.chips.splice(this.chips.indexOf(item), 1)
-      },
-    },
   }
 </script>
diff --git a/packages/docs/src/examples/v-chip/prop-closable.vue b/packages/docs/src/examples/v-chip/prop-closable.vue
index 2e9e7936257..3fcba7ab771 100644
--- a/packages/docs/src/examples/v-chip/prop-closable.vue
+++ b/packages/docs/src/examples/v-chip/prop-closable.vue
@@ -12,8 +12,6 @@
     <v-btn
       v-if="!chip"
       color="primary"
-      close
-      dark
       @click="chip = true"
     >
       Reset Chip
diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
index d671d17b4ec..3c20bf5abf3 100644
--- a/packages/docs/src/examples/v-data-iterator/misc-filter.vue
+++ b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -49,8 +49,8 @@
                     class="text-none"
                     size="small"
                     text="Read"
+                    variant="flat"
                     border
-                    flat
                   >
                   </v-btn>
                 </div>
diff --git a/packages/docs/src/examples/v-data-table/misc-crud.vue b/packages/docs/src/examples/v-data-table/misc-crud.vue
index a4c9378fbf0..f09f9ab76c7 100644
--- a/packages/docs/src/examples/v-data-table/misc-crud.vue
+++ b/packages/docs/src/examples/v-data-table/misc-crud.vue
@@ -23,7 +23,6 @@
             <v-btn
               class="mb-2"
               color="primary"
-              dark
               v-bind="props"
             >
               New Item
diff --git a/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
index 47f3e693714..4e4b29d49a4 100644
--- a/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
+++ b/packages/docs/src/examples/v-data-table/misc-edit-dialog.vue
@@ -59,12 +59,8 @@
     >
       {{ snackText }}
 
-      <template v-slot:action="{ attrs }">
-        <v-btn
-          v-bind="attrs"
-          variant="text"
-          @click="snack = false"
-        >
+      <template v-slot:actions>
+        <v-btn @click="snack = false">
           Close
         </v-btn>
       </template>
diff --git a/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
index ea26f3d94d3..29dc517b1cc 100644
--- a/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
+++ b/packages/docs/src/examples/v-date-picker-month/misc-dialog-and-menu.vue
@@ -12,16 +12,14 @@
         max-width="290px"
         min-width="auto"
         transition="scale-transition"
-        offset-y
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-text-field
             v-model="date"
             label="Picker in menu"
             prepend-icon="mdi-calendar"
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-text-field>
         </template>
         <v-date-picker
@@ -60,14 +58,13 @@
         width="290px"
         persistent
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-text-field
             v-model="date"
             label="Picker in dialog"
             prepend-icon="mdi-calendar"
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-text-field>
         </template>
         <v-date-picker
diff --git a/packages/docs/src/examples/v-date-picker/misc-birthday.vue b/packages/docs/src/examples/v-date-picker/misc-birthday.vue
index 6ff68bf4fce..9806dc13d7a 100644
--- a/packages/docs/src/examples/v-date-picker/misc-birthday.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-birthday.vue
@@ -7,16 +7,14 @@
       :close-on-content-click="false"
       min-width="auto"
       transition="scale-transition"
-      offset-y
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template v-slot:activator="{ props }">
         <v-text-field
           v-model="date"
           label="Birthday date"
           prepend-icon="mdi-calendar"
           readonly
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
         ></v-text-field>
       </template>
       <v-date-picker
diff --git a/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
index 591a77e5d9a..f7ed78b9e8c 100644
--- a/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-dialog-and-menu.vue
@@ -12,16 +12,14 @@
         :close-on-content-click="false"
         min-width="auto"
         transition="scale-transition"
-        offset-y
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-text-field
             v-model="date"
             label="Picker in menu"
             prepend-icon="mdi-calendar"
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-text-field>
         </template>
         <v-date-picker
@@ -56,18 +54,16 @@
       <v-dialog
         ref="dialog"
         v-model="modal"
-        v-model:return-value="date"
         width="290px"
         persistent
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-text-field
             v-model="date"
             label="Picker in dialog"
             prepend-icon="mdi-calendar"
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-text-field>
         </template>
         <v-date-picker
@@ -100,24 +96,21 @@
       <v-menu
         v-model="menu2"
         :close-on-content-click="false"
-        :nudge-right="40"
         min-width="auto"
         transition="scale-transition"
-        offset-y
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-text-field
             v-model="date"
             label="Picker without buttons"
             prepend-icon="mdi-calendar"
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-text-field>
         </template>
         <v-date-picker
           v-model="date"
-          @input="menu2 = false"
+          @change="menu2 = false"
         ></v-date-picker>
       </v-menu>
     </v-col>
diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
index 184eef8f14a..780bce63442 100644
--- a/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-formatting-external-libraries.vue
@@ -10,14 +10,13 @@
           :close-on-content-click="false"
           max-width="290"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-text-field
               :model-value="computedDateFormattedMomentjs"
               label="Formatted with Moment.js"
               clearable
               readonly
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
               @click:clear="date = null"
             ></v-text-field>
           </template>
@@ -37,14 +36,13 @@
           :close-on-content-click="false"
           max-width="290"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-text-field
               :model-value="computedDateFormattedDatefns"
               label="Formatted with datefns"
               clearable
               readonly
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
               @click:clear="date = null"
             ></v-text-field>
           </template>
diff --git a/packages/docs/src/examples/v-date-picker/misc-formatting.vue b/packages/docs/src/examples/v-date-picker/misc-formatting.vue
index e799f45c508..5222e8c7fde 100644
--- a/packages/docs/src/examples/v-date-picker/misc-formatting.vue
+++ b/packages/docs/src/examples/v-date-picker/misc-formatting.vue
@@ -12,17 +12,15 @@
           max-width="290px"
           min-width="auto"
           transition="scale-transition"
-          offset-y
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-text-field
               v-model="dateFormatted"
               hint="MM/DD/YYYY format"
               label="Date"
               prepend-icon="mdi-calendar"
               persistent-hint
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
               @blur="date = parseDate(dateFormatted)"
             ></v-text-field>
           </template>
@@ -45,9 +43,8 @@
           max-width="290px"
           min-width="auto"
           transition="scale-transition"
-          offset-y
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-text-field
               v-model="computedDateFormatted"
               hint="MM/DD/YYYY format"
@@ -55,8 +52,7 @@
               prepend-icon="mdi-calendar"
               persistent-hint
               readonly
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
             ></v-text-field>
           </template>
           <v-date-picker
diff --git a/packages/docs/src/examples/v-date-picker/prop-multiple.vue b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
index 10ff8c2e36d..47fb2887484 100644
--- a/packages/docs/src/examples/v-date-picker/prop-multiple.vue
+++ b/packages/docs/src/examples/v-date-picker/prop-multiple.vue
@@ -20,9 +20,8 @@
         :close-on-content-click="false"
         min-width="auto"
         transition="scale-transition"
-        offset-y
       >
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-combobox
             v-model="dates"
             label="Multiple picker in menu"
@@ -30,8 +29,7 @@
             chips
             multiple
             readonly
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
           ></v-combobox>
         </template>
         <v-date-picker
diff --git a/packages/docs/src/examples/v-dialog/misc-without-activator.vue b/packages/docs/src/examples/v-dialog/misc-without-activator.vue
index e796acd91ad..527b31fdb84 100644
--- a/packages/docs/src/examples/v-dialog/misc-without-activator.vue
+++ b/packages/docs/src/examples/v-dialog/misc-without-activator.vue
@@ -2,7 +2,6 @@
   <v-row justify="center">
     <v-btn
       color="primary"
-      dark
       @click.stop="dialog = true"
     >
       Open Dialog
diff --git a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
index 7e0e9896349..dbe6287f8bc 100644
--- a/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
+++ b/packages/docs/src/examples/v-dialog/prop-fullscreen.vue
@@ -34,10 +34,7 @@
           </v-toolbar-items>
         </v-toolbar>
 
-        <v-list
-          lines="two"
-          subheader
-        >
+        <v-list lines="two">
           <v-list-subheader>User Controls</v-list-subheader>
 
           <v-list-item
diff --git a/packages/docs/src/examples/v-dialog/prop-scrollable.vue b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
index 8d0bda4f638..266a03b85cd 100644
--- a/packages/docs/src/examples/v-dialog/prop-scrollable.vue
+++ b/packages/docs/src/examples/v-dialog/prop-scrollable.vue
@@ -25,7 +25,6 @@
             <v-radio-group
               v-model="dialog"
               messages="Select a Country from the radio group"
-              column
             >
               <v-radio
                 label="Bahamas, The"
diff --git a/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue b/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue
deleted file mode 100644
index cff3d0e98eb..00000000000
--- a/packages/docs/src/examples/v-expansion-panels/prop-focusable.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <v-expansion-panels focusable>
-    <v-expansion-panel
-      v-for="i in 5"
-      :key="i"
-    >
-      <v-expansion-panel-title>Item</v-expansion-panel-title>
-      <v-expansion-panel-text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-  </v-expansion-panels>
-</template>
diff --git a/packages/docs/src/examples/v-fab/misc-lateral-screens.vue b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue
index a57d7790387..f15da27cdc5 100644
--- a/packages/docs/src/examples/v-fab/misc-lateral-screens.vue
+++ b/packages/docs/src/examples/v-fab/misc-lateral-screens.vue
@@ -22,14 +22,13 @@
           <v-tabs
             v-model="tabs"
             align-tabs="title"
+            slider-color="pink"
           >
             <v-tab text="Item One" value="one"></v-tab>
 
             <v-tab text="Item Two" value="two"></v-tab>
 
             <v-tab text="Item Three" value="three"></v-tab>
-
-            <v-tabs-slider color="pink"></v-tabs-slider>
           </v-tabs>
         </template>
       </v-app-bar>
diff --git a/packages/docs/src/examples/v-fab/misc-small.vue b/packages/docs/src/examples/v-fab/misc-small.vue
index 6d3e8cbd714..6801d768b35 100644
--- a/packages/docs/src/examples/v-fab/misc-small.vue
+++ b/packages/docs/src/examples/v-fab/misc-small.vue
@@ -29,10 +29,7 @@
       </template>
     </v-toolbar>
 
-    <v-list
-      lines="two"
-      subheader
-    >
+    <v-list lines="two">
       <v-list-subheader title="Folders" inset></v-list-subheader>
 
       <v-list-item
diff --git a/packages/docs/src/examples/v-hover/misc-transition.vue b/packages/docs/src/examples/v-hover/misc-transition.vue
index 1f898d6bbd2..71e17601c90 100644
--- a/packages/docs/src/examples/v-hover/misc-transition.vue
+++ b/packages/docs/src/examples/v-hover/misc-transition.vue
@@ -15,7 +15,7 @@
           <v-expand-transition>
             <div
               v-if="isHovering"
-              class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal text-h2"
+              class="d-flex bg-orange-darken-2 v-card--reveal text-h2"
               style="height: 100%;"
             >
               $14.99
diff --git a/packages/docs/src/examples/v-img/prop-contain.vue b/packages/docs/src/examples/v-img/prop-contain.vue
index 7b6d8183104..46230bbe920 100644
--- a/packages/docs/src/examples/v-img/prop-contain.vue
+++ b/packages/docs/src/examples/v-img/prop-contain.vue
@@ -38,7 +38,6 @@
         <v-img
           aspect-ratio="1.7"
           src="https://picsum.photos/510/300?random"
-          contain
         ></v-img>
         <div class="subheading pt-4">
           Too high
@@ -46,7 +45,6 @@
         <v-img
           aspect-ratio="2"
           src="https://picsum.photos/510/300?random"
-          contain
         ></v-img>
         <div class="subheading pt-4">
           Too low
@@ -54,7 +52,6 @@
         <v-img
           aspect-ratio="1.4"
           src="https://picsum.photos/510/300?random"
-          contain
         ></v-img>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-input/prop-success.vue b/packages/docs/src/examples/v-input/prop-success.vue
deleted file mode 100644
index e8786548462..00000000000
--- a/packages/docs/src/examples/v-input/prop-success.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <v-input
-    :success-messages="['Success']"
-    disabled
-    success
-  >
-    Input
-  </v-input>
-</template>
diff --git a/packages/docs/src/examples/v-list/misc-card-list.vue b/packages/docs/src/examples/v-list/misc-card-list.vue
index 21e2ee46d76..a46ae6d38df 100644
--- a/packages/docs/src/examples/v-list/misc-card-list.vue
+++ b/packages/docs/src/examples/v-list/misc-card-list.vue
@@ -39,66 +39,70 @@
 
     <v-list lines="two">
       <v-list-item>
-        <v-list-item-avatar start>
-          <v-icon color="indigo" icon="mdi-phone"></v-icon>
-        </v-list-item-avatar>
-
-        <v-list-item-header>
-          <v-list-item-title>(650) 555-1234</v-list-item-title>
-          <v-list-item-subtitle>Mobile</v-list-item-subtitle>
-        </v-list-item-header>
-
-        <v-list-item-avatar end>
-          <v-icon icon="mdi-message-text"></v-icon>
-        </v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-icon color="indigo" icon="mdi-phone"></v-icon>
+          </v-avatar>
+        </template>
+
+        <v-list-item-title>(650) 555-1234</v-list-item-title>
+        <v-list-item-subtitle>Mobile</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <v-avatar>
+            <v-icon icon="mdi-message-text"></v-icon>
+          </v-avatar>
+        </template>
       </v-list-item>
 
       <v-list-item>
-        <v-list-item-avatar end></v-list-item-avatar>
-
-        <v-list-item-header>
-          <v-list-item-title>(323) 555-6789</v-list-item-title>
-          <v-list-item-subtitle>Work</v-list-item-subtitle>
-        </v-list-item-header>
-
-        <v-list-item-avatar end>
-          <v-icon icon="mdi-message-text"></v-icon>
-        </v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar></v-avatar>
+        </template>
+
+        <v-list-item-title>(323) 555-6789</v-list-item-title>
+        <v-list-item-subtitle>Work</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <v-avatar>
+            <v-icon icon="mdi-message-text"></v-icon>
+          </v-avatar>
+        </template>
       </v-list-item>
 
       <v-divider inset></v-divider>
 
       <v-list-item>
-        <v-list-item-avatar start>
-          <v-icon color="indigo" icon="mdi-email"></v-icon>
-        </v-list-item-avatar>
-
-        <v-list-item-header>
-          <v-list-item-title>aliconnors@example.com</v-list-item-title>
-          <v-list-item-subtitle>Personal</v-list-item-subtitle>
-        </v-list-item-header>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-icon color="indigo" icon="mdi-email"></v-icon>
+          </v-avatar>
+        </template>
+
+        <v-list-item-title>aliconnors@example.com</v-list-item-title>
+        <v-list-item-subtitle>Personal</v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item>
-        <v-list-item-avatar end></v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar></v-avatar>
+        </template>
 
-        <v-list-item-header>
-          <v-list-item-title>ali_connors@example.com</v-list-item-title>
-          <v-list-item-subtitle>Work</v-list-item-subtitle>
-        </v-list-item-header>
+        <v-list-item-title>ali_connors@example.com</v-list-item-title>
+        <v-list-item-subtitle>Work</v-list-item-subtitle>
       </v-list-item>
 
       <v-divider inset></v-divider>
 
       <v-list-item>
-        <v-list-item-avatar start>
-          <v-icon color="indigo" icon="mdi-map-marker"></v-icon>
-        </v-list-item-avatar>
-
-        <v-list-item-header>
-          <v-list-item-title>1400 Main Street</v-list-item-title>
-          <v-list-item-subtitle>Orlando, FL 79938</v-list-item-subtitle>
-        </v-list-item-header>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-icon color="indigo" icon="mdi-map-marker"></v-icon>
+          </v-avatar>
+        </template>
+
+        <v-list-item-title>1400 Main Street</v-list-item-title>
+        <v-list-item-subtitle>Orlando, FL 79938</v-list-item-subtitle>
       </v-list-item>
     </v-list>
   </v-card>
diff --git a/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
index 0a1ba11056c..b6911ec514b 100644
--- a/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
+++ b/packages/docs/src/examples/v-list/misc-simple-avatar-list.vue
@@ -26,22 +26,24 @@
         v-for="item in items"
         :key="item.title"
       >
-        <v-list-item-avatar>
-          <v-icon
-            v-if="item.icon"
-            color="pink"
-          >
-            mdi-star
-          </v-icon>
-        </v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-icon
+              v-if="item.icon"
+              color="pink"
+            >
+              mdi-star
+            </v-icon>
+          </v-avatar>
+        </template>
 
-        <v-list-item-header>
-          <v-list-item-title v-text="item.title"></v-list-item-title>
-        </v-list-item-header>
+        <v-list-item-title>{{ item.title }}</v-list-item-title>
 
-        <v-list-item-avatar>
-          <v-img :src="item.avatar"></v-img>
-        </v-list-item-avatar>
+        <template v-slot:append>
+          <v-avatar>
+            <v-img :src="item.avatar"></v-img>
+          </v-avatar>
+        </template>
       </v-list-item>
     </v-list>
   </v-card>
diff --git a/packages/docs/src/examples/v-list/misc-single-line-list.vue b/packages/docs/src/examples/v-list/misc-single-line-list.vue
index 78347cd4b8e..b47b70391b6 100644
--- a/packages/docs/src/examples/v-list/misc-single-line-list.vue
+++ b/packages/docs/src/examples/v-list/misc-single-line-list.vue
@@ -15,51 +15,47 @@
       </v-btn>
     </v-toolbar>
 
-    <v-list subheader>
+    <v-list>
       <v-list-subheader>Recent chat</v-list-subheader>
 
       <v-list-item
         v-for="chat in recent"
         :key="chat.title"
       >
-        <v-list-item-avatar>
-          <v-img
-            :alt="`${chat.title} avatar`"
-            :src="chat.avatar"
-          ></v-img>
-        </v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-img :src="chat.avatar"></v-img>
+          </v-avatar>
+        </template>
 
-        <v-list-item-header>
-          <v-list-item-title v-text="chat.title"></v-list-item-title>
-        </v-list-item-header>
+        <v-list-item-title>{{ chat.title }}</v-list-item-title>
 
-        <v-list-item-avatar>
-          <v-icon :color="chat.active ? 'deep-purple accent-4' : 'grey'">
-            mdi-message-outline
-          </v-icon>
-        </v-list-item-avatar>
+        <template v-slot:append>
+          <v-avatar>
+            <v-icon :color="chat.active ? 'deep-purple accent-4' : 'grey'">
+              mdi-message-outline
+            </v-icon>
+          </v-avatar>
+        </template>
       </v-list-item>
     </v-list>
 
     <v-divider></v-divider>
 
-    <v-list subheader>
+    <v-list>
       <v-list-subheader>Previous chats</v-list-subheader>
 
       <v-list-item
         v-for="chat in previous"
         :key="chat.title"
       >
-        <v-list-item-avatar>
-          <v-img
-            :alt="`${chat.title} avatar`"
-            :src="chat.avatar"
-          ></v-img>
-        </v-list-item-avatar>
+        <template v-slot:prepend>
+          <v-avatar>
+            <v-img :src="chat.avatar"></v-img>
+          </v-avatar>
+        </template>
 
-        <v-list-item-header>
-          <v-list-item-title v-text="chat.title"></v-list-item-title>
-        </v-list-item-header>
+        <v-list-item-title v-text="chat.title"></v-list-item-title>
       </v-list-item>
     </v-list>
   </v-card>
diff --git a/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
index 76804bd8ec3..63205a157af 100644
--- a/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
+++ b/packages/docs/src/examples/v-list/misc-subheadings-and-dividers.vue
@@ -12,10 +12,7 @@
       <v-toolbar-title>Settings</v-toolbar-title>
     </v-toolbar>
 
-    <v-list
-      lines="two"
-      subheader
-    >
+    <v-list lines="two">
       <v-list-subheader>General</v-list-subheader>
 
       <v-list-item>
@@ -31,81 +28,72 @@
 
     <v-divider></v-divider>
 
-    <v-list
-      lines="two"
-      flat
-      subheader
-    >
+    <v-list v-model="settings" lines="two" select-strategy="leaf">
       <v-list-subheader>Hangout notifications</v-list-subheader>
 
-      <v-list-item-group
-        v-model="settings"
-        multiple
-      >
-        <v-list-item>
-          <template v-slot:default="{ active, }">
-            <v-list-item-action>
-              <v-checkbox
-                :model-value="active"
-                color="primary"
-              ></v-checkbox>
-            </v-list-item-action>
-
-            <v-list-item-header>
-              <v-list-item-title>Notifications</v-list-item-title>
-              <v-list-item-subtitle>Allow notifications</v-list-item-subtitle>
-            </v-list-item-header>
-          </template>
-        </v-list-item>
-
-        <v-list-item>
-          <template v-slot:default="{ active }">
-            <v-list-item-action>
-              <v-checkbox
-                :model-value="active"
-                color="primary"
-              ></v-checkbox>
-            </v-list-item-action>
-
-            <v-list-item-header>
-              <v-list-item-title>Sound</v-list-item-title>
-              <v-list-item-subtitle>Hangouts message</v-list-item-subtitle>
-            </v-list-item-header>
-          </template>
-        </v-list-item>
-
-        <v-list-item>
-          <template v-slot:default="{ active }">
-            <v-list-item-action>
-              <v-checkbox
-                :model-value="active"
-                color="primary"
-              ></v-checkbox>
-            </v-list-item-action>
-
-            <v-list-item-header>
-              <v-list-item-title>Video sounds</v-list-item-title>
-              <v-list-item-subtitle>Hangouts video call</v-list-item-subtitle>
-            </v-list-item-header>
-          </template>
-        </v-list-item>
-
-        <v-list-item>
-          <template v-slot:default="{ active }">
-            <v-list-item-action>
-              <v-checkbox
-                :model-value="active"
-                color="primary"
-              ></v-checkbox>
-            </v-list-item-action>
-
-            <v-list-item-header>
-              <v-list-item-title>Invites</v-list-item-title>
-              <v-list-item-subtitle>Notify when receiving invites</v-list-item-subtitle>
-            </v-list-item-header>
-          </template>
-        </v-list-item>
-      </v-list-item-group>
+      <v-list-item>
+        <template v-slot:default="{ active, }">
+          <v-list-item-action>
+            <v-checkbox
+              :model-value="active"
+              color="primary"
+            ></v-checkbox>
+          </v-list-item-action>
+
+          <v-list-item-header>
+            <v-list-item-title>Notifications</v-list-item-title>
+            <v-list-item-subtitle>Allow notifications</v-list-item-subtitle>
+          </v-list-item-header>
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <template v-slot:default="{ active }">
+          <v-list-item-action>
+            <v-checkbox
+              :model-value="active"
+              color="primary"
+            ></v-checkbox>
+          </v-list-item-action>
+
+          <v-list-item-header>
+            <v-list-item-title>Sound</v-list-item-title>
+            <v-list-item-subtitle>Hangouts message</v-list-item-subtitle>
+          </v-list-item-header>
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <template v-slot:default="{ active }">
+          <v-list-item-action>
+            <v-checkbox
+              :model-value="active"
+              color="primary"
+            ></v-checkbox>
+          </v-list-item-action>
+
+          <v-list-item-header>
+            <v-list-item-title>Video sounds</v-list-item-title>
+            <v-list-item-subtitle>Hangouts video call</v-list-item-subtitle>
+          </v-list-item-header>
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <template v-slot:default="{ active }">
+          <v-list-item-action>
+            <v-checkbox
+              :model-value="active"
+              color="primary"
+            ></v-checkbox>
+          </v-list-item-action>
+
+          <v-list-item-header>
+            <v-list-item-title>Invites</v-list-item-title>
+            <v-list-item-subtitle>Notify when receiving invites</v-list-item-subtitle>
+          </v-list-item-header>
+        </template>
+      </v-list-item>
     </v-list>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-list/slot-expansion-lists.vue b/packages/docs/src/examples/v-list/slot-expansion-lists.vue
index 66ab3a5388b..b268bb2a82d 100644
--- a/packages/docs/src/examples/v-list/slot-expansion-lists.vue
+++ b/packages/docs/src/examples/v-list/slot-expansion-lists.vue
@@ -24,7 +24,6 @@
         :key="item.title"
         v-model="item.active"
         :prepend-icon="item.action"
-        no-action
       >
         <template v-slot:activator>
           <v-list-item-header>
diff --git a/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
index 4986b271daf..b8f57dcacd5 100644
--- a/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
+++ b/packages/docs/src/examples/v-menu/prop-absolute-without-activator.vue
@@ -15,10 +15,8 @@
 
     <v-menu
       v-model="showMenu"
-      :position-x="x"
-      :position-y="y"
+      :target="[x, y]"
       absolute
-      offset-y
     >
       <v-list>
         <v-list-item
diff --git a/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
index 7dfbfd056fc..c343ff242bf 100644
--- a/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
+++ b/packages/docs/src/examples/v-menu/prop-close-on-content-click.vue
@@ -11,7 +11,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Dropdown
diff --git a/packages/docs/src/examples/v-menu/prop-location.vue b/packages/docs/src/examples/v-menu/prop-location.vue
index 80614b2aa0d..2af97955f85 100644
--- a/packages/docs/src/examples/v-menu/prop-location.vue
+++ b/packages/docs/src/examples/v-menu/prop-location.vue
@@ -9,7 +9,6 @@
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           Dropdown
diff --git a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
index 6043ddcd14e..3c67ee03589 100644
--- a/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
+++ b/packages/docs/src/examples/v-navigation-drawer/prop-bottom-drawer.vue
@@ -1,10 +1,7 @@
 <template>
   <v-card>
     <v-layout>
-      <v-app-bar
-        color="primary"
-        prominent
-      >
+      <v-app-bar color="primary">
         <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
 
         <v-toolbar-title>My files</v-toolbar-title>
diff --git a/packages/docs/src/examples/v-overlay/misc-advanced.vue b/packages/docs/src/examples/v-overlay/misc-advanced.vue
index 84e6901fa48..e38c28be6d9 100644
--- a/packages/docs/src/examples/v-overlay/misc-advanced.vue
+++ b/packages/docs/src/examples/v-overlay/misc-advanced.vue
@@ -18,10 +18,9 @@
         <v-card-title>
           <v-rating
             :model-value="4"
-            background-color="orange"
             class="me-2"
             color="orange"
-            dense
+            density="compact"
             hover
           ></v-rating>
           <span class="text-primary text-subtitle-2">64 Reviews</span>
diff --git a/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
index 2cbf82db138..ef29b7785e6 100644
--- a/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
+++ b/packages/docs/src/examples/v-progress-linear/misc-file-loader.vue
@@ -3,10 +3,7 @@
     class="mx-auto"
     max-width="344"
   >
-    <v-toolbar
-      color="deep-purple-accent-4"
-      prominent
-    >
+    <v-toolbar color="deep-purple-accent-4">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
       <v-toolbar-title>My Files</v-toolbar-title>
@@ -15,7 +12,7 @@
         color="white"
         location="bottom left"
         absolute
-        fab
+        icon
       >
         <v-icon>mdi-plus</v-icon>
       </v-btn>
diff --git a/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
index afa935714ff..081eb4ad787 100644
--- a/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
+++ b/packages/docs/src/examples/v-progress-linear/misc-toolbar-loader.vue
@@ -14,8 +14,8 @@
         :active="loading"
         :indeterminate="loading"
         color="deep-purple-accent-4"
+        location="bottom"
         absolute
-        bottom
       ></v-progress-linear>
 
       <v-spacer></v-spacer>
diff --git a/packages/docs/src/examples/v-radio-group/prop-colors.vue b/packages/docs/src/examples/v-radio-group/prop-colors.vue
index a3c96edb620..aba02c673d5 100644
--- a/packages/docs/src/examples/v-radio-group/prop-colors.vue
+++ b/packages/docs/src/examples/v-radio-group/prop-colors.vue
@@ -8,10 +8,7 @@
             md="6"
             sm="6"
           >
-            <v-radio-group
-              v-model="ex7"
-              column
-            >
+            <v-radio-group v-model="ex7">
               <v-radio
                 color="red"
                 label="red"
@@ -49,10 +46,7 @@
             md="6"
             sm="6"
           >
-            <v-radio-group
-              v-model="ex8"
-              column
-            >
+            <v-radio-group v-model="ex8">
               <v-radio
                 color="primary"
                 label="primary"
diff --git a/packages/docs/src/examples/v-radio-group/prop-direction.vue b/packages/docs/src/examples/v-radio-group/prop-direction.vue
index e243b33475a..37b76b834ca 100644
--- a/packages/docs/src/examples/v-radio-group/prop-direction.vue
+++ b/packages/docs/src/examples/v-radio-group/prop-direction.vue
@@ -1,9 +1,6 @@
 <template>
   <v-container fluid>
-    <v-radio-group
-      v-model="column"
-      column
-    >
+    <v-radio-group v-model="column">
       <v-radio
         label="Option 1"
         value="radio-1"
diff --git a/packages/docs/src/examples/v-rating/misc-card.vue b/packages/docs/src/examples/v-rating/misc-card.vue
index 4b302ed5a63..cde23a28aa3 100644
--- a/packages/docs/src/examples/v-rating/misc-card.vue
+++ b/packages/docs/src/examples/v-rating/misc-card.vue
@@ -20,7 +20,6 @@
         height="125px"
         src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
         style="flex-basis: 125px"
-        contain
       ></v-img>
     </div>
 
diff --git a/packages/docs/src/examples/v-rating/prop-icons.vue b/packages/docs/src/examples/v-rating/prop-icons.vue
index e9a88dd8fa6..29b964e794b 100644
--- a/packages/docs/src/examples/v-rating/prop-icons.vue
+++ b/packages/docs/src/examples/v-rating/prop-icons.vue
@@ -4,7 +4,6 @@
       v-model="rating"
       empty-icon="mdi-circle-outline"
       full-icon="mdi-circle"
-      half-icon="mdi-circle-half"
       half-increments
       hover
     ></v-rating>
diff --git a/packages/docs/src/examples/v-scroll/usage.vue b/packages/docs/src/examples/v-scroll/usage.vue
index 46042953853..c252adbd99e 100644
--- a/packages/docs/src/examples/v-scroll/usage.vue
+++ b/packages/docs/src/examples/v-scroll/usage.vue
@@ -11,7 +11,7 @@
 
         <v-radio-group
           v-model="type"
-          row
+          inline
         >
           <v-radio
             label="Number"
diff --git a/packages/docs/src/examples/v-slider/prop-inverse-label.vue b/packages/docs/src/examples/v-slider/prop-inverse-label.vue
deleted file mode 100644
index bcfbd2ac45a..00000000000
--- a/packages/docs/src/examples/v-slider/prop-inverse-label.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12">
-        <v-slider
-          label="Inverse label"
-          model-value="30"
-          inverse-label
-        ></v-slider>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
diff --git a/packages/docs/src/examples/v-snackbar-queue/usage.vue b/packages/docs/src/examples/v-snackbar-queue/usage.vue
index 0f911b1479e..40f00c54cf8 100644
--- a/packages/docs/src/examples/v-snackbar-queue/usage.vue
+++ b/packages/docs/src/examples/v-snackbar-queue/usage.vue
@@ -17,7 +17,7 @@
             :disabled="!text"
             append-icon="mdi-arrow-right"
             text="Queue"
-            flat
+            variant="flat"
             slim
             @click="onClick"
           ></v-btn>
diff --git a/packages/docs/src/examples/v-snackbar/prop-variants.vue b/packages/docs/src/examples/v-snackbar/prop-variants.vue
index 4a923408115..e44dd4ca759 100644
--- a/packages/docs/src/examples/v-snackbar/prop-variants.vue
+++ b/packages/docs/src/examples/v-snackbar/prop-variants.vue
@@ -26,8 +26,8 @@
 
     <v-snackbar
       :timeout="2000"
+      class="elevation-24"
       color="deep-purple-accent-4"
-      elevation="24"
     >
       <template v-slot:activator="{ props }">
         <v-btn class="ma-2" color="deep-purple-accent-4" v-bind="props">open</v-btn>
diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
index a2e0619037e..c11946a2a84 100644
--- a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
+++ b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
@@ -1,18 +1,14 @@
 <template>
   <v-card>
-    <v-toolbar
-      color="purple"
-      flat
-      prominent
-    >
+    <v-toolbar color="purple" flat>
       <v-text-field
         append-icon="mdi-microphone"
         class="mx-4"
         label="Search"
         prepend-inner-icon="mdi-magnify"
+        variant="solo-inverted"
         flat
         hide-details
-        solo-inverted
       ></v-text-field>
 
       <template v-slot:extension>
@@ -29,15 +25,15 @@
       </template>
     </v-toolbar>
 
-    <v-tabs-items v-model="tabs">
-      <v-tab-item>
+    <v-tabs-window v-model="tabs">
+      <v-tabs-window-item>
         <v-card flat>
           <v-card-text>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </v-card-text>
         </v-card>
-      </v-tab-item>
-      <v-tab-item>
+      </v-tabs-window-item>
+      <v-tabs-window-item>
         <v-card flat>
           <v-card-title class="text-h5">
             An awesome title
@@ -56,8 +52,8 @@
             </p>
           </v-card-text>
         </v-card>
-      </v-tab-item>
-      <v-tab-item>
+      </v-tabs-window-item>
+      <v-tabs-window-item>
         <v-card flat>
           <v-card-title class="text-h5">
             An even better title
@@ -72,8 +68,8 @@
             </p>
           </v-card-text>
         </v-card>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 
diff --git a/packages/docs/src/examples/v-tabs/misc-tab-items.vue b/packages/docs/src/examples/v-tabs/misc-tab-items.vue
index 3208dbfeefb..a0ec09646f7 100644
--- a/packages/docs/src/examples/v-tabs/misc-tab-items.vue
+++ b/packages/docs/src/examples/v-tabs/misc-tab-items.vue
@@ -11,16 +11,16 @@
       ></v-tab>
     </v-tabs>
 
-    <v-tabs-items v-model="tab">
-      <v-tab-item
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item
         v-for="item in items"
         :key="item.tab"
       >
         <v-card flat>
           <v-card-text>{{ item.content }}</v-card-text>
         </v-card>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 
diff --git a/packages/docs/src/examples/v-text-field/misc-custom-validation.vue b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
index a12ddab84c7..5963d3e24e1 100644
--- a/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
+++ b/packages/docs/src/examples/v-text-field/misc-custom-validation.vue
@@ -75,12 +75,10 @@
               v-if="formHasErrors"
               location="left"
             >
-              <template v-slot:activator="{ on, attrs }">
+              <template v-slot:activator="{ props }">
                 <v-btn
-                  class="my-0"
                   icon
-                  v-bind="attrs"
-                  v-on="on"
+                  v-bind="props"
                   @click="resetForm"
                 >
                   <v-icon>mdi-refresh</v-icon>
diff --git a/packages/docs/src/examples/v-textarea/prop-rows.vue b/packages/docs/src/examples/v-textarea/prop-rows.vue
index a7c9cf637cc..029d539eeb1 100644
--- a/packages/docs/src/examples/v-textarea/prop-rows.vue
+++ b/packages/docs/src/examples/v-textarea/prop-rows.vue
@@ -35,7 +35,6 @@
           rows="3"
           variant="outlined"
           auto-grow
-          shaped
         ></v-textarea>
       </v-col>
       <v-col
@@ -48,7 +47,6 @@
           rows="4"
           variant="filled"
           auto-grow
-          shaped
         ></v-textarea>
       </v-col>
     </v-row>
diff --git a/packages/docs/src/examples/v-toolbar/prop-background.vue b/packages/docs/src/examples/v-toolbar/prop-background.vue
index 6d8892866f0..87b0129d6b9 100644
--- a/packages/docs/src/examples/v-toolbar/prop-background.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-background.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <v-toolbar
-      image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
-      dark
-      prominent
-    >
+    <v-toolbar image="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
       <v-toolbar-title>Vuetify</v-toolbar-title>
diff --git a/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
index 9448d038c1f..9857e26b52e 100644
--- a/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
+++ b/packages/docs/src/examples/v-toolbar/prop-light-and-dark.vue
@@ -5,7 +5,7 @@
         <div>
           <v-toolbar>
             <v-btn
-              class="hidden-xs-only"
+              class="hidden-xs"
               icon
             >
               <v-icon>mdi-arrow-left</v-icon>
@@ -16,7 +16,7 @@
             <v-spacer></v-spacer>
 
             <v-btn
-              class="hidden-xs-only"
+              class="hidden-xs"
               icon
             >
               <v-icon>mdi-magnify</v-icon>
diff --git a/packages/docs/src/examples/v-toolbar/prop-prominent.vue b/packages/docs/src/examples/v-toolbar/prop-prominent.vue
deleted file mode 100644
index 652aee2868e..00000000000
--- a/packages/docs/src/examples/v-toolbar/prop-prominent.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <v-card
-    color="grey-lighten-4"
-    height="200px"
-    rounded="0"
-    flat
-  >
-    <v-toolbar
-      extended
-      prominent
-    >
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-      <v-toolbar-title>Title</v-toolbar-title>
-
-      <v-spacer></v-spacer>
-
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-heart</v-icon>
-      </v-btn>
-
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
-    </v-toolbar>
-  </v-card>
-</template>
diff --git a/packages/docs/src/examples/v-tooltip/prop-color.vue b/packages/docs/src/examples/v-tooltip/prop-color.vue
index 02382bbee40..f172a40b609 100644
--- a/packages/docs/src/examples/v-tooltip/prop-color.vue
+++ b/packages/docs/src/examples/v-tooltip/prop-color.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="text-center d-flex align-center justify-space-around">
-    <v-tooltip color="primary" bottom>
+    <v-tooltip color="primary" location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"
-          dark
           v-bind="props"
         >
           primary
@@ -13,11 +12,10 @@
       <span>Primary tooltip</span>
     </v-tooltip>
 
-    <v-tooltip color="success" bottom>
+    <v-tooltip color="success" location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn
           color="success"
-          dark
           v-bind="props"
         >
           success
@@ -26,11 +24,10 @@
       <span>Success tooltip</span>
     </v-tooltip>
 
-    <v-tooltip color="warning" bottom>
+    <v-tooltip color="warning" location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn
           color="warning"
-          dark
           v-bind="props"
         >
           warning
@@ -39,11 +36,10 @@
       <span>Warning tooltip</span>
     </v-tooltip>
 
-    <v-tooltip color="error" bottom>
+    <v-tooltip color="error" location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn
           color="error"
-          dark
           v-bind="props"
         >
           error
diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
index 73bb7f08cbc..1b8263e340c 100644
--- a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
+++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -8,11 +8,10 @@
         v-model="search"
         clear-icon="mdi-close-circle-outline"
         label="Search Company Directory"
+        variant="solo-inverted"
         clearable
-        dark
         flat
         hide-details
-        solo-inverted
       ></v-text-field>
       <v-checkbox
         v-model="caseSensitive"
diff --git a/packages/docs/src/examples/v-window/misc-account-creation.vue b/packages/docs/src/examples/v-window/misc-account-creation.vue
index 97d49cd486b..94834b1e7d7 100644
--- a/packages/docs/src/examples/v-window/misc-account-creation.vue
+++ b/packages/docs/src/examples/v-window/misc-account-creation.vue
@@ -47,7 +47,6 @@
             class="mb-4"
             height="128"
             src="https://cdn.vuetifyjs.com/images/logos/v.svg"
-            contain
           ></v-img>
           <h3 class="text-h6 font-weight-light mb-2">
             Welcome to Vuetify
diff --git a/packages/docs/src/examples/wireframes/three-column.vue b/packages/docs/src/examples/wireframes/three-column.vue
index ea3b0a12d94..73a863e5933 100644
--- a/packages/docs/src/examples/wireframes/three-column.vue
+++ b/packages/docs/src/examples/wireframes/three-column.vue
@@ -14,8 +14,8 @@
       <v-spacer></v-spacer>
 
       <v-tabs
+        align-tabs="center"
         color="grey-darken-2"
-        centered
       >
         <v-tab
           v-for="link in links"

From 4699c1f7d2755422cc5c2f237c749e5ae3e0513c Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 28 Jan 2025 14:17:39 +1100
Subject: [PATCH 108/127] chore(ci): remove ucacher from docs build

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b1a041a5b9e..c59b178cf8d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -132,7 +132,7 @@ jobs:
       - uses: vuetifyjs/setup-action@master
       - uses: ./.github/actions/download-locales
       - run: ucacher pnpm build api
-      - run: ucacher pnpm build docs
+      - run: pnpm build docs
         env:
           NODE_OPTIONS: --max-old-space-size=4096
           VITE_COSMIC_2_BUCKET_SLUG: ${{ secrets.COSMIC_2_BUCKET_SLUG }}

From b6db70d8eeb98cbf186bceecf0600d2355c979a4 Mon Sep 17 00:00:00 2001
From: Jake Tigchelaar <jake.arduino@gmail.com>
Date: Mon, 27 Jan 2025 22:23:19 -0500
Subject: [PATCH 109/127] fix(VDataTableVirtual): add missing thead, tbody,
 tfoot slots (#19072)

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../vuetify/src/components/VDataTable/VDataTableVirtual.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
index b2714f7b0d7..e0a7de28de5 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -41,6 +41,9 @@ export type VDataTableVirtualSlots<T> = VDataTableRowsSlots<T> & VDataTableHeade
   colgroup: VDataTableVirtualSlotProps<T>
   top: VDataTableVirtualSlotProps<T>
   headers: VDataTableHeadersSlots['headers']
+  tbody: VDataTableVirtualSlotProps<T>
+  thead: VDataTableVirtualSlotProps<T>
+  tfoot: VDataTableVirtualSlotProps<T>
   bottom: VDataTableVirtualSlotProps<T>
   'body.prepend': VDataTableVirtualSlotProps<T>
   'body.append': VDataTableVirtualSlotProps<T>
@@ -213,6 +216,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                       />
                     </thead>
                   )}
+                  { slots.thead?.(slotProps.value) }
                   { !props.hideDefaultBody && (
                     <tbody>
                       <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
@@ -257,6 +261,8 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                       </tr>
                     </tbody>
                   )}
+                  { slots.tbody?.(slotProps.value) }
+                  { slots.tfoot?.(slotProps.value) }
                 </table>
               </div>
             ),

From 709637220506bf46dfe31d050349fe9c46359659 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Tue, 28 Jan 2025 04:28:05 +0100
Subject: [PATCH 110/127] docs(VDataTable): remove unused mobile prop from
 headers type (#20626)

---
 packages/vuetify/src/components/VDataTable/types.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/types.ts b/packages/vuetify/src/components/VDataTable/types.ts
index 1a9ec44a3be..f2c29926213 100644
--- a/packages/vuetify/src/components/VDataTable/types.ts
+++ b/packages/vuetify/src/components/VDataTable/types.ts
@@ -28,8 +28,6 @@ export type DataTableHeader<T = Record<string, any>> = {
   sortRaw?: DataTableCompareFunction
   filter?: FilterFunction
 
-  mobile?: boolean
-
   children?: DataTableHeader<T>[]
 }
 

From 5ffe48dceacc6fa6bbbd011fdb1eeab16fd1c3fa Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 28 Jan 2025 16:03:22 +1100
Subject: [PATCH 111/127] chore(release): publish v3.7.8

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

diff --git a/lerna.json b/lerna.json
index ac46469ea9b..90d3629b212 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.7"
+  "version": "3.7.8"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 6c70aac4684..1d44e79fd5d 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.7",
+  "version": "3.7.8",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 55193804367..7e3d04ae6ef 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.7.7",
+  "version": "3.7.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 3ae826187c5..0fa5c25b5d7 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.7",
+  "version": "3.7.8",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From bb8b3f829ee6bf4bba9190018e6afb318e88409c Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Wed, 29 Jan 2025 03:09:56 +0100
Subject: [PATCH 112/127] fix(useDisplay): keep default behavior when used
 without args (#20935)

fixes #20932
---
 packages/vuetify/src/composables/display.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
index 71d088baa78..758e5b57a45 100644
--- a/packages/vuetify/src/composables/display.ts
+++ b/packages/vuetify/src/composables/display.ts
@@ -223,7 +223,7 @@ export const makeDisplayProps = propsFactory({
 }, 'display')
 
 export function useDisplay (
-  props: DisplayProps = {},
+  props: DisplayProps = { mobile: null },
   name = getCurrentInstanceName(),
 ) {
   const display = inject(DisplaySymbol)

From 4c889f7f62069a30928906e023e661c6f05d2409 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 30 Jan 2025 12:26:10 +1100
Subject: [PATCH 113/127] chore(release): publish v3.7.9

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

diff --git a/lerna.json b/lerna.json
index 90d3629b212..ce3af3594f1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.8"
+  "version": "3.7.9"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 1d44e79fd5d..3d1f7682467 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 7e3d04ae6ef..168aecdc545 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.7.8",
+  "version": "3.7.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index 0fa5c25b5d7..e0aa2dbd5aa 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

From e85225df703b7a0841468824c7e985d8a749bb81 Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Thu, 30 Jan 2025 02:29:22 +0800
Subject: [PATCH 114/127] fix(VSelect/VAutocomplete/VCombobox): respect click
 outside (#20004)

fixes #20003

Co-authored-by: John Leider <john@vuetifyjs.com>
---
 .../VAutocomplete/VAutocomplete.tsx           | 10 +++++-
 .../src/components/VCombobox/VCombobox.tsx    | 11 ++++++-
 .../src/components/VSelect/VSelect.tsx        |  4 ++-
 packages/vuetify/src/composables/mousedown.ts | 33 +++++++++++++++++++
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 packages/vuetify/src/composables/mousedown.ts

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index ea4ad190782..a32ce2b95a2 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -21,6 +21,7 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -150,6 +151,7 @@ export const VAutocomplete = genericComponent<new <
     const label = computed(() => menu.value ? props.closeText : props.openText)
     const { items, transformIn, transformOut } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(color)
+    const { isMousedown } = useIsMousedown()
     const search = useProxiedModel(props, 'search', '')
     const model = useProxiedModel(
       props,
@@ -373,6 +375,12 @@ export const VAutocomplete = genericComponent<new <
       }
     }
 
+    function onBlur (e: FocusEvent) {
+      if (!isMousedown.value) {
+        menu.value = false
+      }
+    }
+
     watch(isFocused, (val, oldVal) => {
       if (val === oldVal) return
 
@@ -384,7 +392,6 @@ export const VAutocomplete = genericComponent<new <
         nextTick(() => isSelecting.value = false)
       } else {
         if (!props.multiple && search.value == null) model.value = []
-        menu.value = false
         if (!model.value.some(({ title }) => title === search.value)) search.value = ''
         selectionIndex.value = -1
       }
@@ -453,6 +460,7 @@ export const VAutocomplete = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
+          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 54014e7bc42..f4ee6eac4e8 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -22,6 +22,7 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { transformItem, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -166,6 +167,7 @@ export const VCombobox = genericComponent<new <
       }
     )
     const form = useForm(props)
+    const { isMousedown } = useIsMousedown()
 
     const hasChips = computed(() => !!(props.chips || slots.chip))
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
@@ -376,6 +378,13 @@ export const VCombobox = genericComponent<new <
         vTextFieldRef.value?.focus()
       }
     }
+
+    function onBlur (e: FocusEvent) {
+      if (!isMousedown.value) {
+        menu.value = false
+      }
+    }
+
     /** @param set - null means toggle */
     function select (item: ListItem | undefined, set: boolean | null = true) {
       if (!item || item.props.disabled) return
@@ -425,7 +434,6 @@ export const VCombobox = genericComponent<new <
       if (val || val === oldVal) return
 
       selectionIndex.value = -1
-      menu.value = false
 
       if (search.value) {
         if (props.multiple) {
@@ -497,6 +505,7 @@ export const VCombobox = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
+          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 88392f8d60b..c8b167347c1 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -20,6 +20,7 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { IconValue } from '@/composables/icons'
 import { makeItemsProps, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -168,6 +169,7 @@ export const VSelect = genericComponent<new <
         : model.value.length
     })
     const form = useForm(props)
+    const { isMousedown } = useIsMousedown()
     const selectedValues = computed(() => model.value.map(selection => selection.value))
     const isFocused = shallowRef(false)
     const label = computed(() => menu.value ? props.closeText : props.openText)
@@ -282,7 +284,7 @@ export const VSelect = genericComponent<new <
       }
     }
     function onBlur (e: FocusEvent) {
-      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement)) {
+      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement) && !isMousedown.value) {
         menu.value = false
       }
     }
diff --git a/packages/vuetify/src/composables/mousedown.ts b/packages/vuetify/src/composables/mousedown.ts
new file mode 100644
index 00000000000..38aa1d7d308
--- /dev/null
+++ b/packages/vuetify/src/composables/mousedown.ts
@@ -0,0 +1,33 @@
+// https://github.com/vuetifyjs/vuetify/issues/20003
+/**
+ * This composable is designed to track whether the mouse is in a mousedown state at any given time. The original motivation is that
+ * it is impossible to distinguish whether a blur event is triggered by mousedown, keydown, or via JavaScript.
+ * This composable allows for conditional logic when a blur is triggered by mousedown.
+ */
+
+// Utilities
+import { onMounted, onUnmounted, shallowRef } from 'vue'
+
+export function useIsMousedown () {
+  const isMousedown = shallowRef(false)
+
+  function mousedown () {
+    isMousedown.value = true
+  }
+
+  function mouseup () {
+    isMousedown.value = false
+  }
+
+  onMounted(() => {
+    document.body.addEventListener('mousedown', mousedown)
+    document.body.addEventListener('mouseup', mouseup)
+  })
+
+  onUnmounted(() => {
+    document.body.removeEventListener('mousedown', mousedown)
+    document.body.removeEventListener('mouseup', mouseup)
+  })
+
+  return { isMousedown }
+}

From d6fdc1b2084aaf2dc30d1fcb8d53b259260b6478 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 30 Jan 2025 20:26:03 +1100
Subject: [PATCH 115/127] fix(VExpandTransition): work around calling hooks out
 of order

---
 .../src/components/transitions/expand-transition.ts      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/transitions/expand-transition.ts b/packages/vuetify/src/components/transitions/expand-transition.ts
index b175f752b15..0311da36dde 100644
--- a/packages/vuetify/src/components/transitions/expand-transition.ts
+++ b/packages/vuetify/src/components/transitions/expand-transition.ts
@@ -26,7 +26,8 @@ export default function (expandedParentClass = '', x = false) {
     },
 
     onEnter (el: HTMLExpandElement) {
-      const initialStyle = el._initialStyle!
+      const initialStyle = el._initialStyle
+      if (!initialStyle) return
 
       el.style.setProperty('transition', 'none', 'important')
       // Hide overflow to account for collapsed margins in the calculated height
@@ -77,8 +78,10 @@ export default function (expandedParentClass = '', x = false) {
   }
 
   function resetStyles (el: HTMLExpandElement) {
-    const size = el._initialStyle![sizeProperty]
-    el.style.overflow = el._initialStyle!.overflow
+    if (!el._initialStyle) return
+
+    const size = el._initialStyle[sizeProperty]
+    el.style.overflow = el._initialStyle.overflow
     if (size != null) el.style[sizeProperty] = size
     delete el._initialStyle
   }

From a5efcf167fe82ad8d5565f6688fb957a05b7a7f2 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 3 Feb 2025 15:25:54 +1100
Subject: [PATCH 116/127] feat(VColorPicker): support emitting rgb() and hsl()
 strings

closes #20944
---
 packages/docs/src/pages/en/components/color-pickers.md |  2 +-
 .../VColorPicker/util/__tests__/index.spec.ts          |  2 ++
 .../vuetify/src/components/VColorPicker/util/index.ts  |  9 +++++++++
 packages/vuetify/src/util/__tests__/colorUtils.spec.ts |  3 +++
 packages/vuetify/src/util/colorUtils.ts                | 10 +++++++---
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md
index da101de73cc..9e86c953b6f 100644
--- a/packages/docs/src/pages/en/components/color-pickers.md
+++ b/packages/docs/src/pages/en/components/color-pickers.md
@@ -58,7 +58,7 @@ You can specify which input modes are available to your users with the `modes` p
 
 #### Model
 
-The `v-color-picker` uses the `v-model` prop to control the color displayed. It supports hex strings such as **#FF00FF** and **#FF00FF00**, and objects representing **RGBA**, **HSLA** and **HSVA** values. The component will try to emit the color in the same format that was provided. If the value is null, then the `v-color-picker` will default to emitting hex colors.
+The `v-color-picker` uses the `v-model` prop to control the color displayed. It supports hex strings such as **#FF00FF** and **#FF00FF00**, and objects representing **RGBA**, **HSLA** and **HSVA** values. The component will try to emit the color in the same format that was provided. If the value is null or an unsupported format, then the `v-color-picker` will default to emitting hex colors.
 
 <ExamplesExample file="v-color-picker/prop-model" />
 
diff --git a/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts b/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts
index 6608efde02c..b5c0908f1af 100644
--- a/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts
+++ b/packages/vuetify/src/components/VColorPicker/util/__tests__/index.spec.ts
@@ -17,6 +17,8 @@ describe('VColorPicker Utils', () => {
       [red, { h: 0, s: 1, v: 1 }, { h: 0, s: 1, v: 1 }],
       [red, { h: 0, s: 1, v: 1, a: 0.5 }, { h: 0, s: 1, v: 1, a: 1 }],
       [red, undefined, '#FF0000'],
+      [red, 'hsl(0 0 0 / 1)', 'hsl(0 100 50)'],
+      [{ ...red, a: 0.5 }, 'hsl(0 0 0 / 1)', 'hsl(0 100 50 / 0.5)'],
     ] as const
 
     it.each(cases)('When given %p and %p, extractColor util should return %p', (...args) => {
diff --git a/packages/vuetify/src/components/VColorPicker/util/index.ts b/packages/vuetify/src/components/VColorPicker/util/index.ts
index 5c4119cd886..95df98112e4 100644
--- a/packages/vuetify/src/components/VColorPicker/util/index.ts
+++ b/packages/vuetify/src/components/VColorPicker/util/index.ts
@@ -24,6 +24,15 @@ function stripAlpha (color: any, stripAlpha: boolean) {
 
 export function extractColor (color: HSV, input: any) {
   if (input == null || typeof input === 'string') {
+    const hasA = color.a !== 1
+    if (input?.startsWith('rgb(')) {
+      const { r, g, b, a } = HSVtoRGB(color)
+      return `rgb(${r} ${g} ${b}` + (hasA ? ` / ${a})` : ')')
+    } else if (input?.startsWith('hsl(')) {
+      const { h, s, l, a } = HSVtoHSL(color)
+      return `hsl(${h} ${Math.round(s * 100)} ${Math.round(l * 100)}` + (hasA ? ` / ${a})` : ')')
+    }
+
     const hex = HSVtoHex(color)
 
     if (color.a === 1) return hex.slice(0, 7)
diff --git a/packages/vuetify/src/util/__tests__/colorUtils.spec.ts b/packages/vuetify/src/util/__tests__/colorUtils.spec.ts
index 7b0e3794bcd..1c06f4d5993 100644
--- a/packages/vuetify/src/util/__tests__/colorUtils.spec.ts
+++ b/packages/vuetify/src/util/__tests__/colorUtils.spec.ts
@@ -45,9 +45,12 @@ describe('parseColor', () => {
 
   it('should parse a CSS color string', () => {
     expect(parseColor('rgb(255, 0, 0)')).toEqual({ r: 255, g: 0, b: 0, a: undefined })
+    expect(parseColor('rgb(255 0 0)')).toEqual({ r: 255, g: 0, b: 0, a: undefined })
     expect(parseColor('rgba(255, 0, 0, 0.5)')).toEqual({ r: 255, g: 0, b: 0, a: 0.5 })
+    expect(parseColor('rgba(255 0 0 / 0.5)')).toEqual({ r: 255, g: 0, b: 0, a: 0.5 })
     expect(parseColor('hsl(100, 50%, 25%)')).toEqual({ r: 53, g: 96, b: 32, a: undefined })
     expect(parseColor('hsla(100, 50%, 25%, 0.5)')).toEqual({ r: 53, g: 96, b: 32, a: 0.5 })
+    expect(parseColor('hsl(100 50 25 / 0.5)')).toEqual({ r: 53, g: 96, b: 32, a: 0.5 })
   })
 
   it('should parse rgb object', () => {
diff --git a/packages/vuetify/src/util/colorUtils.ts b/packages/vuetify/src/util/colorUtils.ts
index 21b9f452f95..c96a135b772 100644
--- a/packages/vuetify/src/util/colorUtils.ts
+++ b/packages/vuetify/src/util/colorUtils.ts
@@ -48,9 +48,13 @@ export function parseColor (color: Color): RGB {
   } else if (typeof color === 'string' && cssColorRe.test(color)) {
     const { groups } = color.match(cssColorRe)!
     const { fn, values } = groups as { fn: keyof typeof mappers, values: string }
-    const realValues = values.split(/,\s*/)
-      .map(v => {
-        if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) {
+    const realValues = values.split(/,\s*|\s*\/\s*|\s+/)
+      .map((v, i) => {
+        if (
+          v.endsWith('%') ||
+          // unitless slv are %
+          (i > 0 && i < 3 && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn))
+        ) {
           return parseFloat(v) / 100
         } else {
           return parseFloat(v)

From 1950f2b7a9f1b66cf9292e576ac18c1ec5ee2481 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 3 Feb 2025 15:32:51 +1100
Subject: [PATCH 117/127] test(display): use effectScope

---
 .../composables/__tests__/display.spec.browser.ts    | 12 ++++++++----
 packages/vuetify/src/framework.ts                    |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/composables/__tests__/display.spec.browser.ts b/packages/vuetify/src/composables/__tests__/display.spec.browser.ts
index 5dbc704668e..3c73b38999a 100644
--- a/packages/vuetify/src/composables/__tests__/display.spec.browser.ts
+++ b/packages/vuetify/src/composables/__tests__/display.spec.browser.ts
@@ -3,6 +3,7 @@ import { createDisplay } from '../display'
 
 // Utilities
 import { page } from '@vitest/browser/context'
+import { effectScope } from 'vue'
 
 const breakpoints = [
   'xs',
@@ -262,7 +263,8 @@ describe('display', () => {
   ])('should calculate breakpoint for $description', async (options, expected) => {
     await page.viewport(options.width, options.height)
 
-    const display = createDisplay()
+    const scope = effectScope()
+    const display = scope.run(() => createDisplay())!
 
     const matched = breakpoints.reduce<(typeof breakpoints[number])[]>((acc, breakpoint) => {
       if (display[breakpoint].value) acc.push(breakpoint)
@@ -273,9 +275,10 @@ describe('display', () => {
   })
 
   it('should override default thresholds', async () => {
-    const { name } = createDisplay({
+    const scope = effectScope()
+    const { name } = scope.run(() => createDisplay({
       thresholds: { sm: 400 },
-    })
+    }))!
 
     await page.viewport(400, 900)
     await expect.poll(() => name.value).toBe('sm')
@@ -285,7 +288,8 @@ describe('display', () => {
   })
 
   it('should allow breakpoint strings for mobileBreakpoint', async () => {
-    const { mobile } = createDisplay({ mobileBreakpoint: 'lg' })
+    const scope = effectScope()
+    const { mobile } = scope.run(() => createDisplay({ mobileBreakpoint: 'lg' }))!
 
     await page.viewport(1920, 900)
     await expect.poll(() => mobile.value).toBe(false)
diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
index 0585afc90fb..92be860f299 100644
--- a/packages/vuetify/src/framework.ts
+++ b/packages/vuetify/src/framework.ts
@@ -140,7 +140,7 @@ export function createVuetify (vuetify: VuetifyOptions = {}) {
       date,
       goTo,
     }
-  })
+  })!
 }
 
 export const version = __VUETIFY_VERSION__

From 936f26cb2d7d1447a75db60feaae3b30a7ce8bd5 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 3 Feb 2025 21:30:34 +1100
Subject: [PATCH 118/127] chore: deploy all allowed docs branches

---
 .github/workflows/ci.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c59b178cf8d..8004b91f222 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -155,7 +155,6 @@ jobs:
     needs: [lint, test-unit, build-docs]
     runs-on: ubuntu-24.04
     environment: Production
-    if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4

From ce4b227c49962d0faa84d39019b7f5a70ed6db91 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 3 Feb 2025 21:40:18 +1100
Subject: [PATCH 119/127] fix(VDatePicker): prevent maxDate disabling the wrong
 month on last day

fixes #20943
---
 packages/vuetify/src/components/VDatePicker/VDatePicker.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
index 0e6e6d98487..a9783e57797 100644
--- a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
+++ b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -160,8 +160,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         let _date = adapter.date()
 
-        _date = adapter.setYear(_date, year.value)
+        _date = adapter.startOfMonth(_date)
         _date = adapter.setMonth(_date, month.value)
+        _date = adapter.setYear(_date, year.value)
 
         if (minDate.value) {
           const date = adapter.addDays(adapter.startOfMonth(_date), -1)

From e63b32214c4031cf22839b98915555ef0580684c Mon Sep 17 00:00:00 2001
From: Yuchao <yuchaoyj@gmail.com>
Date: Mon, 3 Feb 2025 18:49:18 +0800
Subject: [PATCH 120/127] feat(VTreeview): Add subtitle & divider slots support
 (#20938)

fixes #20781
---
 packages/vuetify/src/labs/VTreeview/VTreeview.tsx     |  2 +-
 .../vuetify/src/labs/VTreeview/VTreeviewChildren.tsx  | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
index 3ada9eb33f8..6d3a0557a6b 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx
@@ -36,7 +36,7 @@ export const makeVTreeviewProps = propsFactory({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true,
-  }), ['itemType', 'nav', 'openStrategy']),
+  }), ['nav', 'openStrategy']),
   modelValue: {
     type: Array,
     default: () => ([]),
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index 442e7cd88f1..36dbfd16362 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -2,6 +2,7 @@
 import { VTreeviewGroup } from './VTreeviewGroup'
 import { VTreeviewItem } from './VTreeviewItem'
 import { VCheckboxBtn } from '@/components/VCheckbox'
+import { VDivider } from '@/components/VDivider'
 
 // Composables
 import { IconValue } from '@/composables/icons'
@@ -29,6 +30,9 @@ export type VTreeviewChildrenSlots<T> = {
     item: T
     internalItem: InternalListItem<T>
   }
+  divider: { props: InternalListItem['props'] }
+  subheader: { props: InternalListItem['props'] }
+  header: { props: InternalListItem['props'] }
 }
 
 export const makeVTreeviewChildrenProps = propsFactory({
@@ -90,6 +94,12 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
     }
 
     return () => slots.default?.() ?? props.items?.map(item => {
+      if (item.type === 'divider') {
+        return slots.divider?.({ props: item.props }) ?? (
+          <VDivider { ...item.props } />
+        )
+      }
+
       const { children, props: itemProps } = item
       const loading = isLoading.has(item.value)
       const slotsWithItem = {
@@ -122,6 +132,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
         ),
         append: slots.append ? slotProps => slots.append?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
         title: slots.title ? slotProps => slots.title?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
+        subtitle: slots.subtitle ? slotProps => slots.subtitle?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
       } satisfies VTreeviewItem['$props']['$children']
 
       const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps)

From 02a3f4824ff1fa6c764d58fb855c2844ac23d349 Mon Sep 17 00:00:00 2001
From: mueller-jens <jensi.mueller74@gmail.com>
Date: Mon, 3 Feb 2025 11:54:04 +0100
Subject: [PATCH 121/127] fix(locale): add missing german translations (#20921)

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

diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
index 253f9c3b7b4..ab7fe4edc5b 100644
--- a/packages/vuetify/src/locale/de.ts
+++ b/packages/vuetify/src/locale/de.ts
@@ -70,9 +70,9 @@ export default {
     counterSize: '{0} Dateien ({1} gesamt)',
   },
   fileUpload: {
-    title: 'Drag and drop files here',
-    divider: 'or',
-    browse: 'Browse Files',
+    title: 'Datei hier ablegen',
+    divider: 'oder',
+    browse: 'Dateien durchsuchen',
   },
   timePicker: {
     am: 'AM',

From ffca84677249893ab776958a0bd9834b7dbb49dc Mon Sep 17 00:00:00 2001
From: Or Zilca <orzilca@gmail.com>
Date: Mon, 3 Feb 2025 12:54:42 +0200
Subject: [PATCH 122/127] docs(VStepperVertical): fix "click:prev" event name
 (#20923)

---
 packages/api-generator/src/locale/en/VStepperVerticalItem.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api-generator/src/locale/en/VStepperVerticalItem.json b/packages/api-generator/src/locale/en/VStepperVerticalItem.json
index ca6696cfa26..9cb411444f3 100644
--- a/packages/api-generator/src/locale/en/VStepperVerticalItem.json
+++ b/packages/api-generator/src/locale/en/VStepperVerticalItem.json
@@ -2,6 +2,6 @@
   "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"
+    "click:prev": "Event emitted when clicking the previous button"
   }
 }

From 1df619db592ef3b665fb714a530b192aca81a551 Mon Sep 17 00:00:00 2001
From: blaszcyk <44634897+blaszcyk@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:01:23 +0100
Subject: [PATCH 123/127] fix(locale): add missing danish and finnish
 translations (#20925)

---
 packages/vuetify/src/locale/da.ts | 10 +++++-----
 packages/vuetify/src/locale/fi.ts | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/vuetify/src/locale/da.ts b/packages/vuetify/src/locale/da.ts
index 4668d8e9fde..9c8277e2f21 100644
--- a/packages/vuetify/src/locale/da.ts
+++ b/packages/vuetify/src/locale/da.ts
@@ -38,13 +38,13 @@ export default {
   datePicker: {
     itemsSelected: '{0} selected',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Vælg datoer',
+      header: 'Indtast datoer',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Vælg dato',
+    header: 'Indtast dato',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Indtast dato',
     },
   },
   noDataText: 'Ingen data tilgængelig',
diff --git a/packages/vuetify/src/locale/fi.ts b/packages/vuetify/src/locale/fi.ts
index 5d9b54d6581..5c60fc3d847 100644
--- a/packages/vuetify/src/locale/fi.ts
+++ b/packages/vuetify/src/locale/fi.ts
@@ -38,13 +38,13 @@ export default {
   datePicker: {
     itemsSelected: '{0} selected',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Valitse päivämäärät',
+      header: 'Syötä päivämäärät',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Valitse päivämäärä',
+    header: 'Syötä päivämäärä',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Syötä päivämäärä',
     },
   },
   noDataText: 'Ei dataa',

From 992e1b3ee6ad0f5a71fcd27294a79fdf85f78829 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 3 Feb 2025 15:27:10 -0600
Subject: [PATCH 124/127] fix(VTextField): don't render clearable if readonly
 or disabled

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

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index c2f09caf664..6f2ae6aeeeb 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -199,6 +199,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
+                clearable={ props.clearable && !isDisabled.value && !isReadonly.value }
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }

From 3e9147e33898bacafe74633ccc29a2c3f14916cf Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 4 Feb 2025 15:48:04 +1100
Subject: [PATCH 125/127] fix(VTabs): add generic slot types

fixes #20720
---
 .../vuetify/src/components/VTabs/VTabs.tsx    | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
index c68aa6456a6..a574b49bbf7 100644
--- a/packages/vuetify/src/components/VTabs/VTabs.tsx
+++ b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -17,26 +17,27 @@ import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed, toRef } from 'vue'
+import { VTabsSymbol } from './shared'
 import { convertToUnit, genericComponent, isObject, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import { VTabsSymbol } from './shared'
+import type { GenericProps } from '@/util'
 
 export type TabItem = string | number | Record<string, any>
 
-export type VTabsSlot = {
-  item: TabItem
+export type VTabsSlot<T> = {
+  item: T
 }
 
-export type VTabsSlots = {
+export type VTabsSlots<T> = {
   default: never
-  tab: VTabsSlot
-  item: VTabsSlot
+  tab: VTabsSlot<T>
+  item: VTabsSlot<T>
   window: never
 } & {
-  [key: `tab.${string}`]: VTabsSlot
-  [key: `item.${string}`]: VTabsSlot
+  [key: `tab.${string}`]: VTabsSlot<T>
+  [key: `item.${string}`]: VTabsSlot<T>
 }
 
 function parseItems (items: readonly TabItem[] | undefined) {
@@ -78,7 +79,12 @@ export const makeVTabsProps = propsFactory({
   ...makeTagProps(),
 }, 'VTabs')
 
-export const VTabs = genericComponent<VTabsSlots>()({
+export const VTabs = genericComponent<new <T = TabItem>(
+  props: {
+    items?: T
+  },
+  slots: VTabsSlots<T>
+) => GenericProps<typeof props, typeof slots>>()({
   name: 'VTabs',
 
   props: makeVTabsProps(),

From 5f2e36cd634cc7d6f14be0c0fd42317f8bbce532 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 4 Feb 2025 15:51:58 +1100
Subject: [PATCH 126/127] Revert "fix(VTextField): don't render clearable if
 readonly or disabled"

This reverts commit 992e1b3ee6ad0f5a71fcd27294a79fdf85f78829.
---
 packages/vuetify/src/components/VTextField/VTextField.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index 6f2ae6aeeeb..c2f09caf664 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -199,7 +199,6 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
-                clearable={ props.clearable && !isDisabled.value && !isReadonly.value }
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }

From d36231462b441ad2a194cd9a11bb1c07970f65ed Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Tue, 4 Feb 2025 16:02:30 +1100
Subject: [PATCH 127/127] chore(release): publish v3.7.10

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

diff --git a/lerna.json b/lerna.json
index ce3af3594f1..215e08a62d8 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.9"
+  "version": "3.7.10"
 }
\ No newline at end of file
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
index 3d1f7682467..aa93b2010b9 100755
--- a/packages/api-generator/package.json
+++ b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.9",
+  "version": "3.7.10",
   "private": true,
   "description": "",
   "scripts": {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 168aecdc545..70f276bf0a8 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.7.9",
+  "version": "3.7.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
index e0aa2dbd5aa..41c1a20bce4 100755
--- a/packages/vuetify/package.json
+++ b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.9",
+  "version": "3.7.10",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"