vuetify 3.0.0 → 3.0.1

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0
+* Vuetify v3.0.1
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -93,7 +93,11 @@
   }
   function getPropertyFromItem(item, property, fallback) {
     if (property == null) return item === undefined ? fallback : item;
-    if (item !== Object(item)) return fallback;
+    if (item !== Object(item)) {
+      if (typeof property !== 'function') return fallback;
+      const value = property(item, fallback);
+      return typeof value === 'undefined' ? fallback : value;
+    }
     if (typeof property === 'string') return getObjectValueByPath(item, property, fallback);
     if (Array.isArray(property)) return getNestedValue(item, property, fallback);
     if (typeof property !== 'function') return fallback;
@@ -341,6 +345,10 @@
   const onRE = /^on[^a-z]/;
   const isOn = key => onRE.test(key);
   const EventProp = [Function, Array];
+  function hasEvent(props, name) {
+    name = 'on' + vue.capitalize(name);
+    return !!(props[name] || props[`${name}Once`] || props[`${name}Capture`] || props[`${name}OnceCapture`] || props[`${name}CaptureOnce`]);
+  }
   function callEvent(handler) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       args[_key2 - 1] = arguments[_key2];
@@ -985,7 +993,7 @@
     }
     if (options._setup) {
       options.props = options.props ?? {};
-      options.props = propsFactory(options.props, options.name)();
+      options.props = propsFactory(options.props, toKebabCase(options.name))();
       options.props._as = String;
       options.setup = function setup(props, ctx) {
         const vm = vue.getCurrentInstance();
@@ -1000,7 +1008,7 @@
           if (componentDefaults) {
             const subComponents = Object.entries(componentDefaults).filter(_ref => {
               let [key] = _ref;
-              return key.startsWith('V');
+              return key.startsWith(key[0].toUpperCase());
             });
             if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
           }
@@ -3798,9 +3806,12 @@
       const iconAlias = vue.isRef(props) ? props.value : props.icon;
       if (!iconAlias) throw new Error('Icon value is undefined or null');
       let icon = iconAlias;
-      if (typeof iconAlias === 'string' && iconAlias.includes('$')) {
-        var _icons$aliases;
-        icon = (_icons$aliases = icons.aliases) == null ? void 0 : _icons$aliases[iconAlias.slice(iconAlias.indexOf('$') + 1)];
+      if (typeof icon === 'string') {
+        icon = icon.trim();
+        if (icon.startsWith('$')) {
+          var _icons$aliases;
+          icon = (_icons$aliases = icons.aliases) == null ? void 0 : _icons$aliases[icon.slice(1)];
+        }
       }
       if (!icon) throw new Error(`Could not find aliased icon "${iconAlias}"`);
       if (typeof icon !== 'string') {
@@ -4631,7 +4642,7 @@
     const RouterLink = vue.resolveDynamicComponent('RouterLink');
     const isLink = vue.computed(() => !!(props.href || props.to));
     const isClickable = vue.computed(() => {
-      return (isLink == null ? void 0 : isLink.value) || !!(attrs.onClick || attrs.onClickOnce);
+      return (isLink == null ? void 0 : isLink.value) || hasEvent(attrs, 'click') || hasEvent(props, 'click');
     });
     if (typeof RouterLink === 'string') {
       return {
@@ -5126,178 +5137,75 @@
     }
   });
 
-  // Types
+  function useInputIcon(props) {
+    const {
+      t
+    } = useLocale();
+    function InputIcon(_ref) {
+      let {
+        name
+      } = _ref;
+      const localeKey = {
+        prepend: 'prependAction',
+        prependInner: 'prependAction',
+        append: 'appendAction',
+        appendInner: 'appendAction',
+        clear: 'clear'
+      }[name];
+      const listener = props[`onClick:${name}`];
+      const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
+      return vue.createVNode(VIcon, {
+        "icon": props[`${name}Icon`],
+        "aria-label": label,
+        "onClick": listener
+      }, null);
+    }
+    return {
+      InputIcon
+    };
+  }
 
-  const VMessages = defineComponent({
-    name: 'VMessages',
+  const VLabel = defineComponent({
+    name: 'VLabel',
     props: {
-      active: Boolean,
-      color: String,
-      messages: {
-        type: [Array, String],
-        default: () => []
-      },
-      ...makeTransitionProps({
-        transition: {
-          component: VSlideYTransition,
-          leaveAbsolute: true,
-          group: true
-        }
-      })
+      text: String,
+      clickable: Boolean,
+      ...makeThemeProps()
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      const messages = vue.computed(() => wrapInArray(props.messages));
-      const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(vue.computed(() => props.color));
-      useRender(() => vue.createVNode(MaybeTransition, {
-        "transition": props.transition,
-        "tag": "div",
-        "class": ['v-messages', textColorClasses.value],
-        "style": textColorStyles.value
-      }, {
-        default: () => [props.active && messages.value.map((message, i) => vue.createVNode("div", {
-          "class": "v-messages__message",
-          "key": `${i}-${messages.value}`
-        }, [slots.message ? slots.message({
-          message
-        }) : message]))]
-      }));
+      useRender(() => {
+        var _slots$default;
+        return vue.createVNode("label", {
+          "class": ['v-label', {
+            'v-label--clickable': props.clickable
+          }]
+        }, [props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+      });
       return {};
     }
   });
 
-  // Utilities
-
-  // Types
-
-  const FormKey = Symbol.for('vuetify:form');
-  const makeFormProps = propsFactory({
-    disabled: Boolean,
-    fastFail: Boolean,
-    lazyValidation: Boolean,
-    readonly: Boolean,
-    modelValue: {
-      type: Boolean,
-      default: null
+  const VFieldLabel = defineComponent({
+    name: 'VFieldLabel',
+    props: {
+      floating: Boolean
     },
-    validateOn: {
-      type: String,
-      default: 'input'
-    }
-  }, 'form');
-  function createForm(props) {
-    const model = useProxiedModel(props, 'modelValue');
-    const isDisabled = vue.computed(() => props.disabled);
-    const isReadonly = vue.computed(() => props.readonly);
-    const isValidating = vue.ref(false);
-    const items = vue.ref([]);
-    const errors = vue.ref([]);
-    async function validate() {
-      const results = [];
-      let valid = true;
-      errors.value = [];
-      isValidating.value = true;
-      for (const item of items.value) {
-        const itemErrorMessages = await item.validate();
-        if (itemErrorMessages.length > 0) {
-          valid = false;
-          results.push({
-            id: item.id,
-            errorMessages: itemErrorMessages
-          });
-        }
-        if (!valid && props.fastFail) break;
-      }
-      errors.value = results;
-      isValidating.value = false;
-      return {
-        valid,
-        errors: errors.value
-      };
-    }
-    function reset() {
-      items.value.forEach(item => item.reset());
-      model.value = null;
-    }
-    function resetValidation() {
-      items.value.forEach(item => item.resetValidation());
-      errors.value = [];
-      model.value = null;
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      useRender(() => vue.createVNode(VLabel, {
+        "class": ['v-field-label', {
+          'v-field-label--floating': props.floating
+        }],
+        "aria-hidden": props.floating || undefined
+      }, slots));
+      return {};
     }
-    vue.watch(items, () => {
-      let valid = 0;
-      let invalid = 0;
-      const results = [];
-      for (const item of items.value) {
-        if (item.isValid === false) {
-          invalid++;
-          results.push({
-            id: item.id,
-            errorMessages: item.errorMessages
-          });
-        } else if (item.isValid === true) valid++;
-      }
-      errors.value = results;
-      model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
-    }, {
-      deep: true
-    });
-    vue.provide(FormKey, {
-      register: _ref => {
-        let {
-          id,
-          validate,
-          reset,
-          resetValidation
-        } = _ref;
-        if (items.value.some(item => item.id === id)) {
-          consoleWarn(`Duplicate input name "${id}"`);
-        }
-        items.value.push({
-          id,
-          validate,
-          reset,
-          resetValidation,
-          isValid: null,
-          errorMessages: []
-        });
-      },
-      unregister: id => {
-        items.value = items.value.filter(item => {
-          return item.id !== id;
-        });
-      },
-      update: (id, isValid, errorMessages) => {
-        const found = items.value.find(item => item.id === id);
-        if (!found) return;
-        found.isValid = isValid;
-        found.errorMessages = errorMessages;
-      },
-      isDisabled,
-      isReadonly,
-      isValidating,
-      items,
-      validateOn: vue.toRef(props, 'validateOn')
-    });
-    return {
-      errors,
-      isDisabled,
-      isReadonly,
-      isValidating,
-      items,
-      validate,
-      reset,
-      resetValidation
-    };
-  }
-  function useForm() {
-    return vue.inject(FormKey, null);
-  }
+  });
 
   // Components
 
@@ -5329,346 +5237,1012 @@
     };
   }
 
-  // Composables
-
   // Types
 
-  const makeValidationProps = propsFactory({
+  const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'plain'];
+  const makeVFieldProps = propsFactory({
+    appendInnerIcon: IconValue,
+    bgColor: String,
+    clearable: Boolean,
+    clearIcon: {
+      type: IconValue,
+      default: '$clear'
+    },
+    active: Boolean,
+    color: String,
+    dirty: Boolean,
     disabled: Boolean,
     error: Boolean,
-    errorMessages: {
-      type: [Array, String],
-      default: () => []
-    },
-    maxErrors: {
-      type: [Number, String],
-      default: 1
-    },
-    name: String,
     label: String,
-    readonly: Boolean,
-    rules: {
-      type: Array,
-      default: () => []
+    persistentClear: Boolean,
+    prependInnerIcon: IconValue,
+    reverse: Boolean,
+    singleLine: Boolean,
+    variant: {
+      type: String,
+      default: 'filled',
+      validator: v => allowedVariants$1.includes(v)
     },
-    modelValue: null,
-    validateOn: String,
-    validationValue: null,
-    ...makeFocusProps()
-  }, 'validation');
-  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 = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
-    const form = useForm();
-    const internalErrorMessages = vue.ref([]);
-    const isPristine = vue.ref(true);
-    const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-    const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
-    const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
-    const errorMessages = vue.computed(() => {
-      return props.errorMessages.length ? wrapInArray(props.errorMessages) : internalErrorMessages.value;
-    });
-    const isValid = vue.computed(() => {
-      if (props.error || errorMessages.value.length) return false;
-      if (!props.rules.length) return true;
-      return isPristine.value ? null : true;
-    });
-    const isValidating = vue.ref(false);
-    const validationClasses = vue.computed(() => {
-      return {
-        [`${name}--error`]: isValid.value === false,
-        [`${name}--dirty`]: isDirty.value,
-        [`${name}--disabled`]: isDisabled.value,
-        [`${name}--readonly`]: isReadonly.value
-      };
-    });
-    const uid = vue.computed(() => props.name ?? vue.unref(id));
-    vue.onBeforeMount(() => {
-      form == null ? void 0 : form.register({
-        id: uid.value,
-        validate,
-        reset,
-        resetValidation
-      });
-    });
-    vue.onBeforeUnmount(() => {
-      form == null ? void 0 : form.unregister(uid.value);
-    });
-    const validateOn = vue.computed(() => props.validateOn || (form == null ? void 0 : form.validateOn.value) || 'input');
-
-    // Set initial valid state, for inputs that might not have rules
-    vue.onMounted(() => form == null ? void 0 : form.update(uid.value, isValid.value, errorMessages.value));
-    useToggleScope(() => validateOn.value === 'input', () => {
-      vue.watch(validationModel, () => {
-        if (validationModel.value != null) {
-          validate();
-        } else if (props.focused) {
-          const unwatch = vue.watch(() => props.focused, val => {
-            if (!val) validate();
-            unwatch();
-          });
-        }
-      });
-    });
-    useToggleScope(() => validateOn.value === 'blur', () => {
-      vue.watch(() => props.focused, val => {
-        if (!val) validate();
-      });
-    });
-    vue.watch(isValid, () => {
-      form == null ? void 0 : form.update(uid.value, isValid.value, errorMessages.value);
-    });
-    function reset() {
-      resetValidation();
-      model.value = null;
-    }
-    function resetValidation() {
-      isPristine.value = true;
-      internalErrorMessages.value = [];
-    }
-    async function validate() {
-      const results = [];
-      isValidating.value = true;
-      for (const rule of props.rules) {
-        if (results.length >= (props.maxErrors || 1)) {
-          break;
-        }
-        const handler = typeof rule === 'function' ? rule : () => rule;
-        const result = await handler(validationModel.value);
-        if (result === true) continue;
-        if (typeof result !== 'string') {
-          // eslint-disable-next-line no-console
-          console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
-          continue;
-        }
-        results.push(result);
-      }
-      internalErrorMessages.value = results;
-      isValidating.value = false;
-      isPristine.value = false;
-      return internalErrorMessages.value;
-    }
-    return {
-      errorMessages,
-      isDirty,
-      isDisabled,
-      isReadonly,
-      isPristine,
-      isValid,
-      isValidating,
-      reset,
-      resetValidation,
-      validate,
-      validationClasses
-    };
-  }
-
-  function useInputIcon(props) {
-    const {
-      t
-    } = useLocale();
-    function InputIcon(_ref) {
-      let {
-        name
-      } = _ref;
-      const localeKey = {
-        prepend: 'prependAction',
-        prependInner: 'prependAction',
-        append: 'appendAction',
-        appendInner: 'appendAction',
-        clear: 'clear'
-      }[name];
-      const listener = props[`onClick:${name}`];
-      const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? '') : undefined;
-      return vue.createVNode(VIcon, {
-        "icon": props[`${name}Icon`],
-        "aria-label": label,
-        "onClick": listener
-      }, null);
-    }
-    return {
-      InputIcon
-    };
-  }
-
-  const makeVInputProps = propsFactory({
-    id: String,
-    appendIcon: IconValue,
-    prependIcon: IconValue,
-    hideDetails: [Boolean, String],
-    messages: {
-      type: [Array, String],
-      default: () => []
-    },
-    direction: {
-      type: String,
-      default: 'horizontal',
-      validator: v => ['horizontal', 'vertical'].includes(v)
-    },
-    'onClick:prepend': EventProp,
-    'onClick:append': EventProp,
-    ...makeDensityProps(),
-    ...makeValidationProps()
-  }, 'VInput');
-  const VInput = genericComponent()({
-    name: 'VInput',
+    'onClick:clear': EventProp,
+    'onClick:appendInner': EventProp,
+    'onClick:prependInner': EventProp,
+    ...makeThemeProps(),
+    ...makeLoaderProps()
+  }, 'v-field');
+  const VField = genericComponent()({
+    name: 'VField',
+    inheritAttrs: false,
     props: {
-      ...makeVInputProps()
+      id: String,
+      ...makeFocusProps(),
+      ...makeVFieldProps()
     },
     emits: {
+      'click:control': e => true,
+      'update:focused': focused => true,
       'update:modelValue': val => true
     },
     setup(props, _ref) {
       let {
         attrs,
-        slots,
-        emit
+        emit,
+        slots
       } = _ref;
       const {
-        densityClasses
-      } = useDensity(props);
+        themeClasses
+      } = provideTheme(props);
+      const {
+        loaderClasses
+      } = useLoader(props);
+      const {
+        focusClasses,
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
       const {
         InputIcon
       } = useInputIcon(props);
+      const isActive = vue.computed(() => props.dirty || props.active);
+      const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
+      const labelRef = vue.ref();
+      const floatingLabelRef = vue.ref();
+      const controlRef = vue.ref();
       const {
-        errorMessages,
-        isDirty,
-        isDisabled,
-        isReadonly,
-        isPristine,
-        isValid,
-        isValidating,
-        reset,
-        resetValidation,
-        validate,
-        validationClasses
-      } = useValidation(props, 'v-input', id);
-      const slotProps = vue.computed(() => ({
-        id,
-        isDirty,
-        isDisabled,
-        isReadonly,
-        isPristine,
-        isValid,
-        isValidating,
-        reset,
-        resetValidation,
-        validate
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.computed(() => {
+        return isActive.value && isFocused.value && !props.error && !props.disabled ? props.color : undefined;
       }));
-      useRender(() => {
-        var _props$messages, _slots$prepend, _slots$default, _slots$append, _slots$details;
-        const hasPrepend = !!(slots.prepend || props.prependIcon);
-        const hasAppend = !!(slots.append || props.appendIcon);
-        const hasMessages = !!((_props$messages = props.messages) != null && _props$messages.length || errorMessages.value.length);
-        const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
-        return vue.createVNode("div", {
-          "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
-        }, [hasPrepend && vue.createVNode("div", {
-          "key": "prepend",
-          "class": "v-input__prepend"
-        }, [(_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.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"
-        }, [props.appendIcon && vue.createVNode(InputIcon, {
-          "key": "append-icon",
-          "name": "append"
-        }, 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,
-          "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
-        }, {
-          message: slots.message
-        }), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])]);
+      vue.watch(isActive, val => {
+        if (hasLabel.value) {
+          const el = labelRef.value.$el;
+          const targetEl = floatingLabelRef.value.$el;
+          const rect = nullifyTransforms(el);
+          const targetRect = targetEl.getBoundingClientRect();
+          const x = targetRect.x - rect.x;
+          const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
+          const targetWidth = targetRect.width / 0.75;
+          const width = Math.abs(targetWidth - rect.width) > 1 ? {
+            maxWidth: convertToUnit(targetWidth)
+          } : undefined;
+          const style = getComputedStyle(el);
+          const targetStyle = getComputedStyle(targetEl);
+          const duration = parseFloat(style.transitionDuration) * 1000 || 150;
+          const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
+          const color = targetStyle.getPropertyValue('color');
+          el.style.visibility = 'visible';
+          targetEl.style.visibility = 'hidden';
+          animate(el, {
+            transform: `translate(${x}px, ${y}px) scale(${scale})`,
+            color,
+            ...width
+          }, {
+            duration,
+            easing: standardEasing,
+            direction: val ? 'normal' : 'reverse'
+          }).finished.then(() => {
+            el.style.removeProperty('visibility');
+            targetEl.style.removeProperty('visibility');
+          });
+        }
+      }, {
+        flush: 'post'
+      });
+      const slotProps = vue.computed(() => ({
+        isActive,
+        isFocused,
+        controlRef,
+        blur,
+        focus
+      }));
+      function onClick(e) {
+        if (e.target !== document.activeElement) {
+          e.preventDefault();
+        }
+        emit('click:control', e);
+      }
+      useRender(() => {
+        var _slots$prependInner, _slots$default, _slots$appendInner;
+        const isOutlined = props.variant === 'outlined';
+        const hasPrepend = slots['prepend-inner'] || props.prependInnerIcon;
+        const hasClear = !!(props.clearable || slots.clear);
+        const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
+        const label = slots.label ? slots.label({
+          label: props.label,
+          props: {
+            for: id.value
+          }
+        }) : props.label;
+        return vue.createVNode("div", vue.mergeProps({
+          "class": ['v-field', {
+            'v-field--active': isActive.value,
+            'v-field--appended': hasAppend,
+            'v-field--disabled': props.disabled,
+            'v-field--dirty': props.dirty,
+            'v-field--error': props.error,
+            'v-field--has-background': !!props.bgColor,
+            'v-field--persistent-clear': props.persistentClear,
+            'v-field--prepended': hasPrepend,
+            'v-field--reverse': props.reverse,
+            'v-field--single-line': props.singleLine,
+            'v-field--no-label': !label,
+            [`v-field--variant-${props.variant}`]: true
+          }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
+          "style": [backgroundColorStyles.value, textColorStyles.value],
+          "onClick": onClick
+        }, attrs), [vue.createVNode("div", {
+          "class": "v-field__overlay"
+        }, null), vue.createVNode(LoaderSlot, {
+          "name": "v-field",
+          "active": props.loading,
+          "color": props.error ? 'error' : props.color
+        }, {
+          default: slots.loader
+        }), hasPrepend && vue.createVNode("div", {
+          "key": "prepend",
+          "class": "v-field__prepend-inner"
+        }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
+          "key": "prepend-icon",
+          "name": "prependInner"
+        }, null), (_slots$prependInner = slots['prepend-inner']) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), vue.createVNode("div", {
+          "class": "v-field__field",
+          "data-no-activator": ""
+        }, [['solo', 'filled'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
+          "key": "floating-label",
+          "ref": floatingLabelRef,
+          "class": [textColorClasses.value],
+          "floating": true,
+          "for": id.value
+        }, {
+          default: () => [label]
+        }), vue.createVNode(VFieldLabel, {
+          "ref": labelRef,
+          "for": id.value
+        }, {
+          default: () => [label]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          ...slotProps.value,
+          props: {
+            id: id.value,
+            class: 'v-field__input'
+          },
+          focus,
+          blur
+        })]), hasClear && vue.createVNode(VExpandXTransition, {
+          "key": "clear"
+        }, {
+          default: () => [vue.withDirectives(vue.createVNode("div", {
+            "class": "v-field__clearable"
+          }, [slots.clear ? slots.clear() : vue.createVNode(InputIcon, {
+            "name": "clear"
+          }, null)]), [[vue.vShow, props.dirty]])]
+        }), hasAppend && vue.createVNode("div", {
+          "key": "append",
+          "class": "v-field__append-inner"
+        }, [(_slots$appendInner = slots['append-inner']) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && vue.createVNode(InputIcon, {
+          "key": "append-icon",
+          "name": "appendInner"
+        }, null)]), vue.createVNode("div", {
+          "class": ['v-field__outline', textColorClasses.value]
+        }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+          "class": "v-field__outline__start"
+        }, null), hasLabel.value && vue.createVNode("div", {
+          "class": "v-field__outline__notch"
+        }, [vue.createVNode(VFieldLabel, {
+          "ref": floatingLabelRef,
+          "floating": true,
+          "for": id.value
+        }, {
+          default: () => [label]
+        })]), vue.createVNode("div", {
+          "class": "v-field__outline__end"
+        }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
+          "ref": floatingLabelRef,
+          "floating": true,
+          "for": id.value
+        }, {
+          default: () => [label]
+        })])]);
       });
       return {
-        reset,
-        resetValidation,
-        validate
+        controlRef
       };
     }
   });
-  function filterInputProps(props) {
-    const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-    return pick(props, keys);
+  // TODO: this is kinda slow, might be better to implicitly inherit props instead
+  function filterFieldProps(attrs) {
+    const keys = Object.keys(VField.props).filter(k => !isOn(k));
+    return pick(attrs, keys);
   }
 
-  const VLabel = defineComponent({
-    name: 'VLabel',
+  // Types
+
+  const VMessages = defineComponent({
+    name: 'VMessages',
     props: {
-      text: String,
-      clickable: Boolean,
-      ...makeThemeProps()
+      active: Boolean,
+      color: String,
+      messages: {
+        type: [Array, String],
+        default: () => []
+      },
+      ...makeTransitionProps({
+        transition: {
+          component: VSlideYTransition,
+          leaveAbsolute: true,
+          group: true
+        }
+      })
     },
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => {
-        var _slots$default;
-        return vue.createVNode("label", {
-          "class": ['v-label', {
-            'v-label--clickable': props.clickable
-          }]
-        }, [props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
-      });
+      const messages = vue.computed(() => wrapInArray(props.messages));
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(vue.computed(() => props.color));
+      useRender(() => vue.createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "tag": "div",
+        "class": ['v-messages', textColorClasses.value],
+        "style": textColorStyles.value
+      }, {
+        default: () => [props.active && messages.value.map((message, i) => vue.createVNode("div", {
+          "class": "v-messages__message",
+          "key": `${i}-${messages.value}`
+        }, [slots.message ? slots.message({
+          message
+        }) : message]))]
+      }));
       return {};
     }
   });
 
+  // Utilities
+
   // Types
 
-  const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
-  const makeSelectionControlGroupProps = propsFactory({
-    color: String,
+  const FormKey = Symbol.for('vuetify:form');
+  const makeFormProps = propsFactory({
     disabled: Boolean,
-    error: Boolean,
-    id: String,
-    inline: Boolean,
-    falseIcon: IconValue,
-    trueIcon: IconValue,
-    ripple: {
-      type: Boolean,
-      default: true
-    },
-    multiple: {
+    fastFail: Boolean,
+    lazyValidation: Boolean,
+    readonly: Boolean,
+    modelValue: {
       type: Boolean,
       default: null
     },
-    name: String,
-    readonly: Boolean,
-    modelValue: null,
-    type: String,
-    valueComparator: {
-      type: Function,
-      default: deepEqual
-    },
-    ...makeThemeProps(),
-    ...makeDensityProps()
-  }, 'VSelectionControlGroup');
-  const VSelectionControlGroup = defineComponent({
-    name: 'VSelectionControlGroup',
-    props: {
-      defaultsTarget: {
-        type: String,
-        default: 'VSelectionControl'
-      },
-      ...makeSelectionControlGroupProps()
-    },
-    emits: {
-      'update:modelValue': val => true
-    },
-    setup(props, _ref) {
-      let {
+    validateOn: {
+      type: String,
+      default: 'input'
+    }
+  }, 'form');
+  function createForm(props) {
+    const model = useProxiedModel(props, 'modelValue');
+    const isDisabled = vue.computed(() => props.disabled);
+    const isReadonly = vue.computed(() => props.readonly);
+    const isValidating = vue.ref(false);
+    const items = vue.ref([]);
+    const errors = vue.ref([]);
+    async function validate() {
+      const results = [];
+      let valid = true;
+      errors.value = [];
+      isValidating.value = true;
+      for (const item of items.value) {
+        const itemErrorMessages = await item.validate();
+        if (itemErrorMessages.length > 0) {
+          valid = false;
+          results.push({
+            id: item.id,
+            errorMessages: itemErrorMessages
+          });
+        }
+        if (!valid && props.fastFail) break;
+      }
+      errors.value = results;
+      isValidating.value = false;
+      return {
+        valid,
+        errors: errors.value
+      };
+    }
+    function reset() {
+      items.value.forEach(item => item.reset());
+      model.value = null;
+    }
+    function resetValidation() {
+      items.value.forEach(item => item.resetValidation());
+      errors.value = [];
+      model.value = null;
+    }
+    vue.watch(items, () => {
+      let valid = 0;
+      let invalid = 0;
+      const results = [];
+      for (const item of items.value) {
+        if (item.isValid === false) {
+          invalid++;
+          results.push({
+            id: item.id,
+            errorMessages: item.errorMessages
+          });
+        } else if (item.isValid === true) valid++;
+      }
+      errors.value = results;
+      model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
+    }, {
+      deep: true
+    });
+    vue.provide(FormKey, {
+      register: _ref => {
+        let {
+          id,
+          validate,
+          reset,
+          resetValidation
+        } = _ref;
+        if (items.value.some(item => item.id === id)) {
+          consoleWarn(`Duplicate input name "${id}"`);
+        }
+        items.value.push({
+          id,
+          validate,
+          reset,
+          resetValidation,
+          isValid: null,
+          errorMessages: []
+        });
+      },
+      unregister: id => {
+        items.value = items.value.filter(item => {
+          return item.id !== id;
+        });
+      },
+      update: (id, isValid, errorMessages) => {
+        const found = items.value.find(item => item.id === id);
+        if (!found) return;
+        found.isValid = isValid;
+        found.errorMessages = errorMessages;
+      },
+      isDisabled,
+      isReadonly,
+      isValidating,
+      items,
+      validateOn: vue.toRef(props, 'validateOn')
+    });
+    return {
+      errors,
+      isDisabled,
+      isReadonly,
+      isValidating,
+      items,
+      validate,
+      reset,
+      resetValidation
+    };
+  }
+  function useForm() {
+    return vue.inject(FormKey, null);
+  }
+
+  // Composables
+
+  // Types
+
+  const makeValidationProps = propsFactory({
+    disabled: Boolean,
+    error: Boolean,
+    errorMessages: {
+      type: [Array, String],
+      default: () => []
+    },
+    maxErrors: {
+      type: [Number, String],
+      default: 1
+    },
+    name: String,
+    label: String,
+    readonly: Boolean,
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: null,
+    validateOn: String,
+    validationValue: null,
+    ...makeFocusProps()
+  }, 'validation');
+  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 = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
+    const form = useForm();
+    const internalErrorMessages = vue.ref([]);
+    const isPristine = vue.ref(true);
+    const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
+    const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
+    const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
+    const errorMessages = vue.computed(() => {
+      return props.errorMessages.length ? wrapInArray(props.errorMessages) : internalErrorMessages.value;
+    });
+    const isValid = vue.computed(() => {
+      if (props.error || errorMessages.value.length) return false;
+      if (!props.rules.length) return true;
+      return isPristine.value ? null : true;
+    });
+    const isValidating = vue.ref(false);
+    const validationClasses = vue.computed(() => {
+      return {
+        [`${name}--error`]: isValid.value === false,
+        [`${name}--dirty`]: isDirty.value,
+        [`${name}--disabled`]: isDisabled.value,
+        [`${name}--readonly`]: isReadonly.value
+      };
+    });
+    const uid = vue.computed(() => props.name ?? vue.unref(id));
+    vue.onBeforeMount(() => {
+      form == null ? void 0 : form.register({
+        id: uid.value,
+        validate,
+        reset,
+        resetValidation
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      form == null ? void 0 : form.unregister(uid.value);
+    });
+    const validateOn = vue.computed(() => props.validateOn || (form == null ? void 0 : form.validateOn.value) || 'input');
+
+    // Set initial valid state, for inputs that might not have rules
+    vue.onMounted(() => form == null ? void 0 : form.update(uid.value, isValid.value, errorMessages.value));
+    useToggleScope(() => validateOn.value === 'input', () => {
+      vue.watch(validationModel, () => {
+        if (validationModel.value != null) {
+          validate();
+        } else if (props.focused) {
+          const unwatch = vue.watch(() => props.focused, val => {
+            if (!val) validate();
+            unwatch();
+          });
+        }
+      });
+    });
+    useToggleScope(() => validateOn.value === 'blur', () => {
+      vue.watch(() => props.focused, val => {
+        if (!val) validate();
+      });
+    });
+    vue.watch(isValid, () => {
+      form == null ? void 0 : form.update(uid.value, isValid.value, errorMessages.value);
+    });
+    function reset() {
+      resetValidation();
+      model.value = null;
+    }
+    function resetValidation() {
+      isPristine.value = true;
+      internalErrorMessages.value = [];
+    }
+    async function validate() {
+      const results = [];
+      isValidating.value = true;
+      for (const rule of props.rules) {
+        if (results.length >= (props.maxErrors || 1)) {
+          break;
+        }
+        const handler = typeof rule === 'function' ? rule : () => rule;
+        const result = await handler(validationModel.value);
+        if (result === true) continue;
+        if (typeof result !== 'string') {
+          // eslint-disable-next-line no-console
+          console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
+          continue;
+        }
+        results.push(result);
+      }
+      internalErrorMessages.value = results;
+      isValidating.value = false;
+      isPristine.value = false;
+      return internalErrorMessages.value;
+    }
+    return {
+      errorMessages,
+      isDirty,
+      isDisabled,
+      isReadonly,
+      isPristine,
+      isValid,
+      isValidating,
+      reset,
+      resetValidation,
+      validate,
+      validationClasses
+    };
+  }
+
+  const makeVInputProps = propsFactory({
+    id: String,
+    appendIcon: IconValue,
+    prependIcon: IconValue,
+    hideDetails: [Boolean, String],
+    messages: {
+      type: [Array, String],
+      default: () => []
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: v => ['horizontal', 'vertical'].includes(v)
+    },
+    'onClick:prepend': EventProp,
+    'onClick:append': EventProp,
+    ...makeDensityProps(),
+    ...makeValidationProps()
+  }, 'v-input');
+  const VInput = genericComponent()({
+    name: 'VInput',
+    props: {
+      ...makeVInputProps()
+    },
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs,
+        slots,
+        emit
+      } = _ref;
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        InputIcon
+      } = useInputIcon(props);
+      const uid = getUid();
+      const id = vue.computed(() => props.id || `input-${uid}`);
+      const {
+        errorMessages,
+        isDirty,
+        isDisabled,
+        isReadonly,
+        isPristine,
+        isValid,
+        isValidating,
+        reset,
+        resetValidation,
+        validate,
+        validationClasses
+      } = useValidation(props, 'v-input', id);
+      const slotProps = vue.computed(() => ({
+        id,
+        isDirty,
+        isDisabled,
+        isReadonly,
+        isPristine,
+        isValid,
+        isValidating,
+        reset,
+        resetValidation,
+        validate
+      }));
+      useRender(() => {
+        var _props$messages, _slots$prepend, _slots$default, _slots$append, _slots$details;
+        const hasPrepend = !!(slots.prepend || props.prependIcon);
+        const hasAppend = !!(slots.append || props.appendIcon);
+        const hasMessages = !!((_props$messages = props.messages) != null && _props$messages.length || errorMessages.value.length);
+        const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
+        return vue.createVNode("div", {
+          "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
+        }, [hasPrepend && vue.createVNode("div", {
+          "key": "prepend",
+          "class": "v-input__prepend"
+        }, [(_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.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"
+        }, [props.appendIcon && vue.createVNode(InputIcon, {
+          "key": "append-icon",
+          "name": "append"
+        }, 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,
+          "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
+        }, {
+          message: slots.message
+        }), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])]);
+      });
+      return {
+        reset,
+        resetValidation,
+        validate
+      };
+    }
+  });
+  function filterInputProps(props) {
+    const keys = Object.keys(VInput.props).filter(k => !isOn(k));
+    return pick(props, keys);
+  }
+
+  const VCounter = defineComponent({
+    name: 'VCounter',
+    functional: true,
+    props: {
+      active: Boolean,
+      max: [Number, String],
+      value: {
+        type: [Number, String],
+        default: 0
+      },
+      ...makeTransitionProps({
+        transition: {
+          component: VSlideYTransition
+        }
+      })
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const counter = vue.computed(() => {
+        return props.max ? `${props.value} / ${props.max}` : String(props.value);
+      });
+      useRender(() => vue.createVNode(MaybeTransition, {
+        "transition": props.transition
+      }, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": "v-counter"
+        }, [slots.default ? slots.default({
+          counter: counter.value,
+          max: props.max,
+          value: props.value
+        }) : counter.value]), [[vue.vShow, props.active]])]
+      }));
+      return {};
+    }
+  });
+
+  const Refs = Symbol('Forwarded refs');
+
+  /** Omit properties starting with P */
+
+  function forwardRefs(target) {
+    for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      refs[_key - 1] = arguments[_key];
+    }
+    target[Refs] = refs;
+    return new Proxy(target, {
+      get(target, key) {
+        if (Reflect.has(target, key)) {
+          return Reflect.get(target, key);
+        }
+        for (const ref of refs) {
+          if (ref.value && Reflect.has(ref.value, key)) {
+            const val = Reflect.get(ref.value, key);
+            return typeof val === 'function' ? val.bind(ref.value) : val;
+          }
+        }
+      },
+      getOwnPropertyDescriptor(target, key) {
+        const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+        if (descriptor) return descriptor;
+
+        // Skip internal properties
+        if (typeof key === 'symbol' || key.startsWith('__')) return;
+
+        // Check each ref's own properties
+        for (const ref of refs) {
+          if (!ref.value) continue;
+          const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
+          if (descriptor) return descriptor;
+          if ('_' in ref.value && 'setupState' in ref.value._) {
+            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value._.setupState, key);
+            if (descriptor) return descriptor;
+          }
+        }
+        // Recursive search up each ref's prototype
+        for (const ref of refs) {
+          let obj = ref.value && Object.getPrototypeOf(ref.value);
+          while (obj) {
+            const descriptor = Reflect.getOwnPropertyDescriptor(obj, key);
+            if (descriptor) return descriptor;
+            obj = Object.getPrototypeOf(obj);
+          }
+        }
+        // Call forwarded refs' proxies
+        for (const ref of refs) {
+          const childRefs = ref.value && ref.value[Refs];
+          if (!childRefs) continue;
+          const queue = childRefs.slice();
+          while (queue.length) {
+            const ref = queue.shift();
+            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
+            if (descriptor) return descriptor;
+            const childRefs = ref.value && ref.value[Refs];
+            if (childRefs) queue.push(...childRefs);
+          }
+        }
+        return undefined;
+      }
+    });
+  }
+
+  // Types
+
+  const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
+  const makeVTextFieldProps = propsFactory({
+    autofocus: Boolean,
+    counter: [Boolean, Number, String],
+    counterValue: Function,
+    hint: String,
+    persistentHint: Boolean,
+    prefix: String,
+    placeholder: String,
+    persistentPlaceholder: Boolean,
+    persistentCounter: Boolean,
+    suffix: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    ...makeVInputProps(),
+    ...makeVFieldProps()
+  }, 'v-text-field');
+  const VTextField = genericComponent()({
+    name: 'VTextField',
+    directives: {
+      Intersect
+    },
+    inheritAttrs: false,
+    props: makeVTextFieldProps(),
+    emits: {
+      'click:control': e => true,
+      'click:input': e => true,
+      'update:focused': focused => true,
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs,
+        emit,
+        slots
+      } = _ref;
+      const model = useProxiedModel(props, 'modelValue');
+      const {
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
+      const counterValue = vue.computed(() => {
+        return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value ?? '').toString().length;
+      });
+      const max = vue.computed(() => {
+        if (attrs.maxlength) return attrs.maxlength;
+        if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
+        return props.counter;
+      });
+      function onIntersect(isIntersecting, entries) {
+        var _entries$0$target, _entries$0$target$foc;
+        if (!props.autofocus || !isIntersecting) return;
+        (_entries$0$target = entries[0].target) == null ? void 0 : (_entries$0$target$foc = _entries$0$target.focus) == null ? void 0 : _entries$0$target$foc.call(_entries$0$target);
+      }
+      const vInputRef = vue.ref();
+      const vFieldRef = vue.ref();
+      const inputRef = vue.ref();
+      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+      const messages = vue.computed(() => {
+        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
+      });
+      function onFocus() {
+        if (inputRef.value !== document.activeElement) {
+          var _inputRef$value;
+          (_inputRef$value = inputRef.value) == null ? void 0 : _inputRef$value.focus();
+        }
+        if (!isFocused.value) focus();
+      }
+      function onControlClick(e) {
+        onFocus();
+        emit('click:control', e);
+      }
+      function onClear(e) {
+        e.stopPropagation();
+        onFocus();
+        vue.nextTick(() => {
+          model.value = null;
+          callEvent(props['onClick:clear'], e);
+        });
+      }
+      function onInput(e) {
+        model.value = e.target.value;
+      }
+      useRender(() => {
+        const hasCounter = !!(slots.counter || props.counter || props.counterValue);
+        const hasDetails = !!(hasCounter || slots.details);
+        const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+        const [{
+          modelValue: _,
+          ...inputProps
+        }] = filterInputProps(props);
+        const [fieldProps] = filterFieldProps(props);
+        return vue.createVNode(VInput, vue.mergeProps({
+          "ref": vInputRef,
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
+          "class": ['v-text-field', {
+            'v-text-field--prefixed': props.prefix,
+            'v-text-field--suffixed': props.suffix,
+            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
+          }],
+          "onClick:prepend": props['onClick:prepend'],
+          "onClick:append": props['onClick:append']
+        }, rootAttrs, inputProps, {
+          "focused": isFocused.value,
+          "messages": messages.value
+        }), {
+          ...slots,
+          default: _ref2 => {
+            let {
+              id,
+              isDisabled,
+              isDirty,
+              isReadonly,
+              isValid
+            } = _ref2;
+            return vue.createVNode(VField, vue.mergeProps({
+              "ref": vFieldRef,
+              "onMousedown": e => {
+                if (e.target === inputRef.value) return;
+                e.preventDefault();
+              },
+              "onClick:control": onControlClick,
+              "onClick:clear": onClear,
+              "onClick:prependInner": props['onClick:prependInner'],
+              "onClick:appendInner": props['onClick:appendInner'],
+              "role": "textbox"
+            }, fieldProps, {
+              "id": id.value,
+              "active": isActive.value || isDirty.value,
+              "dirty": isDirty.value || props.dirty,
+              "focused": isFocused.value,
+              "error": isValid.value === false
+            }), {
+              ...slots,
+              default: _ref3 => {
+                let {
+                  props: {
+                    class: fieldClass,
+                    ...slotProps
+                  }
+                } = _ref3;
+                const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
+                  "ref": inputRef,
+                  "value": model.value,
+                  "onInput": onInput,
+                  "autofocus": props.autofocus,
+                  "readonly": isReadonly.value,
+                  "disabled": isDisabled.value,
+                  "name": props.name,
+                  "placeholder": props.placeholder,
+                  "size": 1,
+                  "type": props.type,
+                  "onFocus": onFocus,
+                  "onBlur": blur
+                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
+                  handler: onIntersect
+                }, null, {
+                  once: true
+                }]]);
+                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
+                  "class": "v-text-field__prefix"
+                }, [props.prefix]), slots.default ? vue.createVNode("div", {
+                  "class": fieldClass,
+                  "onClick": e => emit('click:input', e),
+                  "data-no-activator": ""
+                }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
+                  class: fieldClass
+                }), props.suffix && vue.createVNode("span", {
+                  "class": "v-text-field__suffix"
+                }, [props.suffix])]);
+              }
+            });
+          },
+          details: hasDetails ? slotProps => {
+            var _slots$details;
+            return vue.createVNode(vue.Fragment, null, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+              "active": props.persistentCounter || isFocused.value,
+              "value": counterValue.value,
+              "max": max.value
+            }, slots.counter)])]);
+          } : undefined
+        });
+      });
+      return forwardRefs({}, vInputRef, vFieldRef, inputRef);
+    }
+  });
+  function filterVTextFieldProps(props) {
+    return pick(props, Object.keys(VTextField.props));
+  }
+
+  // Types
+
+  const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
+  const makeSelectionControlGroupProps = propsFactory({
+    color: String,
+    disabled: Boolean,
+    error: Boolean,
+    id: String,
+    inline: Boolean,
+    falseIcon: IconValue,
+    trueIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: null
+    },
+    name: String,
+    readonly: Boolean,
+    modelValue: null,
+    type: String,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
+    ...makeThemeProps(),
+    ...makeDensityProps()
+  }, 'v-selection-control-group');
+  const VSelectionControlGroup = defineComponent({
+    name: 'VSelectionControlGroup',
+    props: {
+      defaultsTarget: {
+        type: String,
+        default: 'VSelectionControl'
+      },
+      ...makeSelectionControlGroupProps()
+    },
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
         slots
       } = _ref;
       const modelValue = useProxiedModel(props, 'modelValue');
@@ -5718,7 +6292,7 @@
     falseValue: null,
     value: null,
     ...makeSelectionControlGroupProps()
-  }, 'VSelectionControl');
+  }, 'v-selection-control');
   function useSelectionControl(props) {
     const group = vue.inject(VSelectionControlGroupSymbol, undefined);
     const {
@@ -5883,7 +6457,7 @@
       falseIcon: '$checkboxOff',
       trueIcon: '$checkboxOn'
     })
