vuetify 3.2.2 → 3.2.4

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.2
+* Vuetify v3.2.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1284,7 +1284,7 @@ function useLayoutItem(options) {
   provide(VuetifyLayoutItemKey, {
     id
   });
-  const isKeptAlive = ref(false);
+  const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
   const {
@@ -1415,7 +1415,7 @@ function createLayout(props) {
     return items.value.find(item => item.id === id);
   };
   const rootVm = getCurrentInstance('createLayout');
-  const isMounted = ref(false);
+  const isMounted = shallowRef(false);
   onMounted(() => {
     isMounted.value = true;
   });
@@ -1670,9 +1670,9 @@ const defaultThemeOptions = {
       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,
@@ -2009,6 +2009,10 @@ var en = {
   }
 };
 
+// Composables
+
+// Types
+
 const LANG_PREFIX = '$vuetify.';
 const replace = (str, params) => {
   return str.replace(/\{(\d+)\}/g, (match, index) => {
@@ -2081,8 +2085,8 @@ function createProvideFunction(state) {
   };
 }
 function createVuetifyAdapter(options) {
-  const current = ref(options?.locale ?? 'en');
-  const fallback = ref(options?.fallback ?? 'en');
+  const current = shallowRef(options?.locale ?? 'en');
+  const fallback = shallowRef(options?.fallback ?? 'en');
   const messages = ref({
     en,
     ...options?.messages
@@ -2201,15 +2205,16 @@ function useRtl() {
   };
 }
 
+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
@@ -2244,15 +2249,16 @@ const VApp = genericComponent()({
 
 // 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
@@ -2278,25 +2284,23 @@ const VDefaultsProvider = genericComponent(false)({
 
 // 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
@@ -2454,11 +2458,12 @@ function ExpandTransitionGenerator () {
 
 // Types
 
+const makeVDialogTransitionProps = propsFactory({
+  target: Object
+}, 'v-dialog-transition');
 const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
-  props: {
-    target: Object
-  },
+  props: makeVDialogTransitionProps(),
   setup(props, _ref) {
     let {
       slots
@@ -2648,14 +2653,15 @@ function useAspectStyles(props) {
     })
   };
 }
+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
@@ -2744,6 +2750,7 @@ const MaybeTransition = (props, _ref) => {
   } = _ref;
   const {
     transition,
+    disabled,
     ...rest
   } = props;
   const {
@@ -2751,44 +2758,47 @@ const MaybeTransition = (props, _ref) => {
     ...customProps
   } = typeof transition === 'object' ? transition : {};
   return h(component, 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,
@@ -2799,11 +2809,11 @@ const VImg = genericComponent()({
       emit,
       slots
     } = _ref;
-    const currentSrc = ref(''); // Set from srcset
+    const currentSrc = shallowRef(''); // Set from srcset
     const image = ref();
-    const state = ref(props.eager ? 'loading' : 'idle');
-    const naturalWidth = ref();
-    const naturalHeight = ref();
+    const state = shallowRef(props.eager ? 'loading' : 'idle');
+    const naturalWidth = shallowRef();
+    const naturalHeight = shallowRef();
     const normalisedSrc = computed(() => {
       return props.src && typeof props.src === 'object' ? {
         src: props.src.src,
@@ -2957,7 +2967,7 @@ const VImg = genericComponent()({
         }
       }, null);
     };
-    const isBooted = ref(false);
+    const isBooted = shallowRef(false);
     {
       const stop = watch(aspectRatio, val => {
         if (val) {
@@ -3240,7 +3250,10 @@ const VToolbar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
-    const isExtended = ref(!!(props.extended || slots.extension?.()));
+    const {
+      rtlClasses
+    } = useRtl();
+    const isExtended = shallowRef(!!(props.extended || slots.extension?.()));
     const contentHeight = 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 = 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({
@@ -3260,7 +3273,7 @@ const VToolbar = genericComponent()({
           '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 && createVNode("div", {
@@ -3347,11 +3360,11 @@ function useScroll(props) {
   } = args;
   let previousScroll = 0;
   const target = ref(null);
-  const currentScroll = ref(0);
-  const savedScroll = ref(0);
-  const currentThreshold = ref(0);
-  const isScrollActive = ref(false);
-  const isScrollingUp = ref(false);
+  const currentScroll = shallowRef(0);
+  const savedScroll = shallowRef(0);
+  const currentThreshold = shallowRef(0);
+  const isScrollActive = shallowRef(false);
+  const isScrollingUp = shallowRef(false);
   const scrollThreshold = computed(() => {
     return Number(props.scrollThreshold);
   });
@@ -3421,7 +3434,7 @@ function useScroll(props) {
 
 // Composables
 function useSsrBoot() {
-  const isBooted = ref(false);
+  const isBooted = shallowRef(false);
   onMounted(() => {
     window.requestAnimationFrame(() => {
       isBooted.value = true;
@@ -3438,27 +3451,28 @@ function useSsrBoot() {
 
 // 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
   },
@@ -3531,7 +3545,7 @@ const VAppBar = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'location'),
       layoutSize: height,
-      elementSize: ref(undefined),
+      elementSize: shallowRef(undefined),
       active: isActive,
       absolute: toRef(props, 'absolute')
     });
@@ -3888,12 +3902,13 @@ function getValues(items, ids) {
 // 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
   },
@@ -4220,7 +4235,7 @@ const VIcon = genericComponent()({
 // Utilities
 function useIntersectionObserver(callback, options) {
   const intersectionRef = ref();
-  const isIntersecting = ref(false);
+  const isIntersecting = shallowRef(false);
   if (SUPPORTS_INTERSECTION) {
     const observer = new IntersectionObserver(entries => {
       callback?.(entries, observer);
@@ -4247,31 +4262,32 @@ function useIntersectionObserver(callback, options) {
 
 // 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
@@ -4708,47 +4724,48 @@ function useLocation(props) {
   };
 }
 
+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
   },
@@ -4758,7 +4775,8 @@ const VProgressLinear = genericComponent()({
     } = _ref;
     const progress = useProxiedModel(props, 'modelValue');
     const {
-      isRtl
+      isRtl,
+      rtlClasses
     } = useRtl();
     const {
       themeClasses
@@ -4813,7 +4831,7 @@ const VProgressLinear = genericComponent()({
         '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,
@@ -5210,12 +5228,15 @@ const VBtn = genericComponent()({
 
 // 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
@@ -5227,33 +5248,6 @@ const VAppBarNavIcon = genericComponent()({
   }
 });
 
-const VToolbarItems = genericComponent()({
-  name: 'VToolbarItems',
-  props: {
-    ...makeComponentProps(),
-    ...makeVariantProps({
-      variant: 'text'
-    })
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    provideDefaults({
-      VBtn: {
-        color: toRef(props, 'color'),
-        height: 'inherit',
-        variant: toRef(props, 'variant')
-      }
-    });
-    useRender(() => createVNode("div", {
-      "class": ['v-toolbar-items', props.class],
-      "style": props.style
-    }, [slots.default?.()]));
-    return {};
-  }
-});
-
 // Types
 
 const VAppBarTitle = genericComponent()({
@@ -5276,53 +5270,54 @@ const VAlertTitle = createSimpleFunctional('v-alert-title');
 // 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
@@ -5385,7 +5380,6 @@ const VAlert = genericComponent()({
     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 && createVNode(props.tag, {
         "class": ['v-alert', props.border && {
@@ -5425,7 +5419,7 @@ const VAlert = genericComponent()({
           "key": "title"
         }, {
           default: () => [slots.title?.() ?? props.title]
-        }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && createVNode("div", {
+        }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && createVNode("div", {
           "key": "append",
           "class": "v-alert__append"
         }, [slots.append()]), hasClose && createVNode("div", {
@@ -5483,14 +5477,15 @@ function useInputIcon(props) {
   };
 }
 
+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
@@ -5505,12 +5500,13 @@ const VLabel = genericComponent()({
   }
 });
 
+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
@@ -5629,6 +5625,9 @@ const VField = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      rtlClasses
+    } = useRtl();
     const isActive = computed(() => props.dirty || props.active);
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
     const uid = getUid();
@@ -5722,7 +5721,7 @@ const VField = genericComponent()({
           '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), [createVNode("div", {
@@ -5817,24 +5816,25 @@ function filterFieldProps(attrs) {
 
 // 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
@@ -5863,7 +5863,7 @@ const VMessages = genericComponent()({
   }
 });
 
-// Utilities
+// Composables
 
 // Types
 
@@ -5885,7 +5885,7 @@ function createForm(props) {
   const model = useProxiedModel(props, 'modelValue');
   const isDisabled = computed(() => props.disabled);
   const isReadonly = computed(() => props.readonly);
-  const isValidating = ref(false);
+  const isValidating = shallowRef(false);
   const items = ref([]);
   const errors = ref([]);
   async function validate() {
@@ -6024,7 +6024,7 @@ function useValidation(props) {
   const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
   const form = useForm();
   const internalErrorMessages = ref([]);
-  const isPristine = ref(true);
+  const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
   const isDisabled = computed(() => !!(props.disabled || form?.isDisabled.value));
   const isReadonly = computed(() => !!(props.readonly || form?.isReadonly.value));
@@ -6036,7 +6036,7 @@ function useValidation(props) {
     if (!props.rules.length) return true;
     return isPristine.value ? null : true;
   });
-  const isValidating = ref(false);
+  const isValidating = shallowRef(false);
   const validationClasses = computed(() => {
     return {
       [`${name}--error`]: isValid.value === false,
@@ -6246,23 +6246,24 @@ const VInput = genericComponent()({
   }
 });
 
+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
@@ -6564,6 +6565,7 @@ const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group
 const makeSelectionControlGroupProps = propsFactory({
   color: String,
   disabled: Boolean,
+  defaultsTarget: String,
   error: Boolean,
   id: String,
   inline: Boolean,
@@ -6585,19 +6587,18 @@ const makeSelectionControlGroupProps = propsFactory({
     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
   },
@@ -6733,8 +6734,8 @@ const VSelectionControl = genericComponent()({
     } = useSelectionControl(props);
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
-    const isFocused = ref(false);
-    const isFocusVisible = ref(false);
+    const isFocused = shallowRef(false);
+    const isFocusVisible = shallowRef(false);
     const input = ref();
     group?.onForceUpdate(() => {
       if (input.value) {
@@ -6871,13 +6872,14 @@ const VCheckboxBtn = genericComponent()({
 
 // 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
   },
@@ -6992,25 +6994,26 @@ const VAvatar = genericComponent()({
 // 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
   },
@@ -7054,65 +7057,66 @@ const VChipGroup = genericComponent()({
   }
 });
 
+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,
@@ -7241,14 +7245,16 @@ const VChip = genericComponent()({
               start: true
             }
           }
-        }, slots.prepend)]), slots.default?.({
+        }, slots.prepend)]), 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 && createVNode("div", {
+        }) ?? props.text]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-chip__append"
         }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
@@ -7293,17 +7299,18 @@ const VChip = genericComponent()({
   }
 });
 
+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
@@ -7345,11 +7352,11 @@ const VDivider = genericComponent()({
 const ListKey = Symbol.for('vuetify:list');
 function createList() {
   const parent = inject$1(ListKey, {
-    hasPrepend: ref(false),
+    hasPrepend: shallowRef(false),
     updateHasPrepend: () => null
   });
   const data = {
-    hasPrepend: ref(false),
+    hasPrepend: shallowRef(false),
     updateHasPrepend: value => {
       if (value) data.hasPrepend.value = value;
     }
@@ -7616,11 +7623,13 @@ const classicSelectStrategy = mandatory => {
   return strategy;
 };
 
+// Composables
+
 // Types
 
 const VNestedSymbol = Symbol.for('vuetify:nested');
 const emptyNested = {
-  id: ref(),
+  id: shallowRef(),
   root: {
     register: () => null,
     unregister: () => null,
@@ -7689,7 +7698,7 @@ const useNested = props => {
   }
   const vm = getCurrentInstance('nested');
   const nested = {
-    id: ref(),
+    id: shallowRef(),
     root: {
       opened,
       selected,
@@ -7829,16 +7838,14 @@ const makeVListGroupProps = propsFactory({
   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
@@ -7914,51 +7921,52 @@ const VListItemTitle = createSimpleFunctional('v-list-item-title');
 
 // 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
   },
@@ -8145,16 +8153,17 @@ const VListItem = genericComponent()({
   }
 });
 
+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
@@ -8185,11 +8194,12 @@ const VListSubheader = genericComponent()({
 
 // Types
 
+const makeVListChildrenProps = propsFactory({
+  items: Array
+}, 'v-list-children');
 const VListChildren = genericComponent()({
   name: 'VListChildren',
-  props: {
-    items: Array
-  },
+  props: makeVListChildrenProps(),
   setup(props, _ref) {
     let {
       slots
@@ -8375,39 +8385,40 @@ function useListItems(props) {
     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,
@@ -8467,7 +8478,7 @@ const VList = genericComponent()({
         variant: toRef(props, 'variant')
       }
     });
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     const contentRef = ref();
     function onFocusin(e) {
       isFocused.value = true;
@@ -8528,14 +8539,15 @@ const VList = genericComponent()({
 
 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
@@ -8551,14 +8563,15 @@ const VListItemAction = genericComponent()({
   }
 });
 
+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
@@ -8862,7 +8875,7 @@ const makeLazyProps = propsFactory({
   eager: Boolean
 }, 'lazy');
 function useLazy(props, active) {
-  const isBooted = ref(false);
+  const isBooted = shallowRef(false);
   const hasContent = computed(() => isBooted.value || props.eager || active.value);
   watch(active, () => isBooted.value = true);
   function onAfterLeave() {
@@ -9020,7 +9033,9 @@ function connectedLocationStrategy(data, props, contentStyles) {
   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 {
@@ -9092,8 +9107,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
     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) => {
@@ -9522,10 +9537,10 @@ function createDisplay(options, ssr) {
     thresholds,
     mobileBreakpoint
   } = parseDisplayOptions(options);
-  const height = ref(getClientHeight(ssr));
+  const height = shallowRef(getClientHeight(ssr));
   const platform = shallowRef(getPlatform(ssr));
   const state = reactive({});
-  const width = ref(getClientWidth(ssr));
+  const width = shallowRef(getClientWidth(ssr));
   function updateSize() {
     height.value = getClientHeight();
     width.value = getClientWidth();
@@ -9585,20 +9600,20 @@ function useDisplay() {
   return display;
 }
 
-// Utilities
+// Composables
 function useHydration() {
-  if (!IN_BROWSER) return ref(false);
+  if (!IN_BROWSER) return shallowRef(false);
   const {
     ssr
   } = useDisplay();
   if (ssr) {
-    const isMounted = ref(false);
+    const isMounted = shallowRef(false);
     onMounted(() => {
       isMounted.value = true;
     });
     return isMounted;
   } else {
-    return ref(true);
+    return shallowRef(true);
   }
 }
 
@@ -9612,6 +9627,8 @@ function useScopeId() {
   };
 }
 
+// Composables
+
 // Types
 
 const StackSymbol = Symbol.for('vuetify:stack');
@@ -9624,7 +9641,7 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     activeChildren: new Set()
   });
   provide(StackSymbol, stack);
-  const _zIndex = ref(+zIndex.value);
+  const _zIndex = shallowRef(+zIndex.value);
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1];
     _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
@@ -9640,7 +9657,7 @@ function useStack(isActive, zIndex, disableGlobalStack) {
       parent?.activeChildren.delete(vm.uid);
     });
   });
-  const globalTop = ref(true);
+  const globalTop = shallowRef(true);
   if (createStackEntry) {
     watchEffect(() => {
       const _isTop = globalStack.at(-1)?.[0] === vm.uid;
@@ -9746,7 +9763,7 @@ const ClickOutside = {
     });
     if (!el._clickOutside) {
       el._clickOutside = {
-        lastMousedownWasOutside: true
+        lastMousedownWasOutside: false
       };
     }
     el._clickOutside[binding.instance.$.uid] = {
@@ -10022,24 +10039,25 @@ const VOverlay = genericComponent()({
 
 // 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
   },
@@ -10055,7 +10073,7 @@ const VMenu = genericComponent()({
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
-    const openChildren = ref(0);
+    const openChildren = shallowRef(0);
     provide(VMenuSymbol, {
       register() {
         ++openChildren.value;
@@ -10145,20 +10163,21 @@ const makeSelectProps = propsFactory({
   ...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,
@@ -10197,7 +10216,7 @@ const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     let keyboardLookupPrefix = '';
     let keyboardLookupLastTime;
     const displayItems = computed(() => {
@@ -10277,14 +10296,14 @@ const VSelect = genericComponent()({
         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']);
@@ -10328,15 +10347,15 @@ const VSelect = genericComponent()({
           "maxHeight": 310,
           "openOnClick": false,
           "closeOnContentClick": false,
-          "transition": props.transition
+          "transition": props.transition,
+          "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && 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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -10541,23 +10560,24 @@ function highlightResult$1(text, matches, length) {
     "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,
@@ -10572,8 +10592,8 @@ const VAutocomplete = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const isFocused = ref(false);
-    const isPristine = ref(true);
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -10583,7 +10603,7 @@ const VAutocomplete = genericComponent()({
         _menu.value = v;
       }
     });
-    const selectionIndex = ref(-1);
+    const selectionIndex = shallowRef(-1);
     const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
@@ -10686,17 +10706,15 @@ const VAutocomplete = genericComponent()({
       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 = ref(false);
+    const isSelecting = shallowRef(false);
     function select(item) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
@@ -10710,9 +10728,7 @@ const VAutocomplete = genericComponent()({
       } else {
         model.value = [item];
         isSelecting.value = true;
-        if (!slots.selection) {
-          search.value = item.title;
-        }
+        search.value = item.title;
         menu.value = false;
         isPristine.value = true;
         nextTick(() => isSelecting.value = false);
@@ -10721,13 +10737,14 @@ const VAutocomplete = genericComponent()({
     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;
         nextTick(() => isSelecting.value = false);
       } else {
         if (!props.multiple && !search.value) model.value = [];
         menu.value = false;
         search.value = '';
+        selectionIndex.value = -1;
       }
     });
     watch(search, val => {
@@ -10752,12 +10769,10 @@ const VAutocomplete = genericComponent()({
         "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,
@@ -10786,8 +10801,7 @@ const VAutocomplete = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -10879,40 +10893,41 @@ const VAutocomplete = genericComponent()({
   }
 });
 
+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,
@@ -10973,13 +10988,14 @@ const VBadge = genericComponent()({
   }
 });
 
+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
@@ -11003,27 +11019,28 @@ const VBannerText = createSimpleFunctional('v-banner-text');
 
 // 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
@@ -11110,47 +11127,48 @@ const VBanner = genericComponent()({
   }
 });
 
-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
@@ -11219,12 +11237,13 @@ const VBottomNavigation = genericComponent()({
   }
 });
 
+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
@@ -11237,21 +11256,22 @@ const VBreadcrumbsDivider = genericComponent()({
   }
 });
 
+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,
@@ -11287,30 +11307,31 @@ const VBreadcrumbsItem = genericComponent()({
 
 // 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
@@ -11419,18 +11440,19 @@ const VCardSubtitle = createSimpleFunctional('v-card-subtitle');
 
 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
@@ -11501,47 +11523,48 @@ const VCardText = createSimpleFunctional('v-card-text');
 
 // 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,
@@ -11824,14 +11847,14 @@ const VWindow = genericComponent()({
     const group = useGroup(props, VWindowGroupSymbol);
     const rootRef = ref();
     const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse);
-    const isReversed = ref(false);
+    const isReversed = shallowRef(false);
     const transition = 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 = ref(0);
+    const transitionCount = shallowRef(0);
     const transitionHeight = ref(undefined);
     const activeIndex = computed(() => {
       return group.items.value.findIndex(item => group.selected.value.includes(item.id));
@@ -11935,34 +11958,35 @@ const VWindow = genericComponent()({
 
 // 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
   },
@@ -12052,24 +12076,25 @@ const VCarousel = genericComponent()({
   }
 });
 
+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
   },
@@ -12083,8 +12108,8 @@ const VWindowItem = genericComponent()({
       isBooted
     } = useSsrBoot();
     if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
-    const isTransitioning = ref(false);
-    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false);
+    const isTransitioning = shallowRef(false);
+    const hasTransition = computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
     function onAfterTransition() {
       if (!isTransitioning.value || !window) {
         return;
@@ -12163,25 +12188,28 @@ const VWindowItem = genericComponent()({
 
 // 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(() => createVNode(VWindowItem, {
-      "class": ['v-carousel-item', props.class],
-      "style": props.style,
-      "value": props.value
-    }, {
-      default: () => [createVNode(VImg, attrs, slots)]
-    }));
+    useRender(() => {
+      const [imgProps] = VImg.filterProps(props);
+      const [windowItemProps] = VWindowItem.filterProps(props);
+      return createVNode(VWindowItem, mergeProps({
+        "class": "v-carousel-item"
+      }, windowItemProps), {
+        default: () => [createVNode(VImg, mergeProps(attrs, imgProps), slots)]
+      });
+    });
   }
 });
 
@@ -12201,9 +12229,7 @@ const makeVSheetProps = propsFactory({
 }, 'v-sheet');
 const VSheet = genericComponent()({
   name: 'VSheet',
-  props: {
-    ...makeVSheetProps()
-  },
+  props: makeVSheetProps(),
   setup(props, _ref) {
     let {
       slots
@@ -12243,27 +12269,28 @@ const VSheet = genericComponent()({
 
 // 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
@@ -12272,8 +12299,8 @@ const VColorPickerCanvas = defineComponent({
     let {
       emit
     } = _ref;
-    const isInteracting = ref(false);
-    const isOutsideUpdate = ref(false);
+    const isInteracting = shallowRef(false);
+    const isOutsideUpdate = shallowRef(false);
     const dotPosition = ref({
       x: 0,
       y: 0
@@ -12291,8 +12318,8 @@ const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
-    const canvasWidth = ref(parseFloat(props.width));
-    const canvasHeight = ref(parseFloat(props.height));
+    const canvasWidth = shallowRef(parseFloat(props.width));
+    const canvasHeight = shallowRef(parseFloat(props.height));
     const {
       resizeRef
     } = useResizeObserver(entries => {
@@ -12519,7 +12546,7 @@ const rgba = {
       let {
         a
       } = _ref;
-      return a ? Math.round(a * 100) / 100 : 1;
+      return a != null ? Math.round(a * 100) / 100 : 1;
     },
     getColor: (c, v) => ({
       ...c,
@@ -12573,7 +12600,7 @@ const hsla = {
       let {
         a
       } = _ref2;
-      return a ? Math.round(a * 100) / 100 : 1;
+      return a != null ? Math.round(a * 100) / 100 : 1;
     },
     getColor: (c, v) => ({
       ...c,
@@ -12627,23 +12654,24 @@ const VColorPickerInput = _ref => {
     "class": "v-color-picker-edit__input"
   }, [createVNode("input", rest, null), 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
@@ -12823,8 +12851,8 @@ const useSlider = _ref => {
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
-  const mousePressed = ref(false);
-  const startOffset = ref(0);
+  const mousePressed = shallowRef(false);
+  const startOffset = shallowRef(0);
   const trackContainerRef = ref();
   const activeThumbRef = ref();
   function parseMouseMove(e) {
@@ -12976,35 +13004,36 @@ const useSlider = _ref => {
   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
   },
@@ -13121,19 +13150,20 @@ const VSliderThumb = genericComponent()({
   }
 });
 
+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 {
@@ -13239,17 +13269,18 @@ const VSliderTrack = genericComponent()({
 
 // 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,
@@ -13262,6 +13293,9 @@ const VSlider = genericComponent()({
       emit
     } = _ref;
     const thumbContainerRef = 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;
@@ -13315,7 +13349,7 @@ const VSlider = genericComponent()({
           '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
@@ -13372,16 +13406,17 @@ const VSlider = genericComponent()({
 
 // 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
   },
@@ -13759,6 +13794,16 @@ var colors = Object.freeze({
 
 // 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];
@@ -13767,16 +13812,7 @@ function parseDefaultColors(colors) {
 }
 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
   },
@@ -13812,44 +13848,45 @@ const VColorPickerSwatches = defineComponent({
 
 // 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
@@ -13872,6 +13909,9 @@ const VColorPicker = defineComponent({
       if (!v) return null;
       return extractColor(v, props.modelValue);
     });
+    const {
+      rtlClasses
+    } = useRtl();
     const updateColor = hsva => {
       currentColor.value = hsva;
       lastPickedColor.value = hsva;
@@ -13892,7 +13932,7 @@ const VColorPicker = defineComponent({
         "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),
@@ -13954,26 +13994,27 @@ function highlightResult(text, matches, length) {
     "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,
@@ -13989,8 +14030,8 @@ const VCombobox = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const isFocused = ref(false);
-    const isPristine = ref(true);
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -14000,7 +14041,7 @@ const VCombobox = genericComponent()({
         _menu.value = v;
       }
     });
-    const selectionIndex = ref(-1);
+    const selectionIndex = shallowRef(-1);
     let cleared = false;
     const color = computed(() => vTextFieldRef.value?.color);
     const {
@@ -14017,7 +14058,7 @@ const VCombobox = genericComponent()({
       return props.multiple ? transformed : transformed[0] ?? null;
     });
     const form = useForm();
-    const _search = ref(!props.multiple ? model.value[0]?.title ?? '' : '');
+    const _search = shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
     const search = computed({
       get: () => {
         return _search.value;
@@ -14143,8 +14184,11 @@ const VCombobox = genericComponent()({
       }
     }
     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));
@@ -14170,23 +14214,16 @@ const VCombobox = genericComponent()({
     function onFocusin(e) {
       isFocused.value = true;
     }
-    function onFocusout(e) {
-      if (e.relatedTarget == null) {
-        vTextFieldRef.value?.focus();
-      }
-    }
     watch(filteredItems, val => {
       if (!val.length && props.hideNoData) menu.value = false;
     });
     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);
@@ -14237,8 +14274,7 @@ const VCombobox = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -14333,24 +14369,25 @@ const VCombobox = genericComponent()({
 
 // 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
   },
@@ -14444,21 +14481,22 @@ const VDialog = genericComponent()({
 
 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
   },
@@ -14502,17 +14540,15 @@ const makeVExpansionPanelTitleProps = propsFactory({
     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
@@ -14551,12 +14587,13 @@ const VExpansionPanelTitle = genericComponent()({
   }
 });
 
+const makeVExpansionPanelTextProps = propsFactory({
+  ...makeComponentProps(),
+  ...makeLazyProps()
+}, 'v-expansion-panel-text');
 const VExpansionPanelText = genericComponent()({
   name: 'VExpansionPanelText',
-  props: {
-    ...makeComponentProps(),
-    ...makeLazyProps()
-  },
+  props: makeVExpansionPanelTextProps(),
   setup(props, _ref) {
     let {
       slots
@@ -14581,20 +14618,21 @@ const VExpansionPanelText = genericComponent()({
   }
 });
 
+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
   },
@@ -14637,8 +14675,7 @@ const VExpansionPanel = genericComponent()({
           '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: () => [createVNode("div", {
           "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
@@ -14665,42 +14702,43 @@ const VExpansionPanel = genericComponent()({
 
 // 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,
@@ -14871,25 +14909,26 @@ const VFileInput = genericComponent()({
   }
 });
 
+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
@@ -14910,7 +14949,7 @@ const VFooter = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    const autoHeight = ref(32);
+    const autoHeight = shallowRef(32);
     const {
       resizeRef
     } = useResizeObserver(entries => {
@@ -14940,12 +14979,13 @@ const VFooter = genericComponent()({
 
 // 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
@@ -14992,24 +15032,28 @@ const VForm = genericComponent()({
   }
 });
 
+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(() => createVNode(props.tag, {
       "class": ['v-container', {
         'v-container--fluid': props.fluid
-      }, props.class],
+      }, rtlClasses.value, props.class],
       "style": props.style
     }, slots));
     return {};
@@ -15078,32 +15122,33 @@ function breakpointClass$1(type, prop, val) {
   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
@@ -15196,32 +15241,33 @@ function breakpointClass(type, prop, val) {
   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
@@ -15257,16 +15303,17 @@ const VRow = genericComponent()({
 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
   },
@@ -15290,16 +15337,17 @@ const VHover = genericComponent()({
 });
 
 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
   },
@@ -15367,12 +15415,13 @@ const VItem = genericComponent()({
 
 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
@@ -15398,21 +15447,22 @@ const VLayout = genericComponent()({
 
 // 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
@@ -15437,30 +15487,31 @@ const VLayoutItem = genericComponent()({
 
 // 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
   },
@@ -15494,18 +15545,19 @@ const VLazy = genericComponent()({
   }
 });
 
+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
@@ -15521,15 +15573,16 @@ const VLocaleProvider = genericComponent()({
   }
 });
 
+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
@@ -15554,14 +15607,18 @@ const VMain = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
 function useSticky(_ref) {
   let {
     rootEl,
     isSticky,
     layoutItemStyles
   } = _ref;
-  const isStuck = ref(false);
-  const stuckPosition = ref(0);
+  const isStuck = shallowRef(false);
+  const stuckPosition = shallowRef(0);
   const stickyStyles = computed(() => {
     const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
     return [isSticky.value ? {
@@ -15597,18 +15654,24 @@ function useSticky(_ref) {
     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;
   }
@@ -15755,9 +15818,9 @@ function useTouch(_ref) {
     getVelocity
   } = useVelocity();
   let maybeDragging = false;
-  const isDragging = ref(false);
-  const dragProgress = ref(0);
-  const offset = ref(0);
+  const isDragging = shallowRef(false);
+  const dragProgress = shallowRef(0);
+  const offset = 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);
@@ -15851,54 +15914,55 @@ function oops() {
 // 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
@@ -15937,7 +16001,7 @@ const VNavigationDrawer = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const rootEl = ref();
-    const isHovering = ref(false);
+    const isHovering = shallowRef(false);
     const width = computed(() => {
       return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
     });
@@ -16096,88 +16160,89 @@ function useRefs() {
 
 // 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,
@@ -16204,7 +16269,7 @@ const VPagination = genericComponent()({
     const {
       width
     } = useDisplay();
-    const maxButtons = ref(-1);
+    const maxButtons = shallowRef(-1);
     provideDefaults(undefined, {
       scoped: true
     });
@@ -16416,15 +16481,16 @@ const VPagination = genericComponent()({
 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
@@ -16498,14 +16564,15 @@ const VParallax = genericComponent()({
 
 // 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
@@ -16517,33 +16584,34 @@ const VRadio = genericComponent()({
     }), 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
   },
@@ -16609,18 +16677,19 @@ const VRadioGroup = genericComponent()({
 
 // 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,
@@ -16635,6 +16704,9 @@ const VRangeSlider = genericComponent()({
     const startThumbRef = ref();
     const stopThumbRef = ref();
     const inputRef = ref();
+    const {
+      rtlClasses
+    } = useRtl();
     function getActiveThumb(e) {
       if (!startThumbRef.value || !stopThumbRef.value) return;
       const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
@@ -16705,7 +16777,7 @@ const VRangeSlider = genericComponent()({
           '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, {
@@ -16811,50 +16883,51 @@ const VRangeSlider = genericComponent()({
 
 // 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
   },
@@ -16872,7 +16945,7 @@ const VRating = genericComponent()({
     const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length));
     const range = computed(() => createRange(Number(props.length), 1));
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
-    const hoverIndex = ref(-1);
+    const hoverIndex = shallowRef(-1);
     const itemState = computed(() => increments.value.map(value => {
       const isHovering = props.hover && hoverIndex.value > -1;
       const isFilled = normalizedValue.value >= value;
@@ -17091,10 +17164,10 @@ const VSlideGroup = genericComponent()({
       mobile
     } = useDisplay();
     const group = useGroup(props, props.symbol);
-    const isOverflowing = ref(false);
-    const scrollOffset = ref(0);
-    const containerSize = ref(0);
-    const contentSize = ref(0);
+    const isOverflowing = shallowRef(false);
+    const scrollOffset = shallowRef(0);
+    const containerSize = shallowRef(0);
+    const contentSize = shallowRef(0);
     const isHorizontal = computed(() => props.direction === 'horizontal');
     const {
       resizeRef: containerRef,
@@ -17150,7 +17223,7 @@ const VSlideGroup = genericComponent()({
         });
       });
     }
-    const disableTransition = ref(false);
+    const disableTransition = shallowRef(false);
     let startTouch = 0;
     let startOffset = 0;
     function onTouchstart(e) {
@@ -17179,7 +17252,7 @@ const VSlideGroup = genericComponent()({
       if (!containerRef.value) return;
       containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
     }
-    const isFocused = ref(false);
+    const isFocused = shallowRef(false);
     function onFocusin(e) {
       isFocused.value = true;
       if (!isOverflowing.value || !contentRef.value) return;
@@ -17366,9 +17439,7 @@ const VSlideGroup = genericComponent()({
 
 const VSlideGroupItem = genericComponent()({
   name: 'VSlideGroupItem',
-  props: {
-    ...makeGroupItemProps()
-  },
+  props: makeGroupItemProps(),
   emits: {
     'group:selected': val => true
   },
@@ -17386,26 +17457,27 @@ const VSlideGroupItem = genericComponent()({
   }
 });
 
+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
   },
@@ -17502,20 +17574,21 @@ const VSnackbar = genericComponent()({
 
 // 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,
@@ -17625,19 +17698,20 @@ const VSwitch = genericComponent()({
   }
 });
 
+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
@@ -17664,7 +17738,7 @@ const VSystemBar = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: ref('top'),
+      position: shallowRef('top'),
       layoutSize: height,
       elementSize: height,
       active: computed(() => true),
@@ -17682,21 +17756,24 @@ const VSystemBar = genericComponent()({
 
 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,
@@ -17707,7 +17784,7 @@ const VTab = genericComponent()({
       textColorStyles: sliderColorStyles
     } = useTextColor(props, 'sliderColor');
     const isHorizontal = computed(() => props.direction === 'horizontal');
-    const isSelected = ref(false);
+    const isSelected = shallowRef(false);
     const rootEl = ref();
     const sliderEl = ref();
     function updateSlider(_ref2) {
@@ -17782,34 +17859,35 @@ function parseItems(items) {
     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
   },
@@ -17861,18 +17939,19 @@ const VTabs = genericComponent()({
   }
 });
 
+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
@@ -17907,36 +17986,37 @@ const VTable = genericComponent()({
 
 // 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,
@@ -17969,7 +18049,7 @@ const VTextarea = genericComponent()({
     }
     const vInputRef = ref();
     const vFieldRef = ref();
-    const controlHeight = ref('');
+    const controlHeight = shallowRef('');
     const textareaRef = ref();
     const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
@@ -18138,14 +18218,15 @@ const VTextarea = genericComponent()({
   }
 });
 
+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
@@ -18167,46 +18248,47 @@ const VThemeProvider = genericComponent()({
 
 // 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
@@ -18217,6 +18299,9 @@ const VTimeline = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
+    const {
+      rtlClasses
+    } = useRtl();
     provideDefaults({
       VTimelineDivider: {
         lineColor: toRef(props, 'lineColor')
@@ -18246,7 +18331,7 @@ const VTimeline = genericComponent()({
     useRender(() => 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]
@@ -18255,20 +18340,21 @@ const VTimeline = genericComponent()({
   }
 });
 
+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
@@ -18331,27 +18417,28 @@ const VTimelineDivider = genericComponent()({
 
 // 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
@@ -18359,7 +18446,7 @@ const VTimelineItem = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    const dotSize = ref(0);
+    const dotSize = shallowRef(0);
     const dotRef = ref();
     watch(dotRef, newValue => {
       if (!newValue) return;
@@ -18397,28 +18484,57 @@ const VTimelineItem = genericComponent()({
   }
 });
 
+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: toRef(props, 'color'),
+        height: 'inherit',
+        variant: toRef(props, 'variant')
+      }
+    });
+    useRender(() => 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
   },
@@ -18481,9 +18597,7 @@ const VTooltip = genericComponent()({
 // Composables
 const VValidation = genericComponent()({
   name: 'VValidation',
-  props: {
-    ...makeValidationProps()
-  },
+  props: makeValidationProps(),
   emits: {
     'update:modelValue': val => true
   },
@@ -18496,12 +18610,13 @@ const VValidation = genericComponent()({
   }
 });
 
+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
   },
@@ -18537,23 +18652,24 @@ const VVirtualScrollItem = genericComponent()({
 
 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 = ref(0);
-    const baseItemHeight = ref(props.itemHeight);
+    const first = shallowRef(0);
+    const baseItemHeight = shallowRef(props.itemHeight);
     const itemHeight = computed({
       get: () => parseInt(baseItemHeight.value ?? 0, 10),
       set(val) {
@@ -19427,7 +19543,7 @@ function createVuetify$1() {
     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
@@ -19447,7 +19563,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.2.2";
+const version = "3.2.4";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };