@vuetify/nightly 3.8.2-master.2025-04-17 → 3.8.2-master.2025-04-22

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.2-master.2025-04-17
+* Vuetify v3.8.2-master.2025-04-22
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -369,15 +369,19 @@
 
   function destructComputed(getter) {
     const refs = vue.reactive({});
-    const base = vue.computed(getter);
     vue.watchEffect(() => {
-      for (const key in base.value) {
-        refs[key] = base.value[key];
+      const base = getter();
+      for (const key in base) {
+        refs[key] = base[key];
       }
     }, {
       flush: 'sync'
     });
-    return vue.toRefs(refs);
+    const obj = {};
+    for (const key in refs) {
+      obj[key] = vue.toRef(() => refs[key]);
+    }
+    return obj;
   }
 
   /** Array.includes but value can be any type */
@@ -1677,7 +1681,7 @@
     const icons = vue.inject(IconSymbol);
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
     const iconData = vue.computed(() => {
-      const iconAlias = vue.unref(props);
+      const iconAlias = vue.toValue(props);
       if (!iconAlias) return {
         component: VComponentIcon
       };
@@ -2231,7 +2235,7 @@
     const mainRect = vue.computed(() => {
       return layers.value[layers.value.length - 1].layer;
     });
-    const mainStyles = vue.computed(() => {
+    const mainStyles = vue.toRef(() => {
       return {
         '--v-layout-left': convertToUnit(mainRect.value.left),
         '--v-layout-right': convertToUnit(mainRect.value.right),
@@ -2346,10 +2350,10 @@
       layoutRect,
       rootZIndex
     });
-    const layoutClasses = vue.computed(() => ['v-layout', {
+    const layoutClasses = vue.toRef(() => ['v-layout', {
       'v-layout--full-height': props.fullHeight
     }]);
-    const layoutStyles = vue.computed(() => ({
+    const layoutStyles = vue.toRef(() => ({
       zIndex: parentLayout ? rootZIndex.value : undefined,
       position: parentLayout ? 'relative' : undefined,
       overflow: parentLayout ? 'hidden' : undefined
@@ -2740,7 +2744,7 @@
     return {
       isRtl,
       rtl,
-      rtlClasses: vue.computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+      rtlClasses: vue.toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
     };
   }
   function provideRtl(locale, rtl, props) {
@@ -2748,7 +2752,7 @@
     return {
       isRtl,
       rtl,
-      rtlClasses: vue.computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+      rtlClasses: vue.toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
     };
   }
   function useRtl() {
@@ -2972,7 +2976,7 @@
       }
       return acc;
     });
-    const current = vue.computed(() => computedThemes.value[name.value]);
+    const current = vue.toRef(() => computedThemes.value[name.value]);
     const styles = vue.computed(() => {
       const lines = [];
       if (current.value?.dark) {
@@ -3019,7 +3023,7 @@
           }
         } else {
           if (IN_BROWSER) {
-            head.addHeadObjs(vue.computed(getHead));
+            head.addHeadObjs(vue.toRef(getHead));
             vue.watchEffect(() => head.updateDOM());
           } else {
             head.addHeadObjs(getHead());
@@ -3038,7 +3042,7 @@
         }
       }
     }
-    const themeClasses = vue.computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
     return {
       install,
       isDisabled: parsedOptions.isDisabled,
@@ -3058,9 +3062,9 @@
     getCurrentInstance('provideTheme');
     const theme = vue.inject(ThemeSymbol, null);
     if (!theme) throw new Error('Could not find Vuetify theme injection');
-    const name = vue.computed(() => props.theme ?? theme.name.value);
-    const current = vue.computed(() => theme.themes.value[name.value]);
-    const themeClasses = vue.computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+    const name = vue.toRef(() => props.theme ?? theme.name.value);
+    const current = vue.toRef(() => theme.themes.value[name.value]);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -3344,6 +3348,7 @@
   const makeVDialogTransitionProps = propsFactory({
     target: [Object, Array]
   }, 'v-dialog-transition');
+  const saved = new WeakMap();
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
     props: makeVDialogTransitionProps(),
@@ -3360,13 +3365,15 @@
           await new Promise(resolve => requestAnimationFrame(resolve));
           await new Promise(resolve => requestAnimationFrame(resolve));
           el.style.visibility = '';
+          const dimensions = getDimensions(props.target, el);
           const {
             x,
             y,
             sx,
             sy,
             speed
-          } = getDimensions(props.target, el);
+          } = dimensions;
+          saved.set(el, dimensions);
           const animation = animate(el, [{
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
@@ -3395,13 +3402,19 @@
         },
         async onLeave(el, done) {
           await new Promise(resolve => requestAnimationFrame(resolve));
+          let dimensions;
+          if (!Array.isArray(props.target) && !props.target.offsetParent && saved.has(el)) {
+            dimensions = saved.get(el);
+          } else {
+            dimensions = getDimensions(props.target, el);
+          }
           const {
             x,
             y,
             sx,
             sy,
             speed
-          } = getDimensions(props.target, el);
+          } = dimensions;
           const animation = animate(el, [{}, {
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
@@ -3621,13 +3634,14 @@
   // Composables
   function useColor(colors) {
     return destructComputed(() => {
+      const _colors = vue.toValue(colors);
       const classes = [];
       const styles = {};
-      if (colors.value.background) {
-        if (isCssColor(colors.value.background)) {
-          styles.backgroundColor = colors.value.background;
-          if (!colors.value.text && isParsableColor(colors.value.background)) {
-            const backgroundColor = parseColor(colors.value.background);
+      if (_colors.background) {
+        if (isCssColor(_colors.background)) {
+          styles.backgroundColor = _colors.background;
+          if (!_colors.text && isParsableColor(_colors.background)) {
+            const backgroundColor = parseColor(_colors.background);
             if (backgroundColor.a == null || backgroundColor.a === 1) {
               const textColor = getForeground(backgroundColor);
               styles.color = textColor;
@@ -3635,15 +3649,15 @@
             }
           }
         } else {
-          classes.push(`bg-${colors.value.background}`);
+          classes.push(`bg-${_colors.background}`);
         }
       }
-      if (colors.value.text) {
-        if (isCssColor(colors.value.text)) {
-          styles.color = colors.value.text;
-          styles.caretColor = colors.value.text;
+      if (_colors.text) {
+        if (isCssColor(_colors.text)) {
+          styles.color = _colors.text;
+          styles.caretColor = _colors.text;
         } else {
-          classes.push(`text-${colors.value.text}`);
+          classes.push(`text-${_colors.text}`);
         }
       }
       return {
@@ -3652,27 +3666,25 @@
       };
     });
   }
-  function useTextColor(props, name) {
-    const colors = vue.computed(() => ({
-      text: vue.isRef(props) ? props.value : name ? props[name] : null
-    }));
+  function useTextColor(color) {
     const {
       colorClasses: textColorClasses,
       colorStyles: textColorStyles
-    } = useColor(colors);
+    } = useColor(() => ({
+      text: vue.toValue(color)
+    }));
     return {
       textColorClasses,
       textColorStyles
     };
   }
-  function useBackgroundColor(props, name) {
-    const colors = vue.computed(() => ({
-      background: vue.isRef(props) ? props.value : name ? props[name] : null
-    }));
+  function useBackgroundColor(color) {
     const {
       colorClasses: backgroundColorClasses,
       colorStyles: backgroundColorStyles
-    } = useColor(colors);
+    } = useColor(() => ({
+      background: vue.toValue(color)
+    }));
     return {
       backgroundColorClasses,
       backgroundColorStyles
@@ -3856,7 +3868,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -3963,7 +3975,7 @@
         };
         poll();
       }
-      const containClasses = vue.computed(() => ({
+      const containClasses = vue.toRef(() => ({
         'v-img__img--cover': props.cover,
         'v-img__img--contain': !props.cover
       }));
@@ -4100,16 +4112,13 @@
   function useBorder(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const borderClasses = vue.computed(() => {
-      const border = vue.isRef(props) ? props.value : props.border;
-      const classes = [];
+      const border = props.border;
       if (border === true || border === '') {
-        classes.push(`${name}--border`);
+        return `${name}--border`;
       } else if (typeof border === 'string' || border === 0) {
-        for (const value of String(border).split(' ')) {
-          classes.push(`border-${value}`);
-        }
+        return String(border).split(' ').map(v => `border-${v}`);
       }
-      return classes;
+      return [];
     });
     return {
       borderClasses
@@ -4134,12 +4143,10 @@
     }
   }, 'elevation');
   function useElevation(props) {
-    const elevationClasses = vue.computed(() => {
+    const elevationClasses = vue.toRef(() => {
       const elevation = vue.isRef(props) ? props.value : props.elevation;
-      const classes = [];
-      if (elevation == null) return classes;
-      classes.push(`elevation-${elevation}`);
-      return classes;
+      if (elevation == null) return [];
+      return [`elevation-${elevation}`];
     });
     return {
       elevationClasses
@@ -4190,7 +4197,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -4399,7 +4406,7 @@
         isBooted.value = true;
       });
     });
-    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
+    const ssrBootStyles = vue.toRef(() => !isBooted.value ? {
       transition: 'none !important'
     } : undefined);
     return {
@@ -4467,7 +4474,7 @@
       } = useScroll(props, {
         canScroll
       });
-      const canHide = vue.computed(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
+      const canHide = vue.toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
       const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
       const isFlat = vue.computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
@@ -4478,7 +4485,7 @@
         if (!canHide.value) return height + extensionHeight;
         return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
       });
-      useToggleScope(vue.computed(() => !!props.scrollBehavior), () => {
+      useToggleScope(() => !!props.scrollBehavior, () => {
         vue.watchEffect(() => {
           if (canHide.value) {
             if (scrollBehavior.value.inverted) {
@@ -4499,11 +4506,11 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.toRef(props, 'location'),
+        position: vue.toRef(() => props.location),
         layoutSize: height,
         elementSize: vue.shallowRef(undefined),
         active: isActive,
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => {
         const toolbarProps = VToolbar.filterProps(props);
@@ -4546,7 +4553,7 @@
   }, 'density');
   function useDensity(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const densityClasses = vue.computed(() => {
+    const densityClasses = vue.toRef(() => {
       return `${name}--density-${props.density}`;
     });
     return {
@@ -4576,24 +4583,24 @@
   }, 'variant');
   function useVariant(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const variantClasses = vue.computed(() => {
+    const variantClasses = vue.toRef(() => {
       const {
         variant
-      } = vue.unref(props);
+      } = vue.toValue(props);
       return `${name}--variant-${variant}`;
     });
     const {
       colorClasses,
       colorStyles
-    } = useColor(vue.computed(() => {
+    } = useColor(() => {
       const {
         variant,
         color
-      } = vue.unref(props);
+      } = vue.toValue(props);
       return {
         [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color
       };
-    }));
+    });
     return {
       colorClasses,
       colorStyles,
@@ -4638,11 +4645,11 @@
       provideDefaults({
         VBtn: {
           height: 'auto',
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          density: vue.toRef(props, 'density'),
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          density: vue.toRef(() => props.density),
           flat: true,
-          variant: vue.toRef(props, 'variant')
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => {
@@ -4692,7 +4699,7 @@
       if (!required) return group;
       throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
     }
-    const value = vue.toRef(props, 'value');
+    const value = vue.toRef(() => props.value);
     const disabled = vue.computed(() => !!(group.disabled.value || props.disabled));
     group.register({
       id,
@@ -4841,12 +4848,12 @@
       unregister,
       selected,
       select,
-      disabled: vue.toRef(props, 'disabled'),
+      disabled: vue.toRef(() => props.disabled),
       prev: () => step(items.length - 1),
       next: () => step(1),
       isSelected: id => selected.value.includes(id),
-      selectedClass: vue.computed(() => props.selectedClass),
-      items: vue.computed(() => items),
+      selectedClass: vue.toRef(() => props.selectedClass),
+      items: vue.toRef(() => items),
       getItemIndex: value => getItemIndex(items, value)
     };
     vue.provide(injectKey, state);
@@ -4944,14 +4951,15 @@
   function useSize(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     return destructComputed(() => {
+      const size = props.size;
       let sizeClasses;
       let sizeStyles;
-      if (includes(predefinedSizes, props.size)) {
-        sizeClasses = `${name}--size-${props.size}`;
-      } else if (props.size) {
+      if (includes(predefinedSizes, size)) {
+        sizeClasses = `${name}--size-${size}`;
+      } else if (size) {
         sizeStyles = {
-          width: convertToUnit(props.size),
-          height: convertToUnit(props.size)
+          width: convertToUnit(size),
+          height: convertToUnit(size)
         };
       }
       return {
@@ -4983,20 +4991,20 @@
         attrs,
         slots
       } = _ref;
-      const slotIcon = vue.ref();
+      const slotIcon = vue.shallowRef();
       const {
         themeClasses
       } = useTheme();
       const {
         iconData
-      } = useIcon(vue.computed(() => slotIcon.value || props.icon));
+      } = useIcon(() => slotIcon.value || props.icon);
       const {
         sizeClasses
       } = useSize(props);
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       useRender(() => {
         const slotValue = slots.default?.();
         if (slotValue) {
@@ -5102,11 +5110,11 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const {
         textColorClasses: underlayColorClasses,
         textColorStyles: underlayColorStyles
-      } = useTextColor(vue.toRef(props, 'bgColor'));
+      } = useTextColor(() => props.bgColor);
       const {
         intersectionRef,
         isIntersecting
@@ -5115,15 +5123,15 @@
         resizeRef,
         contentRect
       } = useResizeObserver();
-      const normalizedValue = vue.computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
-      const width = vue.computed(() => Number(props.width));
-      const size = vue.computed(() => {
+      const normalizedValue = vue.toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
+      const width = vue.toRef(() => Number(props.width));
+      const size = vue.toRef(() => {
         // Get size from element if size prop value is small, large etc
         return sizeStyles.value ? Number(props.size) : contentRect.value ? contentRect.value.width : Math.max(width.value, 32);
       });
-      const diameter = vue.computed(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
-      const strokeWidth = vue.computed(() => width.value / size.value * diameter.value);
-      const strokeDashOffset = vue.computed(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
+      const diameter = vue.toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
+      const strokeWidth = vue.toRef(() => width.value / size.value * diameter.value);
+      const strokeDashOffset = vue.toRef(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
       vue.watchEffect(() => {
         intersectionRef.value = root.value;
         resizeRef.value = root.value;
@@ -5301,19 +5309,19 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(props, 'color');
+      } = useTextColor(() => props.color);
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.computed(() => props.bgColor || props.color));
+      } = useBackgroundColor(() => props.bgColor || props.color);
       const {
         backgroundColorClasses: bufferColorClasses,
         backgroundColorStyles: bufferColorStyles
-      } = useBackgroundColor(vue.computed(() => props.bufferColor || props.bgColor || props.color));
+      } = useBackgroundColor(() => props.bufferColor || props.bgColor || props.color);
       const {
         backgroundColorClasses: barColorClasses,
         backgroundColorStyles: barColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -5420,7 +5428,7 @@
   }, 'loader');
   function useLoader(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const loaderClasses = vue.computed(() => ({
+    const loaderClasses = vue.toRef(() => ({
       [`${name}--loading`]: props.loading
     }));
     return {
@@ -5459,7 +5467,7 @@
   }, 'position');
   function usePosition(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const positionClasses = vue.computed(() => {
+    const positionClasses = vue.toRef(() => {
       return props.position ? `${name}--${props.position}` : undefined;
     });
     return {
@@ -5480,12 +5488,12 @@
   }
   function useLink(props, attrs) {
     const RouterLink = vue.resolveDynamicComponent('RouterLink');
-    const isLink = vue.computed(() => !!(props.href || props.to));
+    const isLink = vue.toRef(() => !!(props.href || props.to));
     const isClickable = vue.computed(() => {
       return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
     });
     if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
-      const href = vue.toRef(props, 'href');
+      const href = vue.toRef(() => props.href);
       return {
         isLink,
         isClickable,
@@ -5495,12 +5503,12 @@
         })
       };
     }
+
     // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
-    const linkProps = vue.computed(() => ({
-      ...props,
-      to: vue.toRef(() => props.to || '')
-    }));
-    const routerLink = RouterLink.useLink(linkProps.value);
+    const routerLink = RouterLink.useLink({
+      to: vue.toRef(() => props.to || ''),
+      replace: vue.toRef(() => props.replace)
+    });
     // Actual link needs to be undefined when to prop is not used
     const link = vue.computed(() => props.to ? routerLink : undefined);
     const route = useRoute();
@@ -5520,7 +5528,7 @@
       href,
       linkProps: vue.reactive({
         href,
-        'aria-current': vue.computed(() => isActive.value ? 'page' : undefined)
+        'aria-current': vue.toRef(() => isActive.value ? 'page' : undefined)
       })
     };
   }
@@ -5969,7 +5977,7 @@
         }
         return group?.isSelected.value;
       });
-      const color = vue.computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
+      const color = vue.toRef(() => isActive.value ? props.activeColor ?? props.color : props.color);
       const variantProps = vue.computed(() => {
         const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
         return {
@@ -5983,7 +5991,7 @@
         variantClasses
       } = useVariant(variantProps);
       const isDisabled = vue.computed(() => group?.disabled.value || props.disabled);
-      const isElevated = vue.computed(() => {
+      const isElevated = vue.toRef(() => {
         return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
       });
       const valueAttr = vue.computed(() => {
@@ -6186,15 +6194,11 @@
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
-      const icon = vue.computed(() => {
+      const icon = vue.toRef(() => {
         if (props.icon === false) return undefined;
         if (!props.type) return props.icon;
         return props.icon ?? `$${props.type}`;
       });
-      const variantProps = vue.computed(() => ({
-        color: props.color ?? props.type,
-        variant: props.variant
-      }));
       const {
         themeClasses
       } = provideTheme(props);
@@ -6202,7 +6206,10 @@
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(variantProps);
+      } = useVariant(() => ({
+        color: props.color ?? props.type,
+        variant: props.variant
+      }));
       const {
         densityClasses
       } = useDensity(props);
@@ -6224,11 +6231,11 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'borderColor'));
+      } = useTextColor(() => props.borderColor);
       const {
         t
       } = useLocale();
-      const closeProps = vue.computed(() => ({
+      const closeProps = vue.toRef(() => ({
         'aria-label': t(props.closeLabel),
         onClick(e) {
           isActive.value = false;
@@ -6465,8 +6472,8 @@
       } = _ref;
       const modelValue = useProxiedModel(props, 'modelValue');
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-selection-control-group-${uid}`);
-      const name = vue.computed(() => props.name || id.value);
+      const id = vue.toRef(() => props.id || `v-selection-control-group-${uid}`);
+      const name = vue.toRef(() => props.name || id.value);
       const updateHandlers = new Set();
       vue.provide(VSelectionControlGroupSymbol, {
         modelValue,
@@ -6482,20 +6489,20 @@
       });
       provideDefaults({
         [props.defaultsTarget]: {
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled'),
-          density: vue.toRef(props, 'density'),
-          error: vue.toRef(props, 'error'),
-          inline: vue.toRef(props, 'inline'),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled),
+          density: vue.toRef(() => props.density),
+          error: vue.toRef(() => props.error),
+          inline: vue.toRef(() => props.inline),
           modelValue,
-          multiple: vue.computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
+          multiple: vue.toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
           name,
-          falseIcon: vue.toRef(props, 'falseIcon'),
-          trueIcon: vue.toRef(props, 'trueIcon'),
-          readonly: vue.toRef(props, 'readonly'),
-          ripple: vue.toRef(props, 'ripple'),
-          type: vue.toRef(props, 'type'),
-          valueComparator: vue.toRef(props, 'valueComparator')
+          falseIcon: vue.toRef(() => props.falseIcon),
+          trueIcon: vue.toRef(() => props.trueIcon),
+          readonly: vue.toRef(() => props.readonly),
+          ripple: vue.toRef(() => props.ripple),
+          type: vue.toRef(() => props.type),
+          valueComparator: vue.toRef(() => props.valueComparator)
         }
       });
       useRender(() => vue.createVNode("div", {
@@ -6551,16 +6558,16 @@
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(vue.computed(() => {
+    } = useTextColor(() => {
       if (props.error || props.disabled) return undefined;
       return model.value ? props.color : props.baseColor;
-    }));
+    });
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(vue.computed(() => {
+    } = useBackgroundColor(() => {
       return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
-    }));
+    });
     const icon = vue.computed(() => model.value ? props.trueIcon : props.falseIcon);
     return {
       group,
@@ -6605,8 +6612,8 @@
       const isFocused = vue.shallowRef(false);
       const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
-      const id = vue.computed(() => props.id || `input-${uid}`);
-      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const id = vue.toRef(() => props.id || `input-${uid}`);
+      const isInteractive = vue.toRef(() => !props.disabled && !props.readonly);
       group?.onForceUpdate(() => {
         if (input.value) {
           input.value.checked = model.value;
@@ -6744,10 +6751,10 @@
           indeterminate.value = false;
         }
       }
-      const falseIcon = vue.computed(() => {
+      const falseIcon = vue.toRef(() => {
         return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
       });
-      const trueIcon = vue.computed(() => {
+      const trueIcon = vue.toRef(() => {
         return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
       useRender(() => {
@@ -6835,7 +6842,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.computed(() => props.color));
+      } = useTextColor(() => props.color);
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
@@ -6865,7 +6872,7 @@
   function useFocus(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const isFocused = useProxiedModel(props, 'focused');
-    const focusClasses = vue.computed(() => {
+    const focusClasses = vue.toRef(() => {
       return {
         [`${name}--focused`]: isFocused.value
       };
@@ -6904,8 +6911,8 @@
   }, 'form');
   function createForm(props) {
     const model = useProxiedModel(props, 'modelValue');
-    const isDisabled = vue.computed(() => props.disabled);
-    const isReadonly = vue.computed(() => props.readonly);
+    const isDisabled = vue.toRef(() => props.disabled);
+    const isReadonly = vue.toRef(() => props.readonly);
     const isValidating = vue.shallowRef(false);
     const items = vue.ref([]);
     const errors = vue.ref([]);
@@ -6995,7 +7002,7 @@
       isValidating,
       isValid: model,
       items,
-      validateOn: vue.toRef(props, 'validateOn')
+      validateOn: vue.toRef(() => props.validateOn)
     });
     return {
       errors,
@@ -7310,10 +7317,10 @@
         resetValidation,
         validate
       }));
-      const color = vue.computed(() => {
+      const color = vue.toRef(() => {
         return props.error || props.disabled ? undefined : props.focused ? props.color : props.baseColor;
       });
-      const iconColor = vue.computed(() => {
+      const iconColor = vue.toRef(() => {
         if (!props.iconColor) return undefined;
         return props.iconColor === true ? color.value : props.iconColor;
       });
@@ -7403,7 +7410,6 @@
         blur
       } = useFocus(props);
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
         const inputProps = VInput.filterProps(props);
@@ -7413,7 +7419,7 @@
         }, rootAttrs, inputProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "id": id.value,
+          "id": props.id || `checkbox-${uid}`,
           "focused": isFocused.value,
           "style": props.style
         }), {
@@ -7597,7 +7603,7 @@
         return false;
       }
     });
-    const displayClasses = vue.computed(() => {
+    const displayClasses = vue.toRef(() => {
       if (!name) return {};
       return {
         [`${name}--mobile`]: mobile.value
@@ -7712,7 +7718,7 @@
     const goTo = {
       ...goToInstance,
       // can be set via VLocaleProvider
-      rtl: vue.computed(() => goToInstance.rtl.value || isRtl.value)
+      rtl: vue.toRef(() => goToInstance.rtl.value || isRtl.value)
     };
     async function go(target, options) {
       return scrollTo(target, mergeDeep(_options, options), false, goTo);
@@ -8204,11 +8210,11 @@
       } = useGroup(props, VChipGroupSymbol);
       provideDefaults({
         VChip: {
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled'),
-          filter: vue.toRef(props, 'filter'),
-          variant: vue.toRef(props, 'variant')
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled),
+          filter: vue.toRef(() => props.filter),
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => {
@@ -8334,9 +8340,9 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const group = useGroupItem(props, VChipGroupSymbol, false);
       const link = useLink(props, attrs);
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
+      const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
-      const closeProps = vue.computed(() => ({
+      const closeProps = vue.toRef(() => ({
         'aria-label': t(props.closeLabel),
         onClick(e) {
           e.preventDefault();
@@ -8345,18 +8351,17 @@
           emit('click:close', e);
         }
       }));
-      const variantProps = vue.computed(() => {
+      const {
+        colorClasses,
+        colorStyles,
+        variantClasses
+      } = useVariant(() => {
         const showColor = !group || group.isSelected.value;
         return {
           color: showColor ? props.color ?? props.baseColor : props.baseColor,
           variant: props.variant
         };
       });
-      const {
-        colorClasses,
-        colorStyles,
-        variantClasses
-      } = useVariant(variantProps);
       function onClick(e) {
         emit('click', e);
         if (!isClickable.value) return;
@@ -9023,8 +9028,8 @@
       id: vue.shallowRef(),
       root: {
         opened,
-        activatable: vue.toRef(props, 'activatable'),
-        selectable: vue.toRef(props, 'selectable'),
+        activatable: vue.toRef(() => props.activatable),
+        selectable: vue.toRef(() => props.selectable),
         activated,
         selected,
         selectedValues: vue.computed(() => {
@@ -9153,7 +9158,7 @@
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
     const uidSymbol = Symbol('nested item');
-    const computedId = vue.computed(() => id.value !== undefined ? id.value : uidSymbol);
+    const computedId = vue.computed(() => vue.toValue(id) ?? uidSymbol);
     const item = {
       ...parent,
       id: computedId,
@@ -9229,7 +9234,7 @@
         isOpen,
         open,
         id: _id
-      } = useNestedItem(vue.toRef(props, 'value'), true);
+      } = useNestedItem(() => props.value, true);
       const id = vue.computed(() => `v-list-group--id-${String(_id.value)}`);
       const list = useList();
       const {
@@ -9403,12 +9408,12 @@
       } = useNestedItem(id, false);
       const list = useList();
       const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
+      const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
-      const roundedProps = vue.computed(() => props.rounded || props.nav);
-      const color = vue.computed(() => props.color ?? props.activeColor);
-      const variantProps = vue.computed(() => ({
+      const roundedProps = vue.toRef(() => props.rounded || props.nav);
+      const color = vue.toRef(() => props.color ?? props.activeColor);
+      const variantProps = vue.toRef(() => ({
         color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
@@ -9451,7 +9456,7 @@
       const {
         roundedClasses
       } = useRounded(roundedProps);
-      const lineClasses = vue.computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+      const lineClasses = vue.toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
       const slotProps = vue.computed(() => ({
         isActive: isActive.value,
         select,
@@ -9621,7 +9626,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       useRender(() => {
         const hasText = !!(slots.default || props.title);
         return vue.createVNode(props.tag, {
@@ -9666,7 +9671,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const dividerStyles = vue.computed(() => {
         const styles = {};
         if (props.length) {
@@ -10028,7 +10033,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -10051,30 +10056,30 @@
         select,
         getPath
       } = useNested(props);
-      const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
-      const activeColor = vue.toRef(props, 'activeColor');
-      const baseColor = vue.toRef(props, 'baseColor');
-      const color = vue.toRef(props, 'color');
+      const lineClasses = vue.toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+      const activeColor = vue.toRef(() => props.activeColor);
+      const baseColor = vue.toRef(() => props.baseColor);
+      const color = vue.toRef(() => props.color);
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
           baseColor,
           color,
-          expandIcon: vue.toRef(props, 'expandIcon'),
-          collapseIcon: vue.toRef(props, 'collapseIcon')
+          expandIcon: vue.toRef(() => props.expandIcon),
+          collapseIcon: vue.toRef(() => props.collapseIcon)
         },
         VListItem: {
-          activeClass: vue.toRef(props, 'activeClass'),
+          activeClass: vue.toRef(() => props.activeClass),
           activeColor,
           baseColor,
           color,
-          density: vue.toRef(props, 'density'),
-          disabled: vue.toRef(props, 'disabled'),
-          lines: vue.toRef(props, 'lines'),
-          nav: vue.toRef(props, 'nav'),
-          slim: vue.toRef(props, 'slim'),
-          variant: vue.toRef(props, 'variant')
+          density: vue.toRef(() => props.density),
+          disabled: vue.toRef(() => props.disabled),
+          lines: vue.toRef(() => props.lines),
+          nav: vue.toRef(() => props.nav),
+          slim: vue.toRef(() => props.slim),
+          variant: vue.toRef(() => props.variant)
         }
       });
       const isFocused = vue.shallowRef(false);
@@ -10402,13 +10407,22 @@
     vue.onScopeDispose(() => {
       observer.disconnect();
     });
+    let targetBox = new Box({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
 
     // eslint-disable-next-line max-statements
     function updateLocation() {
       observe = false;
       requestAnimationFrame(() => observe = true);
       if (!data.target.value || !data.contentEl.value) return;
-      const targetBox = getTargetBox(data.target.value);
+      if (Array.isArray(data.target.value) || data.target.value.offsetParent) {
+        targetBox = getTargetBox(data.target.value);
+      } // Otherwise target element is hidden, use last known value
+
       const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
       const viewportMargin = 12;
@@ -11118,7 +11132,7 @@
   }, 'lazy');
   function useLazy(props, active) {
     const isBooted = vue.shallowRef(false);
-    const hasContent = vue.computed(() => isBooted.value || props.eager || active.value);
+    const hasContent = vue.toRef(() => isBooted.value || props.eager || active.value);
     vue.watch(active, () => isBooted.value = true);
     function onAfterLeave() {
       if (!props.eager) isBooted.value = false;
@@ -11155,10 +11169,10 @@
       activeChildren: new Set()
     });
     vue.provide(StackSymbol, stack);
-    const _zIndex = vue.shallowRef(Number(zIndex.value));
+    const _zIndex = vue.shallowRef(Number(vue.toValue(zIndex)));
     useToggleScope(isActive, () => {
       const lastZIndex = globalStack.at(-1)?.[1];
-      _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
+      _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(vue.toValue(zIndex));
       if (createStackEntry) {
         globalStack.push([vm.uid, _zIndex.value]);
       }
@@ -11178,11 +11192,11 @@
         setTimeout(() => globalTop.value = _isTop);
       });
     }
-    const localTop = vue.computed(() => !stack.activeChildren.size);
+    const localTop = vue.toRef(() => !stack.activeChildren.size);
     return {
       globalTop: vue.readonly(globalTop),
       localTop,
-      stackStyles: vue.computed(() => ({
+      stackStyles: vue.toRef(() => ({
         zIndex: _zIndex.value
       }))
     };
@@ -11399,14 +11413,14 @@
         hasContent,
         onAfterLeave: _onAfterLeave
       } = useLazy(props, isActive);
-      const scrimColor = useBackgroundColor(vue.computed(() => {
+      const scrimColor = useBackgroundColor(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
-      }));
+      });
       const {
         globalTop,
         localTop,
         stackStyles
-      } = useStack(isActive, vue.toRef(props, 'zIndex'), props._disableGlobalStack);
+      } = useStack(isActive, () => props.zIndex, props._disableGlobalStack);
       const {
         activatorEl,
         activatorRef,
@@ -11732,7 +11746,7 @@
         isRtl
       } = useRtl();
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-menu-${uid}`);
+      const id = vue.toRef(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
       const openChildren = vue.shallowRef(new Set());
@@ -11900,7 +11914,7 @@
       let {
         slots
       } = _ref;
-      const counter = vue.computed(() => {
+      const counter = vue.toRef(() => {
         return props.max ? `${props.value} / ${props.max}` : String(props.value);
       });
       useRender(() => vue.createVNode(MaybeTransition, {
@@ -12027,12 +12041,12 @@
       const {
         rtlClasses
       } = useRtl();
-      const isActive = vue.computed(() => props.dirty || props.active);
-      const hasLabel = vue.computed(() => !!(props.label || slots.label));
-      const hasFloatingLabel = vue.computed(() => !props.singleLine && hasLabel.value);
+      const isActive = vue.toRef(() => props.dirty || props.active);
+      const hasLabel = vue.toRef(() => !!(props.label || slots.label));
+      const hasFloatingLabel = vue.toRef(() => !props.singleLine && hasLabel.value);
       const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
-      const messagesId = vue.computed(() => `${id.value}-messages`);
+      const messagesId = vue.toRef(() => `${id.value}-messages`);
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
@@ -12047,7 +12061,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         textColorClasses,
         textColorStyles
@@ -12774,7 +12788,7 @@
         paddingTop,
         paddingBottom,
         computedItems
-      } = useVirtual(props, vue.toRef(props, 'items'));
+      } = useVirtual(props, vue.toRef(() => props.items));
       useToggleScope(() => props.renderless, () => {
         function handleListeners() {
           let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -13011,7 +13025,7 @@
           _menu.value = v;
         }
       });
-      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
+      const label = vue.toRef(() => menu.value ? props.closeText : props.openText);
       const computedMenuProps = vue.computed(() => {
         return {
           ...props.menuProps,
@@ -13513,7 +13527,6 @@
       const vMenuRef = vue.ref();
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -13522,7 +13535,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => vTextFieldRef.value?.color);
       const search = useProxiedModel(props, 'search', '');
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
         const transformed = transformOut(v);
@@ -13971,7 +13984,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -13981,7 +13994,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'textColor'));
+      } = useTextColor(() => props.textColor);
       const {
         themeClasses
       } = useTheme();
@@ -14093,7 +14106,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'bgColor');
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -14122,8 +14135,8 @@
       const {
         themeClasses
       } = provideTheme(props);
-      const color = vue.toRef(props, 'color');
-      const density = vue.toRef(props, 'density');
+      const color = vue.toRef(() => props.color);
+      const density = vue.toRef(() => props.density);
       provideDefaults({
         VBannerActions: {
           color,
@@ -14232,7 +14245,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -14252,19 +14265,19 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.computed(() => 'bottom'),
-        layoutSize: vue.computed(() => isActive.value ? height.value : 0),
+        position: vue.toRef(() => 'bottom'),
+        layoutSize: vue.toRef(() => isActive.value ? height.value : 0),
         elementSize: height,
         active: isActive,
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useGroup(props, VBtnToggleSymbol);
       provideDefaults({
         VBtn: {
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          density: vue.toRef(props, 'density'),
-          stacked: vue.computed(() => props.mode !== 'horizontal'),
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          density: vue.toRef(() => props.density),
+          stacked: vue.toRef(() => props.mode !== 'horizontal'),
           variant: 'text'
         }
       }, {
@@ -14500,11 +14513,10 @@
       } = _ref;
       const link = useLink(props, attrs);
       const isActive = vue.computed(() => props.active || link.isActive?.value);
-      const color = vue.computed(() => isActive.value ? props.activeColor : props.color);
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => isActive.value ? props.activeColor : props.color);
       useRender(() => {
         return vue.createVNode(props.tag, {
           "class": ['v-breadcrumbs-item', {
@@ -14559,7 +14571,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -14568,13 +14580,13 @@
       } = useRounded(props);
       provideDefaults({
         VBreadcrumbsDivider: {
-          divider: vue.toRef(props, 'divider')
+          divider: vue.toRef(() => props.divider)
         },
         VBreadcrumbsItem: {
-          activeClass: vue.toRef(props, 'activeClass'),
-          activeColor: vue.toRef(props, 'activeColor'),
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled')
+          activeClass: vue.toRef(() => props.activeClass),
+          activeColor: vue.toRef(() => props.activeColor),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled)
         }
       });
       const items = vue.computed(() => props.items.map(item => {
@@ -14897,10 +14909,10 @@
         roundedClasses
       } = useRounded(props);
       const link = useLink(props, attrs);
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
-      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value));
       useRender(() => {
-        const Tag = isLink.value ? 'a' : props.tag;
+        const isLink = props.link !== false && link.isLink.value;
+        const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
+        const Tag = isLink ? 'a' : props.tag;
         const hasTitle = !!(slots.title || props.title != null);
         const hasSubtitle = !!(slots.subtitle || props.subtitle != null);
         const hasHeader = hasTitle || hasSubtitle;
@@ -14914,10 +14926,10 @@
             'v-card--disabled': props.disabled,
             'v-card--flat': props.flat,
             'v-card--hover': props.hover && !(props.disabled || props.flat),
-            'v-card--link': isClickable.value
+            'v-card--link': isClickable
           }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
           "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
-          "onClick": isClickable.value && link.navigate,
+          "onClick": isClickable && link.navigate,
           "tabindex": props.disabled ? -1 : undefined
         }, link.linkProps), {
           default: () => [hasImage && vue.createVNode("div", {
@@ -14962,8 +14974,8 @@
             default: () => [slots.text?.() ?? props.text]
           }), slots.default?.(), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
-          }), genOverlays(isClickable.value, 'v-card')]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
+          }), genOverlays(isClickable, 'v-card')]
+        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple]]);
       });
       return {};
     }
@@ -15176,8 +15188,8 @@
         transitionHeight,
         rootRef
       });
-      const canMoveBack = vue.computed(() => props.continuous || activeIndex.value !== 0);
-      const canMoveForward = vue.computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+      const canMoveBack = vue.toRef(() => props.continuous || activeIndex.value !== 0);
+      const canMoveForward = vue.toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
       function prev() {
         canMoveBack.value && group.prev();
       }
@@ -16079,7 +16091,7 @@
     const {
       isRtl
     } = useRtl();
-    const isReversed = vue.toRef(props, 'reverse');
+    const isReversed = vue.toRef(() => props.reverse);
     const vertical = vue.computed(() => props.direction === 'vertical');
     const indexFromEnd = vue.computed(() => vertical.value !== isReversed.value);
     const {
@@ -16093,7 +16105,7 @@
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
     const numTicks = vue.computed(() => (max.value - min.value) / step.value);
-    const disabled = vue.toRef(props, 'disabled');
+    const disabled = vue.toRef(() => props.disabled);
     const thumbColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
     const trackColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
     const trackFillColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
@@ -16195,7 +16207,7 @@
       const percentage = (val - min.value) / (max.value - min.value) * 100;
       return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
     };
-    const showTicks = vue.toRef(props, 'showTicks');
+    const showTicks = vue.toRef(() => props.showTicks);
     const parsedTicks = vue.computed(() => {
       if (!showTicks.value) return [];
       if (!props.ticks) {
@@ -16226,11 +16238,11 @@
     }));
     const data = {
       activeThumbRef,
-      color: vue.toRef(props, 'color'),
+      color: vue.toRef(() => props.color),
       decimals,
       disabled,
-      direction: vue.toRef(props, 'direction'),
-      elevation: vue.toRef(props, 'elevation'),
+      direction: vue.toRef(() => props.direction),
+      elevation: vue.toRef(() => props.elevation),
       hasLabels,
       isReversed,
       indexFromEnd,
@@ -16243,16 +16255,16 @@
       parsedTicks,
       parseMouseMove,
       position,
-      readonly: vue.toRef(props, 'readonly'),
-      rounded: vue.toRef(props, 'rounded'),
+      readonly: vue.toRef(() => props.readonly),
+      rounded: vue.toRef(() => props.rounded),
       roundValue,
       showTicks,
       startOffset,
       step,
       thumbSize,
       thumbColor,
-      thumbLabel: vue.toRef(props, 'thumbLabel'),
-      ticks: vue.toRef(props, 'ticks'),
+      thumbLabel: vue.toRef(() => props.thumbLabel),
+      ticks: vue.toRef(() => props.ticks),
       tickSize,
       trackColor,
       trackContainerRef,
@@ -17171,7 +17183,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -17218,7 +17230,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       useRender(() => {
         const sheetProps = VSheet.filterProps(props);
         const hasTitle = !!(props.title || slots.title);
@@ -18203,7 +18215,6 @@
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -18212,7 +18223,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => vTextFieldRef.value?.color);
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
@@ -18267,7 +18278,7 @@
           _menu.value = v;
         }
       });
-      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
+      const label = vue.toRef(() => menu.value ? props.closeText : props.openText);
       vue.watch(_search, value => {
         if (cleared) {
           // wait for clear to finish, VTextField sets _search to null
@@ -18773,7 +18784,7 @@
   }, 'DataTable-expand');
   const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
   function provideExpanded(props) {
-    const expandOnClick = vue.toRef(props, 'expandOnClick');
+    const expandOnClick = vue.toRef(() => props.expandOnClick);
     const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
       return new Set(v);
     }, v => {
@@ -18960,23 +18971,23 @@
       search
     } = _ref;
     const vm = getCurrentInstance('VDataTable');
-    const options = vue.computed(() => ({
+    const options = () => ({
       page: page.value,
       itemsPerPage: itemsPerPage.value,
       sortBy: sortBy.value,
       groupBy: groupBy.value,
       search: search.value
-    }));
+    });
     let oldOptions = null;
-    vue.watch(options, () => {
-      if (deepEqual(oldOptions, options.value)) return;
+    vue.watch(options, value => {
+      if (deepEqual(oldOptions, value)) return;
 
       // Reset page when searching
-      if (oldOptions && oldOptions.search !== options.value.search) {
+      if (oldOptions && oldOptions.search !== value.search) {
         page.value = 1;
       }
-      vm.emit('update:options', options.value);
-      oldOptions = options.value;
+      vm.emit('update:options', value);
+      oldOptions = value;
     }, {
       deep: true,
       immediate: true
@@ -19257,7 +19268,7 @@
       });
       return !!items.length && isSelected(items);
     });
-    const showSelectAll = vue.computed(() => selectStrategy.value.showSelectAll);
+    const showSelectAll = vue.toRef(() => selectStrategy.value.showSelectAll);
     const data = {
       toggleSelect,
       select,
@@ -19295,8 +19306,8 @@
   const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
   function createSort(props) {
     const sortBy = useProxiedModel(props, 'sortBy');
-    const mustSort = vue.toRef(props, 'mustSort');
-    const multiSort = vue.toRef(props, 'multiSort');
+    const mustSort = vue.toRef(() => props.mustSort);
+    const multiSort = vue.toRef(() => props.multiSort);
     return {
       sortBy,
       mustSort,
@@ -19514,7 +19525,7 @@
         slots
       } = _ref;
       const groupBy = useProxiedModel(props, 'groupBy');
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         items
       } = useDataIteratorItems(props);
@@ -19558,7 +19569,7 @@
       const {
         flatItems
       } = useGroupedItems(sortedItems, groupBy, opened);
-      const itemsLength = vue.computed(() => flatItems.value.length);
+      const itemsLength = vue.toRef(() => flatItems.value.length);
       const {
         startIndex,
         stopIndex,
@@ -19838,13 +19849,13 @@
       } = useRefs();
       provideDefaults({
         VPaginationBtn: {
-          color: vue.toRef(props, 'color'),
-          border: vue.toRef(props, 'border'),
-          density: vue.toRef(props, 'density'),
-          size: vue.toRef(props, 'size'),
-          variant: vue.toRef(props, 'variant'),
-          rounded: vue.toRef(props, 'rounded'),
-          elevation: vue.toRef(props, 'elevation')
+          color: vue.toRef(() => props.color),
+          border: vue.toRef(() => props.border),
+          density: vue.toRef(() => props.density),
+          size: vue.toRef(() => props.size),
+          variant: vue.toRef(() => props.variant),
+          rounded: vue.toRef(() => props.rounded),
+          elevation: vue.toRef(() => props.elevation)
         }
       });
       const items = vue.computed(() => {
@@ -20485,7 +20496,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         displayClasses,
         mobile
@@ -21143,13 +21154,13 @@
         filterFunctions
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
       } = useDataTableItems(props, columns);
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         filteredItems
       } = useFilter(props, items, search, {
@@ -21232,10 +21243,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -21332,13 +21343,13 @@
         sortRawFunctions
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
       } = useDataTableItems(props, columns);
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         filteredItems
       } = useFilter(props, items, search, {
@@ -21414,10 +21425,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -21570,8 +21581,8 @@
         headers
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
@@ -21626,7 +21637,7 @@
         itemsPerPage,
         sortBy,
         groupBy,
-        search: vue.toRef(props, 'search')
+        search: vue.toRef(() => props.search)
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -21634,10 +21645,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -22107,7 +22118,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       function onClick() {
         emit('click');
       }
@@ -22246,21 +22257,21 @@
         const isSame = adapter.isSameDay(date, month.value);
         return {
           date,
-          isoDate,
           formatted: adapter.format(date, 'keyboardDate'),
-          year: adapter.getYear(date),
-          month: adapter.getMonth(date),
-          isDisabled: isDisabled(date),
-          isWeekStart: index % 7 === 0,
-          isWeekEnd: index % 7 === 6,
-          isToday: adapter.isSameDay(date, today),
           isAdjacent,
-          isHidden: isAdjacent && !props.showAdjacentMonths,
-          isStart,
-          isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+          isDisabled: isDisabled(date),
           isEnd,
+          isHidden: isAdjacent && !props.showAdjacentMonths,
           isSame,
-          localized: adapter.format(date, 'dayOfMonth')
+          isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+          isStart,
+          isToday: adapter.isSameDay(date, today),
+          isWeekEnd: index % 7 === 6,
+          isWeekStart: index % 7 === 0,
+          isoDate,
+          localized: adapter.format(date, 'dayOfMonth'),
+          month: adapter.getMonth(date),
+          year: adapter.getYear(date)
         };
       });
     }
@@ -22348,7 +22359,7 @@
       const rangeStart = vue.shallowRef();
       const rangeStop = vue.shallowRef();
       const isReverse = vue.shallowRef(false);
-      const transition = vue.computed(() => {
+      const transition = vue.toRef(() => {
         return !isReverse.value ? props.transition : props.reverseTransition;
       });
       if (props.multiple === 'range' && model.value.length > 0) {
@@ -22728,7 +22739,7 @@
         }
         return value && adapter.isValid(value) ? value : today;
       });
-      const headerColor = vue.computed(() => props.headerColor ?? props.color);
+      const headerColor = vue.toRef(() => props.headerColor ?? props.color);
       const month = vue.ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
       const year = vue.ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
       const isReversing = vue.shallowRef(false);
@@ -22745,8 +22756,8 @@
         date = adapter.setYear(date, year.value);
         return adapter.format(date, 'monthAndYear');
       });
-      // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
-      const headerTransition = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
+      // const headerIcon = toRef(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
+      const headerTransition = vue.toRef(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
       const disabled = vue.computed(() => {
         if (props.disabled) return true;
         const targets = [];
@@ -22958,7 +22969,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -23121,7 +23132,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -23132,7 +23143,7 @@
         expandIcon: props.expandIcon,
         readonly: props.readonly
       }));
-      const icon = vue.computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
+      const icon = vue.toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
       useRender(() => vue.withDirectives(vue.createVNode("button", {
         "class": ['v-expansion-panel-title', {
           'v-expansion-panel-title--active': expansionPanel.isSelected.value,
@@ -23187,14 +23198,14 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'bgColor');
+      } = useBackgroundColor(() => props.bgColor);
       const {
         elevationClasses
       } = useElevation(props);
       const {
         roundedClasses
       } = useRounded(props);
-      const isDisabled = vue.computed(() => groupItem?.disabled.value || props.disabled);
+      const isDisabled = vue.toRef(() => groupItem?.disabled.value || props.disabled);
       const selectedIndices = vue.computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
         if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
         return arr;
@@ -23285,21 +23296,21 @@
       const {
         themeClasses
       } = provideTheme(props);
-      const variantClass = vue.computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+      const variantClass = vue.toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
       provideDefaults({
         VExpansionPanel: {
-          bgColor: vue.toRef(props, 'bgColor'),
-          collapseIcon: vue.toRef(props, 'collapseIcon'),
-          color: vue.toRef(props, 'color'),
-          eager: vue.toRef(props, 'eager'),
-          elevation: vue.toRef(props, 'elevation'),
-          expandIcon: vue.toRef(props, 'expandIcon'),
-          focusable: vue.toRef(props, 'focusable'),
-          hideActions: vue.toRef(props, 'hideActions'),
-          readonly: vue.toRef(props, 'readonly'),
-          ripple: vue.toRef(props, 'ripple'),
-          rounded: vue.toRef(props, 'rounded'),
-          static: vue.toRef(props, 'static')
+          bgColor: vue.toRef(() => props.bgColor),
+          collapseIcon: vue.toRef(() => props.collapseIcon),
+          color: vue.toRef(() => props.color),
+          eager: vue.toRef(() => props.eager),
+          elevation: vue.toRef(() => props.elevation),
+          expandIcon: vue.toRef(() => props.expandIcon),
+          focusable: vue.toRef(() => props.focusable),
+          hideActions: vue.toRef(() => props.hideActions),
+          readonly: vue.toRef(() => props.readonly),
+          ripple: vue.toRef(() => props.ripple),
+          rounded: vue.toRef(() => props.rounded),
+          static: vue.toRef(() => props.static)
         }
       });
       useRender(() => vue.createVNode(props.tag, {
@@ -23361,7 +23372,7 @@
         if (!entries.length) return;
         height.value = entries[0].target.clientHeight;
       });
-      const hasPosition = vue.computed(() => props.app || props.absolute);
+      const hasPosition = vue.toRef(() => props.app || props.absolute);
       const position = vue.computed(() => {
         if (!hasPosition.value) return false;
         return props.location?.split(' ').shift() ?? 'bottom';
@@ -23378,7 +23389,7 @@
           layoutSize: vue.computed(() => props.layout ? height.value + 24 : 0),
           elementSize: vue.computed(() => height.value + 24),
           active: vue.computed(() => props.app && model.value),
-          absolute: vue.toRef(props, 'absolute')
+          absolute: vue.toRef(() => props.absolute)
         });
         vue.watchEffect(() => {
           layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -23503,7 +23514,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
-      const isActive = vue.computed(() => isFocused.value || props.active);
+      const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
@@ -23676,7 +23687,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -23698,11 +23709,11 @@
         const layout = useLayoutItem({
           id: props.name,
           order: vue.computed(() => parseInt(props.order, 10)),
-          position: vue.computed(() => 'bottom'),
+          position: vue.toRef(() => 'bottom'),
           layoutSize: height,
           elementSize: vue.computed(() => props.height === 'auto' ? undefined : height.value),
-          active: vue.computed(() => props.app),
-          absolute: vue.toRef(props, 'absolute')
+          active: vue.toRef(() => props.app),
+          absolute: vue.toRef(() => props.absolute)
         });
         vue.watchEffect(() => {
           layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -24175,11 +24186,11 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.toRef(props, 'position'),
-        elementSize: vue.toRef(props, 'size'),
-        layoutSize: vue.toRef(props, 'size'),
-        active: vue.toRef(props, 'modelValue'),
-        absolute: vue.toRef(props, 'absolute')
+        position: vue.toRef(() => props.position),
+        elementSize: vue.toRef(() => props.size),
+        layoutSize: vue.toRef(() => props.size),
+        active: vue.toRef(() => props.modelValue),
+        absolute: vue.toRef(() => props.absolute)
       });
       return () => vue.createVNode("div", {
         "class": ['v-layout-item', props.class],
@@ -24711,7 +24722,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -24744,7 +24755,7 @@
       const location = vue.computed(() => {
         return toPhysical(props.location, isRtl.value);
       });
-      const isPersistent = vue.computed(() => props.persistent);
+      const isPersistent = vue.toRef(() => props.persistent);
       const isTemporary = vue.computed(() => !props.permanent && (mobile.value || props.temporary));
       const isSticky = vue.computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
       useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -24770,7 +24781,7 @@
         isActive,
         isTemporary,
         width,
-        touchless: vue.toRef(props, 'touchless'),
+        touchless: vue.toRef(() => props.touchless),
         position: location
       });
       const layoutSize = vue.computed(() => {
@@ -24787,7 +24798,7 @@
         layoutSize,
         elementSize: width,
         active: vue.readonly(isActive),
-        disableTransitions: vue.computed(() => isDragging.value),
+        disableTransitions: vue.toRef(() => isDragging.value),
         absolute: vue.computed(() =>
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         props.absolute || isSticky.value && typeof isStuck.value !== 'string')
@@ -24800,9 +24811,9 @@
         isSticky,
         layoutItemStyles
       });
-      const scrimColor = useBackgroundColor(vue.computed(() => {
+      const scrimColor = useBackgroundColor(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
-      }));
+      });
       const scrimStyles = vue.computed(() => ({
         ...(isDragging.value ? {
           opacity: dragProgress.value * 0.2,
@@ -25016,24 +25027,24 @@
       const controlVariant = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
       });
-      const incrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
-      const decrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
-      const controlNodeSize = vue.computed(() => controlVariant.value === 'split' ? 'default' : 'small');
-      const controlNodeDefaultHeight = vue.computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
-      const incrementSlotProps = vue.computed(() => ({
+      const incrementIcon = vue.toRef(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
+      const decrementIcon = vue.toRef(() => controlVariant.value === 'split' ? '$minus' : '$expand');
+      const controlNodeSize = vue.toRef(() => controlVariant.value === 'split' ? 'default' : 'small');
+      const controlNodeDefaultHeight = vue.toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
+      const incrementSlotProps = {
         props: {
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onUpControlMousedown
         }
-      }));
-      const decrementSlotProps = vue.computed(() => ({
+      };
+      const decrementSlotProps = {
         props: {
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onDownControlMousedown
         }
-      }));
+      };
       vue.watch(() => props.precision, () => formatInputValue());
       vue.onMounted(() => {
         clampModel();
@@ -25185,7 +25196,7 @@
               }
             }
           }, {
-            default: () => [slots.increment(incrementSlotProps.value)]
+            default: () => [slots.increment(incrementSlotProps)]
           });
         }
         function decrementControlNode() {
@@ -25214,7 +25225,7 @@
               }
             }
           }, {
-            default: () => [slots.decrement(decrementSlotProps.value)]
+            default: () => [slots.decrement(decrementSlotProps)]
           });
         }
         function controlNode() {
@@ -25414,12 +25425,12 @@
       }
       provideDefaults({
         VField: {
-          color: vue.computed(() => props.color),
-          bgColor: vue.computed(() => props.color),
-          baseColor: vue.computed(() => props.baseColor),
-          disabled: vue.computed(() => props.disabled),
-          error: vue.computed(() => props.error),
-          variant: vue.computed(() => props.variant)
+          color: vue.toRef(() => props.color),
+          bgColor: vue.toRef(() => props.color),
+          baseColor: vue.toRef(() => props.baseColor),
+          disabled: vue.toRef(() => props.disabled),
+          error: vue.toRef(() => props.error),
+          variant: vue.toRef(() => props.variant)
         }
       }, {
         scoped: true
@@ -26220,7 +26231,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -27019,7 +27030,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const hasLabels = vue.computed(() => {
         return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
       });
@@ -27565,11 +27576,11 @@
       } = useFocus(props);
       const control = vue.ref();
       const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
-      const loaderColor = vue.computed(() => {
+      const loaderColor = vue.toRef(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `switch-${uid}`);
+      const id = vue.toRef(() => props.id || `switch-${uid}`);
       function onChange() {
         if (indeterminate.value) {
           indeterminate.value = false;
@@ -27720,7 +27731,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -27740,7 +27751,7 @@
         layoutSize: height,
         elementSize: height,
         active: vue.computed(() => true),
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-system-bar', {
@@ -27782,7 +27793,7 @@
       const {
         textColorClasses: sliderColorClasses,
         textColorStyles: sliderColorStyles
-      } = useTextColor(props, 'sliderColor');
+      } = useTextColor(() => props.sliderColor);
       const rootEl = vue.ref();
       const sliderEl = vue.ref();
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
@@ -27975,18 +27986,18 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         scopeId
       } = useScopeId();
       provideDefaults({
         VTab: {
-          color: vue.toRef(props, 'color'),
-          direction: vue.toRef(props, 'direction'),
-          stacked: vue.toRef(props, 'stacked'),
-          fixed: vue.toRef(props, 'fixedTabs'),
-          sliderColor: vue.toRef(props, 'sliderColor'),
-          hideSlider: vue.toRef(props, 'hideSlider')
+          color: vue.toRef(() => props.color),
+          direction: vue.toRef(() => props.direction),
+          stacked: vue.toRef(() => props.stacked),
+          fixed: vue.toRef(() => props.fixedTabs),
+          sliderColor: vue.toRef(() => props.sliderColor),
+          hideSlider: vue.toRef(() => props.hideSlider)
         }
       });
       useRender(() => {
@@ -28336,7 +28347,7 @@
       const {
         backgroundColorStyles,
         backgroundColorClasses
-      } = useBackgroundColor(vue.toRef(props, 'dotColor'));
+      } = useBackgroundColor(() => props.dotColor);
       const {
         roundedClasses
       } = useRounded(props, 'v-timeline-divider__dot');
@@ -28346,7 +28357,7 @@
       const {
         backgroundColorClasses: lineColorClasses,
         backgroundColorStyles: lineColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'lineColor'));
+      } = useBackgroundColor(() => props.lineColor);
       useRender(() => vue.createVNode("div", {
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
@@ -28517,17 +28528,17 @@
       } = useRtl();
       provideDefaults({
         VTimelineDivider: {
-          lineColor: vue.toRef(props, 'lineColor')
+          lineColor: vue.toRef(() => props.lineColor)
         },
         VTimelineItem: {
-          density: vue.toRef(props, 'density'),
-          dotColor: vue.toRef(props, 'dotColor'),
-          fillDot: vue.toRef(props, 'fillDot'),
-          hideOpposite: vue.toRef(props, 'hideOpposite'),
-          iconColor: vue.toRef(props, 'iconColor'),
-          lineColor: vue.toRef(props, 'lineColor'),
-          lineInset: vue.toRef(props, 'lineInset'),
-          size: vue.toRef(props, 'size')
+          density: vue.toRef(() => props.density),
+          dotColor: vue.toRef(() => props.dotColor),
+          fillDot: vue.toRef(() => props.fillDot),
+          hideOpposite: vue.toRef(() => props.hideOpposite),
+          iconColor: vue.toRef(() => props.iconColor),
+          lineColor: vue.toRef(() => props.lineColor),
+          lineInset: vue.toRef(() => props.lineInset),
+          size: vue.toRef(() => props.size)
         }
       });
       const sideClasses = vue.computed(() => {
@@ -28574,9 +28585,9 @@
       } = _ref;
       provideDefaults({
         VBtn: {
-          color: vue.toRef(props, 'color'),
+          color: vue.toRef(() => props.color),
           height: 'inherit',
-          variant: vue.toRef(props, 'variant')
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => vue.createVNode("div", {
@@ -28623,7 +28634,7 @@
         scopeId
       } = useScopeId();
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-tooltip-${uid}`);
+      const id = vue.toRef(() => props.id || `v-tooltip-${uid}`);
       const overlay = vue.ref();
       const location = vue.computed(() => {
         return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
@@ -28631,7 +28642,7 @@
       const origin = vue.computed(() => {
         return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
       });
-      const transition = vue.computed(() => {
+      const transition = vue.toRef(() => {
         if (props.transition) return props.transition;
         return isActive.value ? 'scale-transition' : 'fade-transition';
       });
@@ -29178,7 +29189,7 @@
       };
     });
   }
-  const version$1 = "3.8.2-master.2025-04-17";
+  const version$1 = "3.8.2-master.2025-04-22";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -29203,7 +29214,7 @@
       ...options
     });
   };
-  const version = "3.8.2-master.2025-04-17";
+  const version = "3.8.2-master.2025-04-22";
   createVuetify.version = version;
 
   exports.blueprints = index;