-  }, 'VCheckboxBtn');
+  }, 'v-checkbox-btn');
   const VCheckboxBtn = defineComponent({
     name: 'VCheckboxBtn',
     props: makeVCheckboxBtnProps(),
@@ -5991,7 +6565,7 @@
     ...makeVariantProps({
       variant: 'flat'
     })
-  }, 'VAvatar');
+  }, 'v-avatar');
   const VAvatar = defineComponent({
     name: 'VAvatar',
     props: makeVAvatarProps(),
@@ -6157,7 +6731,6 @@
     },
     emits: {
       'click:close': e => true,
-      'update:active': value => true,
       'update:modelValue': value => true,
       'group:selected': val => true
     },
@@ -6834,7 +7407,7 @@
     subgroup: Boolean,
     value: null,
     ...makeTagProps()
-  }, 'VListGroup');
+  }, 'v-list-group');
   const VListGroup = genericComponent()({
     name: 'VListGroup',
     props: {
@@ -6937,6 +7510,8 @@
       subtitle: [String, Number, Boolean],
       title: [String, Number, Boolean],
       value: null,
+      onClick: EventProp,
+      onClickOnce: EventProp,
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeDimensionProps(),
@@ -7481,7 +8056,10 @@
           focus('first');
         } else if (e.key === 'End') {
           focus('last');
+        } else {
+          return;
         }
+        e.preventDefault();
       }
       function focus(location) {
         if (!contentRef.value) return;
@@ -7637,7 +8215,7 @@
     },
     closeOnContentClick: Boolean,
     ...makeDelayProps()
-  }, 'VOverlay/useActivator');
+  }, 'v-overlay-activator');
   function useActivator(props, _ref) {
     let {
       isActive,
@@ -7950,7 +8528,7 @@
       default: 'auto'
     },
     offset: [Number, String, Array]
-  }, 'VOverlay/locationStrategies');
+  }, 'v-overlay-location-strategies');
   function useLocationStrategies(props, data) {
     const contentStyles = vue.ref({});
     const updateLocation = vue.ref();
@@ -8068,24 +8646,22 @@
       return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];
     });
     let observe = false;
