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

package/dist/vuetify-labs.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, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, 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, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -442,15 +442,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 */
@@ -1741,7 +1745,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),
@@ -1856,10 +1860,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
@@ -2250,7 +2254,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) {
@@ -2258,7 +2262,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() {
@@ -2482,7 +2486,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) {
@@ -2529,7 +2533,7 @@ function createTheme(options) {
         }
       } else {
         if (IN_BROWSER) {
-          head.addHeadObjs(computed(getHead));
+          head.addHeadObjs(toRef(getHead));
           watchEffect(() => head.updateDOM());
         } else {
           head.addHeadObjs(getHead());
@@ -2548,7 +2552,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,
@@ -2568,9 +2572,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,
@@ -2854,6 +2858,7 @@ function ExpandTransitionGenerator () {
 const makeVDialogTransitionProps = propsFactory({
   target: [Object, Array]
 }, 'v-dialog-transition');
+const saved = new WeakMap();
 const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
   props: makeVDialogTransitionProps(),
@@ -2870,13 +2875,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
@@ -2905,13 +2912,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
@@ -3131,13 +3144,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;
@@ -3145,15 +3159,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 {
@@ -3162,27 +3176,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
@@ -3366,7 +3378,7 @@ const VImg = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       roundedClasses
     } = useRounded(props);
@@ -3473,7 +3485,7 @@ const VImg = genericComponent()({
       };
       poll();
     }
-    const containClasses = computed(() => ({
+    const containClasses = toRef(() => ({
       'v-img__img--cover': props.cover,
       'v-img__img--contain': !props.cover
     }));
@@ -3610,16 +3622,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
@@ -3644,12 +3653,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
@@ -3700,7 +3707,7 @@ const VToolbar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -3909,7 +3916,7 @@ function useSsrBoot() {
       isBooted.value = true;
     });
   });
-  const ssrBootStyles = computed(() => !isBooted.value ? {
+  const ssrBootStyles = toRef(() => !isBooted.value ? {
     transition: 'none !important'
   } : undefined);
   return {
@@ -3977,7 +3984,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);
@@ -3988,7 +3995,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) {
@@ -4009,11 +4016,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);
@@ -4056,7 +4063,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 {
@@ -4086,24 +4093,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,
@@ -4148,11 +4155,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(() => {
@@ -4202,7 +4209,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,
@@ -4351,12 +4358,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);
@@ -4612,7 +4619,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
     };
@@ -4662,14 +4669,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 {
@@ -4701,20 +4709,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) {
@@ -4820,11 +4828,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
@@ -4833,15 +4841,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;
@@ -5019,19 +5027,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);
@@ -5138,7 +5146,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 {
@@ -5177,7 +5185,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 {
@@ -5198,12 +5206,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,
@@ -5213,12 +5221,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();
@@ -5238,7 +5246,7 @@ function useLink(props, attrs) {
     href,
     linkProps: reactive({
       href,
-      'aria-current': computed(() => isActive.value ? 'page' : undefined)
+      'aria-current': toRef(() => isActive.value ? 'page' : undefined)
     })
   };
 }
@@ -5687,7 +5695,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 {
@@ -5701,7 +5709,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(() => {
@@ -5904,15 +5912,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);
@@ -5920,7 +5924,10 @@ const VAlert = genericComponent()({
       colorClasses,
       colorStyles,
       variantClasses
-    } = useVariant(variantProps);
+    } = useVariant(() => ({
+      color: props.color ?? props.type,
+      variant: props.variant
+    }));
     const {
       densityClasses
     } = useDensity(props);
@@ -5942,11 +5949,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;
@@ -6183,8 +6190,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,
@@ -6200,20 +6207,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", {
@@ -6269,16 +6276,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,
@@ -6323,8 +6330,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;
@@ -6462,10 +6469,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(() => {
@@ -6553,7 +6560,7 @@ const VMessages = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(computed(() => props.color));
+    } = useTextColor(() => props.color);
     useRender(() => createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
@@ -6583,7 +6590,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
     };
@@ -6622,8 +6629,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([]);
@@ -6713,7 +6720,7 @@ function createForm(props) {
     isValidating,
     isValid: model,
     items,
-    validateOn: toRef(props, 'validateOn')
+    validateOn: toRef(() => props.validateOn)
   });
   return {
     errors,
@@ -7028,10 +7035,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;
     });
@@ -7121,7 +7128,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);
@@ -7131,7 +7137,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
       }), {
@@ -7315,7 +7321,7 @@ function useDisplay() {
       return false;
     }
   });
-  const displayClasses = computed(() => {
+  const displayClasses = toRef(() => {
     if (!name) return {};
     return {
       [`${name}--mobile`]: mobile.value
@@ -7430,7 +7436,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);
@@ -7922,11 +7928,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(() => {
@@ -8052,9 +8058,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();
@@ -8063,18 +8069,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;
@@ -8741,8 +8746,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(() => {
@@ -8871,7 +8876,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,
@@ -8947,7 +8952,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 {
@@ -9121,12 +9126,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
     }));
@@ -9169,7 +9174,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,
@@ -9339,7 +9344,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, {
@@ -9384,7 +9389,7 @@ const VDivider = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const dividerStyles = computed(() => {
       const styles = {};
       if (props.length) {
@@ -9746,7 +9751,7 @@ const VList = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       borderClasses
     } = useBorder(props);
@@ -9769,30 +9774,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);
@@ -10120,13 +10125,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;
@@ -10836,7 +10850,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;
@@ -10873,10 +10887,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]);
     }
@@ -10896,11 +10910,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
     }))
   };
@@ -11117,14 +11131,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,
@@ -11450,7 +11464,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());
@@ -11618,7 +11632,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, {
@@ -11745,12 +11759,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();
@@ -11765,7 +11779,7 @@ const VField = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       textColorClasses,
       textColorStyles
@@ -12492,7 +12506,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;
@@ -12729,7 +12743,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,
@@ -13231,7 +13245,6 @@ const VAutocomplete = genericComponent()({
     const vMenuRef = ref();
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
-    const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
       transformIn,
@@ -13240,7 +13253,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);
@@ -13689,7 +13702,7 @@ const VBadge = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       roundedClasses
     } = useRounded(props);
@@ -13699,7 +13712,7 @@ const VBadge = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'textColor'));
+    } = useTextColor(() => props.textColor);
     const {
       themeClasses
     } = useTheme();
@@ -13811,7 +13824,7 @@ const VBanner = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'bgColor');
+    } = useBackgroundColor(() => props.bgColor);
     const {
       borderClasses
     } = useBorder(props);
