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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-beta.10
+* Vuetify v3.0.0-beta.13
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -354,21 +354,16 @@
   } // Only allow a single return type
 
   function destructComputed(getter) {
-    const refs = {};
+    const refs = vue.reactive({});
     const base = vue.computed(getter);
-
-    for (const key in base.value) {
-      refs[key] = vue.toRef(base.value, key);
-    }
-
-    vue.watch(base, val => {
-      for (const key in val) {
-        refs[key].value = val[key];
+    vue.watchEffect(() => {
+      for (const key in base.value) {
+        refs[key] = base.value[key];
       }
     }, {
       flush: 'sync'
     });
-    return refs;
+    return vue.toRefs(refs);
   }
   /** Array.includes but value can be any type */
 
@@ -929,10 +924,9 @@
     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;
 
@@ -1702,8 +1696,7 @@
   } // Composables
 
 
-  function createTheme(app, options) {
-    const head = app._context.provides.usehead;
+  function createTheme(options) {
     const parsedOptions = vue.reactive(parseThemeOptions(options));
     const name = vue.ref(parsedOptions.defaultTheme);
     const themes = vue.ref(parsedOptions.themes);
@@ -1790,46 +1783,51 @@
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
 
-    if (head) {
-      head.addHeadObjs(vue.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) {
-        vue.watchEffect(() => head.updateDOM());
-      }
-    } else {
-      let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-      vue.watch(styles, updateStyles, {
-        immediate: true
-      });
-
-      function updateStyles() {
-        if (parsedOptions.isDisabled) return;
+      if (head) {
+        head.addHeadObjs(vue.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) {
+          vue.watchEffect(() => head.updateDOM());
         }
+      } else {
+        let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
+        vue.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 = vue.computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
     return {
+      install,
       isDisabled: parsedOptions.isDisabled,
       name,
       themes,
@@ -2787,20 +2785,22 @@
         'v-img__img--contain': !props.cover
       }));
 
-      const __image = vue.computed(() => {
+      const __image = () => {
         var _slots$sources;
 
-        if (!normalisedSrc.value.src || state.value === 'idle') return;
-        const img = vue.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 = vue.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 vue.createVNode(MaybeTransition, {
           "transition": props.transition,
@@ -2810,9 +2810,9 @@
             "class": "v-img__picture"
           }, [sources, img]) : img, [[vue.vShow, state.value === 'loaded']])]
         });
-      });
+      };
 
-      const __preloadImage = vue.computed(() => vue.createVNode(MaybeTransition, {
+      const __preloadImage = () => vue.createVNode(MaybeTransition, {
         "transition": props.transition
       }, {
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createVNode("img", {
@@ -2820,10 +2820,10 @@
           "src": normalisedSrc.value.lazySrc,
           "alt": ""
         }, null)]
-      }));
+      });
 
-      const __placeholder = vue.computed(() => {
-        if (!slots.placeholder) return;
+      const __placeholder = () => {
+        if (!slots.placeholder) return null;
         return vue.createVNode(MaybeTransition, {
           "transition": props.transition,
           "appear": true
@@ -2832,10 +2832,10 @@
             "class": "v-img__placeholder"
           }, [slots.placeholder()])]
         });
-      });
+      };
 
-      const __error = vue.computed(() => {
-        if (!slots.error) return;
+      const __error = () => {
+        if (!slots.error) return null;
         return vue.createVNode(MaybeTransition, {
           "transition": props.transition,
           "appear": true
@@ -2844,17 +2844,17 @@
             "class": "v-img__error"
           }, [slots.error()])]
         });
-      });
+      };
 