-    if (IN_BROWSER) {
-      const observer = new ResizeObserver(() => {
-        if (observe) updateLocation();
-      });
-      vue.watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
-        let [newActivatorEl, newContentEl] = _ref;
-        let [oldActivatorEl, oldContentEl] = _ref2;
-        if (oldActivatorEl) observer.unobserve(oldActivatorEl);
-        if (newActivatorEl) observer.observe(newActivatorEl);
-        if (oldContentEl) observer.unobserve(oldContentEl);
-        if (newContentEl) observer.observe(newContentEl);
-      }, {
-        immediate: true
-      });
-      vue.onScopeDispose(() => {
-        observer.disconnect();
-      });
-    }
+    const observer = new ResizeObserver(() => {
+      if (observe) updateLocation();
+    });
+    vue.watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
+      let [newActivatorEl, newContentEl] = _ref;
+      let [oldActivatorEl, oldContentEl] = _ref2;
+      if (oldActivatorEl) observer.unobserve(oldActivatorEl);
+      if (newActivatorEl) observer.observe(newActivatorEl);
+      if (oldContentEl) observer.unobserve(oldContentEl);
+      if (newContentEl) observer.observe(newContentEl);
+    }, {
+      immediate: true
+    });
+    vue.onScopeDispose(() => {
+      observer.disconnect();
+    });
 
     // eslint-disable-next-line max-statements
     function updateLocation() {
@@ -8274,1235 +8850,690 @@
         left: convertToUnit(pixelRound(x)),
         minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),
         maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
