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

package/dist/vuetify-labs.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));
@@ -3253,6 +3249,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);
@@ -3275,13 +3363,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
@@ -3293,6 +3375,7 @@ const VAppBar = genericComponent()({
     },
     ...makeVToolbarProps(),
     ...makeLayoutItemProps(),
+    ...makeScrollProps(),
     height: {
       type: [Number, String],
       default: 64
@@ -3307,11 +3390,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();
@@ -3322,7 +3457,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')
     });
@@ -3335,10 +3470,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 {};
   }
@@ -5296,7 +5435,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();
@@ -5891,6 +6031,8 @@ const makeVInputProps = propsFactory({
   appendIcon: IconValue,
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
+  hint: String,
+  persistentHint: Boolean,
   messages: {
     type: [Array, String],
     default: () => []
@@ -5954,10 +6096,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]
@@ -5980,7 +6131,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)])]);
@@ -5992,10 +6143,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',
@@ -6121,8 +6268,6 @@ const makeVTextFieldProps = propsFactory({
   autofocus: Boolean,
   counter: [Boolean, Number, String],
   counterValue: Function,
-  hint: String,
-  persistentHint: Boolean,
   prefix: String,
   placeholder: String,
   persistentPlaceholder: Boolean,
@@ -6177,9 +6322,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();
@@ -6222,7 +6364,7 @@ const VTextField = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -6232,12 +6374,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 => {
@@ -6646,7 +6785,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"
@@ -8058,7 +8197,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 => {
@@ -8736,7 +8880,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
@@ -8753,7 +8897,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
@@ -8834,7 +8982,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) {
@@ -9010,7 +9158,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)))
@@ -9905,6 +10054,7 @@ const VSelect = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:menu': val => true
   },
@@ -10021,6 +10171,9 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onFocusin(e) {
+      isFocused.value = true;
+    }
     function onFocusout(e) {
       if (e.relatedTarget == null) {
         vTextFieldRef.value?.focus();
@@ -10075,6 +10228,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, {
@@ -10153,6 +10307,7 @@ const VSelect = genericComponent()({
       });
     });
     return forwardRefs({
+      isFocused,
       menu,
       select
     }, vTextFieldRef);
@@ -10291,6 +10446,7 @@ const VAutocomplete = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:search': val => true,
     'update:modelValue': val => true,
     'update:menu': val => true
@@ -10314,11 +10470,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);
@@ -10341,6 +10503,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) {
@@ -10354,7 +10517,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)) {
@@ -10371,6 +10536,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;
@@ -10392,7 +10589,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);
@@ -10437,12 +10633,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
         }],
