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

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.2-master.2025-04-17
+* Vuetify v3.8.2-master.2025-04-22
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -446,15 +446,19 @@
 
   function destructComputed(getter) {
     const refs = vue.reactive({});
-    const base = vue.computed(getter);
     vue.watchEffect(() => {
-      for (const key in base.value) {
-        refs[key] = base.value[key];
+      const base = getter();
+      for (const key in base) {
+        refs[key] = base[key];
       }
     }, {
       flush: 'sync'
     });
-    return vue.toRefs(refs);
+    const obj = {};
+    for (const key in refs) {
+      obj[key] = vue.toRef(() => refs[key]);
+    }
+    return obj;
   }
 
   /** Array.includes but value can be any type */
@@ -1745,7 +1749,7 @@
     const mainRect = vue.computed(() => {
       return layers.value[layers.value.length - 1].layer;
     });
-    const mainStyles = vue.computed(() => {
+    const mainStyles = vue.toRef(() => {
       return {
         '--v-layout-left': convertToUnit(mainRect.value.left),
         '--v-layout-right': convertToUnit(mainRect.value.right),
@@ -1860,10 +1864,10 @@
       layoutRect,
       rootZIndex
     });
-    const layoutClasses = vue.computed(() => ['v-layout', {
+    const layoutClasses = vue.toRef(() => ['v-layout', {
       'v-layout--full-height': props.fullHeight
     }]);
-    const layoutStyles = vue.computed(() => ({
+    const layoutStyles = vue.toRef(() => ({
       zIndex: parentLayout ? rootZIndex.value : undefined,
       position: parentLayout ? 'relative' : undefined,
       overflow: parentLayout ? 'hidden' : undefined
@@ -2254,7 +2258,7 @@
     return {
       isRtl,
       rtl,
-      rtlClasses: vue.computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+      rtlClasses: vue.toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
     };
   }
   function provideRtl(locale, rtl, props) {
@@ -2262,7 +2266,7 @@
     return {
       isRtl,
       rtl,
-      rtlClasses: vue.computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
+      rtlClasses: vue.toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
     };
   }
   function useRtl() {
@@ -2486,7 +2490,7 @@
       }
       return acc;
     });
-    const current = vue.computed(() => computedThemes.value[name.value]);
+    const current = vue.toRef(() => computedThemes.value[name.value]);
     const styles = vue.computed(() => {
       const lines = [];
       if (current.value?.dark) {
@@ -2533,7 +2537,7 @@
           }
         } else {
           if (IN_BROWSER) {
-            head.addHeadObjs(vue.computed(getHead));
+            head.addHeadObjs(vue.toRef(getHead));
             vue.watchEffect(() => head.updateDOM());
           } else {
             head.addHeadObjs(getHead());
@@ -2552,7 +2556,7 @@
         }
       }
     }
-    const themeClasses = vue.computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
     return {
       install,
       isDisabled: parsedOptions.isDisabled,
@@ -2572,9 +2576,9 @@
     getCurrentInstance('provideTheme');
     const theme = vue.inject(ThemeSymbol, null);
     if (!theme) throw new Error('Could not find Vuetify theme injection');
-    const name = vue.computed(() => props.theme ?? theme.name.value);
-    const current = vue.computed(() => theme.themes.value[name.value]);
-    const themeClasses = vue.computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+    const name = vue.toRef(() => props.theme ?? theme.name.value);
+    const current = vue.toRef(() => theme.themes.value[name.value]);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -2858,6 +2862,7 @@
   const makeVDialogTransitionProps = propsFactory({
     target: [Object, Array]
   }, 'v-dialog-transition');
+  const saved = new WeakMap();
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
     props: makeVDialogTransitionProps(),
@@ -2874,13 +2879,15 @@
           await new Promise(resolve => requestAnimationFrame(resolve));
           await new Promise(resolve => requestAnimationFrame(resolve));
           el.style.visibility = '';
+          const dimensions = getDimensions(props.target, el);
           const {
             x,
             y,
             sx,
             sy,
             speed
-          } = getDimensions(props.target, el);
+          } = dimensions;
+          saved.set(el, dimensions);
           const animation = animate(el, [{
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
@@ -2909,13 +2916,19 @@
         },
         async onLeave(el, done) {
           await new Promise(resolve => requestAnimationFrame(resolve));
+          let dimensions;
+          if (!Array.isArray(props.target) && !props.target.offsetParent && saved.has(el)) {
+            dimensions = saved.get(el);
+          } else {
+            dimensions = getDimensions(props.target, el);
+          }
           const {
             x,
             y,
             sx,
             sy,
             speed
-          } = getDimensions(props.target, el);
+          } = dimensions;
           const animation = animate(el, [{}, {
             transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
             opacity: 0
@@ -3135,13 +3148,14 @@
   // Composables
   function useColor(colors) {
     return destructComputed(() => {
+      const _colors = vue.toValue(colors);
       const classes = [];
       const styles = {};
-      if (colors.value.background) {
-        if (isCssColor(colors.value.background)) {
-          styles.backgroundColor = colors.value.background;
-          if (!colors.value.text && isParsableColor(colors.value.background)) {
-            const backgroundColor = parseColor(colors.value.background);
+      if (_colors.background) {
+        if (isCssColor(_colors.background)) {
+          styles.backgroundColor = _colors.background;
+          if (!_colors.text && isParsableColor(_colors.background)) {
+            const backgroundColor = parseColor(_colors.background);
             if (backgroundColor.a == null || backgroundColor.a === 1) {
               const textColor = getForeground(backgroundColor);
               styles.color = textColor;
@@ -3149,15 +3163,15 @@
             }
           }
         } else {
-          classes.push(`bg-${colors.value.background}`);
+          classes.push(`bg-${_colors.background}`);
         }
       }
-      if (colors.value.text) {
-        if (isCssColor(colors.value.text)) {
-          styles.color = colors.value.text;
-          styles.caretColor = colors.value.text;
+      if (_colors.text) {
+        if (isCssColor(_colors.text)) {
+          styles.color = _colors.text;
+          styles.caretColor = _colors.text;
         } else {
-          classes.push(`text-${colors.value.text}`);
+          classes.push(`text-${_colors.text}`);
         }
       }
       return {
@@ -3166,27 +3180,25 @@
       };
     });
   }
-  function useTextColor(props, name) {
-    const colors = vue.computed(() => ({
-      text: vue.isRef(props) ? props.value : name ? props[name] : null
-    }));
+  function useTextColor(color) {
     const {
       colorClasses: textColorClasses,
       colorStyles: textColorStyles
-    } = useColor(colors);
+    } = useColor(() => ({
+      text: vue.toValue(color)
+    }));
     return {
       textColorClasses,
       textColorStyles
     };
   }
-  function useBackgroundColor(props, name) {
-    const colors = vue.computed(() => ({
-      background: vue.isRef(props) ? props.value : name ? props[name] : null
-    }));
+  function useBackgroundColor(color) {
     const {
       colorClasses: backgroundColorClasses,
       colorStyles: backgroundColorStyles
-    } = useColor(colors);
+    } = useColor(() => ({
+      background: vue.toValue(color)
+    }));
     return {
       backgroundColorClasses,
       backgroundColorStyles
@@ -3370,7 +3382,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -3477,7 +3489,7 @@
         };
         poll();
       }
-      const containClasses = vue.computed(() => ({
+      const containClasses = vue.toRef(() => ({
         'v-img__img--cover': props.cover,
         'v-img__img--contain': !props.cover
       }));
@@ -3614,16 +3626,13 @@
   function useBorder(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const borderClasses = vue.computed(() => {
-      const border = vue.isRef(props) ? props.value : props.border;
-      const classes = [];
+      const border = props.border;
       if (border === true || border === '') {
-        classes.push(`${name}--border`);
+        return `${name}--border`;
       } else if (typeof border === 'string' || border === 0) {
-        for (const value of String(border).split(' ')) {
-          classes.push(`border-${value}`);
-        }
+        return String(border).split(' ').map(v => `border-${v}`);
       }
-      return classes;
+      return [];
     });
     return {
       borderClasses
@@ -3648,12 +3657,10 @@
     }
   }, 'elevation');
   function useElevation(props) {
-    const elevationClasses = vue.computed(() => {
+    const elevationClasses = vue.toRef(() => {
       const elevation = vue.isRef(props) ? props.value : props.elevation;
-      const classes = [];
-      if (elevation == null) return classes;
-      classes.push(`elevation-${elevation}`);
-      return classes;
+      if (elevation == null) return [];
+      return [`elevation-${elevation}`];
     });
     return {
       elevationClasses
@@ -3704,7 +3711,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -3913,7 +3920,7 @@
         isBooted.value = true;
       });
     });
-    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
+    const ssrBootStyles = vue.toRef(() => !isBooted.value ? {
       transition: 'none !important'
     } : undefined);
     return {
@@ -3981,7 +3988,7 @@
       } = useScroll(props, {
         canScroll
       });
-      const canHide = vue.computed(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
+      const canHide = vue.toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
       const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
       const isFlat = vue.computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
@@ -3992,7 +3999,7 @@
         if (!canHide.value) return height + extensionHeight;
         return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
       });
-      useToggleScope(vue.computed(() => !!props.scrollBehavior), () => {
+      useToggleScope(() => !!props.scrollBehavior, () => {
         vue.watchEffect(() => {
           if (canHide.value) {
             if (scrollBehavior.value.inverted) {
@@ -4013,11 +4020,11 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.toRef(props, 'location'),
+        position: vue.toRef(() => props.location),
         layoutSize: height,
         elementSize: vue.shallowRef(undefined),
         active: isActive,
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => {
         const toolbarProps = VToolbar.filterProps(props);
@@ -4060,7 +4067,7 @@
   }, 'density');
   function useDensity(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const densityClasses = vue.computed(() => {
+    const densityClasses = vue.toRef(() => {
       return `${name}--density-${props.density}`;
     });
     return {
@@ -4090,24 +4097,24 @@
   }, 'variant');
   function useVariant(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const variantClasses = vue.computed(() => {
+    const variantClasses = vue.toRef(() => {
       const {
         variant
-      } = vue.unref(props);
+      } = vue.toValue(props);
       return `${name}--variant-${variant}`;
     });
     const {
       colorClasses,
       colorStyles
-    } = useColor(vue.computed(() => {
+    } = useColor(() => {
       const {
         variant,
         color
-      } = vue.unref(props);
+      } = vue.toValue(props);
       return {
         [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color
       };
-    }));
+    });
     return {
       colorClasses,
       colorStyles,
@@ -4152,11 +4159,11 @@
       provideDefaults({
         VBtn: {
           height: 'auto',
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          density: vue.toRef(props, 'density'),
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          density: vue.toRef(() => props.density),
           flat: true,
-          variant: vue.toRef(props, 'variant')
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => {
@@ -4206,7 +4213,7 @@
       if (!required) return group;
       throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
     }
-    const value = vue.toRef(props, 'value');
+    const value = vue.toRef(() => props.value);
     const disabled = vue.computed(() => !!(group.disabled.value || props.disabled));
     group.register({
       id,
@@ -4355,12 +4362,12 @@
       unregister,
       selected,
       select,
-      disabled: vue.toRef(props, 'disabled'),
+      disabled: vue.toRef(() => props.disabled),
       prev: () => step(items.length - 1),
       next: () => step(1),
       isSelected: id => selected.value.includes(id),
-      selectedClass: vue.computed(() => props.selectedClass),
-      items: vue.computed(() => items),
+      selectedClass: vue.toRef(() => props.selectedClass),
+      items: vue.toRef(() => items),
       getItemIndex: value => getItemIndex(items, value)
     };
     vue.provide(injectKey, state);
@@ -4616,7 +4623,7 @@
     const icons = vue.inject(IconSymbol);
     if (!icons) throw new Error('Missing Vuetify Icons provide!');
     const iconData = vue.computed(() => {
-      const iconAlias = vue.unref(props);
+      const iconAlias = vue.toValue(props);
       if (!iconAlias) return {
         component: VComponentIcon
       };
@@ -4666,14 +4673,15 @@
   function useSize(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     return destructComputed(() => {
+      const size = props.size;
       let sizeClasses;
       let sizeStyles;
-      if (includes(predefinedSizes, props.size)) {
-        sizeClasses = `${name}--size-${props.size}`;
-      } else if (props.size) {
+      if (includes(predefinedSizes, size)) {
+        sizeClasses = `${name}--size-${size}`;
+      } else if (size) {
         sizeStyles = {
-          width: convertToUnit(props.size),
-          height: convertToUnit(props.size)
+          width: convertToUnit(size),
+          height: convertToUnit(size)
         };
       }
       return {
@@ -4705,20 +4713,20 @@
         attrs,
         slots
       } = _ref;
-      const slotIcon = vue.ref();
+      const slotIcon = vue.shallowRef();
       const {
         themeClasses
       } = useTheme();
       const {
         iconData
-      } = useIcon(vue.computed(() => slotIcon.value || props.icon));
+      } = useIcon(() => slotIcon.value || props.icon);
       const {
         sizeClasses
       } = useSize(props);
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       useRender(() => {
         const slotValue = slots.default?.();
         if (slotValue) {
@@ -4824,11 +4832,11 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const {
         textColorClasses: underlayColorClasses,
         textColorStyles: underlayColorStyles
-      } = useTextColor(vue.toRef(props, 'bgColor'));
+      } = useTextColor(() => props.bgColor);
       const {
         intersectionRef,
         isIntersecting
@@ -4837,15 +4845,15 @@
         resizeRef,
         contentRect
       } = useResizeObserver();
-      const normalizedValue = vue.computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
-      const width = vue.computed(() => Number(props.width));
-      const size = vue.computed(() => {
+      const normalizedValue = vue.toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
+      const width = vue.toRef(() => Number(props.width));
+      const size = vue.toRef(() => {
         // Get size from element if size prop value is small, large etc
         return sizeStyles.value ? Number(props.size) : contentRect.value ? contentRect.value.width : Math.max(width.value, 32);
       });
-      const diameter = vue.computed(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
-      const strokeWidth = vue.computed(() => width.value / size.value * diameter.value);
-      const strokeDashOffset = vue.computed(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
+      const diameter = vue.toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
+      const strokeWidth = vue.toRef(() => width.value / size.value * diameter.value);
+      const strokeDashOffset = vue.toRef(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
       vue.watchEffect(() => {
         intersectionRef.value = root.value;
         resizeRef.value = root.value;
@@ -5023,19 +5031,19 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(props, 'color');
+      } = useTextColor(() => props.color);
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.computed(() => props.bgColor || props.color));
+      } = useBackgroundColor(() => props.bgColor || props.color);
       const {
         backgroundColorClasses: bufferColorClasses,
         backgroundColorStyles: bufferColorStyles
-      } = useBackgroundColor(vue.computed(() => props.bufferColor || props.bgColor || props.color));
+      } = useBackgroundColor(() => props.bufferColor || props.bgColor || props.color);
       const {
         backgroundColorClasses: barColorClasses,
         backgroundColorStyles: barColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -5142,7 +5150,7 @@
   }, 'loader');
   function useLoader(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const loaderClasses = vue.computed(() => ({
+    const loaderClasses = vue.toRef(() => ({
       [`${name}--loading`]: props.loading
     }));
     return {
@@ -5181,7 +5189,7 @@
   }, 'position');
   function usePosition(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
-    const positionClasses = vue.computed(() => {
+    const positionClasses = vue.toRef(() => {
       return props.position ? `${name}--${props.position}` : undefined;
     });
     return {
@@ -5202,12 +5210,12 @@
   }
   function useLink(props, attrs) {
     const RouterLink = vue.resolveDynamicComponent('RouterLink');
-    const isLink = vue.computed(() => !!(props.href || props.to));
+    const isLink = vue.toRef(() => !!(props.href || props.to));
     const isClickable = vue.computed(() => {
       return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
     });
     if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
-      const href = vue.toRef(props, 'href');
+      const href = vue.toRef(() => props.href);
       return {
         isLink,
         isClickable,
@@ -5217,12 +5225,12 @@
         })
       };
     }
+
     // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
-    const linkProps = vue.computed(() => ({
-      ...props,
-      to: vue.toRef(() => props.to || '')
-    }));
-    const routerLink = RouterLink.useLink(linkProps.value);
+    const routerLink = RouterLink.useLink({
+      to: vue.toRef(() => props.to || ''),
+      replace: vue.toRef(() => props.replace)
+    });
     // Actual link needs to be undefined when to prop is not used
     const link = vue.computed(() => props.to ? routerLink : undefined);
     const route = useRoute();
@@ -5242,7 +5250,7 @@
       href,
       linkProps: vue.reactive({
         href,
-        'aria-current': vue.computed(() => isActive.value ? 'page' : undefined)
+        'aria-current': vue.toRef(() => isActive.value ? 'page' : undefined)
       })
     };
   }
@@ -5691,7 +5699,7 @@
         }
         return group?.isSelected.value;
       });
-      const color = vue.computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
+      const color = vue.toRef(() => isActive.value ? props.activeColor ?? props.color : props.color);
       const variantProps = vue.computed(() => {
         const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
         return {
@@ -5705,7 +5713,7 @@
         variantClasses
       } = useVariant(variantProps);
       const isDisabled = vue.computed(() => group?.disabled.value || props.disabled);
-      const isElevated = vue.computed(() => {
+      const isElevated = vue.toRef(() => {
         return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
       });
       const valueAttr = vue.computed(() => {
@@ -5908,15 +5916,11 @@
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
-      const icon = vue.computed(() => {
+      const icon = vue.toRef(() => {
         if (props.icon === false) return undefined;
         if (!props.type) return props.icon;
         return props.icon ?? `$${props.type}`;
       });
-      const variantProps = vue.computed(() => ({
-        color: props.color ?? props.type,
-        variant: props.variant
-      }));
       const {
         themeClasses
       } = provideTheme(props);
@@ -5924,7 +5928,10 @@
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(variantProps);
+      } = useVariant(() => ({
+        color: props.color ?? props.type,
+        variant: props.variant
+      }));
       const {
         densityClasses
       } = useDensity(props);
@@ -5946,11 +5953,11 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'borderColor'));
+      } = useTextColor(() => props.borderColor);
       const {
         t
       } = useLocale();
-      const closeProps = vue.computed(() => ({
+      const closeProps = vue.toRef(() => ({
         'aria-label': t(props.closeLabel),
         onClick(e) {
           isActive.value = false;
@@ -6187,8 +6194,8 @@
       } = _ref;
       const modelValue = useProxiedModel(props, 'modelValue');
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-selection-control-group-${uid}`);
-      const name = vue.computed(() => props.name || id.value);
+      const id = vue.toRef(() => props.id || `v-selection-control-group-${uid}`);
+      const name = vue.toRef(() => props.name || id.value);
       const updateHandlers = new Set();
       vue.provide(VSelectionControlGroupSymbol, {
         modelValue,
@@ -6204,20 +6211,20 @@
       });
       provideDefaults({
         [props.defaultsTarget]: {
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled'),
-          density: vue.toRef(props, 'density'),
-          error: vue.toRef(props, 'error'),
-          inline: vue.toRef(props, 'inline'),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled),
+          density: vue.toRef(() => props.density),
+          error: vue.toRef(() => props.error),
+          inline: vue.toRef(() => props.inline),
           modelValue,
-          multiple: vue.computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
+          multiple: vue.toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
           name,
-          falseIcon: vue.toRef(props, 'falseIcon'),
-          trueIcon: vue.toRef(props, 'trueIcon'),
-          readonly: vue.toRef(props, 'readonly'),
-          ripple: vue.toRef(props, 'ripple'),
-          type: vue.toRef(props, 'type'),
-          valueComparator: vue.toRef(props, 'valueComparator')
+          falseIcon: vue.toRef(() => props.falseIcon),
+          trueIcon: vue.toRef(() => props.trueIcon),
+          readonly: vue.toRef(() => props.readonly),
+          ripple: vue.toRef(() => props.ripple),
+          type: vue.toRef(() => props.type),
+          valueComparator: vue.toRef(() => props.valueComparator)
         }
       });
       useRender(() => vue.createVNode("div", {
@@ -6273,16 +6280,16 @@
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(vue.computed(() => {
+    } = useTextColor(() => {
       if (props.error || props.disabled) return undefined;
       return model.value ? props.color : props.baseColor;
-    }));
+    });
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(vue.computed(() => {
+    } = useBackgroundColor(() => {
       return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
-    }));
+    });
     const icon = vue.computed(() => model.value ? props.trueIcon : props.falseIcon);
     return {
       group,
@@ -6327,8 +6334,8 @@
       const isFocused = vue.shallowRef(false);
       const isFocusVisible = vue.shallowRef(false);
       const input = vue.ref();
-      const id = vue.computed(() => props.id || `input-${uid}`);
-      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const id = vue.toRef(() => props.id || `input-${uid}`);
+      const isInteractive = vue.toRef(() => !props.disabled && !props.readonly);
       group?.onForceUpdate(() => {
         if (input.value) {
           input.value.checked = model.value;
@@ -6466,10 +6473,10 @@
           indeterminate.value = false;
         }
       }
-      const falseIcon = vue.computed(() => {
+      const falseIcon = vue.toRef(() => {
         return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
       });
-      const trueIcon = vue.computed(() => {
+      const trueIcon = vue.toRef(() => {
         return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
       useRender(() => {
@@ -6557,7 +6564,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.computed(() => props.color));
+      } = useTextColor(() => props.color);
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
@@ -6587,7 +6594,7 @@
   function useFocus(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
     const isFocused = useProxiedModel(props, 'focused');
-    const focusClasses = vue.computed(() => {
+    const focusClasses = vue.toRef(() => {
       return {
         [`${name}--focused`]: isFocused.value
       };
@@ -6626,8 +6633,8 @@
   }, 'form');
   function createForm(props) {
     const model = useProxiedModel(props, 'modelValue');
-    const isDisabled = vue.computed(() => props.disabled);
-    const isReadonly = vue.computed(() => props.readonly);
+    const isDisabled = vue.toRef(() => props.disabled);
+    const isReadonly = vue.toRef(() => props.readonly);
     const isValidating = vue.shallowRef(false);
     const items = vue.ref([]);
     const errors = vue.ref([]);
@@ -6717,7 +6724,7 @@
       isValidating,
       isValid: model,
       items,
-      validateOn: vue.toRef(props, 'validateOn')
+      validateOn: vue.toRef(() => props.validateOn)
     });
     return {
       errors,
@@ -7032,10 +7039,10 @@
         resetValidation,
         validate
       }));
-      const color = vue.computed(() => {
+      const color = vue.toRef(() => {
         return props.error || props.disabled ? undefined : props.focused ? props.color : props.baseColor;
       });
-      const iconColor = vue.computed(() => {
+      const iconColor = vue.toRef(() => {
         if (!props.iconColor) return undefined;
         return props.iconColor === true ? color.value : props.iconColor;
       });
@@ -7125,7 +7132,6 @@
         blur
       } = useFocus(props);
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `checkbox-${uid}`);
       useRender(() => {
         const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
         const inputProps = VInput.filterProps(props);
@@ -7135,7 +7141,7 @@
         }, rootAttrs, inputProps, {
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "id": id.value,
+          "id": props.id || `checkbox-${uid}`,
           "focused": isFocused.value,
           "style": props.style
         }), {
@@ -7319,7 +7325,7 @@
         return false;
       }
     });
-    const displayClasses = vue.computed(() => {
+    const displayClasses = vue.toRef(() => {
       if (!name) return {};
       return {
         [`${name}--mobile`]: mobile.value
@@ -7434,7 +7440,7 @@
     const goTo = {
       ...goToInstance,
       // can be set via VLocaleProvider
-      rtl: vue.computed(() => goToInstance.rtl.value || isRtl.value)
+      rtl: vue.toRef(() => goToInstance.rtl.value || isRtl.value)
     };
     async function go(target, options) {
       return scrollTo(target, mergeDeep(_options, options), false, goTo);
@@ -7926,11 +7932,11 @@
       } = useGroup(props, VChipGroupSymbol);
       provideDefaults({
         VChip: {
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled'),
-          filter: vue.toRef(props, 'filter'),
-          variant: vue.toRef(props, 'variant')
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled),
+          filter: vue.toRef(() => props.filter),
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => {
@@ -8056,9 +8062,9 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const group = useGroupItem(props, VChipGroupSymbol, false);
       const link = useLink(props, attrs);
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
+      const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
-      const closeProps = vue.computed(() => ({
+      const closeProps = vue.toRef(() => ({
         'aria-label': t(props.closeLabel),
         onClick(e) {
           e.preventDefault();
@@ -8067,18 +8073,17 @@
           emit('click:close', e);
         }
       }));
-      const variantProps = vue.computed(() => {
+      const {
+        colorClasses,
+        colorStyles,
+        variantClasses
+      } = useVariant(() => {
         const showColor = !group || group.isSelected.value;
         return {
           color: showColor ? props.color ?? props.baseColor : props.baseColor,
           variant: props.variant
         };
       });
-      const {
-        colorClasses,
-        colorStyles,
-        variantClasses
-      } = useVariant(variantProps);
       function onClick(e) {
         emit('click', e);
         if (!isClickable.value) return;
@@ -8745,8 +8750,8 @@
       id: vue.shallowRef(),
       root: {
         opened,
-        activatable: vue.toRef(props, 'activatable'),
-        selectable: vue.toRef(props, 'selectable'),
+        activatable: vue.toRef(() => props.activatable),
+        selectable: vue.toRef(() => props.selectable),
         activated,
         selected,
         selectedValues: vue.computed(() => {
@@ -8875,7 +8880,7 @@
   const useNestedItem = (id, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
     const uidSymbol = Symbol('nested item');
-    const computedId = vue.computed(() => id.value !== undefined ? id.value : uidSymbol);
+    const computedId = vue.computed(() => vue.toValue(id) ?? uidSymbol);
     const item = {
       ...parent,
       id: computedId,
@@ -8951,7 +8956,7 @@
         isOpen,
         open,
         id: _id
-      } = useNestedItem(vue.toRef(props, 'value'), true);
+      } = useNestedItem(() => props.value, true);
       const id = vue.computed(() => `v-list-group--id-${String(_id.value)}`);
       const list = useList();
       const {
@@ -9125,12 +9130,12 @@
       } = useNestedItem(id, false);
       const list = useList();
       const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
+      const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
-      const roundedProps = vue.computed(() => props.rounded || props.nav);
-      const color = vue.computed(() => props.color ?? props.activeColor);
-      const variantProps = vue.computed(() => ({
+      const roundedProps = vue.toRef(() => props.rounded || props.nav);
+      const color = vue.toRef(() => props.color ?? props.activeColor);
+      const variantProps = vue.toRef(() => ({
         color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
@@ -9173,7 +9178,7 @@
       const {
         roundedClasses
       } = useRounded(roundedProps);
-      const lineClasses = vue.computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+      const lineClasses = vue.toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
       const slotProps = vue.computed(() => ({
         isActive: isActive.value,
         select,
@@ -9343,7 +9348,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       useRender(() => {
         const hasText = !!(slots.default || props.title);
         return vue.createVNode(props.tag, {
@@ -9388,7 +9393,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const dividerStyles = vue.computed(() => {
         const styles = {};
         if (props.length) {
@@ -9750,7 +9755,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -9773,30 +9778,30 @@
         select,
         getPath
       } = useNested(props);
-      const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
-      const activeColor = vue.toRef(props, 'activeColor');
-      const baseColor = vue.toRef(props, 'baseColor');
-      const color = vue.toRef(props, 'color');
+      const lineClasses = vue.toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+      const activeColor = vue.toRef(() => props.activeColor);
+      const baseColor = vue.toRef(() => props.baseColor);
+      const color = vue.toRef(() => props.color);
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
           baseColor,
           color,
-          expandIcon: vue.toRef(props, 'expandIcon'),
-          collapseIcon: vue.toRef(props, 'collapseIcon')
+          expandIcon: vue.toRef(() => props.expandIcon),
+          collapseIcon: vue.toRef(() => props.collapseIcon)
         },
         VListItem: {
-          activeClass: vue.toRef(props, 'activeClass'),
+          activeClass: vue.toRef(() => props.activeClass),
           activeColor,
           baseColor,
           color,
-          density: vue.toRef(props, 'density'),
-          disabled: vue.toRef(props, 'disabled'),
-          lines: vue.toRef(props, 'lines'),
-          nav: vue.toRef(props, 'nav'),
-          slim: vue.toRef(props, 'slim'),
-          variant: vue.toRef(props, 'variant')
+          density: vue.toRef(() => props.density),
+          disabled: vue.toRef(() => props.disabled),
+          lines: vue.toRef(() => props.lines),
+          nav: vue.toRef(() => props.nav),
+          slim: vue.toRef(() => props.slim),
+          variant: vue.toRef(() => props.variant)
         }
       });
       const isFocused = vue.shallowRef(false);
@@ -10124,13 +10129,22 @@
     vue.onScopeDispose(() => {
       observer.disconnect();
     });
+    let targetBox = new Box({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
 
     // eslint-disable-next-line max-statements
     function updateLocation() {
       observe = false;
       requestAnimationFrame(() => observe = true);
       if (!data.target.value || !data.contentEl.value) return;
-      const targetBox = getTargetBox(data.target.value);
+      if (Array.isArray(data.target.value) || data.target.value.offsetParent) {
+        targetBox = getTargetBox(data.target.value);
+      } // Otherwise target element is hidden, use last known value
+
       const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
       const scrollParents = getScrollParents(data.contentEl.value);
       const viewportMargin = 12;
@@ -10840,7 +10854,7 @@
   }, 'lazy');
   function useLazy(props, active) {
     const isBooted = vue.shallowRef(false);
-    const hasContent = vue.computed(() => isBooted.value || props.eager || active.value);
+    const hasContent = vue.toRef(() => isBooted.value || props.eager || active.value);
     vue.watch(active, () => isBooted.value = true);
     function onAfterLeave() {
       if (!props.eager) isBooted.value = false;
@@ -10877,10 +10891,10 @@
       activeChildren: new Set()
     });
     vue.provide(StackSymbol, stack);
-    const _zIndex = vue.shallowRef(Number(zIndex.value));
+    const _zIndex = vue.shallowRef(Number(vue.toValue(zIndex)));
     useToggleScope(isActive, () => {
       const lastZIndex = globalStack.at(-1)?.[1];
-      _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
+      _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(vue.toValue(zIndex));
       if (createStackEntry) {
         globalStack.push([vm.uid, _zIndex.value]);
       }
@@ -10900,11 +10914,11 @@
         setTimeout(() => globalTop.value = _isTop);
       });
     }
-    const localTop = vue.computed(() => !stack.activeChildren.size);
+    const localTop = vue.toRef(() => !stack.activeChildren.size);
     return {
       globalTop: vue.readonly(globalTop),
       localTop,
-      stackStyles: vue.computed(() => ({
+      stackStyles: vue.toRef(() => ({
         zIndex: _zIndex.value
       }))
     };
@@ -11121,14 +11135,14 @@
         hasContent,
         onAfterLeave: _onAfterLeave
       } = useLazy(props, isActive);
-      const scrimColor = useBackgroundColor(vue.computed(() => {
+      const scrimColor = useBackgroundColor(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
-      }));
+      });
       const {
         globalTop,
         localTop,
         stackStyles
-      } = useStack(isActive, vue.toRef(props, 'zIndex'), props._disableGlobalStack);
+      } = useStack(isActive, () => props.zIndex, props._disableGlobalStack);
       const {
         activatorEl,
         activatorRef,
@@ -11454,7 +11468,7 @@
         isRtl
       } = useRtl();
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-menu-${uid}`);
+      const id = vue.toRef(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
       const openChildren = vue.shallowRef(new Set());
@@ -11622,7 +11636,7 @@
       let {
         slots
       } = _ref;
-      const counter = vue.computed(() => {
+      const counter = vue.toRef(() => {
         return props.max ? `${props.value} / ${props.max}` : String(props.value);
       });
       useRender(() => vue.createVNode(MaybeTransition, {
@@ -11749,12 +11763,12 @@
       const {
         rtlClasses
       } = useRtl();
-      const isActive = vue.computed(() => props.dirty || props.active);
-      const hasLabel = vue.computed(() => !!(props.label || slots.label));
-      const hasFloatingLabel = vue.computed(() => !props.singleLine && hasLabel.value);
+      const isActive = vue.toRef(() => props.dirty || props.active);
+      const hasLabel = vue.toRef(() => !!(props.label || slots.label));
+      const hasFloatingLabel = vue.toRef(() => !props.singleLine && hasLabel.value);
       const uid = vue.useId();
       const id = vue.computed(() => props.id || `input-${uid}`);
-      const messagesId = vue.computed(() => `${id.value}-messages`);
+      const messagesId = vue.toRef(() => `${id.value}-messages`);
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
@@ -11769,7 +11783,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         textColorClasses,
         textColorStyles
@@ -12496,7 +12510,7 @@
         paddingTop,
         paddingBottom,
         computedItems
-      } = useVirtual(props, vue.toRef(props, 'items'));
+      } = useVirtual(props, vue.toRef(() => props.items));
       useToggleScope(() => props.renderless, () => {
         function handleListeners() {
           let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -12733,7 +12747,7 @@
           _menu.value = v;
         }
       });
-      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
+      const label = vue.toRef(() => menu.value ? props.closeText : props.openText);
       const computedMenuProps = vue.computed(() => {
         return {
           ...props.menuProps,
@@ -13235,7 +13249,6 @@
       const vMenuRef = vue.ref();
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -13244,7 +13257,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => vTextFieldRef.value?.color);
       const search = useProxiedModel(props, 'search', '');
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
         const transformed = transformOut(v);
@@ -13693,7 +13706,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -13703,7 +13716,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'textColor'));
+      } = useTextColor(() => props.textColor);
       const {
         themeClasses
       } = useTheme();
@@ -13815,7 +13828,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'bgColor');
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -13844,8 +13857,8 @@
       const {
         themeClasses
       } = provideTheme(props);
-      const color = vue.toRef(props, 'color');
-      const density = vue.toRef(props, 'density');
+      const color = vue.toRef(() => props.color);
+      const density = vue.toRef(() => props.density);
       provideDefaults({
         VBannerActions: {
           color,
@@ -13954,7 +13967,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -13974,19 +13987,19 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.computed(() => 'bottom'),
-        layoutSize: vue.computed(() => isActive.value ? height.value : 0),
+        position: vue.toRef(() => 'bottom'),
+        layoutSize: vue.toRef(() => isActive.value ? height.value : 0),
         elementSize: height,
         active: isActive,
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useGroup(props, VBtnToggleSymbol);
       provideDefaults({
         VBtn: {
-          baseColor: vue.toRef(props, 'baseColor'),
-          color: vue.toRef(props, 'color'),
-          density: vue.toRef(props, 'density'),
-          stacked: vue.computed(() => props.mode !== 'horizontal'),
+          baseColor: vue.toRef(() => props.baseColor),
+          color: vue.toRef(() => props.color),
+          density: vue.toRef(() => props.density),
+          stacked: vue.toRef(() => props.mode !== 'horizontal'),
           variant: 'text'
         }
       }, {
@@ -14222,11 +14235,10 @@
       } = _ref;
       const link = useLink(props, attrs);
       const isActive = vue.computed(() => props.active || link.isActive?.value);
-      const color = vue.computed(() => isActive.value ? props.activeColor : props.color);
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => isActive.value ? props.activeColor : props.color);
       useRender(() => {
         return vue.createVNode(props.tag, {
           "class": ['v-breadcrumbs-item', {
@@ -14281,7 +14293,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -14290,13 +14302,13 @@
       } = useRounded(props);
       provideDefaults({
         VBreadcrumbsDivider: {
-          divider: vue.toRef(props, 'divider')
+          divider: vue.toRef(() => props.divider)
         },
         VBreadcrumbsItem: {
-          activeClass: vue.toRef(props, 'activeClass'),
-          activeColor: vue.toRef(props, 'activeColor'),
-          color: vue.toRef(props, 'color'),
-          disabled: vue.toRef(props, 'disabled')
+          activeClass: vue.toRef(() => props.activeClass),
+          activeColor: vue.toRef(() => props.activeColor),
+          color: vue.toRef(() => props.color),
+          disabled: vue.toRef(() => props.disabled)
         }
       });
       const items = vue.computed(() => props.items.map(item => {
@@ -14619,10 +14631,10 @@
         roundedClasses
       } = useRounded(props);
       const link = useLink(props, attrs);
-      const isLink = vue.computed(() => props.link !== false && link.isLink.value);
-      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value));
       useRender(() => {
-        const Tag = isLink.value ? 'a' : props.tag;
+        const isLink = props.link !== false && link.isLink.value;
+        const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
+        const Tag = isLink ? 'a' : props.tag;
         const hasTitle = !!(slots.title || props.title != null);
         const hasSubtitle = !!(slots.subtitle || props.subtitle != null);
         const hasHeader = hasTitle || hasSubtitle;
@@ -14636,10 +14648,10 @@
             'v-card--disabled': props.disabled,
             'v-card--flat': props.flat,
             'v-card--hover': props.hover && !(props.disabled || props.flat),
-            'v-card--link': isClickable.value
+            'v-card--link': isClickable
           }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
           "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
-          "onClick": isClickable.value && link.navigate,
+          "onClick": isClickable && link.navigate,
           "tabindex": props.disabled ? -1 : undefined
         }, link.linkProps), {
           default: () => [hasImage && vue.createVNode("div", {
@@ -14684,8 +14696,8 @@
             default: () => [slots.text?.() ?? props.text]
           }), slots.default?.(), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
-          }), genOverlays(isClickable.value, 'v-card')]
-        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
+          }), genOverlays(isClickable, 'v-card')]
+        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple]]);
       });
       return {};
     }
@@ -14898,8 +14910,8 @@
         transitionHeight,
         rootRef
       });
-      const canMoveBack = vue.computed(() => props.continuous || activeIndex.value !== 0);
-      const canMoveForward = vue.computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+      const canMoveBack = vue.toRef(() => props.continuous || activeIndex.value !== 0);
+      const canMoveForward = vue.toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
       function prev() {
         canMoveBack.value && group.prev();
       }
@@ -15801,7 +15813,7 @@
     const {
       isRtl
     } = useRtl();
-    const isReversed = vue.toRef(props, 'reverse');
+    const isReversed = vue.toRef(() => props.reverse);
     const vertical = vue.computed(() => props.direction === 'vertical');
     const indexFromEnd = vue.computed(() => vertical.value !== isReversed.value);
     const {
@@ -15815,7 +15827,7 @@
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
     const numTicks = vue.computed(() => (max.value - min.value) / step.value);
-    const disabled = vue.toRef(props, 'disabled');
+    const disabled = vue.toRef(() => props.disabled);
     const thumbColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
     const trackColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
     const trackFillColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
@@ -15917,7 +15929,7 @@
       const percentage = (val - min.value) / (max.value - min.value) * 100;
       return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
     };
-    const showTicks = vue.toRef(props, 'showTicks');
+    const showTicks = vue.toRef(() => props.showTicks);
     const parsedTicks = vue.computed(() => {
       if (!showTicks.value) return [];
       if (!props.ticks) {
@@ -15948,11 +15960,11 @@
     }));
     const data = {
       activeThumbRef,
-      color: vue.toRef(props, 'color'),
+      color: vue.toRef(() => props.color),
       decimals,
       disabled,
-      direction: vue.toRef(props, 'direction'),
-      elevation: vue.toRef(props, 'elevation'),
+      direction: vue.toRef(() => props.direction),
+      elevation: vue.toRef(() => props.elevation),
       hasLabels,
       isReversed,
       indexFromEnd,
@@ -15965,16 +15977,16 @@
       parsedTicks,
       parseMouseMove,
       position,
-      readonly: vue.toRef(props, 'readonly'),
-      rounded: vue.toRef(props, 'rounded'),
+      readonly: vue.toRef(() => props.readonly),
+      rounded: vue.toRef(() => props.rounded),
       roundValue,
       showTicks,
       startOffset,
       step,
       thumbSize,
       thumbColor,
-      thumbLabel: vue.toRef(props, 'thumbLabel'),
-      ticks: vue.toRef(props, 'ticks'),
+      thumbLabel: vue.toRef(() => props.thumbLabel),
+      ticks: vue.toRef(() => props.ticks),
       tickSize,
       trackColor,
       trackContainerRef,
@@ -16893,7 +16905,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -16940,7 +16952,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       useRender(() => {
         const sheetProps = VSheet.filterProps(props);
         const hasTitle = !!(props.title || slots.title);
@@ -17925,7 +17937,6 @@
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -17934,7 +17945,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(color);
+      } = useTextColor(() => vTextFieldRef.value?.color);
       const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
         const transformed = transformOut(v);
         return props.multiple ? transformed : transformed[0] ?? null;
@@ -17989,7 +18000,7 @@
           _menu.value = v;
         }
       });
-      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
+      const label = vue.toRef(() => menu.value ? props.closeText : props.openText);
       vue.watch(_search, value => {
         if (cleared) {
           // wait for clear to finish, VTextField sets _search to null
@@ -18495,7 +18506,7 @@
   }, 'DataTable-expand');
   const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
   function provideExpanded(props) {
-    const expandOnClick = vue.toRef(props, 'expandOnClick');
+    const expandOnClick = vue.toRef(() => props.expandOnClick);
     const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
       return new Set(v);
     }, v => {
@@ -18682,23 +18693,23 @@
       search
     } = _ref;
     const vm = getCurrentInstance('VDataTable');
-    const options = vue.computed(() => ({
+    const options = () => ({
       page: page.value,
       itemsPerPage: itemsPerPage.value,
       sortBy: sortBy.value,
       groupBy: groupBy.value,
       search: search.value
-    }));
+    });
     let oldOptions = null;
-    vue.watch(options, () => {
-      if (deepEqual(oldOptions, options.value)) return;
+    vue.watch(options, value => {
+      if (deepEqual(oldOptions, value)) return;
 
       // Reset page when searching
-      if (oldOptions && oldOptions.search !== options.value.search) {
+      if (oldOptions && oldOptions.search !== value.search) {
         page.value = 1;
       }
-      vm.emit('update:options', options.value);
-      oldOptions = options.value;
+      vm.emit('update:options', value);
+      oldOptions = value;
     }, {
       deep: true,
       immediate: true
@@ -18979,7 +18990,7 @@
       });
       return !!items.length && isSelected(items);
     });
-    const showSelectAll = vue.computed(() => selectStrategy.value.showSelectAll);
+    const showSelectAll = vue.toRef(() => selectStrategy.value.showSelectAll);
     const data = {
       toggleSelect,
       select,
@@ -19017,8 +19028,8 @@
   const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
   function createSort(props) {
     const sortBy = useProxiedModel(props, 'sortBy');
-    const mustSort = vue.toRef(props, 'mustSort');
-    const multiSort = vue.toRef(props, 'multiSort');
+    const mustSort = vue.toRef(() => props.mustSort);
+    const multiSort = vue.toRef(() => props.multiSort);
     return {
       sortBy,
       mustSort,
@@ -19236,7 +19247,7 @@
         slots
       } = _ref;
       const groupBy = useProxiedModel(props, 'groupBy');
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         items
       } = useDataIteratorItems(props);
@@ -19280,7 +19291,7 @@
       const {
         flatItems
       } = useGroupedItems(sortedItems, groupBy, opened);
-      const itemsLength = vue.computed(() => flatItems.value.length);
+      const itemsLength = vue.toRef(() => flatItems.value.length);
       const {
         startIndex,
         stopIndex,
@@ -19560,13 +19571,13 @@
       } = useRefs();
       provideDefaults({
         VPaginationBtn: {
-          color: vue.toRef(props, 'color'),
-          border: vue.toRef(props, 'border'),
-          density: vue.toRef(props, 'density'),
-          size: vue.toRef(props, 'size'),
-          variant: vue.toRef(props, 'variant'),
-          rounded: vue.toRef(props, 'rounded'),
-          elevation: vue.toRef(props, 'elevation')
+          color: vue.toRef(() => props.color),
+          border: vue.toRef(() => props.border),
+          density: vue.toRef(() => props.density),
+          size: vue.toRef(() => props.size),
+          variant: vue.toRef(() => props.variant),
+          rounded: vue.toRef(() => props.rounded),
+          elevation: vue.toRef(() => props.elevation)
         }
       });
       const items = vue.computed(() => {
@@ -20207,7 +20218,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         displayClasses,
         mobile
@@ -20865,13 +20876,13 @@
         filterFunctions
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
       } = useDataTableItems(props, columns);
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         filteredItems
       } = useFilter(props, items, search, {
@@ -20954,10 +20965,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -21054,13 +21065,13 @@
         sortRawFunctions
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
       } = useDataTableItems(props, columns);
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         filteredItems
       } = useFilter(props, items, search, {
@@ -21136,10 +21147,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -21292,8 +21303,8 @@
         headers
       } = createHeaders(props, {
         groupBy,
-        showSelect: vue.toRef(props, 'showSelect'),
-        showExpand: vue.toRef(props, 'showExpand')
+        showSelect: vue.toRef(() => props.showSelect),
+        showExpand: vue.toRef(() => props.showExpand)
       });
       const {
         items
@@ -21348,7 +21359,7 @@
         itemsPerPage,
         sortBy,
         groupBy,
-        search: vue.toRef(props, 'search')
+        search: vue.toRef(() => props.search)
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -21356,10 +21367,10 @@
       });
       provideDefaults({
         VDataTableRows: {
-          hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText'),
-          loading: vue.toRef(props, 'loading'),
-          loadingText: vue.toRef(props, 'loadingText')
+          hideNoData: vue.toRef(() => props.hideNoData),
+          noDataText: vue.toRef(() => props.noDataText),
+          loading: vue.toRef(() => props.loading),
+          loadingText: vue.toRef(() => props.loadingText)
         }
       });
       const slotProps = vue.computed(() => ({
@@ -21829,7 +21840,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       function onClick() {
         emit('click');
       }
@@ -21968,21 +21979,21 @@
         const isSame = adapter.isSameDay(date, month.value);
         return {
           date,
-          isoDate,
           formatted: adapter.format(date, 'keyboardDate'),
-          year: adapter.getYear(date),
-          month: adapter.getMonth(date),
-          isDisabled: isDisabled(date),
-          isWeekStart: index % 7 === 0,
-          isWeekEnd: index % 7 === 6,
-          isToday: adapter.isSameDay(date, today),
           isAdjacent,
-          isHidden: isAdjacent && !props.showAdjacentMonths,
-          isStart,
-          isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+          isDisabled: isDisabled(date),
           isEnd,
+          isHidden: isAdjacent && !props.showAdjacentMonths,
           isSame,
-          localized: adapter.format(date, 'dayOfMonth')
+          isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+          isStart,
+          isToday: adapter.isSameDay(date, today),
+          isWeekEnd: index % 7 === 6,
+          isWeekStart: index % 7 === 0,
+          isoDate,
+          localized: adapter.format(date, 'dayOfMonth'),
+          month: adapter.getMonth(date),
+          year: adapter.getYear(date)
         };
       });
     }
@@ -22070,7 +22081,7 @@
       const rangeStart = vue.shallowRef();
       const rangeStop = vue.shallowRef();
       const isReverse = vue.shallowRef(false);
-      const transition = vue.computed(() => {
+      const transition = vue.toRef(() => {
         return !isReverse.value ? props.transition : props.reverseTransition;
       });
       if (props.multiple === 'range' && model.value.length > 0) {
@@ -22450,7 +22461,7 @@
         }
         return value && adapter.isValid(value) ? value : today;
       });
-      const headerColor = vue.computed(() => props.headerColor ?? props.color);
+      const headerColor = vue.toRef(() => props.headerColor ?? props.color);
       const month = vue.ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
       const year = vue.ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
       const isReversing = vue.shallowRef(false);
@@ -22467,8 +22478,8 @@
         date = adapter.setYear(date, year.value);
         return adapter.format(date, 'monthAndYear');
       });
-      // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
-      const headerTransition = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
+      // const headerIcon = toRef(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
+      const headerTransition = vue.toRef(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
       const disabled = vue.computed(() => {
         if (props.disabled) return true;
         const targets = [];
@@ -22680,7 +22691,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -22843,7 +22854,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -22854,7 +22865,7 @@
         expandIcon: props.expandIcon,
         readonly: props.readonly
       }));
-      const icon = vue.computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
+      const icon = vue.toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
       useRender(() => vue.withDirectives(vue.createVNode("button", {
         "class": ['v-expansion-panel-title', {
           'v-expansion-panel-title--active': expansionPanel.isSelected.value,
@@ -22909,14 +22920,14 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'bgColor');
+      } = useBackgroundColor(() => props.bgColor);
       const {
         elevationClasses
       } = useElevation(props);
       const {
         roundedClasses
       } = useRounded(props);
-      const isDisabled = vue.computed(() => groupItem?.disabled.value || props.disabled);
+      const isDisabled = vue.toRef(() => groupItem?.disabled.value || props.disabled);
       const selectedIndices = vue.computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
         if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
         return arr;
@@ -23007,21 +23018,21 @@
       const {
         themeClasses
       } = provideTheme(props);
-      const variantClass = vue.computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+      const variantClass = vue.toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
       provideDefaults({
         VExpansionPanel: {
-          bgColor: vue.toRef(props, 'bgColor'),
-          collapseIcon: vue.toRef(props, 'collapseIcon'),
-          color: vue.toRef(props, 'color'),
-          eager: vue.toRef(props, 'eager'),
-          elevation: vue.toRef(props, 'elevation'),
-          expandIcon: vue.toRef(props, 'expandIcon'),
-          focusable: vue.toRef(props, 'focusable'),
-          hideActions: vue.toRef(props, 'hideActions'),
-          readonly: vue.toRef(props, 'readonly'),
-          ripple: vue.toRef(props, 'ripple'),
-          rounded: vue.toRef(props, 'rounded'),
-          static: vue.toRef(props, 'static')
+          bgColor: vue.toRef(() => props.bgColor),
+          collapseIcon: vue.toRef(() => props.collapseIcon),
+          color: vue.toRef(() => props.color),
+          eager: vue.toRef(() => props.eager),
+          elevation: vue.toRef(() => props.elevation),
+          expandIcon: vue.toRef(() => props.expandIcon),
+          focusable: vue.toRef(() => props.focusable),
+          hideActions: vue.toRef(() => props.hideActions),
+          readonly: vue.toRef(() => props.readonly),
+          ripple: vue.toRef(() => props.ripple),
+          rounded: vue.toRef(() => props.rounded),
+          static: vue.toRef(() => props.static)
         }
       });
       useRender(() => vue.createVNode(props.tag, {
@@ -23083,7 +23094,7 @@
         if (!entries.length) return;
         height.value = entries[0].target.clientHeight;
       });
-      const hasPosition = vue.computed(() => props.app || props.absolute);
+      const hasPosition = vue.toRef(() => props.app || props.absolute);
       const position = vue.computed(() => {
         if (!hasPosition.value) return false;
         return props.location?.split(' ').shift() ?? 'bottom';
@@ -23100,7 +23111,7 @@
           layoutSize: vue.computed(() => props.layout ? height.value + 24 : 0),
           elementSize: vue.computed(() => height.value + 24),
           active: vue.computed(() => props.app && model.value),
-          absolute: vue.toRef(props, 'absolute')
+          absolute: vue.toRef(() => props.absolute)
         });
         vue.watchEffect(() => {
           layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -23225,7 +23236,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
-      const isActive = vue.computed(() => isFocused.value || props.active);
+      const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
@@ -23398,7 +23409,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -23420,11 +23431,11 @@
         const layout = useLayoutItem({
           id: props.name,
           order: vue.computed(() => parseInt(props.order, 10)),
-          position: vue.computed(() => 'bottom'),
+          position: vue.toRef(() => 'bottom'),
           layoutSize: height,
           elementSize: vue.computed(() => props.height === 'auto' ? undefined : height.value),
-          active: vue.computed(() => props.app),
-          absolute: vue.toRef(props, 'absolute')
+          active: vue.toRef(() => props.app),
+          absolute: vue.toRef(() => props.absolute)
         });
         vue.watchEffect(() => {
           layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -23897,11 +23908,11 @@
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
-        position: vue.toRef(props, 'position'),
-        elementSize: vue.toRef(props, 'size'),
-        layoutSize: vue.toRef(props, 'size'),
-        active: vue.toRef(props, 'modelValue'),
-        absolute: vue.toRef(props, 'absolute')
+        position: vue.toRef(() => props.position),
+        elementSize: vue.toRef(() => props.size),
+        layoutSize: vue.toRef(() => props.size),
+        active: vue.toRef(() => props.modelValue),
+        absolute: vue.toRef(() => props.absolute)
       });
       return () => vue.createVNode("div", {
         "class": ['v-layout-item', props.class],
@@ -24433,7 +24444,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -24466,7 +24477,7 @@
       const location = vue.computed(() => {
         return toPhysical(props.location, isRtl.value);
       });
-      const isPersistent = vue.computed(() => props.persistent);
+      const isPersistent = vue.toRef(() => props.persistent);
       const isTemporary = vue.computed(() => !props.permanent && (mobile.value || props.temporary));
       const isSticky = vue.computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
       useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -24492,7 +24503,7 @@
         isActive,
         isTemporary,
         width,
-        touchless: vue.toRef(props, 'touchless'),
+        touchless: vue.toRef(() => props.touchless),
         position: location
       });
       const layoutSize = vue.computed(() => {
@@ -24509,7 +24520,7 @@
         layoutSize,
         elementSize: width,
         active: vue.readonly(isActive),
-        disableTransitions: vue.computed(() => isDragging.value),
+        disableTransitions: vue.toRef(() => isDragging.value),
         absolute: vue.computed(() =>
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         props.absolute || isSticky.value && typeof isStuck.value !== 'string')
@@ -24522,9 +24533,9 @@
         isSticky,
         layoutItemStyles
       });
-      const scrimColor = useBackgroundColor(vue.computed(() => {
+      const scrimColor = useBackgroundColor(() => {
         return typeof props.scrim === 'string' ? props.scrim : null;
-      }));
+      });
       const scrimStyles = vue.computed(() => ({
         ...(isDragging.value ? {
           opacity: dragProgress.value * 0.2,
@@ -24738,24 +24749,24 @@
       const controlVariant = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
       });
-      const incrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
-      const decrementIcon = vue.computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
-      const controlNodeSize = vue.computed(() => controlVariant.value === 'split' ? 'default' : 'small');
-      const controlNodeDefaultHeight = vue.computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
-      const incrementSlotProps = vue.computed(() => ({
+      const incrementIcon = vue.toRef(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
+      const decrementIcon = vue.toRef(() => controlVariant.value === 'split' ? '$minus' : '$expand');
+      const controlNodeSize = vue.toRef(() => controlVariant.value === 'split' ? 'default' : 'small');
+      const controlNodeDefaultHeight = vue.toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
+      const incrementSlotProps = {
         props: {
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onUpControlMousedown
         }
-      }));
-      const decrementSlotProps = vue.computed(() => ({
+      };
+      const decrementSlotProps = {
         props: {
           onClick: onControlClick,
           onPointerup: onControlMouseup,
           onPointerdown: onDownControlMousedown
         }
-      }));
+      };
       vue.watch(() => props.precision, () => formatInputValue());
       vue.onMounted(() => {
         clampModel();
@@ -24907,7 +24918,7 @@
               }
             }
           }, {
-            default: () => [slots.increment(incrementSlotProps.value)]
+            default: () => [slots.increment(incrementSlotProps)]
           });
         }
         function decrementControlNode() {
@@ -24936,7 +24947,7 @@
               }
             }
           }, {
-            default: () => [slots.decrement(decrementSlotProps.value)]
+            default: () => [slots.decrement(decrementSlotProps)]
           });
         }
         function controlNode() {
@@ -25136,12 +25147,12 @@
       }
       provideDefaults({
         VField: {
-          color: vue.computed(() => props.color),
-          bgColor: vue.computed(() => props.color),
-          baseColor: vue.computed(() => props.baseColor),
-          disabled: vue.computed(() => props.disabled),
-          error: vue.computed(() => props.error),
-          variant: vue.computed(() => props.variant)
+          color: vue.toRef(() => props.color),
+          bgColor: vue.toRef(() => props.color),
+          baseColor: vue.toRef(() => props.baseColor),
+          disabled: vue.toRef(() => props.disabled),
+          error: vue.toRef(() => props.error),
+          variant: vue.toRef(() => props.variant)
         }
       }, {
         scoped: true
@@ -25942,7 +25953,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -26741,7 +26752,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const hasLabels = vue.computed(() => {
         return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
       });
@@ -27287,11 +27298,11 @@
       } = useFocus(props);
       const control = vue.ref();
       const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
-      const loaderColor = vue.computed(() => {
+      const loaderColor = vue.toRef(() => {
         return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
       });
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `switch-${uid}`);
+      const id = vue.toRef(() => props.id || `switch-${uid}`);
       function onChange() {
         if (indeterminate.value) {
           indeterminate.value = false;
@@ -27442,7 +27453,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -27462,7 +27473,7 @@
         layoutSize: height,
         elementSize: height,
         active: vue.computed(() => true),
-        absolute: vue.toRef(props, 'absolute')
+        absolute: vue.toRef(() => props.absolute)
       });
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-system-bar', {
@@ -27504,7 +27515,7 @@
       const {
         textColorClasses: sliderColorClasses,
         textColorStyles: sliderColorStyles
-      } = useTextColor(props, 'sliderColor');
+      } = useTextColor(() => props.sliderColor);
       const rootEl = vue.ref();
       const sliderEl = vue.ref();
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
@@ -27697,18 +27708,18 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         scopeId
       } = useScopeId();
       provideDefaults({
         VTab: {
-          color: vue.toRef(props, 'color'),
-          direction: vue.toRef(props, 'direction'),
-          stacked: vue.toRef(props, 'stacked'),
-          fixed: vue.toRef(props, 'fixedTabs'),
-          sliderColor: vue.toRef(props, 'sliderColor'),
-          hideSlider: vue.toRef(props, 'hideSlider')
+          color: vue.toRef(() => props.color),
+          direction: vue.toRef(() => props.direction),
+          stacked: vue.toRef(() => props.stacked),
+          fixed: vue.toRef(() => props.fixedTabs),
+          sliderColor: vue.toRef(() => props.sliderColor),
+          hideSlider: vue.toRef(() => props.hideSlider)
         }
       });
       useRender(() => {
@@ -28058,7 +28069,7 @@
       const {
         backgroundColorStyles,
         backgroundColorClasses
-      } = useBackgroundColor(vue.toRef(props, 'dotColor'));
+      } = useBackgroundColor(() => props.dotColor);
       const {
         roundedClasses
       } = useRounded(props, 'v-timeline-divider__dot');
@@ -28068,7 +28079,7 @@
       const {
         backgroundColorClasses: lineColorClasses,
         backgroundColorStyles: lineColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'lineColor'));
+      } = useBackgroundColor(() => props.lineColor);
       useRender(() => vue.createVNode("div", {
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
@@ -28239,17 +28250,17 @@
       } = useRtl();
       provideDefaults({
         VTimelineDivider: {
-          lineColor: vue.toRef(props, 'lineColor')
+          lineColor: vue.toRef(() => props.lineColor)
         },
         VTimelineItem: {
-          density: vue.toRef(props, 'density'),
-          dotColor: vue.toRef(props, 'dotColor'),
-          fillDot: vue.toRef(props, 'fillDot'),
-          hideOpposite: vue.toRef(props, 'hideOpposite'),
-          iconColor: vue.toRef(props, 'iconColor'),
-          lineColor: vue.toRef(props, 'lineColor'),
-          lineInset: vue.toRef(props, 'lineInset'),
-          size: vue.toRef(props, 'size')
+          density: vue.toRef(() => props.density),
+          dotColor: vue.toRef(() => props.dotColor),
+          fillDot: vue.toRef(() => props.fillDot),
+          hideOpposite: vue.toRef(() => props.hideOpposite),
+          iconColor: vue.toRef(() => props.iconColor),
+          lineColor: vue.toRef(() => props.lineColor),
+          lineInset: vue.toRef(() => props.lineInset),
+          size: vue.toRef(() => props.size)
         }
       });
       const sideClasses = vue.computed(() => {
@@ -28296,9 +28307,9 @@
       } = _ref;
       provideDefaults({
         VBtn: {
-          color: vue.toRef(props, 'color'),
+          color: vue.toRef(() => props.color),
           height: 'inherit',
-          variant: vue.toRef(props, 'variant')
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => vue.createVNode("div", {
@@ -28345,7 +28356,7 @@
         scopeId
       } = useScopeId();
       const uid = vue.useId();
-      const id = vue.computed(() => props.id || `v-tooltip-${uid}`);
+      const id = vue.toRef(() => props.id || `v-tooltip-${uid}`);
       const overlay = vue.ref();
       const location = vue.computed(() => {
         return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
@@ -28353,7 +28364,7 @@
       const origin = vue.computed(() => {
         return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
       });
-      const transition = vue.computed(() => {
+      const transition = vue.toRef(() => {
         if (props.transition) return props.transition;
         return isActive.value ? 'scale-transition' : 'fade-transition';
       });
@@ -28432,13 +28443,19 @@
   }, '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 {
@@ -28447,8 +28464,8 @@
             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)
@@ -28469,16 +28486,30 @@
         }
       };
       useRender(() => {
-        return vue.createVNode(VSheet, {
+        return vue.createVNode("div", null, [slots.intervalEvent?.({
+          height: calcHeight().height,
+          margin: calcHeight().margin,
+          eventClass: 'v-calendar-internal-event',
+          event: props.event,
+          interval: props.interval
+        }) ?? vue.createVNode(VSheet, vue.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 {};
     }
@@ -28514,6 +28545,7 @@
   }, 'VCalendarInterval');
   const VCalendarInterval = genericComponent()({
     name: 'VCalendarInterval',
+    inheritAttrs: false,
     props: {
       index: {
         type: Number,
@@ -28523,6 +28555,7 @@
     },
     setup(props, _ref) {
       let {
+        attrs,
         emit,
         slots
       } = _ref;
@@ -28548,45 +28581,74 @@
         return props.dayIndex === 0 ? vue.createVNode("div", {
           "class": "v-calendar-day__row-with-label",
           "style": `height: ${convertToUnit(props.intervalHeight)}`
-        }, [vue.createVNode("div", {
+        }, [vue.createVNode("div", vue.mergeProps({
           "class": "v-calendar-day__row-label"
-        }, [vue.createVNode(vue.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 : '']
-        })]), vue.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')]), vue.createVNode("div", {
           "class": "v-calendar-day__row-hairline"
-        }, null), vue.createVNode("div", {
+        }, null), vue.createVNode("div", vue.mergeProps({
           "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-        }, [vue.createVNode(vue.resolveComponent("slot"), {
-          "name": "intervalBody",
-          "interval": interval.value
-        }, {
-          default: () => [interval.value.events?.map(event => vue.createVNode(VCalendarIntervalEvent, {
-            "event": event,
-            "interval": interval.value,
-            "intervalDivisions": props.intervalDivisions,
-            "intervalDuration": props.intervalDuration,
-            "intervalHeight": props.intervalHeight
-          }, null))]
-        })])]) : vue.createVNode("div", {
+        }, getPrefixedEventHandlers(attrs, ':interval', () => interval.value)), [slots.intervalBody?.({
+          interval: interval.value
+        }) ?? vue.createVNode("div", null, [interval.value.events?.map(event => vue.createVNode(VCalendarIntervalEvent, vue.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
+              });
+            }
+          } : {})
+        }))])])]) : vue.createVNode("div", {
           "class": "v-calendar-day__row-without-label",
           "style": `height: ${convertToUnit(props.intervalHeight)}`
-        }, [vue.createVNode("div", {
+        }, [vue.createVNode("div", vue.mergeProps({
           "class": ['v-calendar-day__row-content', interval.value.events.some(e => !e.last) ? 'v-calendar-day__row-content-through' : '']
-        }, [vue.createVNode(vue.resolveComponent("slot"), {
-          "name": "intervalBody",
-          "interval": interval.value
-        }, {
-          default: () => [interval.value.events?.filter(event => !event.allDay).map(event => vue.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 => vue.createVNode(VCalendarIntervalEvent, vue.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
@@ -28594,6 +28656,8 @@
     }
   });
 
+  // Types
+
   const makeVCalendarDayProps = propsFactory({
     hideDayHeader: Boolean,
     intervals: {
@@ -28604,26 +28668,34 @@
   }, 'VCalendarDay');
   const VCalendarDay = genericComponent()({
     name: 'VCalendarDay',
+    inheritAttrs: false,
     props: makeVCalendarDayProps(),
-    setup(props) {
+    setup(props, _ref) {
+      let {
+        attrs,
+        slots
+      } = _ref;
       const adapter = useDate();
       const intervals = vue.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 vue.createVNode("div", {
           "class": "v-calendar-day__container"
-        }, [!props.hideDayHeader && vue.createVNode("div", {
-          "key": "calender-week-name",
+        }, [!props.hideDayHeader && vue.createVNode("div", vue.mergeProps({
+          "key": "calendar-week-name",
           "class": "v-calendar-weekly__head-weekday"
-        }, [adapter.format(props.day.date, 'weekdayShort'), vue.createVNode("div", null, [vue.createVNode(VBtn, {
+        }, getPrefixedEventHandlers(attrs, ':day', () => props.day)), [adapter.format(props.day.date, 'weekdayShort'), vue.createVNode("div", null, [vue.createVNode(VBtn, vue.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) => vue.createVNode(VCalendarInterval, vue.mergeProps({
+          "variant": props.day?.isToday ? undefined : 'text'
+        }), null)])]), intervals.value.map((_, index) => slots.interval?.(calendarIntervalProps) ?? vue.createVNode(VCalendarInterval, vue.mergeProps({
           "index": index
-        }, calendarIntervalProps), null))]);
+        }, calendarIntervalProps, attrs, getPrefixedEventHandlers(attrs, ':interval', () => calendarIntervalProps)), {
+          ...pick(slots, ['intervalBody', 'intervalEvent', 'intervalTitle'])
+        }))]);
       });
       return {
         intervals
@@ -28662,7 +28734,8 @@
     },
     setup(props, _ref) {
       let {
-        emit
+        emit,
+        slots
       } = _ref;
       const {
         t
@@ -28696,7 +28769,9 @@
         "onClick": next
       }, null), vue.createVNode("div", {
         "class": "v-calendar-header__title"
-      }, [props.title])]));
+      }, [slots.title?.({
+        title: props.title
+      }) ?? vue.createVNode("span", null, [props.title])])]));
       return {};
     }
   });
@@ -28708,14 +28783,24 @@
   }, 'VCalendarEvent');
   const VCalendarEvent = genericComponent()({
     name: 'VCalendarEvent',
+    inheritAttrs: false,
     props: makeVCalendarEventProps(),
-    setup(props) {
-      useRender(() => vue.createVNode(VChip, {
+    setup(props, _ref) {
+      let {
+        attrs,
+        emit,
+        slots
+      } = _ref;
+      useRender(() => vue.createVNode(VChip, vue.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: () => [vue.createVNode(VBadge, {
           "inline": true,
           "dot": true,
@@ -28726,87 +28811,95 @@
     }
   });
 
+  // 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 vue.createVNode("div", {
+        return vue.createVNode("div", vue.mergeProps({
           "class": ['v-calendar-month__day']
-        }, [!props.day?.isHidden && hasTitle && vue.createVNode("div", {
+        }, getPrefixedEventHandlers(attrs, ':day', () => props)), [!props.day?.isHidden ? vue.createVNode("div", {
           "key": "title",
           "class": "v-calendar-weekly__day-label"
-        }, [slots.title?.({
+        }, [slots.dayTitle?.({
           title: props.title
-        }) ?? vue.createVNode(VBtn, {
+        }) ?? vue.createVNode(VBtn, vue.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 && vue.createVNode("div", {
+          "variant": props.day?.isToday ? undefined : 'flat',
+          "text": `${props.title}`
+        }, getPrefixedEventHandlers(attrs, ':date', () => props)), null)]) : undefined, !props.day?.isHidden ? vue.createVNode("div", {
           "key": "content",
           "class": "v-calendar-weekly__day-content"
-        }, [slots.content?.() ?? vue.createVNode("div", null, [vue.createVNode("div", {
+        }, [slots.dayBody?.({
+          day: props.day,
+          events: props.events
+        }) ?? vue.createVNode("div", null, [vue.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
-        }) : vue.createVNode(VCalendarEvent, {
+        }) : vue.createVNode(VCalendarEvent, vue.mergeProps({
           "day": props.day,
           "event": event,
           "allDay": true
-        }, null))]), vue.createVNode("div", {
+        }, attrs), null))]), vue.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
-        }) : vue.createVNode(VCalendarEvent, {
+        }) : vue.createVNode(VCalendarEvent, vue.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;
@@ -28824,27 +28917,33 @@
       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)];
         }
+        vue.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)];
         }
+        vue.nextTick(() => {
+          emit('prev', model.value[0]);
+        });
       }
       function onClickToday() {
-        model.value = [adapter.date()];
+        const date = adapter.date();
+        model.value = [date];
+        vue.nextTick(() => {
+          emit('today', model.value[0]);
+        });
       }
       const title = vue.computed(() => {
         return adapter.format(displayValue.value, 'monthAndYear');
@@ -28858,20 +28957,25 @@
             'v-calendar-weekly': props.viewMode === 'week',
             'v-calendar-day': props.viewMode === 'day'
           }]
-        }, [vue.createVNode("div", null, [!props.hideHeader && (!slots.header ? vue.createVNode(VCalendarHeader, vue.mergeProps({
+        }, [vue.createVNode("div", null, [!props.hideHeader && (slots.header?.({
+          title: title.value,
+          clickNext: onClickNext,
+          clickPrev: onClickPrev,
+          clickToday: onClickToday
+        }) ?? vue.createVNode(VCalendarHeader, vue.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
         }))]), vue.createVNode("div", {
           "class": ['v-calendar__container', `days__${weekDays.value.length}`]
         }, [props.viewMode === 'month' && !props.hideDayHeader && vue.createVNode("div", {
           "class": ['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
-          "key": "calenderWeeklyHead"
+          "key": "calendarWeeklyHead"
         }, [!props.hideWeekNumber ? vue.createVNode("div", {
           "key": "weekNumber0",
           "class": "v-calendar-weekly__head-weeknumber"
@@ -28880,24 +28984,39 @@
         }, [dayNames[weekday]]))]), props.viewMode === 'month' && vue.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 ? vue.createVNode("div", {
+        }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? vue.createVNode("div", vue.mergeProps({
           "class": "v-calendar-month__weeknumber"
-        }, [weekNumbers.value[wi]]) : '', week.map(day => vue.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 => vue.createVNode(VCalendarMonthDay, vue.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) => vue.createVNode(VCalendarDay, vue.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))
+        }) : vue.createVNode(VCalendarDay, vue.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' && vue.createVNode(VCalendarDay, vue.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))
+        }) : vue.createVNode(VCalendarDay, vue.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,
@@ -29446,10 +29565,7 @@
     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]]
@@ -29510,7 +29626,7 @@
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(vue.toRef(() => ({
+      } = useVariant(() => ({
         color: (() => {
           if (props.disabled) return undefined;
           if (!isActive.value) return props.color;
@@ -29525,7 +29641,7 @@
           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() {
@@ -29534,13 +29650,14 @@
       }
       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,
@@ -30021,11 +30138,11 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const count = vue.computed(() => props.max - props.min + 1);
       const roundCount = vue.computed(() => props.double ? count.value / 2 : count.value);
       const degreesPerUnit = vue.computed(() => 360 / roundCount.value);
@@ -30885,9 +31002,9 @@
       const {
         items
       } = useListItems(props);
-      const activeColor = vue.toRef(props, 'activeColor');
-      const baseColor = vue.toRef(props, 'baseColor');
-      const color = vue.toRef(props, 'color');
+      const activeColor = vue.toRef(() => props.activeColor);
+      const baseColor = vue.toRef(() => props.baseColor);
+      const color = vue.toRef(() => props.color);
       const activated = useProxiedModel(props, 'activated');
       const model = useProxiedModel(props, 'modelValue');
       const _selected = useProxiedModel(props, 'selected', props.modelValue);
@@ -30901,7 +31018,7 @@
       const vListRef = vue.ref();
       const opened = vue.computed(() => props.openAll ? openAll(items.value) : props.opened);
       const flatItems = vue.computed(() => flatten(items.value));
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         filteredItems
       } = useFilter(props, flatItems, search);
@@ -30944,18 +31061,18 @@
           activeColor,
           baseColor,
           color,
-          collapseIcon: vue.toRef(props, 'collapseIcon'),
-          expandIcon: vue.toRef(props, 'expandIcon')
+          collapseIcon: vue.toRef(() => props.collapseIcon),
+          expandIcon: vue.toRef(() => props.expandIcon)
         },
         VTreeviewItem: {
-          activeClass: vue.toRef(props, 'activeClass'),
+          activeClass: vue.toRef(() => props.activeClass),
           activeColor,
           baseColor,
           color,
-          density: vue.toRef(props, 'density'),
-          disabled: vue.toRef(props, 'disabled'),
-          lines: vue.toRef(props, 'lines'),
-          variant: vue.toRef(props, 'variant')
+          density: vue.toRef(() => props.density),
+          disabled: vue.toRef(() => props.disabled),
+          lines: vue.toRef(() => props.lines),
+          variant: vue.toRef(() => props.variant)
         }
       });
       useRender(() => {
@@ -31495,7 +31612,7 @@
       };
     });
   }
-  const version$1 = "3.8.2-master.2025-04-17";
+  const version$1 = "3.8.2-master.2025-04-22";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31793,7 +31910,7 @@
 
   /* 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 */