From 3caf20fce99913f2da2351009efff99b0b49f4ca Mon Sep 17 00:00:00 2001
From: darius-lesch <134329447+darius-lesch@users.noreply.github.com>
Date: Fri, 2 Oct 2026 21:22:54 +0000
Subject: [PATCH 01/22] chore(vue-vuetify): upgrade vuetify to v4 and apply
 template codemods

---
 .../dev/components/ExampleAppBar.vue          |   4 +-
 .../dev/components/ExampleDrawer.vue          |   2 +-
 .../dev/components/ExampleForm.vue            |  12 +-
 packages/vue-vuetify/package.json             |   7 +-
 .../src/additional/ListWithDetailRenderer.vue |   2 +-
 .../src/complex/ArrayControlRenderer.vue      |   2 +-
 .../vue-vuetify/src/complex/MixedRenderer.vue |   4 +-
 .../vue-vuetify/src/complex/OneOfRenderer.vue |   2 +-
 .../src/complex/OneOfTabRenderer.vue          |   2 +-
 .../src/layouts/ArrayLayoutRenderer.vue       |  17 +-
 .../layouts/CategorizationStepperRenderer.vue |   2 +-
 pnpm-lock.yaml                                | 160 ++++++++++++++++--
 12 files changed, 171 insertions(+), 45 deletions(-)

diff --git a/packages/vue-vuetify/dev/components/ExampleAppBar.vue b/packages/vue-vuetify/dev/components/ExampleAppBar.vue
index 2f7593b7a4..2a8f7525d7 100644
--- a/packages/vue-vuetify/dev/components/ExampleAppBar.vue
+++ b/packages/vue-vuetify/dev/components/ExampleAppBar.vue
@@ -14,7 +14,7 @@ const appStore = useAppStore();
     />
     <v-toolbar-title>
       <v-container fill-height fluid
-        ><v-row align="center" justify="center" dense>
+        ><v-row class="align-center justify-center" density="compact">
           <JsonFormsLogo width="40" height="40"></JsonFormsLogo>
           <v-col>JSON Forms </v-col>
         </v-row>
@@ -22,7 +22,7 @@ const appStore = useAppStore();
     </v-toolbar-title>
     <v-toolbar-items>
       <v-container fill-height fluid justify-end
-        ><v-row dense>
+        ><v-row density="compact">
           <v-col>
             <v-tooltip location="bottom">
               <template v-slot:activator="{ props }">
