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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v4.0.0-dev-20230426.0
+* Vuetify v4.0.0-dev-20230511.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, warn, onScopeDispose, effectScope, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -167,11 +167,14 @@ const keyValues = Object.freeze({
 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];
@@ -356,6 +359,32 @@ function callEvent(handler) {
     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'];
@@ -508,79 +537,15 @@ function animate(el, keyframes, options) {
 }
 
 /* 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) {
+  warn(`Vuetify: ${message}`);
 }
-function consoleError(message, vm, parent) {
-  const newMessage = createMessage(message, vm, parent);
-  newMessage != null && console.error(newMessage);
+function consoleError(message) {
+  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}'`;
+  warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
 }
 
 // For converting XYZ to sRGB
@@ -654,7 +619,46 @@ function toXYZ(lab) {
 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
@@ -665,6 +669,22 @@ function parseColor$1(color) {
       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)) {
@@ -677,9 +697,16 @@ function parseColor$1(color) {
       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 */
@@ -702,6 +729,9 @@ function HSVtoRGB(hsva) {
     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) {
@@ -840,7 +870,7 @@ function darken(value, amount) {
  * @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];
 }
 
@@ -856,44 +886,6 @@ function getContrast(first, second) {
   return (light + 0.05) / (dark + 0.05);
 }
 
-// Utilities
-function getCurrentInstance(name, message) {
-  const vm = getCurrentInstance$1();
-  if (!vm) {
-    throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
-  }
-  return vm;
-}
-function getCurrentInstanceName() {
-  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
-  const vm = getCurrentInstance(name).type;
-  return toKebabCase(vm?.aliasName || vm?.name);
-}
-let _uid = 0;
-let _map = new WeakMap();
-function getUid() {
-  const vm = getCurrentInstance('getUid');
-  if (_map.has(vm)) return _map.get(vm);else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
-}
-getUid.reset = () => {
-  _uid = 0;
-  _map = new WeakMap();
-};
-
-function injectSelf(key) {
-  const {
-    provides
-  } = getCurrentInstance('injectSelf');
-  if (provides && key in provides) {
-    // TS doesn't allow symbol as index type
-    return provides[key];
-  }
-}
-
 /**
  * Creates a factory function for props definitions.
  * This is used to define props in a composable then override
@@ -947,17 +939,54 @@ function propsFactory(props, source) {
 
 // Types
 
+// Composables
+const makeComponentProps = propsFactory({
+  class: [String, Array],
+  style: {
+    type: [String, Array, Object],
+    default: null
+  }
+}, 'component');
+
+function useToggleScope(source, fn) {
+  let scope;
+  function start() {
+    scope = effectScope();
+    scope.run(() => fn.length ? fn(() => {
+      scope?.stop();
+      start();
+    }) : fn());
+  }
+  watch(source, active => {
+    if (active && !scope) {
+      start();
+    } else if (!active) {
+      scope?.stop();
+      scope = undefined;
+    }
+  }, {
+    immediate: true
+  });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}
+
+// Composables
+
+// Types
+
 const DefaultsSymbol = Symbol.for('vuetify:defaults');
 function createDefaults(options) {
   return ref(options);
 }
-function useDefaults() {
+function injectDefaults() {
   const defaults = inject$1(DefaultsSymbol);
   if (!defaults) throw new Error('[Vuetify] Could not find defaults instance');
   return defaults;
 }
 function provideDefaults(defaults, options) {
-  const injectedDefaults = useDefaults();
+  const injectedDefaults = injectDefaults();
   const providedDefaults = ref(defaults);
   const newDefaults = computed(() => {
     const disabled = unref(options?.disabled);
@@ -984,41 +1013,68 @@ function provideDefaults(defaults, options) {
   provide(DefaultsSymbol, newDefaults);
   return newDefaults;
 }
-
-function useToggleScope(source, fn) {
-  let scope;
-  function start() {
-    scope = effectScope();
-    scope.run(() => fn.length ? fn(() => {
-      scope?.stop();
-      start();
-    }) : fn());
-  }
-  watch(source, active => {
-    if (active && !scope) {
-      start();
-    } else if (!active) {
-      scope?.stop();
-      scope = undefined;
+function propIsDefined(vnode, prop) {
+  return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
+}
+function 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 = computed(() => defaults.value?.[props._as ?? name]);
+  const _props = new Proxy(props, {
+    get(target, prop) {
+      const propValue = Reflect.get(target, prop);
+      if (prop === 'class' || prop === 'style') {
+        return [componentDefaults.value?.[prop], propValue].filter(v => v != null);
+      } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
+        return componentDefaults.value?.[prop] ?? defaults.value?.global?.[prop] ?? propValue;
+      }
+      return propValue;
     }
-  }, {
-    immediate: true
   });
-  onScopeDispose(() => {
-    scope?.stop();
+  const _subcomponentDefaults = shallowRef();
+  watchEffect(() => {
+    if (componentDefaults.value) {
+      const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
+        let [key] = _ref;
+        return key.startsWith(key[0].toUpperCase());
+      });
+      if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
+    }
   });
+  function provideSubDefaults() {
+    // If subcomponent defaults are provided, override any
+    // subcomponents provided by the component's setup function.
+    // This uses injectSelf so must be done after the original setup to work.
+    useToggleScope(_subcomponentDefaults, () => {
+      provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
+    });
+  }
+  return {
+    props: _props,
+    provideSubDefaults
+  };
+}
+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;
@@ -1030,43 +1086,20 @@ function defineComponent(options) {
     options.props = propsFactory(options.props ?? {}, toKebabCase(options.name))();
     const propKeys = Object.keys(options.props);
     options.filterProps = function filterProps(props) {
-      return pick(props, propKeys);
+      return pick(props, propKeys, ['class', 'style']);
     };
     options.props._as = String;
     options.setup = function setup(props, ctx) {
-      const defaults = useDefaults();
+      const defaults = injectDefaults();
 
       // Skip props proxy if defaults are not provided
       if (!defaults.value) return options._setup(props, ctx);
-      const vm = getCurrentInstance$1();
-      const componentDefaults = computed(() => defaults.value[props._as ?? options.name]);
-      const _props = new Proxy(props, {
-        get(target, prop) {
-          const propValue = Reflect.get(target, prop);
-          if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-            return componentDefaults.value?.[prop] ?? defaults.value.global?.[prop] ?? propValue;
-          }
-          return propValue;
-        }
-      });
-      const _subcomponentDefaults = shallowRef();
-      watchEffect(() => {
-        if (componentDefaults.value) {
-          const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
-            let [key] = _ref;
-            return key.startsWith(key[0].toUpperCase());
-          });
-          if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
-        }
-      });
+      const {
+        props: _props,
+        provideSubDefaults
+      } = 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;
     };
   }
@@ -1091,15 +1124,19 @@ function createSimpleFunctional(klass) {
       tag: {
         type: String,
         default: tag
-      }
+      },
+      ...makeComponentProps()
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      return () => h(props.tag, {
-        class: klass
-      }, slots.default?.());
+      return () => {
+        return h(props.tag, {
+          class: [klass, props.class],
+          style: props.style
+        }, slots.default?.());
+      };
     }
   });
 }
@@ -1132,6 +1169,34 @@ const standardEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';
 const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering
 const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
+// Utilities
+function getCurrentInstance(name, message) {
+  const vm = getCurrentInstance$1();
+  if (!vm) {
+    throw new Error(`[Vuetify] ${name} ${message || 'must be called from inside a setup function'}`);
+  }
+  return vm;
+}
+function getCurrentInstanceName() {
+  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
+  const vm = getCurrentInstance(name).type;
+  return toKebabCase(vm?.aliasName || vm?.name);
+}
+let _uid = 0;
+let _map = new WeakMap();
+function getUid() {
+  const vm = getCurrentInstance('getUid');
+  if (_map.has(vm)) return _map.get(vm);else {
+    const uid = _uid++;
+    _map.set(vm, uid);
+    return uid;
+  }
+}
+getUid.reset = () => {
+  _uid = 0;
+  _map = new WeakMap();
+};
+
 function getScrollParent(el) {
   while (el) {
     if (hasScrollbar(el)) return el;
@@ -1155,6 +1220,16 @@ function hasScrollbar(el) {
   return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
 }
 
+function injectSelf(key) {
+  const {
+    provides
+  } = getCurrentInstance('injectSelf');
+  if (provides && key in provides) {
+    // TS doesn't allow symbol as index type
+    return provides[key];
+  }
+}
+
 function isFixedPosition(el) {
   while (el) {
     if (window.getComputedStyle(el).position === 'fixed') {
@@ -1659,7 +1734,7 @@ function createTheme(options) {
           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));
             }
           }
         }
@@ -1667,9 +1742,9 @@ function createTheme(options) {
       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)))
@@ -1801,14 +1876,14 @@ function genCssVariables(theme) {
   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}`);
   }
@@ -2137,6 +2212,7 @@ function useRtl() {
 const VApp = genericComponent()({
   name: 'VApp',
   props: {
+    ...makeComponentProps(),
     ...makeLayoutProps({
       fullHeight: true
     }),
@@ -2159,8 +2235,8 @@ const VApp = genericComponent()({
     } = useRtl();
     useRender(() => createVNode("div", {
       "ref": layoutRef,
-      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value],
-      "style": layoutStyles.value
+      "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
+      "style": [layoutStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-application__wrap"
     }, [slots.default?.()])]));
@@ -2580,13 +2656,16 @@ function useAspectStyles(props) {
     })
   };
 }
+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
@@ -2598,8 +2677,10 @@ const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode("div", {
-      "class": "v-responsive",
-      "style": dimensionStyles.value
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
+      "style": [dimensionStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-responsive__sizer",
       "style": aspectStyles.value
@@ -2694,7 +2775,6 @@ const VImg = genericComponent()({
     intersect: Intersect
   },
   props: {
-    aspectRatio: [String, Number],
     alt: String,
     cover: Boolean,
     eager: Boolean,
@@ -2716,7 +2796,8 @@ const VImg = genericComponent()({
       default: ''
     },
     srcset: String,
-    width: [String, Number],
+    ...makeVResponsiveProps(),
+    ...makeComponentProps(),
     ...makeTransitionProps()
   },
   emits: {
@@ -2901,25 +2982,27 @@ const VImg = genericComponent()({
         }
       });
     }
-    useRender(() => withDirectives(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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
-      default: slots.default
-    }), [[resolveDirective("intersect"), {
-      handler: init,
-      options: props.options
-    }, null, {
-      once: true
-    }]]));
+    useRender(() => {
+      const [responsiveProps] = VResponsive.filterProps(props);
+      return withDirectives(createVNode(VResponsive, 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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        default: slots.default
+      }), [[resolveDirective("intersect"), {
+        handler: init,
+        options: props.options
+      }, null, {
+        once: true
+      }]]);
+    });
     return {
       currentSrc,
       image,
@@ -2942,10 +3025,9 @@ const makeTagProps = propsFactory({
   }
 }, 'tag');
 
-// Types
-
 const makeVToolbarTitleProps = propsFactory({
   text: String,
+  ...makeComponentProps(),
   ...makeTagProps()
 }, 'v-toolbar-title');
 const VToolbarTitle = genericComponent()({
@@ -2958,7 +3040,8 @@ const VToolbarTitle = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || slots.text || props.text);
       return createVNode(props.tag, {
-        "class": "v-toolbar-title"
+        "class": ['v-toolbar-title', props.class],
+        "style": props.style
       }, {
         default: () => [hasText && createVNode("div", {
           "class": "v-toolbar-title__placeholder"
@@ -3139,6 +3222,7 @@ const makeVToolbarProps = propsFactory({
   image: String,
   title: String,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
   ...makeTagProps({
@@ -3189,8 +3273,8 @@ const VToolbar = genericComponent()({
           'v-toolbar--flat': props.flat,
           'v-toolbar--floating': props.floating,
           [`v-toolbar--density-${props.density}`]: true
-        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value],
-        "style": [backgroundColorStyles.value]
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style]
       }, {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -3265,14 +3349,13 @@ const makeScrollProps = propsFactory({
     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;
@@ -3282,8 +3365,16 @@ function useScroll(props) {
   const currentThreshold = ref(0);
   const isScrollActive = ref(false);
   const isScrollingUp = ref(false);
-  const computedScrollThreshold = computed(() => {
-    return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+  const scrollThreshold = computed(() => {
+    return Number(props.scrollThreshold);
+  });
+
+  /**
+   * 1: at top
+   * 0: at threshold
+   */
+  const scrollRatio = computed(() => {
+    return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
   });
   const onScroll = () => {
     const targetEl = target.value;
@@ -3291,7 +3382,7 @@ function useScroll(props) {
     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);
   };
   watch(isScrollingUp, () => {
     savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3303,7 +3394,7 @@ function useScroll(props) {
     watch(() => props.scrollTarget, scrollTarget => {
       const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
       if (!newTarget) {
-        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, getCurrentInstance$1());
+        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
         return;
       }
       if (newTarget === target.value) return;
@@ -3319,15 +3410,6 @@ function useScroll(props) {
   onBeforeUnmount(() => {
     target.value?.removeEventListener('scroll', onScroll);
   });
-  thresholdMetCallback && watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
-    thresholdMet && thresholdMetCallback({
-      currentThreshold: currentThreshold.value,
-      isScrollingUp: isScrollingUp.value,
-      savedScroll
-    });
-  }, {
-    immediate: true
-  });
 
   // Do we need this? If yes - seems that
   // there's no need to expose onScroll
@@ -3335,10 +3417,11 @@ function useScroll(props) {
     immediate: true
   });
   return {
-    computedScrollThreshold,
+    scrollThreshold,
     currentScroll,
     currentThreshold,
     isScrollActive,
+    scrollRatio,
     // required only for testing
     // probably can be removed
     // later (2 chars chlng)
@@ -3421,15 +3504,14 @@ const VAppBar = genericComponent()({
     });
     const {
       currentScroll,
-      currentThreshold,
-      computedScrollThreshold,
-      isScrollingUp
+      scrollThreshold,
+      isScrollingUp,
+      scrollRatio
     } = useScroll(props, {
       canScroll
     });
-    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
-    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
-    const scrollRatio = computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
       if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
@@ -3438,15 +3520,12 @@ const VAppBar = genericComponent()({
       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;
       }
@@ -3475,13 +3554,13 @@ const VAppBar = genericComponent()({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
           'v-app-bar--bottom': props.location === 'bottom'
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           ...layoutItemStyles.value,
           '--v-toolbar-image-opacity': opacity.value,
           height: undefined,
           ...ssrBootStyles.value
-        }
+        }, props.style]
       }, toolbarProps, {
         "collapse": isCollapsed.value,
         "flat": isFlat.value
@@ -3568,6 +3647,7 @@ function useVariant(props) {
 const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
@@ -3610,7 +3690,8 @@ const VBtnGroup = genericComponent()({
       return createVNode(props.tag, {
         "class": ['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value]
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": props.style
       }, slots);
     });
   }
@@ -3843,8 +3924,10 @@ const VBtnToggle = genericComponent()({
     useRender(() => {
       const [btnGroupProps] = VBtnGroup.filterProps(props);
       return createVNode(VBtnGroup, mergeProps({
-        "class": "v-btn-toggle"
-      }, btnGroupProps), {
+        "class": ['v-btn-toggle', props.class]
+      }, btnGroupProps, {
+        "style": props.style
+      }), {
         default: () => [slots.default?.({
           isSelected,
           next,
@@ -3915,7 +3998,7 @@ const mdi = {
 
 // Types
 
-const IconValue = [String, Function, Object];
+const IconValue = [String, Function, Object, Array];
 const IconSymbol = Symbol.for('vuetify:icons');
 const makeIconProps = propsFactory({
   icon: {
@@ -3935,8 +4018,9 @@ const VComponentIcon = genericComponent()({
       slots
     } = _ref;
     return () => {
+      const Icon = props.icon;
       return createVNode(props.tag, null, {
-        default: () => [props.icon ? createVNode(props.icon, null, null) : slots.default?.()]
+        default: () => [props.icon ? createVNode(Icon, null, null) : slots.default?.()]
       });
     };
   }
@@ -3959,7 +4043,12 @@ const VSvgIcon = defineComponent({
           "viewBox": "0 0 24 24",
           "role": "img",
           "aria-hidden": "true"
-        }, [createVNode("path", {
+        }, [Array.isArray(props.icon) ? props.icon.map(path => Array.isArray(path) ? createVNode("path", {
+          "d": path[0],
+          "fill-opacity": path[1]
+        }, null) : createVNode("path", {
+          "d": path
+        }, null)) : createVNode("path", {
           "d": props.icon
         }, null)])]
       });
@@ -4024,7 +4113,12 @@ const useIcon = props => {
       }
     }
     if (!icon) throw new Error(`Could not find aliased icon "${iconAlias}"`);
-    if (typeof icon !== 'string') {
+    if (Array.isArray(icon)) {
+      return {
+        component: VSvgIcon,
+        icon
+      };
+    } else if (typeof icon !== 'string') {
       return {
         component: VComponentIcon,
         icon
@@ -4081,6 +4175,7 @@ const makeVIconProps = propsFactory({
   start: Boolean,
   end: Boolean,
   icon: IconValue,
+  ...makeComponentProps(),
   ...makeSizeProps(),
   ...makeTagProps({
     tag: 'i'
@@ -4123,12 +4218,12 @@ const VIcon = genericComponent()({
         'v-icon--clickable': !!attrs.onClick,
         'v-icon--start': props.start,
         'v-icon--end': props.end
-      }],
+      }, props.class],
       "style": [!sizeClasses.value ? {
         fontSize: convertToUnit(props.size),
         height: convertToUnit(props.size),
         width: convertToUnit(props.size)
-      } : undefined, textColorStyles.value],
+      } : undefined, textColorStyles.value, props.style],
       "role": attrs.onClick ? 'button' : undefined,
       "aria-hidden": !attrs.onClick
     }, {
@@ -4186,6 +4281,7 @@ const VProgressCircular = genericComponent()({
       type: [Number, String],
       default: 4
     },
+    ...makeComponentProps(),
     ...makeSizeProps(),
     ...makeTagProps({
       tag: 'div'
@@ -4241,8 +4337,8 @@ const VProgressCircular = genericComponent()({
         'v-progress-circular--indeterminate': !!props.indeterminate,
         'v-progress-circular--visible': isIntersecting.value,
         'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
-      }, themeClasses.value, sizeClasses.value, textColorClasses.value],
-      "style": [sizeStyles.value, textColorStyles.value],
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class],
+      "style": [sizeStyles.value, textColorStyles.value, props.style],
       "role": "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -4661,6 +4757,7 @@ const VProgressLinear = genericComponent()({
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
     }),
@@ -4732,14 +4829,14 @@ const VProgressLinear = genericComponent()({
         'v-progress-linear--rounded': props.rounded,
         'v-progress-linear--rounded-bar': props.roundedBar,
         'v-progress-linear--striped': props.striped
-      }, roundedClasses.value, themeClasses.value],
-      "style": {
+      }, roundedClasses.value, themeClasses.value, props.class],
+      "style": [{
         bottom: props.location === 'bottom' ? 0 : undefined,
         top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...locationStyles.value
-      },
+      }, props.style],
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -4950,7 +5047,7 @@ const makeVBtnProps = propsFactory({
   },
   text: String,
   ...makeBorderProps(),
-  ...makeRoundedProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
@@ -4958,6 +5055,7 @@ const makeVBtnProps = propsFactory({
   ...makeLoaderProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
+  ...makeRoundedProps(),
   ...makeRouterProps(),
   ...makeSizeProps(),
   ...makeTagProps({
@@ -4967,7 +5065,7 @@ const makeVBtnProps = propsFactory({
   ...makeVariantProps({
     variant: 'elevated'
   })
-}, 'VBtn');
+}, 'v-btn');
 const VBtn = genericComponent()({
   name: 'VBtn',
   directives: {
@@ -5037,6 +5135,11 @@ const VBtn = genericComponent()({
       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;
@@ -5055,15 +5158,11 @@ const VBtn = genericComponent()({
           'v-btn--icon': !!props.icon,
           'v-btn--loading': props.loading,
           'v-btn--stacked': props.stacked
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
-        "onClick": e => {
-          if (isDisabled.value) return;
-          link.navigate?.(e);
-          group?.toggle();
-        },
+        "onClick": onClick,
         "value": valueAttr.value
       }, {
         default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode("span", {
@@ -5129,29 +5228,29 @@ const VBtn = genericComponent()({
 
 const VAppBarNavIcon = genericComponent()({
   name: 'VAppBarNavIcon',
-  props: {
-    icon: {
-      type: IconValue,
-      default: '$menu'
-    }
-  },
+  props: makeVBtnProps({
+    icon: '$menu',
+    variant: 'text'
+  }),
   setup(props, _ref) {
     let {
       slots
     } = _ref;
-    useRender(() => createVNode(VBtn, {
-      "class": "v-app-bar-nav-icon",
-      "icon": props.icon
-    }, slots));
+    useRender(() => createVNode(VBtn, 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
@@ -5164,7 +5263,8 @@ const VToolbarItems = genericComponent()({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-toolbar-items"
+      "class": ['v-toolbar-items', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -5226,6 +5326,7 @@ const VAlert = genericComponent()({
       type: String,
       validator: val => allowedTypes.includes(val)
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -5308,8 +5409,8 @@ const VAlert = genericComponent()({
           [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true
         }, {
           'v-alert--prominent': props.prominent
-        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value],
+        }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
         "role": "alert"
       }, {
         default: () => [genOverlays(false, 'v-alert'), props.border && createVNode("div", {
@@ -5403,6 +5504,7 @@ const VLabel = genericComponent()({
   props: {
     text: String,
     clickable: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps()
   },
   setup(props, _ref) {
@@ -5412,7 +5514,8 @@ const VLabel = genericComponent()({
     useRender(() => createVNode("label", {
       "class": ['v-label', {
         'v-label--clickable': props.clickable
-      }]
+      }, props.class],
+      "style": props.style
     }, [props.text, slots.default?.()]));
     return {};
   }
@@ -5421,7 +5524,8 @@ const VLabel = genericComponent()({
 const VFieldLabel = genericComponent()({
   name: 'VFieldLabel',
   props: {
-    floating: Boolean
+    floating: Boolean,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -5430,7 +5534,8 @@ const VFieldLabel = genericComponent()({
     useRender(() => createVNode(VLabel, {
       "class": ['v-field-label', {
         'v-field-label--floating': props.floating
-      }],
+      }, props.class],
+      "style": props.style,
       "aria-hidden": props.floating || undefined
     }, slots));
     return {};
@@ -5481,6 +5586,7 @@ const makeVFieldProps = propsFactory({
   },
   active: Boolean,
   color: String,
+  baseColor: String,
   dirty: Boolean,
   disabled: Boolean,
   error: Boolean,
@@ -5498,9 +5604,10 @@ const makeVFieldProps = propsFactory({
   'onClick:clear': EventProp(),
   'onClick:appendInner': EventProp(),
   'onClick:prependInner': EventProp(),
-  ...makeThemeProps(),
+  ...makeComponentProps(),
   ...makeLoaderProps(),
-  ...makeRoundedProps()
+  ...makeRoundedProps(),
+  ...makeThemeProps()
 }, 'v-field');
 const VField = genericComponent()({
   name: 'VField',
@@ -5554,7 +5661,7 @@ const VField = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(computed(() => {
-      return isActive.value && isFocused.value && !props.error && !props.disabled ? props.color : undefined;
+      return props.error || props.disabled ? undefined : isActive.value && isFocused.value ? props.color : props.baseColor;
     }));
     watch(isActive, val => {
       if (hasLabel.value) {
@@ -5631,8 +5738,8 @@ const VField = genericComponent()({
           'v-field--single-line': props.singleLine,
           'v-field--no-label': !label,
           [`v-field--variant-${props.variant}`]: true
-        }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, 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), [createVNode("div", {
         "class": "v-field__overlay"
@@ -5720,7 +5827,7 @@ const VField = genericComponent()({
 });
 // TODO: this is kinda slow, might be better to implicitly inherit props instead
 function filterFieldProps(attrs) {
-  const keys = Object.keys(VField.props).filter(k => !isOn(k));
+  const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style');
   return pick(attrs, keys);
 }
 
@@ -5735,6 +5842,7 @@ const VMessages = genericComponent()({
       type: [Array, String],
       default: () => []
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition,
@@ -5755,8 +5863,8 @@ const VMessages = genericComponent()({
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
-      "class": ['v-messages', textColorClasses.value],
-      "style": textColorStyles.value,
+      "class": ['v-messages', textColorClasses.value, props.class],
+      "style": [textColorStyles.value, props.style],
       "role": "alert",
       "aria-live": "polite"
     }, {
@@ -6052,6 +6160,7 @@ const makeVInputProps = propsFactory({
   },
   'onClick:prepend': EventProp(),
   'onClick:append': EventProp(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeValidationProps()
 }, 'v-input');
@@ -6119,7 +6228,8 @@ const VInput = genericComponent()({
       const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return createVNode("div", {
-        "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
+        "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value, props.class],
+        "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
@@ -6162,6 +6272,7 @@ const VCounter = genericComponent()({
       type: [Number, String],
       default: 0
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition
@@ -6179,7 +6290,8 @@ const VCounter = genericComponent()({
       "transition": props.transition
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": "v-counter"
+        "class": ['v-counter', props.class],
+        "style": props.style
       }, [slots.default ? slots.default({
         counter: counter.value,
         max: props.max,
@@ -6329,7 +6441,7 @@ const VTextField = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
-    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -6382,7 +6494,8 @@ const VTextField = genericComponent()({
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }]
+        }, props.class],
+        "style": props.style
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
       }), {
@@ -6498,6 +6611,7 @@ const VSelectionControlGroup = genericComponent()({
       type: String,
       default: 'VSelectionControl'
     },
+    ...makeComponentProps(),
     ...makeSelectionControlGroupProps()
   },
   emits: {
@@ -6545,7 +6659,8 @@ const VSelectionControlGroup = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-selection-control-group', {
         'v-selection-control-group--inline': props.inline
-      }],
+      }, props.class],
+      "style": props.style,
       "role": props.type === 'radio' ? 'radiogroup' : undefined
     }, [slots.default?.()]));
     return {};
@@ -6559,6 +6674,7 @@ const makeSelectionControlProps = propsFactory({
   trueValue: null,
   falseValue: null,
   value: null,
+  ...makeComponentProps(),
   ...makeSelectionControlGroupProps()
 }, 'v-selection-control');
 function useSelectionControl(props) {
@@ -6673,8 +6789,10 @@ const VSelectionControl = genericComponent()({
           'v-selection-control--focused': isFocused.value,
           'v-selection-control--focus-visible': isFocusVisible.value,
           'v-selection-control--inline': props.inline
-        }, densityClasses.value]
-      }, rootAttrs), [createVNode("div", {
+        }, densityClasses.value, props.class]
+      }, rootAttrs, {
+        "style": props.style
+      }), [createVNode("div", {
         "class": ['v-selection-control__wrapper', textColorClasses.value],
         "style": textColorStyles.value
       }, [slots.default?.(), withDirectives(createVNode("div", {
@@ -6756,9 +6874,9 @@ const VCheckboxBtn = genericComponent()({
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
       "modelValue": model.value,
       "onUpdate:modelValue": [$event => model.value = $event, onChange],
-      "class": "v-checkbox-btn",
+      "class": ['v-checkbox-btn', props.class],
+      "style": props.style,
       "type": "checkbox",
-      "inline": true,
       "falseIcon": falseIcon.value,
       "trueIcon": trueIcon.value,
       "aria-checked": props.indeterminate ? 'mixed' : undefined
@@ -6796,10 +6914,11 @@ const VCheckbox = genericComponent()({
       const [inputProps, _1] = VInput.filterProps(props);
       const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
-        "class": "v-checkbox"
+        "class": ['v-checkbox', props.class]
       }, inputAttrs, inputProps, {
         "id": id.value,
-        "focused": isFocused.value
+        "focused": isFocused.value,
+        "style": props.style
       }), {
         ...slots,
         default: _ref2 => {
@@ -6830,6 +6949,7 @@ const makeVAvatarProps = propsFactory({
   end: Boolean,
   icon: IconValue,
   image: String,
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
   ...makeSizeProps(),
@@ -6868,8 +6988,8 @@ const VAvatar = genericComponent()({
       "class": ['v-avatar', {
         'v-avatar--start': props.start,
         'v-avatar--end': props.end
-      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-      "style": [colorStyles.value, sizeStyles.value]
+      }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+      "style": [colorStyles.value, sizeStyles.value, props.style]
     }, {
       default: () => [props.image ? createVNode(VImg, {
         "key": "image",
@@ -6897,6 +7017,7 @@ const VChipGroup = genericComponent()({
       type: Function,
       default: deepEqual
     },
+    ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-chip--selected'
     }),
@@ -6934,7 +7055,8 @@ const VChipGroup = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-chip-group', {
         'v-chip-group--column': props.column
-      }, themeClasses.value]
+      }, themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -6948,8 +7070,6 @@ const VChipGroup = genericComponent()({
   }
 });
 
-// Types
-
 const VChip = genericComponent()({
   name: 'VChip',
   directives: {
@@ -6994,6 +7114,7 @@ const VChip = genericComponent()({
     onClick: EventProp(),
     onClickOnce: EventProp(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeGroupItemProps(),
@@ -7086,8 +7207,8 @@ const VChip = genericComponent()({
           'v-chip--link': isClickable.value,
           'v-chip--filter': hasFilter,
           'v-chip--pill': props.pill
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value],
-        "style": [hasColor ? colorStyles.value : undefined],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group?.selectedClass.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, props.style],
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
         "href": link.href.value,
@@ -7196,6 +7317,7 @@ const VDivider = genericComponent()({
     length: [Number, String],
     thickness: [Number, String],
     vertical: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps()
   },
   setup(props, _ref) {
@@ -7224,8 +7346,8 @@ const VDivider = genericComponent()({
         'v-divider': true,
         'v-divider--inset': props.inset,
         'v-divider--vertical': props.vertical
-      }, themeClasses.value, textColorClasses.value],
-      "style": [dividerStyles.value, textColorStyles.value],
+      }, themeClasses.value, textColorClasses.value, props.class],
+      "style": [dividerStyles.value, textColorStyles.value, props.style],
       "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
       "role": `${attrs.role || 'separator'}`
     }, null));
@@ -7709,7 +7831,9 @@ const VListGroupActivator = defineComponent({
   }
 });
 const makeVListGroupProps = propsFactory({
+  /* @deprecated */
   activeColor: String,
+  baseColor: String,
   color: String,
   collapseIcon: {
     type: IconValue,
@@ -7724,6 +7848,7 @@ const makeVListGroupProps = propsFactory({
   fluid: Boolean,
   subgroup: Boolean,
   value: null,
+  ...makeComponentProps(),
   ...makeTagProps()
 }, 'v-list-group');
 const VListGroup = genericComponent()({
@@ -7759,6 +7884,7 @@ const VListGroup = genericComponent()({
       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,
@@ -7772,7 +7898,8 @@ const VListGroup = genericComponent()({
         'v-list-group--fluid': props.fluid,
         'v-list-group--subgroup': props.subgroup,
         'v-list-group--open': isOpen.value
-      }]
+      }, props.class],
+      "style": props.style
     }, {
       default: () => [slots.activator && createVNode(VDefaultsProvider, {
         "defaults": activatorDefaults.value
@@ -7817,9 +7944,11 @@ const VListItem = genericComponent()({
       default: undefined
     },
     activeClass: String,
+    /* @deprecated */
     activeColor: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     disabled: Boolean,
     lines: String,
     link: {
@@ -7839,6 +7968,7 @@ const VListItem = genericComponent()({
     onClick: EventProp(),
     onClickOnce: EventProp(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -7875,8 +8005,9 @@ const VListItem = genericComponent()({
     const isLink = computed(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
     const roundedProps = computed(() => props.rounded || props.nav);
+    const color = computed(() => props.color ?? props.activeColor);
     const variantProps = computed(() => ({
-      color: isActive.value ? props.activeColor ?? props.color : props.color,
+      color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
       variant: props.variant
     }));
     watch(() => link.isActive?.value, val => {
@@ -7933,7 +8064,6 @@ const VListItem = genericComponent()({
     }
     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);
@@ -7941,6 +8071,9 @@ const VListItem = genericComponent()({
       const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       list?.updateHasPrepend(hasPrepend);
+      if (props.activeColor) {
+        deprecate('active-color', ['color', 'base-color']);
+      }
       return withDirectives(createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
@@ -7949,8 +8082,8 @@ const VListItem = genericComponent()({
           'v-list-item--nav': props.nav,
           'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
           [`${props.activeClass}`]: props.activeClass && isActive.value
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
+        }, themeClasses.value, borderClasses.value, 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,
@@ -8043,6 +8176,7 @@ const VListSubheader = genericComponent()({
     inset: Boolean,
     sticky: Boolean,
     title: String,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -8059,10 +8193,10 @@ const VListSubheader = genericComponent()({
         "class": ['v-list-subheader', {
           'v-list-subheader--inset': props.inset,
           'v-list-subheader--sticky': props.sticky
-        }, textColorClasses.value],
-        "style": {
+        }, textColorClasses.value, props.class],
+        "style": [{
           textColorStyles
-        }
+        }, props.style]
       }, {
         default: () => [hasText && createVNode("div", {
           "class": "v-list-subheader__text"
@@ -8268,6 +8402,8 @@ function useListItems(props) {
 const VList = genericComponent()({
   name: 'VList',
   props: {
+    baseColor: String,
+    /* @deprecated */
     activeColor: String,
     activeClass: String,
     bgColor: String,
@@ -8282,6 +8418,7 @@ const VList = genericComponent()({
       openStrategy: 'list'
     }),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -8338,16 +8475,19 @@ const VList = genericComponent()({
     } = useNested(props);
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
     const activeColor = toRef(props, 'activeColor');
+    const baseColor = toRef(props, 'baseColor');
     const color = toRef(props, 'color');
     createList();
     provideDefaults({
       VListGroup: {
         activeColor,
+        baseColor,
         color
       },
       VListItem: {
         activeClass: toRef(props, 'activeClass'),
         activeColor,
+        baseColor,
         color,
         density: toRef(props, 'density'),
         disabled: toRef(props, 'disabled'),
@@ -8383,27 +8523,8 @@ const VList = genericComponent()({
       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(() => {
@@ -8412,8 +8533,8 @@ const VList = genericComponent()({
         "class": ['v-list', {
           'v-list--disabled': props.disabled,
           'v-list--nav': props.nav
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, dimensionStyles.value],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
         "role": "listbox",
         "aria-activedescendant": undefined,
         "onFocusin": onFocusin,
@@ -8441,6 +8562,7 @@ const VListItemAction = genericComponent()({
   props: {
     start: Boolean,
     end: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -8451,7 +8573,8 @@ const VListItemAction = genericComponent()({
       "class": ['v-list-item-action', {
         'v-list-item-action--start': props.start,
         'v-list-item-action--end': props.end
-      }]
+      }, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -8462,6 +8585,7 @@ const VListItemMedia = genericComponent()({
   props: {
     start: Boolean,
     end: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -8473,7 +8597,8 @@ const VListItemMedia = genericComponent()({
         "class": ['v-list-item-media', {
           'v-list-item-media--start': props.start,
           'v-list-item-media--end': props.end
-        }]
+        }, props.class],
+        "style": props.style
       }, slots);
     });
     return {};
@@ -9383,14 +9508,14 @@ const parseDisplayOptions = function () {
   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));
   }
@@ -9714,6 +9839,7 @@ const makeVOverlayProps = propsFactory({
     default: 2000
   },
   ...makeActivatorProps(),
+  ...makeComponentProps(),
   ...makeDimensionProps(),
   ...makeLazyProps(),
   ...makeLocationStrategyProps(),
@@ -9881,10 +10007,10 @@ const VOverlay = genericComponent()({
           'v-overlay--absolute': props.absolute || props.contained,
           'v-overlay--active': isActive.value,
           'v-overlay--contained': props.contained
-        }, themeClasses.value, rtlClasses.value],
+        }, themeClasses.value, rtlClasses.value, props.class],
         "style": [stackStyles.value, {
           top: convertToUnit(top.value)
-        }],
+        }, props.style],
         "ref": root
       }, scopeId, attrs), [createVNode(Scrim, mergeProps({
         "color": scrimColor,
@@ -9990,7 +10116,8 @@ const VMenu = genericComponent()({
       const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
-        "class": ['v-menu']
+        "class": ['v-menu', props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -10209,7 +10336,8 @@ const VSelect = genericComponent()({
           'v-select--chips': !!props.chips,
           [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-select--selected': model.value.length
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
         "placeholder": placeholder,
@@ -10260,11 +10388,13 @@ const VSelect = genericComponent()({
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 }
               });
             }), slots['append-item']?.()]
@@ -10277,6 +10407,10 @@ const VSelect = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -10652,7 +10786,8 @@ const VAutocomplete = genericComponent()({
           'v-autocomplete--selecting-index': selectionIndex.value > -1,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-autocomplete--selection-slot': !!slots.selection
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,
@@ -10698,11 +10833,13 @@ const VAutocomplete = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10717,6 +10854,10 @@ const VAutocomplete = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -10766,8 +10907,6 @@ const VAutocomplete = genericComponent()({
   }
 });
 
-// Types
-
 const VBadge = genericComponent()({
   name: 'VBadge',
   inheritAttrs: false,
@@ -10791,6 +10930,7 @@ const VBadge = genericComponent()({
     offsetX: [Number, String],
     offsetY: [Number, String],
     textColor: String,
+    ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top end'
     }),
@@ -10835,8 +10975,10 @@ const VBadge = genericComponent()({
           'v-badge--dot': props.dot,
           'v-badge--floating': props.floating,
           'v-badge--inline': props.inline
-        }]
-      }, attrs), {
+        }, props.class]
+      }, attrs, {
+        "style": props.style
+      }), {
         default: () => [createVNode("div", {
           "class": "v-badge__wrapper"
         }, [ctx.slots.default?.(), createVNode(MaybeTransition, {
@@ -10863,7 +11005,8 @@ const VBannerActions = genericComponent()({
   name: 'VBannerActions',
   props: {
     color: String,
-    density: String
+    density: String,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -10877,7 +11020,8 @@ const VBannerActions = genericComponent()({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-banner-actions"
+      "class": ['v-banner-actions', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -10898,6 +11042,7 @@ const VBanner = genericComponent()({
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -10955,8 +11100,8 @@ const VBanner = genericComponent()({
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
-        "style": [dimensionStyles.value, locationStyles.value],
+        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        "style": [dimensionStyles.value, locationStyles.value, props.style],
         "role": "banner"
       }, {
         default: () => [hasPrepend && createVNode("div", {
@@ -11012,6 +11157,7 @@ const VBottomNavigation = genericComponent()({
       default: true
     },
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -11086,11 +11232,11 @@ const VBottomNavigation = genericComponent()({
           'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
           'v-bottom-navigation--shift': props.mode === 'shift'
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value),
           transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-        }, ssrBootStyles.value]
+        }, ssrBootStyles.value, props.style]
       }, {
         default: () => [slots.default && createVNode("div", {
           "class": "v-bottom-navigation__content"
@@ -11104,14 +11250,16 @@ const VBottomNavigation = genericComponent()({
 const VBreadcrumbsDivider = genericComponent()({
   name: 'VBreadcrumbsDivider',
   props: {
-    divider: [Number, String]
+    divider: [Number, String],
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
     useRender(() => createVNode("li", {
-      "class": "v-breadcrumbs-divider"
+      "class": ['v-breadcrumbs-divider', props.class],
+      "style": props.style
     }, [slots?.default?.() ?? props.divider]));
     return {};
   }
@@ -11126,6 +11274,7 @@ const VBreadcrumbsItem = genericComponent()({
     color: String,
     disabled: Boolean,
     title: String,
+    ...makeComponentProps(),
     ...makeRouterProps(),
     ...makeTagProps({
       tag: 'li'
@@ -11151,8 +11300,8 @@ const VBreadcrumbsItem = genericComponent()({
           'v-breadcrumbs-item--disabled': props.disabled,
           'v-breadcrumbs-item--link': link.isLink.value,
           [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, textColorClasses.value],
-        "style": [textColorStyles.value],
+        }, textColorClasses.value, props.class],
+        "style": [textColorStyles.value, props.style],
         "href": link.href.value,
         "aria-current": isActive.value ? 'page' : undefined,
         "onClick": link.navigate
@@ -11183,6 +11332,7 @@ const VBreadcrumbs = genericComponent()({
       type: Array,
       default: () => []
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
@@ -11214,11 +11364,22 @@ const VBreadcrumbs = genericComponent()({
         disabled: toRef(props, 'disabled')
       }
     });
+    const items = 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 createVNode(props.tag, {
-        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
-        "style": backgroundColorStyles.value
+        "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style]
       }, {
         default: () => [hasPrepend && createVNode("div", {
           "key": "prepend",
@@ -11236,33 +11397,36 @@ const VBreadcrumbs = genericComponent()({
               start: true
             }
           }
-        }, slots.prepend)]), props.items.map((item, index, array) => createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, 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 && 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 createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
+            "key": item.title,
+            "disabled": index >= array.length - 1
+          }, item), {
+            default: slots.title ? () => slots.title?.({
+              item: raw,
+              index
+            }) : undefined
+          }), index < array.length - 1 && 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;
@@ -11272,7 +11436,8 @@ const VCardActions = defineComponent({
       }
     });
     useRender(() => createVNode("div", {
-      "class": "v-card-actions"
+      "class": ['v-card-actions', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -11282,8 +11447,6 @@ const VCardSubtitle = createSimpleFunctional('v-card-subtitle');
 
 const VCardTitle = createSimpleFunctional('v-card-title');
 
-// Types
-
 const VCardItem = genericComponent()({
   name: 'VCardItem',
   props: {
@@ -11293,6 +11456,7 @@ const VCardItem = genericComponent()({
     prependIcon: IconValue,
     subtitle: String,
     title: String,
+    ...makeComponentProps(),
     ...makeDensityProps()
   },
   setup(props, _ref) {
@@ -11307,7 +11471,8 @@ const VCardItem = genericComponent()({
       const hasTitle = !!(props.title || slots.title);
       const hasSubtitle = !!(props.subtitle || slots.subtitle);
       return createVNode("div", {
-        "class": "v-card-item"
+        "class": ['v-card-item', props.class],
+        "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
         "class": "v-card-item__prepend"
@@ -11389,8 +11554,8 @@ const VCard = genericComponent()({
     subtitle: String,
     text: String,
     title: String,
-    ...makeThemeProps(),
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
@@ -11400,6 +11565,7 @@ const VCard = genericComponent()({
     ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
     ...makeVariantProps({
       variant: 'elevated'
     })
@@ -11460,8 +11626,8 @@ const VCard = genericComponent()({
           'v-card--flat': props.flat,
           'v-card--hover': props.hover && !(props.disabled || props.flat),
           'v-card--link': isClickable.value
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value],
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
         "href": link.href.value,
         "onClick": isClickable.value && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
@@ -11657,6 +11823,7 @@ const makeVWindowProps = propsFactory({
   mandatory: {
     default: 'force'
   },
+  ...makeComponentProps(),
   ...makeTagProps(),
   ...makeThemeProps()
 }, 'v-window');
@@ -11772,7 +11939,8 @@ const VWindow = genericComponent()({
       "ref": rootRef,
       "class": ['v-window', {
         'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-      }, themeClasses.value]
+      }, themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [createVNode("div", {
         "class": "v-window__container",
@@ -11857,10 +12025,10 @@ const VCarousel = genericComponent()({
       "class": ['v-carousel', {
         'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,
         'v-carousel--vertical-delimiters': props.verticalDelimiters
-      }],
-      "style": {
+      }, props.class],
+      "style": [{
         height: convertToUnit(props.height)
-      },
+      }, props.style],
       "continuous": true,
       "mandatory": "force",
       "showArrows": props.showArrows
@@ -11926,6 +12094,7 @@ const VWindowItem = genericComponent()({
       type: [Boolean, String],
       default: undefined
     },
+    ...makeComponentProps(),
     ...makeGroupItemProps(),
     ...makeLazyProps()
   },
@@ -12012,7 +12181,8 @@ const VWindowItem = genericComponent()({
       "disabled": !isBooted.value
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value]
+        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
+        "style": props.style
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
     return {};
@@ -12025,7 +12195,8 @@ const VCarouselItem = genericComponent()({
   name: 'VCarouselItem',
   inheritAttrs: false,
   props: {
-    value: null
+    value: null,
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -12033,7 +12204,8 @@ const VCarouselItem = genericComponent()({
       attrs
     } = _ref;
     useRender(() => createVNode(VWindowItem, {
-      "class": "v-carousel-item",
+      "class": ['v-carousel-item', props.class],
+      "style": props.style,
       "value": props.value
     }, {
       default: () => [createVNode(VImg, attrs, slots)]
@@ -12046,6 +12218,7 @@ const VCode = createSimpleFunctional('v-code');
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
   ...makeLocationProps(),
@@ -12089,8 +12262,8 @@ const VSheet = genericComponent()({
       roundedClasses
     } = useRounded(props);
     useRender(() => createVNode(props.tag, {
-      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
+      "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -12116,7 +12289,8 @@ const VColorPickerCanvas = defineComponent({
     width: {
       type: [Number, String],
       default: 300
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -12261,7 +12435,8 @@ const VColorPickerCanvas = defineComponent({
     onMounted(() => updateCanvas());
     useRender(() => createVNode("div", {
       "ref": resizeRef,
-      "class": "v-color-picker-canvas",
+      "class": ['v-color-picker-canvas', props.class],
+      "style": props.style,
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown
@@ -12283,27 +12458,6 @@ const VColorPickerCanvas = defineComponent({
 
 // 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 {
@@ -12494,7 +12648,8 @@ const VColorPickerEdit = defineComponent({
       type: Array,
       default: () => Object.keys(modes),
       validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true,
@@ -12534,7 +12689,8 @@ const VColorPickerEdit = defineComponent({
       });
     });
     useRender(() => createVNode("div", {
-      "class": "v-color-picker-edit"
+      "class": ['v-color-picker-edit', props.class],
+      "style": props.style
     }, [inputs.value?.map(props => createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",
@@ -12853,7 +13009,8 @@ const VSliderThumb = genericComponent()({
     ripple: {
       type: Boolean,
       default: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {
     'update:modelValue': v => true
@@ -12931,11 +13088,11 @@ const VSliderThumb = genericComponent()({
         "class": ['v-slider-thumb', {
           'v-slider-thumb--focused': props.focused,
           'v-slider-thumb--pressed': props.focused && mousePressed.value
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           '--v-slider-thumb-position': positionPercentage,
           '--v-slider-thumb-size': convertToUnit(thumbSize.value)
-        },
+        }, props.style],
         "role": "slider",
         "tabindex": disabled.value ? -1 : 0,
         "aria-valuemin": props.min,
@@ -12981,7 +13138,8 @@ const VSliderTrack = genericComponent()({
     stop: {
       type: Number,
       required: true
-    }
+    },
+    ...makeComponentProps()
   },
   emits: {},
   setup(props, _ref) {
@@ -13056,12 +13214,12 @@ const VSliderTrack = genericComponent()({
     });
     useRender(() => {
       return createVNode("div", {
-        "class": ['v-slider-track', roundedClasses.value],
-        "style": {
+        "class": ['v-slider-track', roundedClasses.value, props.class],
+        "style": [{
           '--v-slider-track-size': convertToUnit(trackSize.value),
           '--v-slider-tick-size': convertToUnit(tickSize.value),
           direction: !vertical.value ? horizontalDirection.value : undefined
-        }
+        }, props.style]
       }, [createVNode("div", {
         "class": ['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
@@ -13164,7 +13322,8 @@ const VSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }]
+        }, props.class],
+        "style": props.style
       }, inputProps, {
         "focused": isFocused.value
       }), {
@@ -13227,7 +13386,8 @@ const VColorPickerPreview = defineComponent({
       type: Object
     },
     disabled: Boolean,
-    hideAlpha: Boolean
+    hideAlpha: Boolean,
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -13239,7 +13399,8 @@ const VColorPickerPreview = defineComponent({
     useRender(() => createVNode("div", {
       "class": ['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }]
+      }, props.class],
+      "style": props.style
     }, [createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [createVNode("div", {
@@ -13620,7 +13781,8 @@ const VColorPickerSwatches = defineComponent({
     },
     disabled: Boolean,
     color: Object,
-    maxHeight: [Number, String]
+    maxHeight: [Number, String],
+    ...makeComponentProps()
   },
   emits: {
     'update:color': color => true
@@ -13630,20 +13792,22 @@ const VColorPickerSwatches = defineComponent({
       emit
     } = _ref;
     useRender(() => createVNode("div", {
-      "class": "v-color-picker-swatches",
-      "style": {
+      "class": ['v-color-picker-swatches', props.class],
+      "style": [{
         maxHeight: convertToUnit(props.maxHeight)
-      }
+      }, props.style]
     }, [createVNode("div", null, [props.swatches.map(swatch => createVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
-      const hsva = parseColor(color);
+      const rgba = parseColor(color);
+      const hsva = RGBtoHSV(rgba);
+      const background = RGBtoCSS(rgba);
       return createVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
       }, [createVNode("div", {
         "style": {
-          background: color
+          background
         }
       }, [props.color && deepEqual(props.color, hsva) ? createVNode(VIcon, {
         "size": "x-small",
@@ -13703,8 +13867,13 @@ const VColorPicker = defineComponent({
     const mode = useProxiedModel(props, 'mode');
     const lastPickedColor = 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,
@@ -13737,13 +13906,13 @@ const VColorPicker = defineComponent({
         "rounded": props.rounded,
         "elevation": props.elevation,
         "theme": props.theme,
-        "class": ['v-color-picker'],
-        "style": {
+        "class": ['v-color-picker', props.class],
+        "style": [{
           '--v-color-picker-color-hsv': HSVtoCSS({
             ...(currentColor.value ?? nullColor),
             a: 1
           })
-        }
+        }, props.style]
       }, sheetProps, {
         "maxWidth": props.width
       }), {
@@ -14054,7 +14223,8 @@ const VCombobox = genericComponent()({
           'v-combobox--chips': !!props.chips,
           'v-combobox--selecting-index': selectionIndex.value > -1,
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,
@@ -14100,11 +14270,13 @@ const VCombobox = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14119,6 +14291,10 @@ const VCombobox = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -14211,7 +14387,7 @@ const VDialog = genericComponent()({
       ![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];
@@ -14252,7 +14428,8 @@ const VDialog = genericComponent()({
         "class": ['v-dialog', {
           'v-dialog--fullscreen': props.fullscreen,
           'v-dialog--scrollable': props.scrollable
-        }]
+        }, props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -14291,6 +14468,7 @@ const VExpansionPanels = genericComponent()({
       validator: v => allowedVariants.includes(v)
     },
     readonly: Boolean,
+    ...makeComponentProps(),
     ...makeGroupProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -14316,7 +14494,8 @@ const VExpansionPanels = genericComponent()({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', themeClasses.value, variantClass.value]
+      "class": ['v-expansion-panels', themeClasses.value, variantClass.value, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -14345,6 +14524,7 @@ const VExpansionPanelTitle = genericComponent()({
     Ripple
   },
   props: {
+    ...makeComponentProps(),
     ...makeVExpansionPanelTitleProps()
   },
   setup(props, _ref) {
@@ -14367,8 +14547,8 @@ const VExpansionPanelTitle = genericComponent()({
     useRender(() => withDirectives(createVNode("button", {
       "class": ['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value
-      }, backgroundColorClasses.value],
-      "style": backgroundColorStyles.value,
+      }, backgroundColorClasses.value, props.class],
+      "style": [backgroundColorStyles.value, props.style],
       "type": "button",
       "tabindex": expansionPanel.disabled.value ? -1 : undefined,
       "disabled": expansionPanel.disabled.value,
@@ -14388,6 +14568,7 @@ const VExpansionPanelTitle = genericComponent()({
 const VExpansionPanelText = genericComponent()({
   name: 'VExpansionPanelText',
   props: {
+    ...makeComponentProps(),
     ...makeLazyProps()
   },
   setup(props, _ref) {
@@ -14404,7 +14585,8 @@ const VExpansionPanelText = genericComponent()({
       "onAfterLeave": onAfterLeave
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": "v-expansion-panel-text"
+        "class": ['v-expansion-panel-text', props.class],
+        "style": props.style
       }, [slots.default && hasContent.value && createVNode("div", {
         "class": "v-expansion-panel-text__wrapper"
       }, [slots.default?.()])]), [[vShow, expansionPanel.isSelected.value]])]
@@ -14419,6 +14601,7 @@ const VExpansionPanel = genericComponent()({
     title: String,
     text: String,
     bgColor: String,
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeGroupItemProps(),
     ...makeLazyProps(),
@@ -14467,8 +14650,8 @@ const VExpansionPanel = genericComponent()({
           'v-expansion-panel--before-active': isBeforeSelected.value,
           'v-expansion-panel--after-active': isAfterSelected.value,
           'v-expansion-panel--disabled': isDisabled.value
-        }, roundedClasses.value, backgroundColorClasses.value],
-        "style": backgroundColorStyles.value,
+        }, roundedClasses.value, backgroundColorClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style],
         "aria-expanded": groupItem.isSelected.value
       }, {
         default: () => [createVNode("div", {
@@ -14575,6 +14758,7 @@ const VFileInput = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
+    const isActive = computed(() => isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -14618,7 +14802,8 @@ const VFileInput = genericComponent()({
         "ref": vInputRef,
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "class": "v-file-input",
+        "class": ['v-file-input', props.class],
+        "style": props.style,
         "onClick:prepend": onClickPrepend
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
@@ -14642,7 +14827,7 @@ const VFileInput = genericComponent()({
             "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,
@@ -14710,6 +14895,7 @@ const VFooter = genericComponent()({
       default: 'auto'
     },
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -14759,8 +14945,8 @@ const VFooter = genericComponent()({
     });
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined]
+      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined, props.style]
     }, slots));
     return {};
   }
@@ -14771,6 +14957,7 @@ const VFooter = genericComponent()({
 const VForm = genericComponent()({
   name: 'VForm',
   props: {
+    ...makeComponentProps(),
     ...makeFormProps()
   },
   emits: {
@@ -14809,7 +14996,8 @@ const VForm = genericComponent()({
     }
     useRender(() => createVNode("form", {
       "ref": formRef,
-      "class": "v-form",
+      "class": ['v-form', props.class],
+      "style": props.style,
       "novalidate": true,
       "onReset": onReset,
       "onSubmit": onSubmit
@@ -14825,6 +15013,7 @@ const VContainer = genericComponent()({
       type: Boolean,
       default: false
     },
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -14834,7 +15023,8 @@ const VContainer = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-container', {
         'v-container--fluid': props.fluid
-      }]
+      }, props.class],
+      "style": props.style
     }, slots));
     return {};
   }
@@ -14925,6 +15115,7 @@ const VCol = genericComponent()({
       default: null,
       validator: str => ALIGN_SELF_VALUES.includes(str)
     },
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -14955,7 +15146,8 @@ const VCol = genericComponent()({
       return classList;
     });
     return () => h(props.tag, {
-      class: classes.value
+      class: [classes.value, props.class],
+      style: props.style
     }, slots.default?.());
   }
 });
@@ -15041,6 +15233,7 @@ const VRow = genericComponent()({
       validator: alignContentValidator
     },
     ...alignContentProps,
+    ...makeComponentProps(),
     ...makeTagProps()
   },
   setup(props, _ref) {
@@ -15069,7 +15262,8 @@ const VRow = genericComponent()({
       return classList;
     });
     return () => h(props.tag, {
-      class: ['v-row', classes.value]
+      class: ['v-row', classes.value, props.class],
+      style: props.style
     }, slots.default?.());
   }
 });
@@ -15113,6 +15307,7 @@ const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
 const VItemGroup = genericComponent()({
   name: 'VItemGroup',
   props: {
+    ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-item--selected'
     }),
@@ -15137,7 +15332,8 @@ const VItemGroup = genericComponent()({
       selected
     } = useGroup(props, VItemGroupSymbol);
     return () => createVNode(props.tag, {
-      "class": ['v-item-group', themeClasses.value]
+      "class": ['v-item-group', themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.default?.({
         isSelected,
@@ -15187,7 +15383,10 @@ const VKbd = createSimpleFunctional('v-kbd');
 
 const VLayout = genericComponent()({
   name: 'VLayout',
-  props: makeLayoutProps(),
+  props: {
+    ...makeComponentProps(),
+    ...makeLayoutProps()
+  },
   setup(props, _ref) {
     let {
       slots
@@ -15201,8 +15400,8 @@ const VLayout = genericComponent()({
     } = createLayout(props);
     useRender(() => createVNode("div", {
       "ref": layoutRef,
-      "class": layoutClasses.value,
-      "style": layoutStyles.value
+      "class": [layoutClasses.value, props.class],
+      "style": [layoutStyles.value, props.style]
     }, [slots.default?.()]));
     return {
       getLayoutItem,
@@ -15225,6 +15424,7 @@ const VLayoutItem = genericComponent()({
       default: 300
     },
     modelValue: Boolean,
+    ...makeComponentProps(),
     ...makeLayoutItemProps()
   },
   setup(props, _ref) {
@@ -15243,8 +15443,8 @@ const VLayoutItem = genericComponent()({
       absolute: toRef(props, 'absolute')
     });
     return () => createVNode("div", {
-      "class": ['v-layout-item'],
-      "style": layoutItemStyles.value
+      "class": ['v-layout-item', props.class],
+      "style": [layoutItemStyles.value, props.style]
     }, [slots.default?.()]);
   }
 });
@@ -15268,6 +15468,7 @@ const VLazy = genericComponent()({
         threshold: undefined
       })
     },
+    ...makeComponentProps(),
     ...makeDimensionProps(),
     ...makeTagProps(),
     ...makeTransitionProps({
@@ -15290,8 +15491,8 @@ const VLazy = genericComponent()({
       isActive.value = isIntersecting;
     }
     useRender(() => withDirectives(createVNode(props.tag, {
-      "class": "v-lazy",
-      "style": dimensionStyles.value
+      "class": ['v-lazy', props.class],
+      "style": [dimensionStyles.value, props.style]
     }, {
       default: () => [isActive.value && createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -15316,7 +15517,8 @@ const VLocaleProvider = genericComponent()({
     rtl: {
       type: Boolean,
       default: undefined
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -15326,7 +15528,8 @@ const VLocaleProvider = genericComponent()({
       rtlClasses
     } = provideLocale(props);
     useRender(() => createVNode("div", {
-      "class": ['v-locale-provider', rtlClasses.value]
+      "class": ['v-locale-provider', rtlClasses.value, props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }
@@ -15336,6 +15539,7 @@ const VMain = genericComponent()({
   name: 'VMain',
   props: {
     scrollable: Boolean,
+    ...makeComponentProps(),
     ...makeTagProps({
       tag: 'main'
     })
@@ -15353,8 +15557,8 @@ const VMain = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-main', {
         'v-main--scrollable': props.scrollable
-      }],
-      "style": [mainStyles.value, ssrBootStyles.value]
+      }, props.class],
+      "style": [mainStyles.value, ssrBootStyles.value, props.style]
     }, {
       default: () => [props.scrollable ? createVNode("div", {
         "class": "v-main__scroller"
@@ -15364,525 +15568,99 @@ const VMain = genericComponent()({
   }
 });
 
-// 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 = ref(false);
+  const stuckPosition = ref(0);
+  const stickyStyles = 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
+    }];
+  });
+  onMounted(() => {
+    watch(isSticky, val => {
+      if (val) {
+        window.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      } else {
+        window.removeEventListener('scroll', onScroll);
+      }
+    }, {
+      immediate: true
+    });
+  });
+  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 = inject$1(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);
-  watch(locale.current, val => {
-    instance.locale = val;
-  }, {
-    immediate: true
-  });
-  return instance;
-}
-
-function useSticky(_ref) {
-  let {
-    rootEl,
-    isSticky,
-    layoutItemStyles
-  } = _ref;
-  const isStuck = ref(false);
-  const stuckPosition = ref(0);
-  const stickyStyles = 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
-    }];
-  });
-  onMounted(() => {
-    watch(isSticky, val => {
-      if (val) {
-        window.addEventListener('scroll', onScroll, {
-          passive: true
-        });
-      } else {
-        window.removeEventListener('scroll', onScroll);
-      }
-    }, {
-      immediate: true
-    });
-  });
-  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
@@ -16126,6 +15904,7 @@ const VNavigationDrawer = genericComponent()({
     },
     sticky: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -16214,7 +15993,6 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -16244,12 +16022,6 @@ const VNavigationDrawer = genericComponent()({
         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({
@@ -16277,8 +16049,8 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--temporary': isTemporary.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value]
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -16407,6 +16179,7 @@ const VPagination = genericComponent()({
     },
     showFirstLastPage: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -16603,7 +16376,8 @@ const VPagination = genericComponent()({
     }
     useRender(() => createVNode(props.tag, {
       "ref": resizeRef,
-      "class": ['v-pagination', themeClasses.value],
+      "class": ['v-pagination', themeClasses.value, props.class],
+      "style": props.style,
       "role": "navigation",
       "aria-label": t(props.ariaLabel),
       "onKeydown": onKeydown,
@@ -16662,7 +16436,8 @@ const VParallax = genericComponent()({
     scale: {
       type: [Number, String],
       default: 0.5
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
@@ -16724,7 +16499,8 @@ const VParallax = genericComponent()({
     useRender(() => createVNode(VImg, {
       "class": ['v-parallax', {
         'v-parallax--active': isIntersecting.value
-      }],
+      }, props.class],
+      "style": props.style,
       "ref": root,
       "cover": true,
       "onLoadstart": onScroll,
@@ -16749,7 +16525,8 @@ const VRadio = genericComponent()({
       slots
     } = _ref;
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
-      "class": "v-radio",
+      "class": ['v-radio', props.class],
+      "style": props.style,
       "type": "radio"
     }), slots));
     return {};
@@ -16803,7 +16580,8 @@ const VRadioGroup = genericComponent()({
         }
       }) : props.label;
       return createVNode(VInput, mergeProps({
-        "class": "v-radio-group"
+        "class": ['v-radio-group', props.class],
+        "style": props.style
       }, inputAttrs, inputProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
@@ -16941,7 +16719,8 @@ const VRangeSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }],
+        }, props.class],
+        "style": props.style,
         "ref": inputRef
       }, inputProps, {
         "focused": isFocused.value
@@ -17084,6 +16863,7 @@ const VRating = genericComponent()({
       validator: v => ['top', 'bottom'].includes(v)
     },
     ripple: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeSizeProps(),
     ...makeTagProps(),
@@ -17201,7 +16981,8 @@ const VRating = genericComponent()({
         "class": ['v-rating', {
           'v-rating--hover': props.hover,
           'v-rating--readonly': props.readonly
-        }, themeClasses.value]
+        }, themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [createVNode(VRatingItem, {
           "value": 0,
@@ -17301,6 +17082,7 @@ const makeVSlideGroupProps = propsFactory({
     type: [Boolean, String],
     validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
   },
+  ...makeComponentProps(),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active'
@@ -17464,7 +17246,7 @@ const VSlideGroup = genericComponent()({
     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;
@@ -17541,7 +17323,8 @@ const VSlideGroup = genericComponent()({
         'v-slide-group--vertical': !isHorizontal.value,
         'v-slide-group--has-affixes': hasAffixes.value,
         'v-slide-group--is-overflowing': isOverflowing.value
-      }],
+      }, props.class],
+      "style": props.style,
       "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
       "onFocus": onFocus
     }, {
@@ -17691,7 +17474,8 @@ const VSnackbar = genericComponent()({
           'v-snackbar--active': isActive.value,
           'v-snackbar--multi-line': props.multiLine && !props.vertical,
           'v-snackbar--vertical': props.vertical
-        }, positionClasses.value]
+        }, positionClasses.value, props.class],
+        "style": props.style
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
@@ -17791,7 +17575,8 @@ const VSwitch = genericComponent()({
           'v-switch--inset': props.inset
         }, {
           'v-switch--indeterminate': indeterminate.value
-        }, loaderClasses.value]
+        }, loaderClasses.value, props.class],
+        "style": props.style
       }, inputAttrs, inputProps, {
         "id": id.value,
         "focused": isFocused.value
@@ -17860,6 +17645,7 @@ const VSystemBar = genericComponent()({
     color: String,
     height: [Number, String],
     window: Boolean,
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -17901,8 +17687,8 @@ const VSystemBar = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
     }, slots));
     return {};
   }
@@ -17975,10 +17761,10 @@ const VTab = genericComponent()({
     useRender(() => {
       const [btnProps] = VBtn.filterProps(props);
       return createVNode(VBtn, mergeProps({
-        "_as": "VTab",
         "symbol": VTabsSymbol,
         "ref": rootEl,
-        "class": ['v-tab'],
+        "class": ['v-tab', props.class],
+        "style": props.style,
         "tabindex": isSelected.value ? 0 : -1,
         "role": "tab",
         "aria-selected": String(isSelected.value),
@@ -18073,10 +17859,10 @@ const VTabs = genericComponent()({
           'v-tabs--fixed-tabs': props.fixedTabs,
           'v-tabs--grow': props.grow,
           'v-tabs--stacked': props.stacked
-        }, densityClasses.value, backgroundColorClasses.value],
+        }, densityClasses.value, backgroundColorClasses.value, props.class],
         "style": [{
           '--v-tabs-height': convertToUnit(props.height)
-        }, backgroundColorStyles.value],
+        }, backgroundColorStyles.value, props.style],
         "role": "tablist",
         "symbol": VTabsSymbol
       }), {
@@ -18096,6 +17882,7 @@ const VTable = genericComponent()({
     fixedFooter: Boolean,
     height: [Number, String],
     hover: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -18118,7 +17905,8 @@ const VTable = genericComponent()({
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
         'v-table--hover': props.hover
-      }, themeClasses.value, densityClasses.value]
+      }, themeClasses.value, densityClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.top?.(), slots.default ? createVNode("div", {
         "class": "v-table__wrapper",
@@ -18197,7 +17985,7 @@ const VTextarea = genericComponent()({
     const vFieldRef = ref();
     const controlHeight = ref('');
     const textareaRef = ref();
-    const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
+    const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus();
@@ -18283,7 +18071,8 @@ const VTextarea = genericComponent()({
           'v-textarea--auto-grow': props.autoGrow,
           'v-textarea--no-resize': props.noResize || props.autoGrow,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }]
+        }, props.class],
+        "style": props.style
       }, rootAttrs, inputProps, {
         "focused": isFocused.value
       }), {
@@ -18367,6 +18156,7 @@ const VThemeProvider = genericComponent()({
   name: 'VThemeProvider',
   props: {
     withBackground: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps(),
     ...makeTagProps()
   },
@@ -18380,7 +18170,8 @@ const VThemeProvider = genericComponent()({
     return () => {
       if (!props.withBackground) return slots.default?.();
       return createVNode(props.tag, {
-        "class": ['v-theme-provider', themeClasses.value]
+        "class": ['v-theme-provider', themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [slots.default?.()]
       });
@@ -18425,6 +18216,7 @@ const VTimeline = genericComponent()({
       type: String,
       validator: v => ['start', 'end', 'both'].includes(v)
     },
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -18468,10 +18260,10 @@ const VTimeline = genericComponent()({
     useRender(() => createVNode(props.tag, {
       "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
         'v-timeline--inset-line': !!props.lineInset
-      }, themeClasses.value, densityClasses.value, sideClasses.value],
-      "style": {
+      }, themeClasses.value, densityClasses.value, sideClasses.value, props.class],
+      "style": [{
         '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
-      }
+      }, props.style]
     }, slots));
     return {};
   }
@@ -18486,6 +18278,7 @@ const VTimelineDivider = genericComponent()({
     icon: IconValue,
     iconColor: String,
     lineColor: String,
+    ...makeComponentProps(),
     ...makeRoundedProps(),
     ...makeSizeProps(),
     ...makeElevationProps()
@@ -18515,7 +18308,8 @@ const VTimelineDivider = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
-      }]
+      }, props.class],
+      "style": props.style
     }, [createVNode("div", {
       "class": ['v-timeline-divider__before', lineColorClasses.value],
       "style": lineColorStyles.value
@@ -18565,11 +18359,12 @@ const VTimelineItem = genericComponent()({
     icon: IconValue,
     iconColor: String,
     lineInset: [Number, String],
-    ...makeRoundedProps(),
+    ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeRoundedProps(),
     ...makeSizeProps(),
-    ...makeTagProps(),
-    ...makeDimensionProps()
+    ...makeTagProps()
   },
   setup(props, _ref) {
     let {
@@ -18589,11 +18384,11 @@ const VTimelineItem = genericComponent()({
     useRender(() => createVNode("div", {
       "class": ['v-timeline-item', {
         'v-timeline-item--fill-dot': props.fillDot
-      }],
-      "style": {
+      }, props.class],
+      "style": [{
         '--v-timeline-dot-size': convertToUnit(dotSize.value),
         '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
-      }
+      }, props.style]
     }, [createVNode("div", {
       "class": "v-timeline-item__body",
       "style": dimensionStyles.value
@@ -18669,7 +18464,8 @@ const VTooltip = genericComponent()({
       const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
-        "class": ['v-tooltip'],
+        "class": ['v-tooltip', props.class],
+        "style": props.style,
         "id": id.value
       }, overlayProps, {
         "modelValue": isActive.value,
@@ -18717,7 +18513,8 @@ const VValidation = genericComponent()({
 const VVirtualScrollItem = genericComponent()({
   name: 'VVirtualScrollItem',
   props: {
-    dynamicHeight: Boolean
+    dynamicHeight: Boolean,
+    ...makeComponentProps()
   },
   emits: {
     'update:height': height => true
@@ -18744,7 +18541,8 @@ const VVirtualScrollItem = genericComponent()({
     onUpdated(updateHeight);
     useRender(() => createVNode("div", {
       "ref": props.dynamicHeight ? resizeRef : undefined,
-      "class": "v-virtual-scroll__item"
+      "class": ['v-virtual-scroll__item', props.class],
+      "style": props.style
     }, [slots.default?.()]));
   }
 });
@@ -18761,7 +18559,7 @@ const VVirtualScroll = genericComponent()({
       default: () => []
     },
     itemHeight: [Number, String],
-    visibleItems: [Number, String],
+    ...makeComponentProps(),
     ...makeDimensionProps()
   },
   setup(props, _ref) {
@@ -18788,7 +18586,7 @@ const VVirtualScroll = genericComponent()({
     const sizeMap = new Map();
     let sizes = createRange(props.items.length).map(() => itemHeight.value);
     const visibleItems = computed(() => {
-      return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
+      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);
@@ -18799,20 +18597,13 @@ const VVirtualScroll = genericComponent()({
       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() {
@@ -18834,8 +18625,12 @@ const VVirtualScroll = genericComponent()({
       const offset = calculateOffset(index);
       rootEl.value.scrollTop = offset;
     }
+    const items = computed(() => props.items.map((item, index) => ({
+      raw: item,
+      index
+    })));
     const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-    const computedItems = computed(() => props.items.slice(first.value, last.value));
+    const computedItems = computed(() => items.value.slice(first.value, last.value));
     const paddingTop = computed(() => calculateOffset(first.value));
     const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
     const {
@@ -18860,23 +18655,23 @@ const VVirtualScroll = genericComponent()({
     });
     useRender(() => createVNode("div", {
       "ref": rootEl,
-      "class": "v-virtual-scroll",
+      "class": ['v-virtual-scroll', props.class],
       "onScroll": handleScroll,
-      "style": dimensionStyles.value
+      "style": [dimensionStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-virtual-scroll__container",
       "style": {
         paddingTop: convertToUnit(paddingTop.value),
         paddingBottom: convertToUnit(paddingBottom.value)
       }
-    }, [computedItems.value.map((item, index) => createVNode(VVirtualScrollItem, {
-      "key": index,
+    }, [computedItems.value.map(item => 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 {
@@ -19310,6 +19105,17 @@ const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const slotProps = 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,
@@ -19337,14 +19143,14 @@ const VDataTableHeaders = genericComponent()({
         "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) ?? createVNode(VCheckboxBtn, {
+            return slots['column.data-table-select']?.(columnSlotProps) ?? createVNode(VCheckboxBtn, {
               "modelValue": allSelected.value,
               "indeterminate": someSelected.value && !allSelected.value,
               "onUpdate:modelValue": selectAll
@@ -19364,22 +19170,24 @@ const VDataTableHeaders = genericComponent()({
         }
       });
     };
-    useRender(() => createVNode(Fragment, null, [headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
-      "column": column,
-      "x": x,
-      "y": y
-    }, null))])), props.loading && createVNode("tr", {
-      "class": "v-data-table__progress"
-    }, [createVNode("th", {
-      "colspan": columns.value.length
-    }, [createVNode(LoaderSlot, {
-      "name": "v-data-table-headers",
-      "active": true,
-      "color": typeof props.loading === 'boolean' ? undefined : props.loading,
-      "indeterminate": true
-    }, {
-      default: slots.loader
-    })])])]));
+    useRender(() => {
+      return createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+        "column": column,
+        "x": x,
+        "y": y
+      }, null))])), props.loading && createVNode("tr", {
+        "class": "v-data-table__progress"
+      }, [createVNode("th", {
+        "colspan": columns.value.length
+      }, [createVNode(LoaderSlot, {
+        "name": "v-data-table-headers",
+        "active": true,
+        "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+        "indeterminate": true
+      }, {
+        default: slots.loader
+      })])])]);
+    });
   }
 });
 
@@ -19678,9 +19486,7 @@ const VDataTableRow = defineComponent({
         'v-data-table__tr--clickable': !!props.onClick
       }],
       "onClick": props.onClick
-    }, [!columns.value.length && createVNode(VDataTableColumn, {
-      "key": "no-data"
-    }, slots), props.item && columns.value.map((column, i) => createVNode(VDataTableColumn, {
+    }, [props.item && columns.value.map((column, i) => createVNode(VDataTableColumn, {
       "align": column.align,
       "fixed": column.fixed,
       "fixedOffset": column.fixedOffset,
@@ -19770,13 +19576,13 @@ const VDataTableRows = genericComponent()({
     useRender(() => {
       if (props.loading && slots.loading) {
         return createVNode("tr", {
-          "class": "v-data-table-rows-no-data",
+          "class": "v-data-table-rows-loading",
           "key": "loading"
         }, [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 createVNode("tr", {
           "class": "v-data-table-rows-no-data",
           "key": "no-data"
@@ -19870,6 +19676,11 @@ function providePagination(options) {
     if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
     return Math.ceil(itemsLength.value / itemsPerPage.value);
   });
+  watchEffect(() => {
+    if (page.value > pageCount.value) {
+      page.value = pageCount.value;
+    }
+  });
   function setItemsPerPage(value) {
     itemsPerPage.value = value;
     page.value = 1;
@@ -20133,6 +19944,11 @@ const makeVDataTableProps = propsFactory({
   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');
@@ -20240,12 +20056,15 @@ const VDataTable = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
     useRender(() => 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,
@@ -20255,8 +20074,9 @@ const VDataTable = genericComponent()({
       top: slots.top,
       default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
         columns
-      }), createVNode("thead", null, [slots.headers ? slots.headers() : createVNode(VDataTableHeaders, {
+      }), createVNode("thead", null, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
+        "loading": props.loading,
         "multiSort": props.multiSort
       }, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": paginatedItems.value,
@@ -20446,11 +20266,15 @@ const VDataTableVirtual = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
     useRender(() => createVNode(VTable, {
-      "class": "v-data-table",
+      "class": ['v-data-table', {
+        'v-data-table--loading': props.loading
+      }],
       "style": {
         '--v-table-row-height': convertToUnit(itemHeight.value)
       },
@@ -20469,6 +20293,7 @@ const VDataTableVirtual = genericComponent()({
         }
       }, [createVNode("table", null, [createVNode("thead", null, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
+        "loading": props.loading,
         "multiSort": props.multiSort
       }, slots)]), createVNode("tbody", null, [createVNode("tr", {
         "style": {
@@ -20507,11 +20332,6 @@ const VDataTableServer = genericComponent()({
   name: 'VDataTableServer',
   props: {
     color: String,
-    loading: [Boolean, String],
-    loadingText: {
-      type: String,
-      default: '$vuetify.dataIterator.loadingText'
-    },
     itemsLength: {
       type: [Number, String],
       required: true
@@ -20621,7 +20441,7 @@ const VDataTableServer = genericComponent()({
       }), createVNode("thead", {
         "class": "v-data-table__thead",
         "role": "rowgroup"
-      }, [slots.headers ? slots.headers() : createVNode(VDataTableHeaders, {
+      }, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
         "loading": props.loading,
         "color": props.color
@@ -21123,130 +20943,542 @@ var components = /*#__PURE__*/Object.freeze({
 
 // 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() {
@@ -21333,7 +21565,7 @@ function createVuetify$1() {
     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
@@ -21345,7 +21577,7 @@ function inject(key) {
   }
 }
 
-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] : {};
@@ -21356,5 +21588,5 @@ const createVuetify = function () {
   });
 };
 
-export { components, createVuetify, directives, useDate, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify-labs.esm.js.map