@@ -10451,8 +10650,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,
@@ -10517,7 +10714,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,
@@ -12412,11 +12610,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 {
@@ -12430,10 +12653,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));
@@ -12447,13 +12673,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';
@@ -12470,14 +12689,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 => {
@@ -12486,20 +12702,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();
@@ -12875,13 +13096,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,
@@ -12895,16 +13124,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,
@@ -12912,7 +13151,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', {
@@ -12930,11 +13169,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,
@@ -13576,6 +13815,7 @@ const VCombobox = genericComponent()({
     })
   },
   emits: {
+    'update:focused': focused => true,
     'update:modelValue': val => true,
     'update:search': val => true,
     'update:menu': val => true
@@ -13713,8 +13953,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;
@@ -13799,6 +14040,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', {
@@ -13812,8 +14055,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,
@@ -14265,8 +14506,6 @@ const VFileInput = genericComponent()({
       default: '$vuetify.fileInput.counter'
     },
     multiple: Boolean,
-    hint: String,
-    persistentHint: Boolean,
     showSize: {
       type: [Boolean, Number],
       default: false,
@@ -14291,6 +14530,7 @@ const VFileInput = genericComponent()({
   emits: {
     'click:control': e => true,
     'mousedown:control': e => true,
+    'update:focused': focused => true,
     'update:modelValue': files => true
   },
   setup(props, _ref) {
@@ -14303,6 +14543,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 {
@@ -14324,21 +14569,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) {
@@ -14369,18 +14607,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 => {
@@ -14432,7 +14668,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({
@@ -15123,6 +15359,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,
@@ -16127,7 +16789,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,
@@ -16192,11 +16854,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();
@@ -16209,6 +16874,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,
@@ -16218,34 +16888,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);
+      },
+      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);
       },
-      handleMouseMove: 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,
@@ -16255,7 +16928,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', {
@@ -16273,11 +16946,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,
@@ -17100,10 +17773,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({
@@ -17464,8 +18139,6 @@ const VTextarea = genericComponent()({
     autofocus: Boolean,
     counter: [Boolean, Number, String],
     counterValue: Function,
-    hint: String,
-    persistentHint: Boolean,
     prefix: String,
     placeholder: String,
     persistentPlaceholder: Boolean,
@@ -17520,9 +18193,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();
@@ -17594,7 +18264,7 @@ const VTextarea = genericComponent()({
       const [{
         modelValue: _,
         ...inputProps
-      }] = filterInputProps(props);
+      }] = VInput.filterProps(props);
       const [fieldProps] = filterFieldProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
@@ -17608,12 +18278,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 => {
@@ -19095,56 +19762,64 @@ const VDataTableRows = genericComponent()({
     const {
       t
     } = useLocale();
-    useRender(() => createVNode(Fragment, null, [props.loading ? slots.loading?.() ?? createVNode(VDataTableRow, {
-      "class": "v-data-table-rows-no-data",
-      "key": "loading"
-    }, {
-      default: () => [t(props.loadingText)]
-    }) : undefined, !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VDataTableRow, {
-      "class": "v-data-table-rows-no-data",
-      "key": "no-data"
-    }, {
-      default: () => [t(props.noDataText)]
-    })), props.items.map((item, index) => {
-      if (item.type === 'group-header') {
-        return slots['group-header'] ? slots['group-header']({
+    useRender(() => {
+      if (props.loading && slots.loading) {
+        return createVNode("tr", {
+          "class": "v-data-table-rows-no-data",
+          "key": "loading"
+        }, [createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots.loading()])]);
+      }
+      if (!props.loading && !props.items.length && !props.hideNoData && slots['no-data']) {
+        return createVNode("tr", {
+          "class": "v-data-table-rows-no-data",
+          "key": "no-data"
+        }, [createVNode("td", {
+          "colspan": columns.value.length
+        }, [slots['no-data']?.() ?? t(props.noDataText)])]);
+      }
+      return createVNode(Fragment, null, [props.items.map((item, index) => {
+        if (item.type === 'group-header') {
+          return slots['group-header'] ? slots['group-header']({
+            index,
+            item,
+            columns: columns.value,
+            isExpanded,
+            toggleExpand,
+            isSelected,
+            toggleSelect,
+            toggleGroup,
+            isGroupOpen
+          }) : createVNode(VDataTableGroupHeaderRow, {
+            "key": `group-header_${item.id}`,
+            "item": item
+          }, slots);
+        }
+        const slotProps = {
           index,
           item,
           columns: columns.value,
           isExpanded,
           toggleExpand,
           isSelected,
-          toggleSelect,
-          toggleGroup,
-          isGroupOpen
-        }) : createVNode(VDataTableGroupHeaderRow, {
-          "key": `group-header_${item.id}`,
+          toggleSelect
+        };
+        return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : createVNode(VDataTableRow, {
+          "key": `item_${item.value}`,
+          "onClick": expandOnClick.value || props['onClick:row'] ? event => {
+            if (expandOnClick.value) {
+              toggleExpand(item);
+            }
+            props['onClick:row']?.(event, {
+              item
+            });
+          } : undefined,
+          "index": index,
           "item": item
-        }, slots);
-      }
-      const slotProps = {
-        index,
-        item,
-        columns: columns.value,
-        isExpanded,
-        toggleExpand,
-        isSelected,
-        toggleSelect
-      };
-      return createVNode(Fragment, null, [slots.item ? slots.item(slotProps) : createVNode(VDataTableRow, {
-        "key": `item_${item.value}`,
-        "onClick": expandOnClick.value || props['onClick:row'] ? event => {
-          if (expandOnClick.value) {
-            toggleExpand(item);
-          }
-          props['onClick:row']?.(event, {
-            item
-          });
-        } : undefined,
-        "index": index,
-        "item": item
-      }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
-    })]));
+        }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
+      })]);
+    });
     return {};
   }
 });
@@ -19419,7 +20094,8 @@ function useOptions(_ref) {
     page: page.value,
     itemsPerPage: itemsPerPage.value,
     sortBy: sortBy.value,
-    groupBy: groupBy.value
+    groupBy: groupBy.value,
+    search: search.value
   }));
 
   // Reset page when searching
@@ -19452,12 +20128,12 @@ const makeVDataTableProps = propsFactory({
   width: [String, Number],
   fixedHeader: Boolean,
   fixedFooter: Boolean,
-  'onClick:row': Function
+  'onClick:row': Function,
+  search: String
 }, 'v-data-table');
 const VDataTable = genericComponent()({
   name: 'VDataTable',
   props: {
-    search: String,
     ...makeVDataTableProps(),
     ...makeDataTableExpandProps(),
     ...makeDataTableGroupProps(),
@@ -19672,7 +20348,6 @@ function useVirtual(props, items) {
 const VDataTableVirtual = genericComponent()({
   name: 'VDataTableVirtual',
   props: {
-    search: String,
     ...makeVDataTableProps(),
     ...makeVDataTableProps(),
     ...makeDataTableGroupProps(),
@@ -19911,7 +20586,8 @@ const VDataTableServer = genericComponent()({
       page,
       itemsPerPage,
       sortBy,
-      groupBy
+      groupBy,
+      search: toRef(props, 'search')
     });
     provide('v-data-table', {
       toggleSort,
@@ -19971,6 +20647,7 @@ const rootTypes = {
   'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',
   'date-picker-options': 'text, avatar@2',
   'date-picker-days': 'avatar@28',
+  divider: 'divider',
   heading: 'heading',
   image: 'image',
   'list-item': 'text',
@@ -20378,6 +21055,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]);
@@ -20398,6 +21076,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', () => {
@@ -20425,7 +21104,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)
             });
           }
         }
@@ -20438,10 +21118,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
@@ -20453,7 +21134,7 @@ function inject(key) {
   }
 }
 
-const version = "4.0.0-dev-20230419.0";
+const version = "4.0.0-dev-20230421.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -20464,5 +21145,5 @@ const createVuetify = function () {
   });
 };
 
-export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { components, createVuetify, directives, useDate, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify-labs.esm.js.map