-        maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
-      });
-    }
-    vue.watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation(), {
-      immediate: !activatorFixed
-    });
-    if (activatorFixed) vue.nextTick(() => updateLocation());
-    requestAnimationFrame(() => {
-      if (contentStyles.value.maxHeight) updateLocation();
-    });
-    return {
-      updateLocation
-    };
-  }
-  function pixelRound(val) {
-    return Math.round(val * devicePixelRatio) / devicePixelRatio;
-  }
-  function pixelCeil(val) {
-    return Math.ceil(val * devicePixelRatio) / devicePixelRatio;
-  }
-
-  let clean = true;
-  const frames = [];
-
-  /**
-   * Schedule a task to run in an animation frame on its own
-   * This is useful for heavy tasks that may cause jank if all ran together
-   */
-  function requestNewFrame(cb) {
-    if (!clean || frames.length) {
-      frames.push(cb);
-      run();
-    } else {
-      clean = false;
-      cb();
-      run();
-    }
-  }
-  let raf = -1;
-  function run() {
-    cancelAnimationFrame(raf);
-    raf = requestAnimationFrame(() => {
-      const frame = frames.shift();
-      if (frame) frame();
-      if (frames.length) run();else clean = true;
-    });
-  }
-
-  // Utilities
-
-  // Types
-
-  const scrollStrategies = {
-    none: null,
-    close: closeScrollStrategy,
-    block: blockScrollStrategy,
-    reposition: repositionScrollStrategy
-  };
-  const makeScrollStrategyProps = propsFactory({
-    scrollStrategy: {
-      type: [String, Function],
-      default: 'block',
-      validator: val => typeof val === 'function' || val in scrollStrategies
-    }
-  }, 'VOverlay/scrollStrategies');
-  function useScrollStrategies(props, data) {
-    if (!IN_BROWSER) return;
-    let scope;
-    vue.watchEffect(async () => {
-      var _scope;
-      (_scope = scope) == null ? void 0 : _scope.stop();
-      if (!(data.isActive.value && props.scrollStrategy)) return;
-      scope = vue.effectScope();
-      await vue.nextTick();
-      scope.run(() => {
-        if (typeof props.scrollStrategy === 'function') {
-          props.scrollStrategy(data, props);
-        } else {
-          var _scrollStrategies$pro;
-          (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props);
-        }
-      });
-    });
-  }
-  function closeScrollStrategy(data) {
-    function onScroll(e) {
-      data.isActive.value = false;
-    }
-    bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll);
-  }
-  function blockScrollStrategy(data, props) {
-    var _data$root$value;
-    const offsetParent = (_data$root$value = data.root.value) == null ? void 0 : _data$root$value.offsetParent;
-    const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
-    const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
-    const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
-    if (scrollableParent) {
-      data.root.value.classList.add('v-overlay--scroll-blocked');
-    }
-    scrollElements.forEach((el, i) => {
-      el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft));
-      el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop));
-      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
-      el.classList.add('v-overlay-scroll-blocked');
-    });
-    vue.onScopeDispose(() => {
-      scrollElements.forEach((el, i) => {
-        const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'));
-        const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'));
-        el.style.removeProperty('--v-body-scroll-x');
-        el.style.removeProperty('--v-body-scroll-y');
-        el.style.removeProperty('--v-scrollbar-offset');
-        el.classList.remove('v-overlay-scroll-blocked');
-        el.scrollLeft = -x;
-        el.scrollTop = -y;
-      });
-      if (scrollableParent) {
-        data.root.value.classList.remove('v-overlay--scroll-blocked');
-      }
-    });
-  }
-  function repositionScrollStrategy(data) {
-    let slow = false;
-    let raf = -1;
-    function update(e) {
-      requestNewFrame(() => {
-        var _data$updateLocation$, _data$updateLocation;
-        const start = performance.now();
-        (_data$updateLocation$ = (_data$updateLocation = data.updateLocation).value) == null ? void 0 : _data$updateLocation$.call(_data$updateLocation, e);
-        const time = performance.now() - start;
-        slow = time / (1000 / 60) > 2;
-      });
-    }
-    bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
-      if (slow) {
-        // If the position calculation is slow,
-        // defer updates until scrolling is finished.
-        // Browsers usually fire one scroll event per frame so
-        // we just wait until we've got two frames without an event
-        cancelAnimationFrame(raf);
-        raf = requestAnimationFrame(() => {
-          raf = requestAnimationFrame(() => {
-            update(e);
-          });
-        });
-      } else {
-        update(e);
-      }
-    });
-  }
-
-  /** @private */
-  function bindScroll(el, onScroll) {
-    const scrollElements = [document, ...getScrollParents(el)];
-    scrollElements.forEach(el => {
-      el.addEventListener('scroll', onScroll, {
-        passive: true
-      });
-    });
-    vue.onScopeDispose(() => {
-      scrollElements.forEach(el => {
-        el.removeEventListener('scroll', onScroll);
-      });
-    });
-  }
-
-  // Types
-
-  const StackSymbol = Symbol.for('vuetify:stack');
-  const globalStack = vue.reactive([]);
-  function useStack(isActive, zIndex) {
-    const vm = getCurrentInstance('useStack');
-    const parent = vue.inject(StackSymbol, undefined);
-    const stack = vue.reactive({
-      activeChildren: new Set()
-    });
-    vue.provide(StackSymbol, stack);
-    const _zIndex = vue.ref(+zIndex.value);
-    useToggleScope(isActive, () => {
-      var _globalStack$at;
-      const lastZIndex = (_globalStack$at = globalStack.at(-1)) == null ? void 0 : _globalStack$at[1];
-      _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
-      globalStack.push([vm.uid, _zIndex.value]);
-      parent == null ? void 0 : parent.activeChildren.add(vm.uid);
-      vue.onScopeDispose(() => {
-        const idx = globalStack.findIndex(v => v[0] === vm.uid);
-        globalStack.splice(idx, 1);
-        parent == null ? void 0 : parent.activeChildren.delete(vm.uid);
-      });
-    });
-    const globalTop = vue.ref(true);
-    vue.watchEffect(() => {
-      var _globalStack$at2;
-      const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
-      setTimeout(() => globalTop.value = _isTop);
-    });
-    const localTop = vue.computed(() => !stack.activeChildren.size);
-    return {
-      globalTop: vue.readonly(globalTop),
-      localTop,
-      stackStyles: vue.computed(() => ({
-        zIndex: _zIndex.value
-      }))
-    };
-  }
-
-  // Utilities
-
-  // Types
-
-  function useTeleport(target) {
-    const teleportTarget = vue.computed(() => {
-      const _target = target.value;
-      if (_target === true || !IN_BROWSER) return undefined;
-      const targetElement = _target === false ? document.body : typeof _target === 'string' ? document.querySelector(_target) : _target;
-      if (targetElement == null) {
-        vue.warn(`Unable to locate target ${_target}`);
-        return undefined;
-      }
-      if (!useTeleport.cache.has(targetElement)) {
-        const el = document.createElement('div');
-        el.className = 'v-overlay-container';
-        targetElement.appendChild(el);
-        useTeleport.cache.set(targetElement, el);
-      }
-      return useTeleport.cache.get(targetElement);
+        maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
+      });
+    }
+    vue.watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation(), {
+      immediate: !activatorFixed
+    });
+    if (activatorFixed) vue.nextTick(() => updateLocation());
+    requestAnimationFrame(() => {
+      if (contentStyles.value.maxHeight) updateLocation();
     });
     return {
-      teleportTarget
+      updateLocation
     };
   }
