@vuetify/nightly 4.0.0-dev-20230419.0 → 4.0.0-dev-20230421.0

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230419.0
+* Vuetify v4.0.0-dev-20230421.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -203,10 +203,6 @@ function clamp(value) {
   let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   return Math.max(min, Math.min(max, value));
 }
-function getDecimals(value) {
-  const trimmedStr = value.toString().trim();
-  return trimmedStr.includes('.') ? trimmedStr.length - trimmedStr.indexOf('.') - 1 : 0;
-}
 function padEnd(str, length) {
   let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
   return str + char.repeat(Math.max(0, length - str.length));
@@ -3249,6 +3245,98 @@ const VToolbar = genericComponent()({
 
 // Utilities
 
+// Types
+
+// Composables
+const makeScrollProps = propsFactory({
+  scrollTarget: {
+    type: String
+  },
+  scrollThreshold: {
+    type: [String, Number]
+  }
+}, 'scroll');
+function useScroll(props) {
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    thresholdMetCallback,
+    scrollThreshold,
+    canScroll
+  } = args;
+  let previousScroll = 0;
+  const target = ref(null);
+  const currentScroll = ref(0);
+  const savedScroll = ref(0);
+  const currentThreshold = ref(0);
+  const isScrollActive = ref(false);
+  const isScrollingUp = ref(false);
+  const computedScrollThreshold = computed(() => {
+    return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+  });
+  const onScroll = () => {
+    const targetEl = target.value;
+    if (!targetEl || canScroll && !canScroll.value) return;
+    previousScroll = currentScroll.value;
+    currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
+    isScrollingUp.value = currentScroll.value < previousScroll;
+    currentThreshold.value = Math.abs(currentScroll.value - computedScrollThreshold.value);
+  };
+  watch(isScrollingUp, () => {
+    savedScroll.value = savedScroll.value || currentScroll.value;
+  });
+  watch(isScrollActive, () => {
+    savedScroll.value = 0;
+  });
+  onMounted(() => {
+    watch(() => props.scrollTarget, scrollTarget => {
+      const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
+      if (!newTarget) {
+        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, getCurrentInstance$1());
+        return;
+      }
+      if (newTarget === target.value) return;
+      target.value?.removeEventListener('scroll', onScroll);
+      target.value = newTarget;
+      target.value.addEventListener('scroll', onScroll, {
+        passive: true
+      });
+    }, {
+      immediate: true
+    });
+  });
+  onBeforeUnmount(() => {
+    target.value?.removeEventListener('scroll', onScroll);
+  });
+  thresholdMetCallback && watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
+    thresholdMet && thresholdMetCallback({
+      currentThreshold: currentThreshold.value,
+      isScrollingUp: isScrollingUp.value,
+      savedScroll
+    });
+  }, {
+    immediate: true
+  });
+
+  // Do we need this? If yes - seems that
+  // there's no need to expose onScroll
+  canScroll && watch(canScroll, onScroll, {
+    immediate: true
+  });
+  return {
+    computedScrollThreshold,
+    currentScroll,
+    currentThreshold,
+    isScrollActive,
+    // required only for testing
+    // probably can be removed
+    // later (2 chars chlng)
+    isScrollingUp,
+    savedScroll
+  };
+}
+
+// Utilities
+
 // Composables
 function useSsrBoot() {
   const isBooted = ref(false);
@@ -3271,13 +3359,7 @@ function useSsrBoot() {
 const VAppBar = genericComponent()({
   name: 'VAppBar',
   props: {
-    // TODO: Implement scrolling techniques
-    // hideOnScroll: Boolean
-    // invertedScroll: Boolean
-    // collapseOnScroll: Boolean
-    // elevateOnScroll: Boolean
-    // shrinkOnScroll: Boolean
-    // fadeImageOnScroll: Boolean
+    scrollBehavior: String,
     modelValue: {
       type: Boolean,
       default: true
@@ -3289,6 +3371,7 @@ const VAppBar = genericComponent()({
     },
     ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
+    ...makeScrollProps(),
     height: {
       type: [Number, String],
       default: 64
@@ -3303,11 +3386,63 @@ const VAppBar = genericComponent()({
     } = _ref;
     const vToolbarRef = ref();
     const isActive = useProxiedModel(props, 'modelValue');
+    const scrollBehavior = computed(() => {
+      const behavior = new Set(props.scrollBehavior?.split(' ') ?? []);
+      return {
+        hide: behavior.has('hide'),
+        // fullyHide: behavior.has('fully-hide'),
+        inverted: behavior.has('inverted'),
+        collapse: behavior.has('collapse'),
+        elevate: behavior.has('elevate'),
+        fadeImage: behavior.has('fade-image')
+        // shrink: behavior.has('shrink'),
+      };
+    });
+
+    const canScroll = computed(() => {
+      const behavior = scrollBehavior.value;
+      return behavior.hide ||
+      // behavior.fullyHide ||
+      behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage ||
+      // behavior.shrink ||
+      !isActive.value;
+    });
+    const {
+      currentScroll,
+      currentThreshold,
+      computedScrollThreshold,
+      isScrollingUp
+    } = useScroll(props, {
+      canScroll
+    });
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
+    const scrollRatio = computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+    const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
+      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
       const height = vToolbarRef.value?.contentHeight ?? 0;
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
+    function setActive() {
+      const val = currentScroll.value;
+      if (scrollBehavior.value.hide) {
+        if (scrollBehavior.value.inverted) {
+          isActive.value = val > computedScrollThreshold.value;
+        } else {
+          isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+        }
+      } else if (scrollBehavior.value.inverted) {
+        isActive.value = currentScroll.value === 0;
+      } else {
+        isActive.value = true;
+      }
+    }
+    watch(currentScroll, setActive, {
+      immediate: true
+    });
+    watch(scrollBehavior, setActive);
     const {
       ssrBootStyles
     } = useSsrBoot();
@@ -3318,7 +3453,7 @@ const VAppBar = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'location'),
       layoutSize: height,
-      elementSize: height,
+      elementSize: ref(undefined),
       active: isActive,
       absolute: toRef(props, 'absolute')
     });
@@ -3331,10 +3466,14 @@ const VAppBar = genericComponent()({
         }],
         "style": {
           ...layoutItemStyles.value,
+          '--v-toolbar-image-opacity': opacity.value,
           height: undefined,
           ...ssrBootStyles.value
         }
-      }, toolbarProps), slots);
+      }, toolbarProps, {
+        "collapse": isCollapsed.value,
+        "flat": isFlat.value
+      }), slots);
     });
     return {};
   }
