vuetify 3.1.16 → 3.2.0

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.1.16
+* Vuetify v3.2.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, withModifiers, onUpdated } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, onScopeDispose, effectScope, shallowRef, inject as inject$1, unref, provide, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -167,11 +167,11 @@ const keyValues = Object.freeze({
 function keys(o) {
   return Object.keys(o);
 }
-function pick(obj, paths) {
+function pick(obj, paths, exclude) {
   const found = Object.create(null);
   const rest = Object.create(null);
   for (const key in obj) {
-    if (paths.some(path => path instanceof RegExp ? path.test(key) : path === key)) {
+    if (paths.some(path => path instanceof RegExp ? path.test(key) : path === key) && !exclude?.some(path => path === key)) {
       found[key] = obj[key];
     } else {
       rest[key] = obj[key];
@@ -882,44 +882,6 @@ function getContrast(first, second) {
   return (light + 0.05) / (dark + 0.05);
 }
 
-// Utilities
-function getCurrentInstance(name, message) {
-  const vm = getCurrentInstance$1();
-  if (!vm) {
-    throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
-  }
-  return vm;
-}
-function getCurrentInstanceName() {
-  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
-  const vm = getCurrentInstance(name).type;
-  return toKebabCase(vm?.aliasName || vm?.name);
-}
-let _uid = 0;
-let _map = new WeakMap();
-function getUid() {
-  const vm = getCurrentInstance('getUid');
-  if (_map.has(vm)) return _map.get(vm);else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
-}
-getUid.reset = () => {
-  _uid = 0;
-  _map = new WeakMap();
-};
-
-function injectSelf(key) {
-  const {
-    provides
-  } = getCurrentInstance('injectSelf');
-  if (provides && key in provides) {
-    // TS doesn't allow symbol as index type
-    return provides[key];
-  }
-}
-
 /**
  * Creates a factory function for props definitions.
  * This is used to define props in a composable then override
@@ -973,17 +935,54 @@ function propsFactory(props, source) {
 
 // Types
 
+// Composables
+const makeComponentProps = propsFactory({
+  class: [String, Array],
+  style: {
+    type: [String, Array, Object],
+    default: null
+  }
+}, 'component');
+
+function useToggleScope(source, fn) {
+  let scope;
+  function start() {
+    scope = effectScope();
+    scope.run(() => fn.length ? fn(() => {
+      scope?.stop();
+      start();
+    }) : fn());
+  }
+  watch(source, active => {
+    if (active && !scope) {
+      start();
+    } else if (!active) {
+      scope?.stop();
+      scope = undefined;
+    }
+  }, {
+    immediate: true
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}
+
+// Composables
+
+// Types
+
 const DefaultsSymbol = Symbol.for('vuetify:defaults');
 function createDefaults(options) {
   return ref(options);
 }
-function useDefaults() {
+function injectDefaults() {
   const defaults = inject$1(DefaultsSymbol);
   if (!defaults) throw new Error('[Vuetify] Could not find defaults instance');
   return defaults;
 }
 function provideDefaults(defaults, options) {
-  const injectedDefaults = useDefaults();
+  const injectedDefaults = injectDefaults();
   const providedDefaults = ref(defaults);
   const newDefaults = computed(() => {
     const disabled = unref(options?.disabled);
@@ -1010,41 +1009,58 @@ function provideDefaults(defaults, options) {
   provide(DefaultsSymbol, newDefaults);
   return newDefaults;
 }
-
-function useToggleScope(source, fn) {
-  let scope;
-  function start() {
-    scope = effectScope();
-    scope.run(() => fn.length ? fn(() => {
-      scope?.stop();
-      start();
-    }) : fn());
-  }
-  watch(source, active => {
-    if (active && !scope) {
-      start();
-    } else if (!active) {
-      scope?.stop();
-      scope = undefined;
+function propIsDefined(vnode, prop) {
+  return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
+}
+function useDefaults() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let name = arguments.length > 1 ? arguments[1] : undefined;
+  let defaults = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : injectDefaults();
+  const vm = getCurrentInstance('useDefaults');
+  name = name ?? vm.type.name ?? vm.type.__name;
+  if (!name) {
+    throw new Error('[Vuetify] Could not determine component name');
+  }
+  const componentDefaults = computed(() => defaults.value?.[props._as ?? name]);
+  const _props = new Proxy(props, {
+    get(target, prop) {
+      const propValue = Reflect.get(target, prop);
+      if (prop === 'class' || prop === 'style') {
+        return [componentDefaults.value?.[prop], propValue].filter(v => v != null);
+      } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
+        return componentDefaults.value?.[prop] ?? defaults.value?.global?.[prop] ?? propValue;
+      }
+      return propValue;
     }
-  }, {
-    immediate: true
   });
-  onScopeDispose(() => {
-    scope?.stop();
+  const _subcomponentDefaults = shallowRef();
+  watchEffect(() => {
+    if (componentDefaults.value) {
+      const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
+        let [key] = _ref;
+        return key.startsWith(key[0].toUpperCase());
+      });
+      if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
+    }
   });
+  function provideSubDefaults() {
+    // If subcomponent defaults are provided, override any
+    // subcomponents provided by the component's setup function.
+    // This uses injectSelf so must be done after the original setup to work.
+    useToggleScope(_subcomponentDefaults, () => {
+      provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
+    });
+  }
+  return {
+    props: _props,
+    provideSubDefaults
+  };
 }
 
 // Utils
 
 // Types
 
-function propIsDefined(vnode, prop) {
-  return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
-}
-
-// No props
-
 // Implementation
 function defineComponent(options) {
   options._setup = options._setup ?? options.setup;
@@ -1056,43 +1072,20 @@ function defineComponent(options) {
     options.props = propsFactory(options.props ?? {}, toKebabCase(options.name))();
     const propKeys = Object.keys(options.props);
     options.filterProps = function filterProps(props) {
-      return pick(props, propKeys);
+      return pick(props, propKeys, ['class', 'style']);
     };
     options.props._as = String;
     options.setup = function setup(props, ctx) {
-      const defaults = useDefaults();
+      const defaults = injectDefaults();
 
       // Skip props proxy if defaults are not provided
       if (!defaults.value) return options._setup(props, ctx);
-      const vm = getCurrentInstance$1();
-      const componentDefaults = computed(() => defaults.value[props._as ?? options.name]);
-      const _props = new Proxy(props, {
-        get(target, prop) {
-          const propValue = Reflect.get(target, prop);
-          if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-            return componentDefaults.value?.[prop] ?? defaults.value.global?.[prop] ?? propValue;
-          }
-          return propValue;
-        }
-      });
-      const _subcomponentDefaults = shallowRef();
-      watchEffect(() => {
-        if (componentDefaults.value) {
-          const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
-            let [key] = _ref;
-            return key.startsWith(key[0].toUpperCase());
-          });
-          if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
-        }
-      });
+      const {
+        props: _props,
+        provideSubDefaults
+      } = useDefaults(props, props._as ?? options.name, defaults);
       const setupBindings = options._setup(_props, ctx);
-
-      // If subcomponent defaults are provided, override any
-      // subcomponents provided by the component's setup function.
-      // This uses injectSelf so must be done after the original setup to work.
-      useToggleScope(_subcomponentDefaults, () => {
-        provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
-      });
+      provideSubDefaults();
       return setupBindings;
     };
   }
@@ -1117,15 +1110,19 @@ function createSimpleFunctional(klass) {
       tag: {
         type: String,
         default: tag
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      return () => h(props.tag, {
-        class: klass
-      }, slots.default?.());
+      return () => {
+        return h(props.tag, {
+          class: [klass, props.class],
+          style: props.style
+        }, slots.default?.());
+      };
     }
   });
 }
@@ -1158,6 +1155,34 @@ const standardEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';
 const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering
 const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
+// Utilities
+function getCurrentInstance(name, message) {
+  const vm = getCurrentInstance$1();
+  if (!vm) {
+    throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
+  }
+  return vm;
+}
+function getCurrentInstanceName() {
+  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
+  const vm = getCurrentInstance(name).type;
+  return toKebabCase(vm?.aliasName || vm?.name);
+}
+let _uid = 0;
+let _map = new WeakMap();
+function getUid() {
+  const vm = getCurrentInstance('getUid');
+  if (_map.has(vm)) return _map.get(vm);else {
+    const uid = _uid++;
+    _map.set(vm, uid);
+    return uid;
+  }
+}
+getUid.reset = () => {
+  _uid = 0;
+  _map = new WeakMap();
+};
+
 function getScrollParent(el) {
   while (el) {
     if (hasScrollbar(el)) return el;
@@ -1181,6 +1206,16 @@ function hasScrollbar(el) {
   return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
 }
 
+function injectSelf(key) {
+  const {
+    provides
+  } = getCurrentInstance('injectSelf');
+  if (provides && key in provides) {
+    // TS doesn't allow symbol as index type
+    return provides[key];
+  }
+}
+
 function isFixedPosition(el) {
   while (el) {
     if (window.getComputedStyle(el).position === 'fixed') {
@@ -1961,7 +1996,11 @@ var en = {
       item: 'Rating {0} of {1}'
     }
   },
-  loading: 'Loading...'
+  loading: 'Loading...',
+  infiniteScroll: {
+    loadMore: 'Load more',
+    empty: 'No more'
+  }
 };
 
 const LANG_PREFIX = '$vuetify.';
@@ -2159,6 +2198,7 @@ function useRtl() {
 const VApp = genericComponent()({
   name: 'VApp',
   props: {
+    ...makeComponentProps(),
     ...makeLayoutProps({
       fullHeight: true
     }),
@@ -2181,8 +2221,8 @@ const VApp = genericComponent()({
     } = useRtl();
     useRender(() => createVNode("div", {
       "ref": layoutRef,
-      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value],
-      "style": layoutStyles.value
+      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
+      "style": [layoutStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-application__wrap"
     }, [slots.default?.()])]));
@@ -2607,6 +2647,7 @@ const VResponsive = genericComponent()({
   props: {
     aspectRatio: [String, Number],
     contentClass: String,
+    ...makeComponentProps(),
     ...makeDimensionProps()
   },
   setup(props, _ref) {
@@ -2620,8 +2661,8 @@ const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode("div", {
-      "class": "v-responsive",
-      "style": dimensionStyles.value
+      "class": ['v-responsive', props.class],
+      "style": [dimensionStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-responsive__sizer",
       "style": aspectStyles.value
@@ -2739,6 +2780,7 @@ const VImg = genericComponent()({
     },
     srcset: String,
     width: [String, Number],
+    ...makeComponentProps(),
     ...makeTransitionProps()
   },
   emits: {
@@ -2926,10 +2968,10 @@ const VImg = genericComponent()({
     useRender(() => withDirectives(createVNode(VResponsive, {
       "class": ['v-img', {
         'v-img--booting': !isBooted.value
-      }],
-      "style": {
+      }, props.class],
+      "style": [{
         width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-      },
+      }, props.style],
       "aspectRatio": aspectRatio.value,
       "aria-label": props.alt,
       "role": props.alt ? 'img' : undefined
@@ -2964,10 +3006,9 @@ const makeTagProps = propsFactory({
   }
 }, 'tag');
 
-// Types
-
 const makeVToolbarTitleProps = propsFactory({
   text: String,
+  ...makeComponentProps(),
   ...makeTagProps()
 }, 'v-toolbar-title');
 const VToolbarTitle = genericComponent()({
@@ -2980,7 +3021,8 @@ const VToolbarTitle = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || slots.text || props.text);
       return createVNode(props.tag, {
-        "class": "v-toolbar-title"
+        "class": ['v-toolbar-title', props.class],
+        "style": props.style
       }, {
         default: () => [hasText && createVNode("div", {
           "class": "v-toolbar-title__placeholder"
@@ -3161,6 +3203,7 @@ const makeVToolbarProps = propsFactory({
   image: String,
   title: String,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
   ...makeTagProps({
@@ -3211,8 +3254,8 @@ 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],
-        "style": [backgroundColorStyles.value]
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style]
       }, {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -3279,6 +3322,98 @@ const VToolbar = genericComponent()({
 
 // Utilities
 
+// Types
+
+// Composables
+const makeScrollProps = propsFactory({
+  scrollTarget: {
+    type: String
+  },
+  scrollThreshold: {
+    type: [String, Number]
+  }
+}, 'scroll');
+function useScroll(props) {
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    thresholdMetCallback,
+    scrollThreshold,
+    canScroll
+  } = 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 computedScrollThreshold = computed(() => {
+    return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+  });
+  const onScroll = () => {
+    const targetEl = target.value;
+    if (!targetEl || canScroll && !canScroll.value) return;
+    previousScroll = currentScroll.value;
+    currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    isScrollingUp.value = currentScroll.value < previousScroll;
+    currentThreshold.value = Math.abs(currentScroll.value - computedScrollThreshold.value);
+  };
+  watch(isScrollingUp, () => {
+    savedScroll.value = savedScroll.value || currentScroll.value;
+  });
+  watch(isScrollActive, () => {
+    savedScroll.value = 0;
+  });
+  onMounted(() => {
+    watch(() => props.scrollTarget, scrollTarget => {
+      const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
+      if (!newTarget) {
+        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, getCurrentInstance$1());
+        return;
+      }
+      if (newTarget === target.value) return;
+      target.value?.removeEventListener('scroll', onScroll);
+      target.value = newTarget;
+      target.value.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    }, {
+      immediate: true
+    });
+  });
+  onBeforeUnmount(() => {
+    target.value?.removeEventListener('scroll', onScroll);
+  });
+  thresholdMetCallback && watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
+    thresholdMet && thresholdMetCallback({
+      currentThreshold: currentThreshold.value,
+      isScrollingUp: isScrollingUp.value,
+      savedScroll
+    });
+  }, {
+    immediate: true
+  });
+
+  // Do we need this? If yes - seems that
+  // there's no need to expose onScroll
+  canScroll && watch(canScroll, onScroll, {
+    immediate: true
+  });
+  return {
+    computedScrollThreshold,
+    currentScroll,
+    currentThreshold,
+    isScrollActive,
+    // required only for testing
+    // probably can be removed
+    // later (2 chars chlng)
+    isScrollingUp,
+    savedScroll
+  };
+}
+
+// Utilities
+
 // Composables
 function useSsrBoot() {
   const isBooted = ref(false);
@@ -3301,13 +3436,7 @@ function useSsrBoot() {
 const VAppBar = genericComponent()({
   name: 'VAppBar',
   props: {
-    // TODO: Implement scrolling techniques
-    // hideOnScroll: Boolean
-    // invertedScroll: Boolean
-    // collapseOnScroll: Boolean
-    // elevateOnScroll: Boolean
-    // shrinkOnScroll: Boolean
-    // fadeImageOnScroll: Boolean
+    scrollBehavior: String,
     modelValue: {
       type: Boolean,
       default: true
@@ -3319,6 +3448,7 @@ const VAppBar = genericComponent()({
     },
     ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
+    ...makeScrollProps(),
     height: {
       type: [Number, String],
       default: 64
@@ -3333,11 +3463,63 @@ const VAppBar = genericComponent()({
     } = _ref;
     const vToolbarRef = ref();
     const isActive = useProxiedModel(props, 'modelValue');
+    const scrollBehavior = computed(() => {
+      const behavior = new Set(props.scrollBehavior?.split(' ') ?? []);
+      return {
+        hide: behavior.has('hide'),
+        // fullyHide: behavior.has('fully-hide'),
+        inverted: behavior.has('inverted'),
+        collapse: behavior.has('collapse'),
+        elevate: behavior.has('elevate'),
+        fadeImage: behavior.has('fade-image')
+        // shrink: behavior.has('shrink'),
+      };
+    });
+
+    const canScroll = computed(() => {
+      const behavior = scrollBehavior.value;
+      return behavior.hide ||
+      // behavior.fullyHide ||
+      behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage ||
+      // behavior.shrink ||
+      !isActive.value;
+    });
+    const {
+      currentScroll,
+      currentThreshold,
+      computedScrollThreshold,
+      isScrollingUp
+    } = useScroll(props, {
+      canScroll
+    });
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
+    const scrollRatio = computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+    const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
+      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
       const height = vToolbarRef.value?.contentHeight ?? 0;
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
+    function setActive() {
+      const val = currentScroll.value;
+      if (scrollBehavior.value.hide) {
+        if (scrollBehavior.value.inverted) {
+          isActive.value = val > computedScrollThreshold.value;
+        } else {
+          isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+        }
+      } else if (scrollBehavior.value.inverted) {
+        isActive.value = currentScroll.value === 0;
+      } else {
+        isActive.value = true;
+      }
+    }
+    watch(currentScroll, setActive, {
+      immediate: true
+    });
+    watch(scrollBehavior, setActive);
     const {
       ssrBootStyles
     } = useSsrBoot();
@@ -3348,7 +3530,7 @@ const VAppBar = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'location'),
       layoutSize: height,
-      elementSize: height,
+      elementSize: ref(undefined),
       active: isActive,
       absolute: toRef(props, 'absolute')
     });
@@ -3358,13 +3540,17 @@ const VAppBar = genericComponent()({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
           'v-app-bar--bottom': props.location === 'bottom'
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           ...layoutItemStyles.value,
+          '--v-toolbar-image-opacity': opacity.value,
           height: undefined,
           ...ssrBootStyles.value
-        }
-      }, toolbarProps), slots);
+        }, props.style]
+      }, toolbarProps, {
+        "collapse": isCollapsed.value,
+        "flat": isFlat.value
+      }), slots);
     });
     return {};
   }
@@ -3447,6 +3633,7 @@ function useVariant(props) {
 const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
@@ -3489,7 +3676,8 @@ const VBtnGroup = genericComponent()({
       return createVNode(props.tag, {
         "class": ['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value]
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": props.style
       }, slots);
     });
   }
@@ -3722,8 +3910,10 @@ const VBtnToggle = genericComponent()({
     useRender(() => {
       const [btnGroupProps] = VBtnGroup.filterProps(props);
       return createVNode(VBtnGroup, mergeProps({
-        "class": "v-btn-toggle"
-      }, btnGroupProps), {
+        "class": ['v-btn-toggle', props.class]
+      }, btnGroupProps, {
+        "style": props.style
+      }), {
         default: () => [slots.default?.({
           isSelected,
           next,
@@ -3794,7 +3984,7 @@ const mdi = {
 
 // Types
 
-const IconValue = [String, Function, Object];
+const IconValue = [String, Function, Object, Array];
 const IconSymbol = Symbol.for('vuetify:icons');
 const makeIconProps = propsFactory({
   icon: {
@@ -3814,8 +4004,9 @@ const VComponentIcon = genericComponent()({
       slots
     } = _ref;
     return () => {
+      const Icon = props.icon;
       return createVNode(props.tag, null, {
-        default: () => [props.icon ? createVNode(props.icon, null, null) : slots.default?.()]
+        default: () => [props.icon ? createVNode(Icon, null, null) : slots.default?.()]
       });
     };
   }
@@ -3838,7 +4029,12 @@ const VSvgIcon = defineComponent({
           "viewBox": "0 0 24 24",
           "role": "img",
           "aria-hidden": "true"
-        }, [createVNode("path", {
+        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createVNode("path", {
+          "d": path[0],
+          "fill-opacity": path[1]
+        }, null) : createVNode("path", {
+          "d": path
+        }, null)) : createVNode("path", {
           "d": props.icon
         }, null)])]
       });
@@ -3903,7 +4099,12 @@ const useIcon = props => {
       }
     }
     if (!icon) throw new Error(`Could not find aliased icon "${iconAlias}"`);
-    if (typeof icon !== 'string') {
+    if (Array.isArray(icon)) {
+      return {
+        component: VSvgIcon,
+        icon
+      };
+    } else if (typeof icon !== 'string') {
       return {
         component: VComponentIcon,
         icon
@@ -3960,6 +4161,7 @@ const makeVIconProps = propsFactory({
   start: Boolean,
   end: Boolean,
   icon: IconValue,
+  ...makeComponentProps(),
   ...makeSizeProps(),
   ...makeTagProps({
     tag: 'i'
@@ -4002,12 +4204,12 @@ const VIcon = genericComponent()({
         'v-icon--clickable': !!attrs.onClick,
         'v-icon--start': props.start,
         'v-icon--end': props.end
-      }],
+      }, props.class],
       "style": [!sizeClasses.value ? {
         fontSize: convertToUnit(props.size),
         height: convertToUnit(props.size),
         width: convertToUnit(props.size)
-      } : undefined, textColorStyles.value],
+      } : undefined, textColorStyles.value, props.style],
       "role": attrs.onClick ? 'button' : undefined,
       "aria-hidden": !attrs.onClick
     }, {
@@ -4018,14 +4220,14 @@ const VIcon = genericComponent()({
 });
 
 // Utilities
-function useIntersectionObserver(callback) {
+function useIntersectionObserver(callback, options) {
   const intersectionRef = ref();
   const isIntersecting = ref(false);
   if (SUPPORTS_INTERSECTION) {
     const observer = new IntersectionObserver(entries => {
       callback?.(entries, observer);
       isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
-    });
+    }, options);
     onBeforeUnmount(() => {
       observer.disconnect();
     });
@@ -4065,6 +4267,7 @@ const VProgressCircular = genericComponent()({
       type: [Number, String],
       default: 4
     },
+    ...makeComponentProps(),
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'div'
@@ -4120,8 +4323,8 @@ const VProgressCircular = genericComponent()({
         'v-progress-circular--indeterminate': !!props.indeterminate,
         'v-progress-circular--visible': isIntersecting.value,
         'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
-      }, themeClasses.value, sizeClasses.value, textColorClasses.value],
-      "style": [sizeStyles.value, textColorStyles.value],
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class],
+      "style": [sizeStyles.value, textColorStyles.value, props.style],
       "role": "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -4540,6 +4743,7 @@ const VProgressLinear = genericComponent()({
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
     }),
@@ -4611,14 +4815,14 @@ 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],
-      "style": {
+      }, roundedClasses.value, themeClasses.value, props.class],
+      "style": [{
         bottom: props.location === 'bottom' ? 0 : undefined,
         top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...locationStyles.value
-      },
+      }, props.style],
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -4827,8 +5031,9 @@ const makeVBtnProps = propsFactory({
     type: Boolean,
     default: true
   },
+  text: String,
   ...makeBorderProps(),
-  ...makeRoundedProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
@@ -4836,6 +5041,7 @@ const makeVBtnProps = propsFactory({
   ...makeLoaderProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
+  ...makeRoundedProps(),
   ...makeRouterProps(),
   ...makeSizeProps(),
   ...makeTagProps({
@@ -4933,8 +5139,8 @@ const VBtn = genericComponent()({
           'v-btn--icon': !!props.icon,
           'v-btn--loading': props.loading,
           'v-btn--stacked': props.stacked
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
         "onClick": e => {
@@ -4972,7 +5178,9 @@ const VBtn = genericComponent()({
               icon: props.icon
             }
           }
-        }, slots.default)]), !props.icon && hasAppend && createVNode("span", {
+        }, {
+          default: () => [slots.default?.() ?? props.text]
+        })]), !props.icon && hasAppend && createVNode("span", {
           "key": "append",
           "class": "v-btn__append"
         }, [!slots.append ? createVNode(VIcon, {
@@ -5009,15 +5217,17 @@ const VAppBarNavIcon = genericComponent()({
     icon: {
       type: IconValue,
       default: '$menu'
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
     useRender(() => createVNode(VBtn, {
-      "class": "v-app-bar-nav-icon",
-      "icon": props.icon
+      "class": ['v-app-bar-nav-icon', props.class],
+      "icon": props.icon,
+      "style": props.style
     }, slots));
     return {};
   }
@@ -5025,9 +5235,12 @@ const VAppBarNavIcon = genericComponent()({
 
 const VToolbarItems = genericComponent()({
   name: 'VToolbarItems',
-  props: makeVariantProps({
-    variant: 'text'
-  }),
+  props: {
+    ...makeComponentProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  },
   setup(props, _ref) {
     let {
       slots
@@ -5040,7 +5253,8 @@ const VToolbarItems = genericComponent()({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-toolbar-items"
+      "class": ['v-toolbar-items', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -5102,6 +5316,7 @@ const VAlert = genericComponent()({
       type: String,
       validator: val => allowedTypes.includes(val)
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -5184,8 +5399,8 @@ const VAlert = genericComponent()({
           [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
         }, {
           'v-alert--prominent': props.prominent
-        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value],
+        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
         "role": "alert"
       }, {
         default: () => [genOverlays(false, 'v-alert'), props.border && createVNode("div", {
@@ -5279,6 +5494,7 @@ const VLabel = genericComponent()({
   props: {
     text: String,
     clickable: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps()
   },
   setup(props, _ref) {
@@ -5288,7 +5504,8 @@ const VLabel = genericComponent()({
     useRender(() => createVNode("label", {
       "class": ['v-label', {
         'v-label--clickable': props.clickable
-      }]
+      }, props.class],
+      "style": props.style
     }, [props.text, slots.default?.()]));
     return {};
   }
@@ -5297,7 +5514,8 @@ const VLabel = genericComponent()({
 const VFieldLabel = genericComponent()({
   name: 'VFieldLabel',
   props: {
-    floating: Boolean
+    floating: Boolean,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -5306,7 +5524,8 @@ const VFieldLabel = genericComponent()({
     useRender(() => createVNode(VLabel, {
       "class": ['v-field-label', {
         'v-field-label--floating': props.floating
-      }],
+      }, props.class],
+      "style": props.style,
       "aria-hidden": props.floating || undefined
     }, slots));
     return {};
@@ -5346,7 +5565,7 @@ function useFocus(props) {
 
 // Types
 
-const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'plain'];
+const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
 const makeVFieldProps = propsFactory({
   appendInnerIcon: IconValue,
   bgColor: String,
@@ -5357,9 +5576,11 @@ const makeVFieldProps = propsFactory({
   },
   active: Boolean,
   color: String,
+  baseColor: String,
   dirty: Boolean,
   disabled: Boolean,
   error: Boolean,
+  flat: Boolean,
   label: String,
   persistentClear: Boolean,
   prependInnerIcon: IconValue,
@@ -5373,8 +5594,10 @@ const makeVFieldProps = propsFactory({
   'onClick:clear': EventProp(),
   'onClick:appendInner': EventProp(),
   'onClick:prependInner': EventProp(),
-  ...makeThemeProps(),
-  ...makeLoaderProps()
+  ...makeComponentProps(),
+  ...makeLoaderProps(),
+  ...makeRoundedProps(),
+  ...makeThemeProps()
 }, 'v-field');
 const VField = genericComponent()({
   name: 'VField',
@@ -5409,6 +5632,9 @@ const VField = genericComponent()({
     const {
       InputIcon
     } = useInputIcon(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
     const isActive = computed(() => props.dirty || props.active);
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
     const uid = getUid();
@@ -5425,7 +5651,7 @@ const VField = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(computed(() => {
-      return isActive.value && isFocused.value && !props.error && !props.disabled ? props.color : undefined;
+      return props.error || props.disabled ? undefined : isActive.value && isFocused.value ? props.color : props.baseColor;
     }));
     watch(isActive, val => {
       if (hasLabel.value) {
@@ -5494,6 +5720,7 @@ const VField = genericComponent()({
           'v-field--disabled': props.disabled,
           'v-field--dirty': props.dirty,
           'v-field--error': props.error,
+          'v-field--flat': props.flat,
           'v-field--has-background': !!props.bgColor,
           'v-field--persistent-clear': props.persistentClear,
           'v-field--prepended': hasPrepend,
@@ -5501,8 +5728,8 @@ 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],
-        "style": [backgroundColorStyles.value, textColorStyles.value],
+        }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, textColorStyles.value, props.style],
         "onClick": onClick
       }, attrs), [createVNode("div", {
         "class": "v-field__overlay"
@@ -5521,7 +5748,7 @@ const VField = genericComponent()({
       }, null), slots['prepend-inner']?.(slotProps.value)]), createVNode("div", {
         "class": "v-field__field",
         "data-no-activator": ""
-      }, [['solo', 'filled'].includes(props.variant) && hasLabel.value && createVNode(VFieldLabel, {
+      }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && createVNode(VFieldLabel, {
         "key": "floating-label",
         "ref": floatingLabelRef,
         "class": [textColorClasses.value],
@@ -5590,7 +5817,7 @@ const VField = genericComponent()({
 });
 // TODO: this is kinda slow, might be better to implicitly inherit props instead
 function filterFieldProps(attrs) {
-  const keys = Object.keys(VField.props).filter(k => !isOn(k));
+  const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style');
   return pick(attrs, keys);
 }
 
@@ -5605,6 +5832,7 @@ const VMessages = genericComponent()({
       type: [Array, String],
       default: () => []
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition,
@@ -5625,8 +5853,8 @@ const VMessages = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
-      "class": ['v-messages', textColorClasses.value],
-      "style": textColorStyles.value,
+      "class": ['v-messages', textColorClasses.value, props.class],
+      "style": [textColorStyles.value, props.style],
       "role": "alert",
       "aria-live": "polite"
     }, {
@@ -5922,6 +6150,7 @@ const makeVInputProps = propsFactory({
   },
   'onClick:prepend': EventProp(),
   'onClick:append': EventProp(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeValidationProps()
 }, 'v-input');
@@ -5989,7 +6218,8 @@ const VInput = genericComponent()({
       const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return createVNode("div", {
-        "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
+        "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value, props.class],
+        "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
@@ -6032,6 +6262,7 @@ const VCounter = genericComponent()({
       type: [Number, String],
       default: 0
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition
@@ -6049,7 +6280,8 @@ const VCounter = genericComponent()({
       "transition": props.transition
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": "v-counter"
+        "class": ['v-counter', props.class],
+        "style": props.style
       }, [slots.default ? slots.default({
         counter: counter.value,
         max: props.max,
@@ -6252,7 +6484,8 @@ const VTextField = genericComponent()({
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }]
+        }, props.class],
+        "style": props.style
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
       }), {
@@ -6368,6 +6601,7 @@ const VSelectionControlGroup = genericComponent()({
       type: String,
       default: 'VSelectionControl'
     },
+    ...makeComponentProps(),
     ...makeSelectionControlGroupProps()
   },
   emits: {
@@ -6415,7 +6649,8 @@ const VSelectionControlGroup = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-selection-control-group', {
         'v-selection-control-group--inline': props.inline
-      }],
+      }, props.class],
+      "style": props.style,
       "role": props.type === 'radio' ? 'radiogroup' : undefined
     }, [slots.default?.()]));
     return {};
@@ -6429,6 +6664,7 @@ const makeSelectionControlProps = propsFactory({
   trueValue: null,
   falseValue: null,
   value: null,
+  ...makeComponentProps(),
   ...makeSelectionControlGroupProps()
 }, 'v-selection-control');
 function useSelectionControl(props) {
@@ -6543,8 +6779,10 @@ const VSelectionControl = genericComponent()({
           'v-selection-control--focused': isFocused.value,
           'v-selection-control--focus-visible': isFocusVisible.value,
           'v-selection-control--inline': props.inline
-        }, densityClasses.value]
-      }, rootAttrs), [createVNode("div", {
+        }, densityClasses.value, props.class]
+      }, rootAttrs, {
+        "style": props.style
+      }), [createVNode("div", {
         "class": ['v-selection-control__wrapper', textColorClasses.value],
         "style": textColorStyles.value
       }, [slots.default?.(), withDirectives(createVNode("div", {
@@ -6626,7 +6864,8 @@ const VCheckboxBtn = genericComponent()({
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
       "modelValue": model.value,
       "onUpdate:modelValue": [$event => model.value = $event, onChange],
-      "class": "v-checkbox-btn",
+      "class": ['v-checkbox-btn', props.class],
+      "style": props.style,
       "type": "checkbox",
       "inline": true,
       "falseIcon": falseIcon.value,
@@ -6666,10 +6905,11 @@ const VCheckbox = genericComponent()({
       const [inputProps, _1] = VInput.filterProps(props);
       const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
-        "class": "v-checkbox"
+        "class": ['v-checkbox', props.class]
       }, inputAttrs, inputProps, {
         "id": id.value,
-        "focused": isFocused.value
+        "focused": isFocused.value,
+        "style": props.style
       }), {
         ...slots,
         default: _ref2 => {
@@ -6700,6 +6940,7 @@ const makeVAvatarProps = propsFactory({
   end: Boolean,
   icon: IconValue,
   image: String,
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
   ...makeSizeProps(),
@@ -6738,8 +6979,8 @@ const VAvatar = genericComponent()({
       "class": ['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-      "style": [colorStyles.value, sizeStyles.value]
+      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+      "style": [colorStyles.value, sizeStyles.value, props.style]
     }, {
       default: () => [props.image ? createVNode(VImg, {
         "key": "image",
@@ -6767,6 +7008,7 @@ const VChipGroup = genericComponent()({
       type: Function,
       default: deepEqual
     },
+    ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-chip--selected'
     }),
@@ -6804,7 +7046,8 @@ const VChipGroup = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-chip-group', {
         'v-chip-group--column': props.column
-      }, themeClasses.value]
+      }, themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -6818,8 +7061,6 @@ const VChipGroup = genericComponent()({
   }
 });
 
-// Types
-
 const VChip = genericComponent()({
   name: 'VChip',
   directives: {
@@ -6864,6 +7105,7 @@ const VChip = genericComponent()({
     onClick: EventProp(),
     onClickOnce: EventProp(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeGroupItemProps(),
@@ -6956,8 +7198,8 @@ const VChip = genericComponent()({
           'v-chip--link': isClickable.value,
           'v-chip--filter': hasFilter,
           'v-chip--pill': props.pill
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value],
-        "style": [hasColor ? colorStyles.value : undefined],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, props.style],
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
         "href": link.href.value,
@@ -7066,6 +7308,7 @@ const VDivider = genericComponent()({
     length: [Number, String],
     thickness: [Number, String],
     vertical: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps()
   },
   setup(props, _ref) {
@@ -7094,8 +7337,8 @@ const VDivider = genericComponent()({
         'v-divider': true,
         'v-divider--inset': props.inset,
         'v-divider--vertical': props.vertical
-      }, themeClasses.value, textColorClasses.value],
-      "style": [dividerStyles.value, textColorStyles.value],
+      }, themeClasses.value, textColorClasses.value, props.class],
+      "style": [dividerStyles.value, textColorStyles.value, props.style],
       "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
       "role": `${attrs.role || 'separator'}`
     }, null));
@@ -7594,6 +7837,7 @@ const makeVListGroupProps = propsFactory({
   fluid: Boolean,
   subgroup: Boolean,
   value: null,
+  ...makeComponentProps(),
   ...makeTagProps()
 }, 'v-list-group');
 const VListGroup = genericComponent()({
@@ -7642,7 +7886,8 @@ const VListGroup = genericComponent()({
         'v-list-group--fluid': props.fluid,
         'v-list-group--subgroup': props.subgroup,
         'v-list-group--open': isOpen.value
-      }]
+      }, props.class],
+      "style": props.style
     }, {
       default: () => [slots.activator && createVNode(VDefaultsProvider, {
         "defaults": activatorDefaults.value
@@ -7709,6 +7954,7 @@ const VListItem = genericComponent()({
     onClick: EventProp(),
     onClickOnce: EventProp(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -7819,8 +8065,8 @@ const VListItem = genericComponent()({
           'v-list-item--nav': props.nav,
           'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
           [`${props.activeClass}`]: props.activeClass && isActive.value
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, props.style],
         "href": link.href.value,
         "tabindex": isClickable.value ? 0 : undefined,
         "onClick": onClick,
@@ -7913,6 +8159,7 @@ const VListSubheader = genericComponent()({
     inset: Boolean,
     sticky: Boolean,
     title: String,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -7929,10 +8176,10 @@ const VListSubheader = genericComponent()({
         "class": ['v-list-subheader', {
           'v-list-subheader--inset': props.inset,
           'v-list-subheader--sticky': props.sticky
-        }, textColorClasses.value],
-        "style": {
+        }, textColorClasses.value, props.class],
+        "style": [{
           textColorStyles
-        }
+        }, props.style]
       }, {
         default: () => [hasText && createVNode("div", {
           "class": "v-list-subheader__text"
@@ -8152,6 +8399,7 @@ const VList = genericComponent()({
       openStrategy: 'list'
     }),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -8263,8 +8511,8 @@ const VList = genericComponent()({
         "class": ['v-list', {
           'v-list--disabled': props.disabled,
           'v-list--nav': props.nav
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, dimensionStyles.value],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
         "role": "listbox",
         "aria-activedescendant": undefined,
         "onFocusin": onFocusin,
@@ -8292,6 +8540,7 @@ const VListItemAction = genericComponent()({
   props: {
     start: Boolean,
     end: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -8302,7 +8551,8 @@ const VListItemAction = genericComponent()({
       "class": ['v-list-item-action', {
         'v-list-item-action--start': props.start,
         'v-list-item-action--end': props.end
-      }]
+      }, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -8313,6 +8563,7 @@ const VListItemMedia = genericComponent()({
   props: {
     start: Boolean,
     end: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -8324,7 +8575,8 @@ const VListItemMedia = genericComponent()({
         "class": ['v-list-item-media', {
           'v-list-item-media--start': props.start,
           'v-list-item-media--end': props.end
-        }]
+        }, props.class],
+        "style": props.style
       }, slots);
     });
     return {};
@@ -9565,6 +9817,7 @@ const makeVOverlayProps = propsFactory({
     default: 2000
   },
   ...makeActivatorProps(),
+  ...makeComponentProps(),
   ...makeDimensionProps(),
   ...makeLazyProps(),
   ...makeLocationStrategyProps(),
@@ -9732,10 +9985,10 @@ const VOverlay = genericComponent()({
           'v-overlay--absolute': props.absolute || props.contained,
           'v-overlay--active': isActive.value,
           'v-overlay--contained': props.contained
-        }, themeClasses.value, rtlClasses.value],
+        }, themeClasses.value, rtlClasses.value, props.class],
         "style": [stackStyles.value, {
           top: convertToUnit(top.value)
-        }],
+        }, props.style],
         "ref": root
       }, scopeId, attrs), [createVNode(Scrim, mergeProps({
         "color": scrimColor,
@@ -9841,7 +10094,8 @@ const VMenu = genericComponent()({
       const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
-        "class": ['v-menu']
+        "class": ['v-menu', props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -10060,7 +10314,8 @@ const VSelect = genericComponent()({
           'v-select--chips': !!props.chips,
           [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-select--selected': model.value.length
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
         "placeholder": placeholder,
@@ -10503,7 +10758,8 @@ const VAutocomplete = genericComponent()({
           'v-autocomplete--selecting-index': selectionIndex.value > -1,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-autocomplete--selection-slot': !!slots.selection
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,
@@ -10617,8 +10873,6 @@ const VAutocomplete = genericComponent()({
   }
 });
 
-// Types
-
 const VBadge = genericComponent()({
   name: 'VBadge',
   inheritAttrs: false,
@@ -10642,6 +10896,7 @@ const VBadge = genericComponent()({
     offsetX: [Number, String],
     offsetY: [Number, String],
     textColor: String,
+    ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top end'
     }),
@@ -10686,8 +10941,10 @@ const VBadge = genericComponent()({
           'v-badge--dot': props.dot,
           'v-badge--floating': props.floating,
           'v-badge--inline': props.inline
-        }]
-      }, attrs), {
+        }, props.class]
+      }, attrs, {
+        "style": props.style
+      }), {
         default: () => [createVNode("div", {
           "class": "v-badge__wrapper"
         }, [ctx.slots.default?.(), createVNode(MaybeTransition, {
@@ -10714,7 +10971,8 @@ const VBannerActions = genericComponent()({
   name: 'VBannerActions',
   props: {
     color: String,
-    density: String
+    density: String,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -10728,7 +10986,8 @@ const VBannerActions = genericComponent()({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-banner-actions"
+      "class": ['v-banner-actions', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -10749,6 +11008,7 @@ const VBanner = genericComponent()({
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -10806,8 +11066,8 @@ const VBanner = genericComponent()({
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
-        "style": [dimensionStyles.value, locationStyles.value],
+        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        "style": [dimensionStyles.value, locationStyles.value, props.style],
         "role": "banner"
       }, {
         default: () => [hasPrepend && createVNode("div", {
@@ -10863,6 +11123,7 @@ const VBottomNavigation = genericComponent()({
       default: true
     },
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -10937,11 +11198,11 @@ const VBottomNavigation = genericComponent()({
           'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
           'v-bottom-navigation--shift': props.mode === 'shift'
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value),
           transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-        }, ssrBootStyles.value]
+        }, ssrBootStyles.value, props.style]
       }, {
         default: () => [slots.default && createVNode("div", {
           "class": "v-bottom-navigation__content"
@@ -10955,14 +11216,16 @@ const VBottomNavigation = genericComponent()({
 const VBreadcrumbsDivider = genericComponent()({
   name: 'VBreadcrumbsDivider',
   props: {
-    divider: [Number, String]
+    divider: [Number, String],
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
     useRender(() => createVNode("li", {
-      "class": "v-breadcrumbs-divider"
+      "class": ['v-breadcrumbs-divider', props.class],
+      "style": props.style
     }, [slots?.default?.() ?? props.divider]));
     return {};
   }
@@ -10977,6 +11240,7 @@ const VBreadcrumbsItem = genericComponent()({
     color: String,
     disabled: Boolean,
     title: String,
+    ...makeComponentProps(),
     ...makeRouterProps(),
     ...makeTagProps({
       tag: 'li'
@@ -11002,8 +11266,8 @@ const VBreadcrumbsItem = genericComponent()({
           'v-breadcrumbs-item--disabled': props.disabled,
           'v-breadcrumbs-item--link': link.isLink.value,
           [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, textColorClasses.value],
-        "style": [textColorStyles.value],
+        }, textColorClasses.value, props.class],
+        "style": [textColorStyles.value, props.style],
         "href": link.href.value,
         "aria-current": isActive.value ? 'page' : undefined,
         "onClick": link.navigate
@@ -11034,6 +11298,7 @@ const VBreadcrumbs = genericComponent()({
       type: Array,
       default: () => []
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
@@ -11079,8 +11344,8 @@ const VBreadcrumbs = genericComponent()({
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.icon);
       return createVNode(props.tag, {
-        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
-        "style": backgroundColorStyles.value
+        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style]
       }, {
         default: () => [hasPrepend && createVNode("div", {
           "key": "prepend",
@@ -11124,11 +11389,10 @@ const VBreadcrumbs = genericComponent()({
   }
 });
 
-// Types
-
-const VCardActions = defineComponent({
+const VCardActions = genericComponent()({
   name: 'VCardActions',
-  setup(_, _ref) {
+  props: makeComponentProps(),
+  setup(props, _ref) {
     let {
       slots
     } = _ref;
@@ -11138,7 +11402,8 @@ const VCardActions = defineComponent({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-card-actions"
+      "class": ['v-card-actions', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -11148,8 +11413,6 @@ const VCardSubtitle = createSimpleFunctional('v-card-subtitle');
 
 const VCardTitle = createSimpleFunctional('v-card-title');
 
-// Types
-
 const VCardItem = genericComponent()({
   name: 'VCardItem',
   props: {
@@ -11159,6 +11422,7 @@ const VCardItem = genericComponent()({
     prependIcon: IconValue,
     subtitle: String,
     title: String,
+    ...makeComponentProps(),
     ...makeDensityProps()
   },
   setup(props, _ref) {
@@ -11173,7 +11437,8 @@ const VCardItem = genericComponent()({
       const hasTitle = !!(props.title || slots.title);
       const hasSubtitle = !!(props.subtitle || slots.subtitle);
       return createVNode("div", {
-        "class": "v-card-item"
+        "class": ['v-card-item', props.class],
+        "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
         "class": "v-card-item__prepend"
@@ -11255,8 +11520,8 @@ const VCard = genericComponent()({
     subtitle: String,
     text: String,
     title: String,
-    ...makeThemeProps(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -11266,6 +11531,7 @@ const VCard = genericComponent()({
     ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
     ...makeVariantProps({
       variant: 'elevated'
     })
@@ -11326,8 +11592,8 @@ const VCard = genericComponent()({
           'v-card--flat': props.flat,
           'v-card--hover': props.hover && !(props.disabled || props.flat),
           'v-card--link': isClickable.value
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value],
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
         "href": link.href.value,
         "onClick": isClickable.value && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
@@ -11523,6 +11789,7 @@ const makeVWindowProps = propsFactory({
   mandatory: {
     default: 'force'
   },
+  ...makeComponentProps(),
   ...makeTagProps(),
   ...makeThemeProps()
 }, 'v-window');
@@ -11638,7 +11905,8 @@ const VWindow = genericComponent()({
       "ref": rootRef,
       "class": ['v-window', {
         'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-      }, themeClasses.value]
+      }, themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [createVNode("div", {
         "class": "v-window__container",
@@ -11723,10 +11991,10 @@ const VCarousel = genericComponent()({
       "class": ['v-carousel', {
         'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,
         'v-carousel--vertical-delimiters': props.verticalDelimiters
-      }],
-      "style": {
+      }, props.class],
+      "style": [{
         height: convertToUnit(props.height)
-      },
+      }, props.style],
       "continuous": true,
       "mandatory": "force",
       "showArrows": props.showArrows
@@ -11792,6 +12060,7 @@ const VWindowItem = genericComponent()({
       type: [Boolean, String],
       default: undefined
     },
+    ...makeComponentProps(),
     ...makeGroupItemProps(),
     ...makeLazyProps()
   },
@@ -11878,7 +12147,8 @@ const VWindowItem = genericComponent()({
       "disabled": !isBooted.value
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value]
+        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
+        "style": props.style
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
     return {};
@@ -11891,7 +12161,8 @@ const VCarouselItem = genericComponent()({
   name: 'VCarouselItem',
   inheritAttrs: false,
   props: {
-    value: null
+    value: null,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -11899,7 +12170,8 @@ const VCarouselItem = genericComponent()({
       attrs
     } = _ref;
     useRender(() => createVNode(VWindowItem, {
-      "class": "v-carousel-item",
+      "class": ['v-carousel-item', props.class],
+      "style": props.style,
       "value": props.value
     }, {
       default: () => [createVNode(VImg, attrs, slots)]
@@ -11912,6 +12184,7 @@ const VCode = createSimpleFunctional('v-code');
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
   ...makeLocationProps(),
@@ -11955,8 +12228,8 @@ const VSheet = genericComponent()({
       roundedClasses
     } = useRounded(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
+      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -11982,7 +12255,8 @@ const VColorPickerCanvas = defineComponent({
     width: {
       type: [Number, String],
       default: 300
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -12127,7 +12401,8 @@ const VColorPickerCanvas = defineComponent({
     onMounted(() => updateCanvas());
     useRender(() => createVNode("div", {
       "ref": resizeRef,
-      "class": "v-color-picker-canvas",
+      "class": ['v-color-picker-canvas', props.class],
+      "style": props.style,
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown
@@ -12360,7 +12635,8 @@ const VColorPickerEdit = defineComponent({
       type: Array,
       default: () => Object.keys(modes),
       validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -12400,7 +12676,8 @@ const VColorPickerEdit = defineComponent({
       });
     });
     useRender(() => createVNode("div", {
-      "class": "v-color-picker-edit"
+      "class": ['v-color-picker-edit', props.class],
+      "style": props.style
     }, [inputs.value?.map(props => createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",
@@ -12484,11 +12761,33 @@ const makeSliderProps = propsFactory({
     elevation: 2
   })
 }, 'slider');
+const useSteps = props => {
+  const min = computed(() => parseFloat(props.min));
+  const max = computed(() => parseFloat(props.max));
+  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+  const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
+  function roundValue(value) {
+    if (step.value <= 0) return value;
+    const clamped = clamp(value, min.value, max.value);
+    const offset = min.value % step.value;
+    const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
+    return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
+  }
+  return {
+    min,
+    max,
+    step,
+    decimals,
+    roundValue
+  };
+};
 const useSlider = _ref => {
   let {
     props,
-    handleSliderMouseUp,
-    handleMouseMove,
+    steps,
+    onSliderStart,
+    onSliderMove,
+    onSliderEnd,
     getActiveThumb
   } = _ref;
   const {
@@ -12502,10 +12801,13 @@ const useSlider = _ref => {
     }
     return hd;
   });
-  const min = computed(() => parseFloat(props.min));
-  const max = computed(() => parseFloat(props.max));
-  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
-  const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
+  const {
+    min,
+    max,
+    step,
+    decimals,
+    roundValue
+  } = steps;
   const thumbSize = computed(() => parseInt(props.thumbSize, 10));
   const tickSize = computed(() => parseInt(props.tickSize, 10));
   const trackSize = computed(() => parseInt(props.trackSize, 10));
@@ -12519,13 +12821,6 @@ const useSlider = _ref => {
   const startOffset = ref(0);
   const trackContainerRef = ref();
   const activeThumbRef = ref();
-  function roundValue(value) {
-    if (step.value <= 0) return value;
-    const clamped = clamp(value, min.value, max.value);
-    const offset = min.value % step.value;
-    const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
-    return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
-  }
   function parseMouseMove(e) {
     const vertical = props.direction === 'vertical';
     const start = vertical ? 'top' : 'left';
@@ -12542,14 +12837,11 @@ const useSlider = _ref => {
     if (vertical || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos;
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
-  let thumbMoved = false;
   const handleStop = e => {
-    if (!thumbMoved) {
-      startOffset.value = 0;
-      handleSliderMouseUp(parseMouseMove(e));
-    }
+    onSliderEnd({
+      value: parseMouseMove(e)
+    });
     mousePressed.value = false;
-    thumbMoved = false;
     startOffset.value = 0;
   };
   const handleStart = e => {
@@ -12558,20 +12850,25 @@ const useSlider = _ref => {
     activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
-      thumbMoved = true;
       startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
-      handleMouseMove(parseMouseMove(e));
+      onSliderMove({
+        value: parseMouseMove(e)
+      });
     }
+    onSliderStart({
+      value: parseMouseMove(e)
+    });
   };
   const moveListenerOptions = {
     passive: true,
     capture: true
   };
   function onMouseMove(e) {
-    thumbMoved = true;
-    handleMouseMove(parseMouseMove(e));
+    onSliderMove({
+      value: parseMouseMove(e)
+    });
   }
   function onSliderMouseUp(e) {
     e.stopPropagation();
@@ -12699,7 +12996,8 @@ const VSliderThumb = genericComponent()({
     ripple: {
       type: Boolean,
       default: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:modelValue': v => true
@@ -12777,11 +13075,11 @@ const VSliderThumb = genericComponent()({
         "class": ['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-        },
+        }, props.style],
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
         "aria-valuemin": props.min,
@@ -12827,7 +13125,8 @@ const VSliderTrack = genericComponent()({
     stop: {
       type: Number,
       required: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {},
   setup(props, _ref) {
@@ -12902,12 +13201,12 @@ const VSliderTrack = genericComponent()({
     });
     useRender(() => {
       return createVNode("div", {
-        "class": ['v-slider-track', roundedClasses.value],
-        "style": {
+        "class": ['v-slider-track', roundedClasses.value, props.class],
+        "style": [{
           '--v-slider-track-size': convertToUnit(trackSize.value),
           '--v-slider-tick-size': convertToUnit(tickSize.value),
           direction: !vertical.value ? horizontalDirection.value : undefined
-        }
+        }, props.style]
       }, [createVNode("div", {
         "class": ['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
@@ -12947,13 +13246,21 @@ const VSlider = genericComponent()({
   },
   emits: {
     'update:focused': value => true,
-    'update:modelValue': v => true
+    'update:modelValue': v => true,
+    start: value => true,
+    end: value => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const thumbContainerRef = ref();
+    const steps = useSteps(props);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
+      const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
+      return steps.roundValue(value);
+    });
     const {
       min,
       max,
@@ -12967,16 +13274,26 @@ const VSlider = genericComponent()({
       readonly
     } = useSlider({
       props,
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleSliderMouseUp: newValue => model.value = roundValue(newValue),
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleMouseMove: newValue => model.value = roundValue(newValue),
+      steps,
+      onSliderStart: () => {
+        emit('start', model.value);
+      },
+      onSliderEnd: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        const roundedValue = roundValue(value);
+        model.value = roundedValue;
+        emit('end', roundedValue);
+      },
+      onSliderMove: _ref3 => {
+        let {
+          value
+        } = _ref3;
+        return model.value = roundValue(value);
+      },
       getActiveThumb: () => thumbContainerRef.value?.$el
     });
-    const model = useProxiedModel(props, 'modelValue', undefined, v => {
-      const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v;
-      return roundValue(value);
-    });
     const {
       isFocused,
       focus,
@@ -12992,7 +13309,8 @@ const VSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }]
+        }, props.class],
+        "style": props.style
       }, inputProps, {
         "focused": isFocused.value
       }), {
@@ -13002,11 +13320,11 @@ const VSlider = genericComponent()({
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-        default: _ref2 => {
+        default: _ref4 => {
           let {
             id,
             messagesId
-          } = _ref2;
+          } = _ref4;
           return createVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
@@ -13055,7 +13373,8 @@ const VColorPickerPreview = defineComponent({
       type: Object
     },
     disabled: Boolean,
-    hideAlpha: Boolean
+    hideAlpha: Boolean,
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -13067,7 +13386,8 @@ const VColorPickerPreview = defineComponent({
     useRender(() => createVNode("div", {
       "class": ['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }]
+      }, props.class],
+      "style": props.style
     }, [createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [createVNode("div", {
@@ -13448,7 +13768,8 @@ const VColorPickerSwatches = defineComponent({
     },
     disabled: Boolean,
     color: Object,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -13458,10 +13779,10 @@ const VColorPickerSwatches = defineComponent({
       emit
     } = _ref;
     useRender(() => createVNode("div", {
-      "class": "v-color-picker-swatches",
-      "style": {
+      "class": ['v-color-picker-swatches', props.class],
+      "style": [{
         maxHeight: convertToUnit(props.maxHeight)
-      }
+      }, props.style]
     }, [createVNode("div", null, [props.swatches.map(swatch => createVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
@@ -13565,13 +13886,13 @@ const VColorPicker = defineComponent({
         "rounded": props.rounded,
         "elevation": props.elevation,
         "theme": props.theme,
-        "class": ['v-color-picker'],
-        "style": {
+        "class": ['v-color-picker', props.class],
+        "style": [{
           '--v-color-picker-color-hsv': HSVtoCSS({
             ...(currentColor.value ?? nullColor),
             a: 1
           })
-        }
+        }, props.style]
       }, sheetProps, {
         "maxWidth": props.width
       }), {
@@ -13882,7 +14203,8 @@ const VCombobox = genericComponent()({
           'v-combobox--chips': !!props.chips,
           'v-combobox--selecting-index': selectionIndex.value > -1,
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,
@@ -14080,7 +14402,8 @@ const VDialog = genericComponent()({
         "class": ['v-dialog', {
           'v-dialog--fullscreen': props.fullscreen,
           'v-dialog--scrollable': props.scrollable
-        }]
+        }, props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -14119,6 +14442,7 @@ const VExpansionPanels = genericComponent()({
       validator: v => allowedVariants.includes(v)
     },
     readonly: Boolean,
+    ...makeComponentProps(),
     ...makeGroupProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -14144,7 +14468,8 @@ const VExpansionPanels = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', themeClasses.value, variantClass.value]
+      "class": ['v-expansion-panels', themeClasses.value, variantClass.value, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -14173,6 +14498,7 @@ const VExpansionPanelTitle = genericComponent()({
     Ripple
   },
   props: {
+    ...makeComponentProps(),
     ...makeVExpansionPanelTitleProps()
   },
   setup(props, _ref) {
@@ -14195,8 +14521,8 @@ const VExpansionPanelTitle = genericComponent()({
     useRender(() => withDirectives(createVNode("button", {
       "class": ['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value
-      }, backgroundColorClasses.value],
-      "style": backgroundColorStyles.value,
+      }, backgroundColorClasses.value, props.class],
+      "style": [backgroundColorStyles.value, props.style],
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
@@ -14216,6 +14542,7 @@ const VExpansionPanelTitle = genericComponent()({
 const VExpansionPanelText = genericComponent()({
   name: 'VExpansionPanelText',
   props: {
+    ...makeComponentProps(),
     ...makeLazyProps()
   },
   setup(props, _ref) {
@@ -14232,7 +14559,8 @@ const VExpansionPanelText = genericComponent()({
       "onAfterLeave": onAfterLeave
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": "v-expansion-panel-text"
+        "class": ['v-expansion-panel-text', props.class],
+        "style": props.style
       }, [slots.default && hasContent.value && createVNode("div", {
         "class": "v-expansion-panel-text__wrapper"
       }, [slots.default?.()])]), [[vShow, expansionPanel.isSelected.value]])]
@@ -14247,6 +14575,7 @@ const VExpansionPanel = genericComponent()({
     title: String,
     text: String,
     bgColor: String,
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeGroupItemProps(),
     ...makeLazyProps(),
@@ -14295,8 +14624,8 @@ const VExpansionPanel = genericComponent()({
           'v-expansion-panel--before-active': isBeforeSelected.value,
           'v-expansion-panel--after-active': isAfterSelected.value,
           'v-expansion-panel--disabled': isDisabled.value
-        }, roundedClasses.value, backgroundColorClasses.value],
-        "style": backgroundColorStyles.value,
+        }, roundedClasses.value, backgroundColorClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style],
         "aria-expanded": groupItem.isSelected.value
       }, {
         default: () => [createVNode("div", {
@@ -14446,7 +14775,8 @@ const VFileInput = genericComponent()({
         "ref": vInputRef,
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "class": "v-file-input",
+        "class": ['v-file-input', props.class],
+        "style": props.style,
         "onClick:prepend": onClickPrepend
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
@@ -14538,6 +14868,7 @@ const VFooter = genericComponent()({
       default: 'auto'
     },
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -14587,8 +14918,8 @@ const VFooter = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined]
+      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined, props.style]
     }, slots));
     return {};
   }
@@ -14599,6 +14930,7 @@ const VFooter = genericComponent()({
 const VForm = genericComponent()({
   name: 'VForm',
   props: {
+    ...makeComponentProps(),
     ...makeFormProps()
   },
   emits: {
@@ -14637,7 +14969,8 @@ const VForm = genericComponent()({
     }
     useRender(() => createVNode("form", {
       "ref": formRef,
-      "class": "v-form",
+      "class": ['v-form', props.class],
+      "style": props.style,
       "novalidate": true,
       "onReset": onReset,
       "onSubmit": onSubmit
@@ -14653,6 +14986,7 @@ const VContainer = genericComponent()({
       type: Boolean,
       default: false
     },
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -14662,7 +14996,8 @@ const VContainer = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-container', {
         'v-container--fluid': props.fluid
-      }]
+      }, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -14753,6 +15088,7 @@ const VCol = genericComponent()({
       default: null,
       validator: str => ALIGN_SELF_VALUES.includes(str)
     },
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -14783,7 +15119,8 @@ const VCol = genericComponent()({
       return classList;
     });
     return () => h(props.tag, {
-      class: classes.value
+      class: [classes.value, props.class],
+      style: props.style
     }, slots.default?.());
   }
 });
@@ -14869,6 +15206,7 @@ const VRow = genericComponent()({
       validator: alignContentValidator
     },
     ...alignContentProps,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -14897,7 +15235,8 @@ const VRow = genericComponent()({
       return classList;
     });
     return () => h(props.tag, {
-      class: ['v-row', classes.value]
+      class: ['v-row', classes.value, props.class],
+      style: props.style
     }, slots.default?.());
   }
 });
@@ -14941,6 +15280,7 @@ const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
 const VItemGroup = genericComponent()({
   name: 'VItemGroup',
   props: {
+    ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-item--selected'
     }),
@@ -14965,7 +15305,8 @@ const VItemGroup = genericComponent()({
       selected
     } = useGroup(props, VItemGroupSymbol);
     return () => createVNode(props.tag, {
-      "class": ['v-item-group', themeClasses.value]
+      "class": ['v-item-group', themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -15015,7 +15356,10 @@ const VKbd = createSimpleFunctional('v-kbd');
 
 const VLayout = genericComponent()({
   name: 'VLayout',
-  props: makeLayoutProps(),
+  props: {
+    ...makeComponentProps(),
+    ...makeLayoutProps()
+  },
   setup(props, _ref) {
     let {
       slots
@@ -15029,8 +15373,8 @@ const VLayout = genericComponent()({
     } = createLayout(props);
     useRender(() => createVNode("div", {
       "ref": layoutRef,
-      "class": layoutClasses.value,
-      "style": layoutStyles.value
+      "class": [layoutClasses.value, props.class],
+      "style": [layoutStyles.value, props.style]
     }, [slots.default?.()]));
     return {
       getLayoutItem,
@@ -15053,6 +15397,7 @@ const VLayoutItem = genericComponent()({
       default: 300
     },
     modelValue: Boolean,
+    ...makeComponentProps(),
     ...makeLayoutItemProps()
   },
   setup(props, _ref) {
@@ -15071,8 +15416,8 @@ const VLayoutItem = genericComponent()({
       absolute: toRef(props, 'absolute')
     });
     return () => createVNode("div", {
-      "class": ['v-layout-item'],
-      "style": layoutItemStyles.value
+      "class": ['v-layout-item', props.class],
+      "style": [layoutItemStyles.value, props.style]
     }, [slots.default?.()]);
   }
 });
@@ -15096,6 +15441,7 @@ const VLazy = genericComponent()({
         threshold: undefined
       })
     },
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeTagProps(),
     ...makeTransitionProps({
@@ -15118,8 +15464,8 @@ const VLazy = genericComponent()({
       isActive.value = isIntersecting;
     }
     useRender(() => withDirectives(createVNode(props.tag, {
-      "class": "v-lazy",
-      "style": dimensionStyles.value
+      "class": ['v-lazy', props.class],
+      "style": [dimensionStyles.value, props.style]
     }, {
       default: () => [isActive.value && createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -15144,7 +15490,8 @@ const VLocaleProvider = genericComponent()({
     rtl: {
       type: Boolean,
       default: undefined
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -15154,7 +15501,8 @@ const VLocaleProvider = genericComponent()({
       rtlClasses
     } = provideLocale(props);
     useRender(() => createVNode("div", {
-      "class": ['v-locale-provider', rtlClasses.value]
+      "class": ['v-locale-provider', rtlClasses.value, props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -15164,6 +15512,7 @@ const VMain = genericComponent()({
   name: 'VMain',
   props: {
     scrollable: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps({
       tag: 'main'
     })
@@ -15181,8 +15530,8 @@ const VMain = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-main', {
         'v-main--scrollable': props.scrollable
-      }],
-      "style": [mainStyles.value, ssrBootStyles.value]
+      }, props.class],
+      "style": [mainStyles.value, ssrBootStyles.value, props.style]
     }, {
       default: () => [props.scrollable ? createVNode("div", {
         "class": "v-main__scroller"
@@ -15528,6 +15877,7 @@ const VNavigationDrawer = genericComponent()({
     },
     sticky: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -15679,8 +16029,8 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--temporary': isTemporary.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value]
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -15809,6 +16159,7 @@ const VPagination = genericComponent()({
     },
     showFirstLastPage: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -16005,7 +16356,8 @@ const VPagination = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-pagination', themeClasses.value],
+      "class": ['v-pagination', themeClasses.value, props.class],
+      "style": props.style,
       "role": "navigation",
       "aria-label": t(props.ariaLabel),
       "onKeydown": onKeydown,
@@ -16064,7 +16416,8 @@ const VParallax = genericComponent()({
     scale: {
       type: [Number, String],
       default: 0.5
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -16126,7 +16479,8 @@ const VParallax = genericComponent()({
     useRender(() => createVNode(VImg, {
       "class": ['v-parallax', {
         'v-parallax--active': isIntersecting.value
-      }],
+      }, props.class],
+      "style": props.style,
       "ref": root,
       "cover": true,
       "onLoadstart": onScroll,
@@ -16151,7 +16505,8 @@ const VRadio = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
-      "class": "v-radio",
+      "class": ['v-radio', props.class],
+      "style": props.style,
       "type": "radio"
     }), slots));
     return {};
@@ -16205,7 +16560,8 @@ const VRadioGroup = genericComponent()({
         }
       }) : props.label;
       return createVNode(VInput, mergeProps({
-        "class": "v-radio-group"
+        "class": ['v-radio-group', props.class],
+        "style": props.style
       }, inputAttrs, inputProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
@@ -16261,11 +16617,14 @@ const VRangeSlider = genericComponent()({
   },
   emits: {
     'update:focused': value => true,
-    'update:modelValue': value => true
+    'update:modelValue': value => true,
+    end: value => true,
+    start: value => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const startThumbRef = ref();
     const stopThumbRef = ref();
@@ -16278,6 +16637,11 @@ const VRangeSlider = genericComponent()({
       const b = Math.abs(stopOffset);
       return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
     }
+    const steps = useSteps(props);
+    const model = useProxiedModel(props, 'modelValue', undefined, arr => {
+      if (!arr?.length) return [0, 0];
+      return arr.map(value => steps.roundValue(value));
+    });
     const {
       activeThumbRef,
       hasLabels,
@@ -16287,34 +16651,37 @@ const VRangeSlider = genericComponent()({
       onSliderMousedown,
       onSliderTouchstart,
       position,
-      roundValue,
       trackContainerRef
     } = useSlider({
-      /* eslint-disable @typescript-eslint/no-use-before-define */
       props,
-      handleSliderMouseUp: newValue => {
-        model.value = activeThumbRef.value === startThumbRef.value?.$el ? [newValue, model.value[1]] : [model.value[0], newValue];
+      steps,
+      onSliderStart: () => {
+        emit('start', model.value);
+      },
+      onSliderEnd: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        const newValue = activeThumbRef.value === startThumbRef.value?.$el ? [value, model.value[1]] : [model.value[0], value];
+        model.value = newValue;
+        emit('end', newValue);
       },
-      handleMouseMove: newValue => {
+      onSliderMove: _ref3 => {
+        let {
+          value
+        } = _ref3;
         const [start, stop] = model.value;
         if (!props.strict && start === stop && start !== min.value) {
-          activeThumbRef.value = newValue > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
+          activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
           activeThumbRef.value?.focus();
         }
         if (activeThumbRef.value === startThumbRef.value?.$el) {
-          model.value = [Math.min(newValue, stop), stop];
+          model.value = [Math.min(value, stop), stop];
         } else {
-          model.value = [start, Math.max(start, newValue)];
+          model.value = [start, Math.max(start, value)];
         }
       },
       getActiveThumb
-      /* eslint-enable @typescript-eslint/no-use-before-define */
-    });
-
-    const model = useProxiedModel(props, 'modelValue', undefined, arr => {
-      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-      if (!arr || !arr.length) return [0, 0];
-      return arr.map(value => roundValue(value));
     });
     const {
       isFocused,
@@ -16332,7 +16699,8 @@ const VRangeSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }],
+        }, props.class],
+        "style": props.style,
         "ref": inputRef
       }, inputProps, {
         "focused": isFocused.value
@@ -16342,11 +16710,11 @@ const VRangeSlider = genericComponent()({
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-        default: _ref2 => {
+        default: _ref4 => {
           let {
             id,
             messagesId
-          } = _ref2;
+          } = _ref4;
           return createVNode("div", {
             "class": "v-slider__container",
             "onMousedown": onSliderMousedown,
@@ -16475,6 +16843,7 @@ const VRating = genericComponent()({
       validator: v => ['top', 'bottom'].includes(v)
     },
     ripple: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeSizeProps(),
     ...makeTagProps(),
@@ -16498,9 +16867,6 @@ const VRating = genericComponent()({
     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 focusIndex = ref(-1);
-    const firstRef = ref();
-    let isClicking = false;
     const itemState = computed(() => increments.value.map(value => {
       const isHovering = props.hover && hoverIndex.value > -1;
       const isFilled = normalizedValue.value >= value;
@@ -16523,16 +16889,6 @@ const VRating = genericComponent()({
       function onMouseleave() {
         hoverIndex.value = -1;
       }
-      function onFocus() {
-        if (value === 0 && normalizedValue.value === 0) {
-          firstRef.value?.focus();
-        } else {
-          focusIndex.value = value;
-        }
-      }
-      function onBlur() {
-        if (!isClicking) focusIndex.value = -1;
-      }
       function onClick() {
         if (props.disabled || props.readonly) return;
         rating.value = normalizedValue.value === value && props.clearable ? 0 : value;
@@ -16540,17 +16896,9 @@ const VRating = genericComponent()({
       return {
         onMouseenter: props.hover ? onMouseenter : undefined,
         onMouseleave: props.hover ? onMouseleave : undefined,
-        onFocus,
-        onBlur,
         onClick
       };
     }));
-    function onMousedown() {
-      isClicking = true;
-    }
-    function onMouseup() {
-      isClicking = false;
-    }
     const name = computed(() => props.name ?? `v-rating-${getUid()}`);
     function VRatingItem(_ref2) {
       let {
@@ -16561,8 +16909,6 @@ const VRating = genericComponent()({
       const {
         onMouseenter,
         onMouseleave,
-        onFocus,
-        onBlur,
         onClick
       } = eventState.value[index + 1];
       const id = `${name.value}-${String(value).replace('.', '-')}`;
@@ -16573,7 +16919,6 @@ const VRating = genericComponent()({
         icon: itemState.value[index]?.icon,
         ripple: props.ripple,
         size: props.size,
-        tag: 'span',
         variant: 'plain'
       };
       return createVNode(Fragment, null, [createVNode("label", {
@@ -16582,17 +16927,17 @@ const VRating = genericComponent()({
           'v-rating__item--half': props.halfIncrements && value % 1 > 0,
           'v-rating__item--full': props.halfIncrements && value % 1 === 0
         },
-        "onMousedown": onMousedown,
-        "onMouseup": onMouseup,
         "onMouseenter": onMouseenter,
-        "onMouseleave": onMouseleave
+        "onMouseleave": onMouseleave,
+        "onClick": onClick
       }, [createVNode("span", {
         "class": "v-rating__hidden"
       }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
         ...itemState.value[index],
         props: btnProps,
         value,
-        index
+        index,
+        rating: normalizedValue.value
       }) : createVNode(VBtn, btnProps, null)]), createVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
@@ -16600,10 +16945,7 @@ const VRating = genericComponent()({
         "type": "radio",
         "value": value,
         "checked": normalizedValue.value === value,
-        "onClick": onClick,
-        "onFocus": onFocus,
-        "onBlur": onBlur,
-        "ref": index === 0 ? firstRef : undefined,
+        "tabindex": -1,
         "readonly": props.readonly,
         "disabled": props.disabled
       }, null)]);
@@ -16619,7 +16961,8 @@ const VRating = genericComponent()({
         "class": ['v-rating', {
           'v-rating--hover': props.hover,
           'v-rating--readonly': props.readonly
-        }, themeClasses.value]
+        }, themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [createVNode(VRatingItem, {
           "value": 0,
@@ -16632,9 +16975,7 @@ const VRating = genericComponent()({
           index: i,
           label: props.itemLabels?.[i]
         }) : undefined, createVNode("div", {
-          "class": ['v-rating__item', {
-            'v-rating__item--focused': Math.ceil(focusIndex.value) === value
-          }]
+          "class": "v-rating__item"
         }, [props.halfIncrements ? createVNode(Fragment, null, [createVNode(VRatingItem, {
           "value": value - 0.5,
           "index": i * 2
@@ -16721,6 +17062,7 @@ const makeVSlideGroupProps = propsFactory({
     type: [Boolean, String],
     validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
   },
+  ...makeComponentProps(),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active'
@@ -16961,7 +17303,8 @@ const VSlideGroup = genericComponent()({
         'v-slide-group--vertical': !isHorizontal.value,
         'v-slide-group--has-affixes': hasAffixes.value,
         'v-slide-group--is-overflowing': isOverflowing.value
-      }],
+      }, props.class],
+      "style": props.style,
       "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
       "onFocus": onFocus
     }, {
@@ -17111,7 +17454,8 @@ const VSnackbar = genericComponent()({
           'v-snackbar--active': isActive.value,
           'v-snackbar--multi-line': props.multiLine && !props.vertical,
           'v-snackbar--vertical': props.vertical
-        }, positionClasses.value]
+        }, positionClasses.value, props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -17211,7 +17555,8 @@ const VSwitch = genericComponent()({
           'v-switch--inset': props.inset
         }, {
           'v-switch--indeterminate': indeterminate.value
-        }, loaderClasses.value]
+        }, loaderClasses.value, props.class],
+        "style": props.style
       }, inputAttrs, inputProps, {
         "id": id.value,
         "focused": isFocused.value
@@ -17280,6 +17625,7 @@ const VSystemBar = genericComponent()({
     color: String,
     height: [Number, String],
     window: Boolean,
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -17321,8 +17667,8 @@ const VSystemBar = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -17334,7 +17680,6 @@ const VTab = genericComponent()({
   name: 'VTab',
   props: {
     fixed: Boolean,
-    title: String,
     sliderColor: String,
     hideSlider: Boolean,
     direction: {
@@ -17396,10 +17741,10 @@ const VTab = genericComponent()({
     useRender(() => {
       const [btnProps] = VBtn.filterProps(props);
       return createVNode(VBtn, mergeProps({
-        "_as": "VTab",
         "symbol": VTabsSymbol,
         "ref": rootEl,
-        "class": ['v-tab'],
+        "class": ['v-tab', props.class],
+        "style": props.style,
         "tabindex": isSelected.value ? 0 : -1,
         "role": "tab",
         "aria-selected": String(isSelected.value),
@@ -17410,7 +17755,7 @@ const VTab = genericComponent()({
       }, btnProps, attrs, {
         "onGroup:selected": updateSlider
       }), {
-        default: () => [slots.default ? slots.default() : props.title, !props.hideSlider && createVNode("div", {
+        default: () => [slots.default?.() ?? props.text, !props.hideSlider && createVNode("div", {
           "ref": sliderEl,
           "class": ['v-tab__slider', sliderColorClasses.value],
           "style": sliderColorStyles.value
@@ -17494,10 +17839,10 @@ const VTabs = genericComponent()({
           'v-tabs--fixed-tabs': props.fixedTabs,
           'v-tabs--grow': props.grow,
           'v-tabs--stacked': props.stacked
-        }, densityClasses.value, backgroundColorClasses.value],
+        }, densityClasses.value, backgroundColorClasses.value, props.class],
         "style": [{
           '--v-tabs-height': convertToUnit(props.height)
-        }, backgroundColorStyles.value],
+        }, backgroundColorStyles.value, props.style],
         "role": "tablist",
         "symbol": VTabsSymbol
       }), {
@@ -17517,6 +17862,7 @@ const VTable = genericComponent()({
     fixedFooter: Boolean,
     height: [Number, String],
     hover: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -17539,7 +17885,8 @@ const VTable = genericComponent()({
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
         'v-table--hover': props.hover
-      }, themeClasses.value, densityClasses.value]
+      }, themeClasses.value, densityClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.top?.(), slots.default ? createVNode("div", {
         "class": "v-table__wrapper",
@@ -17704,7 +18051,8 @@ const VTextarea = genericComponent()({
           'v-textarea--auto-grow': props.autoGrow,
           'v-textarea--no-resize': props.noResize || props.autoGrow,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }]
+        }, props.class],
+        "style": props.style
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
       }), {
@@ -17788,6 +18136,7 @@ const VThemeProvider = genericComponent()({
   name: 'VThemeProvider',
   props: {
     withBackground: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps(),
     ...makeTagProps()
   },
@@ -17801,7 +18150,8 @@ const VThemeProvider = genericComponent()({
     return () => {
       if (!props.withBackground) return slots.default?.();
       return createVNode(props.tag, {
-        "class": ['v-theme-provider', themeClasses.value]
+        "class": ['v-theme-provider', themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [slots.default?.()]
       });
@@ -17846,6 +18196,7 @@ const VTimeline = genericComponent()({
       type: String,
       validator: v => ['start', 'end', 'both'].includes(v)
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -17889,10 +18240,10 @@ 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],
-      "style": {
+      }, themeClasses.value, densityClasses.value, sideClasses.value, props.class],
+      "style": [{
         '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-      }
+      }, props.style]
     }, slots));
     return {};
   }
@@ -17907,6 +18258,7 @@ const VTimelineDivider = genericComponent()({
     icon: IconValue,
     iconColor: String,
     lineColor: String,
+    ...makeComponentProps(),
     ...makeRoundedProps(),
     ...makeSizeProps(),
     ...makeElevationProps()
@@ -17936,7 +18288,8 @@ const VTimelineDivider = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
-      }]
+      }, props.class],
+      "style": props.style
     }, [createVNode("div", {
       "class": ['v-timeline-divider__before', lineColorClasses.value],
       "style": lineColorStyles.value
@@ -17986,11 +18339,12 @@ const VTimelineItem = genericComponent()({
     icon: IconValue,
     iconColor: String,
     lineInset: [Number, String],
-    ...makeRoundedProps(),
+    ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeRoundedProps(),
     ...makeSizeProps(),
-    ...makeTagProps(),
-    ...makeDimensionProps()
+    ...makeTagProps()
   },
   setup(props, _ref) {
     let {
@@ -18010,11 +18364,11 @@ const VTimelineItem = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-timeline-item', {
         'v-timeline-item--fill-dot': props.fillDot
-      }],
-      "style": {
+      }, props.class],
+      "style": [{
         '--v-timeline-dot-size': convertToUnit(dotSize.value),
         '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
-      }
+      }, props.style]
     }, [createVNode("div", {
       "class": "v-timeline-item__body",
       "style": dimensionStyles.value
@@ -18048,6 +18402,7 @@ const VTooltip = genericComponent()({
       closeOnBack: false,
       location: 'end',
       locationStrategy: 'connected',
+      eager: true,
       minWidth: 0,
       offset: 10,
       openOnClick: false,
@@ -18056,7 +18411,7 @@ const VTooltip = genericComponent()({
       scrim: false,
       scrollStrategy: 'reposition',
       transition: false
-    }), ['absolute', 'persistent', 'eager'])
+    }), ['absolute', 'persistent'])
   },
   emits: {
     'update:modelValue': value => true
@@ -18089,7 +18444,8 @@ const VTooltip = genericComponent()({
       const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
-        "class": ['v-tooltip'],
+        "class": ['v-tooltip', props.class],
+        "style": props.style,
         "id": id.value
       }, overlayProps, {
         "modelValue": isActive.value,
@@ -18100,7 +18456,6 @@ const VTooltip = genericComponent()({
         "origin": origin.value,
         "persistent": true,
         "role": "tooltip",
-        "eager": true,
         "activatorProps": activatorProps.value,
         "_disableGlobalStack": true
       }, scopeId), {
@@ -18135,69 +18490,239 @@ const VValidation = genericComponent()({
   }
 });
 
-const VDataTableColumn = defineFunctionalComponent({
-  align: {
-    type: String,
-    default: 'start'
+const VVirtualScrollItem = genericComponent()({
+  name: 'VVirtualScrollItem',
+  props: {
+    dynamicHeight: Boolean,
+    ...makeComponentProps()
   },
-  fixed: Boolean,
-  fixedOffset: [Number, String],
-  height: [Number, String],
-  lastFixed: Boolean,
-  noPadding: Boolean,
-  tag: String,
-  width: [Number, String]
-}, (props, _ref) => {
-  let {
-    slots,
-    attrs
-  } = _ref;
-  const Tag = props.tag ?? 'td';
-  return createVNode(Tag, mergeProps({
-    "class": ['v-data-table__td', {
-      'v-data-table-column--fixed': props.fixed,
-      'v-data-table-column--last-fixed': props.lastFixed,
-      'v-data-table-column--no-padding': props.noPadding
-    }, `v-data-table-column--align-${props.align}`],
-    "style": {
-      height: convertToUnit(props.height),
-      width: convertToUnit(props.width),
-      left: convertToUnit(props.fixedOffset || null)
+  emits: {
+    'update:height': height => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    useToggleScope(() => props.dynamicHeight, () => {
+      watch(() => contentRect.value?.height, height => {
+        if (height != null) emit('update:height', height);
+      });
+    });
+    function updateHeight() {
+      if (props.dynamicHeight && contentRect.value) {
+        emit('update:height', contentRect.value.height);
+      }
     }
-  }, attrs), {
-    default: () => [slots.default?.()]
-  });
+    onUpdated(updateHeight);
+    useRender(() => createVNode("div", {
+      "ref": props.dynamicHeight ? resizeRef : undefined,
+      "class": ['v-virtual-scroll__item', props.class],
+      "style": props.style
+    }, [slots.default?.()]));
+  }
 });
 
-// Utilities
-
 // Types
 
-const makeDataTableHeaderProps = propsFactory({
-  headers: {
-    type: Array,
-    default: () => []
-  }
-}, 'v-data-table-header');
-const VDataTableHeadersSymbol = Symbol.for('vuetify:data-table-headers');
-function createHeaders(props, options) {
-  const headers = ref([]);
-  const columns = ref([]);
-  watch(() => props.headers, () => {
-    const wrapped = !props.headers.length ? [] : Array.isArray(props.headers[0]) ? props.headers : [props.headers];
-    const flat = wrapped.flatMap((row, index) => row.map(column => ({
-      column,
-      row: index
-    })));
-    const rowCount = wrapped.length;
-    const defaultHeader = {
-      title: '',
-      sortable: false
-    };
-    const defaultActionHeader = {
-      ...defaultHeader,
-      width: 48
-    };
+const UP$1 = -1;
+const DOWN$1 = 1;
+const VVirtualScroll = genericComponent()({
+  name: 'VVirtualScroll',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    itemHeight: [Number, String],
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const first = ref(0);
+    const baseItemHeight = ref(props.itemHeight);
+    const itemHeight = computed({
+      get: () => parseInt(baseItemHeight.value ?? 0, 10),
+      set(val) {
+        baseItemHeight.value = val;
+      }
+    });
+    const rootEl = ref();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    watchEffect(() => {
+      resizeRef.value = rootEl.value;
+    });
+    const display = useDisplay();
+    const sizeMap = new Map();
+    let sizes = createRange(props.items.length).map(() => itemHeight.value);
+    const visibleItems = computed(() => {
+      return Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
+    });
+    function handleItemResize(index, height) {
+      itemHeight.value = Math.max(itemHeight.value, height);
+      sizes[index] = height;
+      sizeMap.set(props.items[index], height);
+    }
+    function calculateOffset(index) {
+      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
+    }
+    function calculateMidPointIndex(scrollTop) {
+      const end = props.items.length;
+      let middle = 0;
+      let middleOffset = 0;
+      while (middleOffset < scrollTop && middle < end) {
+        middleOffset += sizes[middle++] || itemHeight.value;
+      }
+      return middle - 1;
+    }
+    let lastScrollTop = 0;
+    function handleScroll() {
+      if (!rootEl.value || !contentRect.value) return;
+      const height = contentRect.value.height;
+      const scrollTop = rootEl.value.scrollTop;
+      const direction = scrollTop < lastScrollTop ? UP$1 : DOWN$1;
+      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
+      const buffer = Math.round(visibleItems.value / 3);
+      if (direction === UP$1 && midPointIndex <= first.value + buffer * 2 - 1) {
+        first.value = clamp(midPointIndex - buffer, 0, props.items.length);
+      } else if (direction === DOWN$1 && midPointIndex >= first.value + buffer * 2 - 1) {
+        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
+      }
+      lastScrollTop = rootEl.value.scrollTop;
+    }
+    function scrollToIndex(index) {
+      if (!rootEl.value) return;
+      const offset = calculateOffset(index);
+      rootEl.value.scrollTop = offset;
+    }
+    const items = computed(() => props.items.map((item, index) => ({
+      raw: item,
+      index
+    })));
+    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
+    const computedItems = computed(() => items.value.slice(first.value, last.value));
+    const paddingTop = computed(() => calculateOffset(first.value));
+    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    onMounted(() => {
+      if (!itemHeight.value) {
+        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items
+        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
+      }
+    });
+    watch(() => props.items.length, () => {
+      sizes = createRange(props.items.length).map(() => itemHeight.value);
+      sizeMap.forEach((height, item) => {
+        const index = props.items.indexOf(item);
+        if (index === -1) {
+          sizeMap.delete(item);
+        } else {
+          sizes[index] = height;
+        }
+      });
+    });
+    useRender(() => createVNode("div", {
+      "ref": rootEl,
+      "class": ['v-virtual-scroll', props.class],
+      "onScroll": handleScroll,
+      "style": [dimensionStyles.value, props.style]
+    }, [createVNode("div", {
+      "class": "v-virtual-scroll__container",
+      "style": {
+        paddingTop: convertToUnit(paddingTop.value),
+        paddingBottom: convertToUnit(paddingBottom.value)
+      }
+    }, [computedItems.value.map(item => createVNode(VVirtualScrollItem, {
+      "key": item.index,
+      "dynamicHeight": !props.itemHeight,
+      "onUpdate:height": height => handleItemResize(item.index, height)
+    }, {
+      default: () => [slots.default?.({
+        item: item.raw,
+        index: item.index
+      })]
+    }))])]));
+    return {
+      scrollToIndex
+    };
+  }
+});
+
+const VDataTableColumn = defineFunctionalComponent({
+  align: {
+    type: String,
+    default: 'start'
+  },
+  fixed: Boolean,
+  fixedOffset: [Number, String],
+  height: [Number, String],
+  lastFixed: Boolean,
+  noPadding: Boolean,
+  tag: String,
+  width: [Number, String]
+}, (props, _ref) => {
+  let {
+    slots,
+    attrs
+  } = _ref;
+  const Tag = props.tag ?? 'td';
+  return createVNode(Tag, mergeProps({
+    "class": ['v-data-table__td', {
+      'v-data-table-column--fixed': props.fixed,
+      'v-data-table-column--last-fixed': props.lastFixed,
+      'v-data-table-column--no-padding': props.noPadding
+    }, `v-data-table-column--align-${props.align}`],
+    "style": {
+      height: convertToUnit(props.height),
+      width: convertToUnit(props.width),
+      left: convertToUnit(props.fixedOffset || null)
+    }
+  }, attrs), {
+    default: () => [slots.default?.()]
+  });
+});
+
+// Utilities
+
+// Types
+
+const makeDataTableHeaderProps = propsFactory({
+  headers: {
+    type: Array,
+    default: () => []
+  }
+}, 'v-data-table-header');
+const VDataTableHeadersSymbol = Symbol.for('vuetify:data-table-headers');
+function createHeaders(props, options) {
+  const headers = ref([]);
+  const columns = ref([]);
+  watch(() => props.headers, () => {
+    const wrapped = !props.headers.length ? [] : Array.isArray(props.headers[0]) ? props.headers : [props.headers];
+    const flat = wrapped.flatMap((row, index) => row.map(column => ({
+      column,
+      row: index
+    })));
+    const rowCount = wrapped.length;
+    const defaultHeader = {
+      title: '',
+      sortable: false
+    };
+    const defaultActionHeader = {
+      ...defaultHeader,
+      width: 48
+    };
     if (options?.groupBy?.value.length) {
       const index = flat.findIndex(_ref => {
         let {
@@ -19545,8 +20070,8 @@ const makeDataTableVirtualProps = propsFactory({
     default: 52
   }
 }, 'virtual');
-const UP$1 = -1;
-const DOWN$1 = 1;
+const UP = -1;
+const DOWN = 1;
 
 // TODO: Replace this with composable from v-virtual-scroll
 function useVirtual(props, items) {
@@ -19584,12 +20109,12 @@ function useVirtual(props, items) {
       isScrolling.value = false;
     }, 100);
     const scrollTop = containerRef.value.scrollTop;
-    const direction = scrollTop < lastScrollTop ? UP$1 : DOWN$1;
+    const direction = scrollTop < lastScrollTop ? UP : DOWN;
     const midPointIndex = calculateMidPointIndex(scrollTop);
     const buffer = Math.round(visibleItems.value / 3);
-    if (direction === UP$1 && midPointIndex <= startIndex.value) {
+    if (direction === UP && midPointIndex <= startIndex.value) {
       startIndex.value = Math.max(midPointIndex - buffer, 0);
-    } else if (direction === DOWN$1 && midPointIndex >= startIndex.value + buffer * 2) {
+    } else if (direction === DOWN && midPointIndex >= startIndex.value + buffer * 2) {
       startIndex.value = Math.min(Math.max(0, midPointIndex - buffer), items.value.length - visibleItems.value);
     }
     lastScrollTop = containerRef.value.scrollTop;
@@ -19902,6 +20427,211 @@ const VDataTableServer = genericComponent()({
 
 // Types
 
+const VInfiniteScrollIntersect = defineComponent({
+  name: 'VInfiniteScrollIntersect',
+  props: {
+    side: {
+      type: String,
+      required: true
+    },
+    rootRef: null,
+    rootMargin: String
+  },
+  emits: {
+    intersect: side => true
+  },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver(entries => {}, props.rootMargin ? {
+      root: props.rootRef,
+      rootMargin: props.rootMargin
+    } : undefined);
+    watch(isIntersecting, async val => {
+      if (val) emit('intersect', props.side);
+    });
+    useRender(() => createVNode("div", {
+      "class": "v-infinite-scroll-intersect",
+      "ref": intersectionRef
+    }, [createTextVNode("\xA0")]));
+    return {};
+  }
+});
+const VInfiniteScroll = genericComponent()({
+  name: 'VInfiniteScroll',
+  props: {
+    color: String,
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    side: {
+      type: String,
+      default: 'end',
+      validator: v => ['start', 'end', 'both'].includes(v)
+    },
+    mode: {
+      type: String,
+      default: 'intersect',
+      validator: v => ['intersect', 'manual'].includes(v)
+    },
+    margin: [Number, String],
+    loadMoreText: {
+      type: String,
+      default: '$vuetify.infiniteScroll.loadMore'
+    },
+    emptyText: {
+      type: String,
+      default: '$vuetify.infiniteScroll.empty'
+    },
+    ...makeDimensionProps()
+  },
+  emits: {
+    load: options => true
+  },
+  setup(props, _ref2) {
+    let {
+      slots,
+      emit
+    } = _ref2;
+    const rootEl = ref();
+    const startStatus = ref('ok');
+    const endStatus = ref('ok');
+    const margin = computed(() => convertToUnit(props.margin));
+    function setScrollAmount(amount) {
+      if (!rootEl.value) return;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      rootEl.value[property] = amount;
+    }
+    function getScrollAmount() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      return rootEl.value[property];
+    }
+    function getScrollSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth';
+      return rootEl.value[property];
+    }
+    function getContainerSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth';
+      return rootEl.value[property];
+    }
+    onMounted(() => {
+      if (!rootEl.value) return;
+      if (props.side === 'start') {
+        setScrollAmount(getScrollSize());
+      } else if (props.side === 'both') {
+        setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2);
+      }
+    });
+    function setStatus(side, status) {
+      if (side === 'start') {
+        startStatus.value = status;
+      } else if (side === 'end') {
+        endStatus.value = status;
+      }
+    }
+    function getStatus(side) {
+      return side === 'start' ? startStatus.value : endStatus.value;
+    }
+    let previousScrollSize = 0;
+    function handleIntersect(side) {
+      const status = getStatus(side);
+      if (!rootEl.value || status === 'loading') return;
+      previousScrollSize = getScrollSize();
+      setStatus(side, 'loading');
+      function done(status) {
+        setStatus(side, status);
+        nextTick(() => {
+          if (status === 'ok' && side === 'start') {
+            setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+          }
+        });
+      }
+      emit('load', {
+        side,
+        done
+      });
+    }
+    const {
+      t
+    } = useLocale();
+    function renderSide(side, status) {
+      if (props.side !== side && props.side !== 'both') return;
+      const onClick = () => handleIntersect(side);
+      const slotProps = {
+        side,
+        props: {
+          onClick,
+          color: props.color
+        }
+      };
+      if (status === 'error') return slots.error?.(slotProps);
+      if (status === 'empty') return slots.empty?.(slotProps) ?? createVNode("div", null, [t(props.emptyText)]);
+      if (props.mode === 'manual') {
+        if (status === 'loading') {
+          return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+            "indeterminate": true,
+            "color": props.color
+          }, null);
+        }
+        return slots['load-more']?.(slotProps) ?? createVNode(VBtn, {
+          "variant": "outlined",
+          "color": props.color,
+          "onClick": onClick
+        }, {
+          default: () => [t(props.loadMoreText)]
+        });
+      }
+      return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "color": props.color
+      }, null);
+    }
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    useRender(() => {
+      const hasStartIntersect = props.side === 'start' || props.side === 'both';
+      const hasEndIntersect = props.side === 'end' || props.side === 'both';
+      const intersectMode = props.mode === 'intersect';
+      return createVNode("div", {
+        "ref": rootEl,
+        "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+          'v-infinite-scroll--start': hasStartIntersect,
+          'v-infinite-scroll--end': hasEndIntersect
+        }],
+        "style": dimensionStyles.value
+      }, [createVNode("div", {
+        "class": "v-infinite-scroll__side"
+      }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        "key": "start",
+        "side": "start",
+        "onIntersect": handleIntersect,
+        "rootRef": rootEl.value,
+        "rootMargin": margin.value
+      }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        "key": "end",
+        "side": "end",
+        "onIntersect": handleIntersect,
+        "rootRef": rootEl.value,
+        "rootMargin": margin.value
+      }, null), createVNode("div", {
+        "class": "v-infinite-scroll__side"
+      }, [renderSide('end', endStatus.value)])]);
+    });
+  }
+});
+
+// Types
+
 const rootTypes = {
   actions: 'button@2',
   article: 'heading, paragraph',
@@ -20032,177 +20762,6 @@ const VSkeletonLoader = genericComponent()({
   }
 });
 
-const VVirtualScrollItem = genericComponent()({
-  name: 'VVirtualScrollItem',
-  props: {
-    dynamicHeight: Boolean
-  },
-  emits: {
-    'update:height': height => true
-  },
-  setup(props, _ref) {
-    let {
-      emit,
-      slots
-    } = _ref;
-    const {
-      resizeRef,
-      contentRect
-    } = useResizeObserver();
-    useToggleScope(() => props.dynamicHeight, () => {
-      watch(() => contentRect.value?.height, height => {
-        if (height != null) emit('update:height', height);
-      });
-    });
-    function updateHeight() {
-      if (props.dynamicHeight && contentRect.value) {
-        emit('update:height', contentRect.value.height);
-      }
-    }
-    onUpdated(updateHeight);
-    useRender(() => createVNode("div", {
-      "ref": props.dynamicHeight ? resizeRef : undefined,
-      "class": "v-virtual-scroll__item"
-    }, [slots.default?.()]));
-  }
-});
-
-// Types
-
-const UP = -1;
-const DOWN = 1;
-const VVirtualScroll = genericComponent()({
-  name: 'VVirtualScroll',
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    itemHeight: [Number, String],
-    visibleItems: [Number, String],
-    ...makeDimensionProps()
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const first = ref(0);
-    const baseItemHeight = ref(props.itemHeight);
-    const itemHeight = computed({
-      get: () => parseInt(baseItemHeight.value ?? 0, 10),
-      set(val) {
-        baseItemHeight.value = val;
-      }
-    });
-    const rootEl = ref();
-    const {
-      resizeRef,
-      contentRect
-    } = useResizeObserver();
-    watchEffect(() => {
-      resizeRef.value = rootEl.value;
-    });
-    const display = useDisplay();
-    const sizeMap = new Map();
-    let sizes = createRange(props.items.length).map(() => itemHeight.value);
-    const visibleItems = computed(() => {
-      return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
-    });
-    function handleItemResize(index, height) {
-      itemHeight.value = Math.max(itemHeight.value, height);
-      sizes[index] = height;
-      sizeMap.set(props.items[index], height);
-    }
-    function calculateOffset(index) {
-      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
-    }
-    function calculateMidPointIndex(scrollTop) {
-      let start = 0;
-      let end = props.items.length;
-      while (start <= end) {
-        const middle = start + Math.floor((end - start) / 2);
-        const middleOffset = calculateOffset(middle);
-        if (middleOffset === scrollTop) {
-          return middle;
-        } else if (middleOffset < scrollTop) {
-          start = middle + 1;
-        } else if (middleOffset > scrollTop) {
-          end = middle - 1;
-        }
-      }
-      return start;
-    }
-    let lastScrollTop = 0;
-    function handleScroll() {
-      if (!rootEl.value || !contentRect.value) return;
-      const height = contentRect.value.height;
-      const scrollTop = rootEl.value.scrollTop;
-      const direction = scrollTop < lastScrollTop ? UP : DOWN;
-      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
-      const buffer = Math.round(visibleItems.value / 3);
-      if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-        first.value = clamp(midPointIndex - buffer, 0, props.items.length);
-      } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
-      }
-      lastScrollTop = rootEl.value.scrollTop;
-    }
-    function scrollToIndex(index) {
-      if (!rootEl.value) return;
-      const offset = calculateOffset(index);
-      rootEl.value.scrollTop = offset;
-    }
-    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-    const computedItems = computed(() => props.items.slice(first.value, last.value));
-    const paddingTop = computed(() => calculateOffset(first.value));
-    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
-    const {
-      dimensionStyles
-    } = useDimension(props);
-    onMounted(() => {
-      if (!itemHeight.value) {
-        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items
-        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
-      }
-    });
-    watch(() => props.items.length, () => {
-      sizes = createRange(props.items.length).map(() => itemHeight.value);
-      sizeMap.forEach((height, item) => {
-        const index = props.items.indexOf(item);
-        if (index === -1) {
-          sizeMap.delete(item);
-        } else {
-          sizes[index] = height;
-        }
-      });
-    });
-    useRender(() => createVNode("div", {
-      "ref": rootEl,
-      "class": "v-virtual-scroll",
-      "onScroll": handleScroll,
-      "style": dimensionStyles.value
-    }, [createVNode("div", {
-      "class": "v-virtual-scroll__container",
-      "style": {
-        paddingTop: convertToUnit(paddingTop.value),
-        paddingBottom: convertToUnit(paddingBottom.value)
-      }
-    }, [computedItems.value.map((item, index) => createVNode(VVirtualScrollItem, {
-      "key": index,
-      "dynamicHeight": !props.itemHeight,
-      "onUpdate:height": height => handleItemResize(index + first.value, height)
-    }, {
-      default: () => [slots.default?.({
-        item,
-        index: index + first.value
-      })]
-    }))])]));
-    return {
-      scrollToIndex
-    };
-  }
-});
-
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   VAlert: VAlert,
@@ -20272,6 +20831,7 @@ var components = /*#__PURE__*/Object.freeze({
   VHover: VHover,
   VIcon: VIcon,
   VImg: VImg,
+  VInfiniteScroll: VInfiniteScroll,
   VInput: VInput,
   VItem: VItem,
   VItemGroup: VItemGroup,
@@ -20474,6 +21034,418 @@ var directives = /*#__PURE__*/Object.freeze({
   Touch: Touch
 });
 
+// Utilities
+
+// Types
+
+function getWeekArray(date) {
+  let currentWeek = [];
+  const weeks = [];
+  const firstDayOfMonth = startOfMonth(date);
+  const lastDayOfMonth = endOfMonth(date);
+  for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
+    currentWeek.push(null);
+  }
+  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+    const day = new Date(date.getFullYear(), date.getMonth(), i);
+
+    // Add the day to the current week
+    currentWeek.push(day);
+
+    // If the current week has 7 days, add it to the weeks array and start a new week
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  for (let i = currentWeek.length; i < 7; i++) {
+    currentWeek.push(null);
+  }
+  weeks.push(currentWeek);
+  return weeks;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function date(value) {
+  if (value == null) return null;
+  if (value instanceof Date) return value;
+  if (typeof value === 'string') {
+    const parsed = Date.parse(value);
+    if (!isNaN(parsed)) return new Date(parsed);
+  }
+  return null;
+}
+const firstDay = {
+  '001': 1,
+  AD: 1,
+  AE: 6,
+  AF: 6,
+  AG: 0,
+  AI: 1,
+  AL: 1,
+  AM: 1,
+  AN: 1,
+  AR: 1,
+  AS: 0,
+  AT: 1,
+  AU: 0,
+  AX: 1,
+  AZ: 1,
+  BA: 1,
+  BD: 0,
+  BE: 1,
+  BG: 1,
+  BH: 6,
+  BM: 1,
+  BN: 1,
+  BR: 0,
+  BS: 0,
+  BT: 0,
+  BW: 0,
+  BY: 1,
+  BZ: 0,
+  CA: 0,
+  CH: 1,
+  CL: 1,
+  CM: 1,
+  CN: 0,
+  CO: 0,
+  CR: 1,
+  CY: 1,
+  CZ: 1,
+  DE: 1,
+  DJ: 6,
+  DK: 1,
+  DM: 0,
+  DO: 0,
+  DZ: 6,
+  EC: 1,
+  EE: 1,
+  EG: 6,
+  ES: 1,
+  ET: 0,
+  FI: 1,
+  FJ: 1,
+  FO: 1,
+  FR: 1,
+  GB: 1,
+  'GB-alt-variant': 0,
+  GE: 1,
+  GF: 1,
+  GP: 1,
+  GR: 1,
+  GT: 0,
+  GU: 0,
+  HK: 0,
+  HN: 0,
+  HR: 1,
+  HU: 1,
+  ID: 0,
+  IE: 1,
+  IL: 0,
+  IN: 0,
+  IQ: 6,
+  IR: 6,
+  IS: 1,
+  IT: 1,
+  JM: 0,
+  JO: 6,
+  JP: 0,
+  KE: 0,
+  KG: 1,
+  KH: 0,
+  KR: 0,
+  KW: 6,
+  KZ: 1,
+  LA: 0,
+  LB: 1,
+  LI: 1,
+  LK: 1,
+  LT: 1,
+  LU: 1,
+  LV: 1,
+  LY: 6,
+  MC: 1,
+  MD: 1,
+  ME: 1,
+  MH: 0,
+  MK: 1,
+  MM: 0,
+  MN: 1,
+  MO: 0,
+  MQ: 1,
+  MT: 0,
+  MV: 5,
+  MX: 0,
+  MY: 1,
+  MZ: 0,
+  NI: 0,
+  NL: 1,
+  NO: 1,
+  NP: 0,
+  NZ: 1,
+  OM: 6,
+  PA: 0,
+  PE: 0,
+  PH: 0,
+  PK: 0,
+  PL: 1,
+  PR: 0,
+  PT: 0,
+  PY: 0,
+  QA: 6,
+  RE: 1,
+  RO: 1,
+  RS: 1,
+  RU: 1,
+  SA: 0,
+  SD: 6,
+  SE: 1,
+  SG: 0,
+  SI: 1,
+  SK: 1,
+  SM: 1,
+  SV: 0,
+  SY: 6,
+  TH: 0,
+  TJ: 1,
+  TM: 1,
+  TR: 1,
+  TT: 0,
+  TW: 0,
+  UA: 1,
+  UM: 0,
+  US: 0,
+  UY: 1,
+  UZ: 1,
+  VA: 1,
+  VE: 0,
+  VI: 0,
+  VN: 1,
+  WS: 0,
+  XK: 1,
+  YE: 0,
+  ZA: 0,
+  ZW: 0
+};
+const sundayJanuarySecond2000 = new Date(2000, 0, 2);
+function getWeekdays(locale) {
+  const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()];
+  return createRange(7).map(i => {
+    const weekday = new Date(sundayJanuarySecond2000);
+    weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
+    return new Intl.DateTimeFormat(locale, {
+      weekday: 'long'
+    }).format(weekday);
+  });
+}
+function format(value, formatString, locale) {
+  const date = new Date(value);
+  let options = {};
+  switch (formatString) {
+    case 'fullDateWithWeekday':
+      options = {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      };
+      break;
+    case 'normalDateWithWeekday':
+      options = {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      };
+      break;
+    case 'keyboardDate':
+      options = {};
+      break;
+    case 'monthAndDate':
+      options = {
+        month: 'long',
+        day: 'numeric'
+      };
+      break;
+    case 'monthAndYear':
+      options = {
+        month: 'long',
+        year: 'numeric'
+      };
+      break;
+    default:
+      options = {
+        timeZone: 'UTC',
+        timeZoneName: 'short'
+      };
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}
+function addDays(date, amount) {
+  const d = new Date(date);
+  d.setDate(d.getDate() + amount);
+  return d;
+}
+function addMonths(date, amount) {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + amount);
+  return d;
+}
+function getYear(date) {
+  return date.getFullYear();
+}
+function getMonth(date) {
+  return date.getMonth();
+}
+function startOfYear(date) {
+  return new Date(date.getFullYear(), 0, 1);
+}
+function endOfYear(date) {
+  return new Date(date.getFullYear(), 11, 31);
+}
+function getMondayOfFirstWeekOfYear(year) {
+  return new Date(year, 0, 1);
+}
+
+// https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
+function getWeek(date) {
+  let year = date.getFullYear();
+  let d1w1 = getMondayOfFirstWeekOfYear(year);
+  if (date < d1w1) {
+    year = year - 1;
+    d1w1 = getMondayOfFirstWeekOfYear(year);
+  } else {
+    const tv = getMondayOfFirstWeekOfYear(year + 1);
+    if (date >= tv) {
+      year = year + 1;
+      d1w1 = tv;
+    }
+  }
+  const diffTime = Math.abs(date.getTime() - d1w1.getTime());
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return Math.floor(diffDays / 7) + 1;
+}
+function isWithinRange(date, range) {
+  return isAfter(date, range[0]) && isBefore(date, range[1]);
+}
+function isValid(date) {
+  const d = new Date(date);
+  return d instanceof Date && !isNaN(d.getTime());
+}
+function isAfter(date, comparing) {
+  return date.getTime() > comparing.getTime();
+}
+function isBefore(date, comparing) {
+  return date.getTime() < comparing.getTime();
+}
+function isEqual(date, comparing) {
+  return date.getTime() === comparing.getTime();
+}
+function isSameDay(date, comparing) {
+  return date.getDate() === comparing.getDate() && date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+}
+function isSameMonth(date, comparing) {
+  return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+}
+function getDiff(date, comparing, unit) {
+  const d = new Date(date);
+  const c = new Date(comparing);
+  if (unit === 'month') {
+    return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12;
+  }
+  return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
+}
+function setYear(date, year) {
+  const d = new Date(date);
+  d.setFullYear(year);
+  return d;
+}
+class VuetifyDateAdapter {
+  constructor() {
+    let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'en';
+    this.locale = locale;
+  }
+  date(value) {
+    return date(value);
+  }
+  addDays(date, amount) {
+    return addDays(date, amount);
+  }
+  addMonths(date, amount) {
+    return addMonths(date, amount);
+  }
+  getWeekArray(date) {
+    return getWeekArray(date);
+  }
+  startOfMonth(date) {
+    return startOfMonth(date);
+  }
+  endOfMonth(date) {
+    return endOfMonth(date);
+  }
+  format(date, formatString) {
+    return format(date, formatString, this.locale);
+  }
+  isEqual(date, comparing) {
+    return isEqual(date, comparing);
+  }
+  isValid(date) {
+    return isValid(date);
+  }
+  isWithinRange(date, range) {
+    return isWithinRange(date, range);
+  }
+  isAfter(date, comparing) {
+    return isAfter(date, comparing);
+  }
+  isSameDay(date, comparing) {
+    return isSameDay(date, comparing);
+  }
+  isSameMonth(date, comparing) {
+    return isSameMonth(date, comparing);
+  }
+  setYear(date, year) {
+    return setYear(date, year);
+  }
+  getDiff(date, comparing, unit) {
+    return getDiff(date, comparing, unit);
+  }
+  getWeek(date) {
+    return getWeek(date);
+  }
+  getWeekdays() {
+    return getWeekdays(this.locale);
+  }
+  getYear(date) {
+    return getYear(date);
+  }
+  getMonth(date) {
+    return getMonth(date);
+  }
+  startOfYear(date) {
+    return startOfYear(date);
+  }
+  endOfYear(date) {
+    return endOfYear(date);
+  }
+}
+
+// Composables
+
+// Types
+
+const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
+function createDate(options) {
+  return options ?? {
+    adapter: VuetifyDateAdapter
+  };
+}
+
 // Composables
 function createVuetify$1() {
   let vuetify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20492,6 +21464,7 @@ function createVuetify$1() {
   const theme = createTheme(options.theme);
   const icons = createIcons(options.icons);
   const locale = createLocale(options.locale);
+  const date = createDate(options.date);
   const install = app => {
     for (const key in directives) {
       app.directive(key, directives[key]);
@@ -20512,6 +21485,7 @@ function createVuetify$1() {
     app.provide(ThemeSymbol, theme);
     app.provide(IconSymbol, icons);
     app.provide(LocaleSymbol, locale);
+    app.provide(DateAdapterSymbol, date);
     if (IN_BROWSER && options.ssr) {
       if (app.$nuxt) {
         app.$nuxt.hook('app:suspense:resolve', () => {
@@ -20539,7 +21513,8 @@ function createVuetify$1() {
               display: inject.call(this, DisplaySymbol),
               theme: inject.call(this, ThemeSymbol),
               icons: inject.call(this, IconSymbol),
-              locale: inject.call(this, LocaleSymbol)
+              locale: inject.call(this, LocaleSymbol),
+              date: inject.call(this, DateAdapterSymbol)
             });
           }
         }
@@ -20552,10 +21527,11 @@ function createVuetify$1() {
     display,
     theme,
     icons,
-    locale
+    locale,
+    date
   };
 }
-const version$1 = "3.1.16";
+const version$1 = "3.2.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20567,7 +21543,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.16";
+const version = "3.2.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20578,5 +21554,5 @@ const createVuetify = function () {
   });
 };
 
-export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify-labs.esm.js.map