vuetify 3.10.5 → 3.10.7

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.5
+* Vuetify v3.10.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -468,8 +468,10 @@ function callEvent(handler) {
 }
 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;
@@ -4543,7 +4545,7 @@ function useGroupItem(props, injectKey) {
   function unregister() {
     group?.unregister(id);
   }
-  onMounted(() => register());
+  register();
   onBeforeUnmount(() => unregister());
   const isSelected = computed(() => {
     return group.isSelected(id);
@@ -8093,6 +8095,10 @@ function getOffsetPosition(isHorizontal, element) {
 const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
 const makeVSlideGroupProps = propsFactory({
   centerActive: Boolean,
+  scrollToActive: {
+    type: Boolean,
+    default: true
+  },
   contentClass: null,
   direction: {
     type: String,
@@ -8181,7 +8187,7 @@ const VSlideGroup = genericComponent()({
             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);
@@ -8450,7 +8456,9 @@ const makeVChipGroupProps = propsFactory({
     type: Function,
     default: deepEqual
   },
-  ...makeVSlideGroupProps(),
+  ...makeVSlideGroupProps({
+    scrollToActive: false
+  }),
   ...makeComponentProps(),
   ...makeGroupProps({
     selectedClass: 'v-chip--selected'
@@ -9549,7 +9557,9 @@ const useNestedItem = (id, isDisabled, isGroup) => {
   };
   onBeforeMount(() => {
     if (!parent.isGroupActivator) {
-      parent.root.register(computedId.value, parent.id.value, toValue(isDisabled), isGroup);
+      nextTick(() => {
+        parent.root.register(computedId.value, parent.id.value, toValue(isDisabled), isGroup);
+      });
     }
   });
   onBeforeUnmount(() => {
@@ -9557,6 +9567,14 @@ const useNestedItem = (id, isDisabled, isGroup) => {
       parent.root.unregister(computedId.value);
     }
   });
+  watch(computedId, (val, oldVal) => {
+    if (!parent.isGroupActivator) {
+      parent.root.unregister(oldVal);
+      nextTick(() => {
+        parent.root.register(val, parent.id.value, toValue(isDisabled), isGroup);
+      });
+    }
+  });
   isGroup && provide(VNestedSymbol, item);
   return item;
 };
@@ -9807,7 +9825,9 @@ const VListItem = genericComponent()({
       handleActiveLink();
     });
     onBeforeMount(() => {
-      if (link.isActive?.value) handleActiveLink();
+      if (link.isActive?.value) {
+        nextTick(() => handleActiveLink());
+      }
     });
     function handleActiveLink() {
       if (parent.value != null) {
@@ -12055,25 +12075,41 @@ const VMenu = genericComponent()({
       document.removeEventListener('focusin', onFocusIn);
     });
     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 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);
+        }
       }
     }
     watch(isActive, val => {
       if (val) {
         parent?.register();
         if (IN_BROWSER && !props.disableInitialFocus) {
+          document.addEventListener('pointerdown', onPointerdown);
           document.addEventListener('focusin', onFocusIn, {
             once: true
           });
@@ -12081,6 +12117,8 @@ const VMenu = genericComponent()({
       } else {
         parent?.unregister();
         if (IN_BROWSER) {
+          clearTimeout(focusTrapSuppressionTimeout);
+          document.removeEventListener('pointerdown', onPointerdown);
           document.removeEventListener('focusin', onFocusIn);
         }
       }
@@ -12674,7 +12712,6 @@ const VTextField = genericComponent()({
       e.stopPropagation();
       onFocus();
       nextTick(() => {
-        model.value = null;
         reset();
         callEvent(props['onClick:clear'], e);
       });
@@ -12729,8 +12766,6 @@ const VTextField = genericComponent()({
             "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,
@@ -12747,10 +12782,11 @@ const VTextField = genericComponent()({
                 props: {
                   class: fieldClass,
                   ...slotProps
-                }
+                },
+                controlRef
               } = _ref3;
               const inputNode = withDirectives(createElementVNode("input", mergeProps({
-                "ref": inputRef,
+                "ref": val => inputRef.value = controlRef.value = val,
                 "value": model.value,
                 "onInput": onInput,
                 "autofocus": props.autofocus,
@@ -12906,7 +12942,7 @@ function useVirtual(props, items) {
     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);
@@ -12941,7 +12977,7 @@ function useVirtual(props, items) {
     }
   }
   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;
@@ -13674,7 +13710,8 @@ const VSelect = genericComponent()({
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
-                      "tabindex": "-1"
+                      "tabindex": "-1",
+                      "onClick": event => event.preventDefault()
                     }, null) : undefined, camelizedProps.prependAvatar && createVNode(VAvatar, {
                       "image": camelizedProps.prependAvatar
                     }, null), camelizedProps.prependIcon && createVNode(VIcon, {
@@ -13946,10 +13983,7 @@ const makeVAutocompleteProps = propsFactory({
   ...omit(makeVTextFieldProps({
     modelValue: null,
     role: 'combobox'
-  }), ['validationValue', 'dirty', 'appendInnerIcon']),
-  ...makeTransitionProps({
-    transition: false
-  })
+  }), ['validationValue', 'dirty', 'appendInnerIcon'])
 }, 'VAutocomplete');
 const VAutocomplete = genericComponent()({
   name: 'VAutocomplete',
@@ -13974,6 +14008,7 @@ const VAutocomplete = genericComponent()({
     const vMenuRef = ref();
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
+    const _searchLock = shallowRef(null);
     const {
       items,
       transformIn,
@@ -13995,9 +14030,9 @@ const VAutocomplete = genericComponent()({
     const {
       filteredItems,
       getMatches
-    } = useFilter(props, items, () => isPristine.value ? '' : search.value);
+    } = useFilter(props, items, () => _searchLock.value ?? (isPristine.value ? '' : search.value));
     const displayItems = 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;
@@ -14128,6 +14163,7 @@ const VAutocomplete = genericComponent()({
         isPristine.value = true;
         vTextFieldRef.value?.focus();
       }
+      _searchLock.value = null;
     }
     function onFocusin(e) {
       isFocused.value = true;
@@ -14163,6 +14199,7 @@ const VAutocomplete = genericComponent()({
       } 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
@@ -14182,6 +14219,9 @@ const VAutocomplete = genericComponent()({
       } 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;
       }
@@ -14191,13 +14231,14 @@ const VAutocomplete = genericComponent()({
       if (val) menu.value = true;
       isPristine.value = !val;
     });
-    watch(menu, () => {
-      if (!props.hideSelected && menu.value && model.value.length) {
+    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;
     });
     watch(items, (newVal, oldVal) => {
       if (menu.value) return;
@@ -14248,7 +14289,6 @@ const VAutocomplete = genericComponent()({
           "maxHeight": 310,
           "openOnClick": false,
           "closeOnContentClick": false,
-          "transition": props.transition,
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
@@ -14318,7 +14358,8 @@ const VAutocomplete = genericComponent()({
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
-                      "tabindex": "-1"
+                      "tabindex": "-1",
+                      "onClick": event => event.preventDefault()
                     }, null) : undefined, item.props.prependAvatar && createVNode(VAvatar, {
                       "image": item.props.prependAvatar
                     }, null), item.props.prependIcon && createVNode(VIcon, {
@@ -15676,7 +15717,19 @@ const VWindow = genericComponent()({
     const activeIndex = computed(() => {
       return group.items.value.findIndex(item => group.selected.value.includes(item.id));
     });
+
+    // Fix for https://github.com/vuetifyjs/vuetify/issues/18447
     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) {
@@ -15688,7 +15741,30 @@ const VWindow = genericComponent()({
       } else {
         isReversed.value = newVal < oldVal;
       }
-    });
+      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
+
     provide(VWindowSymbol, {
       transition,
       isReversed,
@@ -18593,7 +18669,7 @@ function createDate(options, locale) {
   };
 }
 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);
@@ -19276,10 +19352,7 @@ const makeVComboboxProps = propsFactory({
   ...omit(makeVTextFieldProps({
     modelValue: null,
     role: 'combobox'
-  }), ['validationValue', 'dirty', 'appendInnerIcon']),
-  ...makeTransitionProps({
-    transition: false
-  })
+  }), ['validationValue', 'dirty', 'appendInnerIcon'])
 }, 'VCombobox');
 const VCombobox = genericComponent()({
   name: 'VCombobox',
@@ -19323,13 +19396,16 @@ const VCombobox = genericComponent()({
     const hasChips = computed(() => !!(props.chips || slots.chip));
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
     const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
+    const _searchLock = shallowRef(null);
     const search = 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)];
           nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
         }
@@ -19357,9 +19433,9 @@ const VCombobox = genericComponent()({
     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 = 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;
@@ -19440,22 +19516,19 @@ const VCombobox = genericComponent()({
       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)) {
@@ -19500,13 +19573,15 @@ const VCombobox = genericComponent()({
     }
     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));
@@ -19524,11 +19599,14 @@ const VCombobox = genericComponent()({
       } 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
         nextTick(() => {
-          menu.value = false;
+          menu.value = keepMenu;
           isPristine.value = true;
         });
       }
@@ -19542,9 +19620,6 @@ const VCombobox = genericComponent()({
     function onFocusout(e) {
       listHasFocus.value = false;
     }
-    function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
-    }
     watch(isFocused, (val, oldVal) => {
       if (val || val === oldVal) return;
       selectionIndex.value = -1;
@@ -19567,13 +19642,14 @@ const VCombobox = genericComponent()({
         }
       }
     });
-    watch(menu, () => {
-      if (!props.hideSelected && menu.value && model.value.length) {
+    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;
     });
     watch(items, (newVal, oldVal) => {
       if (menu.value) return;
@@ -19589,7 +19665,7 @@ const VCombobox = genericComponent()({
         "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,
@@ -19624,7 +19700,6 @@ const VCombobox = genericComponent()({
           "maxHeight": 310,
           "openOnClick": false,
           "closeOnContentClick": false,
-          "transition": props.transition,
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
@@ -19694,7 +19769,8 @@ const VCombobox = genericComponent()({
                       "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
-                      "tabindex": "-1"
+                      "tabindex": "-1",
+                      "onClick": event => event.preventDefault()
                     }, null) : undefined, item.props.prependAvatar && createVNode(VAvatar, {
                       "image": item.props.prependAvatar
                     }, null), item.props.prependIcon && createVNode(VIcon, {
@@ -24104,7 +24180,7 @@ const VDatePicker = genericComponent()({
     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;
       }
@@ -25127,10 +25203,11 @@ const VFileInput = genericComponent()({
                 props: {
                   class: fieldClass,
                   ...slotProps
-                }
+                },
+                controlRef
               } = _ref4;
               return createElementVNode(Fragment, null, [createElementVNode("input", mergeProps({
-                "ref": inputRef,
+                "ref": val => inputRef.value = controlRef.value = val,
                 "type": "file",
                 "accept": inputAccept,
                 "readonly": isReadonly.value,
@@ -26607,7 +26684,7 @@ const VNumberInput = genericComponent()({
     const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(Number(val), props.min, props.max));
     const _inputText = shallowRef(null);
     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);
@@ -26702,6 +26779,7 @@ const VNumberInput = genericComponent()({
       if (!new RegExp(`^-?\\d*${escapeForRegex(decimalSeparator.value)}?\\d*$`).test(potentialNewInputVal)) {
         e.preventDefault();
         inputElement.value = potentialNewNumber;
+        nextTick(() => inputText.value = potentialNewNumber);
       }
       if (props.precision == null) return;
 
@@ -26709,13 +26787,15 @@ const VNumberInput = genericComponent()({
       if (potentialNewInputVal.split(decimalSeparator.value)[1]?.length > props.precision) {
         e.preventDefault();
         inputElement.value = potentialNewNumber;
+        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;
+        nextTick(() => inputText.value = potentialNewNumber);
       }
     }
     async function onKeydown(e) {
@@ -27911,12 +27991,12 @@ const VSkeletonLoader = genericComponent()({
         ariaLabel: t(props.loadingText),
         role: 'alert'
       };
-      return createElementVNode(Fragment, null, [isLoading ? createElementVNode("div", mergeProps({
+      return isLoading ? createElementVNode("div", 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]) : createElementVNode(Fragment, null, [slots.default?.()]);
     });
     return {};
   }
@@ -29781,6 +29861,10 @@ const VTextarea = genericComponent()({
     const vFieldRef = ref();
     const controlHeight = shallowRef('');
     const textareaRef = ref();
+    const scrollbarWidth = ref(0);
+    const {
+      platform
+    } = useDisplay();
     const autocomplete = useAutocomplete(props);
     const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
@@ -29825,6 +29909,18 @@ const VTextarea = genericComponent()({
       if (!props.autoGrow) rows.value = Number(props.rows);
     });
     function calculateInputHeight() {
+      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;
       nextTick(() => {
         if (!sizerRef.value || !vFieldRef.value) return;
@@ -29885,7 +29981,9 @@ const VTextarea = genericComponent()({
           '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
@@ -29925,12 +30023,13 @@ const VTextarea = genericComponent()({
                 props: {
                   class: fieldClass,
                   ...slotProps
-                }
+                },
+                controlRef
               } = _ref3;
               return createElementVNode(Fragment, null, [props.prefix && createElementVNode("span", {
                 "class": "v-text-field__prefix"
               }, [props.prefix]), withDirectives(createElementVNode("textarea", mergeProps({
-                "ref": textareaRef,
+                "ref": val => textareaRef.value = controlRef.value = val,
                 "class": fieldClass,
                 "value": model.value,
                 "onInput": onInput,
@@ -34313,7 +34412,7 @@ const makeVColorInputProps = propsFactory({
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps(),
-  ...omit(makeVColorPickerProps(), ['width'])
+  ...omit(makeVColorPickerProps(), ['location', 'height', 'minHeight', 'maxHeight'])
 }, 'VColorInput');
 const VColorInput = genericComponent()({
   name: 'VColorInput',
@@ -34352,7 +34451,7 @@ const VColorInput = genericComponent()({
     }
     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 => createElementVNode(Fragment, null, [createVNode(VAvatar, {
@@ -34570,7 +34669,7 @@ const makeVDateInputProps = propsFactory({
   ...omit(makeVDatePickerProps({
     hideHeader: true,
     showAdjacentMonths: true
-  }), ['active', 'location', 'rounded'])
+  }), ['active', 'location', 'rounded', 'height', 'minHeight', 'maxHeight'])
 }, 'VDateInput');
 const VDateInput = genericComponent()({
   name: 'VDateInput',
@@ -34601,6 +34700,15 @@ const VDateInput = genericComponent()({
     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');
@@ -34651,7 +34759,7 @@ const VDateInput = genericComponent()({
       if (!menu.value || !isFocused.value) {
         menu.value = true;
       }
-      if (props.updateOn.includes('enter')) {
+      if (props.updateOn.includes('enter') && !props.readonly) {
         onUserInput(e.target);
       }
     }
@@ -34678,7 +34786,7 @@ const VDateInput = genericComponent()({
       model.value = emptyModelValue();
     }
     function onBlur(e) {
-      if (props.updateOn.includes('blur')) {
+      if (props.updateOn.includes('blur') && !props.readonly) {
         onUserInput(e.target);
       }
 
@@ -34696,23 +34804,23 @@ const VDateInput = genericComponent()({
         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 createVNode(VTextField, mergeProps({
@@ -35157,7 +35265,7 @@ const VMaskInput = genericComponent()({
     // 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'
@@ -37903,7 +38011,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -38201,7 +38309,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.10.5";
+const version = "3.10.7";
 
 /* eslint-disable local-rules/sort-imports */