@vuetify/nightly 4.0.0-dev-20230426.0 → 4.0.0-dev-20230511.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230426.0
+* Vuetify v4.0.0-dev-20230511.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -171,11 +171,14 @@
   function keys(o) {
     return Object.keys(o);
   }
-  function pick(obj, paths) {
+  function has(obj, key) {
+    return key.every(k => obj.hasOwnProperty(k));
+  }
+  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];
@@ -360,6 +363,32 @@
       handler(...args);
     }
   }
+  function focusableChildren(el) {
+    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"]):not([disabled])`).join(', ');
+    return [...el.querySelectorAll(targets)];
+  }
+  function focusChild(el, location) {
+    const focusable = focusableChildren(el);
+    const idx = focusable.indexOf(document.activeElement);
+    if (!location) {
+      if (!el.contains(document.activeElement)) {
+        focusable[0]?.focus();
+      }
+    } else if (location === 'first') {
+      focusable[0]?.focus();
+    } else if (location === 'last') {
+      focusable.at(-1)?.focus();
+    } else {
+      let _el;
+      let idxx = idx;
+      const inc = location === 'next' ? 1 : -1;
+      do {
+        idxx += inc;
+        _el = focusable[idxx];
+      } while ((!_el || _el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+      if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
+    }
+  }
 
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -512,79 +541,15 @@
   }
 
   /* eslint-disable no-console */
-  // import Vuetify from '../framework'
-
-  function createMessage(message, vm, parent) {
-    // if (Vuetify.config.silent) return
-
-    if (parent) {
-      vm = {
-        __isVue: true,
-        $parent: parent,
-        $options: vm
-      };
-    }
-    if (vm) {
-      // Only show each message once per instance
-      vm.$_alreadyWarned = vm.$_alreadyWarned || [];
-      if (vm.$_alreadyWarned.includes(message)) return;
-      vm.$_alreadyWarned.push(message);
-    }
-    return `[Vuetify] ${message}` + (vm ? generateComponentTrace(vm) : '');
-  }
-  function consoleWarn(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.warn(newMessage);
+  function consoleWarn(message) {
+    vue.warn(`Vuetify: ${message}`);
   }
-  function consoleError(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.error(newMessage);
+  function consoleError(message) {
+    vue.warn(`Vuetify error: ${message}`);
   }
-
-  /**
-   * Shamelessly stolen from vuejs/vue/blob/dev/src/core/util/debug.js
-   */
-
-  const classifyRE = /(?:^|[-_])(\w)/g;
-  const classify = str => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
-  function formatComponentName(vm, includeFile) {
-    if (vm.$root === vm) {
-      return '<Root>';
-    }
-    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm.__isVue ? vm.$options || vm.constructor.options : vm || {};
-    let name = options.name || options._componentTag;
-    const file = options.__file;
-    if (!name && file) {
-      const match = file.match(/([^/\\]+)\.vue$/);
-      name = match?.[1];
-    }
-    return (name ? `<${classify(name)}>` : `<Anonymous>`) + (file && includeFile !== false ? ` at ${file}` : '');
-  }
-  function generateComponentTrace(vm) {
-    if (vm.__isVue && vm.$parent) {
-      const tree = [];
-      let currentRecursiveSequence = 0;
-      while (vm) {
-        if (tree.length > 0) {
-          const last = tree[tree.length - 1];
-          if (last.constructor === vm.constructor) {
-            currentRecursiveSequence++;
-            vm = vm.$parent;
-            continue;
-          } else if (currentRecursiveSequence > 0) {
-            tree[tree.length - 1] = [last, currentRecursiveSequence];
-            currentRecursiveSequence = 0;
-          }
-        }
-        tree.push(vm);
-        vm = vm.$parent;
-      }
-      return '\n\nfound in\n\n' + tree.map((vm, i) => `${i === 0 ? '---> ' : ' '.repeat(5 + i * 2)}${Array.isArray(vm)
-    // eslint-disable-next-line sonarjs/no-nested-template-literals
-    ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)` : formatComponentName(vm)}`).join('\n');
-    } else {
-      return `\n\n(found in ${formatComponentName(vm)})`;
-    }
+  function deprecate(original, replacement) {
+    replacement = Array.isArray(replacement) ? replacement.slice(0, -1).map(s => `'${s}'`).join(', ') + ` or '${replacement.at(-1)}'` : `'${replacement}'`;
+    vue.warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
   }
 
   // For converting XYZ to sRGB
@@ -658,7 +623,46 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function parseColor$1(color) {
+  const cssColorRe = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/;
+  const mappers = {
+    rgb: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    rgba: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    hsl: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsla: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsv: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    }),
+    hsva: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    })
+  };
+  function parseColor(color) {
     if (typeof color === 'number') {
       if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
         // int can't have opacity
@@ -669,6 +673,22 @@
         g: (color & 0xFF00) >> 8,
         b: color & 0xFF
       };
+    } else if (typeof color === 'string' && cssColorRe.test(color)) {
+      const {
+        groups
+      } = color.match(cssColorRe);
+      const {
+        fn,
+        values
+      } = groups;
+      const realValues = values.split(/,\s*/).map(v => {
+        if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) {
+          return parseFloat(v) / 100;
+        } else {
+          return parseFloat(v);
+        }
+      });
+      return mappers[fn](...realValues);
     } else if (typeof color === 'string') {
       let hex = color.startsWith('#') ? color.slice(1) : color;
       if ([3, 4].includes(hex.length)) {
@@ -681,9 +701,16 @@
         consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
       return HexToRGB(hex);
-    } else {
-      throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
+    } else if (typeof color === 'object') {
+      if (has(color, ['r', 'g', 'b'])) {
+        return color;
+      } else if (has(color, ['h', 's', 'l'])) {
+        return HSVtoRGB(HSLtoHSV(color));
+      } else if (has(color, ['h', 's', 'v'])) {
+        return HSVtoRGB(color);
+      }
     }
+    throw new TypeError(`Invalid color: ${color == null ? color : String(color) || color.constructor.name}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`);
   }
 
   /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
@@ -706,6 +733,9 @@
       a
     };
   }
+  function HSLtoRGB(hsla) {
+    return HSVtoRGB(HSLtoHSV(hsla));
+  }
 
   /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
   function RGBtoHSV(rgba) {
@@ -844,7 +874,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = parseColor$1(color);
+    const rgb = parseColor(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -860,44 +890,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
@@ -951,17 +943,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);
@@ -988,41 +1017,68 @@
     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 internalUseDefaults() {
+    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
+    };
+  }
+  function useDefaults() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 ? arguments[1] : undefined;
+    const {
+      props: _props,
+      provideSubDefaults
+    } = internalUseDefaults(props, name);
+    provideSubDefaults();
+    return _props;
   }
 
   // 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;
@@ -1034,43 +1090,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
+        } = internalUseDefaults(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;
       };
     }
@@ -1095,15 +1128,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?.());
+        };
       }
     });
   }
@@ -1136,6 +1173,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;
@@ -1159,6 +1224,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') {
@@ -1663,7 +1738,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
               }
             }
           }
@@ -1671,9 +1746,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = parseColor$1(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
+          const colorVal = parseColor(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1805,14 +1880,14 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor$1(value);
+      const rgb = parseColor(value);
       variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+      const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
       variables.push(`--v-${key}: ${rgb ?? value}`);
     }
@@ -2141,6 +2216,7 @@
   const VApp = genericComponent()({
     name: 'VApp',
     props: {
+      ...makeComponentProps(),
       ...makeLayoutProps({
         fullHeight: true
       }),
@@ -2163,8 +2239,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?.()])]));
@@ -2584,13 +2660,16 @@
       })
     };
   }
+  const makeVResponsiveProps = propsFactory({
+    aspectRatio: [String, Number],
+    contentClass: String,
+    inline: Boolean,
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  }, 'v-responsive');
   const VResponsive = genericComponent()({
     name: 'VResponsive',
-    props: {
-      aspectRatio: [String, Number],
-      contentClass: String,
-      ...makeDimensionProps()
-    },
+    props: makeVResponsiveProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2602,8 +2681,10 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode("div", {
-        "class": "v-responsive",
-        "style": dimensionStyles.value
+        "class": ['v-responsive', {
+          'v-responsive--inline': props.inline
+        }, props.class],
+        "style": [dimensionStyles.value, props.style]
       }, [vue.createVNode("div", {
         "class": "v-responsive__sizer",
         "style": aspectStyles.value
@@ -2698,7 +2779,6 @@
       intersect: Intersect
     },
     props: {
-      aspectRatio: [String, Number],
       alt: String,
       cover: Boolean,
       eager: Boolean,
@@ -2720,7 +2800,8 @@
         default: ''
       },
       srcset: String,
-      width: [String, Number],
+      ...makeVResponsiveProps(),
+      ...makeComponentProps(),
       ...makeTransitionProps()
     },
     emits: {
@@ -2905,25 +2986,27 @@
           }
         });
       }
-      useRender(() => vue.withDirectives(vue.createVNode(VResponsive, {
-        "class": ['v-img', {
-          'v-img--booting': !isBooted.value
-        }],
-        "style": {
-          width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-        },
-        "aspectRatio": aspectRatio.value,
-        "aria-label": props.alt,
-        "role": props.alt ? 'img' : undefined
-      }, {
-        additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
-        default: slots.default
-      }), [[vue.resolveDirective("intersect"), {
-        handler: init,
-        options: props.options
-      }, null, {
-        once: true
-      }]]));
+      useRender(() => {
+        const [responsiveProps] = VResponsive.filterProps(props);
+        return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
+          "class": ['v-img', {
+            'v-img--booting': !isBooted.value
+          }, props.class],
+          "style": props.style
+        }, responsiveProps, {
+          "aspectRatio": aspectRatio.value,
+          "aria-label": props.alt,
+          "role": props.alt ? 'img' : undefined
+        }), {
+          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          default: slots.default
+        }), [[vue.resolveDirective("intersect"), {
+          handler: init,
+          options: props.options
+        }, null, {
+          once: true
+        }]]);
+      });
       return {
         currentSrc,
         image,
@@ -2946,10 +3029,9 @@
     }
   }, 'tag');
 
-  // Types
-
   const makeVToolbarTitleProps = propsFactory({
     text: String,
+    ...makeComponentProps(),
     ...makeTagProps()
   }, 'v-toolbar-title');
   const VToolbarTitle = genericComponent()({
@@ -2962,7 +3044,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"
@@ -3143,6 +3226,7 @@
     image: String,
     title: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
@@ -3193,8 +3277,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",
@@ -3269,14 +3353,13 @@
       type: String
     },
     scrollThreshold: {
-      type: [String, Number]
+      type: [String, Number],
+      default: 300
     }
   }, 'scroll');
   function useScroll(props) {
     let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const {
-      thresholdMetCallback,
-      scrollThreshold,
       canScroll
     } = args;
     let previousScroll = 0;
@@ -3286,8 +3369,16 @@
     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 scrollThreshold = vue.computed(() => {
+      return Number(props.scrollThreshold);
+    });
+
+    /**
+     * 1: at top
+     * 0: at threshold
+     */
+    const scrollRatio = vue.computed(() => {
+      return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
     });
     const onScroll = () => {
       const targetEl = target.value;
@@ -3295,7 +3386,7 @@
       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);
+      currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
     };
     vue.watch(isScrollingUp, () => {
       savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3307,7 +3398,7 @@
       vue.watch(() => props.scrollTarget, scrollTarget => {
         const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
         if (!newTarget) {
-          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
           return;
         }
         if (newTarget === target.value) return;
@@ -3323,15 +3414,6 @@
     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
@@ -3339,10 +3421,11 @@
       immediate: true
     });
     return {
-      computedScrollThreshold,
+      scrollThreshold,
       currentScroll,
       currentThreshold,
       isScrollActive,
+      scrollRatio,
       // required only for testing
       // probably can be removed
       // later (2 chars chlng)
@@ -3425,15 +3508,14 @@
       });
       const {
         currentScroll,
-        currentThreshold,
-        computedScrollThreshold,
-        isScrollingUp
+        scrollThreshold,
+        isScrollingUp,
+        scrollRatio
       } = 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 isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       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;
@@ -3442,15 +3524,12 @@
         return height + extensionHeight;
       });
       function setActive() {
-        const val = currentScroll.value;
         if (scrollBehavior.value.hide) {
           if (scrollBehavior.value.inverted) {
-            isActive.value = val > computedScrollThreshold.value;
+            isActive.value = currentScroll.value > scrollThreshold.value;
           } else {
-            isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
           }
-        } else if (scrollBehavior.value.inverted) {
-          isActive.value = currentScroll.value === 0;
         } else {
           isActive.value = true;
         }
@@ -3479,13 +3558,13 @@
           "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
-          }
+          }, props.style]
         }, toolbarProps, {
           "collapse": isCollapsed.value,
           "flat": isFlat.value
@@ -3572,6 +3651,7 @@
   const makeVBtnGroupProps = propsFactory({
     divided: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -3614,7 +3694,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);
       });
     }
@@ -3847,8 +3928,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,
@@ -3919,7 +4002,7 @@
 
   // Types
 
-  const IconValue = [String, Function, Object];
+  const IconValue = [String, Function, Object, Array];
   const IconSymbol = Symbol.for('vuetify:icons');
   const makeIconProps = propsFactory({
     icon: {
@@ -3939,8 +4022,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?.()]
         });
       };
     }
@@ -3963,7 +4047,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)])]
         });
@@ -4028,7 +4117,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
@@ -4085,6 +4179,7 @@
     start: Boolean,
     end: Boolean,
     icon: IconValue,
+    ...makeComponentProps(),
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'i'
@@ -4127,12 +4222,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
       }, {
@@ -4190,6 +4285,7 @@
         type: [Number, String],
         default: 4
       },
+      ...makeComponentProps(),
       ...makeSizeProps(),
       ...makeTagProps({
         tag: 'div'
@@ -4245,8 +4341,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",
@@ -4665,6 +4761,7 @@
       stream: Boolean,
       striped: Boolean,
       roundedBar: Boolean,
+      ...makeComponentProps(),
       ...makeLocationProps({
         location: 'top'
       }),
@@ -4736,14 +4833,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",
@@ -4954,7 +5051,7 @@
     },
     text: String,
     ...makeBorderProps(),
-    ...makeRoundedProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -4962,6 +5059,7 @@
     ...makeLoaderProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
+    ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeSizeProps(),
     ...makeTagProps({
@@ -4971,7 +5069,7 @@
     ...makeVariantProps({
       variant: 'elevated'
     })
-  }, 'VBtn');
+  }, 'v-btn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
@@ -5041,6 +5139,11 @@
         if (props.value === undefined) return undefined;
         return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
       });
+      function onClick(e) {
+        if (isDisabled.value) return;
+        link.navigate?.(e);
+        group?.toggle();
+      }
       useSelectLink(link, group?.select);
       useRender(() => {
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -5059,15 +5162,11 @@
             '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 => {
-            if (isDisabled.value) return;
-            link.navigate?.(e);
-            group?.toggle();
-          },
+          "onClick": onClick,
           "value": valueAttr.value
         }, {
           default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
@@ -5133,29 +5232,29 @@
 
   const VAppBarNavIcon = genericComponent()({
     name: 'VAppBarNavIcon',
-    props: {
-      icon: {
-        type: IconValue,
-        default: '$menu'
-      }
-    },
+    props: makeVBtnProps({
+      icon: '$menu',
+      variant: 'text'
+    }),
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VBtn, {
-        "class": "v-app-bar-nav-icon",
-        "icon": props.icon
-      }, slots));
+      useRender(() => vue.createVNode(VBtn, vue.mergeProps(props, {
+        "class": ['v-app-bar-nav-icon']
+      }), slots));
       return {};
     }
   });
 
   const VToolbarItems = genericComponent()({
     name: 'VToolbarItems',
-    props: makeVariantProps({
-      variant: 'text'
-    }),
+    props: {
+      ...makeComponentProps(),
+      ...makeVariantProps({
+        variant: 'text'
+      })
+    },
     setup(props, _ref) {
       let {
         slots
@@ -5168,7 +5267,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-toolbar-items"
+        "class": ['v-toolbar-items', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -5230,6 +5330,7 @@
         type: String,
         validator: val => allowedTypes.includes(val)
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -5312,8 +5413,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", {
@@ -5407,6 +5508,7 @@
     props: {
       text: String,
       clickable: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps()
     },
     setup(props, _ref) {
@@ -5416,7 +5518,8 @@
       useRender(() => vue.createVNode("label", {
         "class": ['v-label', {
           'v-label--clickable': props.clickable
-        }]
+        }, props.class],
+        "style": props.style
       }, [props.text, slots.default?.()]));
       return {};
     }
@@ -5425,7 +5528,8 @@
   const VFieldLabel = genericComponent()({
     name: 'VFieldLabel',
     props: {
-      floating: Boolean
+      floating: Boolean,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -5434,7 +5538,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 {};
@@ -5485,6 +5590,7 @@
     },
     active: Boolean,
     color: String,
+    baseColor: String,
     dirty: Boolean,
     disabled: Boolean,
     error: Boolean,
@@ -5502,9 +5608,10 @@
     'onClick:clear': EventProp(),
     'onClick:appendInner': EventProp(),
     'onClick:prependInner': EventProp(),
-    ...makeThemeProps(),
+    ...makeComponentProps(),
     ...makeLoaderProps(),
-    ...makeRoundedProps()
+    ...makeRoundedProps(),
+    ...makeThemeProps()
   }, 'v-field');
   const VField = genericComponent()({
     name: 'VField',
@@ -5558,7 +5665,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) {
@@ -5635,8 +5742,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, roundedClasses.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"
@@ -5724,7 +5831,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);
   }
 
@@ -5739,6 +5846,7 @@
         type: [Array, String],
         default: () => []
       },
+      ...makeComponentProps(),
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition,
@@ -5759,8 +5867,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"
       }, {
@@ -6056,6 +6164,7 @@
     },
     'onClick:prepend': EventProp(),
     'onClick:append': EventProp(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeValidationProps()
   }, 'v-input');
@@ -6123,7 +6232,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"
@@ -6166,6 +6276,7 @@
         type: [Number, String],
         default: 0
       },
+      ...makeComponentProps(),
       ...makeTransitionProps({
         transition: {
           component: VSlideYTransition
@@ -6183,7 +6294,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,
@@ -6333,7 +6445,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
-      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -6386,7 +6498,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
         }), {
@@ -6502,6 +6615,7 @@
         type: String,
         default: 'VSelectionControl'
       },
+      ...makeComponentProps(),
       ...makeSelectionControlGroupProps()
     },
     emits: {
@@ -6549,7 +6663,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 {};
@@ -6563,6 +6678,7 @@
     trueValue: null,
     falseValue: null,
     value: null,
+    ...makeComponentProps(),
     ...makeSelectionControlGroupProps()
   }, 'v-selection-control');
   function useSelectionControl(props) {
@@ -6677,8 +6793,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", {
@@ -6760,9 +6878,9 @@
       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,
         "trueIcon": trueIcon.value,
         "aria-checked": props.indeterminate ? 'mixed' : undefined
@@ -6800,10 +6918,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 => {
@@ -6834,6 +6953,7 @@
     end: Boolean,
     icon: IconValue,
     image: String,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
     ...makeSizeProps(),
@@ -6872,8 +6992,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",
@@ -6901,6 +7021,7 @@
         type: Function,
         default: deepEqual
       },
+      ...makeComponentProps(),
       ...makeGroupProps({
         selectedClass: 'v-chip--selected'
       }),
@@ -6938,7 +7059,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,
@@ -6952,8 +7074,6 @@
     }
   });
 
-  // Types
-
   const VChip = genericComponent()({
     name: 'VChip',
     directives: {
@@ -6998,6 +7118,7 @@
       onClick: EventProp(),
       onClickOnce: EventProp(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeGroupItemProps(),
@@ -7090,8 +7211,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,
@@ -7200,6 +7321,7 @@
       length: [Number, String],
       thickness: [Number, String],
       vertical: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps()
     },
     setup(props, _ref) {
@@ -7228,8 +7350,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));
@@ -7713,7 +7835,9 @@
     }
   });
   const makeVListGroupProps = propsFactory({
+    /* @deprecated */
     activeColor: String,
+    baseColor: String,
     color: String,
     collapseIcon: {
       type: IconValue,
@@ -7728,6 +7852,7 @@
     fluid: Boolean,
     subgroup: Boolean,
     value: null,
+    ...makeComponentProps(),
     ...makeTagProps()
   }, 'v-list-group');
   const VListGroup = genericComponent()({
@@ -7763,6 +7888,7 @@
         VListItem: {
           active: isOpen.value,
           activeColor: props.activeColor,
+          baseColor: props.baseColor,
           color: props.color,
           prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
           appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
@@ -7776,7 +7902,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
@@ -7821,9 +7948,11 @@
         default: undefined
       },
       activeClass: String,
+      /* @deprecated */
       activeColor: String,
       appendAvatar: String,
       appendIcon: IconValue,
+      baseColor: String,
       disabled: Boolean,
       lines: String,
       link: {
@@ -7843,6 +7972,7 @@
       onClick: EventProp(),
       onClickOnce: EventProp(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -7879,8 +8009,9 @@
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
+      const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
-        color: isActive.value ? props.activeColor ?? props.color : props.color,
+        color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
       vue.watch(() => link.isActive?.value, val => {
@@ -7937,7 +8068,6 @@
       }
       useRender(() => {
         const Tag = isLink.value ? 'a' : props.tag;
-        const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
         const hasSubtitle = slots.subtitle || props.subtitle;
         const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
@@ -7945,6 +8075,9 @@
         const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         list?.updateHasPrepend(hasPrepend);
+        if (props.activeColor) {
+          deprecate('active-color', ['color', 'base-color']);
+        }
         return vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-list-item', {
             'v-list-item--active': isActive.value,
@@ -7953,8 +8086,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, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
+          "style": [colorStyles.value, dimensionStyles.value, props.style],
           "href": link.href.value,
           "tabindex": isClickable.value ? 0 : undefined,
           "onClick": onClick,
@@ -8047,6 +8180,7 @@
       inset: Boolean,
       sticky: Boolean,
       title: String,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -8063,10 +8197,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"
@@ -8272,6 +8406,8 @@
   const VList = genericComponent()({
     name: 'VList',
     props: {
+      baseColor: String,
+      /* @deprecated */
       activeColor: String,
       activeClass: String,
       bgColor: String,
@@ -8286,6 +8422,7 @@
         openStrategy: 'list'
       }),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -8342,16 +8479,19 @@
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
       const activeColor = vue.toRef(props, 'activeColor');
+      const baseColor = vue.toRef(props, 'baseColor');
       const color = vue.toRef(props, 'color');
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
+          baseColor,
           color
         },
         VListItem: {
           activeClass: vue.toRef(props, 'activeClass'),
           activeColor,
+          baseColor,
           color,
           density: vue.toRef(props, 'density'),
           disabled: vue.toRef(props, 'disabled'),
@@ -8387,27 +8527,8 @@
         e.preventDefault();
       }
       function focus(location) {
-        if (!contentRef.value) return;
-        const targets = ['button', '[href]', 'input', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
-        const focusable = [...contentRef.value.querySelectorAll(targets)].filter(el => !el.hasAttribute('disabled'));
-        const idx = focusable.indexOf(document.activeElement);
-        if (!location) {
-          if (!contentRef.value.contains(document.activeElement)) {
-            focusable[0]?.focus();
-          }
-        } else if (location === 'first') {
-          focusable[0]?.focus();
-        } else if (location === 'last') {
-          focusable.at(-1)?.focus();
-        } else {
-          let el;
-          let idxx = idx;
-          const inc = location === 'next' ? 1 : -1;
-          do {
-            idxx += inc;
-            el = focusable[idxx];
-          } while ((!el || el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
-          if (el) el.focus();else focus(location === 'next' ? 'first' : 'last');
+        if (contentRef.value) {
+          return focusChild(contentRef.value, location);
         }
       }
       useRender(() => {
@@ -8416,8 +8537,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,
@@ -8445,6 +8566,7 @@
     props: {
       start: Boolean,
       end: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -8455,7 +8577,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 {};
     }
@@ -8466,6 +8589,7 @@
     props: {
       start: Boolean,
       end: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -8477,7 +8601,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 {};
@@ -9387,14 +9512,14 @@
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
     return mergeDeep(defaultDisplayOptions, options);
   };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  function getClientWidth(ssr) {
+    return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === 'object' && ssr.clientWidth || 0;
   }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  function getClientHeight(ssr) {
+    return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === 'object' && ssr.clientHeight || 0;
   }
-  function getPlatform(isHydrate) {
-    const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
+  function getPlatform(ssr) {
+    const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : 'ssr';
     function match(regexp) {
       return Boolean(userAgent.match(regexp));
     }
@@ -9718,6 +9843,7 @@
       default: 2000
     },
     ...makeActivatorProps(),
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeLazyProps(),
     ...makeLocationStrategyProps(),
@@ -9885,10 +10011,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,
@@ -9994,7 +10120,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,
@@ -10213,7 +10340,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,
@@ -10264,11 +10392,13 @@
                     let {
                       isSelected
                     } = _ref2;
-                    return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
-                    }, null) : undefined;
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
                   }
                 });
               }), slots['append-item']?.()]
@@ -10281,6 +10411,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -10656,7 +10790,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,
@@ -10702,11 +10837,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10721,6 +10858,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -10770,8 +10911,6 @@
     }
   });
 
-  // Types
-
   const VBadge = genericComponent()({
     name: 'VBadge',
     inheritAttrs: false,
@@ -10795,6 +10934,7 @@
       offsetX: [Number, String],
       offsetY: [Number, String],
       textColor: String,
+      ...makeComponentProps(),
       ...makeLocationProps({
         location: 'top end'
       }),
@@ -10839,8 +10979,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, {
@@ -10867,7 +11009,8 @@
     name: 'VBannerActions',
     props: {
       color: String,
-      density: String
+      density: String,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -10881,7 +11024,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-banner-actions"
+        "class": ['v-banner-actions', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -10902,6 +11046,7 @@
       sticky: Boolean,
       text: String,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -10959,8 +11104,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", {
@@ -11016,6 +11161,7 @@
         default: true
       },
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeRoundedProps(),
@@ -11090,11 +11236,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"
@@ -11108,14 +11254,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 {};
     }
@@ -11130,6 +11278,7 @@
       color: String,
       disabled: Boolean,
       title: String,
+      ...makeComponentProps(),
       ...makeRouterProps(),
       ...makeTagProps({
         tag: 'li'
@@ -11155,8 +11304,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
@@ -11187,6 +11336,7 @@
         type: Array,
         default: () => []
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeRoundedProps(),
       ...makeTagProps({
@@ -11218,11 +11368,22 @@
           disabled: vue.toRef(props, 'disabled')
         }
       });
+      const items = vue.computed(() => props.items.map(item => {
+        return typeof item === 'string' ? {
+          item: {
+            title: item
+          },
+          raw: item
+        } : {
+          item,
+          raw: item
+        };
+      }));
       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",
@@ -11240,33 +11401,36 @@
                 start: true
               }
             }
-          }, slots.prepend)]), props.items.map((item, index, array) => vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-            "key": index,
-            "disabled": index >= array.length - 1
-          }, typeof item === 'string' ? {
-            title: item
-          } : item), {
-            default: slots.title ? () => slots.title?.({
-              item,
-              index
-            }) : undefined
-          }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
-            default: slots.divider ? () => slots.divider?.({
+          }, slots.prepend)]), items.value.map((_ref2, index, array) => {
+            let {
               item,
-              index
-            }) : undefined
-          })])), slots.default?.()]
+              raw
+            } = _ref2;
+            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
+              "key": item.title,
+              "disabled": index >= array.length - 1
+            }, item), {
+              default: slots.title ? () => slots.title?.({
+                item: raw,
+                index
+              }) : undefined
+            }), index < array.length - 1 && vue.createVNode(VBreadcrumbsDivider, null, {
+              default: slots.divider ? () => slots.divider?.({
+                item: raw,
+                index
+              }) : undefined
+            })]);
+          }), slots.default?.()]
         });
       });
       return {};
     }
   });
 
-  // Types
-
-  const VCardActions = defineComponent({
+  const VCardActions = genericComponent()({
     name: 'VCardActions',
-    setup(_, _ref) {
+    props: makeComponentProps(),
+    setup(props, _ref) {
       let {
         slots
       } = _ref;
@@ -11276,7 +11440,8 @@
         }
       });
       useRender(() => vue.createVNode("div", {
-        "class": "v-card-actions"
+        "class": ['v-card-actions', props.class],
+        "style": props.style
       }, [slots.default?.()]));
       return {};
     }
@@ -11286,8 +11451,6 @@
 
   const VCardTitle = createSimpleFunctional('v-card-title');
 
-  // Types
-
   const VCardItem = genericComponent()({
     name: 'VCardItem',
     props: {
@@ -11297,6 +11460,7 @@
       prependIcon: IconValue,
       subtitle: String,
       title: String,
+      ...makeComponentProps(),
       ...makeDensityProps()
     },
     setup(props, _ref) {
@@ -11311,7 +11475,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"
@@ -11393,8 +11558,8 @@
       subtitle: String,
       text: String,
       title: String,
-      ...makeThemeProps(),
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
       ...makeElevationProps(),
@@ -11404,6 +11569,7 @@
       ...makeRoundedProps(),
       ...makeRouterProps(),
       ...makeTagProps(),
+      ...makeThemeProps(),
       ...makeVariantProps({
         variant: 'elevated'
       })
@@ -11464,8 +11630,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
@@ -11661,6 +11827,7 @@
     mandatory: {
       default: 'force'
     },
+    ...makeComponentProps(),
     ...makeTagProps(),
     ...makeThemeProps()
   }, 'v-window');
@@ -11776,7 +11943,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",
@@ -11861,10 +12029,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
@@ -11930,6 +12098,7 @@
         type: [Boolean, String],
         default: undefined
       },
+      ...makeComponentProps(),
       ...makeGroupItemProps(),
       ...makeLazyProps()
     },
@@ -12016,7 +12185,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 {};
@@ -12029,7 +12199,8 @@
     name: 'VCarouselItem',
     inheritAttrs: false,
     props: {
-      value: null
+      value: null,
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -12037,7 +12208,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)]
@@ -12050,6 +12222,7 @@
   const makeVSheetProps = propsFactory({
     color: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
     ...makeLocationProps(),
@@ -12093,8 +12266,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 {};
     }
@@ -12120,7 +12293,8 @@
       width: {
         type: [Number, String],
         default: 300
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true,
@@ -12265,7 +12439,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
@@ -12287,27 +12462,6 @@
 
   // Types
 
-  function has(obj, key) {
-    return key.every(k => obj.hasOwnProperty(k));
-  }
-  function parseColor(color) {
-    if (!color) return null;
-    let hsva = null;
-    if (typeof color === 'string') {
-      const hex = parseHex(color);
-      hsva = HexToHSV(hex);
-    }
-    if (typeof color === 'object') {
-      if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBtoHSV(color);
-      } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLtoHSV(color);
-      } else if (has(color, ['h', 's', 'v'])) {
-        hsva = color;
-      }
-    }
-    return hsva;
-  }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
       const {
@@ -12498,7 +12652,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,
@@ -12538,7 +12693,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",
@@ -12857,7 +13013,8 @@
       ripple: {
         type: Boolean,
         default: true
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {
       'update:modelValue': v => true
@@ -12935,11 +13092,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,
@@ -12985,7 +13142,8 @@
       stop: {
         type: Number,
         required: true
-      }
+      },
+      ...makeComponentProps()
     },
     emits: {},
     setup(props, _ref) {
@@ -13060,12 +13218,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
@@ -13168,7 +13326,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
         }), {
@@ -13231,7 +13390,8 @@
         type: Object
       },
       disabled: Boolean,
-      hideAlpha: Boolean
+      hideAlpha: Boolean,
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true
@@ -13243,7 +13403,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", {
@@ -13624,7 +13785,8 @@
       },
       disabled: Boolean,
       color: Object,
-      maxHeight: [Number, String]
+      maxHeight: [Number, String],
+      ...makeComponentProps()
     },
     emits: {
       'update:color': color => true
@@ -13634,20 +13796,22 @@
         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 => {
-        const hsva = parseColor(color);
+        const rgba = parseColor(color);
+        const hsva = RGBtoHSV(rgba);
+        const background = RGBtoCSS(rgba);
         return vue.createVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
         }, [vue.createVNode("div", {
           "style": {
-            background: color
+            background
           }
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
@@ -13707,8 +13871,13 @@
       const mode = useProxiedModel(props, 'mode');
       const lastPickedColor = vue.ref(null);
       const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
-        let c = parseColor(v);
-        if (!c) return null;
+        let c;
+        try {
+          c = RGBtoHSV(parseColor(v));
+        } catch (err) {
+          consoleWarn(err);
+          return null;
+        }
         if (lastPickedColor.value) {
           c = {
             ...c,
@@ -13741,13 +13910,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
         }), {
@@ -14058,7 +14227,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,
@@ -14104,11 +14274,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14123,6 +14295,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14215,7 +14391,7 @@
         ![document, overlay.value.contentEl].includes(after) &&
         // It isn't inside the dialog body
         !overlay.value.contentEl.contains(after)) {
-          const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+          const focusable = focusableChildren(overlay.value.contentEl);
           if (!focusable.length) return;
           const firstElement = focusable[0];
           const lastElement = focusable[focusable.length - 1];
@@ -14256,7 +14432,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,
@@ -14295,6 +14472,7 @@
         validator: v => allowedVariants.includes(v)
       },
       readonly: Boolean,
+      ...makeComponentProps(),
       ...makeGroupProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -14320,7 +14498,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 {};
     }
@@ -14349,6 +14528,7 @@
       Ripple
     },
     props: {
+      ...makeComponentProps(),
       ...makeVExpansionPanelTitleProps()
     },
     setup(props, _ref) {
@@ -14371,8 +14551,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,
@@ -14392,6 +14572,7 @@
   const VExpansionPanelText = genericComponent()({
     name: 'VExpansionPanelText',
     props: {
+      ...makeComponentProps(),
       ...makeLazyProps()
     },
     setup(props, _ref) {
@@ -14408,7 +14589,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]])]
@@ -14423,6 +14605,7 @@
       title: String,
       text: String,
       bgColor: String,
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeGroupItemProps(),
       ...makeLazyProps(),
@@ -14471,8 +14654,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", {
@@ -14579,6 +14762,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
+      const isActive = vue.computed(() => isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -14622,7 +14806,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
@@ -14646,7 +14831,7 @@
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
               "id": id.value,
-              "active": isDirty.value || isFocused.value,
+              "active": isActive.value || isDirty.value,
               "dirty": isDirty.value,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -14714,6 +14899,7 @@
         default: 'auto'
       },
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -14763,8 +14949,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 {};
     }
@@ -14775,6 +14961,7 @@
   const VForm = genericComponent()({
     name: 'VForm',
     props: {
+      ...makeComponentProps(),
       ...makeFormProps()
     },
     emits: {
@@ -14813,7 +15000,8 @@
       }
       useRender(() => vue.createVNode("form", {
         "ref": formRef,
-        "class": "v-form",
+        "class": ['v-form', props.class],
+        "style": props.style,
         "novalidate": true,
         "onReset": onReset,
         "onSubmit": onSubmit
@@ -14829,6 +15017,7 @@
         type: Boolean,
         default: false
       },
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -14838,7 +15027,8 @@
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-container', {
           'v-container--fluid': props.fluid
-        }]
+        }, props.class],
+        "style": props.style
       }, slots));
       return {};
     }
@@ -14929,6 +15119,7 @@
         default: null,
         validator: str => ALIGN_SELF_VALUES.includes(str)
       },
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -14959,7 +15150,8 @@
         return classList;
       });
       return () => vue.h(props.tag, {
-        class: classes.value
+        class: [classes.value, props.class],
+        style: props.style
       }, slots.default?.());
     }
   });
@@ -15045,6 +15237,7 @@
         validator: alignContentValidator
       },
       ...alignContentProps,
+      ...makeComponentProps(),
       ...makeTagProps()
     },
     setup(props, _ref) {
@@ -15073,7 +15266,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?.());
     }
   });
@@ -15117,6 +15311,7 @@
   const VItemGroup = genericComponent()({
     name: 'VItemGroup',
     props: {
+      ...makeComponentProps(),
       ...makeGroupProps({
         selectedClass: 'v-item--selected'
       }),
@@ -15141,7 +15336,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,
@@ -15191,7 +15387,10 @@
 
   const VLayout = genericComponent()({
     name: 'VLayout',
-    props: makeLayoutProps(),
+    props: {
+      ...makeComponentProps(),
+      ...makeLayoutProps()
+    },
     setup(props, _ref) {
       let {
         slots
@@ -15205,8 +15404,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,
@@ -15229,6 +15428,7 @@
         default: 300
       },
       modelValue: Boolean,
+      ...makeComponentProps(),
       ...makeLayoutItemProps()
     },
     setup(props, _ref) {
@@ -15247,8 +15447,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?.()]);
     }
   });
@@ -15272,6 +15472,7 @@
           threshold: undefined
         })
       },
+      ...makeComponentProps(),
       ...makeDimensionProps(),
       ...makeTagProps(),
       ...makeTransitionProps({
@@ -15294,8 +15495,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,
@@ -15320,7 +15521,8 @@
       rtl: {
         type: Boolean,
         default: undefined
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -15330,7 +15532,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 {};
     }
@@ -15340,6 +15543,7 @@
     name: 'VMain',
     props: {
       scrollable: Boolean,
+      ...makeComponentProps(),
       ...makeTagProps({
         tag: 'main'
       })
@@ -15357,8 +15561,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"
@@ -15368,525 +15572,99 @@
     }
   });
 
-  // 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);
+  function useSticky(_ref) {
+    let {
+      rootEl,
+      isSticky,
+      layoutItemStyles
+    } = _ref;
+    const isStuck = vue.ref(false);
+    const stuckPosition = vue.ref(0);
+    const stickyStyles = vue.computed(() => {
+      const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
+      return [isSticky.value ? {
+        top: 'auto',
+        bottom: 'auto',
+        height: undefined
+      } : undefined, isStuck.value ? {
+        [side]: convertToUnit(stuckPosition.value)
+      } : {
+        top: layoutItemStyles.value.top
+      }];
+    });
+    vue.onMounted(() => {
+      vue.watch(isSticky, val => {
+        if (val) {
+          window.addEventListener('scroll', onScroll, {
+            passive: true
+          });
+        } else {
+          window.removeEventListener('scroll', onScroll);
+        }
+      }, {
+        immediate: true
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener('scroll', onScroll);
+    });
+    let lastScrollTop = 0;
+    function onScroll() {
+      const direction = lastScrollTop > window.scrollY ? 'up' : 'down';
+      const rect = rootEl.value.getBoundingClientRect();
+      const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
+      const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
+      const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
+      if (rect.height < window.innerHeight - layoutTop) {
+        isStuck.value = 'top';
+        stuckPosition.value = layoutTop;
+      } else if (direction === 'up' && isStuck.value === 'bottom' || direction === 'down' && isStuck.value === 'top') {
+        stuckPosition.value = window.scrollY + rect.top;
+        isStuck.value = true;
+      } else if (direction === 'down' && bottom <= 0) {
+        stuckPosition.value = 0;
+        isStuck.value = 'bottom';
+      } else if (direction === 'up' && top <= 0) {
+        stuckPosition.value = rect.top + top;
+        isStuck.value = 'top';
+      }
+      lastScrollTop = window.scrollY;
     }
-    for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
-      const day = new Date(date.getFullYear(), date.getMonth(), i);
+    return {
+      isStuck,
+      stickyStyles
+    };
+  }
 
-      // Add the day to the current week
-      currentWeek.push(day);
+  const HORIZON = 100; // ms
+  const HISTORY = 20; // number of samples to keep
 
-      // 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 = [];
-      }
+  /** @see https://android.googlesource.com/platform/frameworks/native/+/master/libs/input/VelocityTracker.cpp */
+  function kineticEnergyToVelocity(work) {
+    const sqrt2 = 1.41421356237;
+    return (work < 0 ? -1.0 : 1.0) * Math.sqrt(Math.abs(work)) * sqrt2;
+  }
+
+  /**
+   * Returns pointer velocity in px/s
+   */
+  function calculateImpulseVelocity(samples) {
+    // The input should be in reversed time order (most recent sample at index i=0)
+    if (samples.length < 2) {
+      // if 0 or 1 points, velocity is zero
+      return 0;
     }
-    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
-    };
-  }
-  function useDate(props) {
-    const date = vue.inject(DateAdapterSymbol);
-    const locale = useLocale();
-    if (!date) throw new Error('[Vuetify] Could not find injected date');
-
-    // eslint-disable-next-line new-cap
-    const instance = new date.adapter(locale.current.value);
-    vue.watch(locale.current, val => {
-      instance.locale = val;
-    }, {
-      immediate: true
-    });
-    return instance;
-  }
-
-  function useSticky(_ref) {
-    let {
-      rootEl,
-      isSticky,
-      layoutItemStyles
-    } = _ref;
-    const isStuck = vue.ref(false);
-    const stuckPosition = vue.ref(0);
-    const stickyStyles = vue.computed(() => {
-      const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
-      return [isSticky.value ? {
-        top: 'auto',
-        bottom: 'auto',
-        height: undefined
-      } : undefined, isStuck.value ? {
-        [side]: convertToUnit(stuckPosition.value)
-      } : {
-        top: layoutItemStyles.value.top
-      }];
-    });
-    vue.onMounted(() => {
-      vue.watch(isSticky, val => {
-        if (val) {
-          window.addEventListener('scroll', onScroll, {
-            passive: true
-          });
-        } else {
-          window.removeEventListener('scroll', onScroll);
-        }
-      }, {
-        immediate: true
-      });
-    });
-    vue.onBeforeUnmount(() => {
-      document.removeEventListener('scroll', onScroll);
-    });
-    let lastScrollTop = 0;
-    function onScroll() {
-      const direction = lastScrollTop > window.scrollY ? 'up' : 'down';
-      const rect = rootEl.value.getBoundingClientRect();
-      const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
-      const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
-      const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
-      if (rect.height < window.innerHeight - layoutTop) {
-        isStuck.value = 'top';
-        stuckPosition.value = layoutTop;
-      } else if (direction === 'up' && isStuck.value === 'bottom' || direction === 'down' && isStuck.value === 'top') {
-        stuckPosition.value = window.scrollY + rect.top;
-        isStuck.value = true;
-      } else if (direction === 'down' && bottom <= 0) {
-        stuckPosition.value = 0;
-        isStuck.value = 'bottom';
-      } else if (direction === 'up' && top <= 0) {
-        stuckPosition.value = rect.top + top;
-        isStuck.value = 'top';
-      }
-      lastScrollTop = window.scrollY;
-    }
-    return {
-      isStuck,
-      stickyStyles
-    };
-  }
-
-  const HORIZON = 100; // ms
-  const HISTORY = 20; // number of samples to keep
-
-  /** @see https://android.googlesource.com/platform/frameworks/native/+/master/libs/input/VelocityTracker.cpp */
-  function kineticEnergyToVelocity(work) {
-    const sqrt2 = 1.41421356237;
-    return (work < 0 ? -1.0 : 1.0) * Math.sqrt(Math.abs(work)) * sqrt2;
-  }
-
-  /**
-   * Returns pointer velocity in px/s
-   */
-  function calculateImpulseVelocity(samples) {
-    // The input should be in reversed time order (most recent sample at index i=0)
-    if (samples.length < 2) {
-      // if 0 or 1 points, velocity is zero
-      return 0;
-    }
-    // if (samples[1].t > samples[0].t) {
-    //   // Algorithm will still work, but not perfectly
-    //   consoleWarn('Samples provided to calculateImpulseVelocity in the wrong order')
-    // }
-    if (samples.length === 2) {
-      // if 2 points, basic linear calculation
-      if (samples[1].t === samples[0].t) {
-        // consoleWarn(`Events have identical time stamps t=${samples[0].t}, setting velocity = 0`)
-        return 0;
-      }
-      return (samples[1].d - samples[0].d) / (samples[1].t - samples[0].t);
+    // if (samples[1].t > samples[0].t) {
+    //   // Algorithm will still work, but not perfectly
+    //   consoleWarn('Samples provided to calculateImpulseVelocity in the wrong order')
+    // }
+    if (samples.length === 2) {
+      // if 2 points, basic linear calculation
+      if (samples[1].t === samples[0].t) {
+        // consoleWarn(`Events have identical time stamps t=${samples[0].t}, setting velocity = 0`)
+        return 0;
+      }
+      return (samples[1].d - samples[0].d) / (samples[1].t - samples[0].t);
     }
     // Guaranteed to have at least 3 points here
     // start with the oldest sample and go forward in time
@@ -16130,6 +15908,7 @@
       },
       sticky: Boolean,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -16218,7 +15997,6 @@
       });
       const {
         layoutItemStyles,
-        layoutRect,
         layoutItemScrimStyles
       } = useLayoutItem({
         id: props.name,
@@ -16248,12 +16026,6 @@
           opacity: dragProgress.value * 0.2,
           transition: 'none'
         } : undefined),
-        ...(layoutRect.value ? {
-          left: convertToUnit(layoutRect.value.left),
-          right: convertToUnit(layoutRect.value.right),
-          top: convertToUnit(layoutRect.value.top),
-          bottom: convertToUnit(layoutRect.value.bottom)
-        } : undefined),
         ...layoutItemScrimStyles.value
       }));
       provideDefaults({
@@ -16281,8 +16053,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",
@@ -16411,6 +16183,7 @@
       },
       showFirstLastPage: Boolean,
       ...makeBorderProps(),
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
       ...makeRoundedProps(),
@@ -16607,7 +16380,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,
@@ -16666,7 +16440,8 @@
       scale: {
         type: [Number, String],
         default: 0.5
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
@@ -16728,7 +16503,8 @@
       useRender(() => vue.createVNode(VImg, {
         "class": ['v-parallax', {
           'v-parallax--active': isIntersecting.value
-        }],
+        }, props.class],
+        "style": props.style,
         "ref": root,
         "cover": true,
         "onLoadstart": onScroll,
@@ -16753,7 +16529,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 {};
@@ -16807,7 +16584,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,
@@ -16945,7 +16723,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
@@ -17088,6 +16867,7 @@
         validator: v => ['top', 'bottom'].includes(v)
       },
       ripple: Boolean,
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeSizeProps(),
       ...makeTagProps(),
@@ -17205,7 +16985,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,
@@ -17305,6 +17086,7 @@
       type: [Boolean, String],
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
+    ...makeComponentProps(),
     ...makeTagProps(),
     ...makeGroupProps({
       selectedClass: 'v-slide-group-item--active'
@@ -17468,7 +17250,7 @@
       function focus(location) {
         if (!contentRef.value) return;
         if (!location) {
-          const focusable = [...contentRef.value.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+          const focusable = focusableChildren(contentRef.value);
           focusable[0]?.focus();
         } else if (location === 'next') {
           const el = contentRef.value.querySelector(':focus')?.nextElementSibling;
@@ -17545,7 +17327,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
       }, {
@@ -17695,7 +17478,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,
@@ -17795,7 +17579,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
@@ -17864,6 +17649,7 @@
       color: String,
       height: [Number, String],
       window: Boolean,
+      ...makeComponentProps(),
       ...makeElevationProps(),
       ...makeLayoutItemProps(),
       ...makeRoundedProps(),
@@ -17905,8 +17691,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 {};
     }
@@ -17979,10 +17765,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),
@@ -18077,10 +17863,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
         }), {
@@ -18100,6 +17886,7 @@
       fixedFooter: Boolean,
       height: [Number, String],
       hover: Boolean,
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -18122,7 +17909,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",
@@ -18201,7 +17989,7 @@
       const vFieldRef = vue.ref();
       const controlHeight = vue.ref('');
       const textareaRef = vue.ref();
-      const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
+      const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (textareaRef.value !== document.activeElement) {
           textareaRef.value?.focus();
@@ -18287,7 +18075,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
         }), {
@@ -18371,6 +18160,7 @@
     name: 'VThemeProvider',
     props: {
       withBackground: Boolean,
+      ...makeComponentProps(),
       ...makeThemeProps(),
       ...makeTagProps()
     },
@@ -18384,7 +18174,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?.()]
         });
@@ -18429,6 +18220,7 @@
         type: String,
         validator: v => ['start', 'end', 'both'].includes(v)
       },
+      ...makeComponentProps(),
       ...makeDensityProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -18472,10 +18264,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 {};
     }
@@ -18490,6 +18282,7 @@
       icon: IconValue,
       iconColor: String,
       lineColor: String,
+      ...makeComponentProps(),
       ...makeRoundedProps(),
       ...makeSizeProps(),
       ...makeElevationProps()
@@ -18519,7 +18312,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
@@ -18569,11 +18363,12 @@
       icon: IconValue,
       iconColor: String,
       lineInset: [Number, String],
-      ...makeRoundedProps(),
+      ...makeComponentProps(),
+      ...makeDimensionProps(),
       ...makeElevationProps(),
+      ...makeRoundedProps(),
       ...makeSizeProps(),
-      ...makeTagProps(),
-      ...makeDimensionProps()
+      ...makeTagProps()
     },
     setup(props, _ref) {
       let {
@@ -18593,11 +18388,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
@@ -18673,7 +18468,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,
@@ -18721,7 +18517,8 @@
   const VVirtualScrollItem = genericComponent()({
     name: 'VVirtualScrollItem',
     props: {
-      dynamicHeight: Boolean
+      dynamicHeight: Boolean,
+      ...makeComponentProps()
     },
     emits: {
       'update:height': height => true
@@ -18748,7 +18545,8 @@
       vue.onUpdated(updateHeight);
       useRender(() => vue.createVNode("div", {
         "ref": props.dynamicHeight ? resizeRef : undefined,
-        "class": "v-virtual-scroll__item"
+        "class": ['v-virtual-scroll__item', props.class],
+        "style": props.style
       }, [slots.default?.()]));
     }
   });
@@ -18765,7 +18563,7 @@
         default: () => []
       },
       itemHeight: [Number, String],
-      visibleItems: [Number, String],
+      ...makeComponentProps(),
       ...makeDimensionProps()
     },
     setup(props, _ref) {
@@ -18792,7 +18590,7 @@
       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));
+        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);
@@ -18803,20 +18601,13 @@
         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;
-          }
+        const end = props.items.length;
+        let middle = 0;
+        let middleOffset = 0;
+        while (middleOffset < scrollTop && middle < end) {
+          middleOffset += sizes[middle++] || itemHeight.value;
         }
-        return start;
+        return middle - 1;
       }
       let lastScrollTop = 0;
       function handleScroll() {
@@ -18838,8 +18629,12 @@
         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(() => props.items.slice(first.value, last.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 {
@@ -18864,23 +18659,23 @@
       });
       useRender(() => vue.createVNode("div", {
         "ref": rootEl,
-        "class": "v-virtual-scroll",
+        "class": ['v-virtual-scroll', props.class],
         "onScroll": handleScroll,
-        "style": dimensionStyles.value
+        "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, index) => vue.createVNode(VVirtualScrollItem, {
-        "key": index,
+      }, [computedItems.value.map(item => vue.createVNode(VVirtualScrollItem, {
+        "key": item.index,
         "dynamicHeight": !props.itemHeight,
-        "onUpdate:height": height => handleItemResize(index + first.value, height)
+        "onUpdate:height": height => handleItemResize(item.index, height)
       }, {
         default: () => [slots.default?.({
-          item,
-          index: index + first.value
+          item: item.raw,
+          index: item.index
         })]
       }))])]));
       return {
@@ -19314,6 +19109,17 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const slotProps = vue.computed(() => ({
+        headers: headers.value,
+        columns: columns.value,
+        toggleSort,
+        sortBy: sortBy.value,
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        selectAll,
+        getSortIcon,
+        getFixedStyles
+      }));
       const VDataTableHeaderCell = _ref2 => {
         let {
           column,
@@ -19341,14 +19147,14 @@
           "noPadding": noPadding
         }, {
           default: () => {
-            const slotName = `column.${column.key}`;
-            const slotProps = {
+            const columnSlotName = `column.${column.key}`;
+            const columnSlotProps = {
               column,
               selectAll
             };
-            if (slots[slotName]) return slots[slotName](slotProps);
+            if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
             if (column.key === 'data-table-select') {
-              return slots['column.data-table-select']?.(slotProps) ?? vue.createVNode(VCheckboxBtn, {
+              return slots['column.data-table-select']?.(columnSlotProps) ?? vue.createVNode(VCheckboxBtn, {
                 "modelValue": allSelected.value,
                 "indeterminate": someSelected.value && !allSelected.value,
                 "onUpdate:modelValue": selectAll
@@ -19368,22 +19174,24 @@
           }
         });
       };
-      useRender(() => vue.createVNode(vue.Fragment, null, [headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
-        "column": column,
-        "x": x,
-        "y": y
-      }, null))])), props.loading && vue.createVNode("tr", {
-        "class": "v-data-table__progress"
-      }, [vue.createVNode("th", {
-        "colspan": columns.value.length
-      }, [vue.createVNode(LoaderSlot, {
-        "name": "v-data-table-headers",
-        "active": true,
-        "color": typeof props.loading === 'boolean' ? undefined : props.loading,
-        "indeterminate": true
-      }, {
-        default: slots.loader
-      })])])]));
+      useRender(() => {
+        return vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
+          "column": column,
+          "x": x,
+          "y": y
+        }, null))])), props.loading && vue.createVNode("tr", {
+          "class": "v-data-table__progress"
+        }, [vue.createVNode("th", {
+          "colspan": columns.value.length
+        }, [vue.createVNode(LoaderSlot, {
+          "name": "v-data-table-headers",
+          "active": true,
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": true
+        }, {
+          default: slots.loader
+        })])])]);
+      });
     }
   });
 
@@ -19682,9 +19490,7 @@
           'v-data-table__tr--clickable': !!props.onClick
         }],
         "onClick": props.onClick
-      }, [!columns.value.length && vue.createVNode(VDataTableColumn, {
-        "key": "no-data"
-      }, slots), props.item && columns.value.map((column, i) => vue.createVNode(VDataTableColumn, {
+      }, [props.item && columns.value.map((column, i) => vue.createVNode(VDataTableColumn, {
         "align": column.align,
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
@@ -19774,13 +19580,13 @@
       useRender(() => {
         if (props.loading && slots.loading) {
           return vue.createVNode("tr", {
-            "class": "v-data-table-rows-no-data",
+            "class": "v-data-table-rows-loading",
             "key": "loading"
           }, [vue.createVNode("td", {
             "colspan": columns.value.length
           }, [slots.loading()])]);
         }
-        if (!props.loading && !props.items.length && !props.hideNoData && slots['no-data']) {
+        if (!props.loading && !props.items.length && !props.hideNoData) {
           return vue.createVNode("tr", {
             "class": "v-data-table-rows-no-data",
             "key": "no-data"
@@ -19874,6 +19680,11 @@
       if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
+    vue.watchEffect(() => {
+      if (page.value > pageCount.value) {
+        page.value = pageCount.value;
+      }
+    });
     function setItemsPerPage(value) {
       itemsPerPage.value = value;
       page.value = 1;
@@ -20137,6 +19948,11 @@
     width: [String, Number],
     fixedHeader: Boolean,
     fixedFooter: Boolean,
+    loading: [Boolean, String],
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText'
+    },
     'onClick:row': Function,
     search: String
   }, 'v-data-table');
@@ -20244,12 +20060,15 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
       useRender(() => vue.createVNode(VTable, {
         "class": ['v-data-table', {
-          'v-data-table--show-select': props.showSelect
+          'v-data-table--show-select': props.showSelect,
+          'v-data-table--loading': props.loading
         }],
         "fixedHeader": props.fixedHeader,
         "fixedFooter": props.fixedFooter,
@@ -20259,8 +20078,9 @@
         top: slots.top,
         default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
           columns
-        }), vue.createVNode("thead", null, [slots.headers ? slots.headers() : vue.createVNode(VDataTableHeaders, {
+        }), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
+          "loading": props.loading,
           "multiSort": props.multiSort
         }, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
           "items": paginatedItems.value,
@@ -20450,11 +20270,15 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
       useRender(() => vue.createVNode(VTable, {
-        "class": "v-data-table",
+        "class": ['v-data-table', {
+          'v-data-table--loading': props.loading
+        }],
         "style": {
           '--v-table-row-height': convertToUnit(itemHeight.value)
         },
@@ -20473,6 +20297,7 @@
           }
         }, [vue.createVNode("table", null, [vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
+          "loading": props.loading,
           "multiSort": props.multiSort
         }, slots)]), vue.createVNode("tbody", null, [vue.createVNode("tr", {
           "style": {
@@ -20511,11 +20336,6 @@
     name: 'VDataTableServer',
     props: {
       color: String,
-      loading: [Boolean, String],
-      loadingText: {
-        type: String,
-        default: '$vuetify.dataIterator.loadingText'
-      },
       itemsLength: {
         type: [Number, String],
         required: true
@@ -20625,7 +20445,7 @@
         }), vue.createVNode("thead", {
           "class": "v-data-table__thead",
           "role": "rowgroup"
-        }, [slots.headers ? slots.headers() : vue.createVNode(VDataTableHeaders, {
+        }, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
           "loading": props.loading,
           "color": props.color
@@ -21127,130 +20947,542 @@
 
   // Types
 
-  function mounted$2(el, binding) {
-    const modifiers = binding.modifiers || {};
-    const value = binding.value;
-    const {
-      once,
-      immediate,
-      ...modifierKeys
-    } = modifiers;
-    const defaultValue = !Object.keys(modifierKeys).length;
-    const {
-      handler,
-      options
-    } = typeof value === 'object' ? value : {
-      handler: value,
-      options: {
-        attributes: modifierKeys?.attr ?? defaultValue,
-        characterData: modifierKeys?.char ?? defaultValue,
-        childList: modifierKeys?.child ?? defaultValue,
-        subtree: modifierKeys?.sub ?? defaultValue
+  function mounted$2(el, binding) {
+    const modifiers = binding.modifiers || {};
+    const value = binding.value;
+    const {
+      once,
+      immediate,
+      ...modifierKeys
+    } = modifiers;
+    const defaultValue = !Object.keys(modifierKeys).length;
+    const {
+      handler,
+      options
+    } = typeof value === 'object' ? value : {
+      handler: value,
+      options: {
+        attributes: modifierKeys?.attr ?? defaultValue,
+        characterData: modifierKeys?.char ?? defaultValue,
+        childList: modifierKeys?.child ?? defaultValue,
+        subtree: modifierKeys?.sub ?? defaultValue
+      }
+    };
+    const observer = new MutationObserver(function () {
+      let mutations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      let observer = arguments.length > 1 ? arguments[1] : undefined;
+      handler?.(mutations, observer);
+      if (once) unmounted$2(el, binding);
+    });
+    if (immediate) handler?.([], observer);
+    el._mutate = Object(el._mutate);
+    el._mutate[binding.instance.$.uid] = {
+      observer
+    };
+    observer.observe(el, options);
+  }
+  function unmounted$2(el, binding) {
+    if (!el._mutate?.[binding.instance.$.uid]) return;
+    el._mutate[binding.instance.$.uid].observer.disconnect();
+    delete el._mutate[binding.instance.$.uid];
+  }
+  const Mutate = {
+    mounted: mounted$2,
+    unmounted: unmounted$2
+  };
+
+  function mounted$1(el, binding) {
+    const handler = binding.value;
+    const options = {
+      passive: !binding.modifiers?.active
+    };
+    window.addEventListener('resize', handler, options);
+    el._onResize = Object(el._onResize);
+    el._onResize[binding.instance.$.uid] = {
+      handler,
+      options
+    };
+    if (!binding.modifiers?.quiet) {
+      handler();
+    }
+  }
+  function unmounted$1(el, binding) {
+    if (!el._onResize?.[binding.instance.$.uid]) return;
+    const {
+      handler,
+      options
+    } = el._onResize[binding.instance.$.uid];
+    window.removeEventListener('resize', handler, options);
+    delete el._onResize[binding.instance.$.uid];
+  }
+  const Resize = {
+    mounted: mounted$1,
+    unmounted: unmounted$1
+  };
+
+  function mounted(el, binding) {
+    const {
+      self = false
+    } = binding.modifiers ?? {};
+    const value = binding.value;
+    const options = typeof value === 'object' && value.options || {
+      passive: true
+    };
+    const handler = typeof value === 'function' || 'handleEvent' in value ? value : value.handler;
+    const target = self ? el : binding.arg ? document.querySelector(binding.arg) : window;
+    if (!target) return;
+    target.addEventListener('scroll', handler, options);
+    el._onScroll = Object(el._onScroll);
+    el._onScroll[binding.instance.$.uid] = {
+      handler,
+      options,
+      // Don't reference self
+      target: self ? undefined : target
+    };
+  }
+  function unmounted(el, binding) {
+    if (!el._onScroll?.[binding.instance.$.uid]) return;
+    const {
+      handler,
+      options,
+      target = el
+    } = el._onScroll[binding.instance.$.uid];
+    target.removeEventListener('scroll', handler, options);
+    delete el._onScroll[binding.instance.$.uid];
+  }
+  function updated(el, binding) {
+    if (binding.value === binding.oldValue) return;
+    unmounted(el, binding);
+    mounted(el, binding);
+  }
+  const Scroll = {
+    mounted,
+    unmounted,
+    updated
+  };
+
+  var directives = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ClickOutside: ClickOutside,
+    Intersect: Intersect,
+    Mutate: Mutate,
+    Resize: Resize,
+    Ripple: Ripple,
+    Scroll: Scroll,
+    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 = [];
       }
-    };
-    const observer = new MutationObserver(function () {
-      let mutations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      let observer = arguments.length > 1 ? arguments[1] : undefined;
-      handler?.(mutations, observer);
-      if (once) unmounted$2(el, binding);
+    }
+    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);
     });
-    if (immediate) handler?.([], observer);
-    el._mutate = Object(el._mutate);
-    el._mutate[binding.instance.$.uid] = {
-      observer
-    };
-    observer.observe(el, options);
   }
-  function unmounted$2(el, binding) {
-    if (!el._mutate?.[binding.instance.$.uid]) return;
-    el._mutate[binding.instance.$.uid].observer.disconnect();
-    delete el._mutate[binding.instance.$.uid];
+  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);
   }
-  const Mutate = {
-    mounted: mounted$2,
-    unmounted: unmounted$2
-  };
 
-  function mounted$1(el, binding) {
-    const handler = binding.value;
-    const options = {
-      passive: !binding.modifiers?.active
-    };
-    window.addEventListener('resize', handler, options);
-    el._onResize = Object(el._onResize);
-    el._onResize[binding.instance.$.uid] = {
-      handler,
-      options
-    };
-    if (!binding.modifiers?.quiet) {
-      handler();
+  // 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 unmounted$1(el, binding) {
-    if (!el._onResize?.[binding.instance.$.uid]) return;
-    const {
-      handler,
-      options
-    } = el._onResize[binding.instance.$.uid];
-    window.removeEventListener('resize', handler, options);
-    delete el._onResize[binding.instance.$.uid];
+  function isWithinRange(date, range) {
+    return isAfter(date, range[0]) && isBefore(date, range[1]);
   }
-  const Resize = {
-    mounted: mounted$1,
-    unmounted: unmounted$1
-  };
-
-  function mounted(el, binding) {
-    const {
-      self = false
-    } = binding.modifiers ?? {};
-    const value = binding.value;
-    const options = typeof value === 'object' && value.options || {
-      passive: true
-    };
-    const handler = typeof value === 'function' || 'handleEvent' in value ? value : value.handler;
-    const target = self ? el : binding.arg ? document.querySelector(binding.arg) : window;
-    if (!target) return;
-    target.addEventListener('scroll', handler, options);
-    el._onScroll = Object(el._onScroll);
-    el._onScroll[binding.instance.$.uid] = {
-      handler,
-      options,
-      // Don't reference self
-      target: self ? undefined : target
-    };
+  function isValid(date) {
+    const d = new Date(date);
+    return d instanceof Date && !isNaN(d.getTime());
   }
-  function unmounted(el, binding) {
-    if (!el._onScroll?.[binding.instance.$.uid]) return;
-    const {
-      handler,
-      options,
-      target = el
-    } = el._onScroll[binding.instance.$.uid];
-    target.removeEventListener('scroll', handler, options);
-    delete el._onScroll[binding.instance.$.uid];
+  function isAfter(date, comparing) {
+    return date.getTime() > comparing.getTime();
   }
-  function updated(el, binding) {
-    if (binding.value === binding.oldValue) return;
-    unmounted(el, binding);
-    mounted(el, binding);
+  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);
+    }
   }
-  const Scroll = {
-    mounted,
-    unmounted,
-    updated
-  };
 
-  var directives = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    ClickOutside: ClickOutside,
-    Intersect: Intersect,
-    Mutate: Mutate,
-    Resize: Resize,
-    Ripple: Ripple,
-    Scroll: Scroll,
-    Touch: Touch
-  });
+  // Composables
+
+  // Types
+
+  const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
+  function createDate(options) {
+    return options ?? {
+      adapter: VuetifyDateAdapter
+    };
+  }
 
   // Composables
   function createVuetify$1() {
@@ -21337,7 +21569,7 @@
       date
     };
   }
-  const version$1 = "4.0.0-dev-20230426.0";
+  const version$1 = "4.0.0-dev-20230511.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21349,7 +21581,7 @@
     }
   }
 
-  const version = "4.0.0-dev-20230426.0";
+  const version = "4.0.0-dev-20230511.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -21363,7 +21595,7 @@
   exports.components = components;
   exports.createVuetify = createVuetify;
   exports.directives = directives;
-  exports.useDate = useDate;
+  exports.useDefaults = useDefaults;
   exports.useDisplay = useDisplay;
   exports.useLayout = useLayout;
   exports.useLocale = useLocale;