diff --git a/MIGRATION.md b/MIGRATION.md
index fdef1d94c..8020822ae 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
diff --git a/packages/vue-vuetify/dev/components/ExampleAppBar.vue b/packages/vue-vuetify/dev/components/ExampleAppBar.vue
index 2f7593b7a..2a8f7525d 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 2228e6790..0d7b95ae4 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-h6"> Examples </v-list-item-title>
+      <v-list-item-title class="text-title-large">
+        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 4036503c4..e3630e85a 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 d26c86f2f..214183fc3 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.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": "^3.12.8"
+    "vuetify": "^4.3.0"
   }
 }
diff --git a/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue b/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue
index f8b2cfad8..9124c9904 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-h6">{{ 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/ArrayControlRenderer.vue b/packages/vue-vuetify/src/complex/ArrayControlRenderer.vue
index 8f5ddaa48..965f6b972 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 5f572a7f1..dd2e76b3c 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 f43b59ad4..efa094747 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-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 083a63802..535db7e07 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-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 1c8d19593..a272889c5 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
@@ -101,12 +101,11 @@
                     </v-col>
 
                     <v-col
-                      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
-                      align-self="center"
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -134,7 +133,7 @@
                       </v-tooltip>
                     </v-col>
                     <v-col
-                      align-self="center"
+                      class="align-self-center"
                       v-if="appliedOptions.showSortButtons"
                     >
                       <v-tooltip location="bottom">
@@ -162,7 +161,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 +236,7 @@
       @click:outside="suggestToDelete = null"
     >
       <v-card>
-        <v-card-title class="text-h5">
+        <v-card-title class="text-headline-small">
           {{ 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 84eb0bab2..d7667aecb 100644
--- a/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -97,13 +97,11 @@ import {
   VStepperActions,
   VStepperHeader,
   VStepperItem,
+  VStepperVertical,
+  VStepperVerticalItem,
   VStepperWindow,
   VStepperWindowItem,
 } from 'vuetify/components';
-import {
-  VStepperVertical,
-  VStepperVerticalItem,
-} from 'vuetify/labs/VStepperVertical';
 import { useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
@@ -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 {
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 2a7946940..37145aa10 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/OneOfRenderer.spec.ts b/packages/vue-vuetify/tests/unit/complex/OneOfRenderer.spec.ts
index ab49545c0..b30087a3e 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', () => {
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 d38bc3b61..328e1c4f6 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,14 @@ 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 +51,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__/MultiEnumSelectRenderer.spec.ts.snap b/packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap
index 100b2404c..1f7ac780e 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,20 @@ 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 +32,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 +40,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 +74,20 @@ 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 +102,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 +110,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>
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 25580de53..67cf6f7a0 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,20 @@ 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 +31,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 b8988d9b1..7ad7b7475 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,20 @@ 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 +65,20 @@ 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 bd8cfa3d8..6cbf60aba 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,20 @@ 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 +65,20 @@ 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 3a9f6eca2..d3ac745a5 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,20 @@ 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 +32,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 +69,20 @@ 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 +97,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 ad3474427..33b89977e 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,20 @@ 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 +39,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 5fb1f79a6..bed66b6d9 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,20 @@ 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 7e6bd2859..2b7d01628 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,20 @@ 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 +39,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 5ee533d54..10b848f10 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,20 @@ 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 +32,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 +69,20 @@ 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 +97,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 7bc4be4a1..c20f7f931 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,20 @@ 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 +63,20 @@ 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 +91,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 +128,20 @@ 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 +156,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 b29b939d4..9f1c05346 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,20 @@ 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 +65,20 @@ 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 72e0b69ce..bd1285f29 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,14 @@ 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 +51,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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d809f144d..58598ef96 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@3.12.8)
+        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: ^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.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:
 
@@ -3152,6 +3152,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}
@@ -5300,11 +5306,47 @@ 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==}
+    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==}
@@ -12285,6 +12327,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'}
@@ -13549,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==}
@@ -13745,12 +13792,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 +16712,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)
@@ -18627,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
@@ -18651,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)
@@ -19562,11 +19614,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.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: 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.3)(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:
@@ -24734,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
 
@@ -26097,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
@@ -28469,6 +28525,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 +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@3.12.8):
+  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@3.12.8)
-      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: 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.3)(vue@3.5.17(typescript@5.8.3))
     transitivePeerDependencies:
       - supports-color
 
@@ -30117,12 +30175,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.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@3.12.8)
+      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'
+      - '@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: