@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.0.0-beta.10
+* Vuetify v3.0.0-beta.13
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, Fragment, computed, toRef, getCurrentInstance as getCurrentInstance$1, unref, provide, inject, shallowRef, shallowReactive, toRaw, watchEffect, effectScope, defineComponent as defineComponent$1, capitalize, camelize, h, onDeactivated, onActivated, reactive, onMounted, createVNode, toRefs, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, vShow, resolveDirective, isRef, resolveDynamicComponent, onScopeDispose, warn, toHandlers, Teleport, vModelDynamic, cloneVNode, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, Fragment, reactive, computed, watchEffect, toRefs, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, shallowRef, shallowReactive, toRaw, effectScope, defineComponent as defineComponent$1, capitalize, camelize, h, onDeactivated, onActivated, onMounted, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, resolveDynamicComponent, onScopeDispose, warn, toHandlers, Teleport, vModelDynamic, cloneVNode, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -350,21 +350,16 @@ function getEventCoordinates(e) {
 } // Only allow a single return type
 
 function destructComputed(getter) {
-  const refs = {};
+  const refs = reactive({});
   const base = computed(getter);
-
-  for (const key in base.value) {
-    refs[key] = toRef(base.value, key);
-  }
-
-  watch(base, val => {
-    for (const key in val) {
-      refs[key].value = val[key];
+  watchEffect(() => {
+    for (const key in base.value) {
+      refs[key] = base.value[key];
     }
   }, {
     flush: 'sync'
   });
-  return refs;
+  return toRefs(refs);
 }
 /** Array.includes but value can be any type */
 
@@ -925,10 +920,9 @@ function getCurrentInstance(name, message) {
   return vm;
 }
 function getCurrentInstanceName() {
-  var _getCurrentInstance$t;
-
   let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'composables';
-  return toKebabCase((_getCurrentInstance$t = getCurrentInstance(name).type) == null ? void 0 : _getCurrentInstance$t.name);
+  const vm = getCurrentInstance(name).type;
+  return toKebabCase((vm == null ? void 0 : vm.aliasName) || (vm == null ? void 0 : vm.name));
 }
 let _uid = 0;
 
@@ -968,7 +962,7 @@ function createDefaults(options) {
   return ref(options ?? {});
 }
 function useDefaults() {
-  const defaults = inject(DefaultsSymbol);
+  const defaults = inject$1(DefaultsSymbol);
   if (!defaults) throw new Error('[Vuetify] Could not find defaults instance');
   return defaults;
 }
@@ -1259,12 +1253,12 @@ const makeLayoutItemProps = propsFactory({
   absolute: Boolean
 }, 'layout-item');
 function useLayout() {
-  const layout = inject(VuetifyLayoutKey);
+  const layout = inject$1(VuetifyLayoutKey);
   if (!layout) throw new Error('Could not find injected Vuetify layout');
   return layout;
 }
 function useLayoutItem(options) {
-  const layout = inject(VuetifyLayoutKey);
+  const layout = inject$1(VuetifyLayoutKey);
   if (!layout) throw new Error('Could not find injected Vuetify layout');
   const id = options.id ?? `layout-item-${getUid()}`;
   const vm = getCurrentInstance('useLayoutItem');
@@ -1321,7 +1315,7 @@ const generateLayers = (layout, positions, layoutSizes, activeItems) => {
 };
 
 function createLayout(props) {
-  const parentLayout = inject(VuetifyLayoutKey, null);
+  const parentLayout = inject$1(VuetifyLayoutKey, null);
   const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
   const registered = ref([]);
   const positions = reactive(new Map());
@@ -1698,8 +1692,7 @@ function parseThemeOptions() {
 } // Composables
 
 
-function createTheme(app, options) {
-  const head = app._context.provides.usehead;
+function createTheme(options) {
   const parsedOptions = reactive(parseThemeOptions(options));
   const name = ref(parsedOptions.defaultTheme);
   const themes = ref(parsedOptions.themes);
@@ -1786,46 +1779,51 @@ function createTheme(app, options) {
     return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
   });
 
-  if (head) {
-    head.addHeadObjs(computed(() => {
-      const style = {
-        children: styles.value,
-        type: 'text/css',
-        id: 'vuetify-theme-stylesheet'
-      };
-      if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
-      return {
-        style: [style]
-      };
-    }));
+  function install(app) {
+    const head = app._context.provides.usehead;
 
-    if (IN_BROWSER) {
-      watchEffect(() => head.updateDOM());
-    }
-  } else {
-    let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-    watch(styles, updateStyles, {
-      immediate: true
-    });
-
-    function updateStyles() {
-      if (parsedOptions.isDisabled) return;
+    if (head) {
+      head.addHeadObjs(computed(() => {
+        const style = {
+          children: styles.value,
+          type: 'text/css',
+          id: 'vuetify-theme-stylesheet'
+        };
+        if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
+        return {
+          style: [style]
+        };
+      }));
 
-      if (typeof document !== 'undefined' && !styleEl) {
-        const el = document.createElement('style');
-        el.type = 'text/css';
-        el.id = 'vuetify-theme-stylesheet';
-        if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
-        styleEl = el;
-        document.head.appendChild(styleEl);
+      if (IN_BROWSER) {
+        watchEffect(() => head.updateDOM());
       }
+    } else {
+      let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
+      watch(styles, updateStyles, {
+        immediate: true
+      });
+
+      function updateStyles() {
+        if (parsedOptions.isDisabled) return;
+
+        if (typeof document !== 'undefined' && !styleEl) {
+          const el = document.createElement('style');
+          el.type = 'text/css';
+          el.id = 'vuetify-theme-stylesheet';
+          if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
+          styleEl = el;
+          document.head.appendChild(styleEl);
+        }
 
-      if (styleEl) styleEl.innerHTML = styles.value;
+        if (styleEl) styleEl.innerHTML = styles.value;
+      }
     }
   }
 
   const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
   return {
+    install,
     isDisabled: parsedOptions.isDisabled,
     name,
     themes,
@@ -1841,7 +1839,7 @@ function createTheme(app, options) {
 }
 function provideTheme(props) {
   getCurrentInstance('provideTheme');
-  const theme = inject(ThemeSymbol, null);
+  const theme = inject$1(ThemeSymbol, null);
   if (!theme) throw new Error('Could not find Vuetify theme injection');
   const name = computed(() => {
     return props.theme ?? (theme == null ? void 0 : theme.name.value);
@@ -1856,7 +1854,7 @@ function provideTheme(props) {
 }
 function useTheme() {
   getCurrentInstance('useTheme');
-  const theme = inject(ThemeSymbol, null);
+  const theme = inject$1(ThemeSymbol, null);
   if (!theme) throw new Error('Could not find Vuetify theme injection');
   return theme;
 }
@@ -2030,14 +2028,14 @@ function createRtlScope(currentScope, localeScope, options) {
   };
 }
 function provideRtl(props, localeScope) {
-  const currentScope = inject(RtlSymbol);
+  const currentScope = inject$1(RtlSymbol);
   if (!currentScope) throw new Error('[Vuetify] Could not find injected rtl instance');
   const newScope = createRtlScope(currentScope, localeScope, props);
   provide(RtlSymbol, newScope);
   return newScope;
 }
 function useRtl() {
-  const currentScope = inject(RtlSymbol);
+  const currentScope = inject$1(RtlSymbol);
   if (!currentScope) throw new Error('[Vuetify] Could not find injected rtl instance');
   return currentScope;
 }
@@ -2783,20 +2781,22 @@ const VImg = defineComponent({
       'v-img__img--contain': !props.cover
     }));
 
-    const __image = computed(() => {
+    const __image = () => {
       var _slots$sources;
 
-      if (!normalisedSrc.value.src || state.value === 'idle') return;
-      const img = h('img', {
-        class: ['v-img__img', containClasses.value],
-        src: normalisedSrc.value.src,
-        srcset: normalisedSrc.value.srcset,
-        alt: '',
-        sizes: props.sizes,
-        ref: image,
-        onLoad,
-        onError
-      });
+      if (!normalisedSrc.value.src || state.value === 'idle') return null;
+
+      const img = createVNode("img", {
+        "class": ['v-img__img', containClasses.value],
+        "src": normalisedSrc.value.src,
+        "srcset": normalisedSrc.value.srcset,
+        "alt": "",
+        "sizes": props.sizes,
+        "ref": image,
+        "onLoad": onLoad,
+        "onError": onError
+      }, null);
+
       const sources = (_slots$sources = slots.sources) == null ? void 0 : _slots$sources.call(slots);
       return createVNode(MaybeTransition, {
         "transition": props.transition,
@@ -2806,9 +2806,9 @@ const VImg = defineComponent({
           "class": "v-img__picture"
         }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
       });
-    });
+    };
 
-    const __preloadImage = computed(() => createVNode(MaybeTransition, {
+    const __preloadImage = () => createVNode(MaybeTransition, {
       "transition": props.transition
     }, {
       default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
@@ -2816,10 +2816,10 @@ const VImg = defineComponent({
         "src": normalisedSrc.value.lazySrc,
         "alt": ""
       }, null)]
-    }));
+    });
 
-    const __placeholder = computed(() => {
-      if (!slots.placeholder) return;
+    const __placeholder = () => {
+      if (!slots.placeholder) return null;
       return createVNode(MaybeTransition, {
         "transition": props.transition,
         "appear": true
@@ -2828,10 +2828,10 @@ const VImg = defineComponent({
           "class": "v-img__placeholder"
         }, [slots.placeholder()])]
       });
-    });
+    };
 
-    const __error = computed(() => {
-      if (!slots.error) return;
+    const __error = () => {
+      if (!slots.error) return null;
       return createVNode(MaybeTransition, {
         "transition": props.transition,
         "appear": true
@@ -2840,17 +2840,17 @@ const VImg = defineComponent({
           "class": "v-img__error"
         }, [slots.error()])]
       });
-    });
+    };
 
-    const __gradient = computed(() => {
-      if (!props.gradient) return;
+    const __gradient = () => {
+      if (!props.gradient) return null;
       return createVNode("div", {
         "class": "v-img__gradient",
         "style": {
           backgroundImage: `linear-gradient(${props.gradient})`
         }
       }, null);
-    });
+    };
 
     const isBooted = ref(false);
     {
@@ -2877,7 +2877,7 @@ const VImg = defineComponent({
       "aria-label": props.alt,
       "role": props.alt ? 'img' : undefined
     }, {
-      additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],
+      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,
@@ -3207,6 +3207,23 @@ function filterToolbarProps(props) {
   return pick(props, Object.keys((VToolbar == null ? void 0 : VToolbar.props) ?? {}));
 }
 
+function useToggleScope(source, cb) {
+  let scope;
+  watch(source, active => {
+    if (active && !scope) {
+      scope = effectScope();
+      scope.run(cb);
+    } else {
+      var _scope;
+
+      (_scope = scope) == null ? void 0 : _scope.stop();
+      scope = undefined;
+    }
+  }, {
+    immediate: true
+  });
+}
+
 // Utilities
 
 // Composables
@@ -3214,28 +3231,45 @@ function useProxiedModel(props, prop, defaultValue) {
   let transformIn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : v => v;
   let transformOut = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : v => v;
   const vm = getCurrentInstance('useProxiedModel');
-  const propIsDefined = computed(() => {
-    var _vm$vnode$props, _vm$vnode$props2;
+  const internal = ref(props[prop]);
+  const kebabProp = toKebabCase(prop);
+  const checkKebab = kebabProp !== prop;
+  const isControlled = checkKebab ? computed(() => {
+    var _vm$vnode$props, _vm$vnode$props2, _vm$vnode$props3, _vm$vnode$props4;
 
     void props[prop];
-    return !!(vm != null && (_vm$vnode$props = vm.vnode.props) != null && _vm$vnode$props.hasOwnProperty(prop) || vm != null && (_vm$vnode$props2 = vm.vnode.props) != null && _vm$vnode$props2.hasOwnProperty(toKebabCase(prop)));
+    return !!(((_vm$vnode$props = vm.vnode.props) != null && _vm$vnode$props.hasOwnProperty(prop) || (_vm$vnode$props2 = vm.vnode.props) != null && _vm$vnode$props2.hasOwnProperty(kebabProp)) && ((_vm$vnode$props3 = vm.vnode.props) != null && _vm$vnode$props3.hasOwnProperty(`onUpdate:${prop}`) || (_vm$vnode$props4 = vm.vnode.props) != null && _vm$vnode$props4.hasOwnProperty(`onUpdate:${kebabProp}`)));
+  }) : computed(() => {
+    var _vm$vnode$props5, _vm$vnode$props6;
+
+    void props[prop];
+    return !!((_vm$vnode$props5 = vm.vnode.props) != null && _vm$vnode$props5.hasOwnProperty(prop) && (_vm$vnode$props6 = vm.vnode.props) != null && _vm$vnode$props6.hasOwnProperty(`onUpdate:${prop}`));
+  });
+  useToggleScope(() => !isControlled.value, () => {
+    watch(() => props[prop], val => {
+      internal.value = val;
+    });
   });
-  const internal = ref(transformIn(props[prop]));
-  return computed({
+  const model = computed({
     get() {
-      if (propIsDefined.value) return transformIn(props[prop]);else return internal.value;
+      return transformIn(isControlled.value ? props[prop] : internal.value);
     },
 
     set(newValue) {
-      if ((propIsDefined.value ? transformIn(props[prop]) : internal.value) === newValue) {
+      if (transformIn(isControlled.value ? props[prop] : internal.value) === newValue) {
         return;
       }
 
+      newValue = transformOut(newValue);
       internal.value = newValue;
-      vm == null ? void 0 : vm.emit(`update:${prop}`, transformOut(newValue));
+      vm == null ? void 0 : vm.emit(`update:${prop}`, newValue);
     }
 
   });
+  Object.defineProperty(model, 'externalValue', {
+    get: () => isControlled.value ? props[prop] : internal.value
+  });
+  return model;
 }
 
 const VAppBar = defineComponent({
@@ -3455,7 +3489,7 @@ function useGroupItem(props, injectKey) {
 
   const id = getUid();
   provide(Symbol.for(`${injectKey.description}:id`), id);
-  const group = inject(injectKey, null);
+  const group = inject$1(injectKey, null);
 
   if (!group) {
     if (!required) return group;
@@ -3650,9 +3684,7 @@ function getValues(items, ids) {
 const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
 const VBtnToggle = genericComponent()({
   name: 'VBtnToggle',
-  props: makeGroupProps({
-    selectedClass: 'v-btn--selected'
-  }),
+  props: makeGroupProps(),
   emits: {
     'update:modelValue': value => true
   },
@@ -3837,7 +3869,7 @@ function createIcons(options) {
   }, options);
 }
 const useIcon = props => {
-  const icons = inject(IconSymbol);
+  const icons = inject$1(IconSymbol);
   if (!icons) throw new Error('Missing Vuetify Icons provide!');
   const iconData = computed(() => {
     const iconAlias = isRef(props) ? props.value : props.icon;
@@ -4756,16 +4788,24 @@ function useLink(props, attrs) {
   }
 
   const link = props.to ? RouterLink.useLink(props) : undefined;
-  return { ...link,
+  return {
     isLink,
     isClickable,
+    route: link == null ? void 0 : link.route,
+    navigate: link == null ? void 0 : link.navigate,
+    isActive: link && computed(() => {
+      var _link$isExactActive, _link$isActive;
+
+      return props.exact ? (_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value : (_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value;
+    }),
     href: computed(() => props.to ? link == null ? void 0 : link.route.value.href : props.href)
   };
 }
 const makeRouterProps = propsFactory({
   href: String,
   replace: Boolean,
-  to: [String, Object]
+  to: [String, Object],
+  exact: Boolean
 }, 'router');
 let inTransition = false;
 function useBackButton(router, cb) {
@@ -4811,11 +4851,11 @@ function useBackButton(router, cb) {
 
 function useSelectLink(link, select) {
   watch(() => {
-    var _link$isExactActive;
+    var _link$isActive;
 
-    return (_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value;
-  }, isExactActive => {
-    if (link.isLink.value && isExactActive && select) {
+    return (_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value;
+  }, isActive => {
+    if (link.isLink.value && isActive && select) {
       nextTick(() => {
         select(true);
       });
@@ -4831,7 +4871,10 @@ const VBtn = defineComponent({
     Ripple
   },
   props: {
-    active: Boolean,
+    active: {
+      type: Boolean,
+      default: undefined
+    },
     symbol: {
       type: null,
       default: VBtnToggleSymbol
@@ -4907,10 +4950,16 @@ const VBtn = defineComponent({
       roundedClasses
     } = useRounded(props);
     const {
-      sizeClasses
+      sizeClasses,
+      sizeStyles
     } = useSize(props);
     const group = useGroupItem(props, props.symbol, false);
     const link = useLink(props, attrs);
+    const isActive = computed(() => {
+      var _link$isActive;
+
+      return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || (group == null ? void 0 : group.isSelected.value));
+    });
     const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
     const isElevated = computed(() => {
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
@@ -4923,10 +4972,11 @@ const VBtn = defineComponent({
       const hasColor = !group || group.isSelected.value;
       const hasPrepend = !!(props.prependIcon || slots.prepend);
       const hasAppend = !!(props.appendIcon || slots.append);
+      const hasIcon = !!(props.icon && props.icon !== true);
       return withDirectives(createVNode(Tag, {
         "type": Tag === 'a' ? undefined : 'button',
         "class": ['v-btn', group == null ? void 0 : group.selectedClass.value, {
-          'v-btn--active': props.active,
+          'v-btn--active': isActive.value,
           'v-btn--block': props.block,
           'v-btn--disabled': isDisabled.value,
           'v-btn--elevated': isElevated.value,
@@ -4935,7 +4985,7 @@ const VBtn = defineComponent({
           '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],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
         "onClick": e => {
@@ -4964,11 +5014,11 @@ const VBtn = defineComponent({
           "key": "content",
           "defaults": {
             VIcon: {
-              icon: typeof props.icon === 'string' ? props.icon : undefined
+              icon: hasIcon ? props.icon : undefined
             }
           }
         }, {
-          default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (typeof props.icon === 'string' && createVNode(VIcon, {
+          default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (hasIcon && createVNode(VIcon, {
             "key": "icon"
           }, null))]
         })]), !props.icon && hasAppend && createVNode(VDefaultsProvider, {
@@ -5074,12 +5124,12 @@ const VAlertTitle = createSimpleFunctional('v-alert-title');
 const LocaleAdapterSymbol = Symbol.for('vuetify:locale-adapter');
 const VuetifyLocaleSymbol = Symbol.for('vuetify:locale');
 function provideLocale(props) {
-  const adapter = inject(LocaleAdapterSymbol);
+  const adapter = inject$1(LocaleAdapterSymbol);
   if (!adapter) throw new Error('[Vuetify] Could not find injected locale adapter');
   return adapter.createScope(props);
 }
 function useLocale() {
-  const adapter = inject(LocaleAdapterSymbol);
+  const adapter = inject$1(LocaleAdapterSymbol);
   if (!adapter) throw new Error('[Vuetify] Could not find injected locale adapter');
   return adapter.getScope();
 }
@@ -5090,9 +5140,16 @@ function isLocaleAdapter(x) {
 
 function createLocale(app, options) {
   const adapter = isLocaleAdapter(options) ? options : createDefaultLocaleAdapter(options);
-  const instance = adapter.createRoot(app);
-  app == null ? void 0 : app.provide(RtlSymbol, createRtl(instance, options));
-  return adapter;
+
+  function install(app) {
+    const instance = adapter.createRoot(app);
+    app.provide(RtlSymbol, createRtl(instance, options));
+  }
+
+  return {
+    adapter,
+    install
+  };
 }
 const LANG_PREFIX = '$vuetify.';
 
@@ -5172,12 +5229,12 @@ function createDefaultLocaleAdapter(options) {
       return rootScope;
     },
     getScope: () => {
-      const currentScope = inject(VuetifyLocaleSymbol);
+      const currentScope = inject$1(VuetifyLocaleSymbol);
       if (!currentScope) throw new Error('[Vuetify] Could not find injected locale instance');
       return currentScope;
     },
     createScope: options => {
-      const currentScope = inject(VuetifyLocaleSymbol);
+      const currentScope = inject$1(VuetifyLocaleSymbol);
       if (!currentScope) throw new Error('[Vuetify] Could not find injected locale instance');
       const newScope = createScope({
         current: computed(() => (options == null ? void 0 : options.locale) ?? currentScope.current.value),
@@ -5536,7 +5593,7 @@ function createForm(props) {
   };
 }
 function useForm() {
-  return inject(FormKey, null);
+  return inject$1(FormKey, null);
 }
 
 // Composables
@@ -5566,7 +5623,7 @@ function useValidation(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
   let id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : getUid();
   const model = useProxiedModel(props, 'modelValue');
-  const validationModel = computed(() => props.validationValue ?? model.value);
+  const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue);
   const form = useForm();
   const internalErrorMessages = ref([]);
   const isPristine = ref(true);
@@ -5772,18 +5829,18 @@ const VInput = genericComponent()({
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
         "class": "v-input__prepend"
-      }, [props.prependIcon && createVNode(InputIcon, {
+      }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && createVNode(InputIcon, {
         "key": "prepend-icon",
         "name": "prepend"
-      }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), slots.default && createVNode("div", {
+      }, null)]), slots.default && createVNode("div", {
         "class": "v-input__control"
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && createVNode("div", {
         "key": "append",
         "class": "v-input__append"
-      }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && createVNode(InputIcon, {
+      }, [props.appendIcon && createVNode(InputIcon, {
         "key": "append-icon",
         "name": "append"
-      }, null)]), hasDetails && createVNode("div", {
+      }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && createVNode("div", {
         "class": "v-input__details"
       }, [createVNode(VMessages, {
         "active": hasMessages,
@@ -5809,6 +5866,7 @@ const VLabel = defineComponent({
   name: 'VLabel',
   props: {
     text: String,
+    clickable: Boolean,
     ...makeThemeProps()
   },
 
@@ -5820,7 +5878,9 @@ const VLabel = defineComponent({
       var _slots$default;
 
       return createVNode("label", {
-        "class": "v-label"
+        "class": ['v-label', {
+          'v-label--clickable': props.clickable
+        }]
       }, [props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     });
     return {};
@@ -5873,7 +5933,9 @@ const VSelectionControlGroup = defineComponent({
       var _slots$default;
 
       return createVNode("div", {
-        "class": "v-selection-control-group",
+        "class": ['v-selection-control-group', {
+          'v-selection-control-group--inline': props.inline
+        }],
         "aria-labelled-by": props.type === 'radio' ? id.value : undefined,
         "role": props.type === 'radio' ? 'radiogroup' : undefined
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
@@ -5915,7 +5977,7 @@ const makeSelectionControlProps = propsFactory({
   ...makeDensityProps()
 });
 function useSelectionControl(props) {
-  const group = inject(VSelectionControlGroupSymbol, undefined);
+  const group = inject$1(VSelectionControlGroupSymbol, undefined);
   const {
     densityClasses
   } = useDensity(props);
@@ -6064,7 +6126,8 @@ const VSelectionControl = genericComponent()({
           id: id.value
         }
       })]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
-        "for": id.value
+        "for": id.value,
+        "clickable": true
       }, {
         default: () => [label]
       })]);
@@ -6180,7 +6243,6 @@ const VCheckbox = defineComponent({
 });
 
 const makeVAvatarProps = propsFactory({
-  color: String,
   start: Boolean,
   end: Boolean,
   icon: IconValue,
@@ -6188,7 +6250,10 @@ const makeVAvatarProps = propsFactory({
   ...makeDensityProps(),
   ...makeRoundedProps(),
   ...makeSizeProps(),
-  ...makeTagProps()
+  ...makeTagProps(),
+  ...makeVariantProps({
+    variant: 'flat'
+  })
 });
 const VAvatar = defineComponent({
   name: 'VAvatar',
@@ -6199,9 +6264,10 @@ const VAvatar = defineComponent({
       slots
     } = _ref;
     const {
-      backgroundColorClasses,
-      backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(props);
     const {
       densityClasses
     } = useDensity(props);
@@ -6219,15 +6285,17 @@ const VAvatar = defineComponent({
         "class": ['v-avatar', {
           'v-avatar--start': props.start,
           'v-avatar--end': props.end
-        }, backgroundColorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value],
-        "style": [backgroundColorStyles.value, sizeStyles.value]
+        }, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
+        "style": [colorStyles.value, sizeStyles.value]
       }, {
         default: () => [props.image ? createVNode(VImg, {
+          "key": "image",
           "src": props.image,
           "alt": ""
         }, null) : props.icon ? createVNode(VIcon, {
+          "key": "icon",
           "icon": props.icon
-        }, null) : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+        }, null) : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), genOverlays(false, 'v-avatar')]
       });
     });
     return {};
@@ -6554,7 +6622,7 @@ const VDivider = defineComponent({
 
 const ListKey = Symbol.for('vuetify:list');
 function createList() {
-  const parent = inject(ListKey, {
+  const parent = inject$1(ListKey, {
     hasPrepend: ref(false),
     updateHasPrepend: () => null
   });
@@ -6568,7 +6636,7 @@ function createList() {
   return parent;
 }
 function useList() {
-  return inject(ListKey, null);
+  return inject$1(ListKey, null);
 }
 
 const singleOpenStrategy = {
@@ -7017,7 +7085,7 @@ const useNested = props => {
   return nested.root;
 };
 const useNestedItem = (id, isGroup) => {
-  const parent = inject(VNestedSymbol, emptyNested);
+  const parent = inject$1(VNestedSymbol, emptyNested);
   const computedId = computed(() => id.value ?? getUid().toString());
   const item = { ...parent,
     id: computedId,
@@ -7039,7 +7107,7 @@ const useNestedItem = (id, isGroup) => {
   return item;
 };
 const useNestedGroupActivator = () => {
-  const parent = inject(VNestedSymbol, emptyNested);
+  const parent = inject$1(VNestedSymbol, emptyNested);
   provide(VNestedSymbol, { ...parent,
     isGroupActivator: true
   });
@@ -7210,9 +7278,9 @@ const VListItem = genericComponent()({
     } = useNestedItem(id, false);
     const list = useList();
     const isActive = computed(() => {
-      var _link$isExactActive;
+      var _link$isActive;
 
-      return props.active !== false && (props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value);
+      return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || isSelected.value);
     });
     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));
@@ -7222,9 +7290,9 @@ const VListItem = genericComponent()({
       variant: props.variant
     }));
     watch(() => {
-      var _link$isExactActive2;
+      var _link$isActive2;
 
-      return (_link$isExactActive2 = link.isExactActive) == null ? void 0 : _link$isExactActive2.value;
+      return (_link$isActive2 = link.isActive) == null ? void 0 : _link$isActive2.value;
     }, val => {
       if (val && parent.value != null) {
         root.open(parent.value, true);
@@ -7848,6 +7916,7 @@ function useActivator(props, _ref) {
   const activatorEl = ref();
   let isHovered = false;
   let isFocused = false;
+  let firstEnter = true;
   const openOnFocus = computed(() => props.openOnFocus || props.openOnFocus == null && props.openOnHover);
   const openOnClick = computed(() => props.openOnClick || props.openOnClick == null && !props.openOnHover && !openOnFocus.value);
   const {
@@ -7855,6 +7924,10 @@ function useActivator(props, _ref) {
     runCloseDelay
   } = useDelay(props, value => {
     if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused) && !(props.openOnHover && isActive.value && !isTop.value)) {
+      if (isActive.value !== value) {
+        firstEnter = true;
+      }
+
       isActive.value = value;
     }
   });
@@ -7921,7 +7994,7 @@ function useActivator(props, _ref) {
     }
 
     if (props.closeOnContentClick) {
-      const menu = inject(VMenuSymbol, null);
+      const menu = inject$1(VMenuSymbol, null);
 
       events.click = () => {
         isActive.value = false;
@@ -7931,6 +8004,26 @@ function useActivator(props, _ref) {
 
     return events;
   });
+  const scrimEvents = computed(() => {
+    const events = {};
+
+    if (props.openOnHover) {
+      events.mouseenter = () => {
+        if (firstEnter) {
+          isHovered = true;
+          firstEnter = false;
+          runOpenDelay();
+        }
+      };
+
+      events.mouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+
+    return events;
+  });
   watch(isTop, val => {
     if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) {
       isActive.value = false;
@@ -7966,7 +8059,8 @@ function useActivator(props, _ref) {
     activatorEl,
     activatorRef,
     activatorEvents,
-    contentEvents
+    contentEvents,
+    scrimEvents
   };
 }
 
@@ -8690,28 +8784,11 @@ function bindScroll(el, onScroll) {
   });
 }
 
-function useToggleScope(source, cb) {
-  let scope;
-  watch(source, active => {
-    if (active && !scope) {
-      scope = effectScope();
-      scope.run(cb);
-    } else {
-      var _scope;
-
-      (_scope = scope) == null ? void 0 : _scope.stop();
-      scope = undefined;
-    }
-  }, {
-    immediate: true
-  });
-}
-
 const StackSymbol = Symbol.for('vuetify:stack');
 const globalStack = reactive([]);
 function useStack(isActive, zIndex) {
   const vm = getCurrentInstance('useStack');
-  const parent = inject(StackSymbol, undefined);
+  const parent = inject$1(StackSymbol, undefined);
   const stack = reactive({
     activeChildren: new Set()
   });
@@ -8974,7 +9051,8 @@ const VOverlay = genericComponent()({
       activatorEl,
       activatorRef,
       activatorEvents,
-      contentEvents
+      contentEvents,
+      scrimEvents
     } = useActivator(props, {
       isActive,
       isTop: localTop
@@ -9089,10 +9167,10 @@ const VOverlay = genericComponent()({
             top: convertToUnit(top.value)
           }],
           "ref": root
-        }, attrs), [createVNode(Scrim, {
+        }, attrs), [createVNode(Scrim, mergeProps({
           "color": scrimColor,
           "modelValue": isActive.value && !!props.scrim
-        }, null), createVNode(MaybeTransition, {
+        }, toHandlers(scrimEvents.value)), null), createVNode(MaybeTransition, {
           "appear": true,
           "persisted": true,
           "transition": props.transition,
@@ -9240,7 +9318,7 @@ const VMenu = genericComponent()({
     const uid = getUid();
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
-    const parent = inject(VMenuSymbol, null);
+    const parent = inject$1(VMenuSymbol, null);
     let openChildren = 0;
     provide(VMenuSymbol, {
       register() {
@@ -9289,8 +9367,20 @@ const VMenu = genericComponent()({
       },
       "onClick:outside": onClickOutside
     }, scopeId, attrs), {
-      default: slots.default,
-      activator: slots.activator
+      activator: slots.activator,
+      default: function () {
+        var _slots$default;
+
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return createVNode(VDefaultsProvider, {
+          "root": true
+        }, {
+          default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)]
+        });
+      }
     }));
     return forwardRefs({
       id
@@ -9509,7 +9599,7 @@ const VField = genericComponent()({
           'v-field--prepended': hasPrepend,
           'v-field--reverse': props.reverse,
           'v-field--single-line': props.singleLine,
-          'v-field--has-label': !!label,
+          'v-field--no-label': !label,
           [`v-field--variant-${props.variant}`]: true
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
         "style": [backgroundColorStyles.value, textColorStyles.value],
@@ -9949,7 +10039,7 @@ const VSelect = genericComponent()({
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
-        "validationValue": props.modelValue ?? model.value,
+        "validationValue": model.externalValue,
         "dirty": model.value.length > 0,
         "class": ['v-select', {
           'v-select--active-menu': menu.value,
@@ -10309,7 +10399,7 @@ const VAutocomplete = genericComponent()({
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
-        "validationValue": props.modelValue ?? model.value,
+        "validationValue": model.externalValue,
         "dirty": model.value.length > 0,
         "onInput": onInput,
         "class": ['v-autocomplete', {
@@ -10640,8 +10730,8 @@ function createDisplay(options, isHydrate) {
     width.value = getClientWidth();
   }
 
-  if (isHydrate) {
-    nextTick(() => onResize());
+  if (isHydrate && IN_BROWSER) {
+    requestAnimationFrame(() => onResize());
   } // eslint-disable-next-line max-statements
 
 
@@ -10687,7 +10777,7 @@ function createDisplay(options, isHydrate) {
   return toRefs(state);
 }
 function useDisplay() {
-  const display = inject(DisplaySymbol);
+  const display = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
   return display;
 }
@@ -10922,9 +11012,9 @@ const VBreadcrumbsItem = defineComponent({
     } = _ref;
     const link = useLink(props, attrs);
     const isActive = computed(() => {
-      var _link$isExactActive;
+      var _link$isActive;
 
-      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+      return props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value);
     });
     const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {
@@ -11652,7 +11742,7 @@ const VWindowItem = defineComponent({
     let {
       slots
     } = _ref;
-    const window = inject(VWindowSymbol);
+    const window = inject$1(VWindowSymbol);
     const groupItem = useGroupItem(props, VWindowGroupSymbol);
     const {
       isBooted
@@ -11845,10 +11935,10 @@ const VCarousel = defineComponent({
           },
           "scoped": true
         }, {
-          default: () => [group.items.value.map(item => {
+          default: () => [group.items.value.map((item, index) => {
             const props = {
-              'aria-label': t('$vuetify.carousel.ariaLabel.delimiter'),
-              class: [group.isSelected(item.id) && 'v-btn--selected'],
+              'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
+              class: [group.isSelected(item.id) && 'v-btn--active'],
               onClick: () => group.select(item.id, true)
             };
             return slots.item ? slots.item({
@@ -12575,8 +12665,8 @@ const useSlider = _ref => {
       label: t.toString()
     }));
     return Object.keys(props.ticks).map(key => ({
-      value: parseInt(key, 10),
-      position: position(parseInt(key, 10)),
+      value: parseFloat(key),
+      position: position(parseFloat(key)),
       label: props.ticks[key]
     }));
   });
@@ -12659,7 +12749,7 @@ const VSliderThumb = defineComponent({
       slots,
       emit
     } = _ref;
-    const slider = inject(VSliderSymbol);
+    const slider = inject$1(VSliderSymbol);
     if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider');
     const {
       thumbColor,
@@ -12796,7 +12886,7 @@ const VSliderTrack = defineComponent({
     let {
       slots
     } = _ref;
-    const slider = inject(VSliderSymbol);
+    const slider = inject$1(VSliderSymbol);
     if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider');
     const {
       color,
@@ -12808,7 +12898,9 @@ const VSliderTrack = defineComponent({
       trackColor,
       trackFillColor,
       trackSize,
-      vertical
+      vertical,
+      min,
+      max
     } = slider;
     const {
       roundedClasses
@@ -12842,11 +12934,13 @@ const VSliderTrack = defineComponent({
         var _slots$tickLabel;
 
         const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
-        const directionValue = tick.position > 0 && tick.position < 100 ? convertToUnit(tick.position, '%') : undefined;
+        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
         return createVNode("div", {
           "key": tick.value,
           "class": ['v-slider-track__tick', {
-            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop
+            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
+            'v-slider-track__tick--first': tick.value === min.value,
+            'v-slider-track__tick--last': tick.value === max.value
           }],
           "style": {
             [directionProperty]: directionValue
@@ -12945,6 +13039,7 @@ const VSlider = defineComponent({
     const trackStop = computed(() => position(model.value));
     useRender(() => {
       const [inputProps, _] = filterInputProps(props);
+      const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', {
           'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
@@ -12955,6 +13050,14 @@ const VSlider = defineComponent({
       }, inputProps, {
         "focused": isFocused.value
       }), { ...slots,
+        prepend: hasPrepend ? slotProps => {
+          var _slots$label, _slots$prepend;
+
+          return createVNode(Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? createVNode(VLabel, {
+            "class": "v-slider__label",
+            "text": props.label
+          }, null) : undefined, (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps)]);
+        } : undefined,
         default: _ref2 => {
           let {
             id
@@ -13852,7 +13955,7 @@ const VCombobox = genericComponent()({
         "onUpdate:modelValue": [$event => search.value = $event, v => {
           if (v == null) model.value = [];
         }],
-        "validationValue": props.modelValue ?? model.value,
+        "validationValue": model.externalValue,
         "dirty": model.value.length > 0,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
@@ -13994,9 +14097,6 @@ const VDialog = genericComponent()({
     },
     scrollable: Boolean,
     modelValue: Boolean,
-    ...makeDimensionProps({
-      width: 'auto'
-    }),
     ...makeTransitionProps({
       transition: {
         component: VDialogTransition
@@ -14013,9 +14113,6 @@ const VDialog = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       scopeId
     } = useScopeId();
@@ -14031,7 +14128,7 @@ const VDialog = genericComponent()({
       (_overlay$value2 = overlay.value) != null && _overlay$value2.globalTop && // It isn't the document or the dialog body
       ![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, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+        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"]'));
         if (!focusable.length) return;
         const firstElement = focusable[0];
         const lastElement = focusable[focusable.length - 1];
@@ -14076,7 +14173,6 @@ const VDialog = genericComponent()({
         'v-dialog--fullscreen': props.fullscreen,
         'v-dialog--scrollable': props.scrollable
       }],
-      "style": dimensionStyles.value,
       "transition": props.transition,
       "scrollStrategy": "block",
       "ref": overlay,
@@ -14088,8 +14184,20 @@ const VDialog = genericComponent()({
       },
       "z-index": 2400
     }, scopeId, attrs), {
-      default: slots.default,
-      activator: slots.activator
+      activator: slots.activator,
+      default: function () {
+        var _slots$default;
+
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return createVNode(VDefaultsProvider, {
+          "root": true
+        }, {
+          default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)]
+        });
+      }
     }));
     return forwardRefs({}, overlay);
   }
@@ -14170,7 +14278,7 @@ const VExpansionPanelTitle = defineComponent({
     let {
       slots
     } = _ref;
-    const expansionPanel = inject(VExpansionPanelSymbol);
+    const expansionPanel = inject$1(VExpansionPanelSymbol);
     if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel');
     const {
       backgroundColorClasses,
@@ -14218,7 +14326,7 @@ const VExpansionPanelText = defineComponent({
     let {
       slots
     } = _ref;
-    const expansionPanel = inject(VExpansionPanelSymbol);
+    const expansionPanel = inject$1(VExpansionPanelSymbol);
     if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-text needs to be placed inside v-expansion-panel');
     const {
       hasContent,
@@ -14512,9 +14620,9 @@ const VFileInput = defineComponent({
                 },
                 "onFocus": onFocus,
                 "onBlur": () => isFocused.value = false
-              }, slotProps, inputAttrs), null), model.value.length > 0 && createVNode("div", {
+              }, slotProps, inputAttrs), null), createVNode("div", {
                 "class": fieldClass
-              }, [slots.selection ? slots.selection({
+              }, [model.value.length > 0 && (slots.selection ? slots.selection({
                 fileNames: fileNames.value,
                 totalBytes: totalBytes.value,
                 totalBytesReadable: totalBytesReadable.value
@@ -14524,7 +14632,7 @@ const VFileInput = defineComponent({
                 "color": props.color
               }, {
                 default: () => [text]
-              })) : fileNames.value.join(', ')])]);
+              })) : fileNames.value.join(', '))])]);
             }
           });
         },
@@ -16009,9 +16117,10 @@ const VPagination = defineComponent({
       const firstItem = target.querySelector('.v-pagination__list > *');
       if (!firstItem) return;
       const totalWidth = contentRect.width;
-      const itemWidth = firstItem.getBoundingClientRect().width + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
+      const itemWidth = firstItem.offsetWidth + parseFloat(getComputedStyle(firstItem).marginRight) * 2;
       const minButtons = props.showFirstLastPage ? 5 : 3;
-      maxButtons.value = Math.max(0, Math.floor((totalWidth - itemWidth * minButtons) / itemWidth));
+      maxButtons.value = Math.max(0, Math.floor( // Round to two decimal places to avoid floating point errors
+      +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
     });
     const length = computed(() => parseInt(props.length, 10));
     const start = computed(() => parseInt(props.start, 10));
@@ -16071,6 +16180,7 @@ const VPagination = defineComponent({
         if (typeof item === 'string') {
           return {
             isActive: false,
+            key: `ellipsis-${index}`,
             page: item,
             props: {
               ref,
@@ -16083,6 +16193,7 @@ const VPagination = defineComponent({
           const isActive = item === page.value;
           return {
             isActive,
+            key: item,
             page: n(item),
             props: {
               ref,
@@ -16175,7 +16286,7 @@ const VPagination = defineComponent({
       }, [slots.prev ? slots.prev(controls.value.prev) : createVNode(VBtn, mergeProps({
         "_as": "VPaginationBtn"
       }, controls.value.prev), null)]), items.value.map((item, index) => createVNode("li", {
-        "key": item.page,
+        "key": item.key,
         "class": ['v-pagination__item', {
           'v-pagination__item--is-active': item.isActive
         }],
@@ -16212,7 +16323,7 @@ const VParallax = defineComponent({
   props: {
     scale: {
       type: [Number, String],
-      default: 1.3
+      default: 0.5
     }
   },
 
@@ -16224,11 +16335,18 @@ const VParallax = defineComponent({
       intersectionRef,
       isIntersecting
     } = useIntersectionObserver();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    const {
+      height: displayHeight
+    } = useDisplay();
     const root = ref();
     watchEffect(() => {
       var _root$value;
 
-      intersectionRef.value = (_root$value = root.value) == null ? void 0 : _root$value.$el;
+      intersectionRef.value = resizeRef.value = (_root$value = root.value) == null ? void 0 : _root$value.$el;
     });
     let scrollParent;
     watch(isIntersecting, val => {
@@ -16248,6 +16366,10 @@ const VParallax = defineComponent({
 
       (_scrollParent = scrollParent) == null ? void 0 : _scrollParent.removeEventListener('scroll', onScroll);
     });
+    watch(displayHeight, onScroll);
+    const scale = computed(() => {
+      return 1 - clamp(+props.scale);
+    });
     let frame = -1;
 
     function onScroll() {
@@ -16258,13 +16380,14 @@ const VParallax = defineComponent({
 
         const el = ((_root$value2 = root.value) == null ? void 0 : _root$value2.$el).querySelector('.v-img__img');
         if (!el) return;
-        const rect = intersectionRef.value.getBoundingClientRect();
-        const scrollHeight = scrollParent.clientHeight ?? window.innerHeight;
+        const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight;
         const scrollPos = scrollParent.scrollTop ?? window.scrollY;
-        const top = rect.top + scrollPos;
-        const progress = (scrollPos + scrollHeight - top) / (rect.height + scrollHeight);
-        const translate = floor((rect.height * +props.scale - rect.height) * (-progress + 0.5));
-        el.style.setProperty('transform', `translateY(${translate}px) scale(${props.scale})`);
+        const top = intersectionRef.value.offsetTop;
+        const height = contentRect.value.height;
+        const center = top + (height - scrollHeight) / 2;
+        const translate = floor((scrollPos - center) * scale.value);
+        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height);
+        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`);
       });
     }
 
@@ -16368,7 +16491,8 @@ const VRadioGroup = defineComponent({
             isReadonly
           } = _ref2;
           return createVNode(Fragment, null, [label && createVNode(VLabel, {
-            "for": id.value
+            "for": id.value,
+            "clickable": true
           }, {
             default: () => [label]
           }), createVNode(VSelectionControlGroup, mergeProps(controlProps, {
@@ -16477,6 +16601,7 @@ const VRangeSlider = defineComponent({
     const trackStop = computed(() => position(model.value[1]));
     useRender(() => {
       const [inputProps, _] = filterInputProps(props);
+      const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', 'v-range-slider', {
           'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
@@ -16488,6 +16613,14 @@ const VRangeSlider = defineComponent({
       }, inputProps, {
         "focused": isFocused.value
       }), { ...slots,
+        prepend: hasPrepend ? slotProps => {
+          var _slots$label, _slots$prepend;
+
+          return createVNode(Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? createVNode(VLabel, {
+            "class": "v-slider__label",
+            "text": props.label
+          }, null) : undefined, (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps)]);
+        } : undefined,
         default: _ref2 => {
           var _startThumbRef$value4, _stopThumbRef$value4;
 
@@ -17248,7 +17381,7 @@ const VSlideGroupItem = defineComponent({
 
 });
 
-const VSnackbar = defineComponent({
+const VSnackbar = genericComponent()({
   name: 'VSnackbar',
   props: {
     contentClass: {
@@ -17621,6 +17754,7 @@ const VTab = defineComponent({
         "tabindex": isSelected.value ? 0 : -1,
         "role": "tab",
         "aria-selected": String(isSelected.value),
+        "active": false,
         "block": props.fixed,
         "maxWidth": props.fixed ? 300 : undefined,
         "variant": "text",
@@ -17934,7 +18068,8 @@ const VTextarea = defineComponent({
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-textarea--auto-grow': props.autoGrow,
-          'v-textarea--no-resize': props.noResize || props.autoGrow
+          'v-textarea--no-resize': props.noResize || props.autoGrow,
+          'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
         }],
         "onClick:prepend": props['onClick:prepend'],
         "onClick:append": props['onClick:append']
@@ -18060,6 +18195,11 @@ const VTimeline = defineComponent({
       default: 'vertical',
       validator: v => ['vertical', 'horizontal'].includes(v)
     },
+    justify: {
+      type: String,
+      default: 'auto',
+      validator: v => ['auto', 'center'].includes(v)
+    },
     side: {
       type: String,
       validator: v => v == null || ['start', 'end'].includes(v)
@@ -18123,7 +18263,7 @@ const VTimeline = defineComponent({
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, truncateClasses.value, {
+      "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": {
@@ -18668,21 +18808,25 @@ var directives = /*#__PURE__*/Object.freeze({
 });
 
 // Composables
-const createVuetify$1 = function () {
+function createVuetify$1() {
   let vuetify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    blueprint,
+    ...rest
+  } = vuetify;
+  const options = mergeDeep(blueprint, rest);
+  const {
+    aliases = {},
+    components = {},
+    directives = {}
+  } = options;
+  const defaults = createDefaults(options.defaults);
+  const display = createDisplay(options.display, options.ssr);
+  const theme = createTheme(options.theme);
+  const icons = createIcons(options.icons);
+  const locale = createLocale(options.locale);
 
   const install = app => {
-    const {
-      blueprint,
-      ...rest
-    } = vuetify;
-    const options = mergeDeep(blueprint, rest);
-    const {
-      aliases = {},
-      components = {},
-      directives = {}
-    } = options;
-
     for (const key in directives) {
       app.directive(key, directives[key]);
     }
@@ -18693,44 +18837,19 @@ const createVuetify$1 = function () {
 
     for (const key in aliases) {
       app.component(key, defineComponent({ ...aliases[key],
-        name: key
+        name: key,
+        aliasName: aliases[key].name
       }));
     }
 
-    function provideApp(isHydrate) {
-      app.provide(DefaultsSymbol, createDefaults(options.defaults));
-      app.provide(DisplaySymbol, createDisplay(options.display, isHydrate));
-      app.provide(ThemeSymbol, createTheme(app, options.theme));
-      app.provide(IconSymbol, createIcons(options.icons));
-      app.provide(LocaleAdapterSymbol, createLocale(app, options.locale));
-    }
-
-    if (!IN_BROWSER) {
-      provideApp();
-    }
-
+    theme.install(app);
+    locale.install(app);
+    app.provide(DefaultsSymbol, defaults);
+    app.provide(DisplaySymbol, display);
+    app.provide(ThemeSymbol, theme);
+    app.provide(IconSymbol, icons);
+    app.provide(LocaleAdapterSymbol, locale.adapter);
     getUid.reset();
-    const mount = app.mount;
-
-    app.mount = (rootContainer, isHydrate, isSVG) => {
-      provideApp(isHydrate);
-      const ret = mount(rootContainer, isHydrate, isSVG);
-      app.mount = mount;
-      return ret;
-    }; // Vue's inject() can only be used in setup
-
-
-    function inject(key) {
-      var _vm$parent, _vm$vnode$appContext;
-
-      const vm = this.$;
-      const provides = ((_vm$parent = vm.parent) == null ? void 0 : _vm$parent.provides) ?? ((_vm$vnode$appContext = vm.vnode.appContext) == null ? void 0 : _vm$vnode$appContext.provides);
-
-      if (provides && key in provides) {
-        return provides[key];
-      }
-    }
-
     app.mixin({
       computed: {
         $vuetify() {
@@ -18749,11 +18868,27 @@ const createVuetify$1 = function () {
   };
 
   return {
-    install
+    install,
+    defaults,
+    display,
+    theme,
+    icons,
+    locale: locale.adapter
   };
-};
-const version$1 = "3.0.0-beta.10";
-createVuetify$1.version = version$1;
+}
+const version$1 = "3.0.0-beta.13";
+createVuetify$1.version = version$1; // Vue's inject() can only be used in setup
+
+function inject(key) {
+  var _vm$parent, _vm$vnode$appContext;
+
+  const vm = this.$;
+  const provides = ((_vm$parent = vm.parent) == null ? void 0 : _vm$parent.provides) ?? ((_vm$vnode$appContext = vm.vnode.appContext) == null ? void 0 : _vm$vnode$appContext.provides);
+
+  if (provides && key in provides) {
+    return provides[key];
+  }
+}
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -18763,7 +18898,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.0.0-beta.10";
+const version = "3.0.0-beta.13";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, provideRtl, useDisplay, useLayout, useLocale, useRtl, useTheme, version };