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

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -365,15 +365,19 @@ function getEventCoordinates(e) {
 
 function destructComputed(getter) {
   const refs = reactive({});
-  const base = computed(getter);
   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 toRefs(refs);
+  const obj = {};
+  for (const key in refs) {
+    obj[key] = toRef(() => refs[key]);
+  }
+  return obj;
 }
 
 /** Array.includes but value can be any type */
@@ -1673,7 +1677,7 @@ const useIcon = props => {
   const icons = inject$1(IconSymbol);
   if (!icons) throw new Error('Missing Vuetify Icons provide!');
   const iconData = computed(() => {
-    const iconAlias = unref(props);
+    const iconAlias = toValue(props);
     if (!iconAlias) return {
       component: VComponentIcon
     };
@@ -2227,7 +2231,7 @@ function createLayout(props) {
   const mainRect = computed(() => {
     return layers.value[layers.value.length - 1].layer;
   });
-  const mainStyles = computed(() => {
+  const mainStyles = toRef(() => {
     return {
       '--v-layout-left': convertToUnit(mainRect.value.left),
       '--v-layout-right': convertToUnit(mainRect.value.right),
@@ -2342,10 +2346,10 @@ function createLayout(props) {
     layoutRect,
     rootZIndex
   });
-  const layoutClasses = computed(() => ['v-layout', {
+  const layoutClasses = toRef(() => ['v-layout', {
     'v-layout--full-height': props.fullHeight
   }]);
-  const layoutStyles = computed(() => ({
+  const layoutStyles = toRef(() => ({
     zIndex: parentLayout ? rootZIndex.value : undefined,
     position: parentLayout ? 'relative' : undefined,
     overflow: parentLayout ? 'hidden' : undefined
@@ -2736,7 +2740,7 @@ function createRtl(i18n, options) {
   return {
     isRtl,
     rtl,
-    rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+    rtlClasses: toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
   };
 }
 function provideRtl(locale, rtl, props) {
@@ -2744,7 +2748,7 @@ function provideRtl(locale, rtl, props) {
   return {
     isRtl,
     rtl,
-    rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+    rtlClasses: toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
   };
 }
 function useRtl() {
@@ -2968,7 +2972,7 @@ function createTheme(options) {
     }
     return acc;
   });
-  const current = computed(() => computedThemes.value[name.value]);
+  const current = toRef(() => computedThemes.value[name.value]);
   const styles = computed(() => {
     const lines = [];
     if (current.value?.dark) {
@@ -3015,7 +3019,7 @@ function createTheme(options) {
         }
       } else {
         if (IN_BROWSER) {
-          head.addHeadObjs(computed(getHead));
+          head.addHeadObjs(toRef(getHead));
           watchEffect(() => head.updateDOM());
         } else {
           head.addHeadObjs(getHead());
@@ -3034,7 +3038,7 @@ function createTheme(options) {
       }
     }
   }
-  const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+  const themeClasses = toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
   return {
     install,
     isDisabled: parsedOptions.isDisabled,
@@ -3054,9 +3058,9 @@ function provideTheme(props) {
   getCurrentInstance('provideTheme');
   const theme = inject$1(ThemeSymbol, null);
   if (!theme) throw new Error('Could not find Vuetify theme injection');
-  const name = computed(() => props.theme ?? theme.name.value);
-  const current = computed(() => theme.themes.value[name.value]);
-  const themeClasses = computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+  const name = toRef(() => props.theme ?? theme.name.value);
+  const current = toRef(() => theme.themes.value[name.value]);
+  const themeClasses = toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
   const newTheme = {
     ...theme,
     name,
@@ -3340,6 +3344,7 @@ function ExpandTransitionGenerator () {
 const makeVDialogTransitionProps = propsFactory({
   target: [Object, Array]
 }, 'v-dialog-transition');
+const saved = new WeakMap();
 const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
   props: makeVDialogTransitionProps(),
@@ -3356,13 +3361,15 @@ const VDialogTransition = genericComponent()({
         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
@@ -3391,13 +3398,19 @@ const VDialogTransition = genericComponent()({
       },
       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
@@ -3617,13 +3630,14 @@ const VResponsive = genericComponent()({
 // Composables
 function useColor(colors) {
   return destructComputed(() => {
+    const _colors = 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;
@@ -3631,15 +3645,15 @@ function useColor(colors) {
           }
         }
       } 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 {
@@ -3648,27 +3662,25 @@ function useColor(colors) {
     };
   });
 }
-function useTextColor(props, name) {
-  const colors = computed(() => ({
-    text: isRef(props) ? props.value : name ? props[name] : null
-  }));
+function useTextColor(color) {
   const {
     colorClasses: textColorClasses,
     colorStyles: textColorStyles
-  } = useColor(colors);
+  } = useColor(() => ({
+    text: toValue(color)
+  }));
   return {
     textColorClasses,
     textColorStyles
   };
 }
-function useBackgroundColor(props, name) {
-  const colors = computed(() => ({
-    background: isRef(props) ? props.value : name ? props[name] : null
-  }));
+function useBackgroundColor(color) {
   const {
     colorClasses: backgroundColorClasses,
     colorStyles: backgroundColorStyles
-  } = useColor(colors);
+  } = useColor(() => ({
+    background: toValue(color)
+  }));
   return {
     backgroundColorClasses,
     backgroundColorStyles
@@ -3852,7 +3864,7 @@ const VImg = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       roundedClasses
     } = useRounded(props);
@@ -3959,7 +3971,7 @@ const VImg = genericComponent()({
       };
       poll();
     }
-    const containClasses = computed(() => ({
+    const containClasses = toRef(() => ({
       'v-img__img--cover': props.cover,
       'v-img__img--contain': !props.cover
     }));
@@ -4096,16 +4108,13 @@ const makeBorderProps = propsFactory({
 function useBorder(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
   const borderClasses = computed(() => {
-    const border = 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
@@ -4130,12 +4139,10 @@ const makeElevationProps = propsFactory({
   }
 }, 'elevation');
 function useElevation(props) {
-  const elevationClasses = computed(() => {
+  const elevationClasses = toRef(() => {
     const elevation = 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
@@ -4186,7 +4193,7 @@ const VToolbar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -4395,7 +4402,7 @@ function useSsrBoot() {
       isBooted.value = true;
     });
   });
-  const ssrBootStyles = computed(() => !isBooted.value ? {
+  const ssrBootStyles = toRef(() => !isBooted.value ? {
     transition: 'none !important'
   } : undefined);
   return {
@@ -4463,7 +4470,7 @@ const VAppBar = genericComponent()({
     } = useScroll(props, {
       canScroll
     });
-    const canHide = computed(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
+    const canHide = toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
     const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
     const isFlat = computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
@@ -4474,7 +4481,7 @@ const VAppBar = genericComponent()({
       if (!canHide.value) return height + extensionHeight;
       return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
     });
-    useToggleScope(computed(() => !!props.scrollBehavior), () => {
+    useToggleScope(() => !!props.scrollBehavior, () => {
       watchEffect(() => {
         if (canHide.value) {
           if (scrollBehavior.value.inverted) {
@@ -4495,11 +4502,11 @@ const VAppBar = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: toRef(props, 'location'),
+      position: toRef(() => props.location),
       layoutSize: height,
       elementSize: shallowRef(undefined),
       active: isActive,
-      absolute: toRef(props, 'absolute')
+      absolute: toRef(() => props.absolute)
     });
     useRender(() => {
       const toolbarProps = VToolbar.filterProps(props);
@@ -4542,7 +4549,7 @@ const makeDensityProps = propsFactory({
 }, 'density');
 function useDensity(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  const densityClasses = computed(() => {
+  const densityClasses = toRef(() => {
     return `${name}--density-${props.density}`;
   });
   return {
@@ -4572,24 +4579,24 @@ const makeVariantProps = propsFactory({
 }, 'variant');
 function useVariant(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  const variantClasses = computed(() => {
+  const variantClasses = toRef(() => {
     const {
       variant
-    } = unref(props);
+    } = toValue(props);
     return `${name}--variant-${variant}`;
   });
   const {
     colorClasses,
     colorStyles
-  } = useColor(computed(() => {
+  } = useColor(() => {
     const {
       variant,
       color
-    } = unref(props);
+    } = toValue(props);
     return {
       [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color
     };
-  }));
+  });
   return {
     colorClasses,
     colorStyles,
@@ -4634,11 +4641,11 @@ const VBtnGroup = genericComponent()({
     provideDefaults({
       VBtn: {
         height: 'auto',
-        baseColor: toRef(props, 'baseColor'),
-        color: toRef(props, 'color'),
-        density: toRef(props, 'density'),
+        baseColor: toRef(() => props.baseColor),
+        color: toRef(() => props.color),
+        density: toRef(() => props.density),
         flat: true,
-        variant: toRef(props, 'variant')
+        variant: toRef(() => props.variant)
       }
     });
     useRender(() => {
@@ -4688,7 +4695,7 @@ function useGroupItem(props, injectKey) {
     if (!required) return group;
     throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
   }
-  const value = toRef(props, 'value');
+  const value = toRef(() => props.value);
   const disabled = computed(() => !!(group.disabled.value || props.disabled));
   group.register({
     id,
@@ -4837,12 +4844,12 @@ function useGroup(props, injectKey) {
     unregister,
     selected,
     select,
-    disabled: toRef(props, 'disabled'),
+    disabled: toRef(() => props.disabled),
     prev: () => step(items.length - 1),
     next: () => step(1),
     isSelected: id => selected.value.includes(id),
-    selectedClass: computed(() => props.selectedClass),
-    items: computed(() => items),
+    selectedClass: toRef(() => props.selectedClass),
+    items: toRef(() => items),
     getItemIndex: value => getItemIndex(items, value)
   };
   provide(injectKey, state);
@@ -4940,14 +4947,15 @@ const makeSizeProps = propsFactory({
 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 {
@@ -4979,20 +4987,20 @@ const VIcon = genericComponent()({
       attrs,
       slots
     } = _ref;
-    const slotIcon = ref();
+    const slotIcon = shallowRef();
     const {
       themeClasses
     } = useTheme();
     const {
       iconData
-    } = useIcon(computed(() => slotIcon.value || props.icon));
+    } = useIcon(() => slotIcon.value || props.icon);
     const {
       sizeClasses
     } = useSize(props);
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     useRender(() => {
       const slotValue = slots.default?.();
       if (slotValue) {
@@ -5098,11 +5106,11 @@ const VProgressCircular = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const {
       textColorClasses: underlayColorClasses,
       textColorStyles: underlayColorStyles
-    } = useTextColor(toRef(props, 'bgColor'));
+    } = useTextColor(() => props.bgColor);
     const {
       intersectionRef,
       isIntersecting
@@ -5111,15 +5119,15 @@ const VProgressCircular = genericComponent()({
       resizeRef,
       contentRect
     } = useResizeObserver();
-    const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
-    const width = computed(() => Number(props.width));
-    const size = computed(() => {
+    const normalizedValue = toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
+    const width = toRef(() => Number(props.width));
+    const size = 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 = computed(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
-    const strokeWidth = computed(() => width.value / size.value * diameter.value);
-    const strokeDashOffset = computed(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
+    const diameter = toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
+    const strokeWidth = toRef(() => width.value / size.value * diameter.value);
+    const strokeDashOffset = toRef(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
     watchEffect(() => {
       intersectionRef.value = root.value;
       resizeRef.value = root.value;
@@ -5297,19 +5305,19 @@ const VProgressLinear = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(props, 'color');
+    } = useTextColor(() => props.color);
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(computed(() => props.bgColor || props.color));
+    } = useBackgroundColor(() => props.bgColor || props.color);
     const {
       backgroundColorClasses: bufferColorClasses,
       backgroundColorStyles: bufferColorStyles
-    } = useBackgroundColor(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);
@@ -5416,7 +5424,7 @@ const makeLoaderProps = propsFactory({
 }, 'loader');
 function useLoader(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  const loaderClasses = computed(() => ({
+  const loaderClasses = toRef(() => ({
     [`${name}--loading`]: props.loading
   }));
   return {
@@ -5455,7 +5463,7 @@ const makePositionProps = propsFactory({
 }, 'position');
 function usePosition(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-  const positionClasses = computed(() => {
+  const positionClasses = toRef(() => {
     return props.position ? `${name}--${props.position}` : undefined;
   });
   return {
@@ -5476,12 +5484,12 @@ function useRouter() {
 }
 function useLink(props, attrs) {
   const RouterLink = resolveDynamicComponent('RouterLink');
-  const isLink = computed(() => !!(props.href || props.to));
+  const isLink = toRef(() => !!(props.href || props.to));
   const isClickable = computed(() => {
     return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
   });
   if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
-    const href = toRef(props, 'href');
+    const href = toRef(() => props.href);
     return {
       isLink,
       isClickable,
@@ -5491,12 +5499,12 @@ function useLink(props, attrs) {
       })
     };
   }
+
   // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
-  const linkProps = computed(() => ({
-    ...props,
-    to: toRef(() => props.to || '')
-  }));
-  const routerLink = RouterLink.useLink(linkProps.value);
+  const routerLink = RouterLink.useLink({
+    to: toRef(() => props.to || ''),
+    replace: toRef(() => props.replace)
+  });
   // Actual link needs to be undefined when to prop is not used
   const link = computed(() => props.to ? routerLink : undefined);
   const route = useRoute();
@@ -5516,7 +5524,7 @@ function useLink(props, attrs) {
     href,
     linkProps: reactive({
       href,
-      'aria-current': computed(() => isActive.value ? 'page' : undefined)
+      'aria-current': toRef(() => isActive.value ? 'page' : undefined)
     })
   };
 }
@@ -5965,7 +5973,7 @@ const VBtn = genericComponent()({
       }
       return group?.isSelected.value;
     });
-    const color = computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
+    const color = toRef(() => isActive.value ? props.activeColor ?? props.color : props.color);
     const variantProps = computed(() => {
       const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
       return {
@@ -5979,7 +5987,7 @@ const VBtn = genericComponent()({
       variantClasses
     } = useVariant(variantProps);
     const isDisabled = computed(() => group?.disabled.value || props.disabled);
-    const isElevated = computed(() => {
+    const isElevated = toRef(() => {
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
     });
     const valueAttr = computed(() => {
@@ -6182,15 +6190,11 @@ const VAlert = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const icon = computed(() => {
+    const icon = toRef(() => {
       if (props.icon === false) return undefined;
       if (!props.type) return props.icon;
       return props.icon ?? `$${props.type}`;
     });
-    const variantProps = computed(() => ({
-      color: props.color ?? props.type,
-      variant: props.variant
-    }));
     const {
       themeClasses
     } = provideTheme(props);
@@ -6198,7 +6202,10 @@ const VAlert = genericComponent()({
       colorClasses,
       colorStyles,
       variantClasses
-    } = useVariant(variantProps);
+    } = useVariant(() => ({
+      color: props.color ?? props.type,
+      variant: props.variant
+    }));
     const {
       densityClasses
     } = useDensity(props);
@@ -6220,11 +6227,11 @@ const VAlert = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'borderColor'));
+    } = useTextColor(() => props.borderColor);
     const {
       t
     } = useLocale();
-    const closeProps = computed(() => ({
+    const closeProps = toRef(() => ({
       'aria-label': t(props.closeLabel),
       onClick(e) {
         isActive.value = false;
@@ -6461,8 +6468,8 @@ const VSelectionControlGroup = genericComponent()({
     } = _ref;
     const modelValue = useProxiedModel(props, 'modelValue');
     const uid = useId();
-    const id = computed(() => props.id || `v-selection-control-group-${uid}`);
-    const name = computed(() => props.name || id.value);
+    const id = toRef(() => props.id || `v-selection-control-group-${uid}`);
+    const name = toRef(() => props.name || id.value);
     const updateHandlers = new Set();
     provide(VSelectionControlGroupSymbol, {
       modelValue,
@@ -6478,20 +6485,20 @@ const VSelectionControlGroup = genericComponent()({
     });
     provideDefaults({
       [props.defaultsTarget]: {
-        color: toRef(props, 'color'),
-        disabled: toRef(props, 'disabled'),
-        density: toRef(props, 'density'),
-        error: toRef(props, 'error'),
-        inline: toRef(props, 'inline'),
+        color: toRef(() => props.color),
+        disabled: toRef(() => props.disabled),
+        density: toRef(() => props.density),
+        error: toRef(() => props.error),
+        inline: toRef(() => props.inline),
         modelValue,
-        multiple: computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
+        multiple: toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
         name,
-        falseIcon: toRef(props, 'falseIcon'),
-        trueIcon: toRef(props, 'trueIcon'),
-        readonly: toRef(props, 'readonly'),
-        ripple: toRef(props, 'ripple'),
-        type: toRef(props, 'type'),
-        valueComparator: toRef(props, 'valueComparator')
+        falseIcon: toRef(() => props.falseIcon),
+        trueIcon: toRef(() => props.trueIcon),
+        readonly: toRef(() => props.readonly),
+        ripple: toRef(() => props.ripple),
+        type: toRef(() => props.type),
+        valueComparator: toRef(() => props.valueComparator)
       }
     });
     useRender(() => createVNode("div", {
@@ -6547,16 +6554,16 @@ function useSelectionControl(props) {
   const {
     textColorClasses,
     textColorStyles
-  } = useTextColor(computed(() => {
+  } = useTextColor(() => {
     if (props.error || props.disabled) return undefined;
     return model.value ? props.color : props.baseColor;
-  }));
+  });
   const {
     backgroundColorClasses,
     backgroundColorStyles
-  } = useBackgroundColor(computed(() => {
+  } = useBackgroundColor(() => {
     return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
-  }));
+  });
   const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
   return {
     group,
@@ -6601,8 +6608,8 @@ const VSelectionControl = genericComponent()({
     const isFocused = shallowRef(false);
     const isFocusVisible = shallowRef(false);
     const input = ref();
-    const id = computed(() => props.id || `input-${uid}`);
-    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const id = toRef(() => props.id || `input-${uid}`);
+    const isInteractive = toRef(() => !props.disabled && !props.readonly);
     group?.onForceUpdate(() => {
       if (input.value) {
         input.value.checked = model.value;
@@ -6740,10 +6747,10 @@ const VCheckboxBtn = genericComponent()({
         indeterminate.value = false;
       }
     }
-    const falseIcon = computed(() => {
+    const falseIcon = toRef(() => {
       return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
     });
-    const trueIcon = computed(() => {
+    const trueIcon = toRef(() => {
       return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
     });
     useRender(() => {
@@ -6831,7 +6838,7 @@ const VMessages = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(computed(() => props.color));
+    } = useTextColor(() => props.color);
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
@@ -6861,7 +6868,7 @@ const makeFocusProps = propsFactory({
 function useFocus(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
   const isFocused = useProxiedModel(props, 'focused');
-  const focusClasses = computed(() => {
+  const focusClasses = toRef(() => {
     return {
       [`${name}--focused`]: isFocused.value
     };
@@ -6900,8 +6907,8 @@ const makeFormProps = propsFactory({
 }, 'form');
 function createForm(props) {
   const model = useProxiedModel(props, 'modelValue');
-  const isDisabled = computed(() => props.disabled);
-  const isReadonly = computed(() => props.readonly);
+  const isDisabled = toRef(() => props.disabled);
+  const isReadonly = toRef(() => props.readonly);
   const isValidating = shallowRef(false);
   const items = ref([]);
   const errors = ref([]);
@@ -6991,7 +6998,7 @@ function createForm(props) {
     isValidating,
     isValid: model,
     items,
-    validateOn: toRef(props, 'validateOn')
+    validateOn: toRef(() => props.validateOn)
   });
   return {
     errors,
@@ -7306,10 +7313,10 @@ const VInput = genericComponent()({
       resetValidation,
       validate
     }));
-    const color = computed(() => {
+    const color = toRef(() => {
       return props.error || props.disabled ? undefined : props.focused ? props.color : props.baseColor;
     });
-    const iconColor = computed(() => {
+    const iconColor = toRef(() => {
       if (!props.iconColor) return undefined;
       return props.iconColor === true ? color.value : props.iconColor;
     });
@@ -7399,7 +7406,6 @@ const VCheckbox = genericComponent()({
       blur
     } = useFocus(props);
     const uid = useId();
-    const id = computed(() => props.id || `checkbox-${uid}`);
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
       const inputProps = VInput.filterProps(props);
@@ -7409,7 +7415,7 @@ const VCheckbox = genericComponent()({
       }, 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
       }), {
@@ -7593,7 +7599,7 @@ function useDisplay() {
       return false;
     }
   });
-  const displayClasses = computed(() => {
+  const displayClasses = toRef(() => {
     if (!name) return {};
     return {
       [`${name}--mobile`]: mobile.value
@@ -7708,7 +7714,7 @@ function useGoTo() {
   const goTo = {
     ...goToInstance,
     // can be set via VLocaleProvider
-    rtl: computed(() => goToInstance.rtl.value || isRtl.value)
+    rtl: toRef(() => goToInstance.rtl.value || isRtl.value)
   };
   async function go(target, options) {
     return scrollTo(target, mergeDeep(_options, options), false, goTo);
@@ -8200,11 +8206,11 @@ const VChipGroup = genericComponent()({
     } = useGroup(props, VChipGroupSymbol);
     provideDefaults({
       VChip: {
-        baseColor: toRef(props, 'baseColor'),
-        color: toRef(props, 'color'),
-        disabled: toRef(props, 'disabled'),
-        filter: toRef(props, 'filter'),
-        variant: toRef(props, 'variant')
+        baseColor: toRef(() => props.baseColor),
+        color: toRef(() => props.color),
+        disabled: toRef(() => props.disabled),
+        filter: toRef(() => props.filter),
+        variant: toRef(() => props.variant)
       }
     });
     useRender(() => {
@@ -8330,9 +8336,9 @@ const VChip = genericComponent()({
     const isActive = useProxiedModel(props, 'modelValue');
     const group = useGroupItem(props, VChipGroupSymbol, false);
     const link = useLink(props, attrs);
-    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
-    const closeProps = computed(() => ({
+    const closeProps = toRef(() => ({
       'aria-label': t(props.closeLabel),
       onClick(e) {
         e.preventDefault();
@@ -8341,18 +8347,17 @@ const VChip = genericComponent()({
         emit('click:close', e);
       }
     }));
-    const variantProps = 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;
@@ -9019,8 +9024,8 @@ const useNested = props => {
     id: shallowRef(),
     root: {
       opened,
-      activatable: toRef(props, 'activatable'),
-      selectable: toRef(props, 'selectable'),
+      activatable: toRef(() => props.activatable),
+      selectable: toRef(() => props.selectable),
       activated,
       selected,
       selectedValues: computed(() => {
@@ -9149,7 +9154,7 @@ const useNested = props => {
 const useNestedItem = (id, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
   const uidSymbol = Symbol('nested item');
-  const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol);
+  const computedId = computed(() => toValue(id) ?? uidSymbol);
   const item = {
     ...parent,
     id: computedId,
@@ -9225,7 +9230,7 @@ const VListGroup = genericComponent()({
       isOpen,
       open,
       id: _id
-    } = useNestedItem(toRef(props, 'value'), true);
+    } = useNestedItem(() => props.value, true);
     const id = computed(() => `v-list-group--id-${String(_id.value)}`);
     const list = useList();
     const {
@@ -9399,12 +9404,12 @@ const VListItem = genericComponent()({
     } = useNestedItem(id, false);
     const list = useList();
     const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
-    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
-    const roundedProps = computed(() => props.rounded || props.nav);
-    const color = computed(() => props.color ?? props.activeColor);
-    const variantProps = computed(() => ({
+    const roundedProps = toRef(() => props.rounded || props.nav);
+    const color = toRef(() => props.color ?? props.activeColor);
+    const variantProps = toRef(() => ({
       color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
       variant: props.variant
     }));
@@ -9447,7 +9452,7 @@ const VListItem = genericComponent()({
     const {
       roundedClasses
     } = useRounded(roundedProps);
-    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+    const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
@@ -9617,7 +9622,7 @@ const VListSubheader = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     useRender(() => {
       const hasText = !!(slots.default || props.title);
       return createVNode(props.tag, {
@@ -9662,7 +9667,7 @@ const VDivider = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const dividerStyles = computed(() => {
       const styles = {};
       if (props.length) {
@@ -10024,7 +10029,7 @@ const VList = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       borderClasses
     } = useBorder(props);
@@ -10047,30 +10052,30 @@ const VList = genericComponent()({
       select,
       getPath
     } = useNested(props);
-    const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
-    const activeColor = toRef(props, 'activeColor');
-    const baseColor = toRef(props, 'baseColor');
-    const color = toRef(props, 'color');
+    const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+    const activeColor = toRef(() => props.activeColor);
+    const baseColor = toRef(() => props.baseColor);
+    const color = toRef(() => props.color);
     createList();
     provideDefaults({
       VListGroup: {
         activeColor,
         baseColor,
         color,
-        expandIcon: toRef(props, 'expandIcon'),
-        collapseIcon: toRef(props, 'collapseIcon')
+        expandIcon: toRef(() => props.expandIcon),
+        collapseIcon: toRef(() => props.collapseIcon)
       },
       VListItem: {
-        activeClass: toRef(props, 'activeClass'),
+        activeClass: toRef(() => props.activeClass),
         activeColor,
         baseColor,
         color,
-        density: toRef(props, 'density'),
-        disabled: toRef(props, 'disabled'),
-        lines: toRef(props, 'lines'),
-        nav: toRef(props, 'nav'),
-        slim: toRef(props, 'slim'),
-        variant: toRef(props, 'variant')
+        density: toRef(() => props.density),
+        disabled: toRef(() => props.disabled),
+        lines: toRef(() => props.lines),
+        nav: toRef(() => props.nav),
+        slim: toRef(() => props.slim),
+        variant: toRef(() => props.variant)
       }
     });
     const isFocused = shallowRef(false);
@@ -10398,13 +10403,22 @@ function connectedLocationStrategy(data, props, contentStyles) {
   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;
@@ -11114,7 +11128,7 @@ const makeLazyProps = propsFactory({
 }, 'lazy');
 function useLazy(props, active) {
   const isBooted = shallowRef(false);
-  const hasContent = computed(() => isBooted.value || props.eager || active.value);
+  const hasContent = toRef(() => isBooted.value || props.eager || active.value);
   watch(active, () => isBooted.value = true);
   function onAfterLeave() {
     if (!props.eager) isBooted.value = false;
@@ -11151,10 +11165,10 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     activeChildren: new Set()
   });
   provide(StackSymbol, stack);
-  const _zIndex = shallowRef(Number(zIndex.value));
+  const _zIndex = shallowRef(Number(toValue(zIndex)));
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1];
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
+    _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(toValue(zIndex));
     if (createStackEntry) {
       globalStack.push([vm.uid, _zIndex.value]);
     }
@@ -11174,11 +11188,11 @@ function useStack(isActive, zIndex, disableGlobalStack) {
       setTimeout(() => globalTop.value = _isTop);
     });
   }
-  const localTop = computed(() => !stack.activeChildren.size);
+  const localTop = toRef(() => !stack.activeChildren.size);
   return {
     globalTop: readonly(globalTop),
     localTop,
-    stackStyles: computed(() => ({
+    stackStyles: toRef(() => ({
       zIndex: _zIndex.value
     }))
   };
@@ -11395,14 +11409,14 @@ const VOverlay = genericComponent()({
       hasContent,
       onAfterLeave: _onAfterLeave
     } = useLazy(props, isActive);
-    const scrimColor = useBackgroundColor(computed(() => {
+    const scrimColor = useBackgroundColor(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
-    }));
+    });
     const {
       globalTop,
       localTop,
       stackStyles
-    } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack);
+    } = useStack(isActive, () => props.zIndex, props._disableGlobalStack);
     const {
       activatorEl,
       activatorRef,
@@ -11728,7 +11742,7 @@ const VMenu = genericComponent()({
       isRtl
     } = useRtl();
     const uid = useId();
-    const id = computed(() => props.id || `v-menu-${uid}`);
+    const id = toRef(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
     const openChildren = shallowRef(new Set());
@@ -11896,7 +11910,7 @@ const VCounter = genericComponent()({
     let {
       slots
     } = _ref;
-    const counter = computed(() => {
+    const counter = toRef(() => {
       return props.max ? `${props.value} / ${props.max}` : String(props.value);
     });
     useRender(() => createVNode(MaybeTransition, {
@@ -12023,12 +12037,12 @@ const VField = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const isActive = computed(() => props.dirty || props.active);
-    const hasLabel = computed(() => !!(props.label || slots.label));
-    const hasFloatingLabel = computed(() => !props.singleLine && hasLabel.value);
+    const isActive = toRef(() => props.dirty || props.active);
+    const hasLabel = toRef(() => !!(props.label || slots.label));
+    const hasFloatingLabel = toRef(() => !props.singleLine && hasLabel.value);
     const uid = useId();
     const id = computed(() => props.id || `input-${uid}`);
-    const messagesId = computed(() => `${id.value}-messages`);
+    const messagesId = toRef(() => `${id.value}-messages`);
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
@@ -12043,7 +12057,7 @@ const VField = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       textColorClasses,
       textColorStyles
@@ -12770,7 +12784,7 @@ const VVirtualScroll = genericComponent()({
       paddingTop,
       paddingBottom,
       computedItems
-    } = useVirtual(props, toRef(props, 'items'));
+    } = useVirtual(props, toRef(() => props.items));
     useToggleScope(() => props.renderless, () => {
       function handleListeners() {
         let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -13007,7 +13021,7 @@ const VSelect = genericComponent()({
         _menu.value = v;
       }
     });
-    const label = computed(() => menu.value ? props.closeText : props.openText);
+    const label = toRef(() => menu.value ? props.closeText : props.openText);
     const computedMenuProps = computed(() => {
       return {
         ...props.menuProps,
@@ -13509,7 +13523,6 @@ const VAutocomplete = genericComponent()({
     const vMenuRef = ref();
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
-    const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
       transformIn,
@@ -13518,7 +13531,7 @@ const VAutocomplete = genericComponent()({
     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);
@@ -13967,7 +13980,7 @@ const VBadge = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       roundedClasses
     } = useRounded(props);
@@ -13977,7 +13990,7 @@ const VBadge = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'textColor'));
+    } = useTextColor(() => props.textColor);
     const {
       themeClasses
     } = useTheme();
@@ -14089,7 +14102,7 @@ const VBanner = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'bgColor');
+    } = useBackgroundColor(() => props.bgColor);
     const {
       borderClasses
     } = useBorder(props);
@@ -14118,8 +14131,8 @@ const VBanner = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
-    const color = toRef(props, 'color');
-    const density = toRef(props, 'density');
+    const color = toRef(() => props.color);
+    const density = toRef(() => props.density);
     provideDefaults({
       VBannerActions: {
         color,
@@ -14228,7 +14241,7 @@ const VBottomNavigation = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       densityClasses
     } = useDensity(props);
@@ -14248,19 +14261,19 @@ const VBottomNavigation = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: computed(() => 'bottom'),
-      layoutSize: computed(() => isActive.value ? height.value : 0),
+      position: toRef(() => 'bottom'),
+      layoutSize: toRef(() => isActive.value ? height.value : 0),
       elementSize: height,
       active: isActive,
-      absolute: toRef(props, 'absolute')
+      absolute: toRef(() => props.absolute)
     });
     useGroup(props, VBtnToggleSymbol);
     provideDefaults({
       VBtn: {
-        baseColor: toRef(props, 'baseColor'),
-        color: toRef(props, 'color'),
-        density: toRef(props, 'density'),
-        stacked: computed(() => props.mode !== 'horizontal'),
+        baseColor: toRef(() => props.baseColor),
+        color: toRef(() => props.color),
+        density: toRef(() => props.density),
+        stacked: toRef(() => props.mode !== 'horizontal'),
         variant: 'text'
       }
     }, {
@@ -14496,11 +14509,10 @@ const VBreadcrumbsItem = genericComponent()({
     } = _ref;
     const link = useLink(props, attrs);
     const isActive = computed(() => props.active || link.isActive?.value);
-    const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(color);
+    } = useTextColor(() => isActive.value ? props.activeColor : props.color);
     useRender(() => {
       return createVNode(props.tag, {
         "class": ['v-breadcrumbs-item', {
@@ -14555,7 +14567,7 @@ const VBreadcrumbs = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       densityClasses
     } = useDensity(props);
@@ -14564,13 +14576,13 @@ const VBreadcrumbs = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBreadcrumbsDivider: {
-        divider: toRef(props, 'divider')
+        divider: toRef(() => props.divider)
       },
       VBreadcrumbsItem: {
-        activeClass: toRef(props, 'activeClass'),
-        activeColor: toRef(props, 'activeColor'),
-        color: toRef(props, 'color'),
-        disabled: toRef(props, 'disabled')
+        activeClass: toRef(() => props.activeClass),
+        activeColor: toRef(() => props.activeColor),
+        color: toRef(() => props.color),
+        disabled: toRef(() => props.disabled)
       }
     });
     const items = computed(() => props.items.map(item => {
@@ -14893,10 +14905,10 @@ const VCard = genericComponent()({
       roundedClasses
     } = useRounded(props);
     const link = useLink(props, attrs);
-    const isLink = computed(() => props.link !== false && link.isLink.value);
-    const isClickable = 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;
@@ -14910,10 +14922,10 @@ const VCard = genericComponent()({
           '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 && createVNode("div", {
@@ -14958,8 +14970,8 @@ const VCard = genericComponent()({
           default: () => [slots.text?.() ?? props.text]
         }), slots.default?.(), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
-        }), genOverlays(isClickable.value, 'v-card')]
-      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
+        }), genOverlays(isClickable, 'v-card')]
+      }), [[resolveDirective("ripple"), isClickable && props.ripple]]);
     });
     return {};
   }
@@ -15172,8 +15184,8 @@ const VWindow = genericComponent()({
       transitionHeight,
       rootRef
     });
-    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
-    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+    const canMoveBack = toRef(() => props.continuous || activeIndex.value !== 0);
+    const canMoveForward = toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
     function prev() {
       canMoveBack.value && group.prev();
     }
@@ -16075,7 +16087,7 @@ const useSlider = _ref => {
   const {
     isRtl
   } = useRtl();
-  const isReversed = toRef(props, 'reverse');
+  const isReversed = toRef(() => props.reverse);
   const vertical = computed(() => props.direction === 'vertical');
   const indexFromEnd = computed(() => vertical.value !== isReversed.value);
   const {
@@ -16089,7 +16101,7 @@ const useSlider = _ref => {
   const tickSize = computed(() => parseInt(props.tickSize, 10));
   const trackSize = computed(() => parseInt(props.trackSize, 10));
   const numTicks = computed(() => (max.value - min.value) / step.value);
-  const disabled = toRef(props, 'disabled');
+  const disabled = toRef(() => props.disabled);
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
@@ -16191,7 +16203,7 @@ const useSlider = _ref => {
     const percentage = (val - min.value) / (max.value - min.value) * 100;
     return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
   };
-  const showTicks = toRef(props, 'showTicks');
+  const showTicks = toRef(() => props.showTicks);
   const parsedTicks = computed(() => {
     if (!showTicks.value) return [];
     if (!props.ticks) {
@@ -16222,11 +16234,11 @@ const useSlider = _ref => {
   }));
   const data = {
     activeThumbRef,
-    color: toRef(props, 'color'),
+    color: toRef(() => props.color),
     decimals,
     disabled,
-    direction: toRef(props, 'direction'),
-    elevation: toRef(props, 'elevation'),
+    direction: toRef(() => props.direction),
+    elevation: toRef(() => props.elevation),
     hasLabels,
     isReversed,
     indexFromEnd,
@@ -16239,16 +16251,16 @@ const useSlider = _ref => {
     parsedTicks,
     parseMouseMove,
     position,
-    readonly: toRef(props, 'readonly'),
-    rounded: toRef(props, 'rounded'),
+    readonly: toRef(() => props.readonly),
+    rounded: toRef(() => props.rounded),
     roundValue,
     showTicks,
     startOffset,
     step,
     thumbSize,
     thumbColor,
-    thumbLabel: toRef(props, 'thumbLabel'),
-    ticks: toRef(props, 'ticks'),
+    thumbLabel: toRef(() => props.thumbLabel),
+    ticks: toRef(() => props.ticks),
     tickSize,
     trackColor,
     trackContainerRef,
@@ -17167,7 +17179,7 @@ const VSheet = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -17214,7 +17226,7 @@ const VPicker = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     useRender(() => {
       const sheetProps = VSheet.filterProps(props);
       const hasTitle = !!(props.title || slots.title);
@@ -18199,7 +18211,6 @@ const VCombobox = genericComponent()({
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
     let cleared = false;
-    const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
       transformIn,
@@ -18208,7 +18219,7 @@ const VCombobox = genericComponent()({
     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;
@@ -18263,7 +18274,7 @@ const VCombobox = genericComponent()({
         _menu.value = v;
       }
     });
-    const label = computed(() => menu.value ? props.closeText : props.openText);
+    const label = toRef(() => menu.value ? props.closeText : props.openText);
     watch(_search, value => {
       if (cleared) {
         // wait for clear to finish, VTextField sets _search to null
@@ -18769,7 +18780,7 @@ const makeDataTableExpandProps = propsFactory({
 }, 'DataTable-expand');
 const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
 function provideExpanded(props) {
-  const expandOnClick = toRef(props, 'expandOnClick');
+  const expandOnClick = toRef(() => props.expandOnClick);
   const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
     return new Set(v);
   }, v => {
@@ -18956,23 +18967,23 @@ function useOptions(_ref) {
     search
   } = _ref;
   const vm = getCurrentInstance('VDataTable');
-  const options = computed(() => ({
+  const options = () => ({
     page: page.value,
     itemsPerPage: itemsPerPage.value,
     sortBy: sortBy.value,
     groupBy: groupBy.value,
     search: search.value
-  }));
+  });
   let oldOptions = null;
-  watch(options, () => {
-    if (deepEqual(oldOptions, options.value)) return;
+  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
@@ -19253,7 +19264,7 @@ function provideSelection(props, _ref9) {
     });
     return !!items.length && isSelected(items);
   });
-  const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
+  const showSelectAll = toRef(() => selectStrategy.value.showSelectAll);
   const data = {
     toggleSelect,
     select,
@@ -19291,8 +19302,8 @@ const makeDataTableSortProps = propsFactory({
 const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
 function createSort(props) {
   const sortBy = useProxiedModel(props, 'sortBy');
-  const mustSort = toRef(props, 'mustSort');
-  const multiSort = toRef(props, 'multiSort');
+  const mustSort = toRef(() => props.mustSort);
+  const multiSort = toRef(() => props.multiSort);
   return {
     sortBy,
     mustSort,
@@ -19510,7 +19521,7 @@ const VDataIterator = genericComponent()({
       slots
     } = _ref;
     const groupBy = useProxiedModel(props, 'groupBy');
-    const search = toRef(props, 'search');
+    const search = toRef(() => props.search);
     const {
       items
     } = useDataIteratorItems(props);
@@ -19554,7 +19565,7 @@ const VDataIterator = genericComponent()({
     const {
       flatItems
     } = useGroupedItems(sortedItems, groupBy, opened);
-    const itemsLength = computed(() => flatItems.value.length);
+    const itemsLength = toRef(() => flatItems.value.length);
     const {
       startIndex,
       stopIndex,
@@ -19834,13 +19845,13 @@ const VPagination = genericComponent()({
     } = useRefs();
     provideDefaults({
       VPaginationBtn: {
-        color: toRef(props, 'color'),
-        border: toRef(props, 'border'),
-        density: toRef(props, 'density'),
-        size: toRef(props, 'size'),
-        variant: toRef(props, 'variant'),
-        rounded: toRef(props, 'rounded'),
-        elevation: toRef(props, 'elevation')
+        color: toRef(() => props.color),
+        border: toRef(() => props.border),
+        density: toRef(() => props.density),
+        size: toRef(() => props.size),
+        variant: toRef(() => props.variant),
+        rounded: toRef(() => props.rounded),
+        elevation: toRef(() => props.elevation)
       }
     });
     const items = computed(() => {
@@ -20481,7 +20492,7 @@ const VDataTableHeaders = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     const {
       displayClasses,
       mobile
@@ -21139,13 +21150,13 @@ const VDataTable = genericComponent()({
       filterFunctions
     } = createHeaders(props, {
       groupBy,
-      showSelect: toRef(props, 'showSelect'),
-      showExpand: toRef(props, 'showExpand')
+      showSelect: toRef(() => props.showSelect),
+      showExpand: toRef(() => props.showExpand)
     });
     const {
       items
     } = useDataTableItems(props, columns);
-    const search = toRef(props, 'search');
+    const search = toRef(() => props.search);
     const {
       filteredItems
     } = useFilter(props, items, search, {
@@ -21228,10 +21239,10 @@ const VDataTable = genericComponent()({
     });
     provideDefaults({
       VDataTableRows: {
-        hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText'),
-        loading: toRef(props, 'loading'),
-        loadingText: toRef(props, 'loadingText')
+        hideNoData: toRef(() => props.hideNoData),
+        noDataText: toRef(() => props.noDataText),
+        loading: toRef(() => props.loading),
+        loadingText: toRef(() => props.loadingText)
       }
     });
     const slotProps = computed(() => ({
@@ -21328,13 +21339,13 @@ const VDataTableVirtual = genericComponent()({
       sortRawFunctions
     } = createHeaders(props, {
       groupBy,
-      showSelect: toRef(props, 'showSelect'),
-      showExpand: toRef(props, 'showExpand')
+      showSelect: toRef(() => props.showSelect),
+      showExpand: toRef(() => props.showExpand)
     });
     const {
       items
     } = useDataTableItems(props, columns);
-    const search = toRef(props, 'search');
+    const search = toRef(() => props.search);
     const {
       filteredItems
     } = useFilter(props, items, search, {
@@ -21410,10 +21421,10 @@ const VDataTableVirtual = genericComponent()({
     });
     provideDefaults({
       VDataTableRows: {
-        hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText'),
-        loading: toRef(props, 'loading'),
-        loadingText: toRef(props, 'loadingText')
+        hideNoData: toRef(() => props.hideNoData),
+        noDataText: toRef(() => props.noDataText),
+        loading: toRef(() => props.loading),
+        loadingText: toRef(() => props.loadingText)
       }
     });
     const slotProps = computed(() => ({
@@ -21566,8 +21577,8 @@ const VDataTableServer = genericComponent()({
       headers
     } = createHeaders(props, {
       groupBy,
-      showSelect: toRef(props, 'showSelect'),
-      showExpand: toRef(props, 'showExpand')
+      showSelect: toRef(() => props.showSelect),
+      showExpand: toRef(() => props.showExpand)
     });
     const {
       items
@@ -21622,7 +21633,7 @@ const VDataTableServer = genericComponent()({
       itemsPerPage,
       sortBy,
       groupBy,
-      search: toRef(props, 'search')
+      search: toRef(() => props.search)
     });
     provide('v-data-table', {
       toggleSort,
@@ -21630,10 +21641,10 @@ const VDataTableServer = genericComponent()({
     });
     provideDefaults({
       VDataTableRows: {
-        hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText'),
-        loading: toRef(props, 'loading'),
-        loadingText: toRef(props, 'loadingText')
+        hideNoData: toRef(() => props.hideNoData),
+        noDataText: toRef(() => props.noDataText),
+        loading: toRef(() => props.loading),
+        loadingText: toRef(() => props.loadingText)
       }
     });
     const slotProps = computed(() => ({
@@ -22103,7 +22114,7 @@ const VDatePickerHeader = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     function onClick() {
       emit('click');
     }
@@ -22242,21 +22253,21 @@ function useCalendar(props) {
       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)
       };
     });
   }
@@ -22344,7 +22355,7 @@ const VDatePickerMonth = genericComponent()({
     const rangeStart = shallowRef();
     const rangeStop = shallowRef();
     const isReverse = shallowRef(false);
-    const transition = computed(() => {
+    const transition = toRef(() => {
       return !isReverse.value ? props.transition : props.reverseTransition;
     });
     if (props.multiple === 'range' && model.value.length > 0) {
@@ -22724,7 +22735,7 @@ const VDatePicker = genericComponent()({
       }
       return value && adapter.isValid(value) ? value : today;
     });
-    const headerColor = computed(() => props.headerColor ?? props.color);
+    const headerColor = toRef(() => props.headerColor ?? props.color);
     const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
     const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
     const isReversing = shallowRef(false);
@@ -22741,8 +22752,8 @@ const VDatePicker = genericComponent()({
       date = adapter.setYear(date, year.value);
       return adapter.format(date, 'monthAndYear');
     });
-    // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
-    const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
+    // const headerIcon = toRef(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
+    const headerTransition = toRef(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
     const disabled = computed(() => {
       if (props.disabled) return true;
       const targets = [];
@@ -22954,7 +22965,7 @@ const VEmptyState = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -23117,7 +23128,7 @@ const VExpansionPanelTitle = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -23128,7 +23139,7 @@ const VExpansionPanelTitle = genericComponent()({
       expandIcon: props.expandIcon,
       readonly: props.readonly
     }));
-    const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
+    const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
     useRender(() => withDirectives(createVNode("button", {
       "class": ['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value,
@@ -23183,14 +23194,14 @@ const VExpansionPanel = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'bgColor');
+    } = useBackgroundColor(() => props.bgColor);
     const {
       elevationClasses
     } = useElevation(props);
     const {
       roundedClasses
     } = useRounded(props);
-    const isDisabled = computed(() => groupItem?.disabled.value || props.disabled);
+    const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled);
     const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
       if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
       return arr;
@@ -23281,21 +23292,21 @@ const VExpansionPanels = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
-    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+    const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
     provideDefaults({
       VExpansionPanel: {
-        bgColor: toRef(props, 'bgColor'),
-        collapseIcon: toRef(props, 'collapseIcon'),
-        color: toRef(props, 'color'),
-        eager: toRef(props, 'eager'),
-        elevation: toRef(props, 'elevation'),
-        expandIcon: toRef(props, 'expandIcon'),
-        focusable: toRef(props, 'focusable'),
-        hideActions: toRef(props, 'hideActions'),
-        readonly: toRef(props, 'readonly'),
-        ripple: toRef(props, 'ripple'),
-        rounded: toRef(props, 'rounded'),
-        static: toRef(props, 'static')
+        bgColor: toRef(() => props.bgColor),
+        collapseIcon: toRef(() => props.collapseIcon),
+        color: toRef(() => props.color),
+        eager: toRef(() => props.eager),
+        elevation: toRef(() => props.elevation),
+        expandIcon: toRef(() => props.expandIcon),
+        focusable: toRef(() => props.focusable),
+        hideActions: toRef(() => props.hideActions),
+        readonly: toRef(() => props.readonly),
+        ripple: toRef(() => props.ripple),
+        rounded: toRef(() => props.rounded),
+        static: toRef(() => props.static)
       }
     });
     useRender(() => createVNode(props.tag, {
@@ -23357,7 +23368,7 @@ const VFab = genericComponent()({
       if (!entries.length) return;
       height.value = entries[0].target.clientHeight;
     });
-    const hasPosition = computed(() => props.app || props.absolute);
+    const hasPosition = toRef(() => props.app || props.absolute);
     const position = computed(() => {
       if (!hasPosition.value) return false;
       return props.location?.split(' ').shift() ?? 'bottom';
@@ -23374,7 +23385,7 @@ const VFab = genericComponent()({
         layoutSize: computed(() => props.layout ? height.value + 24 : 0),
         elementSize: computed(() => height.value + 24),
         active: computed(() => props.app && model.value),
-        absolute: toRef(props, 'absolute')
+        absolute: toRef(() => props.absolute)
       });
       watchEffect(() => {
         layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -23499,7 +23510,7 @@ const VFileInput = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
-    const isActive = computed(() => isFocused.value || props.active);
+    const isActive = toRef(() => isFocused.value || props.active);
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
@@ -23672,7 +23683,7 @@ const VFooter = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -23694,11 +23705,11 @@ const VFooter = genericComponent()({
       const layout = useLayoutItem({
         id: props.name,
         order: computed(() => parseInt(props.order, 10)),
-        position: computed(() => 'bottom'),
+        position: toRef(() => 'bottom'),
         layoutSize: height,
         elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
-        active: computed(() => props.app),
-        absolute: toRef(props, 'absolute')
+        active: toRef(() => props.app),
+        absolute: toRef(() => props.absolute)
       });
       watchEffect(() => {
         layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -24171,11 +24182,11 @@ const VLayoutItem = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: toRef(props, 'position'),
-      elementSize: toRef(props, 'size'),
-      layoutSize: toRef(props, 'size'),
-      active: toRef(props, 'modelValue'),
-      absolute: toRef(props, 'absolute')
+      position: toRef(() => props.position),
+      elementSize: toRef(() => props.size),
+      layoutSize: toRef(() => props.size),
+      active: toRef(() => props.modelValue),
+      absolute: toRef(() => props.absolute)
     });
     return () => createVNode("div", {
       "class": ['v-layout-item', props.class],
@@ -24707,7 +24718,7 @@ const VNavigationDrawer = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       elevationClasses
     } = useElevation(props);
@@ -24740,7 +24751,7 @@ const VNavigationDrawer = genericComponent()({
     const location = computed(() => {
       return toPhysical(props.location, isRtl.value);
     });
-    const isPersistent = computed(() => props.persistent);
+    const isPersistent = toRef(() => props.persistent);
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
     const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
     useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -24766,7 +24777,7 @@ const VNavigationDrawer = genericComponent()({
       isActive,
       isTemporary,
       width,
-      touchless: toRef(props, 'touchless'),
+      touchless: toRef(() => props.touchless),
       position: location
     });
     const layoutSize = computed(() => {
@@ -24783,7 +24794,7 @@ const VNavigationDrawer = genericComponent()({
       layoutSize,
       elementSize: width,
       active: readonly(isActive),
-      disableTransitions: computed(() => isDragging.value),
+      disableTransitions: toRef(() => isDragging.value),
       absolute: computed(() =>
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       props.absolute || isSticky.value && typeof isStuck.value !== 'string')
@@ -24796,9 +24807,9 @@ const VNavigationDrawer = genericComponent()({
       isSticky,
       layoutItemStyles
     });
-    const scrimColor = useBackgroundColor(computed(() => {
+    const scrimColor = useBackgroundColor(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
-    }));
+    });
     const scrimStyles = computed(() => ({
       ...(isDragging.value ? {
         opacity: dragProgress.value * 0.2,
@@ -25012,24 +25023,24 @@ const VNumberInput = genericComponent()({
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant;
     });
-    const incrementIcon = computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
-    const decrementIcon = computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
-    const controlNodeSize = computed(() => controlVariant.value === 'split' ? 'default' : 'small');
-    const controlNodeDefaultHeight = computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
-    const incrementSlotProps = computed(() => ({
+    const incrementIcon = toRef(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
+    const decrementIcon = toRef(() => controlVariant.value === 'split' ? '$minus' : '$expand');
+    const controlNodeSize = toRef(() => controlVariant.value === 'split' ? 'default' : 'small');
+    const controlNodeDefaultHeight = toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
+    const incrementSlotProps = {
       props: {
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown
       }
-    }));
-    const decrementSlotProps = computed(() => ({
+    };
+    const decrementSlotProps = {
       props: {
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown
       }
-    }));
+    };
     watch(() => props.precision, () => formatInputValue());
     onMounted(() => {
       clampModel();
@@ -25181,7 +25192,7 @@ const VNumberInput = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.increment(incrementSlotProps.value)]
+          default: () => [slots.increment(incrementSlotProps)]
         });
       }
       function decrementControlNode() {
@@ -25210,7 +25221,7 @@ const VNumberInput = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.decrement(decrementSlotProps.value)]
+          default: () => [slots.decrement(decrementSlotProps)]
         });
       }
       function controlNode() {
@@ -25410,12 +25421,12 @@ const VOtpInput = genericComponent()({
     }
     provideDefaults({
       VField: {
-        color: computed(() => props.color),
-        bgColor: computed(() => props.color),
-        baseColor: computed(() => props.baseColor),
-        disabled: computed(() => props.disabled),
-        error: computed(() => props.error),
-        variant: computed(() => props.variant)
+        color: toRef(() => props.color),
+        bgColor: toRef(() => props.color),
+        baseColor: toRef(() => props.baseColor),
+        disabled: toRef(() => props.disabled),
+        error: toRef(() => props.error),
+        variant: toRef(() => props.variant)
       }
     }, {
       scoped: true
@@ -26216,7 +26227,7 @@ const VSkeletonLoader = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -27015,7 +27026,7 @@ const VSparkline = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const hasLabels = computed(() => {
       return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
     });
@@ -27561,11 +27572,11 @@ const VSwitch = genericComponent()({
     } = useFocus(props);
     const control = ref();
     const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
-    const loaderColor = computed(() => {
+    const loaderColor = toRef(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
     const uid = useId();
-    const id = computed(() => props.id || `switch-${uid}`);
+    const id = toRef(() => props.id || `switch-${uid}`);
     function onChange() {
       if (indeterminate.value) {
         indeterminate.value = false;
@@ -27716,7 +27727,7 @@ const VSystemBar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       elevationClasses
     } = useElevation(props);
@@ -27736,7 +27747,7 @@ const VSystemBar = genericComponent()({
       layoutSize: height,
       elementSize: height,
       active: computed(() => true),
-      absolute: toRef(props, 'absolute')
+      absolute: toRef(() => props.absolute)
     });
     useRender(() => createVNode(props.tag, {
       "class": ['v-system-bar', {
@@ -27778,7 +27789,7 @@ const VTab = genericComponent()({
     const {
       textColorClasses: sliderColorClasses,
       textColorStyles: sliderColorStyles
-    } = useTextColor(props, 'sliderColor');
+    } = useTextColor(() => props.sliderColor);
     const rootEl = ref();
     const sliderEl = ref();
     const isHorizontal = computed(() => props.direction === 'horizontal');
@@ -27971,18 +27982,18 @@ const VTabs = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       scopeId
     } = useScopeId();
     provideDefaults({
       VTab: {
-        color: toRef(props, 'color'),
-        direction: toRef(props, 'direction'),
-        stacked: toRef(props, 'stacked'),
-        fixed: toRef(props, 'fixedTabs'),
-        sliderColor: toRef(props, 'sliderColor'),
-        hideSlider: toRef(props, 'hideSlider')
+        color: toRef(() => props.color),
+        direction: toRef(() => props.direction),
+        stacked: toRef(() => props.stacked),
+        fixed: toRef(() => props.fixedTabs),
+        sliderColor: toRef(() => props.sliderColor),
+        hideSlider: toRef(() => props.hideSlider)
       }
     });
     useRender(() => {
@@ -28332,7 +28343,7 @@ const VTimelineDivider = genericComponent()({
     const {
       backgroundColorStyles,
       backgroundColorClasses
-    } = useBackgroundColor(toRef(props, 'dotColor'));
+    } = useBackgroundColor(() => props.dotColor);
     const {
       roundedClasses
     } = useRounded(props, 'v-timeline-divider__dot');
@@ -28342,7 +28353,7 @@ const VTimelineDivider = genericComponent()({
     const {
       backgroundColorClasses: lineColorClasses,
       backgroundColorStyles: lineColorStyles
-    } = useBackgroundColor(toRef(props, 'lineColor'));
+    } = useBackgroundColor(() => props.lineColor);
     useRender(() => createVNode("div", {
       "class": ['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
@@ -28513,17 +28524,17 @@ const VTimeline = genericComponent()({
     } = useRtl();
     provideDefaults({
       VTimelineDivider: {
-        lineColor: toRef(props, 'lineColor')
+        lineColor: toRef(() => props.lineColor)
       },
       VTimelineItem: {
-        density: toRef(props, 'density'),
-        dotColor: toRef(props, 'dotColor'),
-        fillDot: toRef(props, 'fillDot'),
-        hideOpposite: toRef(props, 'hideOpposite'),
-        iconColor: toRef(props, 'iconColor'),
-        lineColor: toRef(props, 'lineColor'),
-        lineInset: toRef(props, 'lineInset'),
-        size: toRef(props, 'size')
+        density: toRef(() => props.density),
+        dotColor: toRef(() => props.dotColor),
+        fillDot: toRef(() => props.fillDot),
+        hideOpposite: toRef(() => props.hideOpposite),
+        iconColor: toRef(() => props.iconColor),
+        lineColor: toRef(() => props.lineColor),
+        lineInset: toRef(() => props.lineInset),
+        size: toRef(() => props.size)
       }
     });
     const sideClasses = computed(() => {
@@ -28570,9 +28581,9 @@ const VToolbarItems = genericComponent()({
     } = _ref;
     provideDefaults({
       VBtn: {
-        color: toRef(props, 'color'),
+        color: toRef(() => props.color),
         height: 'inherit',
-        variant: toRef(props, 'variant')
+        variant: toRef(() => props.variant)
       }
     });
     useRender(() => createVNode("div", {
@@ -28619,7 +28630,7 @@ const VTooltip = genericComponent()({
       scopeId
     } = useScopeId();
     const uid = useId();
-    const id = computed(() => props.id || `v-tooltip-${uid}`);
+    const id = toRef(() => props.id || `v-tooltip-${uid}`);
     const overlay = ref();
     const location = computed(() => {
       return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
@@ -28627,7 +28638,7 @@ const VTooltip = genericComponent()({
     const origin = 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 = computed(() => {
+    const transition = toRef(() => {
       if (props.transition) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });
@@ -29174,7 +29185,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -29199,7 +29210,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.2-master.2025-04-17";
+const version = "3.8.2-master.2025-04-22";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };