vuetify 3.10.5 → 3.10.7

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.5
+* Vuetify v3.10.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -397,8 +397,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;
@@ -5019,7 +5021,7 @@ function useGroupItem(props, injectKey) {
   function unregister() {
     group?.unregister(id);
   }
-  onMounted(() => register());
+  register();
   onBeforeUnmount(() => unregister());
   const isSelected = computed(() => {
     return group.isSelected(id);
@@ -8339,6 +8341,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,
@@ -8427,7 +8433,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);
@@ -8696,7 +8702,9 @@ const makeVChipGroupProps = propsFactory({
     type: Function,
     default: deepEqual
   },
-  ...makeVSlideGroupProps(),
+  ...makeVSlideGroupProps({
+    scrollToActive: false
+  }),
   ...makeComponentProps(),
   ...makeGroupProps({
     selectedClass: 'v-chip--selected'
@@ -9795,7 +9803,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(() => {
@@ -9803,6 +9813,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;
 };
@@ -10053,7 +10071,9 @@ const VListItem = genericComponent()({
       handleActiveLink();
     });
     onBeforeMount(() => {
-      if (link.isActive?.value) handleActiveLink();
+      if (link.isActive?.value) {
+        nextTick(() => handleActiveLink());
+      }
     });
     function handleActiveLink() {
       if (parent.value != null) {
@@ -12301,25 +12321,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
           });
@@ -12327,6 +12363,8 @@ const VMenu = genericComponent()({
       } else {
         parent?.unregister();
         if (IN_BROWSER) {
+          clearTimeout(focusTrapSuppressionTimeout);
+          document.removeEventListener('pointerdown', onPointerdown);
           document.removeEventListener('focusin', onFocusIn);
         }
       }
@@ -12920,7 +12958,6 @@ const VTextField = genericComponent()({
       e.stopPropagation();
       onFocus();
       nextTick(() => {
-        model.value = null;
         reset();
         callEvent(props['onClick:clear'], e);
       });
@@ -12975,8 +13012,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,
@@ -12993,10 +13028,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,
@@ -13152,7 +13188,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);
@@ -13187,7 +13223,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;
@@ -13920,7 +13956,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, {
@@ -14192,10 +14229,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',
@@ -14220,6 +14254,7 @@ const VAutocomplete = genericComponent()({
     const vMenuRef = ref();
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
+    const _searchLock = shallowRef(null);
     const {
       items,
       transformIn,
@@ -14241,9 +14276,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;
@@ -14374,6 +14409,7 @@ const VAutocomplete = genericComponent()({
         isPristine.value = true;
         vTextFieldRef.value?.focus();
       }
+      _searchLock.value = null;
     }
     function onFocusin(e) {
       isFocused.value = true;
@@ -14409,6 +14445,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
@@ -14428,6 +14465,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;
       }
@@ -14437,13 +14477,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;
@@ -14494,7 +14535,6 @@ const VAutocomplete = genericComponent()({
           "maxHeight": 310,
           "openOnClick": false,
           "closeOnContentClick": false,
-          "transition": props.transition,
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
@@ -14564,7 +14604,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, {
@@ -15922,7 +15963,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) {
@@ -15934,7 +15987,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,
@@ -18839,7 +18915,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);
@@ -19513,10 +19589,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',
@@ -19560,13 +19633,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));
         }
@@ -19594,9 +19670,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;
@@ -19677,22 +19753,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)) {
@@ -19737,13 +19810,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));
@@ -19761,11 +19836,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;
         });
       }
@@ -19779,9 +19857,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;
@@ -19804,13 +19879,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;
@@ -19826,7 +19902,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,
@@ -19861,7 +19937,6 @@ const VCombobox = genericComponent()({
           "maxHeight": 310,
           "openOnClick": false,
           "closeOnContentClick": false,
-          "transition": props.transition,
           "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
@@ -19931,7 +20006,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, {
@@ -24341,7 +24417,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;
       }
@@ -25364,10 +25440,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,
@@ -26844,7 +26921,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);
@@ -26939,6 +27016,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;
 
@@ -26946,13 +27024,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) {
@@ -28148,12 +28228,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 {};
   }
@@ -30018,6 +30098,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() {
@@ -30062,6 +30146,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;
@@ -30122,7 +30218,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
@@ -30162,12 +30260,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,
@@ -32277,7 +32376,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
@@ -32302,7 +32401,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.10.5";
+const version = "3.10.7";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useMask, useRtl, useTheme, version };