@@ -13840,8 +13853,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,
@@ -13950,7 +13963,7 @@ const VBottomNavigation = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       densityClasses
     } = useDensity(props);
@@ -13970,19 +13983,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'
       }
     }, {
@@ -14218,11 +14231,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', {
@@ -14277,7 +14289,7 @@ const VBreadcrumbs = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       densityClasses
     } = useDensity(props);
@@ -14286,13 +14298,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 => {
@@ -14615,10 +14627,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;
@@ -14632,10 +14644,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", {
@@ -14680,8 +14692,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 {};
   }
@@ -14894,8 +14906,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();
     }
@@ -15797,7 +15809,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 {
@@ -15811,7 +15823,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);
@@ -15913,7 +15925,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) {
@@ -15944,11 +15956,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,
@@ -15961,16 +15973,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,
@@ -16889,7 +16901,7 @@ const VSheet = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -16936,7 +16948,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);
@@ -17921,7 +17933,6 @@ const VCombobox = genericComponent()({
     const vVirtualScrollRef = ref();
     const selectionIndex = shallowRef(-1);
     let cleared = false;
-    const color = computed(() => vTextFieldRef.value?.color);
     const {
       items,
       transformIn,
@@ -17930,7 +17941,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;
@@ -17985,7 +17996,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
@@ -18491,7 +18502,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 => {
@@ -18678,23 +18689,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
@@ -18975,7 +18986,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,
@@ -19013,8 +19024,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,
@@ -19232,7 +19243,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);
@@ -19276,7 +19287,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,
@@ -19556,13 +19567,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(() => {
@@ -20203,7 +20214,7 @@ const VDataTableHeaders = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     const {
       displayClasses,
       mobile
@@ -20861,13 +20872,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, {
@@ -20950,10 +20961,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(() => ({
@@ -21050,13 +21061,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, {
@@ -21132,10 +21143,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(() => ({
@@ -21288,8 +21299,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
@@ -21344,7 +21355,7 @@ const VDataTableServer = genericComponent()({
       itemsPerPage,
       sortBy,
       groupBy,
-      search: toRef(props, 'search')
+      search: toRef(() => props.search)
     });
     provide('v-data-table', {
       toggleSort,
@@ -21352,10 +21363,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(() => ({
@@ -21825,7 +21836,7 @@ const VDatePickerHeader = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     function onClick() {
       emit('click');
     }
@@ -21964,21 +21975,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)
       };
     });
   }
@@ -22066,7 +22077,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) {
@@ -22446,7 +22457,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);
@@ -22463,8 +22474,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 = [];
@@ -22676,7 +22687,7 @@ const VEmptyState = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -22839,7 +22850,7 @@ const VExpansionPanelTitle = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -22850,7 +22861,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,
@@ -22905,14 +22916,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;
@@ -23003,21 +23014,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, {
@@ -23079,7 +23090,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';
@@ -23096,7 +23107,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;
@@ -23221,7 +23232,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) {
@@ -23394,7 +23405,7 @@ const VFooter = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);
@@ -23416,11 +23427,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;
@@ -23893,11 +23904,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],
@@ -24429,7 +24440,7 @@ const VNavigationDrawer = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       elevationClasses
     } = useElevation(props);
@@ -24462,7 +24473,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, () => {
@@ -24488,7 +24499,7 @@ const VNavigationDrawer = genericComponent()({
       isActive,
       isTemporary,
       width,
-      touchless: toRef(props, 'touchless'),
+      touchless: toRef(() => props.touchless),
       position: location
     });
     const layoutSize = computed(() => {
@@ -24505,7 +24516,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')
@@ -24518,9 +24529,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,
@@ -24734,24 +24745,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();
@@ -24903,7 +24914,7 @@ const VNumberInput = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.increment(incrementSlotProps.value)]
+          default: () => [slots.increment(incrementSlotProps)]
         });
       }
       function decrementControlNode() {
@@ -24932,7 +24943,7 @@ const VNumberInput = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.decrement(decrementSlotProps.value)]
+          default: () => [slots.decrement(decrementSlotProps)]
         });
       }
       function controlNode() {
@@ -25132,12 +25143,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
@@ -25938,7 +25949,7 @@ const VSkeletonLoader = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -26737,7 +26748,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);
     });
@@ -27283,11 +27294,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;
@@ -27438,7 +27449,7 @@ const VSystemBar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       elevationClasses
     } = useElevation(props);
@@ -27458,7 +27469,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', {
@@ -27500,7 +27511,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');
@@ -27693,18 +27704,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(() => {
@@ -28054,7 +28065,7 @@ const VTimelineDivider = genericComponent()({
     const {
       backgroundColorStyles,
       backgroundColorClasses
-    } = useBackgroundColor(toRef(props, 'dotColor'));
+    } = useBackgroundColor(() => props.dotColor);
     const {
       roundedClasses
     } = useRounded(props, 'v-timeline-divider__dot');
@@ -28064,7 +28075,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
@@ -28235,17 +28246,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(() => {
@@ -28292,9 +28303,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", {
@@ -28341,7 +28352,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';
@@ -28349,7 +28360,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';
     });
@@ -28428,13 +28439,19 @@ const makeVCalendarIntervalEventProps = propsFactory({
 }, 'VCalendarIntervalEvent');
 const VCalendarIntervalEvent = genericComponent()({
   name: 'VCalendarIntervalEvent',
+  inheritAttrs: false,
   props: makeVCalendarIntervalEventProps(),
-  setup(props) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      emit,
+      slots
+    } = _ref;
     const adapter = useDate();
     const calcHeight = () => {
-      if (!props.event?.first && !props.event?.last || adapter.isEqual(props.event?.start, props.interval?.start)) {
+      if (!props.event?.first && !props.event?.last || adapter.isEqual(props.event?.end, props.interval?.end)) {
         return {
-          height: '100%',
+          height: `${props.intervalHeight}px`,
           margin: convertToUnit(0)
         };
       } else {
@@ -28443,8 +28460,8 @@ const VCalendarIntervalEvent = genericComponent()({
           margin
         } = Array.from({
           length: props.intervalDivisions
-        }, x => x * (props.intervalDuration / props.intervalDivisions)).reduce((total, div, index) => {
-          if (adapter.isBefore(adapter.addMinutes(props.interval?.start, div), props.event?.start)) {
+        }, (_, x) => (x + 1) * (props.intervalDuration / props.intervalDivisions)).reduce((total, div, index) => {
+          if (adapter.isBefore(adapter.addMinutes(props.interval?.start, div), props.event?.end)) {
             return {
               height: convertToUnit(props.intervalHeight / props.intervalDivisions * index),
               margin: convertToUnit(props.intervalHeight / props.intervalDivisions * index)
@@ -28465,16 +28482,30 @@ const VCalendarIntervalEvent = genericComponent()({
       }
     };
     useRender(() => {
-      return createVNode(VSheet, {
+      return createVNode("div", null, [slots.intervalEvent?.({
+        height: calcHeight().height,
+        margin: calcHeight().margin,
+        eventClass: 'v-calendar-internal-event',
+        event: props.event,
+        interval: props.interval
+      }) ?? createVNode(VSheet, mergeProps({
         "height": calcHeight().height,
         "density": "comfortable",
         "style": `margin-top: ${calcHeight().margin}`,
         "class": "v-calendar-internal-event",
         "color": props.event?.color ?? undefined,
         "rounded": props.event?.first && props.event?.last ? true : props.event?.first ? 't' : props.event?.last ? 'b' : false
-      }, {
+      }, getPrefixedEventHandlers(attrs, ':event', () => ({
+        event: props.event,
+        allDay: false,
+        day: null,
+        interval: props.interval,
+        intervalDivisions: props.intervalDivisions,
+        intervalDuration: props.intervalDuration,
+        intervalHeight: props.intervalHeight
+      }))), {
         default: () => [props.event?.first ? props.event?.title : '']
-      });
+      })]);
     });
     return {};
   }
@@ -28510,6 +28541,7 @@ const makeVCalendarIntervalProps = propsFactory({
 }, 'VCalendarInterval');
 const VCalendarInterval = genericComponent()({
   name: 'VCalendarInterval',
+  inheritAttrs: false,
   props: {
     index: {
       type: Number,
@@ -28519,6 +28551,7 @@ const VCalendarInterval = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      attrs,
       emit,
       slots
     } = _ref;
@@ -28544,45 +28577,74 @@ const VCalendarInterval = genericComponent()({
       return props.dayIndex === 0 ? createVNode("div", {
         "class": "v-calendar-day__row-with-label",
         "style": `height: ${convertToUnit(props.intervalHeight)}`
-      }, [createVNode("div", {
+      }, [createVNode("div", mergeProps({
         "class": "v-calendar-day__row-label"
-      }, [createVNode(resolveComponent("slot"), {
-        "name": "intervalFormat",
-        "interval": interval.value
-      }, {
-        default: () => [props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : '']
-      })]), createVNode("div", {
+      }, getPrefixedEventHandlers(attrs, ':time', () => props)), [slots.intervalTitle?.({
+        interval: interval.value
+      }) ?? (props.index ? props.intervalFormat ? typeof props.intervalFormat === 'string' ? adapter.format(interval.value.start, 'hours12h') : props.intervalFormat(interval.value) : interval.value.label : '12 AM')]), createVNode("div", {
         "class": "v-calendar-day__row-hairline"
-      }, null), createVNode("div", {
+      }, null), createVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-      }, [createVNode(resolveComponent("slot"), {
-        "name": "intervalBody",
-        "interval": interval.value
-      }, {
-        default: () => [interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, {
-          "event": event,
-          "interval": interval.value,
-          "intervalDivisions": props.intervalDivisions,
-          "intervalDuration": props.intervalDuration,
-          "intervalHeight": props.intervalHeight
-        }, null))]
-      })])]) : createVNode("div", {
+      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
+        interval: interval.value
+      }) ?? createVNode("div", null, [interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
+        "event": event,
+        "interval": interval.value,
+        "intervalDivisions": props.intervalDivisions,
+        "intervalDuration": props.intervalDuration,
+        "intervalHeight": props.intervalHeight
+      }, attrs), {
+        ...(slots.intervalEvent ? {
+          intervalEvent: _ref2 => {
+            let {
+              height,
+              margin,
+              eventClass,
+              event,
+              interval
+            } = _ref2;
+            return slots.intervalEvent?.({
+              height,
+              margin,
+              eventClass,
+              event,
+              interval
+            });
+          }
+        } : {})
+      }))])])]) : createVNode("div", {
         "class": "v-calendar-day__row-without-label",
         "style": `height: ${convertToUnit(props.intervalHeight)}`
-      }, [createVNode("div", {
+      }, [createVNode("div", mergeProps({
         "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-      }, [createVNode(resolveComponent("slot"), {
-        "name": "intervalBody",
-        "interval": interval.value
-      }, {
-        default: () => [interval.value.events?.filter(event => !event.allDay).map(event => createVNode(VCalendarIntervalEvent, {
-          "event": event,
-          "interval": interval.value,
-          "intervalDivisions": props.intervalDivisions,
-          "intervalDuration": props.intervalDuration,
-          "intervalHeight": props.intervalHeight
-        }, null))]
-      })])]);
+      }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
+        interval: interval.value
+      }) ?? interval.value.events?.map(event => createVNode(VCalendarIntervalEvent, mergeProps({
+        "event": event,
+        "interval": interval.value,
+        "intervalDivisions": props.intervalDivisions,
+        "intervalDuration": props.intervalDuration,
+        "intervalHeight": props.intervalHeight
+      }, attrs), {
+        ...(slots.intervalEvent ? {
+          intervalEvent: _ref3 => {
+            let {
+              height,
+              margin,
+              eventClass,
+              event,
+              interval
+            } = _ref3;
+            return slots.intervalEvent?.({
+              height,
+              margin,
+              eventClass,
+              event,
+              interval
+            });
+          }
+        } : {})
+      }))])]);
     });
     return {
       interval
@@ -28590,6 +28652,8 @@ const VCalendarInterval = genericComponent()({
   }
 });
 
+// Types
+
 const makeVCalendarDayProps = propsFactory({
   hideDayHeader: Boolean,
   intervals: {
@@ -28600,26 +28664,34 @@ const makeVCalendarDayProps = propsFactory({
 }, 'VCalendarDay');
 const VCalendarDay = genericComponent()({
   name: 'VCalendarDay',
+  inheritAttrs: false,
   props: makeVCalendarDayProps(),
-  setup(props) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
     const adapter = useDate();
     const intervals = computed(() => [...Array.from({
       length: props.intervals
-    }, (v, i) => i).filter((int, index) => props.intervalDuration * (index + props.intervalStart) < 1440)]);
+    }, (v, i) => i).filter((_, index) => props.intervalDuration * (index + props.intervalStart) < 1440)]);
     useRender(() => {
       const calendarIntervalProps = VCalendarInterval.filterProps(props);
       return createVNode("div", {
         "class": "v-calendar-day__container"
-      }, [!props.hideDayHeader && createVNode("div", {
-        "key": "calender-week-name",
+      }, [!props.hideDayHeader && createVNode("div", mergeProps({
+        "key": "calendar-week-name",
         "class": "v-calendar-weekly__head-weekday"
-      }, [adapter.format(props.day.date, 'weekdayShort'), createVNode("div", null, [createVNode(VBtn, {
+      }, getPrefixedEventHandlers(attrs, ':day', () => props.day)), [adapter.format(props.day.date, 'weekdayShort'), createVNode("div", null, [createVNode(VBtn, mergeProps(getPrefixedEventHandlers(attrs, ':date', () => props.day), {
+        "class": props.day?.isToday ? 'v-calendar-day-label__today' : undefined,
         "icon": true,
         "text": adapter.format(props.day.date, 'dayOfMonth'),
-        "variant": "text"
-      }, null)])]), intervals.value.map((_, index) => createVNode(VCalendarInterval, mergeProps({
+        "variant": props.day?.isToday ? undefined : 'text'
+      }), null)])]), intervals.value.map((_, index) => slots.interval?.(calendarIntervalProps) ?? createVNode(VCalendarInterval, mergeProps({
         "index": index
-      }, calendarIntervalProps), null))]);
+      }, calendarIntervalProps, attrs, getPrefixedEventHandlers(attrs, ':interval', () => calendarIntervalProps)), {
+        ...pick(slots, ['intervalBody', 'intervalEvent', 'intervalTitle'])
+      }))]);
     });
     return {
       intervals
@@ -28658,7 +28730,8 @@ const VCalendarHeader = genericComponent()({
   },
   setup(props, _ref) {
     let {
-      emit
+      emit,
+      slots
     } = _ref;
     const {
       t
@@ -28692,7 +28765,9 @@ const VCalendarHeader = genericComponent()({
       "onClick": next
     }, null), createVNode("div", {
       "class": "v-calendar-header__title"
-    }, [props.title])]));
+    }, [slots.title?.({
+      title: props.title
+    }) ?? createVNode("span", null, [props.title])])]));
     return {};
   }
 });
