vuetify 3.10.5 → 3.10.7

package/dist/vuetify.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.10.5
+* Vuetify v3.10.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -401,8 +401,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;
@@ -5023,7 +5025,7 @@
     function unregister() {
       group?.unregister(id);
     }
-    vue.onMounted(() => register());
+    register();
     vue.onBeforeUnmount(() => unregister());
     const isSelected = vue.computed(() => {
       return group.isSelected(id);
@@ -8343,6 +8345,10 @@
   const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
   const makeVSlideGroupProps = propsFactory({
     centerActive: Boolean,
+    scrollToActive: {
+      type: Boolean,
+      default: true
+    },
     contentClass: null,
     direction: {
       type: String,
@@ -8431,7 +8437,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);
@@ -8700,7 +8706,9 @@
       type: Function,
       default: deepEqual
     },
-    ...makeVSlideGroupProps(),
+    ...makeVSlideGroupProps({
+      scrollToActive: false
+    }),
     ...makeComponentProps(),
     ...makeGroupProps({
       selectedClass: 'v-chip--selected'
@@ -9799,7 +9807,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(() => {
@@ -9807,6 +9817,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;
   };
@@ -10057,7 +10075,9 @@
         handleActiveLink();
       });
       vue.onBeforeMount(() => {
-        if (link.isActive?.value) handleActiveLink();
+        if (link.isActive?.value) {
+          vue.nextTick(() => handleActiveLink());
+        }
       });
       function handleActiveLink() {
         if (parent.value != null) {
@@ -12305,25 +12325,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
             });
@@ -12331,6 +12367,8 @@
         } else {
           parent?.unregister();
           if (IN_BROWSER) {
+            clearTimeout(focusTrapSuppressionTimeout);
+            document.removeEventListener('pointerdown', onPointerdown);
             document.removeEventListener('focusin', onFocusIn);
           }
         }
@@ -12924,7 +12962,6 @@
         e.stopPropagation();
         onFocus();
         vue.nextTick(() => {
-          model.value = null;
           reset();
           callEvent(props['onClick:clear'], e);
         });
@@ -12979,8 +13016,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,
@@ -12997,10 +13032,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,
@@ -13156,7 +13192,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);
@@ -13191,7 +13227,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;
@@ -13924,7 +13960,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, {
@@ -14196,10 +14233,7 @@
     ...omit(makeVTextFieldProps({
       modelValue: null,
       role: 'combobox'
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({
-      transition: false
-    })
+    }), ['validationValue', 'dirty', 'appendInnerIcon'])
   }, 'VAutocomplete');
   const VAutocomplete = genericComponent()({
     name: 'VAutocomplete',
@@ -14224,6 +14258,7 @@
       const vMenuRef = vue.ref();
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
+      const _searchLock = vue.shallowRef(null);
       const {
         items,
         transformIn,
@@ -14245,9 +14280,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;
@@ -14378,6 +14413,7 @@
           isPristine.value = true;
           vTextFieldRef.value?.focus();
         }
+        _searchLock.value = null;
       }
       function onFocusin(e) {
         isFocused.value = true;
@@ -14413,6 +14449,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
@@ -14432,6 +14469,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;
         }
@@ -14441,13 +14481,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;
@@ -14498,7 +14539,6 @@
             "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
-            "transition": props.transition,
             "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
@@ -14568,7 +14608,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, {
@@ -15926,7 +15967,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) {
@@ -15938,7 +15991,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,
@@ -18843,7 +18919,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);
@@ -19517,10 +19593,7 @@
     ...omit(makeVTextFieldProps({
       modelValue: null,
       role: 'combobox'
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({
-      transition: false
-    })
+    }), ['validationValue', 'dirty', 'appendInnerIcon'])
   }, 'VCombobox');
   const VCombobox = genericComponent()({
     name: 'VCombobox',
@@ -19564,13 +19637,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));
           }
@@ -19598,9 +19674,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;
@@ -19681,22 +19757,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)) {
@@ -19741,13 +19814,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));
@@ -19765,11 +19840,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;
           });
         }
@@ -19783,9 +19861,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;
@@ -19808,13 +19883,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;
@@ -19830,7 +19906,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,
@@ -19865,7 +19941,6 @@
             "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
-            "transition": props.transition,
             "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
@@ -19935,7 +20010,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, {
@@ -24345,7 +24421,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;
         }
@@ -25368,10 +25444,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,
@@ -26848,7 +26925,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);
@@ -26943,6 +27020,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;
 
@@ -26950,13 +27028,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) {
@@ -28152,12 +28232,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 {};
     }
@@ -30022,6 +30102,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() {
@@ -30066,6 +30150,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;
@@ -30126,7 +30222,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
@@ -30166,12 +30264,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,
@@ -32281,7 +32380,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
@@ -32306,7 +32405,7 @@
       ...options
     });
   };
-  const version = "3.10.5";
+  const version = "3.10.7";
   createVuetify.version = version;
 
   exports.blueprints = index;