-  useTeleport.cache = new WeakMap();
-
-  function defaultConditional() {
-    return true;
-  }
-  function checkEvent(e, el, binding) {
-    // The include element callbacks below can be expensive
-    // so we should avoid calling them when we're not active.
-    // Explicitly check for false to allow fallback compatibility
-    // with non-toggleable components
-    if (!e || checkIsActive(e, binding) === false) return false;
-
-    // If we're clicking inside the shadowroot, then the app root doesn't get the same
-    // level of introspection as to _what_ we're clicking. We want to check to see if
-    // our target is the shadowroot parent container, and if it is, ignore.
-    const root = attachedRoot(el);
-    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot && root.host === e.target) return false;
-
-    // Check if additional elements were passed to be included in check
-    // (click must be outside all included elements, if any)
-    const elements = (typeof binding.value === 'object' && binding.value.include || (() => []))();
-    // Add the root element for the component this directive was defined on
-    elements.push(el);
-
-    // Check if it's a click outside our elements, and then if our callback returns true.
-    // Non-toggleable components should take action in their callback and return falsy.
-    // Toggleable can return true if it wants to deactivate.
-    // Note that, because we're in the capture phase, this callback will occur before
-    // the bubbling click event on any outside elements.
-    return !elements.some(el => el == null ? void 0 : el.contains(e.target));
-  }
-  function checkIsActive(e, binding) {
-    const isActive = typeof binding.value === 'object' && binding.value.closeConditional || defaultConditional;
-    return isActive(e);
-  }
-  function directive(e, el, binding) {
-    const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
-    el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
-      checkIsActive(e, binding) && handler && handler(e);
-    }, 0);
+  function pixelRound(val) {
+    return Math.round(val * devicePixelRatio) / devicePixelRatio;
   }
-  function handleShadow(el, callback) {
-    const root = attachedRoot(el);
-    callback(document);
-    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
-      callback(root);
-    }
+  function pixelCeil(val) {
+    return Math.ceil(val * devicePixelRatio) / devicePixelRatio;
   }
-  const ClickOutside = {
-    // [data-app] may not be found
-    // if using bind, inserted makes
-    // sure that the root element is
-    // available, iOS does not support
-    // clicks on body
-    mounted(el, binding) {
-      const onClick = e => directive(e, el, binding);
-      const onMousedown = e => {
-        el._clickOutside.lastMousedownWasOutside = checkEvent(e, el, binding);
-      };
-      handleShadow(el, app => {
-        app.addEventListener('click', onClick, true);
-        app.addEventListener('mousedown', onMousedown, true);
-      });
-      if (!el._clickOutside) {
-        el._clickOutside = {
-          lastMousedownWasOutside: true
-        };
-      }
-      el._clickOutside[binding.instance.$.uid] = {
-        onClick,
-        onMousedown
-      };
-    },
-    unmounted(el, binding) {
-      if (!el._clickOutside) return;
-      handleShadow(el, app => {
-        var _el$_clickOutside;
-        if (!app || !((_el$_clickOutside = el._clickOutside) != null && _el$_clickOutside[binding.instance.$.uid])) return;
-        const {
-          onClick,
-          onMousedown
-        } = el._clickOutside[binding.instance.$.uid];
-        app.removeEventListener('click', onClick, true);
-        app.removeEventListener('mousedown', onMousedown, true);
-      });
-      delete el._clickOutside[binding.instance.$.uid];
-    }
-  };
 
-  // Types
+  let clean = true;
+  const frames = [];
 
-  function Scrim(props) {
-    const {
-      modelValue,
-      color,
-      ...rest
-    } = props;
-    return vue.createVNode(vue.Transition, {
-      "name": "fade-transition",
-      "appear": true
-    }, {
-      default: () => [props.modelValue && vue.createVNode("div", vue.mergeProps({
-        "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
-        "style": props.color.backgroundColorStyles.value
-      }, rest), null)]
-    });
+  /**
+   * Schedule a task to run in an animation frame on its own
+   * This is useful for heavy tasks that may cause jank if all ran together
+   */
+  function requestNewFrame(cb) {
+    if (!clean || frames.length) {
+      frames.push(cb);
+      run();
+    } else {
+      clean = false;
+      cb();
+      run();
+    }
   }
-  const makeVOverlayProps = propsFactory({
-    absolute: Boolean,
-    attach: [Boolean, String, Object],
-    closeOnBack: {
-      type: Boolean,
-      default: true
-    },
-    contained: Boolean,
-    contentClass: null,
-    contentProps: null,
-    disabled: Boolean,
-    noClickAnimation: Boolean,
-    modelValue: Boolean,
-    persistent: Boolean,
-    scrim: {
-      type: [String, Boolean],
-      default: true
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 2000
-    },
-    ...makeActivatorProps(),
-    ...makeDimensionProps(),
-    ...makeLazyProps(),
-    ...makeLocationStrategyProps(),
-    ...makeScrollStrategyProps(),
-    ...makeThemeProps(),
-    ...makeTransitionProps()
-  }, 'v-overlay');
-  const VOverlay = genericComponent()({
-    name: 'VOverlay',
-    directives: {
-      ClickOutside
-    },
-    inheritAttrs: false,
-    props: makeVOverlayProps(),
-    emits: {
-      'click:outside': e => true,
-      'update:modelValue': value => true,
-      afterLeave: () => true
-    },
-    setup(props, _ref) {
-      let {
-        slots,
-        attrs,
-        emit
-      } = _ref;
-      const model = useProxiedModel(props, 'modelValue');
-      const isActive = vue.computed({
-        get: () => model.value,
-        set: v => {
-          if (!(v && props.disabled)) model.value = v;
-        }
-      });
-      const {
-        teleportTarget
-      } = useTeleport(vue.computed(() => props.attach || props.contained));
-      const {
-        themeClasses
-      } = provideTheme(props);
-      const {
-        rtlClasses,
-        isRtl
-      } = useRtl();
-      const {
-        hasContent,
-        onAfterLeave
-      } = useLazy(props, isActive);
-      const scrimColor = useBackgroundColor(vue.computed(() => {
-        return typeof props.scrim === 'string' ? props.scrim : null;
-      }));
-      const {
-        globalTop,
-        localTop,
-        stackStyles
-      } = useStack(isActive, vue.toRef(props, 'zIndex'));
-      const {
-        activatorEl,
-        activatorRef,
-        activatorEvents,
-        contentEvents,
-        scrimEvents
-      } = useActivator(props, {
-        isActive,
-        isTop: localTop
-      });
-      const {
-        dimensionStyles
-      } = useDimension(props);
-      vue.watch(() => props.disabled, v => {
-        if (v) isActive.value = false;
-      });
-      const root = vue.ref();
-      const contentEl = vue.ref();
-      const {
-        contentStyles,
-        updateLocation
-      } = useLocationStrategies(props, {
-        isRtl,
-        contentEl,
-        activatorEl,
-        isActive
-      });
-      useScrollStrategies(props, {
-        root,
-        contentEl,
-        activatorEl,
-        isActive,
-        updateLocation
-      });
-      function onClickOutside(e) {
-        emit('click:outside', e);
-        if (!props.persistent) isActive.value = false;else animateClick();
-      }
-      function closeConditional() {
-        return isActive.value && globalTop.value;
-      }
-      IN_BROWSER && vue.watch(isActive, val => {
-        if (val) {
-          window.addEventListener('keydown', onKeydown);
+  let raf = -1;
+  function run() {
+    cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(() => {
+      const frame = frames.shift();
+      if (frame) frame();
+      if (frames.length) run();else clean = true;
+    });
+  }
+
+  // Utilities
+
+  // Types
+
+  const scrollStrategies = {
+    none: null,
+    close: closeScrollStrategy,
+    block: blockScrollStrategy,
+    reposition: repositionScrollStrategy
+  };
+  const makeScrollStrategyProps = propsFactory({
+    scrollStrategy: {
+      type: [String, Function],
+      default: 'block',
+      validator: val => typeof val === 'function' || val in scrollStrategies
+    }
+  }, 'v-overlay-scroll-strategies');
+  function useScrollStrategies(props, data) {
+    if (!IN_BROWSER) return;
+    let scope;
+    vue.watchEffect(async () => {
+      var _scope;
+      (_scope = scope) == null ? void 0 : _scope.stop();
+      if (!(data.isActive.value && props.scrollStrategy)) return;
+      scope = vue.effectScope();
+      await vue.nextTick();
+      scope.run(() => {
+        if (typeof props.scrollStrategy === 'function') {
+          props.scrollStrategy(data, props);
         } else {
-          window.removeEventListener('keydown', onKeydown);
+          var _scrollStrategies$pro;
+          (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props);
         }
-      }, {
-        immediate: true
       });
-      function onKeydown(e) {
-        if (e.key === 'Escape' && globalTop.value) {
-          if (!props.persistent) {
-            isActive.value = false;
-          } else animateClick();
-        }
-      }
-      const router = useRouter();
-      useToggleScope(() => props.closeOnBack, () => {
-        useBackButton(router, next => {
-          if (globalTop.value && isActive.value) {
-            next(false);
-            if (!props.persistent) isActive.value = false;else animateClick();
-          } else {
-            next();
-          }
-        });
+    });
+  }
+  function closeScrollStrategy(data) {
+    function onScroll(e) {
+      data.isActive.value = false;
+    }
+    bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll);
+  }
+  function blockScrollStrategy(data, props) {
+    var _data$root$value;
+    const offsetParent = (_data$root$value = data.root.value) == null ? void 0 : _data$root$value.offsetParent;
+    const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+    const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
+    const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
+    if (scrollableParent) {
+      data.root.value.classList.add('v-overlay--scroll-blocked');
+    }
+    scrollElements.forEach((el, i) => {
+      el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft));
+      el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop));
+      el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
+      el.classList.add('v-overlay-scroll-blocked');
+    });
+    vue.onScopeDispose(() => {
+      scrollElements.forEach((el, i) => {
+        const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'));
+        const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'));
+        el.style.removeProperty('--v-body-scroll-x');
+        el.style.removeProperty('--v-body-scroll-y');
+        el.style.removeProperty('--v-scrollbar-offset');
+        el.classList.remove('v-overlay-scroll-blocked');
+        el.scrollLeft = -x;
+        el.scrollTop = -y;
       });
-      const top = vue.ref();
-      vue.watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
-        if (val) {
-          const scrollParent = getScrollParent(root.value);
-          if (scrollParent && scrollParent !== document.scrollingElement) {
-            top.value = scrollParent.scrollTop;
-          }
-        }
+      if (scrollableParent) {
+        data.root.value.classList.remove('v-overlay--scroll-blocked');
+      }
+    });
+  }
+  function repositionScrollStrategy(data) {
+    let slow = false;
+    let raf = -1;
+    function update(e) {
+      requestNewFrame(() => {
+        var _data$updateLocation$, _data$updateLocation;
+        const start = performance.now();
+        (_data$updateLocation$ = (_data$updateLocation = data.updateLocation).value) == null ? void 0 : _data$updateLocation$.call(_data$updateLocation, e);
+        const time = performance.now() - start;
+        slow = time / (1000 / 60) > 2;
       });
-
-      // Add a quick "bounce" animation to the content
-      function animateClick() {
-        if (props.noClickAnimation) return;
-        contentEl.value && animate(contentEl.value, [{
-          transformOrigin: 'center'
-        }, {
-          transform: 'scale(1.03)'
-        }, {
-          transformOrigin: 'center'
-        }], {
-          duration: 150,
-          easing: standardEasing
+    }
+    bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+      if (slow) {
+        // If the position calculation is slow,
+        // defer updates until scrolling is finished.
+        // Browsers usually fire one scroll event per frame so
+        // we just wait until we've got two frames without an event
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+          raf = requestAnimationFrame(() => {
+            update(e);
+          });
         });
+      } else {
+        update(e);
       }
-      useRender(() => {
-        var _slots$activator, _slots$default;
-        return vue.createVNode(vue.Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
-          isActive: isActive.value,
-          props: vue.mergeProps({
-            ref: activatorRef
-          }, vue.toHandlers(activatorEvents.value), props.activatorProps)
-        }), IN_BROWSER && vue.createVNode(vue.Teleport, {
-          "disabled": !teleportTarget.value,
-          "to": teleportTarget.value
-        }, {
-          default: () => [hasContent.value && vue.createVNode("div", vue.mergeProps({
-            "class": ['v-overlay', {
-              'v-overlay--absolute': props.absolute || props.contained,
-              'v-overlay--active': isActive.value,
-              'v-overlay--contained': props.contained
-            }, themeClasses.value, rtlClasses.value],
-            "style": [stackStyles.value, {
-              top: convertToUnit(top.value)
-            }],
-            "ref": root
-          }, attrs), [vue.createVNode(Scrim, vue.mergeProps({
-            "color": scrimColor,
-            "modelValue": isActive.value && !!props.scrim
-          }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
-            "appear": true,
-            "persisted": true,
-            "transition": props.transition,
-            "target": activatorEl.value,
-            "onAfterLeave": () => {
-              onAfterLeave();
-              emit('afterLeave');
-            }
-          }, {
-            default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
-              "ref": contentEl,
-              "class": ['v-overlay__content', props.contentClass],
-              "style": [dimensionStyles.value, contentStyles.value]
-            }, vue.toHandlers(contentEvents.value), props.contentProps), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
-              isActive
-            })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
-              handler: onClickOutside,
-              closeConditional,
-              include: () => [activatorEl.value]
-            }]])]
-          })])]
-        })]);
+    });
+  }
+
+  /** @private */
+  function bindScroll(el, onScroll) {
+    const scrollElements = [document, ...getScrollParents(el)];
+    scrollElements.forEach(el => {
+      el.addEventListener('scroll', onScroll, {
+        passive: true
       });
-      return {
-        activatorEl,
-        animateClick,
-        contentEl,
-        globalTop,
-        localTop,
-        updateLocation
-      };
+    });
+    vue.onScopeDispose(() => {
+      scrollElements.forEach(el => {
+        el.removeEventListener('scroll', onScroll);
+      });
+    });
+  }
+
+  // Utilities
+  function useHydration() {
+    var _vm$root, _vm$root$appContext, _vm$root$appContext$a;
+    if (!IN_BROWSER) return vue.ref(false);
+    const vm = getCurrentInstance('useHydration');
+    const rootEl = vm == null ? void 0 : (_vm$root = vm.root) == null ? void 0 : (_vm$root$appContext = _vm$root.appContext) == null ? void 0 : (_vm$root$appContext$a = _vm$root$appContext.app) == null ? void 0 : _vm$root$appContext$a._container;
+    const isMounted = vue.ref(!!(rootEl != null && rootEl.__vue_app__));
+    if (!isMounted.value) {
+      vue.onMounted(() => isMounted.value = true);
     }
-  });
-  function filterVOverlayProps(props) {
-    return pick(props, Object.keys(VOverlay.props));
+    return isMounted;
   }
 
