vuetify 3.1.16 → 3.2.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.16
+* Vuetify v3.2.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -171,11 +171,11 @@
   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];
@@ -886,44 +886,6 @@
     return (light + 0.05) / (dark + 0.05);
   }
 
-  // Utilities
-  function getCurrentInstance(name, message) {
-    const vm = vue.getCurrentInstance();
-    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
@@ -977,17 +939,54 @@
 
   // 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 = vue.effectScope();
+      scope.run(() => fn.length ? fn(() => {
+        scope?.stop();
+        start();
+      }) : fn());
+    }
+    vue.watch(source, active => {
+      if (active && !scope) {
+        start();
+      } else if (!active) {
+        scope?.stop();
+        scope = undefined;
+      }
+    }, {
+      immediate: true
+    });
+    vue.onScopeDispose(() => {
+      scope?.stop();
+    });
+  }
+
+  // Composables
+
+  // Types
+
   const DefaultsSymbol = Symbol.for('vuetify:defaults');
   function createDefaults(options) {
     return vue.ref(options);
   }
-  function useDefaults() {
+  function injectDefaults() {
     const defaults = vue.inject(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 = vue.ref(defaults);
     const newDefaults = vue.computed(() => {
       const disabled = vue.unref(options?.disabled);
@@ -1014,41 +1013,58 @@
     vue.provide(DefaultsSymbol, newDefaults);
     return newDefaults;
   }
-
-  function useToggleScope(source, fn) {
-    let scope;
-    function start() {
-      scope = vue.effectScope();
-      scope.run(() => fn.length ? fn(() => {
-        scope?.stop();
-        start();
-      }) : fn());
-    }
-    vue.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 = vue.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
     });
-    vue.onScopeDispose(() => {
-      scope?.stop();
+    const _subcomponentDefaults = vue.shallowRef();
+    vue.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;
@@ -1060,43 +1076,20 @@
       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 = vue.getCurrentInstance();
-        const componentDefaults = vue.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 = vue.shallowRef();
-        vue.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;
       };
     }
@@ -1121,15 +1114,19 @@
         tag: {
           type: String,
           default: tag
-        }
+        },
+        ...makeComponentProps()
       },
       setup(props, _ref) {
         let {
           slots
         } = _ref;
-        return () => vue.h(props.tag, {
-          class: klass
-        }, slots.default?.());
+        return () => {
+          return vue.h(props.tag, {
+            class: [klass, props.class],
+            style: props.style
+          }, slots.default?.());
+        };
       }
     });
   }
@@ -1162,6 +1159,34 @@
   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 = vue.getCurrentInstance();
+    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;
@@ -1185,6 +1210,16 @@
     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') {
@@ -1965,7 +2000,11 @@
         item: 'Rating {0} of {1}'
       }
     },
-    loading: 'Loading...'
+    loading: 'Loading...',
+    infiniteScroll: {
+      loadMore: 'Load more',
+      empty: 'No more'
+    }
   };
 
   const LANG_PREFIX = '$vuetify.';
@@ -2163,6 +2202,7 @@
   const VApp = genericComponent()({
     name: 'VApp',
     props: {
+      ...makeComponentProps(),
       ...makeLayoutProps({
         fullHeight: true
       }),
@@ -2185,8 +2225,8 @@
       } = useRtl();
       useRender(() => vue.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]
       }, [vue.createVNode("div", {
         "class": "v-application__wrap"
       }, [slots.default?.()])]));
