vuetify 3.2.2 → 3.2.4

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.2
+* Vuetify v3.2.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1288,7 +1288,7 @@
     vue.provide(VuetifyLayoutItemKey, {
       id
     });
-    const isKeptAlive = vue.ref(false);
+    const isKeptAlive = vue.shallowRef(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
     const {
@@ -1419,7 +1419,7 @@
       return items.value.find(item => item.id === id);
     };
     const rootVm = getCurrentInstance('createLayout');
-    const isMounted = vue.ref(false);
+    const isMounted = vue.shallowRef(false);
     vue.onMounted(() => {
       isMounted.value = true;
     });
@@ -1674,9 +1674,9 @@
         variables: {
           'border-color': '#FFFFFF',
           'border-opacity': 0.12,
-          'high-emphasis-opacity': 0.87,
-          'medium-emphasis-opacity': 0.60,
-          'disabled-opacity': 0.38,
+          'high-emphasis-opacity': 1,
+          'medium-emphasis-opacity': 0.70,
+          'disabled-opacity': 0.50,
           'idle-opacity': 0.10,
           'hover-opacity': 0.04,
           'focus-opacity': 0.12,
@@ -2013,6 +2013,10 @@
     }
   };
 
+  // Composables
+
+  // Types
+
   const LANG_PREFIX = '$vuetify.';
   const replace = (str, params) => {
     return str.replace(/\{(\d+)\}/g, (match, index) => {
@@ -2085,8 +2089,8 @@
     };
   }
   function createVuetifyAdapter(options) {
-    const current = vue.ref(options?.locale ?? 'en');
-    const fallback = vue.ref(options?.fallback ?? 'en');
+    const current = vue.shallowRef(options?.locale ?? 'en');
+    const fallback = vue.shallowRef(options?.fallback ?? 'en');
     const messages = vue.ref({
       en,
       ...options?.messages
@@ -2205,15 +2209,16 @@
     };
   }
 
+  const makeVAppProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeLayoutProps({
+      fullHeight: true
+    }),
+    ...makeThemeProps()
+  }, 'v-app');
   const VApp = genericComponent()({
     name: 'VApp',
-    props: {
-      ...makeComponentProps(),
-      ...makeLayoutProps({
-        fullHeight: true
-      }),
-      ...makeThemeProps()
-    },
+    props: makeVAppProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2248,15 +2253,16 @@
 
   // Types
 
+  const makeDefaultsProviderProps = propsFactory({
+    defaults: Object,
+    disabled: Boolean,
+    reset: [Number, String],
+    root: Boolean,
+    scoped: Boolean
+  }, 'v-defaults-provider');
   const VDefaultsProvider = genericComponent(false)({
     name: 'VDefaultsProvider',
-    props: {
-      defaults: Object,
-      disabled: Boolean,
-      reset: [Number, String],
-      root: Boolean,
-      scoped: Boolean
-    },
+    props: makeDefaultsProviderProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2282,25 +2288,23 @@
 
   // Types
 
+  const makeTransitionProps$1 = propsFactory({
+    disabled: Boolean,
+    group: Boolean,
+    hideOnLeave: Boolean,
+    leaveAbsolute: Boolean,
+    mode: String,
+    origin: String
+  }, 'transition');
   function createCssTransition(name) {
     let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center center';
     let mode = arguments.length > 2 ? arguments[2] : undefined;
     return genericComponent()({
       name,
-      props: {
-        disabled: Boolean,
-        group: Boolean,
-        hideOnLeave: Boolean,
-        leaveAbsolute: Boolean,
-        mode: {
-          type: String,
-          default: mode
-        },
-        origin: {
-          type: String,
-          default: origin
-        }
-      },
+      props: makeTransitionProps$1({
+        mode,
+        origin
+      }),
       setup(props, _ref) {
         let {
           slots
@@ -2458,11 +2462,12 @@
 
   // Types
 
+  const makeVDialogTransitionProps = propsFactory({
+    target: Object
+  }, 'v-dialog-transition');
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
-    props: {
-      target: Object
-    },
+    props: makeVDialogTransitionProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2652,14 +2657,15 @@
       })
     };
   }
+  const makeVResponsiveProps = propsFactory({
+    aspectRatio: [String, Number],
+    contentClass: String,
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  }, 'v-responsive');
   const VResponsive = genericComponent()({
     name: 'VResponsive',
-    props: {
-      aspectRatio: [String, Number],
-      contentClass: String,
-      ...makeComponentProps(),
-      ...makeDimensionProps()
-    },
+    props: makeVResponsiveProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2748,6 +2754,7 @@
     } = _ref;
     const {
       transition,
+      disabled,
       ...rest
     } = props;
     const {
@@ -2755,44 +2762,47 @@
       ...customProps
     } = typeof transition === 'object' ? transition : {};
     return vue.h(component, vue.mergeProps(typeof transition === 'string' ? {
-      name: transition
-    } : customProps, rest), slots);
+      name: disabled ? '' : transition
+    } : customProps, rest, {
+      disabled
+    }), slots);
   };
 
   // Types
 
+  const makeVImgProps = propsFactory({
+    aspectRatio: [String, Number],
+    alt: String,
+    cover: Boolean,
+    eager: Boolean,
+    gradient: String,
+    lazySrc: String,
+    options: {
+      type: Object,
+      // For more information on types, navigate to:
+      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+      default: () => ({
+        root: undefined,
+        rootMargin: undefined,
+        threshold: undefined
+      })
+    },
+    sizes: String,
+    src: {
+      type: [String, Object],
+      default: ''
+    },
+    srcset: String,
+    width: [String, Number],
+    ...makeComponentProps(),
+    ...makeTransitionProps()
+  }, 'v-img');
   const VImg = genericComponent()({
     name: 'VImg',
     directives: {
       intersect: Intersect
     },
-    props: {
-      aspectRatio: [String, Number],
-      alt: String,
-      cover: Boolean,
-      eager: Boolean,
-      gradient: String,
-      lazySrc: String,
-      options: {
-        type: Object,
-        // For more information on types, navigate to:
-        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-        default: () => ({
-          root: undefined,
-          rootMargin: undefined,
-          threshold: undefined
-        })
-      },
-      sizes: String,
-      src: {
-        type: [String, Object],
-        default: ''
-      },
-      srcset: String,
-      width: [String, Number],
-      ...makeComponentProps(),
-      ...makeTransitionProps()
-    },
+    props: makeVImgProps(),
     emits: {
       loadstart: value => true,
       load: value => true,
@@ -2803,11 +2813,11 @@
         emit,
         slots
       } = _ref;
-      const currentSrc = vue.ref(''); // Set from srcset
+      const currentSrc = vue.shallowRef(''); // Set from srcset
       const image = vue.ref();
-      const state = vue.ref(props.eager ? 'loading' : 'idle');
-      const naturalWidth = vue.ref();
-      const naturalHeight = vue.ref();
+      const state = vue.shallowRef(props.eager ? 'loading' : 'idle');
+      const naturalWidth = vue.shallowRef();
+      const naturalHeight = vue.shallowRef();
       const normalisedSrc = vue.computed(() => {
         return props.src && typeof props.src === 'object' ? {
           src: props.src.src,
@@ -2961,7 +2971,7 @@
           }
         }, null);
       };
-      const isBooted = vue.ref(false);
+      const isBooted = vue.shallowRef(false);
       {
         const stop = vue.watch(aspectRatio, val => {
           if (val) {
@@ -3244,7 +3254,10 @@
       const {
         themeClasses
       } = provideTheme(props);
-      const isExtended = vue.ref(!!(props.extended || slots.extension?.()));
+      const {
+        rtlClasses
+      } = useRtl();
+      const isExtended = vue.shallowRef(!!(props.extended || slots.extension?.()));
       const contentHeight = vue.computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
       const extensionHeight = vue.computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
       provideDefaults({
@@ -3264,7 +3277,7 @@
             'v-toolbar--flat': props.flat,
             'v-toolbar--floating': props.floating,
             [`v-toolbar--density-${props.density}`]: true
-          }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, props.class],
+          }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
           "style": [backgroundColorStyles.value, props.style]
         }, {
           default: () => [hasImage && vue.createVNode("div", {
@@ -3351,11 +3364,11 @@
     } = args;
     let previousScroll = 0;
     const target = vue.ref(null);
-    const currentScroll = vue.ref(0);
-    const savedScroll = vue.ref(0);
-    const currentThreshold = vue.ref(0);
-    const isScrollActive = vue.ref(false);
-    const isScrollingUp = vue.ref(false);
+    const currentScroll = vue.shallowRef(0);
+    const savedScroll = vue.shallowRef(0);
+    const currentThreshold = vue.shallowRef(0);
+    const isScrollActive = vue.shallowRef(false);
+    const isScrollingUp = vue.shallowRef(false);
     const scrollThreshold = vue.computed(() => {
       return Number(props.scrollThreshold);
     });
@@ -3425,7 +3438,7 @@
 
   // Composables
   function useSsrBoot() {
-    const isBooted = vue.ref(false);
+    const isBooted = vue.shallowRef(false);
     vue.onMounted(() => {
       window.requestAnimationFrame(() => {
         isBooted.value = true;
@@ -3442,27 +3455,28 @@
 
   // Types
 
+  const makeVAppBarProps = propsFactory({
+    scrollBehavior: String,
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    location: {
+      type: String,
+      default: 'top',
+      validator: value => ['top', 'bottom'].includes(value)
+    },
+    ...makeVToolbarProps(),
+    ...makeLayoutItemProps(),
+    ...makeScrollProps(),
+    height: {
+      type: [Number, String],
+      default: 64
+    }
+  }, 'v-app-bar');
   const VAppBar = genericComponent()({
     name: 'VAppBar',
-    props: {
-      scrollBehavior: String,
-      modelValue: {
-        type: Boolean,
-        default: true
-      },
-      location: {
-        type: String,
-        default: 'top',
-        validator: value => ['top', 'bottom'].includes(value)
-      },
-      ...makeVToolbarProps(),
-      ...makeLayoutItemProps(),
-      ...makeScrollProps(),
-      height: {
-        type: [Number, String],
-        default: 64
-      }
-    },
+    props: makeVAppBarProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -3535,7 +3549,7 @@
         order: vue.computed(() => parseInt(props.order, 10)),
         position: vue.toRef(props, 'location'),
         layoutSize: height,
-        elementSize: vue.ref(undefined),
+        elementSize: vue.shallowRef(undefined),
         active: isActive,
         absolute: vue.toRef(props, 'absolute')
       });
@@ -3892,12 +3906,13 @@
   // Types
 
   const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
+  const makeVBtnToggleProps = propsFactory({
+    ...makeVBtnGroupProps(),
+    ...makeGroupProps()
+  }, 'v-btn-toggle');
   const VBtnToggle = genericComponent()({
     name: 'VBtnToggle',
-    props: {
-      ...makeVBtnGroupProps(),
-      ...makeGroupProps()
-    },
+    props: makeVBtnToggleProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -4224,7 +4239,7 @@
   // Utilities
   function useIntersectionObserver(callback, options) {
     const intersectionRef = vue.ref();
-    const isIntersecting = vue.ref(false);
+    const isIntersecting = vue.shallowRef(false);
     if (SUPPORTS_INTERSECTION) {
       const observer = new IntersectionObserver(entries => {
         callback?.(entries, observer);
@@ -4251,31 +4266,32 @@
 
   // Types
 
+  const makeVProgressCircularProps = propsFactory({
+    bgColor: String,
+    color: String,
+    indeterminate: [Boolean, String],
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    rotate: {
+      type: [Number, String],
+      default: 0
+    },
+    width: {
+      type: [Number, String],
+      default: 4
+    },
+    ...makeComponentProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'div'
+    }),
+    ...makeThemeProps()
+  }, 'v-progress-circular');
   const VProgressCircular = genericComponent()({
     name: 'VProgressCircular',
-    props: {
-      bgColor: String,
-      color: String,
-      indeterminate: [Boolean, String],
-      modelValue: {
-        type: [Number, String],
-        default: 0
-      },
-      rotate: {
-        type: [Number, String],
-        default: 0
-      },
-      width: {
-        type: [Number, String],
-        default: 4
-      },
-      ...makeComponentProps(),
-      ...makeSizeProps(),
-      ...makeTagProps({
-        tag: 'div'
-      }),
-      ...makeThemeProps()
-    },
+    props: makeVProgressCircularProps(),
     setup(props, _ref) {
       let {
         slots
@@ -4712,47 +4728,48 @@
     };
   }
 
+  const makeVProgressLinearProps = propsFactory({
+    absolute: Boolean,
+    active: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: String,
+    bgOpacity: [Number, String],
+    bufferValue: {
+      type: [Number, String],
+      default: 0
+    },
+    clickable: Boolean,
+    color: String,
+    height: {
+      type: [Number, String],
+      default: 4
+    },
+    indeterminate: Boolean,
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    reverse: Boolean,
+    stream: Boolean,
+    striped: Boolean,
+    roundedBar: Boolean,
+    ...makeComponentProps(),
+    ...makeLocationProps({
+      location: 'top'
+    }),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-progress-linear');
   const VProgressLinear = genericComponent()({
     name: 'VProgressLinear',
-    props: {
-      absolute: Boolean,
-      active: {
-        type: Boolean,
-        default: true
-      },
-      bgColor: String,
-      bgOpacity: [Number, String],
-      bufferValue: {
-        type: [Number, String],
-        default: 0
-      },
-      clickable: Boolean,
-      color: String,
-      height: {
-        type: [Number, String],
-        default: 4
-      },
-      indeterminate: Boolean,
-      max: {
-        type: [Number, String],
-        default: 100
-      },
-      modelValue: {
-        type: [Number, String],
-        default: 0
-      },
-      reverse: Boolean,
-      stream: Boolean,
-      striped: Boolean,
-      roundedBar: Boolean,
-      ...makeComponentProps(),
-      ...makeLocationProps({
-        location: 'top'
-      }),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVProgressLinearProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -4762,7 +4779,8 @@
       } = _ref;
       const progress = useProxiedModel(props, 'modelValue');
       const {
-        isRtl
+        isRtl,
+        rtlClasses
       } = useRtl();
       const {
         themeClasses
@@ -4817,7 +4835,7 @@
           'v-progress-linear--rounded': props.rounded,
           'v-progress-linear--rounded-bar': props.roundedBar,
           'v-progress-linear--striped': props.striped
-        }, roundedClasses.value, themeClasses.value, props.class],
+        }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
         "style": [{
           bottom: props.location === 'bottom' ? 0 : undefined,
           top: props.location === 'top' ? 0 : undefined,
@@ -5214,12 +5232,15 @@
 
   // Types
 
-  const VAppBarNavIcon = genericComponent()({
-    name: 'VAppBarNavIcon',
-    props: makeVBtnProps({
+  const makeVAppBarNavIconProps = propsFactory({
+    ...makeVBtnProps({
       icon: '$menu',
       variant: 'text'
-    }),
+    })
+  }, 'v-app-bar-nav-icon');
+  const VAppBarNavIcon = genericComponent()({
+    name: 'VAppBarNavIcon',
+    props: makeVAppBarNavIconProps(),
     setup(props, _ref) {
       let {
         slots
@@ -5231,33 +5252,6 @@
     }
   });
 
-  const VToolbarItems = genericComponent()({
-    name: 'VToolbarItems',
-    props: {
-      ...makeComponentProps(),
-      ...makeVariantProps({
-        variant: 'text'
-      })
-    },
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      provideDefaults({
-        VBtn: {
-          color: vue.toRef(props, 'color'),
-          height: 'inherit',
-          variant: vue.toRef(props, 'variant')
-        }
-      });
-      useRender(() => vue.createVNode("div", {
-        "class": ['v-toolbar-items', props.class],
-        "style": props.style
-      }, [slots.default?.()]));
-      return {};
-    }
-  });
-
   // Types
 
   const VAppBarTitle = genericComponent()({
@@ -5280,53 +5274,54 @@
   // Types
 
   const allowedTypes = ['success', 'info', 'warning', 'error'];
+  const makeVAlertProps = propsFactory({
+    border: {
+      type: [Boolean, String],
+      validator: val => {
+        return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val);
+      }
+    },
+    borderColor: String,
+    closable: Boolean,
+    closeIcon: {
+      type: IconValue,
+      default: '$close'
+    },
+    closeLabel: {
+      type: String,
+      default: '$vuetify.close'
+    },
+    icon: {
+      type: [Boolean, String, Function, Object],
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    prominent: Boolean,
+    title: String,
+    text: String,
+    type: {
+      type: String,
+      validator: val => allowedTypes.includes(val)
+    },
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'flat'
+    })
+  }, 'v-alert');
   const VAlert = genericComponent()({
     name: 'VAlert',
-    props: {
-      border: {
-        type: [Boolean, String],
-        validator: val => {
-          return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val);
-        }
-      },
-      borderColor: String,
-      closable: Boolean,
-      closeIcon: {
-        type: IconValue,
-        default: '$close'
-      },
-      closeLabel: {
-        type: String,
-        default: '$vuetify.close'
-      },
-      icon: {
-        type: [Boolean, String, Function, Object],
-        default: null
-      },
-      modelValue: {
-        type: Boolean,
-        default: true
-      },
-      prominent: Boolean,
-      title: String,
-      text: String,
-      type: {
-        type: String,
-        validator: val => allowedTypes.includes(val)
-      },
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'flat'
-      })
-    },
+    props: makeVAlertProps(),
     emits: {
       'click:close': e => true,
       'update:modelValue': value => true
@@ -5389,7 +5384,6 @@
       return () => {
         const hasPrepend = !!(slots.prepend || icon.value);
         const hasTitle = !!(slots.title || props.title);
-        const hasText = !!(props.text || slots.text);
         const hasClose = !!(slots.close || props.closable);
         return isActive.value && vue.createVNode(props.tag, {
           "class": ['v-alert', props.border && {
@@ -5429,7 +5423,7 @@
             "key": "title"
           }, {
             default: () => [slots.title?.() ?? props.title]
-          }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && vue.createVNode("div", {
+          }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && vue.createVNode("div", {
             "key": "append",
             "class": "v-alert__append"
           }, [slots.append()]), hasClose && vue.createVNode("div", {
@@ -5487,14 +5481,15 @@
     };
   }
 
+  const makeVLabelProps = propsFactory({
+    text: String,
+    clickable: Boolean,
+    ...makeComponentProps(),
+    ...makeThemeProps()
+  }, 'v-label');
   const VLabel = genericComponent()({
     name: 'VLabel',
-    props: {
-      text: String,
-      clickable: Boolean,
-      ...makeComponentProps(),
-      ...makeThemeProps()
-    },
+    props: makeVLabelProps(),
     setup(props, _ref) {
       let {
         slots
@@ -5509,12 +5504,13 @@
     }
   });
 
+  const makeVFieldLabelProps = propsFactory({
+    floating: Boolean,
+    ...makeComponentProps()
+  }, 'v-field-label');
   const VFieldLabel = genericComponent()({
     name: 'VFieldLabel',
-    props: {
-      floating: Boolean,
-      ...makeComponentProps()
-    },
+    props: makeVFieldLabelProps(),
     setup(props, _ref) {
       let {
         slots
@@ -5633,6 +5629,9 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        rtlClasses
+      } = useRtl();
       const isActive = vue.computed(() => props.dirty || props.active);
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
@@ -5726,7 +5725,7 @@
             'v-field--single-line': props.singleLine,
             'v-field--no-label': !label,
             [`v-field--variant-${props.variant}`]: true
-          }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, props.class],
+          }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
           "style": [backgroundColorStyles.value, textColorStyles.value, props.style],
           "onClick": onClick
         }, attrs), [vue.createVNode("div", {
@@ -5821,24 +5820,25 @@
 
   // Types
 
+  const makeVMessagesProps = propsFactory({
+    active: Boolean,
+    color: String,
+    messages: {
+      type: [Array, String],
+      default: () => []
+    },
+    ...makeComponentProps(),
+    ...makeTransitionProps({
+      transition: {
+        component: VSlideYTransition,
+        leaveAbsolute: true,
+        group: true
+      }
+    })
+  }, 'v-messages');
   const VMessages = genericComponent()({
     name: 'VMessages',
-    props: {
-      active: Boolean,
-      color: String,
-      messages: {
-        type: [Array, String],
-        default: () => []
-      },
-      ...makeComponentProps(),
-      ...makeTransitionProps({
-        transition: {
-          component: VSlideYTransition,
-          leaveAbsolute: true,
-          group: true
-        }
-      })
-    },
+    props: makeVMessagesProps(),
     setup(props, _ref) {
       let {
         slots
@@ -5867,7 +5867,7 @@
     }
   });
 
-  // Utilities
+  // Composables
 
   // Types
 
@@ -5889,7 +5889,7 @@
     const model = useProxiedModel(props, 'modelValue');
     const isDisabled = vue.computed(() => props.disabled);
     const isReadonly = vue.computed(() => props.readonly);
-    const isValidating = vue.ref(false);
+    const isValidating = vue.shallowRef(false);
     const items = vue.ref([]);
     const errors = vue.ref([]);
     async function validate() {
@@ -6028,7 +6028,7 @@
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
     const form = useForm();
     const internalErrorMessages = vue.ref([]);
-    const isPristine = vue.ref(true);
+    const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
     const isDisabled = vue.computed(() => !!(props.disabled || form?.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form?.isReadonly.value));
@@ -6040,7 +6040,7 @@
       if (!props.rules.length) return true;
       return isPristine.value ? null : true;
     });
-    const isValidating = vue.ref(false);
+    const isValidating = vue.shallowRef(false);
     const validationClasses = vue.computed(() => {
       return {
         [`${name}--error`]: isValid.value === false,
@@ -6250,23 +6250,24 @@
     }
   });
 
+  const makeVCounterProps = propsFactory({
+    active: Boolean,
+    max: [Number, String],
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    ...makeComponentProps(),
+    ...makeTransitionProps({
+      transition: {
+        component: VSlideYTransition
+      }
+    })
+  }, 'v-counter');
   const VCounter = genericComponent()({
     name: 'VCounter',
     functional: true,
-    props: {
-      active: Boolean,
-      max: [Number, String],
-      value: {
-        type: [Number, String],
-        default: 0
-      },
-      ...makeComponentProps(),
-      ...makeTransitionProps({
-        transition: {
-          component: VSlideYTransition
-        }
-      })
-    },
+    props: makeVCounterProps(),
     setup(props, _ref) {
       let {
         slots
@@ -6568,6 +6569,7 @@
   const makeSelectionControlGroupProps = propsFactory({
     color: String,
     disabled: Boolean,
+    defaultsTarget: String,
     error: Boolean,
     id: String,
     inline: Boolean,
@@ -6589,19 +6591,18 @@
       type: Function,
       default: deepEqual
     },
-    ...makeThemeProps(),
-    ...makeDensityProps()
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeThemeProps()
+  }, 'selection-control-group');
+  const makeVSelectionControlGroupProps = propsFactory({
+    ...makeSelectionControlGroupProps({
+      defaultsTarget: 'VSelectionControl'
+    })
   }, 'v-selection-control-group');
   const VSelectionControlGroup = genericComponent()({
     name: 'VSelectionControlGroup',
-    props: {
-      defaultsTarget: {
-        type: String,
-        default: 'VSelectionControl'
-      },
-      ...makeComponentProps(),
-      ...makeSelectionControlGroupProps()
-    },
+    props: makeVSelectionControlGroupProps(),
     emits: {
       'update:modelValue': val => true
     },
@@ -6737,8 +6738,8 @@
       } = useSelectionControl(props);
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
-      const isFocused = vue.ref(false);
-      const isFocusVisible = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
+      const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
       group?.onForceUpdate(() => {
         if (input.value) {
@@ -6875,13 +6876,14 @@
 
   // Types
 
+  const makeVCheckboxProps = propsFactory({
+    ...makeVInputProps(),
+    ...omit(makeVCheckboxBtnProps(), ['inline'])
+  }, 'v-checkbox');
   const VCheckbox = genericComponent()({
     name: 'VCheckbox',
     inheritAttrs: false,
-    props: {
-      ...makeVInputProps(),
-      ...omit(makeVCheckboxBtnProps(), ['inline'])
-    },
+    props: makeVCheckboxProps(),
     emits: {
       'update:focused': focused => true
     },
@@ -6996,25 +6998,26 @@
   // Types
 
   const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
+  const makeVChipGroupProps = propsFactory({
+    column: Boolean,
+    filter: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
+    ...makeComponentProps(),
+    ...makeGroupProps({
+      selectedClass: 'v-chip--selected'
+    }),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'tonal'
+    })
+  }, 'v-chip-group');
   const VChipGroup = genericComponent()({
     name: 'VChipGroup',
-    props: {
-      column: Boolean,
-      filter: Boolean,
-      valueComparator: {
-        type: Function,
-        default: deepEqual
-      },
-      ...makeComponentProps(),
-      ...makeGroupProps({
-        selectedClass: 'v-chip--selected'
-      }),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'tonal'
-      })
-    },
+    props: makeVChipGroupProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -7058,65 +7061,66 @@
     }
   });
 
+  const makeVChipProps = propsFactory({
+    activeClass: String,
+    appendAvatar: String,
+    appendIcon: IconValue,
+    closable: Boolean,
+    closeIcon: {
+      type: IconValue,
+      default: '$delete'
+    },
+    closeLabel: {
+      type: String,
+      default: '$vuetify.close'
+    },
+    draggable: Boolean,
+    filter: Boolean,
+    filterIcon: {
+      type: String,
+      default: '$complete'
+    },
+    label: Boolean,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
+    pill: Boolean,
+    prependAvatar: String,
+    prependIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    text: String,
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeGroupItemProps(),
+    ...makeRoundedProps(),
+    ...makeRouterProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'span'
+    }),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'tonal'
+    })
+  }, 'v-chip');
   const VChip = genericComponent()({
     name: 'VChip',
     directives: {
       Ripple
     },
-    props: {
-      activeClass: String,
-      appendAvatar: String,
-      appendIcon: IconValue,
-      closable: Boolean,
-      closeIcon: {
-        type: IconValue,
-        default: '$delete'
-      },
-      closeLabel: {
-        type: String,
-        default: '$vuetify.close'
-      },
-      draggable: Boolean,
-      filter: Boolean,
-      filterIcon: {
-        type: String,
-        default: '$complete'
-      },
-      label: Boolean,
-      link: {
-        type: Boolean,
-        default: undefined
-      },
-      pill: Boolean,
-      prependAvatar: String,
-      prependIcon: IconValue,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      text: String,
-      modelValue: {
-        type: Boolean,
-        default: true
-      },
-      onClick: EventProp(),
-      onClickOnce: EventProp(),
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeElevationProps(),
-      ...makeGroupItemProps(),
-      ...makeRoundedProps(),
-      ...makeRouterProps(),
-      ...makeSizeProps(),
-      ...makeTagProps({
-        tag: 'span'
-      }),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'tonal'
-      })
-    },
+    props: makeVChipProps(),
     emits: {
       'click:close': e => true,
       'update:modelValue': value => true,
@@ -7245,14 +7249,16 @@
                 start: true
               }
             }
-          }, slots.prepend)]), slots.default?.({
+          }, slots.prepend)]), vue.createVNode("div", {
+            "class": "v-chip__content"
+          }, [slots.default?.({
             isSelected: group?.isSelected.value,
             selectedClass: group?.selectedClass.value,
             select: group?.select,
             toggle: group?.toggle,
             value: group?.value.value,
             disabled: props.disabled
-          }) ?? props.text, hasAppend && vue.createVNode("div", {
+          }) ?? props.text]), hasAppend && vue.createVNode("div", {
             "key": "append",
             "class": "v-chip__append"
           }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
@@ -7297,17 +7303,18 @@
     }
   });
 
+  const makeVDividerProps = propsFactory({
+    color: String,
+    inset: Boolean,
+    length: [Number, String],
+    thickness: [Number, String],
+    vertical: Boolean,
+    ...makeComponentProps(),
+    ...makeThemeProps()
+  }, 'v-divider');
   const VDivider = genericComponent()({
     name: 'VDivider',
-    props: {
-      color: String,
-      inset: Boolean,
-      length: [Number, String],
-      thickness: [Number, String],
-      vertical: Boolean,
-      ...makeComponentProps(),
-      ...makeThemeProps()
-    },
+    props: makeVDividerProps(),
     setup(props, _ref) {
       let {
         attrs
@@ -7349,11 +7356,11 @@
   const ListKey = Symbol.for('vuetify:list');
   function createList() {
     const parent = vue.inject(ListKey, {
-      hasPrepend: vue.ref(false),
+      hasPrepend: vue.shallowRef(false),
       updateHasPrepend: () => null
     });
     const data = {
-      hasPrepend: vue.ref(false),
+      hasPrepend: vue.shallowRef(false),
       updateHasPrepend: value => {
         if (value) data.hasPrepend.value = value;
       }
@@ -7620,11 +7627,13 @@
     return strategy;
   };
 
+  // Composables
+
   // Types
 
   const VNestedSymbol = Symbol.for('vuetify:nested');
   const emptyNested = {
-    id: vue.ref(),
+    id: vue.shallowRef(),
     root: {
       register: () => null,
       unregister: () => null,
@@ -7693,7 +7702,7 @@
     }
     const vm = getCurrentInstance('nested');
     const nested = {
-      id: vue.ref(),
+      id: vue.shallowRef(),
       root: {
         opened,
         selected,
@@ -7833,16 +7842,14 @@
     appendIcon: IconValue,
     fluid: Boolean,
     subgroup: Boolean,
+    title: String,
     value: null,
     ...makeComponentProps(),
     ...makeTagProps()
   }, 'v-list-group');
   const VListGroup = genericComponent()({
     name: 'VListGroup',
-    props: {
-      title: String,
-      ...makeVListGroupProps()
-    },
+    props: makeVListGroupProps(),
     setup(props, _ref2) {
       let {
         slots
@@ -7918,51 +7925,52 @@
 
   // Types
 
+  const makeVListItemProps = propsFactory({
+    active: {
+      type: Boolean,
+      default: undefined
+    },
+    activeClass: String,
+    activeColor: String,
+    appendAvatar: String,
+    appendIcon: IconValue,
+    disabled: Boolean,
+    lines: String,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
+    nav: Boolean,
+    prependAvatar: String,
+    prependIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    subtitle: [String, Number, Boolean],
+    title: [String, Number, Boolean],
+    value: null,
+    onClick: EventProp(),
+    onClickOnce: EventProp(),
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeRouterProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'v-list-item');
   const VListItem = genericComponent()({
     name: 'VListItem',
     directives: {
       Ripple
     },
-    props: {
-      active: {
-        type: Boolean,
-        default: undefined
-      },
-      activeClass: String,
-      activeColor: String,
-      appendAvatar: String,
-      appendIcon: IconValue,
-      disabled: Boolean,
-      lines: String,
-      link: {
-        type: Boolean,
-        default: undefined
-      },
-      nav: Boolean,
-      prependAvatar: String,
-      prependIcon: IconValue,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      subtitle: [String, Number, Boolean],
-      title: [String, Number, Boolean],
-      value: null,
-      onClick: EventProp(),
-      onClickOnce: EventProp(),
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeRouterProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'text'
-      })
-    },
+    props: makeVListItemProps(),
     emits: {
       click: e => true
     },
@@ -8149,16 +8157,17 @@
     }
   });
 
+  const makeVListSubheaderProps = propsFactory({
+    color: String,
+    inset: Boolean,
+    sticky: Boolean,
+    title: String,
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-list-subheader');
   const VListSubheader = genericComponent()({
     name: 'VListSubheader',
-    props: {
-      color: String,
-      inset: Boolean,
-      sticky: Boolean,
-      title: String,
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVListSubheaderProps(),
     setup(props, _ref) {
       let {
         slots
@@ -8189,11 +8198,12 @@
 
   // Types
 
+  const makeVListChildrenProps = propsFactory({
+    items: Array
+  }, 'v-list-children');
   const VListChildren = genericComponent()({
     name: 'VListChildren',
-    props: {
-      items: Array
-    },
+    props: makeVListChildrenProps(),
     setup(props, _ref) {
       let {
         slots
@@ -8379,39 +8389,40 @@
       items
     };
   }
+  const makeVListProps = propsFactory({
+    activeColor: String,
+    activeClass: String,
+    bgColor: String,
+    disabled: Boolean,
+    lines: {
+      type: [Boolean, String],
+      default: 'one'
+    },
+    nav: Boolean,
+    ...makeNestedProps({
+      selectStrategy: 'single-leaf',
+      openStrategy: 'list'
+    }),
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    itemType: {
+      type: String,
+      default: 'type'
+    },
+    ...makeItemsProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'v-list');
   const VList = genericComponent()({
     name: 'VList',
-    props: {
-      activeColor: String,
-      activeClass: String,
-      bgColor: String,
-      disabled: Boolean,
-      lines: {
-        type: [Boolean, String],
-        default: 'one'
-      },
-      nav: Boolean,
-      ...makeNestedProps({
-        selectStrategy: 'single-leaf',
-        openStrategy: 'list'
-      }),
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      itemType: {
-        type: String,
-        default: 'type'
-      },
-      ...makeItemsProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'text'
-      })
-    },
+    props: makeVListProps(),
     emits: {
       'update:selected': val => true,
       'update:opened': val => true,
@@ -8471,7 +8482,7 @@
           variant: vue.toRef(props, 'variant')
         }
       });
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       const contentRef = vue.ref();
       function onFocusin(e) {
         isFocused.value = true;
@@ -8532,14 +8543,15 @@
 
   const VListImg = createSimpleFunctional('v-list-img');
 
+  const makeVListItemActionProps = propsFactory({
+    start: Boolean,
+    end: Boolean,
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-list-item-action');
   const VListItemAction = genericComponent()({
     name: 'VListItemAction',
-    props: {
-      start: Boolean,
-      end: Boolean,
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVListItemActionProps(),
     setup(props, _ref) {
       let {
         slots
@@ -8555,14 +8567,15 @@
     }
   });
 
+  const makeVListItemMediaProps = propsFactory({
+    start: Boolean,
+    end: Boolean,
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-list-item-media');
   const VListItemMedia = genericComponent()({
     name: 'VListItemMedia',
-    props: {
-      start: Boolean,
-      end: Boolean,
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVListItemMediaProps(),
     setup(props, _ref) {
       let {
         slots
@@ -8866,7 +8879,7 @@
     eager: Boolean
   }, 'lazy');
   function useLazy(props, active) {
-    const isBooted = vue.ref(false);
+    const isBooted = vue.shallowRef(false);
     const hasContent = vue.computed(() => isBooted.value || props.eager || active.value);
     vue.watch(active, () => isBooted.value = true);
     function onAfterLeave() {
@@ -9024,7 +9037,9 @@
     const activatorFixed = isFixedPosition(data.activatorEl.value);
     if (activatorFixed) {
       Object.assign(contentStyles.value, {
-        position: 'fixed'
+        position: 'fixed',
+        top: 0,
+        [data.isRtl.value ? 'right' : 'left']: 0
       });
     }
     const {
@@ -9096,8 +9111,8 @@
       if (!scrollParents.length) {
         scrollParents.push(document.documentElement);
         if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {
-          contentBox.x += parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-x') || 0);
-          contentBox.y += parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-y') || 0);
+          contentBox.x -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-x') || 0);
+          contentBox.y -= parseFloat(document.documentElement.style.getPropertyValue('--v-body-scroll-y') || 0);
         }
       }
       const viewport = scrollParents.reduce((box, el) => {
@@ -9526,10 +9541,10 @@
       thresholds,
       mobileBreakpoint
     } = parseDisplayOptions(options);
-    const height = vue.ref(getClientHeight(ssr));
+    const height = vue.shallowRef(getClientHeight(ssr));
     const platform = vue.shallowRef(getPlatform(ssr));
     const state = vue.reactive({});
-    const width = vue.ref(getClientWidth(ssr));
+    const width = vue.shallowRef(getClientWidth(ssr));
     function updateSize() {
       height.value = getClientHeight();
       width.value = getClientWidth();
@@ -9589,20 +9604,20 @@
     return display;
   }
 
-  // Utilities
+  // Composables
   function useHydration() {
-    if (!IN_BROWSER) return vue.ref(false);
+    if (!IN_BROWSER) return vue.shallowRef(false);
     const {
       ssr
     } = useDisplay();
     if (ssr) {
-      const isMounted = vue.ref(false);
+      const isMounted = vue.shallowRef(false);
       vue.onMounted(() => {
         isMounted.value = true;
       });
       return isMounted;
     } else {
-      return vue.ref(true);
+      return vue.shallowRef(true);
     }
   }
 
@@ -9616,6 +9631,8 @@
     };
   }
 
+  // Composables
+
   // Types
 
   const StackSymbol = Symbol.for('vuetify:stack');
@@ -9628,7 +9645,7 @@
       activeChildren: new Set()
     });
     vue.provide(StackSymbol, stack);
-    const _zIndex = vue.ref(+zIndex.value);
+    const _zIndex = vue.shallowRef(+zIndex.value);
     useToggleScope(isActive, () => {
       const lastZIndex = globalStack.at(-1)?.[1];
       _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
@@ -9644,7 +9661,7 @@
         parent?.activeChildren.delete(vm.uid);
       });
     });
-    const globalTop = vue.ref(true);
+    const globalTop = vue.shallowRef(true);
     if (createStackEntry) {
       vue.watchEffect(() => {
         const _isTop = globalStack.at(-1)?.[0] === vm.uid;
@@ -9750,7 +9767,7 @@
       });
       if (!el._clickOutside) {
         el._clickOutside = {
-          lastMousedownWasOutside: true
+          lastMousedownWasOutside: false
         };
       }
       el._clickOutside[binding.instance.$.uid] = {
@@ -10026,24 +10043,25 @@
 
   // Types
 
+  const makeVMenuProps = propsFactory({
+    // TODO
+    // disableKeys: Boolean,
+    id: String,
+    ...omit(makeVOverlayProps({
+      closeDelay: 250,
+      closeOnContentClick: true,
+      locationStrategy: 'connected',
+      openDelay: 300,
+      scrim: false,
+      scrollStrategy: 'reposition',
+      transition: {
+        component: VDialogTransition
+      }
+    }), ['absolute'])
+  }, 'v-menu');
   const VMenu = genericComponent()({
     name: 'VMenu',
-    props: {
-      // TODO
-      // disableKeys: Boolean,
-      id: String,
-      ...omit(makeVOverlayProps({
-        closeDelay: 250,
-        closeOnContentClick: true,
-        locationStrategy: 'connected',
-        openDelay: 300,
-        scrim: false,
-        scrollStrategy: 'reposition',
-        transition: {
-          component: VDialogTransition
-        }
-      }), ['absolute'])
-    },
+    props: makeVMenuProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -10059,7 +10077,7 @@
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      const openChildren = vue.ref(0);
+      const openChildren = vue.shallowRef(0);
       vue.provide(VMenuSymbol, {
         register() {
           ++openChildren.value;
@@ -10149,20 +10167,21 @@
     ...makeItemsProps({
       itemChildren: false
     })
+  }, 'select');
+  const makeVSelectProps = propsFactory({
+    ...makeSelectProps(),
+    ...omit(makeVTextFieldProps({
+      modelValue: null
+    }), ['validationValue', 'dirty', 'appendInnerIcon']),
+    ...makeTransitionProps({
+      transition: {
+        component: VDialogTransition
+      }
+    })
   }, 'v-select');
   const VSelect = genericComponent()({
     name: 'VSelect',
-    props: {
-      ...makeSelectProps(),
-      ...omit(makeVTextFieldProps({
-        modelValue: null
-      }), ['validationValue', 'dirty', 'appendInnerIcon']),
-      ...makeTransitionProps({
-        transition: {
-          component: VDialogTransition
-        }
-      })
-    },
+    props: makeVSelectProps(),
     emits: {
       'update:focused': focused => true,
       'update:modelValue': val => true,
@@ -10201,7 +10220,7 @@
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       let keyboardLookupPrefix = '';
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
@@ -10281,14 +10300,14 @@
           menu.value = false;
         }
       }
-      function onFocusin(e) {
-        isFocused.value = true;
-      }
-      function onFocusout(e) {
-        if (e.relatedTarget == null) {
+      function onAfterLeave() {
+        if (isFocused.value) {
           vTextFieldRef.value?.focus();
         }
       }
+      function onFocusin(e) {
+        isFocused.value = true;
+      }
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
@@ -10332,15 +10351,15 @@
             "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
-            "transition": props.transition
+            "transition": props.transition,
+            "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, {
               "ref": listRef,
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin,
-              "onFocusout": onFocusout
+              "onFocusin": onFocusin
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -10545,23 +10564,24 @@
       "class": "v-autocomplete__unmask"
     }, [text.substr(matches + length)])]) : text;
   }
+  const makeVAutocompleteProps = propsFactory({
+    // TODO: implement post keyboard support
+    // autoSelectFirst: Boolean,
+    search: String,
+    ...makeFilterProps({
+      filterKeys: ['title']
+    }),
+    ...makeSelectProps(),
+    ...omit(makeVTextFieldProps({
+      modelValue: null
+    }), ['validationValue', 'dirty', 'appendInnerIcon']),
+    ...makeTransitionProps({
+      transition: false
+    })
+  }, 'v-autocomplete');
   const VAutocomplete = genericComponent()({
     name: 'VAutocomplete',
-    props: {
-      // TODO: implement post keyboard support
-      // autoSelectFirst: Boolean,
-      search: String,
-      ...makeFilterProps({
-        filterKeys: ['title']
-      }),
-      ...makeSelectProps(),
-      ...omit(makeVTextFieldProps({
-        modelValue: null
-      }), ['validationValue', 'dirty', 'appendInnerIcon']),
-      ...makeTransitionProps({
-        transition: false
-      })
-    },
+    props: makeVAutocompleteProps(),
     emits: {
       'update:focused': focused => true,
       'update:search': val => true,
@@ -10576,8 +10596,8 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
-      const isPristine = vue.ref(true);
+      const isFocused = vue.shallowRef(false);
+      const isPristine = vue.shallowRef(true);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -10587,7 +10607,7 @@
           _menu.value = v;
         }
       });
-      const selectionIndex = vue.ref(-1);
+      const selectionIndex = vue.shallowRef(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
@@ -10690,17 +10710,15 @@
         search.value = e.target.value;
       }
       function onAfterLeave() {
-        if (isFocused.value) isPristine.value = true;
+        if (isFocused.value) {
+          isPristine.value = true;
+          vTextFieldRef.value?.focus();
+        }
       }
       function onFocusin(e) {
         isFocused.value = true;
       }
-      function onFocusout(e) {
-        if (e.relatedTarget == null) {
-          vTextFieldRef.value?.focus();
-        }
-      }
-      const isSelecting = vue.ref(false);
+      const isSelecting = vue.shallowRef(false);
       function select(item) {
         if (props.multiple) {
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -10714,9 +10732,7 @@
         } else {
           model.value = [item];
           isSelecting.value = true;
-          if (!slots.selection) {
-            search.value = item.title;
-          }
+          search.value = item.title;
           menu.value = false;
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
@@ -10725,13 +10741,14 @@
       vue.watch(isFocused, val => {
         if (val) {
           isSelecting.value = true;
-          search.value = props.multiple || !!slots.selection ? '' : String(selections.value.at(-1)?.props.title ?? '');
+          search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '');
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
           if (!props.multiple && !search.value) model.value = [];
           menu.value = false;
           search.value = '';
+          selectionIndex.value = -1;
         }
       });
       vue.watch(search, val => {
@@ -10756,12 +10773,10 @@
           "validationValue": model.externalValue,
           "dirty": isDirty,
           "onInput": onInput,
-          "class": ['v-autocomplete', {
+          "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
-            'v-autocomplete--selecting-index': selectionIndex.value > -1,
-            [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
-            'v-autocomplete--selection-slot': !!slots.selection
+            'v-autocomplete--selecting-index': selectionIndex.value > -1
           }, props.class],
           "style": props.style,
           "appendInnerIcon": props.menuIcon,
@@ -10790,8 +10805,7 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin,
-              "onFocusout": onFocusout
+              "onFocusin": onFocusin
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -10883,40 +10897,41 @@
     }
   });
 
+  const makeVBadgeProps = propsFactory({
+    bordered: Boolean,
+    color: String,
+    content: [Number, String],
+    dot: Boolean,
+    floating: Boolean,
+    icon: IconValue,
+    inline: Boolean,
+    label: {
+      type: String,
+      default: '$vuetify.badge'
+    },
+    max: [Number, String],
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    offsetX: [Number, String],
+    offsetY: [Number, String],
+    textColor: String,
+    ...makeComponentProps(),
+    ...makeLocationProps({
+      location: 'top end'
+    }),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeTransitionProps({
+      transition: 'scale-rotate-transition'
+    })
+  }, 'v-badge');
   const VBadge = genericComponent()({
     name: 'VBadge',
     inheritAttrs: false,
-    props: {
-      bordered: Boolean,
-      color: String,
-      content: [Number, String],
-      dot: Boolean,
-      floating: Boolean,
-      icon: IconValue,
-      inline: Boolean,
-      label: {
-        type: String,
-        default: '$vuetify.badge'
-      },
-      max: [Number, String],
-      modelValue: {
-        type: Boolean,
-        default: true
-      },
-      offsetX: [Number, String],
-      offsetY: [Number, String],
-      textColor: String,
-      ...makeComponentProps(),
-      ...makeLocationProps({
-        location: 'top end'
-      }),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeTransitionProps({
-        transition: 'scale-rotate-transition'
-      })
-    },
+    props: makeVBadgeProps(),
     setup(props, ctx) {
       const {
         backgroundColorClasses,
@@ -10977,13 +10992,14 @@
     }
   });
 
+  const makeVBannerActionsProps = propsFactory({
+    color: String,
+    density: String,
+    ...makeComponentProps()
+  }, 'v-banner-actions');
   const VBannerActions = genericComponent()({
     name: 'VBannerActions',
-    props: {
-      color: String,
-      density: String,
-      ...makeComponentProps()
-    },
+    props: makeVBannerActionsProps(),
     setup(props, _ref) {
       let {
         slots
@@ -11007,27 +11023,28 @@
 
   // Types
 
+  const makeVBannerProps = propsFactory({
+    avatar: String,
+    color: String,
+    icon: IconValue,
+    lines: String,
+    stacked: Boolean,
+    sticky: Boolean,
+    text: String,
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-banner');
   const VBanner = genericComponent()({
     name: 'VBanner',
-    props: {
-      avatar: String,
-      color: String,
-      icon: IconValue,
-      lines: String,
-      stacked: Boolean,
-      sticky: Boolean,
-      text: String,
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVBannerProps(),
     setup(props, _ref) {
       let {
         slots
@@ -11114,47 +11131,48 @@
     }
   });
 
-  const VBottomNavigation = genericComponent()({
-    name: 'VBottomNavigation',
-    props: {
-      bgColor: String,
-      color: String,
-      grow: Boolean,
-      mode: {
-        type: String,
-        validator: v => !v || ['horizontal', 'shift'].includes(v)
-      },
-      height: {
-        type: [Number, String],
-        default: 56
-      },
-      active: {
-        type: Boolean,
-        default: true
-      },
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeLayoutItemProps({
-        name: 'bottom-navigation'
-      }),
-      ...makeTagProps({
-        tag: 'header'
-      }),
-      ...makeGroupProps({
-        modelValue: true,
-        selectedClass: 'v-btn--selected'
-      }),
-      ...makeThemeProps()
+  const makeVBottomNavigationProps = propsFactory({
+    bgColor: String,
+    color: String,
+    grow: Boolean,
+    mode: {
+      type: String,
+      validator: v => !v || ['horizontal', 'shift'].includes(v)
     },
-    emits: {
-      'update:modelValue': value => true
+    height: {
+      type: [Number, String],
+      default: 56
     },
-    setup(props, _ref) {
-      let {
-        slots
+    active: {
+      type: Boolean,
+      default: true
+    },
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeLayoutItemProps({
+      name: 'bottom-navigation'
+    }),
+    ...makeTagProps({
+      tag: 'header'
+    }),
+    ...makeGroupProps({
+      modelValue: true,
+      selectedClass: 'v-btn--selected'
+    }),
+    ...makeThemeProps()
+  }, 'v-bottom-navigation');
+  const VBottomNavigation = genericComponent()({
+    name: 'VBottomNavigation',
+    props: makeVBottomNavigationProps(),
+    emits: {
+      'update:modelValue': value => true
+    },
+    setup(props, _ref) {
+      let {
+        slots
       } = _ref;
       const {
         themeClasses
@@ -11223,12 +11241,13 @@
     }
   });
 
+  const makeVBreadcrumbsDividerProps = propsFactory({
+    divider: [Number, String],
+    ...makeComponentProps()
+  }, 'v-breacrumbs-divider');
   const VBreadcrumbsDivider = genericComponent()({
     name: 'VBreadcrumbsDivider',
-    props: {
-      divider: [Number, String],
-      ...makeComponentProps()
-    },
+    props: makeVBreadcrumbsDividerProps(),
     setup(props, _ref) {
       let {
         slots
@@ -11241,21 +11260,22 @@
     }
   });
 
+  const makeVBreadcrumbsItemProps = propsFactory({
+    active: Boolean,
+    activeClass: String,
+    activeColor: String,
+    color: String,
+    disabled: Boolean,
+    title: String,
+    ...makeComponentProps(),
+    ...makeRouterProps(),
+    ...makeTagProps({
+      tag: 'li'
+    })
+  }, 'v-breadcrumbs-item');
   const VBreadcrumbsItem = genericComponent()({
     name: 'VBreadcrumbsItem',
-    props: {
-      active: Boolean,
-      activeClass: String,
-      activeColor: String,
-      color: String,
-      disabled: Boolean,
-      title: String,
-      ...makeComponentProps(),
-      ...makeRouterProps(),
-      ...makeTagProps({
-        tag: 'li'
-      })
-    },
+    props: makeVBreadcrumbsItemProps(),
     setup(props, _ref) {
       let {
         slots,
@@ -11291,30 +11311,31 @@
 
   // Types
 
+  const makeVBreadcrumbsProps = propsFactory({
+    activeClass: String,
+    activeColor: String,
+    bgColor: String,
+    color: String,
+    disabled: Boolean,
+    divider: {
+      type: String,
+      default: '/'
+    },
+    icon: IconValue,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'ul'
+    })
+  }, 'v-breacrumbs');
   const VBreadcrumbs = genericComponent()({
     name: 'VBreadcrumbs',
-    props: {
-      activeClass: String,
-      activeColor: String,
-      bgColor: String,
-      color: String,
-      disabled: Boolean,
-      divider: {
-        type: String,
-        default: '/'
-      },
-      icon: IconValue,
-      items: {
-        type: Array,
-        default: () => []
-      },
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps({
-        tag: 'ul'
-      })
-    },
+    props: makeVBreadcrumbsProps(),
     setup(props, _ref) {
       let {
         slots
@@ -11423,18 +11444,19 @@
 
   const VCardTitle = createSimpleFunctional('v-card-title');
 
+  const makeCardItemProps = propsFactory({
+    appendAvatar: String,
+    appendIcon: IconValue,
+    prependAvatar: String,
+    prependIcon: IconValue,
+    subtitle: String,
+    title: String,
+    ...makeComponentProps(),
+    ...makeDensityProps()
+  }, 'v-card-item');
   const VCardItem = genericComponent()({
     name: 'VCardItem',
-    props: {
-      appendAvatar: String,
-      appendIcon: IconValue,
-      prependAvatar: String,
-      prependIcon: IconValue,
-      subtitle: String,
-      title: String,
-      ...makeComponentProps(),
-      ...makeDensityProps()
-    },
+    props: makeCardItemProps(),
     setup(props, _ref) {
       let {
         slots
@@ -11505,47 +11527,48 @@
 
   // Types
 
+  const makeVCardProps = propsFactory({
+    appendAvatar: String,
+    appendIcon: IconValue,
+    disabled: Boolean,
+    flat: Boolean,
+    hover: Boolean,
+    image: String,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
+    prependAvatar: String,
+    prependIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    subtitle: String,
+    text: String,
+    title: String,
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLoaderProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeRouterProps(),
+    ...makeTagProps(),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'elevated'
+    })
+  }, 'v-card');
   const VCard = genericComponent()({
     name: 'VCard',
     directives: {
       Ripple
     },
-    props: {
-      appendAvatar: String,
-      appendIcon: IconValue,
-      disabled: Boolean,
-      flat: Boolean,
-      hover: Boolean,
-      image: String,
-      link: {
-        type: Boolean,
-        default: undefined
-      },
-      prependAvatar: String,
-      prependIcon: IconValue,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      subtitle: String,
-      text: String,
-      title: String,
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeLoaderProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeRouterProps(),
-      ...makeTagProps(),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'elevated'
-      })
-    },
+    props: makeVCardProps(),
     setup(props, _ref) {
       let {
         attrs,
@@ -11828,14 +11851,14 @@
       const group = useGroup(props, VWindowGroupSymbol);
       const rootRef = vue.ref();
       const isRtlReverse = vue.computed(() => isRtl.value ? !props.reverse : props.reverse);
-      const isReversed = vue.ref(false);
+      const isReversed = vue.shallowRef(false);
       const transition = vue.computed(() => {
         const axis = props.direction === 'vertical' ? 'y' : 'x';
         const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value;
         const direction = reverse ? '-reverse' : '';
         return `v-window-${axis}${direction}-transition`;
       });
-      const transitionCount = vue.ref(0);
+      const transitionCount = vue.shallowRef(0);
       const transitionHeight = vue.ref(undefined);
       const activeIndex = vue.computed(() => {
         return group.items.value.findIndex(item => group.selected.value.includes(item.id));
@@ -11939,34 +11962,35 @@
 
   // Types
 
+  const makeVCarouselProps = propsFactory({
+    color: String,
+    cycle: Boolean,
+    delimiterIcon: {
+      type: IconValue,
+      default: '$delimiter'
+    },
+    height: {
+      type: [Number, String],
+      default: 500
+    },
+    hideDelimiters: Boolean,
+    hideDelimiterBackground: Boolean,
+    interval: {
+      type: [Number, String],
+      default: 6000,
+      validator: value => Number(value) > 0
+    },
+    progress: [Boolean, String],
+    verticalDelimiters: [Boolean, String],
+    ...makeVWindowProps({
+      continuous: true,
+      mandatory: 'force',
+      showArrows: true
+    })
+  }, 'v-carousel');
   const VCarousel = genericComponent()({
     name: 'VCarousel',
-    props: {
-      color: String,
-      cycle: Boolean,
-      delimiterIcon: {
-        type: IconValue,
-        default: '$delimiter'
-      },
-      height: {
-        type: [Number, String],
-        default: 500
-      },
-      hideDelimiters: Boolean,
-      hideDelimiterBackground: Boolean,
-      interval: {
-        type: [Number, String],
-        default: 6000,
-        validator: value => Number(value) > 0
-      },
-      progress: [Boolean, String],
-      verticalDelimiters: [Boolean, String],
-      ...makeVWindowProps({
-        continuous: true,
-        mandatory: 'force',
-        showArrows: true
-      })
-    },
+    props: makeVCarouselProps(),
     emits: {
       'update:modelValue': val => true
     },
@@ -12056,24 +12080,25 @@
     }
   });
 
+  const makeVWindowItemProps = propsFactory({
+    reverseTransition: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    transition: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    ...makeComponentProps(),
+    ...makeGroupItemProps(),
+    ...makeLazyProps()
+  }, 'v-window-item');
   const VWindowItem = genericComponent()({
     name: 'VWindowItem',
     directives: {
       Touch
     },
-    props: {
-      reverseTransition: {
-        type: [Boolean, String],
-        default: undefined
-      },
-      transition: {
-        type: [Boolean, String],
-        default: undefined
-      },
-      ...makeComponentProps(),
-      ...makeGroupItemProps(),
-      ...makeLazyProps()
-    },
+    props: makeVWindowItemProps(),
     emits: {
       'group:selected': val => true
     },
@@ -12087,8 +12112,8 @@
         isBooted
       } = useSsrBoot();
       if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-      const isTransitioning = vue.ref(false);
-      const hasTransition = vue.computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+      const isTransitioning = vue.shallowRef(false);
+      const hasTransition = vue.computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
       function onAfterTransition() {
         if (!isTransitioning.value || !window) {
           return;
@@ -12167,25 +12192,28 @@
 
   // Types
 
+  const makeVCarouselItemProps = propsFactory({
+    ...makeVImgProps(),
+    ...makeVWindowItemProps()
+  }, 'v-carousel-item');
   const VCarouselItem = genericComponent()({
     name: 'VCarouselItem',
     inheritAttrs: false,
-    props: {
-      value: null,
-      ...makeComponentProps()
-    },
+    props: makeVCarouselItemProps(),
     setup(props, _ref) {
       let {
         slots,
         attrs
       } = _ref;
-      useRender(() => vue.createVNode(VWindowItem, {
-        "class": ['v-carousel-item', props.class],
-        "style": props.style,
-        "value": props.value
-      }, {
-        default: () => [vue.createVNode(VImg, attrs, slots)]
-      }));
+      useRender(() => {
+        const [imgProps] = VImg.filterProps(props);
+        const [windowItemProps] = VWindowItem.filterProps(props);
+        return vue.createVNode(VWindowItem, vue.mergeProps({
+          "class": "v-carousel-item"
+        }, windowItemProps), {
+          default: () => [vue.createVNode(VImg, vue.mergeProps(attrs, imgProps), slots)]
+        });
+      });
     }
   });
 
@@ -12205,9 +12233,7 @@
   }, 'v-sheet');
   const VSheet = genericComponent()({
     name: 'VSheet',
-    props: {
-      ...makeVSheetProps()
-    },
+    props: makeVSheetProps(),
     setup(props, _ref) {
       let {
         slots
@@ -12247,27 +12273,28 @@
 
   // Types
 
+  const makeVColorPickerCanvasProps = propsFactory({
+    color: {
+      type: Object
+    },
+    disabled: Boolean,
+    dotSize: {
+      type: [Number, String],
+      default: 10
+    },
+    height: {
+      type: [Number, String],
+      default: 150
+    },
+    width: {
+      type: [Number, String],
+      default: 300
+    },
+    ...makeComponentProps()
+  }, 'v-color-picker-canvas');
   const VColorPickerCanvas = defineComponent({
     name: 'VColorPickerCanvas',
-    props: {
-      color: {
-        type: Object
-      },
-      disabled: Boolean,
-      dotSize: {
-        type: [Number, String],
-        default: 10
-      },
-      height: {
-        type: [Number, String],
-        default: 150
-      },
-      width: {
-        type: [Number, String],
-        default: 300
-      },
-      ...makeComponentProps()
-    },
+    props: makeVColorPickerCanvasProps(),
     emits: {
       'update:color': color => true,
       'update:position': hue => true
@@ -12276,8 +12303,8 @@
       let {
         emit
       } = _ref;
-      const isInteracting = vue.ref(false);
-      const isOutsideUpdate = vue.ref(false);
+      const isInteracting = vue.shallowRef(false);
+      const isOutsideUpdate = vue.shallowRef(false);
       const dotPosition = vue.ref({
         x: 0,
         y: 0
@@ -12295,8 +12322,8 @@
         };
       });
       const canvasRef = vue.ref();
-      const canvasWidth = vue.ref(parseFloat(props.width));
-      const canvasHeight = vue.ref(parseFloat(props.height));
+      const canvasWidth = vue.shallowRef(parseFloat(props.width));
+      const canvasHeight = vue.shallowRef(parseFloat(props.height));
       const {
         resizeRef
       } = useResizeObserver(entries => {
@@ -12523,7 +12550,7 @@
         let {
           a
         } = _ref;
-        return a ? Math.round(a * 100) / 100 : 1;
+        return a != null ? Math.round(a * 100) / 100 : 1;
       },
       getColor: (c, v) => ({
         ...c,
@@ -12577,7 +12604,7 @@
         let {
           a
         } = _ref2;
-        return a ? Math.round(a * 100) / 100 : 1;
+        return a != null ? Math.round(a * 100) / 100 : 1;
       },
       getColor: (c, v) => ({
         ...c,
@@ -12631,23 +12658,24 @@
       "class": "v-color-picker-edit__input"
     }, [vue.createVNode("input", rest, null), vue.createVNode("span", null, [label])]);
   };
+  const makeVColorPickerEditProps = propsFactory({
+    color: Object,
+    disabled: Boolean,
+    mode: {
+      type: String,
+      default: 'rgba',
+      validator: v => Object.keys(modes).includes(v)
+    },
+    modes: {
+      type: Array,
+      default: () => Object.keys(modes),
+      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
+    },
+    ...makeComponentProps()
+  }, 'v-color-picker-edit');
   const VColorPickerEdit = defineComponent({
     name: 'VColorPickerEdit',
-    props: {
-      color: Object,
-      disabled: Boolean,
-      mode: {
-        type: String,
-        default: 'rgba',
-        validator: v => Object.keys(modes).includes(v)
-      },
-      modes: {
-        type: Array,
-        default: () => Object.keys(modes),
-        validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-      },
-      ...makeComponentProps()
-    },
+    props: makeVColorPickerEditProps(),
     emits: {
       'update:color': color => true,
       'update:mode': mode => true
@@ -12827,8 +12855,8 @@
     const thumbColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
     const trackColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
     const trackFillColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
-    const mousePressed = vue.ref(false);
-    const startOffset = vue.ref(0);
+    const mousePressed = vue.shallowRef(false);
+    const startOffset = vue.shallowRef(0);
     const trackContainerRef = vue.ref();
     const activeThumbRef = vue.ref();
     function parseMouseMove(e) {
@@ -12980,35 +13008,36 @@
     return data;
   };
 
+  const makeVSliderThumbProps = propsFactory({
+    focused: Boolean,
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: true
+    },
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    position: {
+      type: Number,
+      required: true
+    },
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    ...makeComponentProps()
+  }, 'v-slider-thumb');
   const VSliderThumb = genericComponent()({
     name: 'VSliderThumb',
     directives: {
       Ripple
     },
-    props: {
-      focused: Boolean,
-      max: {
-        type: Number,
-        required: true
-      },
-      min: {
-        type: Number,
-        required: true
-      },
-      modelValue: {
-        type: Number,
-        required: true
-      },
-      position: {
-        type: Number,
-        required: true
-      },
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      ...makeComponentProps()
-    },
+    props: makeVSliderThumbProps(),
     emits: {
       'update:modelValue': v => true
     },
@@ -13125,19 +13154,20 @@
     }
   });
 
+  const makeVSliderTrackProps = propsFactory({
+    start: {
+      type: Number,
+      required: true
+    },
+    stop: {
+      type: Number,
+      required: true
+    },
+    ...makeComponentProps()
+  }, 'v-slider-track');
   const VSliderTrack = genericComponent()({
     name: 'VSliderTrack',
-    props: {
-      start: {
-        type: Number,
-        required: true
-      },
-      stop: {
-        type: Number,
-        required: true
-      },
-      ...makeComponentProps()
-    },
+    props: makeVSliderTrackProps(),
     emits: {},
     setup(props, _ref) {
       let {
@@ -13243,17 +13273,18 @@
 
   // Types
 
+  const makeVSliderProps = propsFactory({
+    ...makeFocusProps(),
+    ...makeSliderProps(),
+    ...makeVInputProps(),
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    }
+  }, 'v-slider');
   const VSlider = genericComponent()({
     name: 'VSlider',
-    props: {
-      ...makeFocusProps(),
-      ...makeSliderProps(),
-      ...makeVInputProps(),
-      modelValue: {
-        type: [Number, String],
-        default: 0
-      }
-    },
+    props: makeVSliderProps(),
     emits: {
       'update:focused': value => true,
       'update:modelValue': v => true,
@@ -13266,6 +13297,9 @@
         emit
       } = _ref;
       const thumbContainerRef = vue.ref();
+      const {
+        rtlClasses
+      } = useRtl();
       const steps = useSteps(props);
       const model = useProxiedModel(props, 'modelValue', undefined, v => {
         const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
@@ -13319,7 +13353,7 @@
             'v-slider--focused': isFocused.value,
             'v-slider--pressed': mousePressed.value,
             'v-slider--disabled': props.disabled
-          }, props.class],
+          }, rtlClasses.value, props.class],
           "style": props.style
         }, inputProps, {
           "focused": isFocused.value
@@ -13376,16 +13410,17 @@
 
   // Types
 
+  const makeVColorPickerPreviewProps = propsFactory({
+    color: {
+      type: Object
+    },
+    disabled: Boolean,
+    hideAlpha: Boolean,
+    ...makeComponentProps()
+  }, 'v-color-picker-preview');
   const VColorPickerPreview = defineComponent({
     name: 'VColorPickerPreview',
-    props: {
-      color: {
-        type: Object
-      },
-      disabled: Boolean,
-      hideAlpha: Boolean,
-      ...makeComponentProps()
-    },
+    props: makeVColorPickerPreviewProps(),
     emits: {
       'update:color': color => true
     },
@@ -13763,6 +13798,16 @@
 
   // Types
 
+  const makeVColorPickerSwatchesProps = propsFactory({
+    swatches: {
+      type: Array,
+      default: () => parseDefaultColors(colors)
+    },
+    disabled: Boolean,
+    color: Object,
+    maxHeight: [Number, String],
+    ...makeComponentProps()
+  }, 'v-color-picker-swatches');
   function parseDefaultColors(colors) {
     return Object.keys(colors).map(key => {
       const color = colors[key];
@@ -13771,16 +13816,7 @@
   }
   const VColorPickerSwatches = defineComponent({
     name: 'VColorPickerSwatches',
-    props: {
-      swatches: {
-        type: Array,
-        default: () => parseDefaultColors(colors)
-      },
-      disabled: Boolean,
-      color: Object,
-      maxHeight: [Number, String],
-      ...makeComponentProps()
-    },
+    props: makeVColorPickerSwatchesProps(),
     emits: {
       'update:color': color => true
     },
@@ -13816,44 +13852,45 @@
 
   // Types
 
+  const makeVPickerProps = propsFactory({
+    canvasHeight: {
+      type: [String, Number],
+      default: 150
+    },
+    disabled: Boolean,
+    dotSize: {
+      type: [Number, String],
+      default: 10
+    },
+    hideCanvas: Boolean,
+    hideSliders: Boolean,
+    hideInputs: Boolean,
+    mode: {
+      type: String,
+      default: 'rgba',
+      validator: v => Object.keys(modes).includes(v)
+    },
+    modes: {
+      type: Array,
+      default: () => Object.keys(modes),
+      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
+    },
+    showSwatches: Boolean,
+    swatches: Array,
+    swatchesMaxHeight: {
+      type: [Number, String],
+      default: 150
+    },
+    modelValue: {
+      type: [Object, String]
+    },
+    ...omit(makeVSheetProps({
+      width: 300
+    }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
+  }, 'v-color-picker');
   const VColorPicker = defineComponent({
     name: 'VColorPicker',
-    props: {
-      canvasHeight: {
-        type: [String, Number],
-        default: 150
-      },
-      disabled: Boolean,
-      dotSize: {
-        type: [Number, String],
-        default: 10
-      },
-      hideCanvas: Boolean,
-      hideSliders: Boolean,
-      hideInputs: Boolean,
-      mode: {
-        type: String,
-        default: 'rgba',
-        validator: v => Object.keys(modes).includes(v)
-      },
-      modes: {
-        type: Array,
-        default: () => Object.keys(modes),
-        validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-      },
-      showSwatches: Boolean,
-      swatches: Array,
-      swatchesMaxHeight: {
-        type: [Number, String],
-        default: 150
-      },
-      modelValue: {
-        type: [Object, String]
-      },
-      ...omit(makeVSheetProps({
-        width: 300
-      }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
-    },
+    props: makeVPickerProps(),
     emits: {
       'update:modelValue': color => true,
       'update:mode': mode => true
@@ -13876,6 +13913,9 @@
         if (!v) return null;
         return extractColor(v, props.modelValue);
       });
+      const {
+        rtlClasses
+      } = useRtl();
       const updateColor = hsva => {
         currentColor.value = hsva;
         lastPickedColor.value = hsva;
@@ -13896,7 +13936,7 @@
           "rounded": props.rounded,
           "elevation": props.elevation,
           "theme": props.theme,
-          "class": ['v-color-picker', props.class],
+          "class": ['v-color-picker', rtlClasses.value, props.class],
           "style": [{
             '--v-color-picker-color-hsv': HSVtoCSS({
               ...(currentColor.value ?? nullColor),
@@ -13958,26 +13998,27 @@
       "class": "v-combobox__unmask"
     }, [text.substr(matches + length)])]) : text;
   }
+  const makeVComboboxProps = propsFactory({
+    // TODO: implement post keyboard support
+    // autoSelectFirst: Boolean,
+    delimiters: Array,
+    ...makeFilterProps({
+      filterKeys: ['title']
+    }),
+    ...makeSelectProps({
+      hideNoData: true,
+      returnObject: true
+    }),
+    ...omit(makeVTextFieldProps({
+      modelValue: null
+    }), ['validationValue', 'dirty', 'appendInnerIcon']),
+    ...makeTransitionProps({
+      transition: false
+    })
+  }, 'v-combobox');
   const VCombobox = genericComponent()({
     name: 'VCombobox',
-    props: {
-      // TODO: implement post keyboard support
-      // autoSelectFirst: Boolean,
-      delimiters: Array,
-      ...makeFilterProps({
-        filterKeys: ['title']
-      }),
-      ...makeSelectProps({
-        hideNoData: true,
-        returnObject: true
-      }),
-      ...omit(makeVTextFieldProps({
-        modelValue: null
-      }), ['validationValue', 'dirty', 'appendInnerIcon']),
-      ...makeTransitionProps({
-        transition: false
-      })
-    },
+    props: makeVComboboxProps(),
     emits: {
       'update:focused': focused => true,
       'update:modelValue': val => true,
@@ -13993,8 +14034,8 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const isFocused = vue.ref(false);
-      const isPristine = vue.ref(true);
+      const isFocused = vue.shallowRef(false);
+      const isPristine = vue.shallowRef(true);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14004,7 +14045,7 @@
           _menu.value = v;
         }
       });
-      const selectionIndex = vue.ref(-1);
+      const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
@@ -14021,7 +14062,7 @@
         return props.multiple ? transformed : transformed[0] ?? null;
       });
       const form = useForm();
-      const _search = vue.ref(!props.multiple ? model.value[0]?.title ?? '' : '');
+      const _search = vue.shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
       const search = vue.computed({
         get: () => {
           return _search.value;
@@ -14147,8 +14188,11 @@
         }
       }
       function onAfterLeave() {
-        if (isFocused.value) isPristine.value = true;
-      }
+        if (isFocused.value) {
+          isPristine.value = true;
+          vTextFieldRef.value?.focus();
+        }
+      }
       function select(item) {
         if (props.multiple) {
           const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -14174,23 +14218,16 @@
       function onFocusin(e) {
         isFocused.value = true;
       }
-      function onFocusout(e) {
-        if (e.relatedTarget == null) {
-          vTextFieldRef.value?.focus();
-        }
-      }
       vue.watch(filteredItems, val => {
         if (!val.length && props.hideNoData) menu.value = false;
       });
       vue.watch(isFocused, val => {
-        if (val) {
-          selectionIndex.value = -1;
-        } else {
-          menu.value = false;
-          if (!props.multiple || !search.value) return;
-          model.value = [...model.value, transformItem$1(props, search.value)];
-          search.value = '';
-        }
+        if (val) return;
+        selectionIndex.value = -1;
+        menu.value = false;
+        if (!props.multiple || !search.value) return;
+        model.value = [...model.value, transformItem$1(props, search.value)];
+        search.value = '';
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
@@ -14241,8 +14278,7 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin,
-              "onFocusout": onFocusout
+              "onFocusin": onFocusin
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -14337,24 +14373,25 @@
 
   // Types
 
+  const makeVDialogProps = propsFactory({
+    fullscreen: Boolean,
+    retainFocus: {
+      type: Boolean,
+      default: true
+    },
+    scrollable: Boolean,
+    ...makeVOverlayProps({
+      origin: 'center center',
+      scrollStrategy: 'block',
+      transition: {
+        component: VDialogTransition
+      },
+      zIndex: 2400
+    })
+  }, 'v-dialog');
   const VDialog = genericComponent()({
     name: 'VDialog',
-    props: {
-      fullscreen: Boolean,
-      retainFocus: {
-        type: Boolean,
-        default: true
-      },
-      scrollable: Boolean,
-      ...makeVOverlayProps({
-        origin: 'center center',
-        scrollStrategy: 'block',
-        transition: {
-          component: VDialogTransition
-        },
-        zIndex: 2400
-      })
-    },
+    props: makeVDialogProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -14448,21 +14485,22 @@
 
   const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+  const makeVExpansionPanelsProps = propsFactory({
+    color: String,
+    variant: {
+      type: String,
+      default: 'default',
+      validator: v => allowedVariants.includes(v)
+    },
+    readonly: Boolean,
+    ...makeComponentProps(),
+    ...makeGroupProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-expansion-panel');
   const VExpansionPanels = genericComponent()({
     name: 'VExpansionPanels',
-    props: {
-      color: String,
-      variant: {
-        type: String,
-        default: 'default',
-        validator: v => allowedVariants.includes(v)
-      },
-      readonly: Boolean,
-      ...makeComponentProps(),
-      ...makeGroupProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVExpansionPanelsProps(),
     emits: {
       'update:modelValue': val => true
     },
@@ -14506,17 +14544,15 @@
       type: [Boolean, Object],
       default: false
     },
-    readonly: Boolean
+    readonly: Boolean,
+    ...makeComponentProps()
   }, 'v-expansion-panel-title');
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
     directives: {
       Ripple
     },
-    props: {
-      ...makeComponentProps(),
-      ...makeVExpansionPanelTitleProps()
-    },
+    props: makeVExpansionPanelTitleProps(),
     setup(props, _ref) {
       let {
         slots
@@ -14555,12 +14591,13 @@
     }
   });
 
+  const makeVExpansionPanelTextProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeLazyProps()
+  }, 'v-expansion-panel-text');
   const VExpansionPanelText = genericComponent()({
     name: 'VExpansionPanelText',
-    props: {
-      ...makeComponentProps(),
-      ...makeLazyProps()
-    },
+    props: makeVExpansionPanelTextProps(),
     setup(props, _ref) {
       let {
         slots
@@ -14585,20 +14622,21 @@
     }
   });
 
+  const makeVExpansionPanelProps = propsFactory({
+    title: String,
+    text: String,
+    bgColor: String,
+    ...makeComponentProps(),
+    ...makeElevationProps(),
+    ...makeGroupItemProps(),
+    ...makeLazyProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeVExpansionPanelTitleProps()
+  }, 'v-expansion-panel');
   const VExpansionPanel = genericComponent()({
     name: 'VExpansionPanel',
-    props: {
-      title: String,
-      text: String,
-      bgColor: String,
-      ...makeComponentProps(),
-      ...makeElevationProps(),
-      ...makeGroupItemProps(),
-      ...makeLazyProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeVExpansionPanelTitleProps()
-    },
+    props: makeVExpansionPanelProps(),
     emits: {
       'group:selected': val => true
     },
@@ -14641,8 +14679,7 @@
             'v-expansion-panel--after-active': isAfterSelected.value,
             'v-expansion-panel--disabled': isDisabled.value
           }, roundedClasses.value, backgroundColorClasses.value, props.class],
-          "style": [backgroundColorStyles.value, props.style],
-          "aria-expanded": groupItem.isSelected.value
+          "style": [backgroundColorStyles.value, props.style]
         }, {
           default: () => [vue.createVNode("div", {
             "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
@@ -14669,42 +14706,43 @@
 
   // Types
 
+  const makeVFileInputProps = propsFactory({
+    chips: Boolean,
+    counter: Boolean,
+    counterSizeString: {
+      type: String,
+      default: '$vuetify.fileInput.counterSize'
+    },
+    counterString: {
+      type: String,
+      default: '$vuetify.fileInput.counter'
+    },
+    multiple: Boolean,
+    showSize: {
+      type: [Boolean, Number],
+      default: false,
+      validator: v => {
+        return typeof v === 'boolean' || [1000, 1024].includes(v);
+      }
+    },
+    ...makeVInputProps({
+      prependIcon: '$file'
+    }),
+    modelValue: {
+      type: Array,
+      default: () => [],
+      validator: val => {
+        return wrapInArray(val).every(v => v != null && typeof v === 'object');
+      }
+    },
+    ...makeVFieldProps({
+      clearable: true
+    })
+  }, 'v-file-input');
   const VFileInput = genericComponent()({
     name: 'VFileInput',
     inheritAttrs: false,
-    props: {
-      chips: Boolean,
-      counter: Boolean,
-      counterSizeString: {
-        type: String,
-        default: '$vuetify.fileInput.counterSize'
-      },
-      counterString: {
-        type: String,
-        default: '$vuetify.fileInput.counter'
-      },
-      multiple: Boolean,
-      showSize: {
-        type: [Boolean, Number],
-        default: false,
-        validator: v => {
-          return typeof v === 'boolean' || [1000, 1024].includes(v);
-        }
-      },
-      ...makeVInputProps({
-        prependIcon: '$file'
-      }),
-      modelValue: {
-        type: Array,
-        default: () => [],
-        validator: val => {
-          return wrapInArray(val).every(v => v != null && typeof v === 'object');
-        }
-      },
-      ...makeVFieldProps({
-        clearable: true
-      })
-    },
+    props: makeVFileInputProps(),
     emits: {
       'click:control': e => true,
       'mousedown:control': e => true,
@@ -14875,25 +14913,26 @@
     }
   });
 
+  const makeVFooterProps = propsFactory({
+    app: Boolean,
+    color: String,
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeElevationProps(),
+    ...makeLayoutItemProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'footer'
+    }),
+    ...makeThemeProps()
+  }, 'v-footer');
   const VFooter = genericComponent()({
     name: 'VFooter',
-    props: {
-      app: Boolean,
-      color: String,
-      height: {
-        type: [Number, String],
-        default: 'auto'
-      },
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeElevationProps(),
-      ...makeLayoutItemProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps({
-        tag: 'footer'
-      }),
-      ...makeThemeProps()
-    },
+    props: makeVFooterProps(),
     setup(props, _ref) {
       let {
         slots
@@ -14914,7 +14953,7 @@
       const {
         roundedClasses
       } = useRounded(props);
-      const autoHeight = vue.ref(32);
+      const autoHeight = vue.shallowRef(32);
       const {
         resizeRef
       } = useResizeObserver(entries => {
@@ -14944,12 +14983,13 @@
 
   // Types
 
+  const makeVFormProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeFormProps()
+  }, 'v-form');
   const VForm = genericComponent()({
     name: 'VForm',
-    props: {
-      ...makeComponentProps(),
-      ...makeFormProps()
-    },
+    props: makeVFormProps(),
     emits: {
       'update:modelValue': val => true,
       submit: e => true
@@ -14996,24 +15036,28 @@
     }
   });
 
+  const makeVContainerProps = propsFactory({
+    fluid: {
+      type: Boolean,
+      default: false
+    },
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-container');
   const VContainer = genericComponent()({
     name: 'VContainer',
-    props: {
-      fluid: {
-        type: Boolean,
-        default: false
-      },
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVContainerProps(),
     setup(props, _ref) {
       let {
         slots
       } = _ref;
+      const {
+        rtlClasses
+      } = useRtl();
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-container', {
           'v-container--fluid': props.fluid
-        }, props.class],
+        }, rtlClasses.value, props.class],
         "style": props.style
       }, slots));
       return {};
@@ -15082,32 +15126,33 @@
     return className.toLowerCase();
   }
   const ALIGN_SELF_VALUES = ['auto', 'start', 'end', 'center', 'baseline', 'stretch'];
+  const makeVColProps = propsFactory({
+    cols: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    ...breakpointProps,
+    offset: {
+      type: [String, Number],
+      default: null
+    },
+    ...offsetProps,
+    order: {
+      type: [String, Number],
+      default: null
+    },
+    ...orderProps,
+    alignSelf: {
+      type: String,
+      default: null,
+      validator: str => ALIGN_SELF_VALUES.includes(str)
+    },
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-col');
   const VCol = genericComponent()({
     name: 'VCol',
-    props: {
-      cols: {
-        type: [Boolean, String, Number],
-        default: false
-      },
-      ...breakpointProps,
-      offset: {
-        type: [String, Number],
-        default: null
-      },
-      ...offsetProps,
-      order: {
-        type: [String, Number],
-        default: null
-      },
-      ...orderProps,
-      alignSelf: {
-        type: String,
-        default: null,
-        validator: str => ALIGN_SELF_VALUES.includes(str)
-      },
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVColProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15200,32 +15245,33 @@
     className += `-${val}`;
     return className.toLowerCase();
   }
+  const makeVRowProps = propsFactory({
+    dense: Boolean,
+    noGutters: Boolean,
+    align: {
+      type: String,
+      default: null,
+      validator: alignValidator
+    },
+    ...alignProps,
+    justify: {
+      type: String,
+      default: null,
+      validator: justifyValidator
+    },
+    ...justifyProps,
+    alignContent: {
+      type: String,
+      default: null,
+      validator: alignContentValidator
+    },
+    ...alignContentProps,
+    ...makeComponentProps(),
+    ...makeTagProps()
+  }, 'v-row');
   const VRow = genericComponent()({
     name: 'VRow',
-    props: {
-      dense: Boolean,
-      noGutters: Boolean,
-      align: {
-        type: String,
-        default: null,
-        validator: alignValidator
-      },
-      ...alignProps,
-      justify: {
-        type: String,
-        default: null,
-        validator: justifyValidator
-      },
-      ...justifyProps,
-      alignContent: {
-        type: String,
-        default: null,
-        validator: alignContentValidator
-      },
-      ...alignContentProps,
-      ...makeComponentProps(),
-      ...makeTagProps()
-    },
+    props: makeVRowProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15261,16 +15307,17 @@
   const VSpacer = createSimpleFunctional('flex-grow-1', 'div', 'VSpacer');
 
   // Composables
+  const makeVHoverProps = propsFactory({
+    disabled: Boolean,
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    },
+    ...makeDelayProps()
+  }, 'v-hover');
   const VHover = genericComponent()({
     name: 'VHover',
-    props: {
-      disabled: Boolean,
-      modelValue: {
-        type: Boolean,
-        default: undefined
-      },
-      ...makeDelayProps()
-    },
+    props: makeVHoverProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -15294,16 +15341,17 @@
   });
 
   const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
+  const makeVItemGroupProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeGroupProps({
+      selectedClass: 'v-item--selected'
+    }),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-item-group');
   const VItemGroup = genericComponent()({
     name: 'VItemGroup',
-    props: {
-      ...makeComponentProps(),
-      ...makeGroupProps({
-        selectedClass: 'v-item--selected'
-      }),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVItemGroupProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -15371,12 +15419,13 @@
 
   const VKbd = createSimpleFunctional('v-kbd');
 
+  const makeVLayoutProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeLayoutProps()
+  }, 'v-layout');
   const VLayout = genericComponent()({
     name: 'VLayout',
-    props: {
-      ...makeComponentProps(),
-      ...makeLayoutProps()
-    },
+    props: makeVLayoutProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15402,21 +15451,22 @@
 
   // Types
 
+  const makeVLayoutItemProps = propsFactory({
+    position: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 300
+    },
+    modelValue: Boolean,
+    ...makeComponentProps(),
+    ...makeLayoutItemProps()
+  }, 'v-layout-item');
   const VLayoutItem = genericComponent()({
     name: 'VLayoutItem',
-    props: {
-      position: {
-        type: String,
-        required: true
-      },
-      size: {
-        type: [Number, String],
-        default: 300
-      },
-      modelValue: Boolean,
-      ...makeComponentProps(),
-      ...makeLayoutItemProps()
-    },
+    props: makeVLayoutItemProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15441,30 +15491,31 @@
 
   // Types
 
+  const makeVLazyProps = propsFactory({
+    modelValue: Boolean,
+    options: {
+      type: Object,
+      // For more information on types, navigate to:
+      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+      default: () => ({
+        root: undefined,
+        rootMargin: undefined,
+        threshold: undefined
+      })
+    },
+    ...makeComponentProps(),
+    ...makeDimensionProps(),
+    ...makeTagProps(),
+    ...makeTransitionProps({
+      transition: 'fade-transition'
+    })
+  }, 'v-lazy');
   const VLazy = genericComponent()({
     name: 'VLazy',
     directives: {
       intersect: Intersect
     },
-    props: {
-      modelValue: Boolean,
-      options: {
-        type: Object,
-        // For more information on types, navigate to:
-        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-        default: () => ({
-          root: undefined,
-          rootMargin: undefined,
-          threshold: undefined
-        })
-      },
-      ...makeComponentProps(),
-      ...makeDimensionProps(),
-      ...makeTagProps(),
-      ...makeTransitionProps({
-        transition: 'fade-transition'
-      })
-    },
+    props: makeVLazyProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -15498,18 +15549,19 @@
     }
   });
 
+  const makeVLocaleProviderProps = propsFactory({
+    locale: String,
+    fallbackLocale: String,
+    messages: Object,
+    rtl: {
+      type: Boolean,
+      default: undefined
+    },
+    ...makeComponentProps()
+  }, 'v-locale-provider');
   const VLocaleProvider = genericComponent()({
     name: 'VLocaleProvider',
-    props: {
-      locale: String,
-      fallbackLocale: String,
-      messages: Object,
-      rtl: {
-        type: Boolean,
-        default: undefined
-      },
-      ...makeComponentProps()
-    },
+    props: makeVLocaleProviderProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15525,15 +15577,16 @@
     }
   });
 
+  const makeVMainProps = propsFactory({
+    scrollable: Boolean,
+    ...makeComponentProps(),
+    ...makeTagProps({
+      tag: 'main'
+    })
+  }, 'v-main');
   const VMain = genericComponent()({
     name: 'VMain',
-    props: {
-      scrollable: Boolean,
-      ...makeComponentProps(),
-      ...makeTagProps({
-        tag: 'main'
-      })
-    },
+    props: makeVMainProps(),
     setup(props, _ref) {
       let {
         slots
@@ -15558,14 +15611,18 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
   function useSticky(_ref) {
     let {
       rootEl,
       isSticky,
       layoutItemStyles
     } = _ref;
-    const isStuck = vue.ref(false);
-    const stuckPosition = vue.ref(0);
+    const isStuck = vue.shallowRef(false);
+    const stuckPosition = vue.shallowRef(0);
     const stickyStyles = vue.computed(() => {
       const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
       return [isSticky.value ? {
@@ -15601,18 +15658,24 @@
       const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
       const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
       const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
+      const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue('--v-body-scroll-y')) || 0;
       if (rect.height < window.innerHeight - layoutTop) {
         isStuck.value = 'top';
         stuckPosition.value = layoutTop;
       } else if (direction === 'up' && isStuck.value === 'bottom' || direction === 'down' && isStuck.value === 'top') {
-        stuckPosition.value = window.scrollY + rect.top;
+        stuckPosition.value = window.scrollY + rect.top - bodyScroll;
         isStuck.value = true;
       } else if (direction === 'down' && bottom <= 0) {
         stuckPosition.value = 0;
         isStuck.value = 'bottom';
       } else if (direction === 'up' && top <= 0) {
-        stuckPosition.value = rect.top + top;
-        isStuck.value = 'top';
+        if (!bodyScroll) {
+          stuckPosition.value = rect.top + top;
+          isStuck.value = 'top';
+        } else if (isStuck.value !== 'top') {
+          stuckPosition.value = -top + bodyScroll + layoutTop;
+          isStuck.value = 'top';
+        }
       }
       lastScrollTop = window.scrollY;
     }
@@ -15759,9 +15822,9 @@
       getVelocity
     } = useVelocity();
     let maybeDragging = false;
-    const isDragging = vue.ref(false);
-    const dragProgress = vue.ref(0);
-    const offset = vue.ref(0);
+    const isDragging = vue.shallowRef(false);
+    const dragProgress = vue.shallowRef(0);
+    const offset = vue.shallowRef(0);
     let start;
     function getOffset(pos, active) {
       return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'top' ? pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
@@ -15855,54 +15918,55 @@
   // Types
 
   const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
+  const makeVNavigationDrawerProps = propsFactory({
+    color: String,
+    disableResizeWatcher: Boolean,
+    disableRouteWatcher: Boolean,
+    expandOnHover: Boolean,
+    floating: Boolean,
+    modelValue: {
+      type: Boolean,
+      default: null
+    },
+    permanent: Boolean,
+    rail: {
+      type: Boolean,
+      default: null
+    },
+    railWidth: {
+      type: [Number, String],
+      default: 56
+    },
+    scrim: {
+      type: [String, Boolean],
+      default: true
+    },
+    image: String,
+    temporary: Boolean,
+    touchless: Boolean,
+    width: {
+      type: [Number, String],
+      default: 256
+    },
+    location: {
+      type: String,
+      default: 'start',
+      validator: value => locations.includes(value)
+    },
+    sticky: Boolean,
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeElevationProps(),
+    ...makeLayoutItemProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps({
+      tag: 'nav'
+    }),
+    ...makeThemeProps()
+  }, 'v-navigation-drawer');
   const VNavigationDrawer = genericComponent()({
     name: 'VNavigationDrawer',
-    props: {
-      color: String,
-      disableResizeWatcher: Boolean,
-      disableRouteWatcher: Boolean,
-      expandOnHover: Boolean,
-      floating: Boolean,
-      modelValue: {
-        type: Boolean,
-        default: null
-      },
-      permanent: Boolean,
-      rail: {
-        type: Boolean,
-        default: null
-      },
-      railWidth: {
-        type: [Number, String],
-        default: 56
-      },
-      scrim: {
-        type: [String, Boolean],
-        default: true
-      },
-      image: String,
-      temporary: Boolean,
-      touchless: Boolean,
-      width: {
-        type: [Number, String],
-        default: 256
-      },
-      location: {
-        type: String,
-        default: 'start',
-        validator: value => locations.includes(value)
-      },
-      sticky: Boolean,
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeElevationProps(),
-      ...makeLayoutItemProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps({
-        tag: 'nav'
-      }),
-      ...makeThemeProps()
-    },
+    props: makeVNavigationDrawerProps(),
     emits: {
       'update:modelValue': val => true,
       'update:rail': val => true
@@ -15941,7 +16005,7 @@
         ssrBootStyles
       } = useSsrBoot();
       const rootEl = vue.ref();
-      const isHovering = vue.ref(false);
+      const isHovering = vue.shallowRef(false);
       const width = vue.computed(() => {
         return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
       });
@@ -16100,88 +16164,89 @@
 
   // Types
 
+  const makeVPaginationProps = propsFactory({
+    activeColor: String,
+    start: {
+      type: [Number, String],
+      default: 1
+    },
+    modelValue: {
+      type: Number,
+      default: props => props.start
+    },
+    disabled: Boolean,
+    length: {
+      type: [Number, String],
+      default: 1,
+      validator: val => val % 1 === 0
+    },
+    totalVisible: [Number, String],
+    firstIcon: {
+      type: IconValue,
+      default: '$first'
+    },
+    prevIcon: {
+      type: IconValue,
+      default: '$prev'
+    },
+    nextIcon: {
+      type: IconValue,
+      default: '$next'
+    },
+    lastIcon: {
+      type: IconValue,
+      default: '$last'
+    },
+    ariaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.root'
+    },
+    pageAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.page'
+    },
+    currentPageAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.currentPage'
+    },
+    firstAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.first'
+    },
+    previousAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.previous'
+    },
+    nextAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.next'
+    },
+    lastAriaLabel: {
+      type: String,
+      default: '$vuetify.pagination.ariaLabel.last'
+    },
+    ellipsis: {
+      type: String,
+      default: '...'
+    },
+    showFirstLastPage: Boolean,
+    ...makeBorderProps(),
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'nav'
+    }),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'v-pagination');
   const VPagination = genericComponent()({
     name: 'VPagination',
-    props: {
-      activeColor: String,
-      start: {
-        type: [Number, String],
-        default: 1
-      },
-      modelValue: {
-        type: Number,
-        default: props => props.start
-      },
-      disabled: Boolean,
-      length: {
-        type: [Number, String],
-        default: 1,
-        validator: val => val % 1 === 0
-      },
-      totalVisible: [Number, String],
-      firstIcon: {
-        type: IconValue,
-        default: '$first'
-      },
-      prevIcon: {
-        type: IconValue,
-        default: '$prev'
-      },
-      nextIcon: {
-        type: IconValue,
-        default: '$next'
-      },
-      lastIcon: {
-        type: IconValue,
-        default: '$last'
-      },
-      ariaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.root'
-      },
-      pageAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.page'
-      },
-      currentPageAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.currentPage'
-      },
-      firstAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.first'
-      },
-      previousAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.previous'
-      },
-      nextAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.next'
-      },
-      lastAriaLabel: {
-        type: String,
-        default: '$vuetify.pagination.ariaLabel.last'
-      },
-      ellipsis: {
-        type: String,
-        default: '...'
-      },
-      showFirstLastPage: Boolean,
-      ...makeBorderProps(),
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeSizeProps(),
-      ...makeTagProps({
-        tag: 'nav'
-      }),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'text'
-      })
-    },
+    props: makeVPaginationProps(),
     emits: {
       'update:modelValue': value => true,
       first: value => true,
@@ -16208,7 +16273,7 @@
       const {
         width
       } = useDisplay();
-      const maxButtons = vue.ref(-1);
+      const maxButtons = vue.shallowRef(-1);
       provideDefaults(undefined, {
         scoped: true
       });
@@ -16420,15 +16485,16 @@
   function floor(val) {
     return Math.floor(Math.abs(val)) * Math.sign(val);
   }
+  const makeVParallaxProps = propsFactory({
+    scale: {
+      type: [Number, String],
+      default: 0.5
+    },
+    ...makeComponentProps()
+  }, 'v-parallax');
   const VParallax = genericComponent()({
     name: 'VParallax',
-    props: {
-      scale: {
-        type: [Number, String],
-        default: 0.5
-      },
-      ...makeComponentProps()
-    },
+    props: makeVParallaxProps(),
     setup(props, _ref) {
       let {
         slots
@@ -16502,14 +16568,15 @@
 
   // Types
 
+  const makeVRadioProps = propsFactory({
+    ...makeSelectionControlProps({
+      falseIcon: '$radioOff',
+      trueIcon: '$radioOn'
+    })
+  }, 'v-radio');
   const VRadio = genericComponent()({
     name: 'VRadio',
-    props: {
-      ...makeSelectionControlProps({
-        falseIcon: '$radioOff',
-        trueIcon: '$radioOn'
-      })
-    },
+    props: makeVRadioProps(),
     setup(props, _ref) {
       let {
         slots
@@ -16521,33 +16588,34 @@
       }), slots));
       return {};
     }
-  });
-
-  // Types
-
+  });
+
+  // Types
+
+  const makeVRadioGroupProps = propsFactory({
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    ...makeVInputProps(),
+    ...omit(makeSelectionControlGroupProps(), ['multiple']),
+    trueIcon: {
+      type: IconValue,
+      default: '$radioOn'
+    },
+    falseIcon: {
+      type: IconValue,
+      default: '$radioOff'
+    },
+    type: {
+      type: String,
+      default: 'radio'
+    }
+  }, 'v-radio-group');
   const VRadioGroup = genericComponent()({
     name: 'VRadioGroup',
     inheritAttrs: false,
-    props: {
-      height: {
-        type: [Number, String],
-        default: 'auto'
-      },
-      ...makeVInputProps(),
-      ...omit(makeSelectionControlGroupProps(), ['multiple']),
-      trueIcon: {
-        type: IconValue,
-        default: '$radioOn'
-      },
-      falseIcon: {
-        type: IconValue,
-        default: '$radioOff'
-      },
-      type: {
-        type: String,
-        default: 'radio'
-      }
-    },
+    props: makeVRadioGroupProps(),
     emits: {
       'update:modelValue': val => true
     },
@@ -16613,18 +16681,19 @@
 
   // Types
 
+  const makeVRangeSliderProps = propsFactory({
+    ...makeFocusProps(),
+    ...makeVInputProps(),
+    ...makeSliderProps(),
+    strict: Boolean,
+    modelValue: {
+      type: Array,
+      default: () => [0, 0]
+    }
+  }, 'v-range-slider');
   const VRangeSlider = genericComponent()({
     name: 'VRangeSlider',
-    props: {
-      ...makeFocusProps(),
-      ...makeVInputProps(),
-      ...makeSliderProps(),
-      strict: Boolean,
-      modelValue: {
-        type: Array,
-        default: () => [0, 0]
-      }
-    },
+    props: makeVRangeSliderProps(),
     emits: {
       'update:focused': value => true,
       'update:modelValue': value => true,
@@ -16639,6 +16708,9 @@
       const startThumbRef = vue.ref();
       const stopThumbRef = vue.ref();
       const inputRef = vue.ref();
+      const {
+        rtlClasses
+      } = useRtl();
       function getActiveThumb(e) {
         if (!startThumbRef.value || !stopThumbRef.value) return;
         const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
@@ -16709,7 +16781,7 @@
             'v-slider--focused': isFocused.value,
             'v-slider--pressed': mousePressed.value,
             'v-slider--disabled': props.disabled
-          }, props.class],
+          }, rtlClasses.value, props.class],
           "style": props.style,
           "ref": inputRef
         }, inputProps, {
@@ -16815,50 +16887,51 @@
 
   // Types
 
+  const makeVRatingProps = propsFactory({
+    name: String,
+    itemAriaLabel: {
+      type: String,
+      default: '$vuetify.rating.ariaLabel.item'
+    },
+    activeColor: String,
+    color: String,
+    clearable: Boolean,
+    disabled: Boolean,
+    emptyIcon: {
+      type: IconValue,
+      default: '$ratingEmpty'
+    },
+    fullIcon: {
+      type: IconValue,
+      default: '$ratingFull'
+    },
+    halfIncrements: Boolean,
+    hover: Boolean,
+    length: {
+      type: [Number, String],
+      default: 5
+    },
+    readonly: Boolean,
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    itemLabels: Array,
+    itemLabelPosition: {
+      type: String,
+      default: 'top',
+      validator: v => ['top', 'bottom'].includes(v)
+    },
+    ripple: Boolean,
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeSizeProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-rating');
   const VRating = genericComponent()({
     name: 'VRating',
-    props: {
-      name: String,
-      itemAriaLabel: {
-        type: String,
-        default: '$vuetify.rating.ariaLabel.item'
-      },
-      activeColor: String,
-      color: String,
-      clearable: Boolean,
-      disabled: Boolean,
-      emptyIcon: {
-        type: IconValue,
-        default: '$ratingEmpty'
-      },
-      fullIcon: {
-        type: IconValue,
-        default: '$ratingFull'
-      },
-      halfIncrements: Boolean,
-      hover: Boolean,
-      length: {
-        type: [Number, String],
-        default: 5
-      },
-      readonly: Boolean,
-      modelValue: {
-        type: [Number, String],
-        default: 0
-      },
-      itemLabels: Array,
-      itemLabelPosition: {
-        type: String,
-        default: 'top',
-        validator: v => ['top', 'bottom'].includes(v)
-      },
-      ripple: Boolean,
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeSizeProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVRatingProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -16876,7 +16949,7 @@
       const normalizedValue = vue.computed(() => clamp(parseFloat(rating.value), 0, +props.length));
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
-      const hoverIndex = vue.ref(-1);
+      const hoverIndex = vue.shallowRef(-1);
       const itemState = vue.computed(() => increments.value.map(value => {
         const isHovering = props.hover && hoverIndex.value > -1;
         const isFilled = normalizedValue.value >= value;
@@ -17095,10 +17168,10 @@
         mobile
       } = useDisplay();
       const group = useGroup(props, props.symbol);
-      const isOverflowing = vue.ref(false);
-      const scrollOffset = vue.ref(0);
-      const containerSize = vue.ref(0);
-      const contentSize = vue.ref(0);
+      const isOverflowing = vue.shallowRef(false);
+      const scrollOffset = vue.shallowRef(0);
+      const containerSize = vue.shallowRef(0);
+      const contentSize = vue.shallowRef(0);
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
       const {
         resizeRef: containerRef,
@@ -17154,7 +17227,7 @@
           });
         });
       }
-      const disableTransition = vue.ref(false);
+      const disableTransition = vue.shallowRef(false);
       let startTouch = 0;
       let startOffset = 0;
       function onTouchstart(e) {
@@ -17183,7 +17256,7 @@
         if (!containerRef.value) return;
         containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
       }
-      const isFocused = vue.ref(false);
+      const isFocused = vue.shallowRef(false);
       function onFocusin(e) {
         isFocused.value = true;
         if (!isOverflowing.value || !contentRef.value) return;
@@ -17370,9 +17443,7 @@
 
   const VSlideGroupItem = genericComponent()({
     name: 'VSlideGroupItem',
-    props: {
-      ...makeGroupItemProps()
-    },
+    props: makeGroupItemProps(),
     emits: {
       'group:selected': val => true
     },
@@ -17390,26 +17461,27 @@
     }
   });
 
+  const makeVSnackbarProps = propsFactory({
+    multiLine: Boolean,
+    timeout: {
+      type: [Number, String],
+      default: 5000
+    },
+    vertical: Boolean,
+    ...makeLocationProps({
+      location: 'bottom'
+    }),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeVariantProps(),
+    ...makeThemeProps(),
+    ...omit(makeVOverlayProps({
+      transition: 'v-snackbar-transition'
+    }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy'])
+  }, 'v-snackbar');
   const VSnackbar = genericComponent()({
     name: 'VSnackbar',
-    props: {
-      multiLine: Boolean,
-      timeout: {
-        type: [Number, String],
-        default: 5000
-      },
-      vertical: Boolean,
-      ...makeLocationProps({
-        location: 'bottom'
-      }),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeVariantProps(),
-      ...makeThemeProps(),
-      ...omit(makeVOverlayProps({
-        transition: 'v-snackbar-transition'
-      }), ['persistent', 'noClickAnimation', 'scrim', 'scrollStrategy'])
-    },
+    props: makeVSnackbarProps(),
     emits: {
       'update:modelValue': v => true
     },
@@ -17506,20 +17578,21 @@
 
   // Types
 
+  const makeVSwitchProps = propsFactory({
+    indeterminate: Boolean,
+    inset: Boolean,
+    flat: Boolean,
+    loading: {
+      type: [Boolean, String],
+      default: false
+    },
+    ...makeVInputProps(),
+    ...makeSelectionControlProps()
+  }, 'v-switch');
   const VSwitch = genericComponent()({
     name: 'VSwitch',
     inheritAttrs: false,
-    props: {
-      indeterminate: Boolean,
-      inset: Boolean,
-      flat: Boolean,
-      loading: {
-        type: [Boolean, String],
-        default: false
-      },
-      ...makeVInputProps(),
-      ...makeSelectionControlProps()
-    },
+    props: makeVSwitchProps(),
     emits: {
       'update:focused': focused => true,
       'update:modelValue': () => true,
@@ -17629,19 +17702,20 @@
     }
   });
 
+  const makeVSystemBarProps = propsFactory({
+    color: String,
+    height: [Number, String],
+    window: Boolean,
+    ...makeComponentProps(),
+    ...makeElevationProps(),
+    ...makeLayoutItemProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-system-bar');
   const VSystemBar = genericComponent()({
     name: 'VSystemBar',
-    props: {
-      color: String,
-      height: [Number, String],
-      window: Boolean,
-      ...makeComponentProps(),
-      ...makeElevationProps(),
-      ...makeLayoutItemProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVSystemBarProps(),
     setup(props, _ref) {
       let {
         slots
@@ -17668,7 +17742,7 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.ref('top'),
+        position: vue.shallowRef('top'),
         layoutSize: height,
         elementSize: height,
         active: vue.computed(() => true),
@@ -17686,21 +17760,24 @@
 
   const VTabsSymbol = Symbol.for('vuetify:v-tabs');
 
+  // Types
+
+  const makeVTabProps = propsFactory({
+    fixed: Boolean,
+    sliderColor: String,
+    hideSlider: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    ...omit(makeVBtnProps({
+      selectedClass: 'v-tab--selected',
+      variant: 'text'
+    }), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
+  }, 'v-tabs');
   const VTab = genericComponent()({
     name: 'VTab',
-    props: {
-      fixed: Boolean,
-      sliderColor: String,
-      hideSlider: Boolean,
-      direction: {
-        type: String,
-        default: 'horizontal'
-      },
-      ...omit(makeVBtnProps({
-        selectedClass: 'v-tab--selected',
-        variant: 'text'
-      }), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
-    },
+    props: makeVTabProps(),
     setup(props, _ref) {
       let {
         slots,
@@ -17711,7 +17788,7 @@
         textColorStyles: sliderColorStyles
       } = useTextColor(props, 'sliderColor');
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
-      const isSelected = vue.ref(false);
+      const isSelected = vue.shallowRef(false);
       const rootEl = vue.ref();
       const sliderEl = vue.ref();
       function updateSlider(_ref2) {
@@ -17786,34 +17863,35 @@
       return item;
     });
   }
+  const makeVTabsProps = propsFactory({
+    alignTabs: {
+      type: String,
+      default: 'start'
+    },
+    color: String,
+    fixedTabs: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    stacked: Boolean,
+    bgColor: String,
+    grow: Boolean,
+    height: {
+      type: [Number, String],
+      default: undefined
+    },
+    hideSlider: Boolean,
+    sliderColor: String,
+    ...makeVSlideGroupProps({
+      mandatory: 'force'
+    }),
+    ...makeDensityProps(),
+    ...makeTagProps()
+  }, 'v-tabs');
   const VTabs = genericComponent()({
     name: 'VTabs',
-    props: {
-      alignTabs: {
-        type: String,
-        default: 'start'
-      },
-      color: String,
-      fixedTabs: Boolean,
-      items: {
-        type: Array,
-        default: () => []
-      },
-      stacked: Boolean,
-      bgColor: String,
-      grow: Boolean,
-      height: {
-        type: [Number, String],
-        default: undefined
-      },
-      hideSlider: Boolean,
-      sliderColor: String,
-      ...makeVSlideGroupProps({
-        mandatory: 'force'
-      }),
-      ...makeDensityProps(),
-      ...makeTagProps()
-    },
+    props: makeVTabsProps(),
     emits: {
       'update:modelValue': v => true
     },
@@ -17865,18 +17943,19 @@
     }
   });
 
+  const makeVTableProps = propsFactory({
+    fixedHeader: Boolean,
+    fixedFooter: Boolean,
+    height: [Number, String],
+    hover: Boolean,
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-table');
   const VTable = genericComponent()({
     name: 'VTable',
-    props: {
-      fixedHeader: Boolean,
-      fixedFooter: Boolean,
-      height: [Number, String],
-      hover: Boolean,
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVTableProps(),
     setup(props, _ref) {
       let {
         slots
@@ -17911,36 +17990,37 @@
 
   // Types
 
+  const makeVTextareaProps = propsFactory({
+    autoGrow: Boolean,
+    autofocus: Boolean,
+    counter: [Boolean, Number, String],
+    counterValue: Function,
+    prefix: String,
+    placeholder: String,
+    persistentPlaceholder: Boolean,
+    persistentCounter: Boolean,
+    noResize: Boolean,
+    rows: {
+      type: [Number, String],
+      default: 5,
+      validator: v => !isNaN(parseFloat(v))
+    },
+    maxRows: {
+      type: [Number, String],
+      validator: v => !isNaN(parseFloat(v))
+    },
+    suffix: String,
+    modelModifiers: Object,
+    ...makeVInputProps(),
+    ...makeVFieldProps()
+  }, 'v-textarea');
   const VTextarea = genericComponent()({
     name: 'VTextarea',
     directives: {
       Intersect
     },
     inheritAttrs: false,
-    props: {
-      autoGrow: Boolean,
-      autofocus: Boolean,
-      counter: [Boolean, Number, String],
-      counterValue: Function,
-      prefix: String,
-      placeholder: String,
-      persistentPlaceholder: Boolean,
-      persistentCounter: Boolean,
-      noResize: Boolean,
-      rows: {
-        type: [Number, String],
-        default: 5,
-        validator: v => !isNaN(parseFloat(v))
-      },
-      maxRows: {
-        type: [Number, String],
-        validator: v => !isNaN(parseFloat(v))
-      },
-      suffix: String,
-      modelModifiers: Object,
-      ...makeVInputProps(),
-      ...makeVFieldProps()
-    },
+    props: makeVTextareaProps(),
     emits: {
       'click:control': e => true,
       'mousedown:control': e => true,
@@ -17973,7 +18053,7 @@
       }
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
-      const controlHeight = vue.ref('');
+      const controlHeight = vue.shallowRef('');
       const textareaRef = vue.ref();
       const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
@@ -18142,14 +18222,15 @@
     }
   });
 
+  const makeVThemeProviderProps = propsFactory({
+    withBackground: Boolean,
+    ...makeComponentProps(),
+    ...makeThemeProps(),
+    ...makeTagProps()
+  }, 'v-theme-provider');
   const VThemeProvider = genericComponent()({
     name: 'VThemeProvider',
-    props: {
-      withBackground: Boolean,
-      ...makeComponentProps(),
-      ...makeThemeProps(),
-      ...makeTagProps()
-    },
+    props: makeVThemeProviderProps(),
     setup(props, _ref) {
       let {
         slots
@@ -18171,46 +18252,47 @@
 
   // Types
 
+  const makeVTimelineProps = propsFactory({
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    justify: {
+      type: String,
+      default: 'auto',
+      validator: v => ['auto', 'center'].includes(v)
+    },
+    side: {
+      type: String,
+      validator: v => v == null || ['start', 'end'].includes(v)
+    },
+    lineInset: {
+      type: [String, Number],
+      default: 0
+    },
+    lineThickness: {
+      type: [String, Number],
+      default: 2
+    },
+    lineColor: String,
+    truncateLine: {
+      type: String,
+      validator: v => ['start', 'end', 'both'].includes(v)
+    },
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-timeline');
   const VTimeline = genericComponent()({
     name: 'VTimeline',
-    props: {
-      align: {
-        type: String,
-        default: 'center',
-        validator: v => ['center', 'start'].includes(v)
-      },
-      direction: {
-        type: String,
-        default: 'vertical',
-        validator: v => ['vertical', 'horizontal'].includes(v)
-      },
-      justify: {
-        type: String,
-        default: 'auto',
-        validator: v => ['auto', 'center'].includes(v)
-      },
-      side: {
-        type: String,
-        validator: v => v == null || ['start', 'end'].includes(v)
-      },
-      lineInset: {
-        type: [String, Number],
-        default: 0
-      },
-      lineThickness: {
-        type: [String, Number],
-        default: 2
-      },
-      lineColor: String,
-      truncateLine: {
-        type: String,
-        validator: v => ['start', 'end', 'both'].includes(v)
-      },
-      ...makeComponentProps(),
-      ...makeDensityProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
-    },
+    props: makeVTimelineProps(),
     setup(props, _ref) {
       let {
         slots
@@ -18221,6 +18303,9 @@
       const {
         densityClasses
       } = useDensity(props);
+      const {
+        rtlClasses
+      } = useRtl();
       provideDefaults({
         VTimelineDivider: {
           lineColor: vue.toRef(props, 'lineColor')
@@ -18250,7 +18335,7 @@
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
           'v-timeline--inset-line': !!props.lineInset
-        }, themeClasses.value, densityClasses.value, sideClasses.value, props.class],
+        }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
         "style": [{
           '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
         }, props.style]
@@ -18259,20 +18344,21 @@
     }
   });
 
+  const makeVTimelineDividerProps = propsFactory({
+    dotColor: String,
+    fillDot: Boolean,
+    hideDot: Boolean,
+    icon: IconValue,
+    iconColor: String,
+    lineColor: String,
+    ...makeComponentProps(),
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeElevationProps()
+  }, 'v-timeline-divider');
   const VTimelineDivider = genericComponent()({
     name: 'VTimelineDivider',
-    props: {
-      dotColor: String,
-      fillDot: Boolean,
-      hideDot: Boolean,
-      icon: IconValue,
-      iconColor: String,
-      lineColor: String,
-      ...makeComponentProps(),
-      ...makeRoundedProps(),
-      ...makeSizeProps(),
-      ...makeElevationProps()
-    },
+    props: makeVTimelineDividerProps(),
     setup(props, _ref) {
       let {
         slots
@@ -18335,27 +18421,28 @@
 
   // Types
 
+  const makeVTimelineItemProps = propsFactory({
+    density: String,
+    dotColor: String,
+    fillDot: Boolean,
+    hideDot: Boolean,
+    hideOpposite: {
+      type: Boolean,
+      default: undefined
+    },
+    icon: IconValue,
+    iconColor: String,
+    lineInset: [Number, String],
+    ...makeComponentProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeTagProps()
+  }, 'v-timeline-item');
   const VTimelineItem = genericComponent()({
     name: 'VTimelineItem',
-    props: {
-      density: String,
-      dotColor: String,
-      fillDot: Boolean,
-      hideDot: Boolean,
-      hideOpposite: {
-        type: Boolean,
-        default: undefined
-      },
-      icon: IconValue,
-      iconColor: String,
-      lineInset: [Number, String],
-      ...makeComponentProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeRoundedProps(),
-      ...makeSizeProps(),
-      ...makeTagProps()
-    },
+    props: makeVTimelineItemProps(),
     setup(props, _ref) {
       let {
         slots
@@ -18363,7 +18450,7 @@
       const {
         dimensionStyles
       } = useDimension(props);
-      const dotSize = vue.ref(0);
+      const dotSize = vue.shallowRef(0);
       const dotRef = vue.ref();
       vue.watch(dotRef, newValue => {
         if (!newValue) return;
@@ -18401,28 +18488,57 @@
     }
   });
 
+  const makeVToolbarItemsProps = propsFactory({
+    ...makeComponentProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  }, 'v-toolbar-items');
+  const VToolbarItems = genericComponent()({
+    name: 'VToolbarItems',
+    props: makeVToolbarItemsProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      provideDefaults({
+        VBtn: {
+          color: vue.toRef(props, 'color'),
+          height: 'inherit',
+          variant: vue.toRef(props, 'variant')
+        }
+      });
+      useRender(() => vue.createVNode("div", {
+        "class": ['v-toolbar-items', props.class],
+        "style": props.style
+      }, [slots.default?.()]));
+      return {};
+    }
+  });
+
   // Types
 
+  const makeVTooltipProps = propsFactory({
+    id: String,
+    text: String,
+    ...omit(makeVOverlayProps({
+      closeOnBack: false,
+      location: 'end',
+      locationStrategy: 'connected',
+      eager: true,
+      minWidth: 0,
+      offset: 10,
+      openOnClick: false,
+      openOnHover: true,
+      origin: 'auto',
+      scrim: false,
+      scrollStrategy: 'reposition',
+      transition: false
+    }), ['absolute', 'persistent'])
+  }, 'v-tooltip');
   const VTooltip = genericComponent()({
     name: 'VTooltip',
-    props: {
-      id: String,
-      text: String,
-      ...omit(makeVOverlayProps({
-        closeOnBack: false,
-        location: 'end',
-        locationStrategy: 'connected',
-        eager: true,
-        minWidth: 0,
-        offset: 10,
-        openOnClick: false,
-        openOnHover: true,
-        origin: 'auto',
-        scrim: false,
-        scrollStrategy: 'reposition',
-        transition: false
-      }), ['absolute', 'persistent'])
-    },
+    props: makeVTooltipProps(),
     emits: {
       'update:modelValue': value => true
     },
@@ -18485,9 +18601,7 @@
   // Composables
   const VValidation = genericComponent()({
     name: 'VValidation',
-    props: {
-      ...makeValidationProps()
-    },
+    props: makeValidationProps(),
     emits: {
       'update:modelValue': val => true
     },
@@ -18500,12 +18614,13 @@
     }
   });
 
+  const makeVVirtualScrollItemProps = propsFactory({
+    dynamicHeight: Boolean,
+    ...makeComponentProps()
+  }, 'v-virtual-scroll-item');
   const VVirtualScrollItem = genericComponent()({
     name: 'VVirtualScrollItem',
-    props: {
-      dynamicHeight: Boolean,
-      ...makeComponentProps()
-    },
+    props: makeVVirtualScrollItemProps(),
     emits: {
       'update:height': height => true
     },
@@ -18541,23 +18656,24 @@
 
   const UP = -1;
   const DOWN = 1;
+  const makeVVirtualScrollProps = propsFactory({
+    items: {
+      type: Array,
+      default: () => []
+    },
+    itemHeight: [Number, String],
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  }, 'v-virtual-scroll');
   const VVirtualScroll = genericComponent()({
     name: 'VVirtualScroll',
-    props: {
-      items: {
-        type: Array,
-        default: () => []
-      },
-      itemHeight: [Number, String],
-      ...makeComponentProps(),
-      ...makeDimensionProps()
-    },
+    props: makeVVirtualScrollProps(),
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      const first = vue.ref(0);
-      const baseItemHeight = vue.ref(props.itemHeight);
+      const first = vue.shallowRef(0);
+      const baseItemHeight = vue.shallowRef(props.itemHeight);
       const itemHeight = vue.computed({
         get: () => parseInt(baseItemHeight.value ?? 0, 10),
         set(val) {
@@ -19431,7 +19547,7 @@
       date
     };
   }
-  const version$1 = "3.2.2";
+  const version$1 = "3.2.4";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19451,7 +19567,7 @@
       ...options
     });
   };
-  const version = "3.2.2";
+  const version = "3.2.4";
   createVuetify.version = version;
 
   exports.components = components;