-  const Refs = Symbol('Forwarded refs');
+  // Types
 
-  /** Omit properties starting with P */
+  const StackSymbol = Symbol.for('vuetify:stack');
+  const globalStack = vue.reactive([]);
+  function useStack(isActive, zIndex) {
+    const vm = getCurrentInstance('useStack');
+    const parent = vue.inject(StackSymbol, undefined);
+    const stack = vue.reactive({
+      activeChildren: new Set()
+    });
+    vue.provide(StackSymbol, stack);
+    const _zIndex = vue.ref(+zIndex.value);
+    useToggleScope(isActive, () => {
+      var _globalStack$at;
+      const lastZIndex = (_globalStack$at = globalStack.at(-1)) == null ? void 0 : _globalStack$at[1];
+      _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
+      globalStack.push([vm.uid, _zIndex.value]);
+      parent == null ? void 0 : parent.activeChildren.add(vm.uid);
+      vue.onScopeDispose(() => {
+        const idx = globalStack.findIndex(v => v[0] === vm.uid);
+        globalStack.splice(idx, 1);
+        parent == null ? void 0 : parent.activeChildren.delete(vm.uid);
+      });
+    });
+    const globalTop = vue.ref(true);
+    vue.watchEffect(() => {
+      var _globalStack$at2;
+      const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
+      setTimeout(() => globalTop.value = _isTop);
+    });
+    const localTop = vue.computed(() => !stack.activeChildren.size);
+    return {
+      globalTop: vue.readonly(globalTop),
+      localTop,
+      stackStyles: vue.computed(() => ({
+        zIndex: _zIndex.value
+      }))
+    };
+  }
 
-  function forwardRefs(target) {
-    for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      refs[_key - 1] = arguments[_key];
-    }
-    target[Refs] = refs;
-    return new Proxy(target, {
-      get(target, key) {
-        if (Reflect.has(target, key)) {
-          return Reflect.get(target, key);
-        }
-        for (const ref of refs) {
-          if (ref.value && Reflect.has(ref.value, key)) {
-            const val = Reflect.get(ref.value, key);
-            return typeof val === 'function' ? val.bind(ref.value) : val;
-          }
-        }
-      },
-      getOwnPropertyDescriptor(target, key) {
-        const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
-        if (descriptor) return descriptor;
+  // Utilities
 
-        // Skip internal properties
-        if (typeof key === 'symbol' || key.startsWith('__')) return;
+  // Types
 
-        // Check each ref's own properties
-        for (const ref of refs) {
-          if (!ref.value) continue;
-          const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
-          if (descriptor) return descriptor;
-          if ('_' in ref.value && 'setupState' in ref.value._) {
-            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value._.setupState, key);
-            if (descriptor) return descriptor;
-          }
-        }
-        // Recursive search up each ref's prototype
-        for (const ref of refs) {
-          let obj = ref.value && Object.getPrototypeOf(ref.value);
-          while (obj) {
-            const descriptor = Reflect.getOwnPropertyDescriptor(obj, key);
-            if (descriptor) return descriptor;
-            obj = Object.getPrototypeOf(obj);
-          }
-        }
-        // Call forwarded refs' proxies
-        for (const ref of refs) {
-          const childRefs = ref.value && ref.value[Refs];
-          if (!childRefs) continue;
-          const queue = childRefs.slice();
-          while (queue.length) {
-            const ref = queue.shift();
-            const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
-            if (descriptor) return descriptor;
-            const childRefs = ref.value && ref.value[Refs];
-            if (childRefs) queue.push(...childRefs);
-          }
-        }
+  function useTeleport(target) {
+    const teleportTarget = vue.computed(() => {
+      const _target = target.value;
+      if (_target === true || !IN_BROWSER) return undefined;
+      const targetElement = _target === false ? document.body : typeof _target === 'string' ? document.querySelector(_target) : _target;
+      if (targetElement == null) {
+        vue.warn(`Unable to locate target ${_target}`);
         return undefined;
       }
+      if (!useTeleport.cache.has(targetElement)) {
+        const el = document.createElement('div');
+        el.className = 'v-overlay-container';
+        targetElement.appendChild(el);
+        useTeleport.cache.set(targetElement, el);
+      }
+      return useTeleport.cache.get(targetElement);
     });
-  }
-
-  function useScopeId() {
-    const vm = getCurrentInstance('useScopeId');
-    const scopeId = vm.vnode.scopeId;
     return {
-      scopeId: scopeId ? {
-        [scopeId]: ''
-      } : undefined
+      teleportTarget
     };
   }
+  useTeleport.cache = new WeakMap();
 
-  // Types
+  function defaultConditional() {
+    return true;
+  }
+  function checkEvent(e, el, binding) {
+    // The include element callbacks below can be expensive
+    // so we should avoid calling them when we're not active.
+    // Explicitly check for false to allow fallback compatibility
+    // with non-toggleable components
+    if (!e || checkIsActive(e, binding) === false) return false;
 
-  const VMenu = genericComponent()({
-    name: 'VMenu',
-    props: {
-      // TODO
-      // disableKeys: Boolean,
-      id: String,
-      ...omit(makeVOverlayProps({
-        closeDelay: 250,
-        closeOnContentClick: true,
-        locationStrategy: 'connected',
-        openDelay: 300,
-        scrim: false,
-        scrollStrategy: 'reposition',
-        transition: {
-          component: VDialogTransition
-        }
-      }), ['absolute'])
-    },
-    emits: {
-      'update:modelValue': value => true
-    },
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const isActive = useProxiedModel(props, 'modelValue');
-      const {
-        scopeId
-      } = useScopeId();
-      const uid = getUid();
-      const id = vue.computed(() => props.id || `v-menu-${uid}`);
-      const overlay = vue.ref();
-      const parent = vue.inject(VMenuSymbol, null);
-      let openChildren = 0;
-      vue.provide(VMenuSymbol, {
-        register() {
-          ++openChildren;
-        },
-        unregister() {
-          --openChildren;
-        },
-        closeParents() {
-          setTimeout(() => {
-            if (!openChildren) {
-              isActive.value = false;
-              parent == null ? void 0 : parent.closeParents();
-            }
-          }, 40);
-        }
-      });
-      vue.watch(isActive, val => {
-        val ? parent == null ? void 0 : parent.register() : parent == null ? void 0 : parent.unregister();
+    // If we're clicking inside the shadowroot, then the app root doesn't get the same
+    // level of introspection as to _what_ we're clicking. We want to check to see if
+    // our target is the shadowroot parent container, and if it is, ignore.
+    const root = attachedRoot(el);
+    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot && root.host === e.target) return false;
+
+    // Check if additional elements were passed to be included in check
+    // (click must be outside all included elements, if any)
+    const elements = (typeof binding.value === 'object' && binding.value.include || (() => []))();
+    // Add the root element for the component this directive was defined on
+    elements.push(el);
+
+    // Check if it's a click outside our elements, and then if our callback returns true.
+    // Non-toggleable components should take action in their callback and return falsy.
+    // Toggleable can return true if it wants to deactivate.
+    // Note that, because we're in the capture phase, this callback will occur before
+    // the bubbling click event on any outside elements.
+    return !elements.some(el => el == null ? void 0 : el.contains(e.target));
+  }
+  function checkIsActive(e, binding) {
+    const isActive = typeof binding.value === 'object' && binding.value.closeConditional || defaultConditional;
+    return isActive(e);
+  }
+  function directive(e, el, binding) {
+    const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
+    el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+      checkIsActive(e, binding) && handler && handler(e);
+    }, 0);
+  }
+  function handleShadow(el, callback) {
+    const root = attachedRoot(el);
+    callback(document);
+    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+      callback(root);
+    }
+  }
+  const ClickOutside = {
+    // [data-app] may not be found
+    // if using bind, inserted makes
+    // sure that the root element is
+    // available, iOS does not support
+    // clicks on body
+    mounted(el, binding) {
+      const onClick = e => directive(e, el, binding);
+      const onMousedown = e => {
+        el._clickOutside.lastMousedownWasOutside = checkEvent(e, el, binding);
+      };
+      handleShadow(el, app => {
+        app.addEventListener('click', onClick, true);
+        app.addEventListener('mousedown', onMousedown, true);
       });
-      function onClickOutside() {
-        parent == null ? void 0 : parent.closeParents();
+      if (!el._clickOutside) {
+        el._clickOutside = {
+          lastMousedownWasOutside: true
+        };
       }
-      useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
-        return vue.createVNode(VOverlay, vue.mergeProps({
-          "ref": overlay,
-          "class": ['v-menu']
-        }, overlayProps, {
-          "modelValue": isActive.value,
-          "onUpdate:modelValue": $event => isActive.value = $event,
-          "absolute": true,
-          "activatorProps": vue.mergeProps({
-            'aria-haspopup': 'menu',
-            'aria-expanded': String(isActive.value),
-            'aria-owns': id.value
-          }, props.activatorProps),
-          "onClick:outside": onClickOutside
-        }, scopeId), {
-          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
-      }, overlay);
-    }
-  });
-
-  const VFieldLabel = defineComponent({
-    name: 'VFieldLabel',
-    props: {
-      floating: Boolean
+      el._clickOutside[binding.instance.$.uid] = {
+        onClick,
+        onMousedown
+      };
     },
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      useRender(() => vue.createVNode(VLabel, {
-        "class": ['v-field-label', {
-          'v-field-label--floating': props.floating
-        }],
-        "aria-hidden": props.floating || undefined
-      }, slots));
-      return {};
+    unmounted(el, binding) {
+      if (!el._clickOutside) return;
+      handleShadow(el, app => {
+        var _el$_clickOutside;
+        if (!app || !((_el$_clickOutside = el._clickOutside) != null && _el$_clickOutside[binding.instance.$.uid])) return;
+        const {
+          onClick,
+          onMousedown
+        } = el._clickOutside[binding.instance.$.uid];
+        app.removeEventListener('click', onClick, true);
+        app.removeEventListener('mousedown', onMousedown, true);
+      });
+      delete el._clickOutside[binding.instance.$.uid];
     }
-  });
+  };
 
   // Types
 
-  const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'plain'];
-  const makeVFieldProps = propsFactory({
-    appendInnerIcon: IconValue,
-    bgColor: String,
-    clearable: Boolean,
-    clearIcon: {
-      type: IconValue,
-      default: '$clear'
+  function Scrim(props) {
+    const {
+      modelValue,
+      color,
+      ...rest
+    } = props;
+    return vue.createVNode(vue.Transition, {
+      "name": "fade-transition",
+      "appear": true
+    }, {
+      default: () => [props.modelValue && vue.createVNode("div", vue.mergeProps({
+        "class": ['v-overlay__scrim', props.color.backgroundColorClasses.value],
+        "style": props.color.backgroundColorStyles.value
+      }, rest), null)]
+    });
+  }
+  const makeVOverlayProps = propsFactory({
+    absolute: Boolean,
+    attach: [Boolean, String, Object],
+    closeOnBack: {
+      type: Boolean,
+      default: true
     },
-    active: Boolean,
-    color: String,
-    dirty: Boolean,
+    contained: Boolean,
+    contentClass: null,
+    contentProps: null,
     disabled: Boolean,
-    error: Boolean,
-    label: String,
-    persistentClear: Boolean,
-    prependInnerIcon: IconValue,
-    reverse: Boolean,
-    singleLine: Boolean,
-    variant: {
-      type: String,
-      default: 'filled',
-      validator: v => allowedVariants$1.includes(v)
+    noClickAnimation: Boolean,
+    modelValue: Boolean,
+    persistent: Boolean,
+    scrim: {
+      type: [String, Boolean],
+      default: true
     },
-    'onClick:clear': EventProp,
-    'onClick:appendInner': EventProp,
-    'onClick:prependInner': EventProp,
+    zIndex: {
+      type: [Number, String],
+      default: 2000
+    },
+    ...makeActivatorProps(),
+    ...makeDimensionProps(),
+    ...makeLazyProps(),
+    ...makeLocationStrategyProps(),
+    ...makeScrollStrategyProps(),
     ...makeThemeProps(),
-    ...makeLoaderProps()
-  }, 'v-field');
-  const VField = genericComponent()({
-    name: 'VField',
-    inheritAttrs: false,
-    props: {
-      id: String,
-      ...makeFocusProps(),
-      ...makeVFieldProps()
+    ...makeTransitionProps()
+  }, 'v-overlay');
+  const VOverlay = genericComponent()({
+    name: 'VOverlay',
+    directives: {
+      ClickOutside
     },
+    inheritAttrs: false,
+    props: makeVOverlayProps(),
     emits: {
-      'click:control': e => true,
-      'update:focused': focused => true,
-      'update:modelValue': val => true
+      'click:outside': e => true,
+      'update:modelValue': value => true,
+      afterLeave: () => true
     },
     setup(props, _ref) {
       let {
+        slots,
         attrs,
-        emit,
-        slots
+        emit
       } = _ref;
+      const model = useProxiedModel(props, 'modelValue');
+      const isActive = vue.computed({
+        get: () => model.value,
+        set: v => {
+          if (!(v && props.disabled)) model.value = v;
+        }
+      });
+      const {
+        teleportTarget
+      } = useTeleport(vue.computed(() => props.attach || props.contained));
       const {
         themeClasses
       } = provideTheme(props);
       const {
-        loaderClasses
-      } = useLoader(props);
+        rtlClasses,
+        isRtl
+      } = useRtl();
       const {
-        focusClasses,
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
+        hasContent,
+        onAfterLeave
+      } = useLazy(props, isActive);
+      const scrimColor = useBackgroundColor(vue.computed(() => {
+        return typeof props.scrim === 'string' ? props.scrim : null;
+      }));
       const {
-        InputIcon
-      } = useInputIcon(props);
-      const isActive = vue.computed(() => props.dirty || props.active);
-      const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
-      const uid = getUid();
-      const id = vue.computed(() => props.id || `input-${uid}`);
-      const labelRef = vue.ref();
-      const floatingLabelRef = vue.ref();
-      const controlRef = vue.ref();
+        globalTop,
+        localTop,
+        stackStyles
+      } = useStack(isActive, vue.toRef(props, 'zIndex'));
       const {
-        backgroundColorClasses,
-        backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+        activatorEl,
+        activatorRef,
+        activatorEvents,
+        contentEvents,
+        scrimEvents
+      } = useActivator(props, {
+        isActive,
+        isTop: localTop
+      });
       const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(vue.computed(() => {
-        return isActive.value && isFocused.value && !props.error && !props.disabled ? props.color : undefined;
-      }));
-      vue.watch(isActive, val => {
-        if (hasLabel.value) {
-          const el = labelRef.value.$el;
-          const targetEl = floatingLabelRef.value.$el;
-          const rect = nullifyTransforms(el);
-          const targetRect = targetEl.getBoundingClientRect();
-          const x = targetRect.x - rect.x;
-          const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
-          const targetWidth = targetRect.width / 0.75;
-          const width = Math.abs(targetWidth - rect.width) > 1 ? {
-            maxWidth: convertToUnit(targetWidth)
-          } : undefined;
-          const style = getComputedStyle(el);
-          const targetStyle = getComputedStyle(targetEl);
-          const duration = parseFloat(style.transitionDuration) * 1000 || 150;
-          const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
-          const color = targetStyle.getPropertyValue('color');
-          el.style.visibility = 'visible';
-          targetEl.style.visibility = 'hidden';
-          animate(el, {
-            transform: `translate(${x}px, ${y}px) scale(${scale})`,
-            color,
-            ...width
-          }, {
-            duration,
-            easing: standardEasing,
-            direction: val ? 'normal' : 'reverse'
-          }).finished.then(() => {
-            el.style.removeProperty('visibility');
-            targetEl.style.removeProperty('visibility');
-          });
+        dimensionStyles
+      } = useDimension(props);
+      const isMounted = useHydration();
+      vue.watch(() => props.disabled, v => {
+        if (v) isActive.value = false;
+      });
+      const root = vue.ref();
+      const contentEl = vue.ref();
+      const {
+        contentStyles,
+        updateLocation
+      } = useLocationStrategies(props, {
+        isRtl,
+        contentEl,
+        activatorEl,
+        isActive
+      });
+      useScrollStrategies(props, {
+        root,
+        contentEl,
+        activatorEl,
+        isActive,
+        updateLocation
+      });
+      function onClickOutside(e) {
+        emit('click:outside', e);
+        if (!props.persistent) isActive.value = false;else animateClick();
+      }
+      function closeConditional() {
+        return isActive.value && globalTop.value;
+      }
+      IN_BROWSER && vue.watch(isActive, val => {
+        if (val) {
+          window.addEventListener('keydown', onKeydown);
+        } else {
+          window.removeEventListener('keydown', onKeydown);
+        }
+      }, {
+        immediate: true
+      });
+      function onKeydown(e) {
+        if (e.key === 'Escape' && globalTop.value) {
+          if (!props.persistent) {
+            isActive.value = false;
+          } else animateClick();
+        }
+      }
+      const router = useRouter();
+      useToggleScope(() => props.closeOnBack, () => {
+        useBackButton(router, next => {
+          if (globalTop.value && isActive.value) {
+            next(false);
+            if (!props.persistent) isActive.value = false;else animateClick();
+          } else {
+            next();
+          }
+        });
+      });
+      const top = vue.ref();
+      vue.watch(() => isActive.value && (props.absolute || props.contained) && teleportTarget.value == null, val => {
+        if (val) {
+          const scrollParent = getScrollParent(root.value);
+          if (scrollParent && scrollParent !== document.scrollingElement) {
+            top.value = scrollParent.scrollTop;
+          }
         }
-      }, {
-        flush: 'post'
       });
-      const slotProps = vue.computed(() => ({
-        isActive,
-        isFocused,
-        controlRef,
-        blur,
-        focus
-      }));
-      function onClick(e) {
-        if (e.target !== document.activeElement) {
-          e.preventDefault();
-        }
-        emit('click:control', e);
-      }
-      useRender(() => {
-        var _slots$prependInner, _slots$default, _slots$appendInner;
-        const isOutlined = props.variant === 'outlined';
-        const hasPrepend = slots['prepend-inner'] || props.prependInnerIcon;
-        const hasClear = !!(props.clearable || slots.clear);
-        const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
-        const label = slots.label ? slots.label({
-          label: props.label,
-          props: {
-            for: id.value
-          }
-        }) : props.label;
-        return vue.createVNode("div", vue.mergeProps({
-          "class": ['v-field', {
-            'v-field--active': isActive.value,
-            'v-field--appended': hasAppend,
-            'v-field--disabled': props.disabled,
-            'v-field--dirty': props.dirty,
-            'v-field--error': props.error,
-            'v-field--has-background': !!props.bgColor,
-            'v-field--persistent-clear': props.persistentClear,
-            'v-field--prepended': hasPrepend,
-            'v-field--reverse': props.reverse,
-            'v-field--single-line': props.singleLine,
-            'v-field--no-label': !label,
-            [`v-field--variant-${props.variant}`]: true
-          }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
-          "style": [backgroundColorStyles.value, textColorStyles.value],
-          "onClick": onClick
-        }, attrs), [vue.createVNode("div", {
-          "class": "v-field__overlay"
-        }, null), vue.createVNode(LoaderSlot, {
-          "name": "v-field",
-          "active": props.loading,
-          "color": props.error ? 'error' : props.color
-        }, {
-          default: slots.loader
-        }), hasPrepend && vue.createVNode("div", {
-          "key": "prepend",
-          "class": "v-field__prepend-inner"
-        }, [props.prependInnerIcon && vue.createVNode(InputIcon, {
-          "key": "prepend-icon",
-          "name": "prependInner"
-        }, null), (_slots$prependInner = slots['prepend-inner']) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), vue.createVNode("div", {
-          "class": "v-field__field",
-          "data-no-activator": ""
-        }, [['solo', 'filled'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
-          "key": "floating-label",
-          "ref": floatingLabelRef,
-          "class": [textColorClasses.value],
-          "floating": true,
-          "for": id.value
-        }, {
-          default: () => [label]
-        }), vue.createVNode(VFieldLabel, {
-          "ref": labelRef,
-          "for": id.value
-        }, {
-          default: () => [label]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
-          ...slotProps.value,
-          props: {
-            id: id.value,
-            class: 'v-field__input'
-          },
-          focus,
-          blur
-        })]), hasClear && vue.createVNode(VExpandXTransition, {
-          "key": "clear"
+
+      // Add a quick "bounce" animation to the content
+      function animateClick() {
+        if (props.noClickAnimation) return;
+        contentEl.value && animate(contentEl.value, [{
+          transformOrigin: 'center'
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": "v-field__clearable"
-          }, [slots.clear ? slots.clear() : vue.createVNode(InputIcon, {
-            "name": "clear"
-          }, null)]), [[vue.vShow, props.dirty]])]
-        }), hasAppend && vue.createVNode("div", {
-          "key": "append",
-          "class": "v-field__append-inner"
-        }, [(_slots$appendInner = slots['append-inner']) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && vue.createVNode(InputIcon, {
-          "key": "append-icon",
-          "name": "appendInner"
-        }, null)]), vue.createVNode("div", {
-          "class": ['v-field__outline', textColorClasses.value]
-        }, [isOutlined && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-          "class": "v-field__outline__start"
-        }, null), hasLabel.value && vue.createVNode("div", {
-          "class": "v-field__outline__notch"
-        }, [vue.createVNode(VFieldLabel, {
-          "ref": floatingLabelRef,
-          "floating": true,
-          "for": id.value
+          transform: 'scale(1.03)'
         }, {
-          default: () => [label]
-        })]), vue.createVNode("div", {
-          "class": "v-field__outline__end"
-        }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
-          "ref": floatingLabelRef,
-          "floating": true,
-          "for": id.value
+          transformOrigin: 'center'
+        }], {
+          duration: 150,
+          easing: standardEasing
+        });
+      }
+      useRender(() => {
+        var _slots$activator, _slots$default;
+        return vue.createVNode(vue.Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
+          isActive: isActive.value,
+          props: vue.mergeProps({
+            ref: activatorRef
+          }, vue.toHandlers(activatorEvents.value), props.activatorProps)
+        }), isMounted.value && vue.createVNode(vue.Teleport, {
+          "disabled": !teleportTarget.value,
+          "to": teleportTarget.value
         }, {
-          default: () => [label]
-        })])]);
+          default: () => [hasContent.value && vue.createVNode("div", vue.mergeProps({
+            "class": ['v-overlay', {
+              'v-overlay--absolute': props.absolute || props.contained,
+              'v-overlay--active': isActive.value,
+              'v-overlay--contained': props.contained
+            }, themeClasses.value, rtlClasses.value],
+            "style": [stackStyles.value, {
+              top: convertToUnit(top.value)
+            }],
+            "ref": root
+          }, attrs), [vue.createVNode(Scrim, vue.mergeProps({
+            "color": scrimColor,
+            "modelValue": isActive.value && !!props.scrim
+          }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
+            "appear": true,
+            "persisted": true,
+            "transition": props.transition,
+            "target": activatorEl.value,
+            "onAfterLeave": () => {
+              onAfterLeave();
+              emit('afterLeave');
+            }
+          }, {
+            default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+              "ref": contentEl,
+              "class": ['v-overlay__content', props.contentClass],
+              "style": [dimensionStyles.value, contentStyles.value]
+            }, vue.toHandlers(contentEvents.value), props.contentProps), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+              isActive
+            })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
+              handler: onClickOutside,
+              closeConditional,
+              include: () => [activatorEl.value]
+            }]])]
+          })])]
+        })]);
       });
       return {
-        controlRef
+        activatorEl,
+        animateClick,
+        contentEl,
+        globalTop,
+        localTop,
+        updateLocation
       };
     }
   });