-      const __gradient = vue.computed(() => {
-        if (!props.gradient) return;
+      const __gradient = () => {
+        if (!props.gradient) return null;
         return vue.createVNode("div", {
           "class": "v-img__gradient",
           "style": {
             backgroundImage: `linear-gradient(${props.gradient})`
           }
         }, null);
-      });
+      };
 
       const isBooted = vue.ref(false);
       {
@@ -2881,7 +2881,7 @@
         "aria-label": props.alt,
         "role": props.alt ? 'img' : undefined
       }, {
-        additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],
+        additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
         default: slots.default
       }), [[vue.resolveDirective("intersect"), {
         handler: init,
@@ -3211,6 +3211,23 @@
     return pick(props, Object.keys((VToolbar == null ? void 0 : VToolbar.props) ?? {}));
   }
 
+  function useToggleScope(source, cb) {
+    let scope;
+    vue.watch(source, active => {
+      if (active && !scope) {
+        scope = vue.effectScope();
+        scope.run(cb);
+      } else {
+        var _scope;
+
+        (_scope = scope) == null ? void 0 : _scope.stop();
+        scope = undefined;
+      }
+    }, {
+      immediate: true
+    });
+  }
+
   // Utilities
 
   // Composables
@@ -3218,28 +3235,45 @@
     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 = vue.computed(() => {
-      var _vm$vnode$props, _vm$vnode$props2;
+    const internal = vue.ref(props[prop]);
+    const kebabProp = toKebabCase(prop);
+    const checkKebab = kebabProp !== prop;
+    const isControlled = checkKebab ? vue.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}`)));
+    }) : vue.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, () => {
+      vue.watch(() => props[prop], val => {
+        internal.value = val;
+      });
     });
-    const internal = vue.ref(transformIn(props[prop]));
-    return vue.computed({
+    const model = vue.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({
@@ -3654,9 +3688,7 @@
   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
     },
@@ -4760,16 +4792,24 @@
     }
 
     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 && vue.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: vue.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) {
@@ -4815,11 +4855,11 @@
 
   function useSelectLink(link, select) {
     vue.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) {
         vue.nextTick(() => {
           select(true);
         });
@@ -4835,7 +4875,10 @@
       Ripple
     },
     props: {
-      active: Boolean,
+      active: {
+        type: Boolean,
+        default: undefined
+      },
       symbol: {
         type: null,
         default: VBtnToggleSymbol
@@ -4911,10 +4954,16 @@
         roundedClasses
       } = useRounded(props);
       const {
-        sizeClasses
+        sizeClasses,
+        sizeStyles
       } = useSize(props);
       const group = useGroupItem(props, props.symbol, false);
       const link = useLink(props, attrs);
+      const isActive = vue.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 = vue.computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
       const isElevated = vue.computed(() => {
         return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
@@ -4927,10 +4976,11 @@
         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 vue.withDirectives(vue.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,
@@ -4939,7 +4989,7 @@
             '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 => {
@@ -4968,11 +5018,11 @@
             "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' && vue.createVNode(VIcon, {
+            default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (hasIcon && vue.createVNode(VIcon, {
               "key": "icon"
             }, null))]
           })]), !props.icon && hasAppend && vue.createVNode(VDefaultsProvider, {
@@ -5094,9 +5144,16 @@
 
   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.';
 
@@ -5570,7 +5627,7 @@
     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 = vue.computed(() => props.validationValue ?? model.value);
+    const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
     const form = useForm();
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.ref(true);
@@ -5776,18 +5833,18 @@
         }, [hasPrepend && vue.createVNode("div", {
           "key": "prepend",
           "class": "v-input__prepend"
-        }, [props.prependIcon && vue.createVNode(InputIcon, {
+        }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && vue.createVNode(InputIcon, {
           "key": "prepend-icon",
           "name": "prepend"
-        }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), slots.default && vue.createVNode("div", {
+        }, null)]), slots.default && vue.createVNode("div", {
           "class": "v-input__control"
         }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && vue.createVNode("div", {
           "key": "append",
           "class": "v-input__append"
-        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && vue.createVNode(InputIcon, {
+        }, [props.appendIcon && vue.createVNode(InputIcon, {
           "key": "append-icon",
           "name": "append"
-        }, null)]), hasDetails && vue.createVNode("div", {
+        }, null), (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value)]), hasDetails && vue.createVNode("div", {
           "class": "v-input__details"
         }, [vue.createVNode(VMessages, {
           "active": hasMessages,
@@ -5813,6 +5870,7 @@
     name: 'VLabel',
     props: {
       text: String,
+      clickable: Boolean,
       ...makeThemeProps()
     },
 
@@ -5824,7 +5882,9 @@
         var _slots$default;
 
         return vue.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 {};
@@ -5877,7 +5937,9 @@
         var _slots$default;
 
         return vue.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)]);
@@ -6068,7 +6130,8 @@
             id: id.value
           }
         })]), [[vue.resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && vue.createVNode(VLabel, {
-          "for": id.value
+          "for": id.value,
+          "clickable": true
         }, {
           default: () => [label]
         })]);
@@ -6184,7 +6247,6 @@
   });
 
   const makeVAvatarProps = propsFactory({
-    color: String,
     start: Boolean,
     end: Boolean,
     icon: IconValue,
@@ -6192,7 +6254,10 @@
     ...makeDensityProps(),
     ...makeRoundedProps(),
     ...makeSizeProps(),
-    ...makeTagProps()
+    ...makeTagProps(),
+    ...makeVariantProps({
+      variant: 'flat'
+    })
   });
   const VAvatar = defineComponent({
     name: 'VAvatar',
@@ -6203,9 +6268,10 @@
         slots
       } = _ref;
       const {
-        backgroundColorClasses,
-        backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+        colorClasses,
+        colorStyles,
+        variantClasses
+      } = useVariant(props);
       const {
         densityClasses
       } = useDensity(props);
@@ -6223,15 +6289,17 @@
           "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 ? vue.createVNode(VImg, {
+            "key": "image",
             "src": props.image,
             "alt": ""
           }, null) : props.icon ? vue.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 {};
@@ -7214,9 +7282,9 @@
       } = useNestedItem(id, false);
       const list = useList();
       const isActive = vue.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 = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
@@ -7226,9 +7294,9 @@
         variant: props.variant
       }));
       vue.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);
@@ -7852,6 +7920,7 @@
     const activatorEl = vue.ref();
     let isHovered = false;
     let isFocused = false;
+    let firstEnter = true;
     const openOnFocus = vue.computed(() => props.openOnFocus || props.openOnFocus == null && props.openOnHover);
     const openOnClick = vue.computed(() => props.openOnClick || props.openOnClick == null && !props.openOnHover && !openOnFocus.value);
     const {
@@ -7859,6 +7928,10 @@
       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;
       }
     });
@@ -7935,6 +8008,26 @@
 
       return events;
     });
+    const scrimEvents = vue.computed(() => {
+      const events = {};
+
+      if (props.openOnHover) {
+        events.mouseenter = () => {
+          if (firstEnter) {
+            isHovered = true;
+            firstEnter = false;
+            runOpenDelay();
+          }
+        };
+
+        events.mouseleave = () => {
+          isHovered = false;
+          runCloseDelay();
+        };
+      }
+
+      return events;
+    });
     vue.watch(isTop, val => {
       if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) {
         isActive.value = false;
@@ -7970,7 +8063,8 @@
       activatorEl,
       activatorRef,
       activatorEvents,
-      contentEvents
+      contentEvents,
+      scrimEvents
     };
   }
 
@@ -8694,23 +8788,6 @@
     });
   }
 
-  function useToggleScope(source, cb) {
-    let scope;
-    vue.watch(source, active => {
-      if (active && !scope) {
-        scope = vue.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 = vue.reactive([]);
   function useStack(isActive, zIndex) {
@@ -8978,7 +9055,8 @@
         activatorEl,
         activatorRef,
         activatorEvents,
-        contentEvents
+        contentEvents,
+        scrimEvents
       } = useActivator(props, {
         isActive,
         isTop: localTop
@@ -9093,10 +9171,10 @@
               top: convertToUnit(top.value)
             }],
             "ref": root
-          }, attrs), [vue.createVNode(Scrim, {
+          }, attrs), [vue.createVNode(Scrim, vue.mergeProps({
             "color": scrimColor,
             "modelValue": isActive.value && !!props.scrim
-          }, null), vue.createVNode(MaybeTransition, {
+          }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
             "appear": true,
             "persisted": true,
             "transition": props.transition,
@@ -9293,8 +9371,20 @@
         },
         "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 vue.createVNode(VDefaultsProvider, {
+            "root": true
+          }, {
+            default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)]
+          });
+        }
       }));
       return forwardRefs({
         id
@@ -9513,7 +9603,7 @@
             '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],
@@ -9953,7 +10043,7 @@
           "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,
@@ -10313,7 +10403,7 @@
           "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', {
@@ -10644,8 +10734,8 @@
       width.value = getClientWidth();
     }
 
-    if (isHydrate) {
-      vue.nextTick(() => onResize());
+    if (isHydrate && IN_BROWSER) {
+      requestAnimationFrame(() => onResize());
     } // eslint-disable-next-line max-statements
 
 
@@ -10926,9 +11016,9 @@
       } = _ref;
       const link = useLink(props, attrs);
       const isActive = vue.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 = vue.computed(() => isActive.value ? props.activeColor : props.color);
       const {
@@ -11849,10 +11939,10 @@
             },
             "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({
@@ -12579,8 +12669,8 @@
         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]
       }));
     });
@@ -12812,7 +12902,9 @@
         trackColor,
         trackFillColor,
         trackSize,
-        vertical
+        vertical,
+        min,
+        max
       } = slider;
       const {
         roundedClasses
@@ -12846,11 +12938,13 @@
           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 vue.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
@@ -12949,6 +13043,7 @@
       const trackStop = vue.computed(() => position(model.value));
       useRender(() => {
         const [inputProps, _] = filterInputProps(props);
+        const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', {
             'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
@@ -12959,6 +13054,14 @@
         }, inputProps, {
           "focused": isFocused.value
         }), { ...slots,
+          prepend: hasPrepend ? slotProps => {
+            var _slots$label, _slots$prepend;
+
+            return vue.createVNode(vue.Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? vue.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
@@ -13856,7 +13959,7 @@
           "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,
@@ -13998,9 +14101,6 @@
       },
       scrollable: Boolean,
       modelValue: Boolean,
-      ...makeDimensionProps({
-        width: 'auto'
-      }),
       ...makeTransitionProps({
         transition: {
           component: VDialogTransition
@@ -14017,9 +14117,6 @@
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
-      const {
-        dimensionStyles
-      } = useDimension(props);
       const {
         scopeId
       } = useScopeId();
@@ -14035,7 +14132,7 @@
         (_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];
@@ -14080,7 +14177,6 @@
           'v-dialog--fullscreen': props.fullscreen,
           'v-dialog--scrollable': props.scrollable
         }],
-        "style": dimensionStyles.value,
         "transition": props.transition,
         "scrollStrategy": "block",
         "ref": overlay,
@@ -14092,8 +14188,20 @@
         },
         "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 vue.createVNode(VDefaultsProvider, {
+            "root": true
+          }, {
+            default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)]
+          });
+        }
       }));
       return forwardRefs({}, overlay);
     }
@@ -14516,9 +14624,9 @@
                   },
                   "onFocus": onFocus,
                   "onBlur": () => isFocused.value = false
-                }, slotProps, inputAttrs), null), model.value.length > 0 && vue.createVNode("div", {
+                }, slotProps, inputAttrs), null), vue.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
@@ -14528,7 +14636,7 @@
                   "color": props.color
                 }, {
                   default: () => [text]
-                })) : fileNames.value.join(', ')])]);
+                })) : fileNames.value.join(', '))])]);
               }
             });
           },
@@ -16013,9 +16121,10 @@
         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 = vue.computed(() => parseInt(props.length, 10));
       const start = vue.computed(() => parseInt(props.start, 10));
@@ -16075,6 +16184,7 @@
           if (typeof item === 'string') {
             return {
               isActive: false,
+              key: `ellipsis-${index}`,
               page: item,
               props: {
                 ref,
@@ -16087,6 +16197,7 @@
             const isActive = item === page.value;
             return {
               isActive,
+              key: item,
               page: n(item),
               props: {
                 ref,
@@ -16179,7 +16290,7 @@
         }, [slots.prev ? slots.prev(controls.value.prev) : vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VPaginationBtn"
         }, controls.value.prev), null)]), items.value.map((item, index) => vue.createVNode("li", {
-          "key": item.page,
+          "key": item.key,
           "class": ['v-pagination__item', {
             'v-pagination__item--is-active': item.isActive
           }],
@@ -16216,7 +16327,7 @@
     props: {
       scale: {
         type: [Number, String],
-        default: 1.3
+        default: 0.5
       }
     },
 
@@ -16228,11 +16339,18 @@
         intersectionRef,
         isIntersecting
       } = useIntersectionObserver();
+      const {
+        resizeRef,
+        contentRect
+      } = useResizeObserver();
+      const {
+        height: displayHeight
+      } = useDisplay();
       const root = vue.ref();
       vue.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;
       vue.watch(isIntersecting, val => {
@@ -16252,6 +16370,10 @@
 
         (_scrollParent = scrollParent) == null ? void 0 : _scrollParent.removeEventListener('scroll', onScroll);
       });
+      vue.watch(displayHeight, onScroll);
+      const scale = vue.computed(() => {
+        return 1 - clamp(+props.scale);
+      });
       let frame = -1;
 
       function onScroll() {
@@ -16262,13 +16384,14 @@
 
           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})`);
         });
       }
 