diff --git a/packages/vue-vuetify/dev/components/ExampleDrawer.vue b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
index 2228e67908..b904e73ba4 100644
--- a/packages/vue-vuetify/dev/components/ExampleDrawer.vue
+++ b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
@@ -29,7 +29,7 @@ const filteredExamples = computed(() => {
       <template v-slot:prepend>
         <VuetifyLogo width="40" height="40" />
       </template>
-      <v-list-item-title class="text-h6"> Examples </v-list-item-title>
+      <v-list-item-title class="text-headline-small"> Examples </v-list-item-title>
       <v-list-item-subtitle> Vuetify Renderers </v-list-item-subtitle>
     </v-list-item>
 
diff --git a/packages/vue-vuetify/dev/components/ExampleForm.vue b/packages/vue-vuetify/dev/components/ExampleForm.vue
index 4036503c4d..e3630e85aa 100644
--- a/packages/vue-vuetify/dev/components/ExampleForm.vue
+++ b/packages/vue-vuetify/dev/components/ExampleForm.vue
@@ -110,11 +110,9 @@ const properties = computed<JsonFormsProps>(() => ({
     <v-container v-else>
       <v-row
         v-if="!resolvedSchema.resolved"
-        class="fill-height"
-        align-content="center"
-        justify="center"
+        class="fill-height align-content-center justify-center"
       >
-        <v-col class="text-subtitle-1 text-center" cols="12">
+        <v-col class="text-body-large text-center" cols="12">
           Resolving Schema Refs
         </v-col>
         <v-col cols="6">
@@ -127,11 +125,9 @@ const properties = computed<JsonFormsProps>(() => ({
       </v-row>
       <v-row
         v-else-if="resolvedSchema.error !== undefined"
-        class="fill-height"
-        align-content="center"
-        justify="center"
+        class="fill-height align-content-center justify-center"
       >
-        <v-col class="text-subtitle-1 text-center" cols="12">
+        <v-col class="text-body-large text-center" cols="12">
           <v-alert color="red" dark>
             {{ resolvedSchema.error }}
           </v-alert>
diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index d26c86f2ff..5225875f37 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^3.11.0"
+    "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -95,8 +95,9 @@
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.11",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
+    "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vue-scoped-css": "^2.8.0",
+    "eslint-plugin-vuetify": "^2.7.3",
     "jsdom": "^27.2.0",
     "json-refs": "3.0.15",
     "lodash": "^4.18.1",
@@ -119,6 +120,6 @@
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.2.0",
-    "vuetify": "^3.12.8"
+    "vuetify": "^4.0.0"
   }
 }
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index f8b2cfad82..40e9248f64 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -172,7 +172,7 @@
         </v-list>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="flex-grow-1">
-        <span class="text-h6">{{ control.translations.noSelection }}</span>
+        <span class="text-headline-small">{{ control.translations.noSelection }}</span>
       </v-col>
       <v-col
         v-else
diff --git a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index 8f5ddaa482..965f6b9725 100644
--- a/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
@@ -50,7 +50,7 @@
     </v-card-title>
     <v-card-text v-bind="vuetifyProps('v-card-text')">
       <v-container justify-space-around align-content-center>
-        <v-row justify="center">
+        <v-row class="justify-center">
           <v-table
             class="array-container flex"
             v-bind="vuetifyProps('v-table')"
diff --git a/packages/vue-vuetify/src/complex/MixedRenderer.vue b/packages/vue-vuetify/src/complex/MixedRenderer.vue
index 5f572a7f17..dd2e76b3cb 100644
--- a/packages/vue-vuetify/src/complex/MixedRenderer.vue
+++ b/packages/vue-vuetify/src/complex/MixedRenderer.vue
@@ -6,7 +6,7 @@
           <v-expansion-panel-title class="py-0 px-0">
             <v-container class="py-0">
               <v-row>
-                <v-col align-self="center" class="pl-0"
+                <v-col class="pl-0 align-self-center"
                   ><v-select
                     v-if="mixedRenderInfos"
                     v-disabled-icon-focus
@@ -31,7 +31,7 @@
                   >
                   </v-select
                 ></v-col>
-                <v-col cols="3" align-self="center" class="text-truncate">{{
+                <v-col cols="3" class="text-truncate align-self-center">{{
                   computedLabel
                 }}</v-col>
               </v-row>
diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.vue b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
index f43b59ad44..362130475a 100644
--- a/packages/vue-vuetify/src/complex/OneOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
@@ -45,7 +45,7 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-medium">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
index 083a638029..4947bd08b7 100644
--- a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
@@ -40,7 +40,7 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-medium">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index 1c8d19593b..b6d7ae7665 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -62,7 +62,7 @@
         align-content-center
         :class="styles.arrayList.container"
       >
-        <v-row justify="center">
+        <v-row class="justify-center">
           <v-expansion-panels
             accordion
             v-bind="expansionPanelsProps"
@@ -86,7 +86,7 @@
                         : ''
                     }`"
                   >
-                    <v-col v-if="!hideAvatar" align-self="center" class="pl-0">
+                    <v-col v-if="!hideAvatar" class="pl-0 align-self-center">
                       <validation-badge
                         overlap
                         bordered
@@ -100,13 +100,11 @@
                       </validation-badge>
                     </v-col>
 
-                    <v-col
-                      align-self="center"
+                    <v-col class="align-self-center"
                       :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
                       >{{ childLabelForIndex(index) }}</v-col
                     >
-                    <v-col
-                      align-self="center"
+                    <v-col class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -133,8 +131,7 @@
                         {{ control.translations.up }}
                       </v-tooltip>
                     </v-col>
-                    <v-col
-                      align-self="center"
+                    <v-col class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -162,7 +159,7 @@
                         {{ control.translations.down }}
                       </v-tooltip>
                     </v-col>
-                    <v-col align-self="center">
+                    <v-col class="align-self-center">
                       <v-tooltip location="bottom">
                         <template v-slot:activator="{ props }">
                           <v-btn
@@ -237,7 +234,7 @@
       @click:outside="suggestToDelete = null"
     >
       <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-medium">
           {{ control.translations.deleteDialogTitle }}
         </v-card-title>
 
diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 84eb0bab2a..5ab95ea1f5 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -103,7 +103,7 @@ import {
 import {
   VStepperVertical,
   VStepperVerticalItem,
-} from 'vuetify/labs/VStepperVertical';
+} from 'vuetify/components';
 import { useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d809f144d8..44b0a2c9af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1306,11 +1306,14 @@ importers:
         specifier: ^8.57.0
         version: 8.57.0(supports-color@8.1.1)
       eslint-plugin-vue:
-        specifier: ^9.23.0
+        specifier: ^9.26.0
         version: 9.26.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
       eslint-plugin-vue-scoped-css:
         specifier: ^2.8.0
         version: 2.8.1(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))
+      eslint-plugin-vuetify:
+        specifier: ^2.7.3
+        version: 2.7.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(vuetify@4.3.0)
       jsdom:
         specifier: ^27.2.0
         version: 27.2.0(supports-color@8.1.1)
@@ -1364,7 +1367,7 @@ importers:
         version: 2.3.2(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))
       vite-plugin-vuetify:
         specifier: ^2.1.1
-        version: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@3.12.8)
+        version: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
       vitest:
         specifier: ^1.4.0
         version: 1.6.0(@types/node@24.12.2)(jsdom@27.2.0(supports-color@8.1.1))(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(supports-color@8.1.1)(terser@5.48.0)
@@ -1378,8 +1381,8 @@ importers:
         specifier: ^2.2.0
         version: 2.2.12(typescript@5.8.3)
       vuetify:
-        specifier: ^3.12.8
-        version: 3.12.8(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+        specifier: ^4.0.0
+        version: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
 
 packages:
 
@@ -3152,6 +3155,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@eslint-community/eslint-utils@4.10.1':
+    resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
   '@eslint-community/eslint-utils@4.4.0':
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5306,6 +5315,42 @@ packages:
       vue: ^3.0.0
       vuetify: ^3.0.0
 
+  '@vuetify/v0@1.3.0':
+    resolution: {integrity: sha512-Tvknc64ciwaOdKzifg3maMOiczbEenWxYINoZIotfKQ8VWBs/yeHbvHffW4w1j+xYnNyYi0S9LK5UCzyQrYg9A==}
+    peerDependencies:
+      '@adobe/leonardo-contrast-colors': '>=1.0.0'
+      '@ant-design/colors': '>=7.0.0'
+      '@flagsmith/flagsmith': '>=11.0.0'
+      '@floating-ui/dom': '>=1.8.0'
+      '@js-temporal/polyfill': '>=0.5.0'
+      '@material/material-color-utilities': '>=0.3.0'
+      '@vue/devtools-api': '>=7.0.0'
+      launchdarkly-js-client-sdk: ^3.0.0
+      posthog-js: ^1.0.0
+      vue: '>=3.5.0 || >=3.6.0-0'
+      vue-i18n: '>=10.0.0'
+    peerDependenciesMeta:
+      '@adobe/leonardo-contrast-colors':
+        optional: true
+      '@ant-design/colors':
+        optional: true
+      '@flagsmith/flagsmith':
+        optional: true
+      '@floating-ui/dom':
+        optional: true
+      '@js-temporal/polyfill':
+        optional: true
+      '@material/material-color-utilities':
+        optional: true
+      '@vue/devtools-api':
+        optional: true
+      launchdarkly-js-client-sdk:
+        optional: true
+      posthog-js:
+        optional: true
+      vue-i18n:
+        optional: true
+
   '@webassemblyjs/ast@1.12.1':
     resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
 
@@ -7829,12 +7874,32 @@ packages:
       eslint: '>=5.0.0'
       vue-eslint-parser: '>=7.1.0'
 
+  eslint-plugin-vue@10.11.1:
+    resolution: {integrity: sha512-pasVXhl7wUmIvhujoqs/m0mJ9r59QW1IR9XXYKGR0FETzSM+Hhlf4qKIYgWiDDP+9YKv4YfbwskD7LqIdVcgQw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      vue-eslint-parser: ^10.3.0
+    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
+      '@typescript-eslint/parser':
+        optional: true
+
   eslint-plugin-vue@9.26.0:
     resolution: {integrity: sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
+  eslint-plugin-vuetify@2.7.3:
+    resolution: {integrity: sha512-f9ycYiBJeZjAyonn1j43I3WOh6LExJ8CO9dH0jtEl5T8kt76Y0wZng3jADYqiYW+bkXPXCndH027t29G4i3CFw==}
+    peerDependencies:
+      eslint: ^8.0.0 || ^9.0.0 || ^10.0.0
+      vuetify: ^3.0.0 || ^4.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -11456,6 +11521,10 @@ packages:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.1.7:
+    resolution: {integrity: sha512-wWBro/7hJ40ye6TPiXkUQoXKCw23xSsjriUvqd7Uls9Sso3oLiON1flc18cCdnjgCRXw4fBVqUJJeOdDTh3P3g==}
+    engines: {node: '>=4'}
+
   postcss-styl@0.12.3:
     resolution: {integrity: sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==}
     engines: {node: ^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0}
@@ -11925,6 +11994,10 @@ packages:
   require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
+  requireindex@1.2.0:
+    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
+    engines: {node: '>=0.10.5'}
+
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
@@ -12285,6 +12358,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   send@0.18.0:
     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
     engines: {node: '>= 0.8.0'}
@@ -13745,12 +13823,12 @@ packages:
       typescript:
         optional: true
 
-  vuetify@3.12.8:
-    resolution: {integrity: sha512-gvmOWeLd6CG7LVh2Qonft5YrIb7MpbKZglRjg0ItEloSbu6hfUII2RZmRSVxGKYdiXTf7J1hI3BRSHr8J9LkxA==}
+  vuetify@4.3.0:
+    resolution: {integrity: sha512-tQpJ/2oKCNeZQb7p3PpwGVca4B9IFUp4LuTpE/bOZ/lIC4U74EJxtriMdB8xj0wtZx40PFGbHPrdfJzZg1FX0A==}
     peerDependencies:
       typescript: '>=4.7'
       vite-plugin-vuetify: '>=2.1.0'
-      vue: ^3.5.0
+      vue: ^3.5.0 || ^3.6.0-0
       webpack-plugin-vuetify: '>=3.1.0'
     peerDependenciesMeta:
       typescript:
@@ -16665,6 +16743,11 @@ snapshots:
   '@esbuild/win32-x64@0.28.0':
     optional: true
 
+  '@eslint-community/eslint-utils@4.10.1(eslint@8.57.0(supports-color@8.1.1))':
+    dependencies:
+      eslint: 8.57.0(supports-color@8.1.1)
+      eslint-visitor-keys: 3.4.3
+
   '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0(supports-color@8.1.1))':
     dependencies:
       eslint: 8.57.0(supports-color@8.1.1)
@@ -19562,11 +19645,15 @@ snapshots:
 
   '@vue/web-component-wrapper@1.3.0': {}
 
-  '@vuetify/loader-shared@2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@3.12.8)':
+  '@vuetify/loader-shared@2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)':
     dependencies:
       upath: 2.0.1
       vue: 3.5.17(typescript@5.8.3)
-      vuetify: 3.12.8(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+
+  '@vuetify/v0@1.3.0(vue@3.5.17(typescript@5.8.3))':
+    dependencies:
+      vue: 3.5.17(typescript@5.8.3)
 
   '@webassemblyjs/ast@1.12.1':
     dependencies:
@@ -22620,6 +22707,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-vue@10.11.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.0(supports-color@8.1.1))
+      eslint: 8.57.0(supports-color@8.1.1)
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 7.1.7
+      semver: 7.8.5
+      vue-eslint-parser: 9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
+      xml-name-validator: 5.0.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3)
+
   eslint-plugin-vue@9.26.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0(supports-color@8.1.1))
@@ -22634,6 +22734,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-vuetify@2.7.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(vuetify@4.3.0):
+    dependencies:
+      eslint: 8.57.0(supports-color@8.1.1)
+      eslint-plugin-vue: 10.11.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))
+      requireindex: 1.2.0
+      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+    transitivePeerDependencies:
+      - '@stylistic/eslint-plugin'
+      - '@typescript-eslint/parser'
+      - vue-eslint-parser
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -27492,6 +27603,11 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.1.7:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-styl@0.12.3(supports-color@8.1.1):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
@@ -28042,6 +28158,8 @@ snapshots:
 
   require-main-filename@2.0.0: {}
 
+  requireindex@1.2.0: {}
+
   requires-port@1.0.0: {}
 
   reselect@5.2.0: {}
@@ -28469,6 +28587,8 @@ snapshots:
 
   semver@7.8.1: {}
 
+  semver@7.8.5: {}
+
   send@0.18.0(supports-color@8.1.1):
     dependencies:
       debug: 2.6.9(supports-color@8.1.1)
@@ -29895,14 +30015,14 @@ snapshots:
       picocolors: 1.1.1
       vite: 5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0)
 
-  vite-plugin-vuetify@2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@3.12.8):
+  vite-plugin-vuetify@2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0):
     dependencies:
-      '@vuetify/loader-shared': 2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@3.12.8)
+      '@vuetify/loader-shared': 2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
       debug: 4.3.7(supports-color@8.1.1)
       upath: 2.0.1
       vite: 5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0)
       vue: 3.5.17(typescript@5.8.3)
-      vuetify: 3.12.8(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
     transitivePeerDependencies:
       - supports-color
 
@@ -30117,12 +30237,24 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  vuetify@3.12.8(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3)):
+  vuetify@4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3)):
     dependencies:
+      '@vuetify/v0': 1.3.0(vue@3.5.17(typescript@5.8.3))
       vue: 3.5.17(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
-      vite-plugin-vuetify: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@3.12.8)
+      vite-plugin-vuetify: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
+    transitivePeerDependencies:
+      - '@adobe/leonardo-contrast-colors'
+      - '@ant-design/colors'
+      - '@flagsmith/flagsmith'
+      - '@floating-ui/dom'
+      - '@js-temporal/polyfill'
+      - '@material/material-color-utilities'
+      - '@vue/devtools-api'
+      - launchdarkly-js-client-sdk
+      - posthog-js
+      - vue-i18n
 
   w3c-hr-time@1.0.2:
     dependencies:

From e22627770cf63d7304df0a8ce0e2e7686fb70d78 Mon Sep 17 00:00:00 2001
From: darius-lesch <134329447+darius-lesch@users.noreply.github.com>
Date: Sat, 3 Oct 2026 10:32:44 +0000
Subject: [PATCH 02/22] test(vue-vuetify): fix brittle stepper test and update
 vuetify 4 snapshots

The CategorizationStepperRenderer spec was failing after Vuetify 4 upgrades because it relied on the internal `.v-stepper-item__avatar` CSS class which no longer exists. Replaced the brittle query with a `findAllComponents(VStepperItem)` query from Vue Test Utils.
Also regenerated all the vitest snapshots in the package to align with Vuetify 4 DOM changes.
---
 .../layout/CategorizationStepperRenderer.spec.ts   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
index 60a6be323a..2f783dde49 100644
--- a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
+++ b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
@@ -76,9 +76,17 @@ describe('CategorizationStepperRenderer.vue', () => {
 
     const stepper = wrapper.getComponent(CategorizationStepperRenderer);
 
-    expect(
-      stepper.findAll('.v-stepper-item__avatar').map((avatar) => avatar.text())
-    ).toEqual(['1', '2']);
+    const items = stepper.findAllComponents(VStepperItem);
+
+    // 1. Verify it keeps original category values
+    expect(items.map((item) => item.props('value'))).toEqual([2, 3]);
+
+    // 2. Verify sequential visible step badges and labels via rendered text
+    expect(items[0].text()).toContain('1');
+    expect(items[0].text()).toContain('Second');
+
+    expect(items[1].text()).toContain('2');
+    expect(items[1].text()).toContain('Third');
   });
 
   it('keeps the same active category when a previous category becomes visible', async () => {

From cc0ea2b545db407e12c9b6131b7616d4cddd8617 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Sat, 3 Oct 2026 12:40:30 +0200
Subject: [PATCH 03/22] Added missing component import

---
 .../tests/unit/layout/CategorizationStepperRenderer.spec.ts      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
index 2f783dde49..4b8c302a6f 100644
--- a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
+++ b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
@@ -4,6 +4,7 @@ import { nextTick } from 'vue';
 import CategorizationStepperRenderer from '../../../src/layouts/CategorizationStepperRenderer.vue';
 import { layoutRenderers } from '../../../src/layouts';
 import { mountJsonForms } from '../util';
+import { VStepperItem } from 'vuetify/components';
 
 describe('CategorizationStepperRenderer.vue', () => {
   const schema = {

From 983bc1e302edf6325dcfd1cbac4410b534f27799 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Sat, 3 Oct 2026 12:42:57 +0200
Subject: [PATCH 04/22] Regenerated the snapshots

---
 .../ListWithDetailRenderer.spec.ts.snap       |  4 +--
 .../ArrayControlRenderer.spec.ts.snap         |  8 ++++--
 .../__snapshots__/OneOfRenderer.spec.ts.snap  | 14 ++++------
 .../DateControlRenderer.spec.ts.snap          | 10 ++++---
 .../DateTimeControlRenderer.spec.ts.snap      | 10 ++++---
 .../EnumControlRenderer.spec.ts.snap          | 28 ++++++++-----------
 .../IntegerControlRenderer.spec.ts.snap       |  9 +++---
 .../MultiStringControlRenderer.spec.ts.snap   |  5 ++--
 .../NumberControlRenderer.spec.ts.snap        |  9 +++---
 .../OneOfEnumControlRenderer.spec.ts.snap     | 28 ++++++++-----------
 .../StringControlRenderer.spec.ts.snap        | 19 +++++++------
 .../TimeControlRenderer.spec.ts.snap          | 10 ++++---
 .../ArrayLayoutRenderer.spec.ts.snap          |  5 ++--
 13 files changed, 82 insertions(+), 77 deletions(-)

diff --git a/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap
index 2a7946940d..37145aa102 100644
--- a/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`ListWithDetailRenderer.vue > should render component and match snapshot
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-7e93fcc2="" class="v-container v-locale--is-ltr list-with-detail" fill-height="">
-      <div data-v-7e93fcc2="" class="v-row">
+      <div data-v-7e93fcc2="" class="v-row v-row--density-default">
         <div data-v-7e93fcc2="" class="v-col pa-0">
           <header data-v-7e93fcc2="" class="v-toolbar v-toolbar--collapse-start v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr list-with-detail-toolbar">
             <!---->
@@ -32,7 +32,7 @@ exports[`ListWithDetailRenderer.vue > should render component and match snapshot
           </header>
         </div>
       </div>
-      <div data-v-7e93fcc2="" class="v-row list-with-detail-no-data">
+      <div data-v-7e93fcc2="" class="v-row v-row--density-default list-with-detail-no-data">
         <div data-v-7e93fcc2="" class="v-col">No data</div>
       </div>
     </div>
diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
index d38bc3b610..d08d53d570 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
@@ -6,12 +6,13 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
     <div data-v-4896f876="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated array-list">
       <!---->
       <div class="v-card__loader">
-        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
           <div class="v-progress-linear__background"></div>
           <div class="v-progress-linear__buffer" style="width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
+              <!---->
               <div class="v-progress-linear__indeterminate long"></div>
               <div class="v-progress-linear__indeterminate short"></div>
             </div>
@@ -49,11 +50,12 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
       </div>
       <div data-v-4896f876="" class="v-card-text">
         <div data-v-4896f876="" class="v-container v-locale--is-ltr" justify-space-around="" align-content-center="">
-          <div data-v-4896f876="" class="v-row justify-center">
-            <div data-v-4896f876="" class="v-table v-theme--light v-table--density-default array-container flex">
+          <div data-v-4896f876="" class="v-row v-row--density-default justify-center">
+            <div data-v-4896f876="" class="v-table v-table--gridlines-horizontal v-theme--light v-table--density-default array-container flex">
               <!---->
               <div class="v-table__wrapper">
                 <table>
+                  <!---->
                   <thead data-v-4896f876="">
                     <tr data-v-4896f876="">
                       <th data-v-4896f876="" scope="col">Name</th>
diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
index 25580de533..053c679151 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
@@ -5,18 +5,19 @@ exports[`OneOfRenderer.vue > should render component and match snapshot 1`] = `
   <div class="v-application__wrap">
     <div>
       <!--v-if-->
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--error v-input--dirty v-text-field v-select v-select--single v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--error v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--error v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--error v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background bg-error"></div>
                 <div class="v-progress-linear__buffer bg-error" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long bg-error"></div>
                     <div class="v-progress-linear__indeterminate short bg-error"></div>
                   </div>
@@ -29,13 +30,10 @@ exports[`OneOfRenderer.vue > should render component and match snapshot 1`] = `
               <!---->
               <!---->
               <!---->
-              <div class="v-field__input" data-no-activator=""><select hidden="">
-                  <option selected="" value="0"></option>
-                  <option value="1"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="0">
                 <!---->
                 <!---->
-                <div class="v-select__selection"><span class="v-select__selection-text">oneOf-0<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#3-input-label" id="#3-input" aria-describedby="#3-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="oneOf-0">
+                <div class="v-select__selection"><span class="v-select__selection-text">oneOf-0<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#3-input-label" id="#3-input" aria-describedby="#3-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="oneOf-0">
               </div>
               <!---->
             </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
index b8988d9b18..5d98c5566a 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`DateControlRenderer.vue > should render component and match snapshot 1`
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -63,18 +64,19 @@ exports[`DateControlRenderer.vue > should render component and match snapshot wh
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#7">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
index bd8cfa3d84..24decd74d0 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`DateTimeControlRenderer.vue > should render component and match snapsho
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-bc5e61db="" class="control" id="#6">
-      <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -63,18 +64,19 @@ exports[`DateTimeControlRenderer.vue > should render component and match snapsho
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div data-v-bc5e61db="" class="control" id="#7">
-      <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div data-v-bc5e61db="" class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
index 3a9f6eca27..c4729c8168 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot 1`
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#4">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -30,13 +31,10 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot 1`
                 <!---->My Enum
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select hidden="">
-                  <option selected="" value="a"></option>
-                  <option value="b"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="a">
                 <!---->
                 <!---->
-                <div class="v-select__selection"><span class="v-select__selection-text">a<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#4-input-label" id="#4-input" aria-describedby="#4-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="a">
+                <div class="v-select__selection"><span class="v-select__selection-text">a<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#4-input-label" id="#4-input" aria-describedby="#4-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="a">
               </div>
               <!---->
             </div>
@@ -70,18 +68,19 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot wh
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#5">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -96,13 +95,10 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot wh
                 <!---->My Enum
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select hidden="">
-                  <option selected="" value="a"></option>
-                  <option value="b"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="a">
                 <!---->
                 <!---->
-                <div class="v-select__selection"><span class="v-select__selection-text">a<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#5-input-label" id="#5-input" aria-describedby="#5-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="a">
+                <div class="v-select__selection"><span class="v-select__selection-text">a<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#5-input-label" id="#5-input" aria-describedby="#5-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="a">
               </div>
               <!---->
             </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
index ad34744274..4c503c434b 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`IntegerControlRenderer.vue > should render component and match snapshot
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -37,13 +38,13 @@ exports[`IntegerControlRenderer.vue > should render component and match snapshot
             </transition-stub>
             <div class="v-field__append-inner">
               <!---->
-              <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical" role="separator">
+              <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical">
               <div class="v-number-input__control"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="decrement"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                   <!---->
                   <!---->
                 </button>
-                <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical" role="separator"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="increment"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="increment"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-up mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                   <!---->
                   <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
index 5fb1f79a68..3e7dc22c1e 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`MultiStringControlRenderer.vue > should render component and match snap
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-textarea v-text-field input" style="--v-textarea-scroll-bar-width: 0px;">
+      <div class="v-input v-input--horizontal v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-textarea v-text-field input" style="--v-textarea-scroll-bar-width: 0px;">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
index 7e6bd28595..e3c3e399db 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`NumberControlRenderer.vue > should render component and match snapshot
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-number-input v-number-input--default input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -37,13 +38,13 @@ exports[`NumberControlRenderer.vue > should render component and match snapshot
             </transition-stub>
             <div class="v-field__append-inner">
               <!---->
-              <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical" role="separator">
+              <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical">
               <div class="v-number-input__control"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="decrement"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-down mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                   <!---->
                   <!---->
                 </button>
-                <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical" role="separator"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="increment"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <hr class="v-divider v-divider--vertical v-theme--light" style="border-style: solid;" aria-orientation="vertical"><button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-small v-btn--variant-text" style="height: 100%;" tabindex="-1" aria-hidden="true" data-testid="increment"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                   <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-up mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                   <!---->
                   <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
index 5ee533d54b..3abe7e7068 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#4">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -30,13 +31,10 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
                 <!---->My OneOf Enum
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select hidden="">
-                  <option selected="" value="a"></option>
-                  <option value="b"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="a">
                 <!---->
                 <!---->
-                <div class="v-select__selection"><span class="v-select__selection-text">Foo<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#4-input-label" id="#4-input" aria-describedby="#4-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="Foo">
+                <div class="v-select__selection"><span class="v-select__selection-text">Foo<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#4-input-label" id="#4-input" aria-describedby="#4-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="Foo">
               </div>
               <!---->
             </div>
@@ -70,18 +68,19 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#5">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -96,13 +95,10 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
                 <!---->My OneOf Enum
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select hidden="">
-                  <option selected="" value="a"></option>
-                  <option value="b"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="a">
                 <!---->
                 <!---->
-                <div class="v-select__selection"><span class="v-select__selection-text">Foo<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#5-input-label" id="#5-input" aria-describedby="#5-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="Foo">
+                <div class="v-select__selection"><span class="v-select__selection-text">Foo<!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#5-input-label" id="#5-input" aria-describedby="#5-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="Foo">
               </div>
               <!---->
             </div>
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
index 7bc4be4a12..a221663858 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`StringControlRenderer.vue > should render component and match snapshot
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -61,18 +62,19 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#11">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -87,7 +89,7 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
                 <!---->Select Continent
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator="">
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="">
                 <!---->
                 <!---->
                 <div class="v-combobox__selection"><span class="v-combobox__selection-text"><!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#11-input-label" id="#11-input" aria-describedby="#11-input-messages" aria-expanded="false" aria-controls="menu-v-0" value="">
@@ -124,18 +126,19 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#12">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-combobox v-combobox--single input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -150,7 +153,7 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
                 <!---->Select Continent
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator="">
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="">
                 <!---->
                 <!---->
                 <div class="v-combobox__selection"><span class="v-combobox__selection-text"><!----></span></div><input size="1" role="combobox" type="text" aria-labelledby="#12-input-label" id="#12-input" aria-describedby="#12-input-messages" aria-expanded="false" aria-controls="menu-v-0" value="">
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
index b29b939d43..646146a7d0 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`TimeControlRenderer.vue > should render component and match snapshot 1`
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#6">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -63,18 +64,19 @@ exports[`TimeControlRenderer.vue > should render component and match snapshot wh
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#7">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field input">
         <!---->
         <div class="v-input__control">
           <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
diff --git a/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
index 72e0b69cee..410f6d59e8 100644
--- a/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
@@ -6,12 +6,13 @@ exports[`ArrayLayoutRenderer.vue > should render component and match snapshot 1`
     <div data-v-5f91636e="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated array-list">
       <!---->
       <div class="v-card__loader">
-        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
           <div class="v-progress-linear__background"></div>
           <div class="v-progress-linear__buffer" style="width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
+              <!---->
               <div class="v-progress-linear__indeterminate long"></div>
               <div class="v-progress-linear__indeterminate short"></div>
             </div>
@@ -49,7 +50,7 @@ exports[`ArrayLayoutRenderer.vue > should render component and match snapshot 1`
       </div>
       <div data-v-5f91636e="" class="v-card-text">
         <div data-v-5f91636e="" class="v-container v-locale--is-ltr" justify-space-around="" align-content-center="">
-          <div data-v-5f91636e="" class="v-row justify-center">
+          <div data-v-5f91636e="" class="v-row v-row--density-default justify-center">
             <div data-v-5f91636e="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-default" accordion=""></div>
           </div>
         </div>

From 2558636678127a022206d009edbbc6063cc5dc57 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 15:14:01 +0200
Subject: [PATCH 05/22] fix: resolved issues raised by

---
 packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index b6d7ae7665..6e2495da98 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -100,11 +100,13 @@
                       </validation-badge>
                     </v-col>
 
-                    <v-col class="align-self-center"
+                    <v-col
+                      class="align-self-center"
                       :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
                       >{{ childLabelForIndex(index) }}</v-col
                     >
-                    <v-col class="align-self-center"
+                    <v-col
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -131,7 +133,8 @@
                         {{ control.translations.up }}
                       </v-tooltip>
                     </v-col>
-                    <v-col class="align-self-center"
+                    <v-col
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">

From 673e9b8603ef16681abf67465eaf818727c82341 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 19:33:42 +0200
Subject: [PATCH 06/22] chore: added notes for migration from Vuetify 3 to 4

---
 MIGRATION.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index fdef1d94c7..8020822aea 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -49,6 +49,19 @@ If you apply custom styling that relies on the previous `Grid`-based DOM structu
 Furthermore, if you use exported method `renderLayoutElements`, it no longer wraps children in `Grid` items for direction `column`.
 This should not affect you except if you explicitly use this method in custom renderers.
 
+### Vue Vuetify renderers now require Vuetify v4
+
+The Vue Vuetify renderers (`@jsonforms/vue-vuetify`) were upgraded from Vuetify 3 to Vuetify 4. When using JSON Forms 3.9, your application now needs to provide `vuetify` in version 4.
+
+To upgrade your application, follow the official [Vuetify upgrade guide](https://vuetifyjs.com/en/getting-started/upgrade-guide/).
+
+Use JSON Forms 3.8 if you need to stay on Vuetify 3.
+
+As part of this upgrade, you may notice several visible changes due to Vuetify 4's updated design specifications:
+* Typography has been updated to Material Design 3 (MD3) specifications.
+* The grid system is now gap-based.
+* The default theme is now `system` instead of `light`.
+
 ## Migrating to JSON Forms 3.8
 
 ### `Translator` type changed from overloaded signatures to a generic conditional type

From f71d837f289ddd6f6d6e50d207f2255b6af432c3 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 19:35:23 +0200
Subject: [PATCH 07/22] chore: remove unused ESLint plugin

---
 packages/vue-vuetify/package.json |  1 -
 pnpm-lock.yaml                    | 70 ++-----------------------------
 2 files changed, 4 insertions(+), 67 deletions(-)

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index 5225875f37..9c002e6d24 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -97,7 +97,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vue-scoped-css": "^2.8.0",
-    "eslint-plugin-vuetify": "^2.7.3",
     "jsdom": "^27.2.0",
     "json-refs": "3.0.15",
     "lodash": "^4.18.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44b0a2c9af..e9bf628cfa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1311,9 +1311,6 @@ importers:
       eslint-plugin-vue-scoped-css:
         specifier: ^2.8.0
         version: 2.8.1(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))
-      eslint-plugin-vuetify:
-        specifier: ^2.7.3
-        version: 2.7.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(vuetify@4.3.0)
       jsdom:
         specifier: ^27.2.0
         version: 27.2.0(supports-color@8.1.1)
@@ -7874,32 +7871,12 @@ packages:
       eslint: '>=5.0.0'
       vue-eslint-parser: '>=7.1.0'
 
-  eslint-plugin-vue@10.11.1:
-    resolution: {integrity: sha512-pasVXhl7wUmIvhujoqs/m0mJ9r59QW1IR9XXYKGR0FETzSM+Hhlf4qKIYgWiDDP+9YKv4YfbwskD7LqIdVcgQw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
-      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      vue-eslint-parser: ^10.3.0
-    peerDependenciesMeta:
-      '@stylistic/eslint-plugin':
-        optional: true
-      '@typescript-eslint/parser':
-        optional: true
-
   eslint-plugin-vue@9.26.0:
     resolution: {integrity: sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  eslint-plugin-vuetify@2.7.3:
-    resolution: {integrity: sha512-f9ycYiBJeZjAyonn1j43I3WOh6LExJ8CO9dH0jtEl5T8kt76Y0wZng3jADYqiYW+bkXPXCndH027t29G4i3CFw==}
-    peerDependencies:
-      eslint: ^8.0.0 || ^9.0.0 || ^10.0.0
-      vuetify: ^3.0.0 || ^4.0.0
-
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -11521,10 +11498,6 @@ packages:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@7.1.7:
-    resolution: {integrity: sha512-wWBro/7hJ40ye6TPiXkUQoXKCw23xSsjriUvqd7Uls9Sso3oLiON1flc18cCdnjgCRXw4fBVqUJJeOdDTh3P3g==}
-    engines: {node: '>=4'}
-
   postcss-styl@0.12.3:
     resolution: {integrity: sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==}
     engines: {node: ^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0}
@@ -11994,10 +11967,6 @@ packages:
   require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
-  requireindex@1.2.0:
-    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
-    engines: {node: '>=0.10.5'}
-
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
@@ -18710,7 +18679,7 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.8.1
+      semver: 7.8.5
       ts-api-utils: 1.3.0(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
@@ -18734,7 +18703,7 @@ snapshots:
 
   '@typescript-eslint/utils@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0(supports-color@8.1.1))
+      '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.0(supports-color@8.1.1))
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(supports-color@8.1.1)(typescript@5.8.3)
@@ -22707,19 +22676,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-vue@10.11.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.0(supports-color@8.1.1))
-      eslint: 8.57.0(supports-color@8.1.1)
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 7.1.7
-      semver: 7.8.5
-      vue-eslint-parser: 9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
-      xml-name-validator: 5.0.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3)
-
   eslint-plugin-vue@9.26.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0(supports-color@8.1.1))
@@ -22734,17 +22690,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-vuetify@2.7.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(vuetify@4.3.0):
-    dependencies:
-      eslint: 8.57.0(supports-color@8.1.1)
-      eslint-plugin-vue: 10.11.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.8.3))(eslint@8.57.0(supports-color@8.1.1))(vue-eslint-parser@9.4.2(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))
-      requireindex: 1.2.0
-      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
-    transitivePeerDependencies:
-      - '@stylistic/eslint-plugin'
-      - '@typescript-eslint/parser'
-      - vue-eslint-parser
-
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -24845,7 +24790,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.8.1
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -26208,7 +26153,7 @@ snapshots:
     dependencies:
       growly: 1.3.0
       is-wsl: 2.2.0
-      semver: 7.8.1
+      semver: 7.8.5
       shellwords: 0.1.1
       uuid: 8.3.2
       which: 2.0.2
@@ -27603,11 +27548,6 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@7.1.7:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-styl@0.12.3(supports-color@8.1.1):
     dependencies:
       debug: 4.4.3(supports-color@8.1.1)
@@ -28158,8 +28098,6 @@ snapshots:
 
   require-main-filename@2.0.0: {}
 
-  requireindex@1.2.0: {}
-
   requires-port@1.0.0: {}
 
   reselect@5.2.0: {}

From d69d2480f1e038cf976eedfd20c853093461da5a Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 23:54:32 +0200
Subject: [PATCH 08/22] fix: revert stepper avatar unit test

---
 .../layout/CategorizationStepperRenderer.spec.ts  | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
index 4b8c302a6f..60a6be323a 100644
--- a/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
+++ b/packages/vue-vuetify/tests/unit/layout/CategorizationStepperRenderer.spec.ts
@@ -4,7 +4,6 @@ import { nextTick } from 'vue';
 import CategorizationStepperRenderer from '../../../src/layouts/CategorizationStepperRenderer.vue';
 import { layoutRenderers } from '../../../src/layouts';
 import { mountJsonForms } from '../util';
-import { VStepperItem } from 'vuetify/components';
 
 describe('CategorizationStepperRenderer.vue', () => {
   const schema = {
@@ -77,17 +76,9 @@ describe('CategorizationStepperRenderer.vue', () => {
 
     const stepper = wrapper.getComponent(CategorizationStepperRenderer);
 
-    const items = stepper.findAllComponents(VStepperItem);
-
-    // 1. Verify it keeps original category values
-    expect(items.map((item) => item.props('value'))).toEqual([2, 3]);
-
-    // 2. Verify sequential visible step badges and labels via rendered text
-    expect(items[0].text()).toContain('1');
-    expect(items[0].text()).toContain('Second');
-
-    expect(items[1].text()).toContain('2');
-    expect(items[1].text()).toContain('Third');
+    expect(
+      stepper.findAll('.v-stepper-item__avatar').map((avatar) => avatar.text())
+    ).toEqual(['1', '2']);
   });
 
   it('keeps the same active category when a previous category becomes visible', async () => {

From 4df8353da5ae8bcac4577ea4e50037ad98a24a19 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 23:56:17 +0200
Subject: [PATCH 09/22] fix: updated snapshot due to failint test

---
 .../MultiEnumSelectRenderer.spec.ts.snap      | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
index 100b2404c7..fbb9d29401 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
@@ -4,18 +4,19 @@ exports[`MultiEnumSelectRenderer.vue > with enum schema > should render componen
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#8">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--chips v-select--multiple v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--chips v-select--multiple v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -30,11 +31,7 @@ exports[`MultiEnumSelectRenderer.vue > with enum schema > should render componen
                 <!---->My Multi Select
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select multiple="" hidden="">
-                  <option selected="" value="a"></option>
-                  <option value="b"></option>
-                  <option value="c"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="a">
                 <!---->
                 <!---->
                 <div class="v-select__selection"><span class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
@@ -42,7 +39,7 @@ exports[`MultiEnumSelectRenderer.vue > with enum schema > should render componen
                   <!---->
                   <div class="v-chip__content" data-no-activator="">a</div>
                   <!----><button class="v-chip__close" type="button" data-testid="close-chip" aria-label="Close"><i class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-x-small" aria-hidden="true"></i></button></span>
-                </div><input size="1" role="combobox" type="text" aria-labelledby="#8-input-label" id="#8-input" aria-describedby="#8-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="a">
+                </div><input size="1" role="combobox" type="text" aria-labelledby="#8-input-label" id="#8-input" aria-describedby="#8-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="a">
               </div>
               <!---->
             </div>
@@ -76,18 +73,19 @@ exports[`MultiEnumSelectRenderer.vue > with oneOf schema > should render compone
 "<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
   <div class="v-application__wrap">
     <div class="control" id="#14">
-      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--chips v-select--multiple v-select--selected input">
+      <div class="v-input v-input--horizontal v-input--center-affix v-input--indent-details v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--chips v-select--multiple v-select--selected input">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-1" aria-owns="menu-v-1">
+          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
-              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+              <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; --v-progress-reveal-duration: 900ms; --v-progress-chunk-gap: 4px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
+                    <!---->
                     <div class="v-progress-linear__indeterminate long"></div>
                     <div class="v-progress-linear__indeterminate short"></div>
                   </div>
@@ -102,11 +100,7 @@ exports[`MultiEnumSelectRenderer.vue > with oneOf schema > should render compone
                 <!---->My OneOf Multi Select
               </label>
               <!---->
-              <div class="v-field__input" data-no-activator=""><select multiple="" hidden="">
-                  <option value="a"></option>
-                  <option selected="" value="b"></option>
-                  <option value="c"></option>
-                </select>
+              <div class="v-field__input" data-no-activator=""><input type="hidden" value="b">
                 <!---->
                 <!---->
                 <div class="v-select__selection"><span class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
@@ -114,7 +108,7 @@ exports[`MultiEnumSelectRenderer.vue > with oneOf schema > should render compone
                   <!---->
                   <div class="v-chip__content" data-no-activator="">Option B</div>
                   <!----><button class="v-chip__close" type="button" data-testid="close-chip" aria-label="Close"><i class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-x-small" aria-hidden="true"></i></button></span>
-                </div><input size="1" role="combobox" type="text" aria-labelledby="#14-input-label" id="#14-input" aria-describedby="#14-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-1" value="Option B">
+                </div><input size="1" role="combobox" type="text" aria-labelledby="#14-input-label" id="#14-input" aria-describedby="#14-input-messages" inputmode="none" aria-expanded="false" aria-controls="menu-v-0" value="Option B">
               </div>
               <!---->
             </div>

From be7a52907a463219491c72b4c6adaa7f0cc9eae0 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 16 Oct 2026 23:57:23 +0200
Subject: [PATCH 10/22] fix: cleanup component state to fix failing test due to
 race condition between Vuetify and the Vitest/JSDOM env

---
 .../vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
index ab49545c0c..9478b845bc 100644
--- a/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
+++ b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
@@ -72,6 +72,12 @@ describe('OneOfRenderer.vue', () => {
         }
       });
     expect(found).toBeTruthy();
+
+    // Cleanup: Close the dialog and flush pending Vuetify animations 
+    // to prevent JSDOM from throwing an error during teardown.
+    wrapper.getComponent(OneOfControlRenderer).vm.cancel();
+    await wrapper.vm.$nextTick();
+    await new Promise((resolve) => requestAnimationFrame(resolve));
   });
 
   it('should render component and match snapshot', () => {

From 11970312b38c3db6ef4eb92efc3a6b1250d06691 Mon Sep 17 00:00:00 2001
From: darius-lesch <134329447+darius-lesch@users.noreply.github.com>
Date: Fri, 16 Oct 2026 22:24:00 +0000
Subject: [PATCH 11/22] chore(vue-vuetify): update typography and formatting

* Updated `text-headline-medium` to `text-headline-small` in `OneOfRenderer.vue`, `OneOfTabRenderer.vue`, and `ArrayLayoutRenderer.vue`.
* Updated `text-headline-small` to `text-title-large` in `ListWithDetailRenderer.vue`.
* Folded redundant `align-self-center` class into the dynamic `:class` binding in `ArrayLayoutRenderer.vue`.
* Ran Prettier on modified files and the dev example drawer component to fix formatting.
---
 packages/vue-vuetify/dev/components/ExampleDrawer.vue      | 4 +++-
 .../vue-vuetify/src/additional/ListWithDetailRenderer.vue  | 7 ++++---
 packages/vue-vuetify/src/complex/OneOfRenderer.vue         | 2 +-
 packages/vue-vuetify/src/complex/OneOfTabRenderer.vue      | 2 +-
 packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue   | 5 ++---
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/vue-vuetify/dev/components/ExampleDrawer.vue b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
index b904e73ba4..f1bcbef09e 100644
--- a/packages/vue-vuetify/dev/components/ExampleDrawer.vue
+++ b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
@@ -29,7 +29,9 @@ const filteredExamples = computed(() => {
       <template v-slot:prepend>
         <VuetifyLogo width="40" height="40" />
       </template>
-      <v-list-item-title class="text-headline-small"> Examples </v-list-item-title>
+      <v-list-item-title class="text-headline-small">
+        Examples
+      </v-list-item-title>
       <v-list-item-subtitle> Vuetify Renderers </v-list-item-subtitle>
     </v-list-item>
 
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index 40e9248f64..9124c9904b 100644
--- a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -125,8 +125,7 @@
                         class="ma-0"
                         :aria-label="control.translations.downAriaLabel"
                         :disabled="
-                          index >= dataLength - 1 ||
-                          !isControlEditable(control)
+                          index >= dataLength - 1 || !isControlEditable(control)
                         "
                         :class="styles.listWithDetail.itemMoveDown"
                         @click="moveDownClick($event, index)"
@@ -172,7 +171,9 @@
         </v-list>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="flex-grow-1">
-        <span class="text-headline-small">{{ control.translations.noSelection }}</span>
+        <span class="text-title-large">{{
+          control.translations.noSelection
+        }}</span>
       </v-col>
       <v-col
         v-else
diff --git a/packages/vue-vuetify/src/complex/OneOfRenderer.vue b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
index 362130475a..efa094747b 100644
--- a/packages/vue-vuetify/src/complex/OneOfRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfRenderer.vue
@@ -45,7 +45,7 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-headline-medium">
+        <v-card-title class="text-headline-small">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 
diff --git a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
index 4947bd08b7..535db7e070 100644
--- a/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/packages/vue-vuetify/src/complex/OneOfTabRenderer.vue
@@ -40,7 +40,7 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-headline-medium">
+        <v-card-title class="text-headline-small">
           {{ control.translations.clearDialogTitle }}
         </v-card-title>
 
diff --git a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
index 6e2495da98..a272889c56 100644
--- a/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/ArrayLayoutRenderer.vue
@@ -101,8 +101,7 @@
                     </v-col>
 
                     <v-col
-                      class="align-self-center"
-                      :class="`pl-0 text-truncate ${styles.arrayList.itemLabel}`"
+                      :class="`align-self-center pl-0 text-truncate ${styles.arrayList.itemLabel}`"
                       >{{ childLabelForIndex(index) }}</v-col
                     >
                     <v-col
@@ -237,7 +236,7 @@
       @click:outside="suggestToDelete = null"
     >
       <v-card>
-        <v-card-title class="text-headline-medium">
+        <v-card-title class="text-headline-small">
           {{ control.translations.deleteDialogTitle }}
         </v-card-title>
 

From 125fa089614221e5d97a46b88733706b8c4d4e9a Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Sat, 17 Oct 2026 22:35:24 +0200
Subject: [PATCH 12/22] fix: resolve the unintended scope creep

---
 packages/vue-vuetify/package.json | 2 +-
 pnpm-lock.yaml                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index 9c002e6d24..3ac08a704a 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -95,7 +95,7 @@
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.11",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.23.0",
     "eslint-plugin-vue-scoped-css": "^2.8.0",
     "jsdom": "^27.2.0",
     "json-refs": "3.0.15",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9bf628cfa..24985a62c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1306,7 +1306,7 @@ importers:
         specifier: ^8.57.0
         version: 8.57.0(supports-color@8.1.1)
       eslint-plugin-vue:
-        specifier: ^9.26.0
+        specifier: ^9.23.0
         version: 9.26.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)
       eslint-plugin-vue-scoped-css:
         specifier: ^2.8.0

From 6a61f75b770a1db15cc75527b2cb25ec0437f510 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Sat, 17 Oct 2026 22:49:45 +0200
Subject: [PATCH 13/22] chore: strictly bump vuetify to v4 without side effects

---
 packages/vue-vuetify/package.json | 4 ++--
 pnpm-lock.yaml                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index 3ac08a704a..be6cc92695 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^4.0.0"
+    "vuetify": "^3.11.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -119,6 +119,6 @@
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.2.0",
-    "vuetify": "^4.0.0"
+    "vuetify": "^4.2.6"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24985a62c6..b230030b20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1378,7 +1378,7 @@ importers:
         specifier: ^2.2.0
         version: 2.2.12(typescript@5.8.3)
       vuetify:
-        specifier: ^4.0.0
+        specifier: ^4.2.6
         version: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
 
 packages:

From d02840a94374871bd428d7610248c3c20b8637ee Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Wed, 21 Oct 2026 23:12:50 +0200
Subject: [PATCH 14/22] fix: vuetify version inconsistency

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

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index be6cc92695..c0e61c1e90 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^3.11.0"
+    "vuetify": "^4.2.6"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",

From 198bb2c83fb2cdbad4428841d8b3a7204a8e416d Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Wed, 21 Oct 2026 23:19:01 +0200
Subject: [PATCH 15/22] fix: resolved prettier fail issue

---
 packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
index 9478b845bc..b30087a3e1 100644
--- a/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
+++ b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
@@ -73,7 +73,7 @@ describe('OneOfRenderer.vue', () => {
       });
     expect(found).toBeTruthy();
 
-    // Cleanup: Close the dialog and flush pending Vuetify animations 
+    // Cleanup: Close the dialog and flush pending Vuetify animations
     // to prevent JSDOM from throwing an error during teardown.
     wrapper.getComponent(OneOfControlRenderer).vm.cancel();
     await wrapper.vm.$nextTick();

From 943871b6a1b6c642e6623dcff535cc701f35bd66 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Wed, 21 Oct 2026 23:26:37 +0200
Subject: [PATCH 16/22] fix: resolve class inconsistency

---
 packages/vue-vuetify/dev/components/ExampleDrawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vuetify/dev/components/ExampleDrawer.vue b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
index f1bcbef09e..0d7b95ae4c 100644
--- a/packages/vue-vuetify/dev/components/ExampleDrawer.vue
+++ b/packages/vue-vuetify/dev/components/ExampleDrawer.vue
@@ -29,7 +29,7 @@ const filteredExamples = computed(() => {
       <template v-slot:prepend>
         <VuetifyLogo width="40" height="40" />
       </template>
-      <v-list-item-title class="text-headline-small">
+      <v-list-item-title class="text-title-large">
         Examples
       </v-list-item-title>
       <v-list-item-subtitle> Vuetify Renderers </v-list-item-subtitle>

From 015d9aaeb7a01c32262bfe6e0d04b3ecf821ea95 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 23 Oct 2026 14:50:49 +0200
Subject: [PATCH 17/22] update vuetify to 4.3.0, vite-plugin-vuetify to 2.1.3,
 regen lock file

---
 packages/vue-vuetify/package.json |  6 +++---
 pnpm-lock.yaml                    | 36 +++++++++++++++----------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/vue-vuetify/package.json b/packages/vue-vuetify/package.json
index c0e61c1e90..214183fc33 100644
--- a/packages/vue-vuetify/package.json
+++ b/packages/vue-vuetify/package.json
@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^4.2.6"
+    "vuetify": "^4.3.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -114,11 +114,11 @@
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-static-copy": "^2.3.2",
-    "vite-plugin-vuetify": "^2.1.1",
+    "vite-plugin-vuetify": "^2.1.3",
     "vitest": "^1.4.0",
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.2.0",
-    "vuetify": "^4.2.6"
+    "vuetify": "^4.3.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b230030b20..58598ef96c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1363,8 +1363,8 @@ importers:
         specifier: ^2.3.2
         version: 2.3.2(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))
       vite-plugin-vuetify:
-        specifier: ^2.1.1
-        version: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
+        specifier: ^2.1.3
+        version: 2.1.3(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
       vitest:
         specifier: ^1.4.0
         version: 1.6.0(@types/node@24.12.2)(jsdom@27.2.0(supports-color@8.1.1))(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(supports-color@8.1.1)(terser@5.48.0)
@@ -1378,8 +1378,8 @@ importers:
         specifier: ^2.2.0
         version: 2.2.12(typescript@5.8.3)
       vuetify:
-        specifier: ^4.2.6
-        version: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+        specifier: ^4.3.0
+        version: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.17(typescript@5.8.3))
 
 packages:
 
@@ -5306,11 +5306,11 @@ packages:
   '@vue/web-component-wrapper@1.3.0':
     resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==}
 
-  '@vuetify/loader-shared@2.1.0':
-    resolution: {integrity: sha512-dNE6Ceym9ijFsmJKB7YGW0cxs7xbYV8+1LjU6jd4P14xOt/ji4Igtgzt0rJFbxu+ZhAzqz853lhB0z8V9Dy9cQ==}
+  '@vuetify/loader-shared@2.1.2':
+    resolution: {integrity: sha512-X+1jBLmXHkpQEnC0vyOb4rtX2QSkBiFhaFXz8yhQqN2A4vQ6k2nChxN4Ol7VAY5KoqMdFoRMnmNdp/1qYXDQig==}
     peerDependencies:
       vue: ^3.0.0
-      vuetify: ^3.0.0
+      vuetify: '>=3'
 
   '@vuetify/v0@1.3.0':
     resolution: {integrity: sha512-Tvknc64ciwaOdKzifg3maMOiczbEenWxYINoZIotfKQ8VWBs/yeHbvHffW4w1j+xYnNyYi0S9LK5UCzyQrYg9A==}
@@ -13596,13 +13596,13 @@ packages:
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0
 
-  vite-plugin-vuetify@2.1.1:
-    resolution: {integrity: sha512-Pb7bKhQH8qPMzURmEGq2aIqCJkruFNsyf1NcrrtnjsOIkqJPMcBbiP0oJoO8/uAmyB5W/1JTbbUEsyXdMM0QHQ==}
+  vite-plugin-vuetify@2.1.3:
+    resolution: {integrity: sha512-Q4SC/4TqbNvaZIFb9YsfBqkGlYHbJJJ6uU3CnRBZqLUF3s5eCMVZAaV4GkTbehIH/bhSj42lMXztOwc71u6rVw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: '>=5'
       vue: ^3.0.0
-      vuetify: ^3.0.0
+      vuetify: '>=3'
 
   vite@5.4.21:
     resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
@@ -19614,11 +19614,11 @@ snapshots:
 
   '@vue/web-component-wrapper@1.3.0': {}
 
-  '@vuetify/loader-shared@2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)':
+  '@vuetify/loader-shared@2.1.2(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)':
     dependencies:
       upath: 2.0.1
       vue: 3.5.17(typescript@5.8.3)
-      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.17(typescript@5.8.3))
 
   '@vuetify/v0@1.3.0(vue@3.5.17(typescript@5.8.3))':
     dependencies:
@@ -29953,14 +29953,14 @@ snapshots:
       picocolors: 1.1.1
       vite: 5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0)
 
-  vite-plugin-vuetify@2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0):
+  vite-plugin-vuetify@2.1.3(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0):
     dependencies:
-      '@vuetify/loader-shared': 2.1.0(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
-      debug: 4.3.7(supports-color@8.1.1)
+      '@vuetify/loader-shared': 2.1.2(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
+      debug: 4.4.3(supports-color@8.1.1)
       upath: 2.0.1
       vite: 5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0)
       vue: 3.5.17(typescript@5.8.3)
-      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3))
+      vuetify: 4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.17(typescript@5.8.3))
     transitivePeerDependencies:
       - supports-color
 
@@ -30175,13 +30175,13 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  vuetify@4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.17(typescript@5.8.3)):
+  vuetify@4.3.0(typescript@5.8.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.17(typescript@5.8.3)):
     dependencies:
       '@vuetify/v0': 1.3.0(vue@3.5.17(typescript@5.8.3))
       vue: 3.5.17(typescript@5.8.3)
     optionalDependencies:
       typescript: 5.8.3
-      vite-plugin-vuetify: 2.1.1(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
+      vite-plugin-vuetify: 2.1.3(supports-color@8.1.1)(vite@5.4.21(@types/node@24.12.2)(less@4.4.0)(sass@1.93.2)(stylus@0.57.0(supports-color@8.1.1))(terser@5.48.0))(vue@3.5.17(typescript@5.8.3))(vuetify@4.3.0)
     transitivePeerDependencies:
       - '@adobe/leonardo-contrast-colors'
       - '@ant-design/colors'

From 7ef6b1f918fdc1bc838b68d43ac0f21e79b4ea5e Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 23 Oct 2026 14:53:32 +0200
Subject: [PATCH 18/22] merge imports

---
 .../src/layouts/CategorizationStepperRenderer.vue    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 5ab95ea1f5..d7667aecbb 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -97,12 +97,10 @@ import {
   VStepperActions,
   VStepperHeader,
   VStepperItem,
-  VStepperWindow,
-  VStepperWindowItem,
-} from 'vuetify/components';
-import {
   VStepperVertical,
   VStepperVerticalItem,
+  VStepperWindow,
+  VStepperWindowItem,
 } from 'vuetify/components';
 import { useVuetifyLayout } from '../util';
 
@@ -133,7 +131,7 @@ const layoutRenderer = defineComponent({
           category,
           originalIndex,
         }))
-        .filter((e) => e.category.value.visible)
+        .filter((e) => e.category.value.visible),
     );
 
     watch(
@@ -142,13 +140,13 @@ const layoutRenderer = defineComponent({
         if (
           visibleCategories.length > 0 &&
           !visibleCategories.some(
-            (entry) => entry.originalIndex + 1 === activeCategory.value
+            (entry) => entry.originalIndex + 1 === activeCategory.value,
           )
         ) {
           activeCategory.value = visibleCategories[0].originalIndex + 1;
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     return {

From 850e56d8a0ca70e14a710eb0662b20bfa6c13d20 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 23 Oct 2026 22:20:41 +0200
Subject: [PATCH 19/22] chore: regenerated outdated snapshots

---
 .../complex/__snapshots__/ArrayControlRenderer.spec.ts.snap    | 1 +
 .../complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap | 2 ++
 .../unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap      | 1 +
 .../controls/__snapshots__/DateControlRenderer.spec.ts.snap    | 2 ++
 .../__snapshots__/DateTimeControlRenderer.spec.ts.snap         | 2 ++
 .../controls/__snapshots__/EnumControlRenderer.spec.ts.snap    | 2 ++
 .../controls/__snapshots__/IntegerControlRenderer.spec.ts.snap | 1 +
 .../__snapshots__/MultiStringControlRenderer.spec.ts.snap      | 1 +
 .../controls/__snapshots__/NumberControlRenderer.spec.ts.snap  | 1 +
 .../__snapshots__/OneOfEnumControlRenderer.spec.ts.snap        | 2 ++
 .../controls/__snapshots__/StringControlRenderer.spec.ts.snap  | 3 +++
 .../controls/__snapshots__/TimeControlRenderer.spec.ts.snap    | 2 ++
 .../unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap | 1 +
 13 files changed, 21 insertions(+)

diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
index d08d53d570..328e1c4f62 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
           <!---->
           <div class="v-progress-linear__background"></div>
           <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+          <!---->
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
               <!---->
diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
index fbb9d29401..1f7ac780ea 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`MultiEnumSelectRenderer.vue > with enum schema > should render componen
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -83,6 +84,7 @@ exports[`MultiEnumSelectRenderer.vue > with oneOf schema > should render compone
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
index 053c679151..67cf6f7a08 100644
--- a/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap
@@ -15,6 +15,7 @@ exports[`OneOfRenderer.vue > should render component and match snapshot 1`] = `
                 <!---->
                 <div class="v-progress-linear__background bg-error"></div>
                 <div class="v-progress-linear__buffer bg-error" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
index 5d98c5566a..7ad7b74758 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`DateControlRenderer.vue > should render component and match snapshot 1`
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -74,6 +75,7 @@ exports[`DateControlRenderer.vue > should render component and match snapshot wh
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
index 24decd74d0..6cbf60abab 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`DateTimeControlRenderer.vue > should render component and match snapsho
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -74,6 +75,7 @@ exports[`DateTimeControlRenderer.vue > should render component and match snapsho
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
index c4729c8168..d3ac745a56 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot 1`
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -78,6 +79,7 @@ exports[`EnumControlRenderer.vue > should render component and match snapshot wh
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
index 4c503c434b..33b89977e4 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`IntegerControlRenderer.vue > should render component and match snapshot
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
index 3e7dc22c1e..bed66b6d91 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`MultiStringControlRenderer.vue > should render component and match snap
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
index e3c3e399db..2b7d016286 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`NumberControlRenderer.vue > should render component and match snapshot
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
index 3abe7e7068..10b848f107 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -78,6 +79,7 @@ exports[`OneOfEnumControlRenderer.vue > should render component and match snapsh
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
index a221663858..c20f7f931e 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`StringControlRenderer.vue > should render component and match snapshot
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -72,6 +73,7 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -136,6 +138,7 @@ exports[`StringControlRenderer.vue with suggestion > should render component and
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
index 646146a7d0..9f1c05346c 100644
--- a/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`TimeControlRenderer.vue > should render component and match snapshot 1`
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
@@ -74,6 +75,7 @@ exports[`TimeControlRenderer.vue > should render component and match snapshot wh
                 <!---->
                 <div class="v-progress-linear__background"></div>
                 <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+                <!---->
                 <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
                   <div class="v-progress-linear__indeterminate">
                     <!---->
diff --git a/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
index 410f6d59e8..bd1285f29e 100644
--- a/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
+++ b/packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`ArrayLayoutRenderer.vue > should render component and match snapshot 1`
           <!---->
           <div class="v-progress-linear__background"></div>
           <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+          <!---->
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
               <!---->

From 3041bd5fc66a2a23bf5f2ee3dc0098b22b95b97d Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 23 Oct 2026 22:20:56 +0200
Subject: [PATCH 20/22] fix: `TypeError` in `CombinatorProperties.vue`

**The Issue:** The `OneOfRenderer.spec.ts` test suite uses a minimal
schema that only contains a `oneOf` property. When
`CombinatorProperties.vue` mounts, it exctracts properties to generate a
UI schema by omitting the combinator keyword (`omit(props.schema,
props.combinatorKeyword)`), which in this test case results in an
entirely empty object.
**The Crash:** When this empty object is passed into
`Generate.uiSchema()`, the generator finds no properties and returns a
falsy value (null/undefined). The component's internal `isLayout` type
guard then immediately executed
`Object.prototype.hasOwnProperty.call(uischema, 'elements')`. Passing
`null` to `hasOwnProperty` threw a hard `TypeError: Cannot convert
undefined or null to object`, crashing the component mount phase.
**The Fix:** In `CombinatorProperties.vue`, I explicitly typed the
generator output to acknowledge it can return `null` and updated the
`isLayout` type guard to safely accept `unknown` inputs. The guard now
ensures `uischema !== null` and `typeof uischema === 'object'` before
attempting to check for the `elements` property.
---
 .../components/CombinatorProperties.vue        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
index 4803ce351d..c1a3ba2491 100644
--- a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
@@ -54,18 +54,26 @@ export default defineComponent({
       props.schema,
       props.combinatorKeyword,
     ) as JsonSchema;
-    const foundUISchema: UISchemaElement = Generate.uiSchema(
+
+    // 1. Explicitly acknowledge the generator can return null for empty schemas
+    const foundUISchema = Generate.uiSchema(
       otherProps,
       'VerticalLayout',
       undefined,
       props.rootSchema,
-    );
+    ) as UISchemaElement | null;
 
-    const isLayout = (uischema: UISchemaElement): uischema is Layout =>
-      Object.prototype.hasOwnProperty.call(uischema, 'elements');
+    // 2. Implement the bulletproof type guard
+    const isLayout = (uischema: unknown): uischema is Layout =>
+      uischema !== null &&
+      typeof uischema === 'object' &&
+      'elements' in uischema;
 
+    // 3. Address the null bug at the logical level before invoking the guard
     const isLayoutWithElements =
-      isLayout(foundUISchema) && foundUISchema.elements.length > 0;
+      foundUISchema !== null &&
+      isLayout(foundUISchema) &&
+      foundUISchema.elements.length > 0;
 
     return {
       otherProps,

From 2d163e261f18ed2cd44984e6d37214dc9b8ab3b8 Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Fri, 23 Oct 2026 22:37:24 +0200
Subject: [PATCH 21/22] fix: remove the explicit `| null` cast

Remove the explicit `| null` cast from `foundUISchema` so it defaults to
the official library type (`UISchemaElement`).
---
 .../src/complex/components/CombinatorProperties.vue          | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
index c1a3ba2491..f396b18d31 100644
--- a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
@@ -55,21 +55,18 @@ export default defineComponent({
       props.combinatorKeyword,
     ) as JsonSchema;
 
-    // 1. Explicitly acknowledge the generator can return null for empty schemas
     const foundUISchema = Generate.uiSchema(
       otherProps,
       'VerticalLayout',
       undefined,
       props.rootSchema,
-    ) as UISchemaElement | null;
+    );
 
-    // 2. Implement the bulletproof type guard
     const isLayout = (uischema: unknown): uischema is Layout =>
       uischema !== null &&
       typeof uischema === 'object' &&
       'elements' in uischema;
 
-    // 3. Address the null bug at the logical level before invoking the guard
     const isLayoutWithElements =
       foundUISchema !== null &&
       isLayout(foundUISchema) &&

From 6dbcfefa1098204223095a7c39f7fcbd68b5f5de Mon Sep 17 00:00:00 2001
From: Darius Lesch <darius.lesch@proton.me>
Date: Mon, 26 Oct 2026 12:55:13 +0100
Subject: [PATCH 22/22] chore: revert CombinatorProperties to master and rely
 on updated core generator

---
 .../src/complex/components/CombinatorProperties.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
index f396b18d31..4803ce351d 100644
--- a/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
+++ b/packages/vue-vuetify/src/complex/components/CombinatorProperties.vue
@@ -54,23 +54,18 @@ export default defineComponent({
       props.schema,
       props.combinatorKeyword,
     ) as JsonSchema;
-
-    const foundUISchema = Generate.uiSchema(
+    const foundUISchema: UISchemaElement = Generate.uiSchema(
       otherProps,
       'VerticalLayout',
       undefined,
       props.rootSchema,
     );
 
-    const isLayout = (uischema: unknown): uischema is Layout =>
-      uischema !== null &&
-      typeof uischema === 'object' &&
-      'elements' in uischema;
+    const isLayout = (uischema: UISchemaElement): uischema is Layout =>
+      Object.prototype.hasOwnProperty.call(uischema, 'elements');
 
     const isLayoutWithElements =
-      foundUISchema !== null &&
-      isLayout(foundUISchema) &&
-      foundUISchema.elements.length > 0;
+      isLayout(foundUISchema) && foundUISchema.elements.length > 0;
 
     return {
       otherProps,