-  // TODO: this is kinda slow, might be better to implicitly inherit props instead
-  function filterFieldProps(attrs) {
-    const keys = Object.keys(VField.props).filter(k => !isOn(k));
-    return pick(attrs, keys);
+  function filterVOverlayProps(props) {
+    return pick(props, Object.keys(VOverlay.props));
   }
 
-  const VCounter = defineComponent({
-    name: 'VCounter',
-    functional: true,
-    props: {
-      active: Boolean,
-      max: [Number, String],
-      value: {
-        type: [Number, String],
-        default: 0
-      },
-      ...makeTransitionProps({
-        transition: {
-          component: VSlideYTransition
-        }
-      })
-    },
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const counter = vue.computed(() => {
-        return props.max ? `${props.value} / ${props.max}` : String(props.value);
-      });
-      useRender(() => vue.createVNode(MaybeTransition, {
-        "transition": props.transition
-      }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": "v-counter"
-        }, [slots.default ? slots.default({
-          counter: counter.value,
-          max: props.max,
-          value: props.value
-        }) : counter.value]), [[vue.vShow, props.active]])]
-      }));
-      return {};
-    }
-  });
-
-  // Types
-
-  const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month'];
-  const VTextField = genericComponent()({
-    name: 'VTextField',
-    directives: {
-      Intersect
-    },
-    inheritAttrs: false,
-    props: {
-      autofocus: Boolean,
-      counter: [Boolean, Number, String],
-      counterValue: Function,
-      hint: String,
-      persistentHint: Boolean,
-      prefix: String,
-      placeholder: String,
-      persistentPlaceholder: Boolean,
-      persistentCounter: Boolean,
-      suffix: String,
-      type: {
-        type: String,
-        default: 'text'
-      },
-      ...makeVInputProps(),
-      ...makeVFieldProps()
+  function useScopeId() {
+    const vm = getCurrentInstance('useScopeId');
+    const scopeId = vm.vnode.scopeId;
+    return {
+      scopeId: scopeId ? {
+        [scopeId]: ''
+      } : undefined
+    };
+  }
+
+  // Types
+
+  const VMenu = genericComponent()({
+    name: 'VMenu',
+    props: {
+      // TODO
+      // disableKeys: Boolean,
+      id: String,
+      ...omit(makeVOverlayProps({
+        closeDelay: 250,
+        closeOnContentClick: true,
+        locationStrategy: 'connected',
+        openDelay: 300,
+        scrim: false,
+        scrollStrategy: 'reposition',
+        transition: {
+          component: VDialogTransition
+        }
+      }), ['absolute'])
     },
     emits: {
-      'click:control': e => true,
-      'click:input': e => true,
-      'update:focused': focused => true,
-      'update:modelValue': val => true
+      'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
-        attrs,
-        emit,
         slots
       } = _ref;
-      const model = useProxiedModel(props, 'modelValue');
+      const isActive = useProxiedModel(props, 'modelValue');
       const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
-      const counterValue = vue.computed(() => {
-        return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value ?? '').toString().length;
-      });
-      const max = vue.computed(() => {
-        if (attrs.maxlength) return attrs.maxlength;
-        if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
-        return props.counter;
+        scopeId
+      } = useScopeId();
+      const uid = getUid();
+      const id = vue.computed(() => props.id || `v-menu-${uid}`);
+      const overlay = vue.ref();
+      const parent = vue.inject(VMenuSymbol, null);
+      let openChildren = 0;
+      vue.provide(VMenuSymbol, {
+        register() {
+          ++openChildren;
+        },
+        unregister() {
+          --openChildren;
+        },
+        closeParents() {
+          setTimeout(() => {
+            if (!openChildren) {
+              isActive.value = false;
+              parent == null ? void 0 : parent.closeParents();
+            }
+          }, 40);
+        }
       });
-      function onIntersect(isIntersecting, entries) {
-        var _entries$0$target, _entries$0$target$foc;
-        if (!props.autofocus || !isIntersecting) return;
-        (_entries$0$target = entries[0].target) == null ? void 0 : (_entries$0$target$foc = _entries$0$target.focus) == null ? void 0 : _entries$0$target$foc.call(_entries$0$target);
-      }
-      const vInputRef = vue.ref();
-      const vFieldRef = vue.ref();
-      const inputRef = vue.ref();
-      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
-      const messages = vue.computed(() => {
-        return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
+      vue.watch(isActive, val => {
+        val ? parent == null ? void 0 : parent.register() : parent == null ? void 0 : parent.unregister();
       });
-      function onFocus() {
-        if (inputRef.value !== document.activeElement) {
-          var _inputRef$value;
-          (_inputRef$value = inputRef.value) == null ? void 0 : _inputRef$value.focus();
-        }
-        if (!isFocused.value) focus();
-      }
-      function onControlClick(e) {
-        onFocus();
-        emit('click:control', e);
-      }
-      function onClear(e) {
-        e.stopPropagation();
-        onFocus();
-        vue.nextTick(() => {
-          model.value = null;
-          callEvent(props['onClick:clear'], e);
-        });
-      }
-      function onInput(e) {
-        model.value = e.target.value;
+      function onClickOutside() {
+        parent == null ? void 0 : parent.closeParents();
       }
       useRender(() => {
-        const hasCounter = !!(slots.counter || props.counter || props.counterValue);
-        const hasDetails = !!(hasCounter || slots.details);
-        const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
-        const [{
-          modelValue: _,
-          ...inputProps
-        }] = filterInputProps(props);
-        const [fieldProps] = filterFieldProps(props);
-        return vue.createVNode(VInput, vue.mergeProps({
-          "ref": vInputRef,
-          "modelValue": model.value,
-          "onUpdate:modelValue": $event => model.value = $event,
-          "class": ['v-text-field', {
-            'v-text-field--prefixed': props.prefix,
-            'v-text-field--suffixed': props.suffix,
-            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-          }],
-          "onClick:prepend": props['onClick:prepend'],
-          "onClick:append": props['onClick:append']
-        }, rootAttrs, inputProps, {
-          "focused": isFocused.value,
-          "messages": messages.value
-        }), {
-          ...slots,
-          default: _ref2 => {
-            let {
-              id,
-              isDisabled,
-              isDirty,
-              isReadonly,
-              isValid
-            } = _ref2;
-            return vue.createVNode(VField, vue.mergeProps({
-              "ref": vFieldRef,
-              "onMousedown": e => {
-                if (e.target === inputRef.value) return;
-                e.preventDefault();
-              },
-              "onClick:control": onControlClick,
-              "onClick:clear": onClear,
-              "onClick:prependInner": props['onClick:prependInner'],
-              "onClick:appendInner": props['onClick:appendInner'],
-              "role": "textbox"
-            }, fieldProps, {
-              "id": id.value,
-              "active": isActive.value || isDirty.value,
-              "dirty": isDirty.value || props.dirty,
-              "focused": isFocused.value,
-              "error": isValid.value === false
-            }), {
-              ...slots,
-              default: _ref3 => {
-                let {
-                  props: {
-                    class: fieldClass,
-                    ...slotProps
-                  }
-                } = _ref3;
-                const inputNode = vue.withDirectives(vue.createVNode("input", vue.mergeProps({
-                  "ref": inputRef,
-                  "value": model.value,
-                  "onInput": onInput,
-                  "autofocus": props.autofocus,
-                  "readonly": isReadonly.value,
-                  "disabled": isDisabled.value,
-                  "name": props.name,
-                  "placeholder": props.placeholder,
-                  "size": 1,
-                  "type": props.type,
-                  "onFocus": onFocus,
-                  "onBlur": blur
-                }, slotProps, inputAttrs), null), [[vue.resolveDirective("intersect"), {
-                  handler: onIntersect
-                }, null, {
-                  once: true
-                }]]);
-                return vue.createVNode(vue.Fragment, null, [props.prefix && vue.createVNode("span", {
-                  "class": "v-text-field__prefix"
-                }, [props.prefix]), slots.default ? vue.createVNode("div", {
-                  "class": fieldClass,
-                  "onClick": e => emit('click:input', e),
-                  "data-no-activator": ""
-                }, [slots.default(), inputNode]) : vue.cloneVNode(inputNode, {
-                  class: fieldClass
-                }), props.suffix && vue.createVNode("span", {
-                  "class": "v-text-field__suffix"
-                }, [props.suffix])]);
-              }
+        const [overlayProps] = filterVOverlayProps(props);
+        return vue.createVNode(VOverlay, vue.mergeProps({
+          "ref": overlay,
+          "class": ['v-menu']
+        }, overlayProps, {
+          "modelValue": isActive.value,
+          "onUpdate:modelValue": $event => isActive.value = $event,
+          "absolute": true,
+          "activatorProps": vue.mergeProps({
+            'aria-haspopup': 'menu',
+            'aria-expanded': String(isActive.value),
+            'aria-owns': id.value
+          }, props.activatorProps),
+          "onClick:outside": onClickOutside
+        }, scopeId), {
+          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)]
             });
-          },
-          details: hasDetails ? slotProps => {
-            var _slots$details;
-            return vue.createVNode(vue.Fragment, null, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps), hasCounter && vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
-              "active": props.persistentCounter || isFocused.value,
-              "value": counterValue.value,
-              "max": max.value
-            }, slots.counter)])]);
-          } : undefined
+          }
         });
       });
-      return forwardRefs({}, vInputRef, vFieldRef, inputRef);
+      return forwardRefs({
+        id
+      }, overlay);
     }
   });
 
@@ -9522,22 +9553,23 @@
     menuProps: {
       type: Object
     },
-    modelValue: null,
     multiple: Boolean,
     noDataText: {
       type: String,
       default: '$vuetify.noDataText'
     },
     openOnClear: Boolean,
-    readonly: Boolean,
     ...makeItemsProps({
       itemChildren: false
     })
-  }, 'select');
+  }, 'v-select');
   const VSelect = genericComponent()({
     name: 'VSelect',
     props: {
       ...makeSelectProps(),
+      ...omit(makeVTextFieldProps({
+        modelValue: null
+      }), ['validationValue', 'dirty', 'appendInnerIcon']),
       ...makeTransitionProps({
         transition: {
           component: VDialogTransition
@@ -9586,6 +9618,7 @@
       function onKeydown(e) {
         if (props.readonly) return;
         if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
+          e.preventDefault();
           menu.value = true;
         }
         if (['Escape', 'Tab'].includes(e.key)) {
@@ -9596,12 +9629,15 @@
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
+          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         } else if (e.key === 'Home') {
           var _listRef$value3;
+          e.preventDefault();
           (_listRef$value3 = listRef.value) == null ? void 0 : _listRef$value3.focus('first');
         } else if (e.key === 'End') {
           var _listRef$value4;
+          e.preventDefault();
           (_listRef$value4 = listRef.value) == null ? void 0 : _listRef$value4.focus('last');
         }
       }
@@ -9634,8 +9670,10 @@
       }
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        return vue.createVNode(VTextField, {
-          "ref": vTextFieldRef,
+        const [textFieldProps] = filterVTextFieldProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps({
+          "ref": vTextFieldRef
+        }, textFieldProps, {
           "modelValue": model.value.map(v => v.props.value).join(', '),
           "onUpdate:modelValue": v => {
             if (v == null) model.value = [];
@@ -9654,7 +9692,7 @@
           "onClick:control": onClickControl,
           "onBlur": onBlur,
           "onKeydown": onKeydown
-        }, {
+        }), {
           ...slots,
           default: () => {
             var _slots$noData, _slots$prependItem, _slots$appendItem;
@@ -9865,6 +9903,9 @@
         filterKeys: ['title']
       }),
       ...makeSelectProps(),
+      ...omit(makeVTextFieldProps({
+        modelValue: null
+      }), ['validationValue', 'dirty', 'appendInnerIcon']),
       ...makeTransitionProps({
         transition: false
       })
@@ -9929,9 +9970,11 @@
         }
         if (e.key === 'ArrowDown') {
           var _listRef$value;
+          e.preventDefault();
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
+          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         }
       }
@@ -9992,8 +10035,10 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        return vue.createVNode(VTextField, {
-          "ref": vTextFieldRef,
+        const [textFieldProps] = filterVTextFieldProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps({
+          "ref": vTextFieldRef
+        }, textFieldProps, {
           "modelValue": search.value,
           "onUpdate:modelValue": v => {
             if (v == null) model.value = [];
@@ -10015,7 +10060,7 @@
           "onFocus": () => isFocused.value = true,
           "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
-        }, {
+        }), {
           ...slots,
           default: () => {
             var _slots$noData, _slots$prependItem, _slots$appendItem;
@@ -13228,6 +13273,9 @@
         hideNoData: true,
         returnObject: true
       }),
+      ...omit(makeVTextFieldProps({
+        modelValue: null
+      }), ['validationValue', 'dirty', 'appendInnerIcon']),
       ...makeTransitionProps({
         transition: false
       })
@@ -13340,9 +13388,11 @@
         }
         if (e.key === 'ArrowDown') {
           var _listRef$value;
+          e.preventDefault();
           (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
         } else if (e.key === 'ArrowUp') {
           var _listRef$value2;
+          e.preventDefault();
           (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
         }
         if (!props.multiple) return;
@@ -13430,8 +13480,10 @@
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
-        return vue.createVNode(VTextField, {
-          "ref": vTextFieldRef,
+        const [textFieldProps] = filterVTextFieldProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps({
+          "ref": vTextFieldRef
+        }, textFieldProps, {
           "modelValue": search.value,
           "onUpdate:modelValue": [$event => search.value = $event, v => {
             if (v == null) model.value = [];
@@ -13452,7 +13504,7 @@
           "onFocus": () => isFocused.value = true,
           "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
-        }, {
+        }), {
           ...slots,
           default: () => {
             var _slots$noData, _slots$prependItem, _slots$appendItem;
@@ -13734,7 +13786,7 @@
       default: false
     },
     readonly: Boolean
-  }, 'VExpansionPanelTitle');
+  }, 'v-expansion-panel-title');
   const VExpansionPanelTitle = defineComponent({
     name: 'VExpansionPanelTitle',
     directives: {
@@ -15307,15 +15359,6 @@
     }
   });
 
-  // Utilities
-  function useHydration(callback) {
-    var _vm$root, _vm$root$appContext, _vm$root$appContext$a;
-    if (!IN_BROWSER) return;
-    const vm = getCurrentInstance('useHydration');
-    const rootEl = vm == null ? void 0 : (_vm$root = vm.root) == null ? void 0 : (_vm$root$appContext = _vm$root.appContext) == null ? void 0 : (_vm$root$appContext$a = _vm$root$appContext.app) == null ? void 0 : _vm$root$appContext$a._container;
-    return rootEl != null && rootEl.__vue_app__ ? callback() : vue.onMounted(callback);
-  }
-
   // Composables
   const VNoSsr = defineComponent({
     name: 'VNoSsr',
@@ -15323,8 +15366,7 @@
       let {
         slots
       } = _ref;
-      const show = vue.ref(false);
-      useHydration(() => show.value = true);
+      const show = useHydration();
       return () => {
         var _slots$default;
         return show.value && ((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots));
@@ -18078,15 +18120,21 @@
       app.provide(IconSymbol, icons);
       app.provide(LocaleSymbol, locale);
       if (IN_BROWSER && options.ssr) {
-        const {
-          mount
-        } = app;
-        app.mount = function () {
-          const vm = mount(...arguments);
-          vue.nextTick(() => display.update());
-          app.mount = mount;
-          return vm;
-        };
+        if (app.$nuxt) {
+          app.$nuxt.hook('app:suspense:resolve', () => {
+            display.update();
+          });
+        } else {
+          const {
+            mount
+          } = app;
+          app.mount = function () {
+            const vm = mount(...arguments);
+            vue.nextTick(() => display.update());
+            app.mount = mount;
+            return vm;
+          };
+        }
       }
       getUid.reset();
       app.mixin({
@@ -18112,7 +18160,7 @@
       locale
     };
   }
-  const version$1 = "3.0.0";
+  const version$1 = "3.0.1";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18133,7 +18181,7 @@
       ...options
     });
   };
-  const version = "3.0.0";
+  const version = "3.0.1";
   createVuetify.version = version;
 
   exports.components = components;