vuetify 3.10.5 → 3.10.7

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.5
+* Vuetify v3.10.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -472,8 +472,10 @@
   }
   function focusableChildren(el) {
     let filterByTabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled])`).join(', ');
-    return [...el.querySelectorAll(targets)];
+    const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', 'details:not(:has(> summary))', 'details > summary', '[tabindex]', '[contenteditable]:not([contenteditable="false"])', 'audio[controls]', 'video[controls]'].map(s => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled], [inert])`).join(', ');
+    return [...el.querySelectorAll(targets)].filter(x => !x.closest('[inert]')) // does not have inert parent
+    .filter(x => !!x.offsetParent || x.getClientRects().length > 0) // is rendered
+    .filter(x => !x.parentElement?.closest('details:not([open])') || x.tagName === 'SUMMARY' && x.parentElement?.tagName === 'DETAILS');
   }
   function getNextElement(elements, location, condition) {
     let _el;
@@ -4547,7 +4549,7 @@
     function unregister() {
       group?.unregister(id);
     }
-    vue.onMounted(() => register());
+    register();
     vue.onBeforeUnmount(() => unregister());
     const isSelected = vue.computed(() => {
       return group.isSelected(id);
@@ -8097,6 +8099,10 @@
   const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
   const makeVSlideGroupProps = propsFactory({
     centerActive: Boolean,
+    scrollToActive: {
+      type: Boolean,
+      default: true
+    },
     contentClass: null,
     direction: {
       type: String,
@@ -8185,7 +8191,7 @@
               contentSize.value = contentRect.value[sizeProperty];
               isOverflowing.value = containerSize.value + 1 < contentSize.value;
             }
-            if (firstSelectedIndex.value >= 0 && contentRef.el) {
+            if (props.scrollToActive && firstSelectedIndex.value >= 0 && contentRef.el) {
               // TODO: Is this too naive? Should we store element references in group composable?
               const selectedElement = contentRef.el.children[lastSelectedIndex.value];
               scrollToChildren(selectedElement, props.centerActive);
@@ -8454,7 +8460,9 @@
       type: Function,
       default: deepEqual
     },
-    ...makeVSlideGroupProps(),
+    ...makeVSlideGroupProps({
+      scrollToActive: false
+    }),
     ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-chip--selected'
@@ -9553,7 +9561,9 @@
     };
     vue.onBeforeMount(() => {
       if (!parent.isGroupActivator) {
-        parent.root.register(computedId.value, parent.id.value, vue.toValue(isDisabled), isGroup);
+        vue.nextTick(() => {
+          parent.root.register(computedId.value, parent.id.value, vue.toValue(isDisabled), isGroup);
+        });
       }
     });
     vue.onBeforeUnmount(() => {
@@ -9561,6 +9571,14 @@
         parent.root.unregister(computedId.value);
       }
     });
+    vue.watch(computedId, (val, oldVal) => {
+      if (!parent.isGroupActivator) {
+        parent.root.unregister(oldVal);
+        vue.nextTick(() => {
+          parent.root.register(val, parent.id.value, vue.toValue(isDisabled), isGroup);
+        });
+      }
+    });
     isGroup && vue.provide(VNestedSymbol, item);
     return item;
   };
@@ -9811,7 +9829,9 @@
         handleActiveLink();
       });
       vue.onBeforeMount(() => {
-        if (link.isActive?.value) handleActiveLink();
+        if (link.isActive?.value) {
+          vue.nextTick(() => handleActiveLink());
+        }
       });
       function handleActiveLink() {
         if (parent.value != null) {
@@ -12059,25 +12079,41 @@
         document.removeEventListener('focusin', onFocusIn);
       });
       vue.onDeactivated(() => isActive.value = false);
+      let focusTrapSuppressed = false;
+      let focusTrapSuppressionTimeout = -1;
+      async function onPointerdown() {
+        focusTrapSuppressed = true;
+        focusTrapSuppressionTimeout = window.setTimeout(() => {
+          focusTrapSuppressed = false;
+        }, 100);
+      }
       async function onFocusIn(e) {
         const before = e.relatedTarget;
         const after = e.target;
         await vue.nextTick();
         if (isActive.value && before !== after && overlay.value?.contentEl &&
-        // We're the topmost menu
-        overlay.value?.globalTop &&
+        // We're the menu without open submenus or overlays
+        overlay.value?.localTop &&
         // It isn't the document or the menu body
         ![document, overlay.value.contentEl].includes(after) &&
         // It isn't inside the menu body
         !overlay.value.contentEl.contains(after)) {
-          const focusable = focusableChildren(overlay.value.contentEl);
-          focusable[0]?.focus();
+          if (focusTrapSuppressed) {
+            if (!props.openOnHover && !overlay.value.activatorEl?.contains(after)) {
+              isActive.value = false;
+            }
+          } else {
+            const focusable = focusableChildren(overlay.value.contentEl);
+            focusable[0]?.focus();
+            document.removeEventListener('pointerdown', onPointerdown);
+          }
         }
       }
       vue.watch(isActive, val => {
         if (val) {
           parent?.register();
           if (IN_BROWSER && !props.disableInitialFocus) {
+            document.addEventListener('pointerdown', onPointerdown);
             document.addEventListener('focusin', onFocusIn, {
               once: true
             });
@@ -12085,6 +12121,8 @@
         } else {
           parent?.unregister();
           if (IN_BROWSER) {
+            clearTimeout(focusTrapSuppressionTimeout);
+            document.removeEventListener('pointerdown', onPointerdown);
             document.removeEventListener('focusin', onFocusIn);
           }
         }
@@ -12678,7 +12716,6 @@
         e.stopPropagation();
         onFocus();
         vue.nextTick(() => {
-          model.value = null;
           reset();
           callEvent(props['onClick:clear'], e);
         });
@@ -12733,8 +12770,6 @@
               "onMousedown": onControlMousedown,
               "onClick": onControlClick,
               "onClick:clear": e => onClear(e, reset),
-              "onClick:prependInner": props['onClick:prependInner'],
-              "onClick:appendInner": props['onClick:appendInner'],
               "role": props.role
             }, omit(fieldProps, ['onClick:clear']), {
               "id": id.value,
@@ -12751,10 +12786,11 @@
                   props: {
                     class: fieldClass,
                     ...slotProps
-                  }
+                  },
+                  controlRef
                 } = _ref3;
                 const inputNode = vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
-                  "ref": inputRef,
+                  "ref": val => inputRef.value = controlRef.value = val,
                   "value": model.value,
                   "onInput": onInput,
                   "autofocus": props.autofocus,
@@ -12910,7 +12946,7 @@
       const start = performance.now();
       offsets[0] = 0;
       const length = items.value.length;
-      for (let i = 1; i <= length - 1; i++) {
+      for (let i = 1; i <= length; i++) {
         offsets[i] = (offsets[i - 1] || 0) + getSize(i - 1);
       }
       updateTime.value = Math.max(updateTime.value, performance.now() - start);
@@ -12945,7 +12981,7 @@
       }
     }
     function calculateOffset(index) {
-      index = clamp(index, 0, items.value.length - 1);
+      index = clamp(index, 0, items.value.length);
       const whole = Math.floor(index);
       const fraction = index % 1;
       const next = whole + 1;
@@ -13678,7 +13714,8 @@
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
-                        "tabindex": "-1"
+                        "tabindex": "-1",
+                        "onClick": event => event.preventDefault()
                       }, null) : undefined, camelizedProps.prependAvatar && vue.createVNode(VAvatar, {
                         "image": camelizedProps.prependAvatar
                       }, null), camelizedProps.prependIcon && vue.createVNode(VIcon, {
@@ -13950,10 +13987,7 @@
     ...omit(makeVTextFieldProps({
       modelValue: null,
       role: 'combobox'
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({
-      transition: false
-    })
+    }), ['validationValue', 'dirty', 'appendInnerIcon'])
   }, 'VAutocomplete');
   const VAutocomplete = genericComponent()({
     name: 'VAutocomplete',
@@ -13978,6 +14012,7 @@
       const vMenuRef = vue.ref();
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
+      const _searchLock = vue.shallowRef(null);
       const {
         items,
         transformIn,
@@ -13999,9 +14034,9 @@
       const {
         filteredItems,
         getMatches
-      } = useFilter(props, items, () => isPristine.value ? '' : search.value);
+      } = useFilter(props, items, () => _searchLock.value ?? (isPristine.value ? '' : search.value));
       const displayItems = vue.computed(() => {
-        if (props.hideSelected) {
+        if (props.hideSelected && _searchLock.value === null) {
           return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
         }
         return filteredItems.value;
@@ -14132,6 +14167,7 @@
           isPristine.value = true;
           vTextFieldRef.value?.focus();
         }
+        _searchLock.value = null;
       }
       function onFocusin(e) {
         isFocused.value = true;
@@ -14167,6 +14203,7 @@
         } else {
           const add = set !== false;
           model.value = add ? [item] : [];
+          _searchLock.value = isPristine.value ? '' : search.value ?? '';
           search.value = add && !hasSelectionSlot.value ? item.title : '';
 
           // watch for search watcher to trigger
@@ -14186,6 +14223,9 @@
         } else {
           if (!props.multiple && search.value == null) model.value = [];
           menu.value = false;
+          if (!isPristine.value && search.value) {
+            _searchLock.value = search.value;
+          }
           search.value = '';
           selectionIndex.value = -1;
         }
@@ -14195,13 +14235,14 @@
         if (val) menu.value = true;
         isPristine.value = !val;
       });
-      vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && model.value.length) {
+      vue.watch(menu, val => {
+        if (!props.hideSelected && val && model.value.length && isPristine.value) {
           const index = displayItems.value.findIndex(item => model.value.some(s => item.value === s.value));
           IN_BROWSER && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
         }
+        if (val) _searchLock.value = null;
       });
       vue.watch(items, (newVal, oldVal) => {
         if (menu.value) return;
@@ -14252,7 +14293,6 @@
             "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
-            "transition": props.transition,
             "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
@@ -14322,7 +14362,8 @@
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
-                        "tabindex": "-1"
+                        "tabindex": "-1",
+                        "onClick": event => event.preventDefault()
                       }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
                         "image": item.props.prependAvatar
                       }, null), item.props.prependIcon && vue.createVNode(VIcon, {
@@ -15680,7 +15721,19 @@
       const activeIndex = vue.computed(() => {
         return group.items.value.findIndex(item => group.selected.value.includes(item.id));
       });
+
+      // Fix for https://github.com/vuetifyjs/vuetify/issues/18447
       vue.watch(activeIndex, (newVal, oldVal) => {
+        let scrollableParent;
+        const savedScrollPosition = {
+          left: 0,
+          top: 0
+        };
+        if (IN_BROWSER && oldVal >= 0) {
+          scrollableParent = getScrollParent(rootRef.value);
+          savedScrollPosition.left = scrollableParent?.scrollLeft;
+          savedScrollPosition.top = scrollableParent?.scrollTop;
+        }
         const itemsLength = group.items.value.length;
         const lastIndex = itemsLength - 1;
         if (itemsLength <= 2) {
@@ -15692,7 +15745,30 @@
         } else {
           isReversed.value = newVal < oldVal;
         }
-      });
+        vue.nextTick(() => {
+          if (!IN_BROWSER || !scrollableParent) return;
+          const currentScrollY = scrollableParent.scrollTop;
+          if (currentScrollY !== savedScrollPosition.top) {
+            scrollableParent.scrollTo({
+              ...savedScrollPosition,
+              behavior: 'instant'
+            });
+          }
+          requestAnimationFrame(() => {
+            if (!scrollableParent) return;
+            const rafScrollY = scrollableParent.scrollTop;
+            if (rafScrollY !== savedScrollPosition.top) {
+              scrollableParent.scrollTo({
+                ...savedScrollPosition,
+                behavior: 'instant'
+              });
+            }
+          });
+        });
+      }, {
+        flush: 'sync'
+      }); // Run synchronously before DOM updates
+
       vue.provide(VWindowSymbol, {
         transition,
         isReversed,
@@ -18597,7 +18673,7 @@
     };
   }
   function createDateRange(adapter, start, stop) {
-    const diff = adapter.getDiff(adapter.endOfDay(stop ?? start), adapter.startOfDay(start), 'days');
+    const diff = adapter.getDiff(new Date(`${adapter.toISO(stop ?? start)}T00:00:00Z`), new Date(`${adapter.toISO(start)}T00:00:00Z`), 'days');
     const datesInRange = [start];
     for (let i = 1; i < diff; i++) {
       const nextDate = adapter.addDays(start, i);
@@ -19280,10 +19356,7 @@
     ...omit(makeVTextFieldProps({
       modelValue: null,
       role: 'combobox'
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({
-      transition: false
-    })
+    }), ['validationValue', 'dirty', 'appendInnerIcon'])
   }, 'VCombobox');
   const VCombobox = genericComponent()({
     name: 'VCombobox',
@@ -19327,13 +19400,16 @@
       const hasChips = vue.computed(() => !!(props.chips || slots.chip));
       const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
       const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
+      const _searchLock = vue.shallowRef(null);
       const search = vue.computed({
         get: () => {
           return _search.value;
         },
         set: async val => {
           _search.value = val ?? '';
-          if (!props.multiple && !hasSelectionSlot.value) {
+          if (val === null || val === '' && !props.multiple && !hasSelectionSlot.value) {
+            model.value = [];
+          } else if (!props.multiple && !hasSelectionSlot.value) {
             model.value = [transformItem$3(props, val)];
             vue.nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
           }
@@ -19361,9 +19437,9 @@
       const {
         filteredItems,
         getMatches
-      } = useFilter(props, items, () => props.alwaysFilter || !isPristine.value ? search.value : '');
+      } = useFilter(props, items, () => _searchLock.value ?? (props.alwaysFilter || !isPristine.value ? search.value : ''));
       const displayItems = vue.computed(() => {
-        if (props.hideSelected) {
+        if (props.hideSelected && _searchLock.value === null) {
           return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
         }
         return filteredItems.value;
@@ -19444,22 +19520,19 @@
         if (['Escape'].includes(e.key)) {
           menu.value = false;
         }
-        if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
-          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key) && !model.value.some(_ref2 => {
-            let {
-              value
-            } = _ref2;
-            return value === displayItems.value[0].value;
-          })) {
-            select(filteredItems.value[0]);
-          }
-          isPristine.value = true;
+        if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key) && !model.value.some(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return value === displayItems.value[0].value;
+        })) {
+          select(filteredItems.value[0]);
         }
         if (e.key === 'ArrowDown' && highlightFirst.value) {
           listRef.value?.focus('next');
         }
         if (e.key === 'Enter' && search.value) {
-          select(transformItem$3(props, search.value));
+          select(transformItem$3(props, search.value), true, true);
           if (hasSelectionSlot.value) _search.value = '';
         }
         if (['Backspace', 'Delete'].includes(e.key)) {
@@ -19504,13 +19577,15 @@
       }
       function onAfterLeave() {
         if (isFocused.value) {
-          isPristine.value = true;
           vTextFieldRef.value?.focus();
         }
+        isPristine.value = true;
+        _searchLock.value = null;
       }
       /** @param set - null means toggle */
       function select(item) {
         let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let keepMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
         if (!item || item.props.disabled) return;
         if (props.multiple) {
           const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
@@ -19528,11 +19603,14 @@
         } else {
           const add = set !== false;
           model.value = add ? [item] : [];
+          if ((!isPristine.value || props.alwaysFilter) && _search.value) {
+            _searchLock.value = _search.value;
+          }
           _search.value = add && !hasSelectionSlot.value ? item.title : '';
 
           // watch for search watcher to trigger
           vue.nextTick(() => {
-            menu.value = false;
+            menu.value = keepMenu;
             isPristine.value = true;
           });
         }
@@ -19546,9 +19624,6 @@
       function onFocusout(e) {
         listHasFocus.value = false;
       }
-      function onUpdateModelValue(v) {
-        if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
-      }
       vue.watch(isFocused, (val, oldVal) => {
         if (val || val === oldVal) return;
         selectionIndex.value = -1;
@@ -19571,13 +19646,14 @@
           }
         }
       });
-      vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && model.value.length) {
+      vue.watch(menu, val => {
+        if (!props.hideSelected && val && model.value.length && isPristine.value) {
           const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
           IN_BROWSER && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
         }
+        if (val) _searchLock.value = null;
       });
       vue.watch(items, (newVal, oldVal) => {
         if (menu.value) return;
@@ -19593,7 +19669,7 @@
           "ref": vTextFieldRef
         }, textFieldProps, {
           "modelValue": search.value,
-          "onUpdate:modelValue": [$event => search.value = $event, onUpdateModelValue],
+          "onUpdate:modelValue": $event => search.value = $event,
           "focused": isFocused.value,
           "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.externalValue,
@@ -19628,7 +19704,6 @@
             "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
-            "transition": props.transition,
             "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
@@ -19698,7 +19773,8 @@
                         "key": item.value,
                         "modelValue": isSelected,
                         "ripple": false,
-                        "tabindex": "-1"
+                        "tabindex": "-1",
+                        "onClick": event => event.preventDefault()
                       }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
                         "image": item.props.prependAvatar
                       }, null), item.props.prependIcon && vue.createVNode(VIcon, {
@@ -24108,7 +24184,7 @@
       function isAllowedInRange(start, end) {
         const allowedDates = props.allowedDates;
         if (typeof allowedDates !== 'function') return true;
-        const days = adapter.getDiff(end, start, 'days');
+        const days = 1 + adapter.getDiff(new Date(`${adapter.toISO(end)}T00:00:00Z`), new Date(`${adapter.toISO(start)}T00:00:00Z`), 'days');
         for (let i = 0; i < days; i++) {
           if (allowedDates(adapter.addDays(start, i))) return true;
         }
@@ -25131,10 +25207,11 @@
                   props: {
                     class: fieldClass,
                     ...slotProps
-                  }
+                  },
+                  controlRef
                 } = _ref4;
                 return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("input", vue.mergeProps({
-                  "ref": inputRef,
+                  "ref": val => inputRef.value = controlRef.value = val,
                   "type": "file",
                   "accept": inputAccept,
                   "readonly": isReadonly.value,
@@ -26611,7 +26688,7 @@
       const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(Number(val), props.min, props.max));
       const _inputText = vue.shallowRef(null);
       vue.watchEffect(() => {
-        if (isFocused.value && !controlsDisabled.value && Number(_inputText.value) === model.value) ; else if (model.value == null) {
+        if (isFocused.value && !controlsDisabled.value && Number(_inputText.value?.replace(decimalSeparator.value, '.')) === model.value) ; else if (model.value == null) {
           _inputText.value = null;
         } else if (!isNaN(model.value)) {
           _inputText.value = correctPrecision(model.value);
@@ -26706,6 +26783,7 @@
         if (!new RegExp(`^-?\\d*${escapeForRegex(decimalSeparator.value)}?\\d*$`).test(potentialNewInputVal)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
+          vue.nextTick(() => inputText.value = potentialNewNumber);
         }
         if (props.precision == null) return;
 
@@ -26713,13 +26791,15 @@
         if (potentialNewInputVal.split(decimalSeparator.value)[1]?.length > props.precision) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
+          vue.nextTick(() => inputText.value = potentialNewNumber);
           const cursorPosition = (selectionStart ?? 0) + e.data.length;
           inputElement.setSelectionRange(cursorPosition, cursorPosition);
         }
         // Ignore decimal separator when precision = 0
-        if (props.precision === 0 && potentialNewInputVal.includes(decimalSeparator.value)) {
+        if (props.precision === 0 && potentialNewInputVal.endsWith(decimalSeparator.value)) {
           e.preventDefault();
           inputElement.value = potentialNewNumber;
+          vue.nextTick(() => inputText.value = potentialNewNumber);
         }
       }
       async function onKeydown(e) {
@@ -27915,12 +27995,12 @@
           ariaLabel: t(props.loadingText),
           role: 'alert'
         };
-        return vue.createElementVNode(vue.Fragment, null, [isLoading ? vue.createElementVNode("div", vue.mergeProps({
+        return isLoading ? vue.createElementVNode("div", vue.mergeProps({
           "class": ['v-skeleton-loader', {
             'v-skeleton-loader--boilerplate': props.boilerplate
           }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
           "style": [backgroundColorStyles.value, dimensionStyles.value]
-        }, loadingProps, attrs), [items.value]) : slots.default?.()]);
+        }, loadingProps, attrs), [items.value]) : vue.createElementVNode(vue.Fragment, null, [slots.default?.()]);
       });
       return {};
     }
@@ -29785,6 +29865,10 @@
       const vFieldRef = vue.ref();
       const controlHeight = vue.shallowRef('');
       const textareaRef = vue.ref();
+      const scrollbarWidth = vue.ref(0);
+      const {
+        platform
+      } = useDisplay();
       const autocomplete = useAutocomplete(props);
       const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
@@ -29829,6 +29913,18 @@
         if (!props.autoGrow) rows.value = Number(props.rows);
       });
       function calculateInputHeight() {
+        vue.nextTick(() => {
+          if (!textareaRef.value) return;
+          if (platform.value.firefox) {
+            scrollbarWidth.value = 12;
+            return;
+          }
+          const {
+            offsetWidth,
+            clientWidth
+          } = textareaRef.value;
+          scrollbarWidth.value = Math.max(0, offsetWidth - clientWidth);
+        });
         if (!props.autoGrow) return;
         vue.nextTick(() => {
           if (!sizerRef.value || !vFieldRef.value) return;
@@ -29889,7 +29985,9 @@
             'v-textarea--no-resize': props.noResize || props.autoGrow,
             'v-input--plain-underlined': isPlainOrUnderlined.value
           }, props.class],
-          "style": props.style
+          "style": [{
+            '--v-textarea-scroll-bar-width': convertToUnit(scrollbarWidth.value)
+          }, props.style]
         }, rootAttrs, inputProps, {
           "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
           "focused": isFocused.value
@@ -29929,12 +30027,13 @@
                   props: {
                     class: fieldClass,
                     ...slotProps
-                  }
+                  },
+                  controlRef
                 } = _ref3;
                 return vue.createElementVNode(vue.Fragment, null, [props.prefix && vue.createElementVNode("span", {
                   "class": "v-text-field__prefix"
                 }, [props.prefix]), vue.withDirectives(vue.createElementVNode("textarea", vue.mergeProps({
-                  "ref": textareaRef,
+                  "ref": val => textareaRef.value = controlRef.value = val,
                   "class": fieldClass,
                   "value": model.value,
                   "onInput": onInput,
@@ -34317,7 +34416,7 @@
     ...makeFocusProps(),
     ...makeVConfirmEditProps(),
     ...makeVTextFieldProps(),
-    ...omit(makeVColorPickerProps(), ['width'])
+    ...omit(makeVColorPickerProps(), ['location', 'height', 'minHeight', 'maxHeight'])
   }, 'VColorInput');
   const VColorInput = genericComponent()({
     name: 'VColorInput',
@@ -34356,7 +34455,7 @@
       }
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
-        const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+        const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'bgColor', 'color', 'rounded', 'maxWidth', 'minWidth', 'width']));
         const textFieldProps = VTextField.filterProps(props);
         const slotWithPip = props.hidePip ? undefined : {
           [props.pipLocation]: arg => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VAvatar, {
@@ -34574,7 +34673,7 @@
     ...omit(makeVDatePickerProps({
       hideHeader: true,
       showAdjacentMonths: true
-    }), ['active', 'location', 'rounded'])
+    }), ['active', 'location', 'rounded', 'height', 'minHeight', 'maxHeight'])
   }, 'VDateInput');
   const VDateInput = genericComponent()({
     name: 'VDateInput',
@@ -34605,6 +34704,15 @@
       const {
         mobile
       } = useDisplay(props);
+      const clamp = date => {
+        if (props.max && adapter.isAfter(date, props.max)) {
+          return props.max;
+        }
+        if (props.min && adapter.isBefore(date, props.min)) {
+          return props.min;
+        }
+        return date;
+      };
       const emptyModelValue = () => props.multiple ? [] : null;
       const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
       const menu = useProxiedModel(props, 'menu');
@@ -34655,7 +34763,7 @@
         if (!menu.value || !isFocused.value) {
           menu.value = true;
         }
-        if (props.updateOn.includes('enter')) {
+        if (props.updateOn.includes('enter') && !props.readonly) {
           onUserInput(e.target);
         }
       }
@@ -34682,7 +34790,7 @@
         model.value = emptyModelValue();
       }
       function onBlur(e) {
-        if (props.updateOn.includes('blur')) {
+        if (props.updateOn.includes('blur') && !props.readonly) {
           onUserInput(e.target);
         }
 
@@ -34700,23 +34808,23 @@
           model.value = emptyModelValue();
         } else if (!props.multiple) {
           if (isValid(value)) {
-            model.value = parseDate(value);
+            model.value = clamp(parseDate(value));
           }
         } else {
           const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
           if (parts.every(isValid)) {
             if (props.multiple === 'range') {
-              const [start, stop] = parts.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+              const [start, stop] = parts.map(parseDate).map(clamp).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
               model.value = createDateRange(adapter, start, stop);
             } else {
-              model.value = parts.map(parseDate);
+              model.value = parts.map(parseDate).map(clamp);
             }
           }
         }
       }
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
-        const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
+        const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'bgColor', 'color', 'location', 'rounded', 'maxWidth', 'minWidth', 'width']));
         const datePickerSlots = pick(slots, ['title', 'header', 'day', 'month', 'year']);
         const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
         return vue.createVNode(VTextField, vue.mergeProps({
@@ -35161,7 +35269,7 @@
       // Always display masked value in input when mask is applied
       val => props.mask ? mask.mask(mask.unmask(val)) : val, val => {
         if (props.mask) {
-          const valueWithoutDelimiters = removeMaskDelimiters(val);
+          const valueWithoutDelimiters = val ? removeMaskDelimiters(val) : '';
 
           // E.g. mask is #-# and the input value is '2-23'
           // model-value should be enforced to '2-2'
@@ -37907,7 +38015,7 @@
       };
     });
   }
-  const version$1 = "3.10.5";
+  const version$1 = "3.10.7";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -38205,7 +38313,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.10.5";
+  const version = "3.10.7";
 
   /* eslint-disable local-rules/sort-imports */