@@ -2611,6 +2651,7 @@
     props: {
       aspectRatio: [String, Number],
       contentClass: String,
+      ...makeComponentProps(),
       ...makeDimensionProps()
     },
     setup(props, _ref) {
@@ -2624,8 +2665,8 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode("div", {
-        "class": "v-responsive",
-        "style": dimensionStyles.value
+        "class": ['v-responsive', props.class],
+        "style": [dimensionStyles.value, props.style]
       }, [vue.createVNode("div", {
         "class": "v-responsive__sizer",
         "style": aspectStyles.value
@@ -2743,6 +2784,7 @@
       },
       srcset: String,
       width: [String, Number],
+      ...makeComponentProps(),
       ...makeTransitionProps()
     },
     emits: {
@@ -2930,10 +2972,10 @@
       useRender(() => vue.withDirectives(vue.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
@@ -2968,10 +3010,9 @@
     }
   }, 'tag');
 
-  // Types
-
   const makeVToolbarTitleProps = propsFactory({
     text: String,
+    ...makeComponentProps(),
     ...makeTagProps()
   }, 'v-toolbar-title');
   const VToolbarTitle = genericComponent()({
@@ -2984,7 +3025,8 @@
       useRender(() => {
         const hasText = !!(slots.default || slots.text || props.text);
         return vue.createVNode(props.tag, {
-          "class": "v-toolbar-title"
+          "class": ['v-toolbar-title', props.class],
+          "style": props.style
         }, {
           default: () => [hasText && vue.createVNode("div", {
             "class": "v-toolbar-title__placeholder"
@@ -3165,6 +3207,7 @@
     image: String,
     title: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
@@ -3215,8 +3258,8 @@
             '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 && vue.createVNode("div", {
             "key": "image",
@@ -3283,6 +3326,98 @@
 
   // 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 = vue.ref(null);
+    const currentScroll = vue.ref(0);
+    const savedScroll = vue.ref(0);
+    const currentThreshold = vue.ref(0);
+    const isScrollActive = vue.ref(false);
+    const isScrollingUp = vue.ref(false);
+    const computedScrollThreshold = vue.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);
+    };
+    vue.watch(isScrollingUp, () => {
+      savedScroll.value = savedScroll.value || currentScroll.value;
+    });
+    vue.watch(isScrollActive, () => {
+      savedScroll.value = 0;
+    });
+    vue.onMounted(() => {
+      vue.watch(() => props.scrollTarget, scrollTarget => {
+        const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
+        if (!newTarget) {
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          return;
+        }
+        if (newTarget === target.value) return;
+        target.value?.removeEventListener('scroll', onScroll);
+        target.value = newTarget;
+        target.value.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      }, {
+        immediate: true
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      target.value?.removeEventListener('scroll', onScroll);
+    });
+    thresholdMetCallback && vue.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 && vue.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 = vue.ref(false);
@@ -3305,13 +3440,7 @@
   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
@@ -3323,6 +3452,7 @@
       },
       ...makeVToolbarProps(),
       ...makeLayoutItemProps(),
+      ...makeScrollProps(),
       height: {
         type: [Number, String],
         default: 64
@@ -3337,11 +3467,63 @@
       } = _ref;
       const vToolbarRef = vue.ref();
       const isActive = useProxiedModel(props, 'modelValue');
+      const scrollBehavior = vue.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 = vue.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 = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
+      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
+      const scrollRatio = vue.computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+      const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.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;
+        }
+      }
+      vue.watch(currentScroll, setActive, {
+        immediate: true
+      });
+      vue.watch(scrollBehavior, setActive);
       const {
         ssrBootStyles
       } = useSsrBoot();
@@ -3352,7 +3534,7 @@
         order: vue.computed(() => parseInt(props.order, 10)),
         position: vue.toRef(props, 'location'),
         layoutSize: height,
-        elementSize: height,
+        elementSize: vue.ref(undefined),
         active: isActive,
         absolute: vue.toRef(props, 'absolute')
       });
@@ -3362,13 +3544,17 @@
           "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 {};
     }
@@ -3451,6 +3637,7 @@
   const makeVBtnGroupProps = propsFactory({
     divided: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -3493,7 +3680,8 @@
         return vue.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);
       });
     }
@@ -3726,8 +3914,10 @@
       useRender(() => {
         const [btnGroupProps] = VBtnGroup.filterProps(props);
         return vue.createVNode(VBtnGroup, vue.mergeProps({
-          "class": "v-btn-toggle"
-        }, btnGroupProps), {
+          "class": ['v-btn-toggle', props.class]
+        }, btnGroupProps, {
+          "style": props.style
+        }), {
           default: () => [slots.default?.({
             isSelected,
             next,
@@ -3798,7 +3988,7 @@
 
   // Types
 
-  const IconValue = [String, Function, Object];
+  const IconValue = [String, Function, Object, Array];
   const IconSymbol = Symbol.for('vuetify:icons');
   const makeIconProps = propsFactory({
     icon: {
@@ -3818,8 +4008,9 @@
         slots
       } = _ref;
       return () => {
+        const Icon = props.icon;
         return vue.createVNode(props.tag, null, {
-          default: () => [props.icon ? vue.createVNode(props.icon, null, null) : slots.default?.()]
+          default: () => [props.icon ? vue.createVNode(Icon, null, null) : slots.default?.()]
         });
       };
     }
@@ -3842,7 +4033,12 @@
             "viewBox": "0 0 24 24",
             "role": "img",
             "aria-hidden": "true"
-          }, [vue.createVNode("path", {
+          }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? vue.createVNode("path", {
+            "d": path[0],
+            "fill-opacity": path[1]
+          }, null) : vue.createVNode("path", {
+            "d": path
+          }, null)) : vue.createVNode("path", {
             "d": props.icon
           }, null)])]
         });
@@ -3907,7 +4103,12 @@
         }
       }
       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
@@ -3964,6 +4165,7 @@
     start: Boolean,
     end: Boolean,
     icon: IconValue,
+    ...makeComponentProps(),
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'i'
@@ -4006,12 +4208,12 @@
           '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
       }, {
@@ -4022,14 +4224,14 @@
   });
 
   // Utilities
-  function useIntersectionObserver(callback) {
+  function useIntersectionObserver(callback, options) {
     const intersectionRef = vue.ref();
     const isIntersecting = vue.ref(false);
     if (SUPPORTS_INTERSECTION) {
       const observer = new IntersectionObserver(entries => {
         callback?.(entries, observer);
         isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
-      });
+      }, options);
       vue.onBeforeUnmount(() => {
         observer.disconnect();
       });
@@ -4069,6 +4271,7 @@
         type: [Number, String],
         default: 4
       },
+      ...makeComponentProps(),
       ...makeSizeProps(),
       ...makeTagProps({
         tag: 'div'
@@ -4124,8 +4327,8 @@
           '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",
@@ -4544,6 +4747,7 @@
       stream: Boolean,
       striped: Boolean,
       roundedBar: Boolean,
+      ...makeComponentProps(),
       ...makeLocationProps({
         location: 'top'
       }),
@@ -4615,14 +4819,14 @@
           '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",
@@ -4831,8 +5035,9 @@
       type: Boolean,
       default: true
     },
+    text: String,
     ...makeBorderProps(),
-    ...makeRoundedProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -4840,6 +5045,7 @@
     ...makeLoaderProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
+    ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeSizeProps(),
     ...makeTagProps({
@@ -4937,8 +5143,8 @@
             '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 => {
@@ -4976,7 +5182,9 @@
                 icon: props.icon
               }
             }
-          }, slots.default)]), !props.icon && hasAppend && vue.createVNode("span", {
+          }, {
+            default: () => [slots.default?.() ?? props.text]
+          })]), !props.icon && hasAppend && vue.createVNode("span", {
             "key": "append",
             "class": "v-btn__append"
           }, [!slots.append ? vue.createVNode(VIcon, {
@@ -5013,15 +5221,17 @@
       icon: {
         type: IconValue,
         default: '$menu'
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
       useRender(() => vue.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 {};
     }
@@ -5029,9 +5239,12 @@
 
   const VToolbarItems = genericComponent()({
     name: 'VToolbarItems',
-    props: makeVariantProps({
-      variant: 'text'
-    }),
+    props: {
+      ...makeComponentProps(),
+      ...makeVariantProps({
+        variant: 'text'
+      })
+    },
     setup(props, _ref) {
       let {
         slots
@@ -5044,7 +5257,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-toolbar-items"
+        "class": ['v-toolbar-items', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -5106,6 +5320,7 @@
         type: String,
         validator: val => allowedTypes.includes(val)
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -5188,8 +5403,8 @@
             [`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 && vue.createVNode("div", {
@@ -5283,6 +5498,7 @@
     props: {
       text: String,
       clickable: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps()
     },
     setup(props, _ref) {
@@ -5292,7 +5508,8 @@
       useRender(() => vue.createVNode("label", {
         "class": ['v-label', {
           'v-label--clickable': props.clickable
-        }]
+        }, props.class],
+        "style": props.style
       }, [props.text, slots.default?.()]));
       return {};
     }
@@ -5301,7 +5518,8 @@
   const VFieldLabel = genericComponent()({
     name: 'VFieldLabel',
     props: {
-      floating: Boolean
+      floating: Boolean,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -5310,7 +5528,8 @@
       useRender(() => vue.createVNode(VLabel, {
         "class": ['v-field-label', {
           'v-field-label--floating': props.floating
-        }],
+        }, props.class],
+        "style": props.style,
         "aria-hidden": props.floating || undefined
       }, slots));
       return {};
@@ -5350,7 +5569,7 @@
 
   // 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,
@@ -5361,9 +5580,11 @@
     },
     active: Boolean,
     color: String,
+    baseColor: String,
     dirty: Boolean,
     disabled: Boolean,
     error: Boolean,
+    flat: Boolean,
     label: String,
     persistentClear: Boolean,
     prependInnerIcon: IconValue,
@@ -5377,8 +5598,10 @@
     'onClick:clear': EventProp(),
     'onClick:appendInner': EventProp(),
     'onClick:prependInner': EventProp(),
-    ...makeThemeProps(),
-    ...makeLoaderProps()
+    ...makeComponentProps(),
+    ...makeLoaderProps(),
+    ...makeRoundedProps(),
+    ...makeThemeProps()
   }, 'v-field');
   const VField = genericComponent()({
     name: 'VField',
@@ -5413,6 +5636,9 @@
       const {
         InputIcon
       } = useInputIcon(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
       const isActive = vue.computed(() => props.dirty || props.active);
       const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
@@ -5429,7 +5655,7 @@
         textColorClasses,
         textColorStyles
       } = useTextColor(vue.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;
       }));
       vue.watch(isActive, val => {
         if (hasLabel.value) {
@@ -5498,6 +5724,7 @@
             '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,
@@ -5505,8 +5732,8 @@
             '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), [vue.createVNode("div", {
           "class": "v-field__overlay"
@@ -5525,7 +5752,7 @@
         }, null), slots['prepend-inner']?.(slotProps.value)]), vue.createVNode("div", {
           "class": "v-field__field",
           "data-no-activator": ""
-        }, [['solo', 'filled'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
+        }, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
           "key": "floating-label",
           "ref": floatingLabelRef,
           "class": [textColorClasses.value],
@@ -5594,7 +5821,7 @@
   });
   // 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);
   }
 
@@ -5609,6 +5836,7 @@
         type: [Array, String],
         default: () => []
       },
+      ...makeComponentProps(),
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition,
@@ -5629,8 +5857,8 @@
       useRender(() => vue.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"
       }, {
@@ -5926,6 +6154,7 @@
     },
     'onClick:prepend': EventProp(),
     'onClick:append': EventProp(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeValidationProps()
   }, 'v-input');
@@ -5993,7 +6222,8 @@
         const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
         return vue.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 && vue.createVNode("div", {
           "key": "prepend",
           "class": "v-input__prepend"
@@ -6036,6 +6266,7 @@
         type: [Number, String],
         default: 0
       },
+      ...makeComponentProps(),
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition
@@ -6053,7 +6284,8 @@
         "transition": props.transition
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": "v-counter"
+          "class": ['v-counter', props.class],
+          "style": props.style
         }, [slots.default ? slots.default({
           counter: counter.value,
           max: props.max,
@@ -6256,7 +6488,8 @@
             '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
         }), {
@@ -6372,6 +6605,7 @@
         type: String,
         default: 'VSelectionControl'
       },
+      ...makeComponentProps(),
       ...makeSelectionControlGroupProps()
     },
     emits: {
@@ -6419,7 +6653,8 @@
       useRender(() => vue.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 {};
@@ -6433,6 +6668,7 @@
     trueValue: null,
     falseValue: null,
     value: null,
+    ...makeComponentProps(),
     ...makeSelectionControlGroupProps()
   }, 'v-selection-control');
   function useSelectionControl(props) {
@@ -6547,8 +6783,10 @@
             'v-selection-control--focused': isFocused.value,
             'v-selection-control--focus-visible': isFocusVisible.value,
             'v-selection-control--inline': props.inline
-          }, densityClasses.value]
-        }, rootAttrs), [vue.createVNode("div", {
+          }, densityClasses.value, props.class]
+        }, rootAttrs, {
+          "style": props.style
+        }), [vue.createVNode("div", {
           "class": ['v-selection-control__wrapper', textColorClasses.value],
           "style": textColorStyles.value
         }, [slots.default?.(), vue.withDirectives(vue.createVNode("div", {
@@ -6630,7 +6868,8 @@
       useRender(() => vue.createVNode(VSelectionControl, vue.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,
@@ -6670,10 +6909,11 @@
         const [inputProps, _1] = VInput.filterProps(props);
         const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.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 => {
@@ -6704,6 +6944,7 @@
     end: Boolean,
     icon: IconValue,
     image: String,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
     ...makeSizeProps(),
@@ -6742,8 +6983,8 @@
         "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 ? vue.createVNode(VImg, {
           "key": "image",
@@ -6771,6 +7012,7 @@
         type: Function,
         default: deepEqual
       },
+      ...makeComponentProps(),
       ...makeGroupProps({
         selectedClass: 'v-chip--selected'
       }),
@@ -6808,7 +7050,8 @@
       useRender(() => vue.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,
@@ -6822,8 +7065,6 @@
     }
   });
 
-  // Types
-
   const VChip = genericComponent()({
     name: 'VChip',
     directives: {
@@ -6868,6 +7109,7 @@
       onClick: EventProp(),
       onClickOnce: EventProp(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeGroupItemProps(),
@@ -6960,8 +7202,8 @@
             '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,
@@ -7070,6 +7312,7 @@
       length: [Number, String],
       thickness: [Number, String],
       vertical: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps()
     },
     setup(props, _ref) {
@@ -7098,8 +7341,8 @@
           '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));
@@ -7598,6 +7841,7 @@
     fluid: Boolean,
     subgroup: Boolean,
     value: null,
+    ...makeComponentProps(),
     ...makeTagProps()
   }, 'v-list-group');
   const VListGroup = genericComponent()({
@@ -7646,7 +7890,8 @@
           '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 && vue.createVNode(VDefaultsProvider, {
           "defaults": activatorDefaults.value
@@ -7713,6 +7958,7 @@
       onClick: EventProp(),
       onClickOnce: EventProp(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -7823,8 +8069,8 @@
             '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,
@@ -7917,6 +8163,7 @@
       inset: Boolean,
       sticky: Boolean,
       title: String,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -7933,10 +8180,10 @@
           "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 && vue.createVNode("div", {
             "class": "v-list-subheader__text"
@@ -8156,6 +8403,7 @@
         openStrategy: 'list'
       }),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -8267,8 +8515,8 @@
           "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,
@@ -8296,6 +8544,7 @@
     props: {
       start: Boolean,
       end: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -8306,7 +8555,8 @@
         "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 {};
     }
@@ -8317,6 +8567,7 @@
     props: {
       start: Boolean,
       end: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -8328,7 +8579,8 @@
           "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 {};
@@ -9569,6 +9821,7 @@
       default: 2000
     },
     ...makeActivatorProps(),
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeLazyProps(),
     ...makeLocationStrategyProps(),
@@ -9736,10 +9989,10 @@
             '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), [vue.createVNode(Scrim, vue.mergeProps({
           "color": scrimColor,
@@ -9845,7 +10098,8 @@
         const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
-          "class": ['v-menu']
+          "class": ['v-menu', props.class],
+          "style": props.style
         }, overlayProps, {
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
@@ -10064,7 +10318,8 @@
             '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,
@@ -10507,7 +10762,8 @@
             '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,
@@ -10621,8 +10877,6 @@
     }
   });
 
-  // Types
-
   const VBadge = genericComponent()({
     name: 'VBadge',
     inheritAttrs: false,
@@ -10646,6 +10900,7 @@
       offsetX: [Number, String],
       offsetY: [Number, String],
       textColor: String,
+      ...makeComponentProps(),
       ...makeLocationProps({
         location: 'top end'
       }),
@@ -10690,8 +10945,10 @@
             'v-badge--dot': props.dot,
             'v-badge--floating': props.floating,
             'v-badge--inline': props.inline
-          }]
-        }, attrs), {
+          }, props.class]
+        }, attrs, {
+          "style": props.style
+        }), {
           default: () => [vue.createVNode("div", {
             "class": "v-badge__wrapper"
           }, [ctx.slots.default?.(), vue.createVNode(MaybeTransition, {
@@ -10718,7 +10975,8 @@
     name: 'VBannerActions',
     props: {
       color: String,
-      density: String
+      density: String,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -10732,7 +10990,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-banner-actions"
+        "class": ['v-banner-actions', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -10753,6 +11012,7 @@
       sticky: Boolean,
       text: String,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -10810,8 +11070,8 @@
             '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 && vue.createVNode("div", {
@@ -10867,6 +11127,7 @@
         default: true
       },
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeRoundedProps(),
@@ -10941,11 +11202,11 @@
             '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 && vue.createVNode("div", {
             "class": "v-bottom-navigation__content"
@@ -10959,14 +11220,16 @@
   const VBreadcrumbsDivider = genericComponent()({
     name: 'VBreadcrumbsDivider',
     props: {
-      divider: [Number, String]
+      divider: [Number, String],
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
       useRender(() => vue.createVNode("li", {
-        "class": "v-breadcrumbs-divider"
+        "class": ['v-breadcrumbs-divider', props.class],
+        "style": props.style
       }, [slots?.default?.() ?? props.divider]));
       return {};
     }
@@ -10981,6 +11244,7 @@
       color: String,
       disabled: Boolean,
       title: String,
+      ...makeComponentProps(),
       ...makeRouterProps(),
       ...makeTagProps({
         tag: 'li'
@@ -11006,8 +11270,8 @@
             '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
@@ -11038,6 +11302,7 @@
         type: Array,
         default: () => []
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeRoundedProps(),
       ...makeTagProps({
@@ -11083,8 +11348,8 @@
       useRender(() => {
         const hasPrepend = !!(slots.prepend || props.icon);
         return vue.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 && vue.createVNode("div", {
             "key": "prepend",
@@ -11128,11 +11393,10 @@
     }
   });
 
-  // Types
-
-  const VCardActions = defineComponent({
+  const VCardActions = genericComponent()({
     name: 'VCardActions',
-    setup(_, _ref) {
+    props: makeComponentProps(),
+    setup(props, _ref) {
       let {
         slots
       } = _ref;
@@ -11142,7 +11406,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-card-actions"
+        "class": ['v-card-actions', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -11152,8 +11417,6 @@
 
   const VCardTitle = createSimpleFunctional('v-card-title');
 
-  // Types
-
   const VCardItem = genericComponent()({
     name: 'VCardItem',
     props: {
@@ -11163,6 +11426,7 @@
       prependIcon: IconValue,
       subtitle: String,
       title: String,
+      ...makeComponentProps(),
       ...makeDensityProps()
     },
     setup(props, _ref) {
@@ -11177,7 +11441,8 @@
         const hasTitle = !!(props.title || slots.title);
         const hasSubtitle = !!(props.subtitle || slots.subtitle);
         return vue.createVNode("div", {
-          "class": "v-card-item"
+          "class": ['v-card-item', props.class],
+          "style": props.style
         }, [hasPrepend && vue.createVNode("div", {
           "key": "prepend",
           "class": "v-card-item__prepend"
@@ -11259,8 +11524,8 @@
       subtitle: String,
       text: String,
       title: String,
-      ...makeThemeProps(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -11270,6 +11535,7 @@
       ...makeRoundedProps(),
       ...makeRouterProps(),
       ...makeTagProps(),
+      ...makeThemeProps(),
       ...makeVariantProps({
         variant: 'elevated'
       })
@@ -11330,8 +11596,8 @@
             '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
@@ -11527,6 +11793,7 @@
     mandatory: {
       default: 'force'
     },
+    ...makeComponentProps(),
     ...makeTagProps(),
     ...makeThemeProps()
   }, 'v-window');
@@ -11642,7 +11909,8 @@
         "ref": rootRef,
         "class": ['v-window', {
           'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-        }, themeClasses.value]
+        }, themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [vue.createVNode("div", {
           "class": "v-window__container",
@@ -11727,10 +11995,10 @@
         "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
@@ -11796,6 +12064,7 @@
         type: [Boolean, String],
         default: undefined
       },
+      ...makeComponentProps(),
       ...makeGroupItemProps(),
       ...makeLazyProps()
     },
@@ -11882,7 +12151,8 @@
         "disabled": !isBooted.value
       }, {
         default: () => [vue.withDirectives(vue.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?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
       return {};
@@ -11895,7 +12165,8 @@
     name: 'VCarouselItem',
     inheritAttrs: false,
     props: {
-      value: null
+      value: null,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -11903,7 +12174,8 @@
         attrs
       } = _ref;
       useRender(() => vue.createVNode(VWindowItem, {
-        "class": "v-carousel-item",
+        "class": ['v-carousel-item', props.class],
+        "style": props.style,
         "value": props.value
       }, {
         default: () => [vue.createVNode(VImg, attrs, slots)]
@@ -11916,6 +12188,7 @@
   const makeVSheetProps = propsFactory({
     color: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
     ...makeLocationProps(),
@@ -11959,8 +12232,8 @@
         roundedClasses
       } = useRounded(props);
       useRender(() => vue.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 {};
     }
@@ -11986,7 +12259,8 @@
       width: {
         type: [Number, String],
         default: 300
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true,
@@ -12131,7 +12405,8 @@
       vue.onMounted(() => updateCanvas());
       useRender(() => vue.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
@@ -12364,7 +12639,8 @@
         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,
@@ -12404,7 +12680,8 @@
         });
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-color-picker-edit"
+        "class": ['v-color-picker-edit', props.class],
+        "style": props.style
       }, [inputs.value?.map(props => vue.createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && vue.createVNode(VBtn, {
         "icon": "$unfold",
         "size": "x-small",
@@ -12488,11 +12765,33 @@
       elevation: 2
     })
   }, 'slider');
+  const useSteps = props => {
+    const min = vue.computed(() => parseFloat(props.min));
+    const max = vue.computed(() => parseFloat(props.max));
+    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+    const decimals = vue.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 {
@@ -12506,10 +12805,13 @@
       }
       return hd;
     });
-    const min = vue.computed(() => parseFloat(props.min));
-    const max = vue.computed(() => parseFloat(props.max));
-    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
-    const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
+    const {
+      min,
+      max,
+      step,
+      decimals,
+      roundValue
+    } = steps;
     const thumbSize = vue.computed(() => parseInt(props.thumbSize, 10));
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
@@ -12523,13 +12825,6 @@
     const startOffset = vue.ref(0);
     const trackContainerRef = vue.ref();
     const activeThumbRef = vue.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';
@@ -12546,14 +12841,11 @@
       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 => {
@@ -12562,20 +12854,25 @@
       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();
@@ -12703,7 +13000,8 @@
       ripple: {
         type: Boolean,
         default: true
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {
       'update:modelValue': v => true
@@ -12781,11 +13079,11 @@
           "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,
@@ -12831,7 +13129,8 @@
       stop: {
         type: Number,
         required: true
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {},
     setup(props, _ref) {
@@ -12906,12 +13205,12 @@
       });
       useRender(() => {
         return vue.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]
         }, [vue.createVNode("div", {
           "class": ['v-slider-track__background', trackColorClasses.value, {
             'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
@@ -12951,13 +13250,21 @@
     },
     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 = vue.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,
@@ -12971,16 +13278,26 @@
         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,
@@ -12996,7 +13313,8 @@
             'v-slider--focused': isFocused.value,
             'v-slider--pressed': mousePressed.value,
             'v-slider--disabled': props.disabled
-          }]
+          }, props.class],
+          "style": props.style
         }, inputProps, {
           "focused": isFocused.value
         }), {
@@ -13006,11 +13324,11 @@
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-          default: _ref2 => {
+          default: _ref4 => {
             let {
               id,
               messagesId
-            } = _ref2;
+            } = _ref4;
             return vue.createVNode("div", {
               "class": "v-slider__container",
               "onMousedown": !readonly.value ? onSliderMousedown : undefined,
@@ -13059,7 +13377,8 @@
         type: Object
       },
       disabled: Boolean,
-      hideAlpha: Boolean
+      hideAlpha: Boolean,
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true
@@ -13071,7 +13390,8 @@
       useRender(() => vue.createVNode("div", {
         "class": ['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
-        }]
+        }, props.class],
+        "style": props.style
       }, [vue.createVNode("div", {
         "class": "v-color-picker-preview__dot"
       }, [vue.createVNode("div", {
@@ -13452,7 +13772,8 @@
       },
       disabled: Boolean,
       color: Object,
-      maxHeight: [Number, String]
+      maxHeight: [Number, String],
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true
@@ -13462,10 +13783,10 @@
         emit
       } = _ref;
       useRender(() => vue.createVNode("div", {
-        "class": "v-color-picker-swatches",
-        "style": {
+        "class": ['v-color-picker-swatches', props.class],
+        "style": [{
           maxHeight: convertToUnit(props.maxHeight)
-        }
+        }, props.style]
       }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
@@ -13569,13 +13890,13 @@
           "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
         }), {
@@ -13886,7 +14207,8 @@
             '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,
@@ -14084,7 +14406,8 @@
           "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,
@@ -14123,6 +14446,7 @@
         validator: v => allowedVariants.includes(v)
       },
       readonly: Boolean,
+      ...makeComponentProps(),
       ...makeGroupProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -14148,7 +14472,8 @@
         }
       });
       useRender(() => vue.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 {};
     }
@@ -14177,6 +14502,7 @@
       Ripple
     },
     props: {
+      ...makeComponentProps(),
       ...makeVExpansionPanelTitleProps()
     },
     setup(props, _ref) {
@@ -14199,8 +14525,8 @@
       useRender(() => vue.withDirectives(vue.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,
@@ -14220,6 +14546,7 @@
   const VExpansionPanelText = genericComponent()({
     name: 'VExpansionPanelText',
     props: {
+      ...makeComponentProps(),
       ...makeLazyProps()
     },
     setup(props, _ref) {
@@ -14236,7 +14563,8 @@
         "onAfterLeave": onAfterLeave
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": "v-expansion-panel-text"
+          "class": ['v-expansion-panel-text', props.class],
+          "style": props.style
         }, [slots.default && hasContent.value && vue.createVNode("div", {
           "class": "v-expansion-panel-text__wrapper"
         }, [slots.default?.()])]), [[vue.vShow, expansionPanel.isSelected.value]])]
@@ -14251,6 +14579,7 @@
       title: String,
       text: String,
       bgColor: String,
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeGroupItemProps(),
       ...makeLazyProps(),
@@ -14299,8 +14628,8 @@
             '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: () => [vue.createVNode("div", {
@@ -14450,7 +14779,8 @@
           "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
@@ -14542,6 +14872,7 @@
         default: 'auto'
       },
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -14591,8 +14922,8 @@
       });
       useRender(() => vue.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 {};
     }
@@ -14603,6 +14934,7 @@
   const VForm = genericComponent()({
     name: 'VForm',
     props: {
+      ...makeComponentProps(),
       ...makeFormProps()
     },
     emits: {
@@ -14641,7 +14973,8 @@
       }
       useRender(() => vue.createVNode("form", {
         "ref": formRef,
-        "class": "v-form",
+        "class": ['v-form', props.class],
+        "style": props.style,
         "novalidate": true,
         "onReset": onReset,
         "onSubmit": onSubmit
@@ -14657,6 +14990,7 @@
         type: Boolean,
         default: false
       },
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -14666,7 +15000,8 @@
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-container', {
           'v-container--fluid': props.fluid
-        }]
+        }, props.class],
+        "style": props.style
       }, slots));
       return {};
     }
@@ -14757,6 +15092,7 @@
         default: null,
         validator: str => ALIGN_SELF_VALUES.includes(str)
       },
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -14787,7 +15123,8 @@
         return classList;
       });
       return () => vue.h(props.tag, {
-        class: classes.value
+        class: [classes.value, props.class],
+        style: props.style
       }, slots.default?.());
     }
   });
@@ -14873,6 +15210,7 @@
         validator: alignContentValidator
       },
       ...alignContentProps,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -14901,7 +15239,8 @@
         return classList;
       });
       return () => vue.h(props.tag, {
-        class: ['v-row', classes.value]
+        class: ['v-row', classes.value, props.class],
+        style: props.style
       }, slots.default?.());
     }
   });
@@ -14945,6 +15284,7 @@
   const VItemGroup = genericComponent()({
     name: 'VItemGroup',
     props: {
+      ...makeComponentProps(),
       ...makeGroupProps({
         selectedClass: 'v-item--selected'
       }),
@@ -14969,7 +15309,8 @@
         selected
       } = useGroup(props, VItemGroupSymbol);
       return () => vue.createVNode(props.tag, {
-        "class": ['v-item-group', themeClasses.value]
+        "class": ['v-item-group', themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [slots.default?.({
           isSelected,
@@ -15019,7 +15360,10 @@
 
   const VLayout = genericComponent()({
     name: 'VLayout',
-    props: makeLayoutProps(),
+    props: {
+      ...makeComponentProps(),
+      ...makeLayoutProps()
+    },
     setup(props, _ref) {
       let {
         slots
@@ -15033,8 +15377,8 @@
       } = createLayout(props);
       useRender(() => vue.createVNode("div", {
         "ref": layoutRef,
-        "class": layoutClasses.value,
-        "style": layoutStyles.value
+        "class": [layoutClasses.value, props.class],
+        "style": [layoutStyles.value, props.style]
       }, [slots.default?.()]));
       return {
         getLayoutItem,
@@ -15057,6 +15401,7 @@
         default: 300
       },
       modelValue: Boolean,
+      ...makeComponentProps(),
       ...makeLayoutItemProps()
     },
     setup(props, _ref) {
@@ -15075,8 +15420,8 @@
         absolute: vue.toRef(props, 'absolute')
       });
       return () => vue.createVNode("div", {
-        "class": ['v-layout-item'],
-        "style": layoutItemStyles.value
+        "class": ['v-layout-item', props.class],
+        "style": [layoutItemStyles.value, props.style]
       }, [slots.default?.()]);
     }
   });
@@ -15100,6 +15445,7 @@
           threshold: undefined
         })
       },
+      ...makeComponentProps(),
       ...makeDimensionProps(),
       ...makeTagProps(),
       ...makeTransitionProps({
@@ -15122,8 +15468,8 @@
         isActive.value = isIntersecting;
       }
       useRender(() => vue.withDirectives(vue.createVNode(props.tag, {
-        "class": "v-lazy",
-        "style": dimensionStyles.value
+        "class": ['v-lazy', props.class],
+        "style": [dimensionStyles.value, props.style]
       }, {
         default: () => [isActive.value && vue.createVNode(MaybeTransition, {
           "transition": props.transition,
@@ -15148,7 +15494,8 @@
       rtl: {
         type: Boolean,
         default: undefined
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -15158,7 +15505,8 @@
         rtlClasses
       } = provideLocale(props);
       useRender(() => vue.createVNode("div", {
-        "class": ['v-locale-provider', rtlClasses.value]
+        "class": ['v-locale-provider', rtlClasses.value, props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -15168,6 +15516,7 @@
     name: 'VMain',
     props: {
       scrollable: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps({
         tag: 'main'
       })
@@ -15185,8 +15534,8 @@
       useRender(() => vue.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 ? vue.createVNode("div", {
           "class": "v-main__scroller"
@@ -15532,6 +15881,7 @@
       },
       sticky: Boolean,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -15683,8 +16033,8 @@
             '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 && vue.createVNode("div", {
             "key": "image",
@@ -15813,6 +16163,7 @@
       },
       showFirstLastPage: Boolean,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeRoundedProps(),
@@ -16009,7 +16360,8 @@
       }
       useRender(() => vue.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,
@@ -16068,7 +16420,8 @@
       scale: {
         type: [Number, String],
         default: 0.5
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -16130,7 +16483,8 @@
       useRender(() => vue.createVNode(VImg, {
         "class": ['v-parallax', {
           'v-parallax--active': isIntersecting.value
-        }],
+        }, props.class],
+        "style": props.style,
         "ref": root,
         "cover": true,
         "onLoadstart": onScroll,
@@ -16155,7 +16509,8 @@
         slots
       } = _ref;
       useRender(() => vue.createVNode(VSelectionControl, vue.mergeProps(props, {
-        "class": "v-radio",
+        "class": ['v-radio', props.class],
+        "style": props.style,
         "type": "radio"
       }), slots));
       return {};
@@ -16209,7 +16564,8 @@
           }
         }) : props.label;
         return vue.createVNode(VInput, vue.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,
@@ -16265,11 +16621,14 @@
     },
     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 = vue.ref();
       const stopThumbRef = vue.ref();
@@ -16282,6 +16641,11 @@
         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,
@@ -16291,34 +16655,37 @@
         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,
@@ -16336,7 +16703,8 @@
             '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
@@ -16346,11 +16714,11 @@
             "class": "v-slider__label",
             "text": props.label
           }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-          default: _ref2 => {
+          default: _ref4 => {
             let {
               id,
               messagesId
-            } = _ref2;
+            } = _ref4;
             return vue.createVNode("div", {
               "class": "v-slider__container",
               "onMousedown": onSliderMousedown,
@@ -16479,6 +16847,7 @@
         validator: v => ['top', 'bottom'].includes(v)
       },
       ripple: Boolean,
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeSizeProps(),
       ...makeTagProps(),
@@ -16502,9 +16871,6 @@
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
       const hoverIndex = vue.ref(-1);
-      const focusIndex = vue.ref(-1);
-      const firstRef = vue.ref();
-      let isClicking = false;
       const itemState = vue.computed(() => increments.value.map(value => {
         const isHovering = props.hover && hoverIndex.value > -1;
         const isFilled = normalizedValue.value >= value;
@@ -16527,16 +16893,6 @@
         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;
@@ -16544,17 +16900,9 @@
         return {
           onMouseenter: props.hover ? onMouseenter : undefined,
           onMouseleave: props.hover ? onMouseleave : undefined,
-          onFocus,
-          onBlur,
           onClick
         };
       }));
-      function onMousedown() {
-        isClicking = true;
-      }
-      function onMouseup() {
-        isClicking = false;
-      }
       const name = vue.computed(() => props.name ?? `v-rating-${getUid()}`);
       function VRatingItem(_ref2) {
         let {
@@ -16565,8 +16913,6 @@
         const {
           onMouseenter,
           onMouseleave,
-          onFocus,
-          onBlur,
           onClick
         } = eventState.value[index + 1];
         const id = `${name.value}-${String(value).replace('.', '-')}`;
@@ -16577,7 +16923,6 @@
           icon: itemState.value[index]?.icon,
           ripple: props.ripple,
           size: props.size,
-          tag: 'span',
           variant: 'plain'
         };
         return vue.createVNode(vue.Fragment, null, [vue.createVNode("label", {
@@ -16586,17 +16931,17 @@
             '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
         }, [vue.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
         }) : vue.createVNode(VBtn, btnProps, null)]), vue.createVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
@@ -16604,10 +16949,7 @@
           "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)]);
@@ -16623,7 +16965,8 @@
           "class": ['v-rating', {
             'v-rating--hover': props.hover,
             'v-rating--readonly': props.readonly
-          }, themeClasses.value]
+          }, themeClasses.value, props.class],
+          "style": props.style
         }, {
           default: () => [vue.createVNode(VRatingItem, {
             "value": 0,
@@ -16636,9 +16979,7 @@
             index: i,
             label: props.itemLabels?.[i]
           }) : undefined, vue.createVNode("div", {
-            "class": ['v-rating__item', {
-              'v-rating__item--focused': Math.ceil(focusIndex.value) === value
-            }]
+            "class": "v-rating__item"
           }, [props.halfIncrements ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
             "value": value - 0.5,
             "index": i * 2
@@ -16725,6 +17066,7 @@
       type: [Boolean, String],
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
+    ...makeComponentProps(),
     ...makeTagProps(),
     ...makeGroupProps({
       selectedClass: 'v-slide-group-item--active'
@@ -16965,7 +17307,8 @@
           '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
       }, {
@@ -17115,7 +17458,8 @@
             '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,
@@ -17215,7 +17559,8 @@
             '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
@@ -17284,6 +17629,7 @@
       color: String,
       height: [Number, String],
       window: Boolean,
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -17325,8 +17671,8 @@
       useRender(() => vue.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 {};
     }
@@ -17338,7 +17684,6 @@
     name: 'VTab',
     props: {
       fixed: Boolean,
-      title: String,
       sliderColor: String,
       hideSlider: Boolean,
       direction: {
@@ -17400,10 +17745,10 @@
       useRender(() => {
         const [btnProps] = VBtn.filterProps(props);
         return vue.createVNode(VBtn, vue.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),
@@ -17414,7 +17759,7 @@
         }, btnProps, attrs, {
           "onGroup:selected": updateSlider
         }), {
-          default: () => [slots.default ? slots.default() : props.title, !props.hideSlider && vue.createVNode("div", {
+          default: () => [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
             "ref": sliderEl,
             "class": ['v-tab__slider', sliderColorClasses.value],
             "style": sliderColorStyles.value
@@ -17498,10 +17843,10 @@
             '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
         }), {
@@ -17521,6 +17866,7 @@
       fixedFooter: Boolean,
       height: [Number, String],
       hover: Boolean,
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -17543,7 +17889,8 @@
           '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 ? vue.createVNode("div", {
           "class": "v-table__wrapper",
@@ -17708,7 +18055,8 @@
             '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
         }), {
@@ -17792,6 +18140,7 @@
     name: 'VThemeProvider',
     props: {
       withBackground: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps(),
       ...makeTagProps()
     },
@@ -17805,7 +18154,8 @@
       return () => {
         if (!props.withBackground) return slots.default?.();
         return vue.createVNode(props.tag, {
-          "class": ['v-theme-provider', themeClasses.value]
+          "class": ['v-theme-provider', themeClasses.value, props.class],
+          "style": props.style
         }, {
           default: () => [slots.default?.()]
         });
@@ -17850,6 +18200,7 @@
         type: String,
         validator: v => ['start', 'end', 'both'].includes(v)
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -17893,10 +18244,10 @@
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
           'v-timeline--inset-line': !!props.lineInset
-        }, themeClasses.value, densityClasses.value, sideClasses.value],
-        "style": {
+        }, themeClasses.value, densityClasses.value, sideClasses.value, props.class],
+        "style": [{
           '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-        }
+        }, props.style]
       }, slots));
       return {};
     }
@@ -17911,6 +18262,7 @@
       icon: IconValue,
       iconColor: String,
       lineColor: String,
+      ...makeComponentProps(),
       ...makeRoundedProps(),
       ...makeSizeProps(),
       ...makeElevationProps()
@@ -17940,7 +18292,8 @@
       useRender(() => vue.createVNode("div", {
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
-        }]
+        }, props.class],
+        "style": props.style
       }, [vue.createVNode("div", {
         "class": ['v-timeline-divider__before', lineColorClasses.value],
         "style": lineColorStyles.value
@@ -17990,11 +18343,12 @@
       icon: IconValue,
       iconColor: String,
       lineInset: [Number, String],
-      ...makeRoundedProps(),
+      ...makeComponentProps(),
+      ...makeDimensionProps(),
       ...makeElevationProps(),
+      ...makeRoundedProps(),
       ...makeSizeProps(),
-      ...makeTagProps(),
-      ...makeDimensionProps()
+      ...makeTagProps()
     },
     setup(props, _ref) {
       let {
@@ -18014,11 +18368,11 @@
       useRender(() => vue.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]
       }, [vue.createVNode("div", {
         "class": "v-timeline-item__body",
         "style": dimensionStyles.value
@@ -18052,6 +18406,7 @@
         closeOnBack: false,
         location: 'end',
         locationStrategy: 'connected',
+        eager: true,
         minWidth: 0,
         offset: 10,
         openOnClick: false,
@@ -18060,7 +18415,7 @@
         scrim: false,
         scrollStrategy: 'reposition',
         transition: false
-      }), ['absolute', 'persistent', 'eager'])
+      }), ['absolute', 'persistent'])
     },
     emits: {
       'update:modelValue': value => true
@@ -18093,7 +18448,8 @@
         const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
-          "class": ['v-tooltip'],
+          "class": ['v-tooltip', props.class],
+          "style": props.style,
           "id": id.value
         }, overlayProps, {
           "modelValue": isActive.value,
@@ -18104,7 +18460,6 @@
           "origin": origin.value,
           "persistent": true,
           "role": "tooltip",
-          "eager": true,
           "activatorProps": activatorProps.value,
           "_disableGlobalStack": true
         }, scopeId), {
@@ -18139,69 +18494,239 @@
     }
   });
 
-  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 vue.createVNode(Tag, vue.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, () => {
+        vue.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?.()]
-    });
+      vue.onUpdated(updateHeight);
+      useRender(() => vue.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 = vue.ref([]);
-    const columns = vue.ref([]);
-    vue.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 = vue.ref(0);
+      const baseItemHeight = vue.ref(props.itemHeight);
+      const itemHeight = vue.computed({
+        get: () => parseInt(baseItemHeight.value ?? 0, 10),
+        set(val) {
+          baseItemHeight.value = val;
+        }
+      });
+      const rootEl = vue.ref();
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      vue.watchEffect(() => {
+        resizeRef.value = rootEl.value;
+      });
+      const display = useDisplay();
+      const sizeMap = new Map();
+      let sizes = createRange(props.items.length).map(() => itemHeight.value);
+      const visibleItems = vue.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 = vue.computed(() => props.items.map((item, index) => ({
+        raw: item,
+        index
+      })));
+      const last = vue.computed(() => Math.min(props.items.length, first.value + visibleItems.value));
+      const computedItems = vue.computed(() => items.value.slice(first.value, last.value));
+      const paddingTop = vue.computed(() => calculateOffset(first.value));
+      const paddingBottom = vue.computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      vue.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;
+        }
+      });
+      vue.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(() => vue.createVNode("div", {
+        "ref": rootEl,
+        "class": ['v-virtual-scroll', props.class],
+        "onScroll": handleScroll,
+        "style": [dimensionStyles.value, props.style]
+      }, [vue.createVNode("div", {
+        "class": "v-virtual-scroll__container",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value),
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, [computedItems.value.map(item => vue.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 vue.createVNode(Tag, vue.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 = vue.ref([]);
+    const columns = vue.ref([]);
+    vue.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 {
@@ -19549,8 +20074,8 @@
       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) {
@@ -19588,12 +20113,12 @@
         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;
@@ -19906,6 +20431,211 @@
 
   // 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);
+      vue.watch(isIntersecting, async val => {
+        if (val) emit('intersect', props.side);
+      });
+      useRender(() => vue.createVNode("div", {
+        "class": "v-infinite-scroll-intersect",
+        "ref": intersectionRef
+      }, [vue.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 = vue.ref();
+      const startStatus = vue.ref('ok');
+      const endStatus = vue.ref('ok');
+      const margin = vue.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];
+      }
+      vue.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);
+          vue.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) ?? vue.createVNode("div", null, [t(props.emptyText)]);
+        if (props.mode === 'manual') {
+          if (status === 'loading') {
+            return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
+              "indeterminate": true,
+              "color": props.color
+            }, null);
+          }
+          return slots['load-more']?.(slotProps) ?? vue.createVNode(VBtn, {
+            "variant": "outlined",
+            "color": props.color,
+            "onClick": onClick
+          }, {
+            default: () => [t(props.loadMoreText)]
+          });
+        }
+        return slots.loading?.(slotProps) ?? vue.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 vue.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
+        }, [vue.createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          "key": "start",
+          "side": "start",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          "key": "end",
+          "side": "end",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), vue.createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('end', endStatus.value)])]);
+      });
+    }
+  });
+
+  // Types
+
   const rootTypes = {
     actions: 'button@2',
     article: 'heading, paragraph',
@@ -20036,177 +20766,6 @@
     }
   });
 
-  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, () => {
-        vue.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);
-        }
-      }
-      vue.onUpdated(updateHeight);
-      useRender(() => vue.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 = vue.ref(0);
-      const baseItemHeight = vue.ref(props.itemHeight);
-      const itemHeight = vue.computed({
-        get: () => parseInt(baseItemHeight.value ?? 0, 10),
-        set(val) {
-          baseItemHeight.value = val;
-        }
-      });
-      const rootEl = vue.ref();
-      const {
-        resizeRef,
-        contentRect
-      } = useResizeObserver();
-      vue.watchEffect(() => {
-        resizeRef.value = rootEl.value;
-      });
-      const display = useDisplay();
-      const sizeMap = new Map();
-      let sizes = createRange(props.items.length).map(() => itemHeight.value);
-      const visibleItems = vue.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 = vue.computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-      const computedItems = vue.computed(() => props.items.slice(first.value, last.value));
-      const paddingTop = vue.computed(() => calculateOffset(first.value));
-      const paddingBottom = vue.computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
-      const {
-        dimensionStyles
-      } = useDimension(props);
-      vue.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;
-        }
-      });
-      vue.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(() => vue.createVNode("div", {
-        "ref": rootEl,
-        "class": "v-virtual-scroll",
-        "onScroll": handleScroll,
-        "style": dimensionStyles.value
-      }, [vue.createVNode("div", {
-        "class": "v-virtual-scroll__container",
-        "style": {
-          paddingTop: convertToUnit(paddingTop.value),
-          paddingBottom: convertToUnit(paddingBottom.value)
-        }
-      }, [computedItems.value.map((item, index) => vue.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,
@@ -20276,6 +20835,7 @@
     VHover: VHover,
     VIcon: VIcon,
     VImg: VImg,
+    VInfiniteScroll: VInfiniteScroll,
     VInput: VInput,
     VItem: VItem,
     VItemGroup: VItemGroup,
@@ -20478,6 +21038,418 @@
     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] : {};
@@ -20496,6 +21468,7 @@
     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]);
@@ -20516,6 +21489,7 @@
       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', () => {
@@ -20543,7 +21517,8 @@
                 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)
               });
             }
           }
@@ -20556,10 +21531,11 @@
       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
@@ -20571,7 +21547,7 @@
     }
   }
 
-  const version = "3.1.16";
+  const version = "3.2.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20585,6 +21561,7 @@
   exports.components = components;
   exports.createVuetify = createVuetify;
   exports.directives = directives;
+  exports.useDefaults = useDefaults;
   exports.useDisplay = useDisplay;
   exports.useLayout = useLayout;
   exports.useLocale = useLocale;