@@ -5292,7 +5431,8 @@ const VFieldLabel = genericComponent()({
 
 // Composables
 const makeFocusProps = propsFactory({
-  focused: Boolean
+  focused: Boolean,
+  'onUpdate:focused': EventProp()
 }, 'focus');
 function useFocus(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
@@ -5887,6 +6027,8 @@ const makeVInputProps = propsFactory({
   appendIcon: IconValue,
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
+  hint: String,
+  persistentHint: Boolean,
   messages: {
     type: [Array, String],
     default: () => []
@@ -5950,10 +6092,19 @@ const VInput = genericComponent()({
       resetValidation,
       validate
     }));
+    const messages = computed(() => {
+      if (errorMessages.value.length > 0) {
+        return errorMessages.value;
+      } else if (props.hint && (props.persistentHint || props.focused)) {
+        return props.hint;
+      } else {
+        return props.messages;
+      }
+    });
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.prependIcon);
       const hasAppend = !!(slots.append || props.appendIcon);
-      const hasMessages = !!(props.messages?.length || errorMessages.value.length);
+      const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return createVNode("div", {
         "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
@@ -5976,7 +6127,7 @@ const VInput = genericComponent()({
       }, [createVNode(VMessages, {
         "id": messagesId.value,
         "active": hasMessages,
-        "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
+        "messages": messages.value
       }, {
         message: slots.message
       }), slots.details?.(slotProps.value)])]);
@@ -5988,10 +6139,6 @@ const VInput = genericComponent()({
     };
   }
 });
-function filterInputProps(props) {
-  const keys = Object.keys(VInput.props).filter(k => !isOn(k));
-  return pick(props, keys);
-}
 
 const VCounter = genericComponent()({
   name: 'VCounter',
@@ -6117,8 +6264,6 @@ const makeVTextFieldProps = propsFactory({
   autofocus: Boolean,
   counter: [Boolean, Number, String],
   counterValue: Function,
-  hint: String,
-  persistentHint: Boolean,
   prefix: String,
   placeholder: String,
   persistentPlaceholder: Boolean,
@@ -6173,9 +6318,6 @@ const VTextField = genericComponent()({
     const vFieldRef = ref();
     const inputRef = ref();
     const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
-    const messages = computed(() => {
-      return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-    });
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -6218,7 +6360,7 @@ const VTextField = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -6228,12 +6370,9 @@ const VTextField = genericComponent()({
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }],
-        "onClick:prepend": props['onClick:prepend'],
-        "onClick:append": props['onClick:append']
+        }]
       }, rootAttrs, inputProps, {
-        "focused": isFocused.value,
-        "messages": messages.value
+        "focused": isFocused.value
       }), {
         ...slots,
         default: _ref2 => {
@@ -6642,7 +6781,7 @@ const VCheckbox = genericComponent()({
     const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-      const [inputProps, _1] = filterInputProps(props);
+      const [inputProps, _1] = VInput.filterProps(props);
       const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
         "class": "v-checkbox"
@@ -8054,7 +8193,12 @@ function transformItems$1(props, items) {
 function useItems(props) {
   const items = computed(() => transformItems$1(props, props.items));
   function transformIn(value) {
-    return value.map(item => transformItem$1(props, item));
+    return value.map(v => {
+      const existingItem = items.value.find(item => deepEqual(v, item.value));
+      // Nullish existingItem means value is a custom input value from combobox
+      // In this case, use transformItem to create an InternalItem based on value
+      return existingItem ?? transformItem$1(props, v);
+    });
   }
   function transformOut(value) {
     return value.map(_ref => {
@@ -8732,7 +8876,7 @@ function staticLocationStrategy() {
 }
 
 /** Get size of element ignoring max-width/max-height */
-function getIntrinsicSize(el) {
+function getIntrinsicSize(el, isRtl) {
   // const scrollables = new Map<Element, [number, number]>()
   // el.querySelectorAll('*').forEach(el => {
   //   const x = el.scrollLeft
@@ -8749,7 +8893,11 @@ function getIntrinsicSize(el) {
 
   /* eslint-disable-next-line sonarjs/prefer-immediate-return */
   const contentBox = nullifyTransforms(el);
-  contentBox.x -= parseFloat(el.style.left || 0);
+  if (isRtl) {
+    contentBox.x += parseFloat(el.style.right || 0);
+  } else {
+    contentBox.x -= parseFloat(el.style.left || 0);
+  }
   contentBox.y -= parseFloat(el.style.top || 0);
 
   // el.style.maxWidth = initialMaxWidth
@@ -8830,7 +8978,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
     });
     if (!data.activatorEl.value || !data.contentEl.value) return;
     const targetBox = data.activatorEl.value.getBoundingClientRect();
-    const contentBox = getIntrinsicSize(data.contentEl.value);
+    const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
     const scrollParents = getScrollParents(data.contentEl.value);
     const viewportMargin = 12;
     if (!scrollParents.length) {
@@ -9006,7 +9154,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
       transformOrigin: `${placement.origin.side} ${placement.origin.align}`,
       // transform: `translate(${pixelRound(x)}px, ${pixelRound(y)}px)`,
       top: convertToUnit(pixelRound(y)),
-      left: convertToUnit(pixelRound(x)),
+      left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),
+      right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,
       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)))
@@ -9901,6 +10050,7 @@ const VSelect = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -10017,6 +10167,9 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onFocusin(e) {
+      isFocused.value = true;
+    }
     function onFocusout(e) {
       if (e.relatedTarget == null) {
         vTextFieldRef.value?.focus();
@@ -10071,6 +10224,7 @@ const VSelect = genericComponent()({
             "selected": selected.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
+            "onFocusin": onFocusin,
             "onFocusout": onFocusout
           }, {
             default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
@@ -10149,6 +10303,7 @@ const VSelect = genericComponent()({
       });
     });
     return forwardRefs({
+      isFocused,
       menu,
       select
     }, vTextFieldRef);
@@ -10287,6 +10442,7 @@ const VAutocomplete = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:search': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
@@ -10310,11 +10466,17 @@ const VAutocomplete = genericComponent()({
         _menu.value = v;
       }
     });
+    const selectionIndex = ref(-1);
+    const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
       transformIn,
       transformOut
     } = useItems(props);
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(color);
     const search = useProxiedModel(props, 'search', '');
     const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
       const transformed = transformOut(v);
@@ -10337,6 +10499,7 @@ const VAutocomplete = genericComponent()({
       return filteredItems.value;
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
+    const selection = computed(() => selections.value[selectionIndex.value]);
     const listRef = ref();
     function onClear(e) {
       if (props.openOnClear) {
@@ -10350,7 +10513,9 @@ const VAutocomplete = genericComponent()({
     }
     function onKeydown(e) {
       if (props.readonly || form?.isReadonly.value) return;
-      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+      const selectionStart = vTextFieldRef.value.selectionStart;
+      const length = selected.value.length;
+      if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
       }
       if (['Enter', 'ArrowDown'].includes(e.key)) {
@@ -10367,6 +10532,38 @@ const VAutocomplete = genericComponent()({
       } else if (e.key === 'ArrowUp') {
         listRef.value?.focus('prev');
       }
+      if (!props.multiple) return;
+      if (['Backspace', 'Delete'].includes(e.key)) {
+        if (selectionIndex.value < 0) {
+          if (e.key === 'Backspace' && !search.value) {
+            selectionIndex.value = length - 1;
+          }
+          return;
+        }
+        const originalSelectionIndex = selectionIndex.value;
+        if (selection.value) select(selection.value);
+        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+      }
+      if (e.key === 'ArrowLeft') {
+        if (selectionIndex.value < 0 && selectionStart > 0) return;
+        const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
+        if (selections.value[prev]) {
+          selectionIndex.value = prev;
+        } else {
+          selectionIndex.value = -1;
+          vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length);
+        }
+      }
+      if (e.key === 'ArrowRight') {
+        if (selectionIndex.value < 0) return;
+        const next = selectionIndex.value + 1;
+        if (selections.value[next]) {
+          selectionIndex.value = next;
+        } else {
+          selectionIndex.value = -1;
+          vTextFieldRef.value.setSelectionRange(0, 0);
+        }
+      }
     }
     function onInput(e) {
       search.value = e.target.value;
@@ -10388,7 +10585,6 @@ const VAutocomplete = genericComponent()({
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
         if (index === -1) {
           model.value = [...model.value, item];
-          search.value = '';
         } else {
           const value = [...model.value];
           value.splice(index, 1);
@@ -10433,12 +10629,15 @@ const VAutocomplete = genericComponent()({
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
         "dirty": isDirty,
         "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
+          'v-autocomplete--selecting-index': selectionIndex.value > -1,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-autocomplete--selection-slot': !!slots.selection
         }],
@@ -10447,8 +10646,6 @@ const VAutocomplete = genericComponent()({
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
-        "onFocus": () => isFocused.value = true,
-        "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }), {
         ...slots,
@@ -10513,7 +10710,8 @@ const VAutocomplete = genericComponent()({
           };
           return createVNode("div", {
             "key": item.value,
-            "class": "v-autocomplete__selection"
+            "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
+            "style": index === selectionIndex.value ? textColorStyles.value : {}
           }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
@@ -12408,11 +12606,36 @@ const makeSliderProps = propsFactory({
     elevation: 2
   })
 }, 'slider');
+const useSteps = props => {
+  const min = computed(() => parseFloat(props.min));
+  const max = computed(() => parseFloat(props.max));
+  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+  const decimals = computed(() => {
+    const trimmedStep = step.value.toString().trim();
+    return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
+  });
+  function roundValue(value) {
+    if (step.value <= 0) return value;
+    const clamped = clamp(value, min.value, max.value);
+    const offset = min.value % step.value;
+    const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
+    return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
+  }
+  return {
+    min,
+    max,
+    step,
+    decimals,
+    roundValue
+  };
+};
 const useSlider = _ref => {
   let {
     props,
-    handleSliderMouseUp,
-    handleMouseMove,
+    steps,
+    onSliderStart,
+    onSliderMove,
+    onSliderEnd,
     getActiveThumb
   } = _ref;
   const {
@@ -12426,10 +12649,13 @@ const useSlider = _ref => {
     }
     return hd;
   });
-  const min = computed(() => parseFloat(props.min));
-  const max = computed(() => parseFloat(props.max));
-  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
-  const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
+  const {
+    min,
+    max,
+    step,
+    decimals,
+    roundValue
+  } = steps;
   const thumbSize = computed(() => parseInt(props.thumbSize, 10));
   const tickSize = computed(() => parseInt(props.tickSize, 10));
   const trackSize = computed(() => parseInt(props.trackSize, 10));
@@ -12443,13 +12669,6 @@ const useSlider = _ref => {
   const startOffset = ref(0);
   const trackContainerRef = ref();
   const activeThumbRef = ref();
-  function roundValue(value) {
-    if (step.value <= 0) return value;
-    const clamped = clamp(value, min.value, max.value);
-    const offset = min.value % step.value;
-    const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
-    return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
-  }
   function parseMouseMove(e) {
     const vertical = props.direction === 'vertical';
     const start = vertical ? 'top' : 'left';
@@ -12466,14 +12685,11 @@ const useSlider = _ref => {
     if (vertical || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos;
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
-  let thumbMoved = false;
   const handleStop = e => {
-    if (!thumbMoved) {
-      startOffset.value = 0;
-      handleSliderMouseUp(parseMouseMove(e));
-    }
+    onSliderEnd({
+      value: parseMouseMove(e)
+    });
     mousePressed.value = false;
-    thumbMoved = false;
     startOffset.value = 0;
   };
   const handleStart = e => {
@@ -12482,20 +12698,25 @@ const useSlider = _ref => {
     activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
-      thumbMoved = true;
       startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
-      handleMouseMove(parseMouseMove(e));
+      onSliderMove({
+        value: parseMouseMove(e)
+      });
     }
+    onSliderStart({
+      value: parseMouseMove(e)
+    });
   };
   const moveListenerOptions = {
     passive: true,
     capture: true
   };
   function onMouseMove(e) {
-    thumbMoved = true;
-    handleMouseMove(parseMouseMove(e));
+    onSliderMove({
+      value: parseMouseMove(e)
+    });
   }
   function onSliderMouseUp(e) {
     e.stopPropagation();
@@ -12871,13 +13092,21 @@ const VSlider = genericComponent()({
   },
   emits: {
     'update:focused': value => true,
-    'update:modelValue': v => true
+    'update:modelValue': v => true,
+    start: value => true,
+    end: value => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const thumbContainerRef = ref();
+    const steps = useSteps(props);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
+      const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
+      return steps.roundValue(value);
+    });
     const {
       min,
       max,
@@ -12891,16 +13120,26 @@ const VSlider = genericComponent()({
       readonly
     } = useSlider({
       props,
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleSliderMouseUp: newValue => model.value = roundValue(newValue),
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      handleMouseMove: newValue => model.value = roundValue(newValue),
+      steps,
+      onSliderStart: () => {
+        emit('start', model.value);
+      },
+      onSliderEnd: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        const roundedValue = roundValue(value);
+        model.value = roundedValue;
+        emit('end', roundedValue);
+      },
+      onSliderMove: _ref3 => {
+        let {
+          value
+        } = _ref3;
+        return model.value = roundValue(value);
+      },
       getActiveThumb: () => thumbContainerRef.value?.$el
     });
-    const model = useProxiedModel(props, 'modelValue', undefined, v => {
-      const value = typeof v === 'string' ? parseFloat(v) : v == null ? min.value : v;
-      return roundValue(value);
-    });
     const {
       isFocused,
       focus,
@@ -12908,7 +13147,7 @@ const VSlider = genericComponent()({
     } = useFocus(props);
     const trackStop = computed(() => position(model.value));
     useRender(() => {
-      const [inputProps, _] = filterInputProps(props);
+      const [inputProps, _] = VInput.filterProps(props);
       const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', {
@@ -12926,11 +13165,11 @@ const VSlider = genericComponent()({
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-        default: _ref2 => {
+        default: _ref4 => {
           let {
             id,
             messagesId
-          } = _ref2;
+          } = _ref4;
           return createVNode("div", {
             "class": "v-slider__container",
             "onMousedown": !readonly.value ? onSliderMousedown : undefined,
@@ -13572,6 +13811,7 @@ const VCombobox = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:search': val => true,
     'update:menu': val => true
@@ -13709,8 +13949,9 @@ const VCombobox = genericComponent()({
           }
           return;
         }
-        select(selection.value);
-        nextTick(() => !selection.value && (selectionIndex.value = length - 2));
+        const originalSelectionIndex = selectionIndex.value;
+        if (selection.value) select(selection.value);
+        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (e.key === 'ArrowLeft') {
         if (selectionIndex.value < 0 && selectionStart > 0) return;
@@ -13795,6 +14036,8 @@ const VCombobox = genericComponent()({
         "onUpdate:modelValue": [$event => search.value = $event, v => {
           if (v == null) model.value = [];
         }],
+        "focused": isFocused.value,
+        "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
         "dirty": isDirty,
         "class": ['v-combobox', {
@@ -13808,8 +14051,6 @@ const VCombobox = genericComponent()({
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
         "onMousedown:control": onMousedownControl,
-        "onFocus": () => isFocused.value = true,
-        "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }), {
         ...slots,
@@ -14261,8 +14502,6 @@ const VFileInput = genericComponent()({
       default: '$vuetify.fileInput.counter'
     },
     multiple: Boolean,
-    hint: String,
-    persistentHint: Boolean,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -14287,6 +14526,7 @@ const VFileInput = genericComponent()({
   emits: {
     'click:control': e => true,
     'mousedown:control': e => true,
+    'update:focused': focused => true,
     'update:modelValue': files => true
   },
   setup(props, _ref) {
@@ -14299,6 +14539,11 @@ const VFileInput = genericComponent()({
       t
     } = useLocale();
     const model = useProxiedModel(props, 'modelValue');
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined);
     const totalBytes = computed(() => (model.value ?? []).reduce((bytes, _ref2) => {
       let {
@@ -14320,21 +14565,14 @@ const VFileInput = genericComponent()({
     });
     const vInputRef = ref();
     const vFieldRef = ref();
-    const isFocused = ref(false);
     const inputRef = ref();
-    const messages = computed(() => {
-      return props.messages.length ? props.messages : props.persistentHint ? props.hint : '';
-    });
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
       }
-      if (!isFocused.value) {
-        isFocused.value = true;
-      }
+      if (!isFocused.value) focus();
     }
     function onClickPrepend(e) {
-      callEvent(props['onClick:prepend'], e);
       onControlClick(e);
     }
     function onControlMousedown(e) {
@@ -14365,18 +14603,16 @@ const VFileInput = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": "v-file-input",
-        "onClick:prepend": onClickPrepend,
-        "onClick:append": props['onClick:append']
+        "onClick:prepend": onClickPrepend
       }, rootAttrs, inputProps, {
-        "focused": isFocused.value,
-        "messages": messages.value
+        "focused": isFocused.value
       }), {
         ...slots,
         default: _ref3 => {
@@ -14428,7 +14664,7 @@ const VFileInput = genericComponent()({
                   model.value = [...(target.files ?? [])];
                 },
                 "onFocus": onFocus,
-                "onBlur": () => isFocused.value = false
+                "onBlur": blur
               }, slotProps, inputAttrs), null), createVNode("div", {
                 "class": fieldClass
               }, [!!model.value?.length && (slots.selection ? slots.selection({
@@ -15119,6 +15355,432 @@ const VMain = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
+function getWeekArray(date) {
+  let currentWeek = [];
+  const weeks = [];
+  const firstDayOfMonth = startOfMonth(date);
+  const lastDayOfMonth = endOfMonth(date);
+  for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
+    currentWeek.push(null);
+  }
+  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
+    const day = new Date(date.getFullYear(), date.getMonth(), i);
+
+    // Add the day to the current week
+    currentWeek.push(day);
+
+    // If the current week has 7 days, add it to the weeks array and start a new week
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  for (let i = currentWeek.length; i < 7; i++) {
+    currentWeek.push(null);
+  }
+  weeks.push(currentWeek);
+  return weeks;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function date(value) {
+  if (value == null) return null;
+  if (value instanceof Date) return value;
+  if (typeof value === 'string') {
+    const parsed = Date.parse(value);
+    if (!isNaN(parsed)) return new Date(parsed);
+  }
+  return null;
+}
+const firstDay = {
+  '001': 1,
+  AD: 1,
+  AE: 6,
+  AF: 6,
+  AG: 0,
+  AI: 1,
+  AL: 1,
+  AM: 1,
+  AN: 1,
+  AR: 1,
+  AS: 0,
+  AT: 1,
+  AU: 0,
+  AX: 1,
+  AZ: 1,
+  BA: 1,
+  BD: 0,
+  BE: 1,
+  BG: 1,
+  BH: 6,
+  BM: 1,
+  BN: 1,
+  BR: 0,
+  BS: 0,
+  BT: 0,
+  BW: 0,
+  BY: 1,
+  BZ: 0,
+  CA: 0,
+  CH: 1,
+  CL: 1,
+  CM: 1,
+  CN: 0,
+  CO: 0,
+  CR: 1,
+  CY: 1,
+  CZ: 1,
+  DE: 1,
+  DJ: 6,
+  DK: 1,
+  DM: 0,
+  DO: 0,
+  DZ: 6,
+  EC: 1,
+  EE: 1,
+  EG: 6,
+  ES: 1,
+  ET: 0,
+  FI: 1,
+  FJ: 1,
+  FO: 1,
+  FR: 1,
+  GB: 1,
+  'GB-alt-variant': 0,
+  GE: 1,
+  GF: 1,
+  GP: 1,
+  GR: 1,
+  GT: 0,
+  GU: 0,
+  HK: 0,
+  HN: 0,
+  HR: 1,
+  HU: 1,
+  ID: 0,
+  IE: 1,
+  IL: 0,
+  IN: 0,
+  IQ: 6,
+  IR: 6,
+  IS: 1,
+  IT: 1,
+  JM: 0,
+  JO: 6,
+  JP: 0,
+  KE: 0,
+  KG: 1,
+  KH: 0,
+  KR: 0,
+  KW: 6,
+  KZ: 1,
+  LA: 0,
+  LB: 1,
+  LI: 1,
+  LK: 1,
+  LT: 1,
+  LU: 1,
+  LV: 1,
+  LY: 6,
+  MC: 1,
+  MD: 1,
+  ME: 1,
+  MH: 0,
+  MK: 1,
+  MM: 0,
+  MN: 1,
+  MO: 0,
+  MQ: 1,
+  MT: 0,
+  MV: 5,
+  MX: 0,
+  MY: 1,
+  MZ: 0,
+  NI: 0,
+  NL: 1,
+  NO: 1,
+  NP: 0,
+  NZ: 1,
+  OM: 6,
+  PA: 0,
+  PE: 0,
+  PH: 0,
+  PK: 0,
+  PL: 1,
+  PR: 0,
+  PT: 0,
+  PY: 0,
+  QA: 6,
+  RE: 1,
+  RO: 1,
+  RS: 1,
+  RU: 1,
+  SA: 0,
+  SD: 6,
+  SE: 1,
+  SG: 0,
+  SI: 1,
+  SK: 1,
+  SM: 1,
+  SV: 0,
+  SY: 6,
+  TH: 0,
+  TJ: 1,
+  TM: 1,
+  TR: 1,
+  TT: 0,
+  TW: 0,
+  UA: 1,
+  UM: 0,
+  US: 0,
+  UY: 1,
+  UZ: 1,
+  VA: 1,
+  VE: 0,
+  VI: 0,
+  VN: 1,
+  WS: 0,
+  XK: 1,
+  YE: 0,
+  ZA: 0,
+  ZW: 0
+};
+const sundayJanuarySecond2000 = new Date(2000, 0, 2);
+function getWeekdays(locale) {
+  const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()];
+  return createRange(7).map(i => {
+    const weekday = new Date(sundayJanuarySecond2000);
+    weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
+    return new Intl.DateTimeFormat(locale, {
+      weekday: 'long'
+    }).format(weekday);
+  });
+}
+function format(value, formatString, locale) {
+  const date = new Date(value);
+  let options = {};
+  switch (formatString) {
+    case 'fullDateWithWeekday':
+      options = {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      };
+      break;
+    case 'normalDateWithWeekday':
+      options = {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      };
+      break;
+    case 'keyboardDate':
+      options = {};
+      break;
+    case 'monthAndDate':
+      options = {
+        month: 'long',
+        day: 'numeric'
+      };
+      break;
+    case 'monthAndYear':
+      options = {
+        month: 'long',
+        year: 'numeric'
+      };
+      break;
+    default:
+      options = {
+        timeZone: 'UTC',
+        timeZoneName: 'short'
+      };
+  }
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}
+function addDays(date, amount) {
+  const d = new Date(date);
+  d.setDate(d.getDate() + amount);
+  return d;
+}
+function addMonths(date, amount) {
+  const d = new Date(date);
+  d.setMonth(d.getMonth() + amount);
+  return d;
+}
+function getYear(date) {
+  return date.getFullYear();
+}
+function getMonth(date) {
+  return date.getMonth();
+}
+function startOfYear(date) {
+  return new Date(date.getFullYear(), 0, 1);
+}
+function endOfYear(date) {
+  return new Date(date.getFullYear(), 11, 31);
+}
+function getMondayOfFirstWeekOfYear(year) {
+  return new Date(year, 0, 1);
+}
+
+// https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
+function getWeek(date) {
+  let year = date.getFullYear();
+  let d1w1 = getMondayOfFirstWeekOfYear(year);
+  if (date < d1w1) {
+    year = year - 1;
+    d1w1 = getMondayOfFirstWeekOfYear(year);
+  } else {
+    const tv = getMondayOfFirstWeekOfYear(year + 1);
+    if (date >= tv) {
+      year = year + 1;
+      d1w1 = tv;
+    }
+  }
+  const diffTime = Math.abs(date.getTime() - d1w1.getTime());
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return Math.floor(diffDays / 7) + 1;
+}
+function isWithinRange(date, range) {
+  return isAfter(date, range[0]) && isBefore(date, range[1]);
+}
+function isValid(date) {
+  const d = new Date(date);
+  return d instanceof Date && !isNaN(d.getTime());
+}
+function isAfter(date, comparing) {
+  return date.getTime() > comparing.getTime();
+}
+function isBefore(date, comparing) {
+  return date.getTime() < comparing.getTime();
+}
+function isEqual(date, comparing) {
+  return date.getTime() === comparing.getTime();
+}
+function isSameDay(date, comparing) {
+  return date.getDate() === comparing.getDate() && date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+}
+function isSameMonth(date, comparing) {
+  return date.getMonth() === comparing.getMonth() && date.getFullYear() === comparing.getFullYear();
+}
+function getDiff(date, comparing, unit) {
+  const d = new Date(date);
+  const c = new Date(comparing);
+  if (unit === 'month') {
+    return d.getMonth() - c.getMonth() + (d.getFullYear() - c.getFullYear()) * 12;
+  }
+  return Math.floor((d.getTime() - c.getTime()) / (1000 * 60 * 60 * 24));
+}
+function setYear(date, year) {
+  const d = new Date(date);
+  d.setFullYear(year);
+  return d;
+}
+class VuetifyDateAdapter {
+  constructor() {
+    let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'en';
+    this.locale = locale;
+  }
+  date(value) {
+    return date(value);
+  }
+  addDays(date, amount) {
+    return addDays(date, amount);
+  }
+  addMonths(date, amount) {
+    return addMonths(date, amount);
+  }
+  getWeekArray(date) {
+    return getWeekArray(date);
+  }
+  startOfMonth(date) {
+    return startOfMonth(date);
+  }
+  endOfMonth(date) {
+    return endOfMonth(date);
+  }
+  format(date, formatString) {
+    return format(date, formatString, this.locale);
+  }
+  isEqual(date, comparing) {
+    return isEqual(date, comparing);
+  }
+  isValid(date) {
+    return isValid(date);
+  }
+  isWithinRange(date, range) {
+    return isWithinRange(date, range);
+  }
+  isAfter(date, comparing) {
+    return isAfter(date, comparing);
+  }
+  isSameDay(date, comparing) {
+    return isSameDay(date, comparing);
+  }
+  isSameMonth(date, comparing) {
+    return isSameMonth(date, comparing);
+  }
+  setYear(date, year) {
+    return setYear(date, year);
+  }
+  getDiff(date, comparing, unit) {
+    return getDiff(date, comparing, unit);
+  }
+  getWeek(date) {
+    return getWeek(date);
+  }
+  getWeekdays() {
+    return getWeekdays(this.locale);
+  }
+  getYear(date) {
+    return getYear(date);
+  }
+  getMonth(date) {
+    return getMonth(date);
+  }
+  startOfYear(date) {
+    return startOfYear(date);
+  }
+  endOfYear(date) {
+    return endOfYear(date);
+  }
+}
+
+// Composables
+
+// Types
+
+const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
+function createDate(options) {
+  return options ?? {
+    adapter: VuetifyDateAdapter
+  };
+}
+function useDate(props) {
+  const date = inject$1(DateAdapterSymbol);
+  const locale = useLocale();
+  if (!date) throw new Error('[Vuetify] Could not find injected date');
+
+  // eslint-disable-next-line new-cap
+  const instance = new date.adapter(locale.current.value);
+  watch(locale.current, val => {
+    instance.locale = val;
+  }, {
+    immediate: true
+  });
+  return instance;
+}
+
 function useSticky(_ref) {
   let {
     rootEl,
@@ -16123,7 +16785,7 @@ const VRadioGroup = genericComponent()({
     const model = useProxiedModel(props, 'modelValue');
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-      const [inputProps, _1] = filterInputProps(props);
+      const [inputProps, _1] = VInput.filterProps(props);
       const [controlProps, _2] = VSelectionControl.filterProps(props);
       const label = slots.label ? slots.label({
         label: props.label,
@@ -16188,11 +16850,14 @@ const VRangeSlider = genericComponent()({
   },
   emits: {
     'update:focused': value => true,
-    'update:modelValue': value => true
+    'update:modelValue': value => true,
+    end: value => true,
+    start: value => true
   },
   setup(props, _ref) {
     let {
-      slots
+      slots,
+      emit
     } = _ref;
     const startThumbRef = ref();
     const stopThumbRef = ref();
@@ -16205,6 +16870,11 @@ const VRangeSlider = genericComponent()({
       const b = Math.abs(stopOffset);
       return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
     }
+    const steps = useSteps(props);
+    const model = useProxiedModel(props, 'modelValue', undefined, arr => {
+      if (!arr?.length) return [0, 0];
+      return arr.map(value => steps.roundValue(value));
+    });
     const {
       activeThumbRef,
       hasLabels,
@@ -16214,34 +16884,37 @@ const VRangeSlider = genericComponent()({
       onSliderMousedown,
       onSliderTouchstart,
       position,
-      roundValue,
       trackContainerRef
     } = useSlider({
-      /* eslint-disable @typescript-eslint/no-use-before-define */
       props,
-      handleSliderMouseUp: newValue => {
-        model.value = activeThumbRef.value === startThumbRef.value?.$el ? [newValue, model.value[1]] : [model.value[0], newValue];
+      steps,
+      onSliderStart: () => {
+        emit('start', model.value);
       },
-      handleMouseMove: newValue => {
+      onSliderEnd: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        const newValue = activeThumbRef.value === startThumbRef.value?.$el ? [value, model.value[1]] : [model.value[0], value];
+        model.value = newValue;
+        emit('end', newValue);
+      },
+      onSliderMove: _ref3 => {
+        let {
+          value
+        } = _ref3;
         const [start, stop] = model.value;
         if (!props.strict && start === stop && start !== min.value) {
-          activeThumbRef.value = newValue > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
+          activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el;
           activeThumbRef.value?.focus();
         }
         if (activeThumbRef.value === startThumbRef.value?.$el) {
-          model.value = [Math.min(newValue, stop), stop];
+          model.value = [Math.min(value, stop), stop];
         } else {
-          model.value = [start, Math.max(start, newValue)];
+          model.value = [start, Math.max(start, value)];
         }
       },
       getActiveThumb
-      /* eslint-enable @typescript-eslint/no-use-before-define */
-    });
-
-    const model = useProxiedModel(props, 'modelValue', undefined, arr => {
-      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-      if (!arr || !arr.length) return [0, 0];
-      return arr.map(value => roundValue(value));
     });
     const {
       isFocused,
@@ -16251,7 +16924,7 @@ const VRangeSlider = genericComponent()({
     const trackStart = computed(() => position(model.value[0]));
     const trackStop = computed(() => position(model.value[1]));
     useRender(() => {
-      const [inputProps, _] = filterInputProps(props);
+      const [inputProps, _] = VInput.filterProps(props);
       const hasPrepend = !!(props.label || slots.label || slots.prepend);
       return createVNode(VInput, mergeProps({
         "class": ['v-slider', 'v-range-slider', {
@@ -16269,11 +16942,11 @@ const VRangeSlider = genericComponent()({
           "class": "v-slider__label",
           "text": props.label
         }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
-        default: _ref2 => {
+        default: _ref4 => {
           let {
             id,
             messagesId
-          } = _ref2;
+          } = _ref4;
           return createVNode("div", {
             "class": "v-slider__container",
             "onMousedown": onSliderMousedown,
@@ -17096,10 +17769,12 @@ const VSwitch = genericComponent()({
     }
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
-      const [inputProps, _1] = filterInputProps(props);
+      const [inputProps, _1] = VInput.filterProps(props);
       const [controlProps, _2] = VSelectionControl.filterProps(props);
       const control = ref();
-      function onClick() {
+      function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         control.value?.input?.click();
       }
       return createVNode(VInput, mergeProps({
@@ -17460,8 +18135,6 @@ const VTextarea = genericComponent()({
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -17516,9 +18189,6 @@ const VTextarea = genericComponent()({
     const controlHeight = ref('');
     const textareaRef = ref();
     const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
-    const messages = computed(() => {
-      return props.messages.length ? props.messages : isFocused.value || props.persistentHint ? props.hint : '';
-    });
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus();
@@ -17590,7 +18260,7 @@ const VTextarea = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -17604,12 +18274,9 @@ const VTextarea = genericComponent()({
           'v-textarea--auto-grow': props.autoGrow,
           'v-textarea--no-resize': props.noResize || props.autoGrow,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
-        }],
-        "onClick:prepend": props['onClick:prepend'],
-        "onClick:append": props['onClick:append']
+        }]
       }, rootAttrs, inputProps, {
-        "focused": isFocused.value,
-        "messages": messages.value
+        "focused": isFocused.value
       }), {
         ...slots,
         default: _ref2 => {
@@ -18491,6 +19158,7 @@ function createVuetify$1() {
   const theme = createTheme(options.theme);
   const icons = createIcons(options.icons);
   const locale = createLocale(options.locale);
+  const date = createDate(options.date);
   const install = app => {
     for (const key in directives) {
       app.directive(key, directives[key]);
@@ -18511,6 +19179,7 @@ function createVuetify$1() {
     app.provide(ThemeSymbol, theme);
     app.provide(IconSymbol, icons);
     app.provide(LocaleSymbol, locale);
+    app.provide(DateAdapterSymbol, date);
     if (IN_BROWSER && options.ssr) {
       if (app.$nuxt) {
         app.$nuxt.hook('app:suspense:resolve', () => {
@@ -18538,7 +19207,8 @@ function createVuetify$1() {
               display: inject.call(this, DisplaySymbol),
               theme: inject.call(this, ThemeSymbol),
               icons: inject.call(this, IconSymbol),
-              locale: inject.call(this, LocaleSymbol)
+              locale: inject.call(this, LocaleSymbol),
+              date: inject.call(this, DateAdapterSymbol)
             });
           }
         }
@@ -18551,10 +19221,11 @@ function createVuetify$1() {
     display,
     theme,
     icons,
-    locale
+    locale,
+    date
   };
 }
-const version$1 = "4.0.0-dev-20230419.0";
+const version$1 = "4.0.0-dev-20230421.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18574,8 +19245,8 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "4.0.0-dev-20230419.0";
+const version = "4.0.0-dev-20230421.0";
 createVuetify.version = version;
 
-export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { components, createVuetify, directives, useDate, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify.esm.js.map