@@ -28704,14 +28779,24 @@ const makeVCalendarEventProps = propsFactory({
 }, 'VCalendarEvent');
 const VCalendarEvent = genericComponent()({
   name: 'VCalendarEvent',
+  inheritAttrs: false,
   props: makeVCalendarEventProps(),
-  setup(props) {
-    useRender(() => createVNode(VChip, {
+  setup(props, _ref) {
+    let {
+      attrs,
+      emit,
+      slots
+    } = _ref;
+    useRender(() => createVNode(VChip, mergeProps({
       "color": props.allDay ? 'primary' : undefined,
       "density": "comfortable",
       "label": props.allDay,
       "width": "100%"
-    }, {
+    }, getPrefixedEventHandlers(attrs, ':event', () => ({
+      allDay: props.allDay,
+      day: props.day,
+      event: props.event
+    }))), {
       default: () => [createVNode(VBadge, {
         "inline": true,
         "dot": true,
@@ -28722,87 +28807,95 @@ const VCalendarEvent = genericComponent()({
   }
 });
 
+// Types
+
 const makeVCalendarMonthDayProps = propsFactory({
   active: Boolean,
   color: String,
-  day: Object,
+  day: {
+    type: Object
+  },
   disabled: Boolean,
   events: Array,
   title: [Number, String]
 }, 'VCalendarMonthDay');
 const VCalendarMonthDay = genericComponent()({
   name: 'VCalendarMonthDay',
+  inheritAttrs: false,
   props: makeVCalendarMonthDayProps(),
   setup(props, _ref) {
     let {
-      emit,
+      attrs,
       slots
     } = _ref;
     useRender(() => {
-      const hasTitle = !!(props.title || slots.title?.({
-        title: props.title
-      }));
-      return createVNode("div", {
+      return createVNode("div", mergeProps({
         "class": ['v-calendar-month__day']
-      }, [!props.day?.isHidden && hasTitle && createVNode("div", {
+      }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? createVNode("div", {
         "key": "title",
         "class": "v-calendar-weekly__day-label"
-      }, [slots.title?.({
+      }, [slots.dayTitle?.({
         title: props.title
-      }) ?? createVNode(VBtn, {
+      }) ?? createVNode(VBtn, mergeProps({
         "class": props.day?.isToday ? 'v-calendar-weekly__day-label__today' : undefined,
         "color": props.color,
         "disabled": props.disabled,
         "icon": true,
         "size": "x-small",
-        "variant": props.day?.isToday ? undefined : 'flat'
-      }, {
-        default: () => [props.title]
-      })]), !props.day?.isHidden && createVNode("div", {
+        "variant": props.day?.isToday ? undefined : 'flat',
+        "text": `${props.title}`
+      }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? createVNode("div", {
         "key": "content",
         "class": "v-calendar-weekly__day-content"
-      }, [slots.content?.() ?? createVNode("div", null, [createVNode("div", {
+      }, [slots.dayBody?.({
+        day: props.day,
+        events: props.events
+      }) ?? createVNode("div", null, [createVNode("div", {
         "class": "v-calendar-weekly__day-alldayevents-container"
-      }, [props.events?.filter(event => event.allDay).map(event => slots.event ? slots.event({
+      }, [props.events?.filter(event => event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
         day: props.day,
         allDay: true,
         event
-      }) : createVNode(VCalendarEvent, {
+      }) : createVNode(VCalendarEvent, mergeProps({
         "day": props.day,
         "event": event,
         "allDay": true
-      }, null))]), createVNode("div", {
+      }, attrs), null))]), createVNode("div", {
         "class": "v-calendar-weekly__day-events-container"
-      }, [props.events?.filter(event => !event.allDay).map(event => slots.event ? slots.event({
+      }, [props.events?.filter(event => !event.allDay).map(event => slots.dayEvent ? slots.dayEvent({
         day: props.day,
         event,
         allDay: false
-      }) : createVNode(VCalendarEvent, {
+      }) : createVNode(VCalendarEvent, mergeProps({
         "day": props.day,
         "event": event
-      }, null))])])]), !props.day?.isHidden && slots.default?.()]);
+      }, attrs), null))])])]) : undefined]);
     });
     return {};
   }
 });
 
+// Types
+
 const makeVCalendarProps = propsFactory({
   hideHeader: Boolean,
   hideWeekNumber: Boolean,
   ...makeCalendarProps(),
   ...makeVCalendarDayProps(),
   ...makeVCalendarHeaderProps()
-}, 'VCalender');
+}, 'VCalendar');
 const VCalendar = genericComponent()({
   name: 'VCalendar',
   props: makeVCalendarProps(),
   emits: {
     next: null,
     prev: null,
+    today: null,
     'update:modelValue': null
   },
   setup(props, _ref) {
     let {
+      attrs,
       emit,
       slots
     } = _ref;
@@ -28820,27 +28913,33 @@ const VCalendar = genericComponent()({
     function onClickNext() {
       if (props.viewMode === 'month') {
         model.value = [adapter.addMonths(displayValue.value, 1)];
-      }
-      if (props.viewMode === 'week') {
+      } else if (props.viewMode === 'week') {
         model.value = [adapter.addDays(displayValue.value, 7)];
-      }
-      if (props.viewMode === 'day') {
+      } else if (props.viewMode === 'day') {
         model.value = [adapter.addDays(displayValue.value, 1)];
       }
+      nextTick(() => {
+        emit('next', model.value[0]);
+      });
     }
     function onClickPrev() {
       if (props.viewMode === 'month') {
         model.value = [adapter.addMonths(displayValue.value, -1)];
-      }
-      if (props.viewMode === 'week') {
+      } else if (props.viewMode === 'week') {
         model.value = [adapter.addDays(displayValue.value, -7)];
-      }
-      if (props.viewMode === 'day') {
+      } else if (props.viewMode === 'day') {
         model.value = [adapter.addDays(displayValue.value, -1)];
       }
+      nextTick(() => {
+        emit('prev', model.value[0]);
+      });
     }
     function onClickToday() {
-      model.value = [adapter.date()];
+      const date = adapter.date();
+      model.value = [date];
+      nextTick(() => {
+        emit('today', model.value[0]);
+      });
     }
     const title = computed(() => {
       return adapter.format(displayValue.value, 'monthAndYear');
@@ -28854,20 +28953,25 @@ const VCalendar = genericComponent()({
           'v-calendar-weekly': props.viewMode === 'week',
           'v-calendar-day': props.viewMode === 'day'
         }]
-      }, [createVNode("div", null, [!props.hideHeader && (!slots.header ? createVNode(VCalendarHeader, mergeProps({
+      }, [createVNode("div", null, [!props.hideHeader && (slots.header?.({
+        title: title.value,
+        clickNext: onClickNext,
+        clickPrev: onClickPrev,
+        clickToday: onClickToday
+      }) ?? createVNode(VCalendarHeader, mergeProps({
         "key": "calendar-header"
       }, calendarHeaderProps, {
         "title": title.value,
         "onClick:next": onClickNext,
         "onClick:prev": onClickPrev,
         "onClick:toToday": onClickToday
-      }), null) : slots.header({
-        title: title.value
+      }), {
+        title: slots.title
       }))]), createVNode("div", {
         "class": ['v-calendar__container', `days__${weekDays.value.length}`]
       }, [props.viewMode === 'month' && !props.hideDayHeader && createVNode("div", {
         "class": ['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
-        "key": "calenderWeeklyHead"
+        "key": "calendarWeeklyHead"
       }, [!props.hideWeekNumber ? createVNode("div", {
         "key": "weekNumber0",
         "class": "v-calendar-weekly__head-weeknumber"
@@ -28876,24 +28980,39 @@ const VCalendar = genericComponent()({
       }, [dayNames[weekday]]))]), props.viewMode === 'month' && createVNode("div", {
         "key": "VCalendarMonth",
         "class": ['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])]
-      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createVNode("div", {
+      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createVNode("div", mergeProps({
         "class": "v-calendar-month__weeknumber"
-      }, [weekNumbers.value[wi]]) : '', week.map(day => createVNode(VCalendarMonthDay, {
-        "color": adapter.isSameDay(adapter.date(), day.date) ? 'primary' : undefined,
+      }, getPrefixedEventHandlers(attrs, ':weekNumber', () => ({
+        weekNumber: weekNumbers.value[wi],
+        week
+      }))), [weekNumbers.value[wi]]) : '', week.map(day => createVNode(VCalendarMonthDay, mergeProps({
+        "key": day.date.getTime()
+      }, calendarDayProps, {
         "day": day,
-        "title": day ? adapter.format(day.date, 'dayOfMonth') : 'NaN',
+        "title": adapter.format(day.date, 'dayOfMonth'),
         "events": props.events?.filter(e => adapter.isSameDay(day.date, e.start) || adapter.isSameDay(day.date, e.end))
-      }, {
-        event: slots.event
-      }))])]), props.viewMode === 'week' && daysInWeek.value.map((day, i) => createVNode(VCalendarDay, mergeProps(calendarDayProps, {
+      }, attrs), {
+        ...pick(slots, ['day-body', 'day-event', 'day-title'])
+      }))])]), props.viewMode === 'week' && daysInWeek.value.map((day, i) => slots['day-interval'] ? slots['day-interval']?.({
+        ...calendarDayProps,
+        day,
+        dayIndex: i,
+        events: props.events?.filter(e => adapter.isSameDay(e.start, day.date) || adapter.isSameDay(e.end, day.date))
+      }) : createVNode(VCalendarDay, mergeProps(calendarDayProps, {
         "day": day,
         "dayIndex": i,
         "events": props.events?.filter(e => adapter.isSameDay(e.start, day.date) || adapter.isSameDay(e.end, day.date))
-      }), null)), props.viewMode === 'day' && createVNode(VCalendarDay, mergeProps(calendarDayProps, {
-        "day": genDays([displayValue.value], adapter.date())[0],
+      }, attrs), {
+        ...pick(slots, ['interval', 'intervalBody', 'intervalEvent', 'intervalTitle'])
+      })), props.viewMode === 'day' && (slots['day-interval'] ? slots['day-interval']({
+        day: genDays([displayValue.value], adapter.date())[0],
+        dayIndex: 0,
+        events: props.events?.filter(e => adapter.isSameDay(e.start, genDays([displayValue.value], adapter.date())[0].date) || adapter.isSameDay(e.end, genDays([displayValue.value], adapter.date())[0].date))
+      }) : createVNode(VCalendarDay, mergeProps(calendarDayProps, {
+        "day": genDays([model.value[0]], adapter.date())[0],
         "dayIndex": 0,
-        "events": props.events?.filter(e => adapter.isSameDay(e.start, genDays([displayValue.value], adapter.date())[0].date) || adapter.isSameDay(e.end, genDays([displayValue.value], adapter.date())[0].date))
-      }), null)])]);
+        "events": props.events?.filter(e => adapter.isSameDay(e.start, genDays([model.value[0]], adapter.date())[0].date) || adapter.isSameDay(e.end, genDays([model.value[0]], adapter.date())[0].date))
+      }, attrs), null))])]);
     });
     return {
       daysInMonth,
@@ -29442,10 +29561,7 @@ const makeVIconBtnProps = propsFactory({
   hideOverlay: Boolean,
   icon: [String, Function, Object],
   iconColor: String,
-  iconSize: {
-    type: [Number, String],
-    default: 'default'
-  },
+  iconSize: [Number, String],
   iconSizes: {
     type: Array,
     default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
@@ -29506,7 +29622,7 @@ const VIconBtn = genericComponent()({
       colorClasses,
       colorStyles,
       variantClasses
-    } = useVariant(toRef(() => ({
+    } = useVariant(() => ({
       color: (() => {
         if (props.disabled) return undefined;
         if (!isActive.value) return props.color;
@@ -29521,7 +29637,7 @@ const VIconBtn = genericComponent()({
         if (isActive.value) return props.activeVariant ?? props.variant;
         return props.baseVariant ?? props.variant;
       })()
-    })));
+    }));
     const btnSizeMap = new Map(props.sizes);
     const iconSizeMap = new Map(props.iconSizes);
     function onClick() {
@@ -29530,13 +29646,14 @@ const VIconBtn = genericComponent()({
     }
     useRender(() => {
       const icon = isActive.value ? props.activeIcon ?? props.icon : props.icon;
-      const size = props.size;
-      const hasNamedSize = btnSizeMap.has(size);
-      const btnSize = hasNamedSize ? btnSizeMap.get(size) : size;
+      const _btnSize = props.size;
+      const hasNamedSize = btnSizeMap.has(_btnSize);
+      const btnSize = hasNamedSize ? btnSizeMap.get(_btnSize) : _btnSize;
       const btnHeight = props.height ?? btnSize;
       const btnWidth = props.width ?? btnSize;
-      const _iconSize = hasNamedSize ? size : props.iconSize ?? size;
-      const iconSize = iconSizeMap.get(_iconSize) ?? _iconSize;
+      const _iconSize = props.iconSize;
+      const hasNamedIconSize = iconSizeMap.has(_iconSize);
+      const iconSize = !_iconSize ? hasNamedSize ? iconSizeMap.get(_btnSize) : iconSizeMap.get('default') : hasNamedIconSize ? iconSizeMap.get(_iconSize) : _iconSize;
       const iconProps = {
         icon,
         size: iconSize,
@@ -30017,11 +30134,11 @@ const VTimePickerClock = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const count = computed(() => props.max - props.min + 1);
     const roundCount = computed(() => props.double ? count.value / 2 : count.value);
     const degreesPerUnit = computed(() => 360 / roundCount.value);
@@ -30881,9 +30998,9 @@ const VTreeview = genericComponent()({
     const {
       items
     } = useListItems(props);
-    const activeColor = toRef(props, 'activeColor');
-    const baseColor = toRef(props, 'baseColor');
-    const color = toRef(props, 'color');
+    const activeColor = toRef(() => props.activeColor);
+    const baseColor = toRef(() => props.baseColor);
+    const color = toRef(() => props.color);
     const activated = useProxiedModel(props, 'activated');
     const model = useProxiedModel(props, 'modelValue');
     const _selected = useProxiedModel(props, 'selected', props.modelValue);
@@ -30897,7 +31014,7 @@ const VTreeview = genericComponent()({
     const vListRef = ref();
     const opened = computed(() => props.openAll ? openAll(items.value) : props.opened);
     const flatItems = computed(() => flatten(items.value));
-    const search = toRef(props, 'search');
+    const search = toRef(() => props.search);
     const {
       filteredItems
     } = useFilter(props, flatItems, search);
@@ -30940,18 +31057,18 @@ const VTreeview = genericComponent()({
         activeColor,
         baseColor,
         color,
-        collapseIcon: toRef(props, 'collapseIcon'),
-        expandIcon: toRef(props, 'expandIcon')
+        collapseIcon: toRef(() => props.collapseIcon),
+        expandIcon: toRef(() => props.expandIcon)
       },
       VTreeviewItem: {
-        activeClass: toRef(props, 'activeClass'),
+        activeClass: toRef(() => props.activeClass),
         activeColor,
         baseColor,
         color,
-        density: toRef(props, 'density'),
-        disabled: toRef(props, 'disabled'),
-        lines: toRef(props, 'lines'),
-        variant: toRef(props, 'variant')
+        density: toRef(() => props.density),
+        disabled: toRef(() => props.disabled),
+        lines: toRef(() => props.lines),
+        variant: toRef(() => props.variant)
       }
     });
     useRender(() => {
@@ -31491,7 +31608,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
@@ -31789,7 +31906,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.2-master.2025-04-17";
+const version = "3.8.2-master.2025-04-22";
 
 /* eslint-disable local-rules/sort-imports */