@@ -16372,7 +16495,8 @@
               isReadonly
             } = _ref2;
             return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
-              "for": id.value
+              "for": id.value,
+              "clickable": true
             }, {
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
@@ -16481,6 +16605,7 @@
       const trackStop = vue.computed(() => position(model.value[1]));
       useRender(() => {
         const [inputProps, _] = filterInputProps(props);
+        const hasPrepend = !!(props.label || slots.label || slots.prepend);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": ['v-slider', 'v-range-slider', {
             'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,
@@ -16492,6 +16617,14 @@
         }, inputProps, {
           "focused": isFocused.value
         }), { ...slots,
+          prepend: hasPrepend ? slotProps => {
+            var _slots$label, _slots$prepend;
+
+            return vue.createVNode(vue.Fragment, null, [((_slots$label = slots.label) == null ? void 0 : _slots$label.call(slots, slotProps)) ?? props.label ? vue.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;
 
@@ -17252,7 +17385,7 @@
 
   });
 
-  const VSnackbar = defineComponent({
+  const VSnackbar = genericComponent()({
     name: 'VSnackbar',
     props: {
       contentClass: {
@@ -17625,6 +17758,7 @@
           "tabindex": isSelected.value ? 0 : -1,
           "role": "tab",
           "aria-selected": String(isSelected.value),
+          "active": false,
           "block": props.fixed,
           "maxWidth": props.fixed ? 300 : undefined,
           "variant": "text",
@@ -17938,7 +18072,8 @@
             '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']
@@ -18064,6 +18199,11 @@
         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)
@@ -18127,7 +18267,7 @@
         }
       });
       useRender(() => vue.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": {
@@ -18672,21 +18812,25 @@
   });
 
   // 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]);
       }
@@ -18697,44 +18841,19 @@
 
       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() {
@@ -18753,11 +18872,27 @@
     };
 
     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] : {};
@@ -18767,7 +18902,7 @@
       ...options
     });
   };
-  const version = "3.0.0-beta.10";
+  const version = "3.0.0-beta.13";
   createVuetify.version = version;
 
   exports.components = components;