vuetify 3.8.1 → 3.8.3

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.1
+* Vuetify v3.8.3
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -416,6 +416,9 @@
       _classPrivateFieldInitSpec(this, _pointer, 0);
       this.size = size;
     }
+    get isFull() {
+      return _classPrivateFieldGet(_arr, this).length === this.size;
+    }
     push(val) {
       _classPrivateFieldGet(_arr, this)[_classPrivateFieldGet(_pointer, this)] = val;
       _classPrivateFieldSet(_pointer, this, (_classPrivateFieldGet(_pointer, this) + 1) % this.size);
@@ -423,6 +426,10 @@
     values() {
       return _classPrivateFieldGet(_arr, this).slice(_classPrivateFieldGet(_pointer, this)).concat(_classPrivateFieldGet(_arr, this).slice(0, _classPrivateFieldGet(_pointer, this)));
     }
+    clear() {
+      _classPrivateFieldGet(_arr, this).length = 0;
+      _classPrivateFieldSet(_pointer, this, 0);
+    }
   }
   function getEventCoordinates(e) {
     if ('touches' in e) {
@@ -446,15 +453,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 */
@@ -1338,7 +1349,7 @@
     return newDefaults;
   }
   function propIsDefined(vnode, prop) {
-    return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
+    return vnode.props && (typeof vnode.props[prop] !== 'undefined' || typeof vnode.props[toKebabCase(prop)] !== 'undefined');
   }
   function internalUseDefaults() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1355,9 +1366,12 @@
         const propValue = Reflect.get(target, prop);
         if (prop === 'class' || prop === 'style') {
           return [componentDefaults.value?.[prop], propValue].filter(v => v != null);
-        } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-          return componentDefaults.value?.[prop] !== undefined ? componentDefaults.value?.[prop] : defaults.value?.global?.[prop] !== undefined ? defaults.value?.global?.[prop] : propValue;
         }
+        if (propIsDefined(vm.vnode, prop)) return propValue;
+        const _componentDefault = componentDefaults.value?.[prop];
+        if (_componentDefault !== undefined) return _componentDefault;
+        const _globalDefault = defaults.value?.global?.[prop];
+        if (_globalDefault !== undefined) return _globalDefault;
         return propValue;
       }
     });
@@ -1745,7 +1759,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 +1874,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 +2268,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 +2276,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() {
@@ -2335,8 +2349,8 @@
             surface: '#212121',
             'surface-bright': '#ccbfd6',
             'surface-light': '#424242',
-            'surface-variant': '#a3a3a3',
-            'on-surface-variant': '#424242',
+            'surface-variant': '#c8c8c8',
+            'on-surface-variant': '#000000',
             primary: '#2196F3',
             'primary-darken-1': '#277CC1',
             secondary: '#54B6B2',
@@ -2486,7 +2500,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 +2547,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 +2566,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 +2586,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 +2872,7 @@
   const makeVDialogTransitionProps = propsFactory({
     target: [Object, Array]
   }, 'v-dialog-transition');
+  const saved = new WeakMap();
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
     props: makeVDialogTransitionProps(),
@@ -2874,13 +2889,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 +2926,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 +3158,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 +3173,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 +3190,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 +3392,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -3477,7 +3499,7 @@
         };
         poll();
       }
-      const containClasses = vue.computed(() => ({
+      const containClasses = vue.toRef(() => ({
         'v-img__img--cover': props.cover,
         'v-img__img--contain': !props.cover
       }));
@@ -3614,16 +3636,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 +3667,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 +3721,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -3913,7 +3930,7 @@
         isBooted.value = true;
       });
     });
-    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
+    const ssrBootStyles = vue.toRef(() => !isBooted.value ? {
       transition: 'none !important'
     } : undefined);
     return {
@@ -3981,7 +3998,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 +4009,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 +4030,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 +4077,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 +4107,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 +4169,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 +4223,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 +4372,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 +4633,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 +4683,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 +4723,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 +4842,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 +4855,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 +5041,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 +5160,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 +5199,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 +5220,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 +5235,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 +5260,7 @@
       href,
       linkProps: vue.reactive({
         href,
-        'aria-current': vue.computed(() => isActive.value ? 'page' : undefined)
+        'aria-current': vue.toRef(() => isActive.value ? 'page' : undefined)
       })
     };
   }
@@ -5691,7 +5709,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 +5723,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 +5926,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 +5938,10 @@
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(variantProps);
+      } = useVariant(() => ({
+        color: props.color ?? props.type,
+        variant: props.variant
+      }));
       const {
         densityClasses
       } = useDensity(props);
@@ -5946,11 +5963,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 +6204,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 +6221,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 +6290,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 +6344,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 +6483,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 +6574,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.computed(() => props.color));
+      } = useTextColor(() => props.color);
       useRender(() => vue.createVNode(MaybeTransition, {
         "transition": props.transition,
         "tag": "div",
@@ -6587,7 +6604,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 +6643,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 +6734,7 @@
       isValidating,
       isValid: model,
       items,
-      validateOn: vue.toRef(props, 'validateOn')
+      validateOn: vue.toRef(() => props.validateOn)
     });
     return {
       errors,
@@ -7027,10 +7044,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;
       });
@@ -7120,7 +7137,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);
@@ -7130,7 +7146,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
         }), {
@@ -7314,7 +7330,7 @@
         return false;
       }
     });
-    const displayClasses = vue.computed(() => {
+    const displayClasses = vue.toRef(() => {
       if (!name) return {};
       return {
         [`${name}--mobile`]: mobile.value
@@ -7429,7 +7445,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);
@@ -7921,11 +7937,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(() => {
@@ -8051,9 +8067,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();
@@ -8062,18 +8078,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;
@@ -8740,8 +8755,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(() => {
@@ -8870,7 +8885,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,
@@ -8946,7 +8961,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 {
@@ -9120,12 +9135,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
       }));
@@ -9168,7 +9183,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,
@@ -9338,7 +9353,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       useRender(() => {
         const hasText = !!(slots.default || props.title);
         return vue.createVNode(props.tag, {
@@ -9383,7 +9398,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'color'));
+      } = useTextColor(() => props.color);
       const dividerStyles = vue.computed(() => {
         const styles = {};
         if (props.length) {
@@ -9745,7 +9760,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -9768,30 +9783,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);
@@ -10103,8 +10118,27 @@
       return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];
     });
     let observe = false;
+    let lastFrame = -1;
+    const flipped = new CircularBuffer(4);
     const observer = new ResizeObserver(() => {
-      if (observe) updateLocation();
+      if (!observe) return;
+
+      // Detect consecutive frames
+      requestAnimationFrame(newTime => {
+        if (newTime !== lastFrame) flipped.clear();
+        requestAnimationFrame(newNewTime => {
+          lastFrame = newNewTime;
+        });
+      });
+      if (flipped.isFull) {
+        const values = flipped.values();
+        if (deepEqual(values.at(-1), values.at(-3))) {
+          // Flipping is causing a container resize loop
+          return;
+        }
+      }
+      const result = updateLocation();
+      if (result) flipped.push(result.flipped);
     });
     vue.watch([data.target, data.contentEl], (_ref, _ref2) => {
       let [newTarget, newContentEl] = _ref;
@@ -10119,13 +10153,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;
@@ -10310,7 +10353,8 @@
       });
       return {
         available,
-        contentBox
+        contentBox,
+        flipped
       };
     }
     vue.watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation());
@@ -10835,7 +10879,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;
@@ -10872,10 +10916,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]);
       }
@@ -10895,11 +10939,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
       }))
     };
@@ -11116,14 +11160,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,
@@ -11449,7 +11493,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());
@@ -11617,7 +11661,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, {
@@ -11744,12 +11788,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();
@@ -11764,7 +11808,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         textColorClasses,
         textColorStyles
@@ -12491,7 +12535,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;
@@ -12728,7 +12772,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,
@@ -12913,6 +12957,7 @@
               "onFocusin": onFocusin,
               "tabindex": "-1",
               "aria-live": "polite",
+              "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
@@ -13054,6 +13099,7 @@
   // Composables
   const defaultFilter = (value, query, item) => {
     if (value == null || query == null) return -1;
+    if (!query.length) return 0;
     value = value.toString().toLocaleLowerCase();
     query = query.toString().toLocaleLowerCase();
     const result = [];
@@ -13066,7 +13112,7 @@
   };
   function normaliseMatch(match, query) {
     if (match == null || typeof match === 'boolean' || match === -1) return;
-    if (typeof match === 'number') return [[match, query.length]];
+    if (typeof match === 'number') return [[match, match + query.length]];
     if (Array.isArray(match[0])) return match;
     return [match];
   }
@@ -13229,7 +13275,6 @@
       const vMenuRef = vue.ref();
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -13238,7 +13283,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);
@@ -13687,7 +13732,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         roundedClasses
       } = useRounded(props);
@@ -13697,7 +13742,7 @@
       const {
         textColorClasses,
         textColorStyles
-      } = useTextColor(vue.toRef(props, 'textColor'));
+      } = useTextColor(() => props.textColor);
       const {
         themeClasses
       } = useTheme();
@@ -13809,7 +13854,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'bgColor');
+      } = useBackgroundColor(() => props.bgColor);
       const {
         borderClasses
       } = useBorder(props);
@@ -13838,8 +13883,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,
@@ -13948,7 +13993,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -13968,19 +14013,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'
         }
       }, {
@@ -14216,11 +14261,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', {
@@ -14275,7 +14319,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         densityClasses
       } = useDensity(props);
@@ -14284,13 +14328,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 => {
@@ -14613,10 +14657,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;
@@ -14630,10 +14674,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", {
@@ -14678,8 +14722,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 {};
     }
@@ -14892,8 +14936,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();
       }
@@ -15795,7 +15839,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 {
@@ -15809,7 +15853,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);
@@ -15911,7 +15955,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) {
@@ -15942,11 +15986,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,
@@ -15959,16 +16003,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,
@@ -16887,7 +16931,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -16934,7 +16978,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       useRender(() => {
         const sheetProps = VSheet.filterProps(props);
         const hasTitle = !!(props.title || slots.title);
@@ -16981,165 +17025,81 @@
 
   // Types
 
-  const firstDay = {
-    '001': 1,
-    AD: 1,
-    AE: 6,
-    AF: 6,
-    AG: 0,
-    AI: 1,
-    AL: 1,
-    AM: 1,
-    AN: 1,
-    AR: 1,
-    AS: 0,
-    AT: 1,
-    AU: 1,
-    AX: 1,
-    AZ: 1,
-    BA: 1,
-    BD: 0,
-    BE: 1,
-    BG: 1,
-    BH: 6,
-    BM: 1,
-    BN: 1,
-    BR: 0,
-    BS: 0,
-    BT: 0,
-    BW: 0,
-    BY: 1,
-    BZ: 0,
-    CA: 0,
-    CH: 1,
-    CL: 1,
-    CM: 1,
-    CN: 1,
-    CO: 0,
-    CR: 1,
-    CY: 1,
-    CZ: 1,
-    DE: 1,
-    DJ: 6,
-    DK: 1,
-    DM: 0,
-    DO: 0,
-    DZ: 6,
-    EC: 1,
-    EE: 1,
-    EG: 6,
-    ES: 1,
-    ET: 0,
-    FI: 1,
-    FJ: 1,
-    FO: 1,
-    FR: 1,
-    GB: 1,
-    'GB-alt-variant': 0,
-    GE: 1,
-    GF: 1,
-    GP: 1,
-    GR: 1,
-    GT: 0,
-    GU: 0,
-    HK: 0,
-    HN: 0,
-    HR: 1,
-    HU: 1,
-    ID: 0,
-    IE: 1,
-    IL: 0,
-    IN: 0,
-    IQ: 6,
-    IR: 6,
-    IS: 1,
-    IT: 1,
-    JM: 0,
-    JO: 6,
-    JP: 0,
-    KE: 0,
-    KG: 1,
-    KH: 0,
-    KR: 0,
-    KW: 6,
-    KZ: 1,
-    LA: 0,
-    LB: 1,
-    LI: 1,
-    LK: 1,
-    LT: 1,
-    LU: 1,
-    LV: 1,
-    LY: 6,
-    MC: 1,
-    MD: 1,
-    ME: 1,
-    MH: 0,
-    MK: 1,
-    MM: 0,
-    MN: 1,
-    MO: 0,
-    MQ: 1,
-    MT: 0,
-    MV: 5,
-    MX: 0,
-    MY: 1,
-    MZ: 0,
-    NI: 0,
-    NL: 1,
-    NO: 1,
-    NP: 0,
-    NZ: 1,
-    OM: 6,
-    PA: 0,
-    PE: 0,
-    PH: 0,
-    PK: 0,
-    PL: 1,
-    PR: 0,
-    PT: 0,
-    PY: 0,
-    QA: 6,
-    RE: 1,
-    RO: 1,
-    RS: 1,
-    RU: 1,
-    SA: 0,
-    SD: 6,
-    SE: 1,
-    SG: 0,
-    SI: 1,
-    SK: 1,
-    SM: 1,
-    SV: 0,
-    SY: 6,
-    TH: 0,
-    TJ: 1,
-    TM: 1,
-    TR: 1,
-    TT: 0,
-    TW: 0,
-    UA: 1,
-    UM: 0,
-    US: 0,
-    UY: 1,
-    UZ: 1,
-    VA: 1,
-    VE: 0,
-    VI: 0,
-    VN: 1,
-    WS: 0,
-    XK: 1,
-    YE: 0,
-    ZA: 0,
-    ZW: 0
-  };
+  function weekInfo(locale) {
+    // https://simplelocalize.io/data/locales/
+    // then `new Intl.Locale(...).getWeekInfo()`
+    const code = locale.slice(-2).toUpperCase();
+    switch (true) {
+      case locale === 'GB-alt-variant':
+        {
+          return {
+            firstDay: 0,
+            firstWeekSize: 4
+          };
+        }
+      case locale === '001':
+        {
+          return {
+            firstDay: 1,
+            firstWeekSize: 1
+          };
+        }
+      case `AG AS BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IL IN JM JP KE
+    KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PY SA SG SV TH TT TW UM US
+    VE VI WS YE ZA ZW`.includes(code):
+        {
+          return {
+            firstDay: 0,
+            firstWeekSize: 1
+          };
+        }
+      case `AI AL AM AR AU AZ BA BM BN BY CL CM CN CR CY EC GE HR KG KZ LB LK LV
+    MD ME MK MN MY NZ RO RS SI TJ TM TR UA UY UZ VN XK`.includes(code):
+        {
+          return {
+            firstDay: 1,
+            firstWeekSize: 1
+          };
+        }
+      case `AD AN AT AX BE BG CH CZ DE DK EE ES FI FJ FO FR GB GF GP GR HU IE IS
+    IT LI LT LU MC MQ NL NO PL RE RU SE SK SM VA`.includes(code):
+        {
+          return {
+            firstDay: 1,
+            firstWeekSize: 4
+          };
+        }
+      case `AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY`.includes(code):
+        {
+          return {
+            firstDay: 6,
+            firstWeekSize: 1
+          };
+        }
+      case code === 'MV':
+        {
+          return {
+            firstDay: 5,
+            firstWeekSize: 1
+          };
+        }
+      case code === 'PT':
+        {
+          return {
+            firstDay: 0,
+            firstWeekSize: 4
+          };
+        }
+      default:
+        return null;
+    }
+  }
   function getWeekArray(date, locale, firstDayOfWeek) {
     const weeks = [];
     let currentWeek = [];
     const firstDayOfMonth = startOfMonth(date);
     const lastDayOfMonth = endOfMonth(date);
-    const first = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+    const first = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
     const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7;
     const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7;
     for (let i = 0; i < firstDayWeekIndex; i++) {
@@ -17170,7 +17130,7 @@
     return weeks;
   }
   function startOfWeek(date, locale, firstDayOfWeek) {
-    const day = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+    const day = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
     const d = new Date(date);
     while (d.getDay() !== day) {
       d.setDate(d.getDate() - 1);
@@ -17179,7 +17139,7 @@
   }
   function endOfWeek(date, locale) {
     const d = new Date(date);
-    const lastDay = ((firstDay[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7;
+    const lastDay = ((weekInfo(locale)?.firstDay ?? 0) + 6) % 7;
     while (d.getDay() !== lastDay) {
       d.setDate(d.getDate() + 1);
     }
@@ -17214,7 +17174,7 @@
   }
   const sundayJanuarySecond2000 = new Date(2000, 0, 2);
   function getWeekdays(locale, firstDayOfWeek) {
-    const daysFromSunday = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+    const daysFromSunday = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
     return createRange(7).map(i => {
       const weekday = new Date(sundayJanuarySecond2000);
       weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
@@ -17462,6 +17422,24 @@
   function getMonth(date) {
     return date.getMonth();
   }
+  function getWeek(date, locale, firstDayOfWeek, firstWeekMinSize) {
+    const weekInfoFromLocale = weekInfo(locale);
+    const weekStart = firstDayOfWeek ?? weekInfoFromLocale?.firstDay ?? 0;
+    const minWeekSize = firstWeekMinSize ?? weekInfoFromLocale?.firstWeekSize ?? 1;
+    function firstWeekSize(year) {
+      const yearStart = new Date(year, 0, 1);
+      return 7 - getDiff(yearStart, startOfWeek(yearStart, locale, weekStart), 'days');
+    }
+    let year = getYear(date);
+    const currentWeekEnd = addDays(startOfWeek(date, locale, weekStart), 6);
+    if (year < getYear(currentWeekEnd) && firstWeekSize(year + 1) >= minWeekSize) {
+      year++;
+    }
+    const yearStart = new Date(year, 0, 1);
+    const size = firstWeekSize(year);
+    const d1w1 = size >= minWeekSize ? addDays(yearStart, size - 7) : addDays(yearStart, size);
+    return 1 + getDiff(date, d1w1, 'weeks');
+  }
   function getDate(date) {
     return date.getDate();
   }
@@ -17601,10 +17579,12 @@
       return addMonths(date, amount);
     }
     getWeekArray(date, firstDayOfWeek) {
-      return getWeekArray(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+      const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+      return getWeekArray(date, this.locale, firstDay);
     }
     startOfWeek(date, firstDayOfWeek) {
-      return startOfWeek(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+      const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+      return startOfWeek(date, this.locale, firstDay);
     }
     endOfWeek(date) {
       return endOfWeek(date, this.locale);
@@ -17664,7 +17644,8 @@
       return getDiff(date, comparing, unit);
     }
     getWeekdays(firstDayOfWeek) {
-      return getWeekdays(this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+      const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+      return getWeekdays(this.locale, firstDay);
     }
     getYear(date) {
       return getYear(date);
@@ -17672,6 +17653,10 @@
     getMonth(date) {
       return getMonth(date);
     }
+    getWeek(date, firstDayOfWeek, firstWeekMinSize) {
+      const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+      return getWeek(date, this.locale, firstDay, firstWeekMinSize);
+    }
     getDate(date) {
       return getDate(date);
     }
@@ -17775,26 +17760,6 @@
     return createInstance(options, locale);
   }
 
-  // https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
-  function getWeek(adapter, value) {
-    const date = adapter.toJsDate(value);
-    let year = date.getFullYear();
-    let d1w1 = new Date(year, 0, 1);
-    if (date < d1w1) {
-      year = year - 1;
-      d1w1 = new Date(year, 0, 1);
-    } else {
-      const tv = new Date(year + 1, 0, 1);
-      if (date >= tv) {
-        year = year + 1;
-        d1w1 = tv;
-      }
-    }
-    const diffTime = Math.abs(date.getTime() - d1w1.getTime());
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-    return Math.floor(diffDays / 7) + 1;
-  }
-
   // Types
 
   const makeVColorPickerProps = propsFactory({
@@ -17998,7 +17963,6 @@
       const vVirtualScrollRef = vue.ref();
       const selectionIndex = vue.shallowRef(-1);
       let cleared = false;
-      const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
         items,
         transformIn,
@@ -18007,7 +17971,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;
@@ -18062,7 +18026,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
@@ -18568,7 +18532,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 => {
@@ -18755,23 +18719,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
@@ -19052,7 +19016,7 @@
       });
       return !!items.length && isSelected(items);
     });
-    const showSelectAll = vue.computed(() => selectStrategy.value.showSelectAll);
+    const showSelectAll = vue.toRef(() => selectStrategy.value.showSelectAll);
     const data = {
       toggleSelect,
       select,
@@ -19090,8 +19054,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,
@@ -19309,7 +19273,7 @@
         slots
       } = _ref;
       const groupBy = useProxiedModel(props, 'groupBy');
-      const search = vue.toRef(props, 'search');
+      const search = vue.toRef(() => props.search);
       const {
         items
       } = useDataIteratorItems(props);
@@ -19353,7 +19317,7 @@
       const {
         flatItems
       } = useGroupedItems(sortedItems, groupBy, opened);
-      const itemsLength = vue.computed(() => flatItems.value.length);
+      const itemsLength = vue.toRef(() => flatItems.value.length);
       const {
         startIndex,
         stopIndex,
@@ -19633,13 +19597,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(() => {
@@ -20280,7 +20244,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         displayClasses,
         mobile
@@ -20938,13 +20902,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, {
@@ -21027,10 +20991,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(() => ({
@@ -21127,13 +21091,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, {
@@ -21209,10 +21173,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(() => ({
@@ -21365,8 +21329,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
@@ -21421,7 +21385,7 @@
         itemsPerPage,
         sortBy,
         groupBy,
-        search: vue.toRef(props, 'search')
+        search: vue.toRef(() => props.search)
       });
       vue.provide('v-data-table', {
         toggleSort,
@@ -21429,10 +21393,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(() => ({
@@ -21902,7 +21866,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       function onClick() {
         emit('click');
       }
@@ -21983,7 +21947,7 @@
     },
     firstDayOfWeek: {
       type: [Number, String],
-      default: 0
+      default: undefined
     }
   }, 'calendar');
   function useCalendar(props) {
@@ -22006,14 +21970,12 @@
       return adapter.setMonth(date, value);
     }, v => adapter.getMonth(v));
     const weekDays = vue.computed(() => {
-      const firstDayOfWeek = Number(props.firstDayOfWeek);
-
+      const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
       // Always generate all days, regardless of props.weekdays
       return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7);
     });
     const weeksInMonth = vue.computed(() => {
-      const firstDayOfWeek = Number(props.firstDayOfWeek);
-      const weeks = adapter.getWeekArray(month.value, firstDayOfWeek);
+      const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
       const days = weeks.flat();
 
       // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -22043,21 +22005,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)
         };
       });
     }
@@ -22077,7 +22039,7 @@
     });
     const weekNumbers = vue.computed(() => {
       return weeksInMonth.value.map(week => {
-        return week.length ? getWeek(adapter, week[0]) : null;
+        return week.length ? adapter.getWeek(week[0], props.firstDayOfWeek) : null;
       });
     });
     function isDisabled(value) {
@@ -22145,7 +22107,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) {
@@ -22525,7 +22487,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);
@@ -22542,8 +22504,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 = [];
@@ -22755,7 +22717,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      } = useBackgroundColor(() => props.bgColor);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -22918,7 +22880,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(props, 'color');
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -22929,7 +22891,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,
@@ -22984,14 +22946,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;
@@ -23082,21 +23044,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, {
@@ -23158,7 +23120,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';
@@ -23175,7 +23137,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;
@@ -23300,7 +23262,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) {
@@ -23473,7 +23435,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         borderClasses
       } = useBorder(props);
@@ -23495,11 +23457,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;
@@ -23972,11 +23934,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],
@@ -24508,7 +24470,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -24541,7 +24503,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, () => {
@@ -24567,7 +24529,7 @@
         isActive,
         isTemporary,
         width,
-        touchless: vue.toRef(props, 'touchless'),
+        touchless: vue.toRef(() => props.touchless),
         position: location
       });
       const layoutSize = vue.computed(() => {
@@ -24584,7 +24546,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')
@@ -24597,9 +24559,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,
@@ -24813,24 +24775,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();
@@ -24982,7 +24944,7 @@
               }
             }
           }, {
-            default: () => [slots.increment(incrementSlotProps.value)]
+            default: () => [slots.increment(incrementSlotProps)]
           });
         }
         function decrementControlNode() {
@@ -25011,7 +24973,7 @@
               }
             }
           }, {
-            default: () => [slots.decrement(decrementSlotProps.value)]
+            default: () => [slots.decrement(decrementSlotProps)]
           });
         }
         function controlNode() {
@@ -25211,12 +25173,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
@@ -26017,7 +25979,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -26816,7 +26778,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);
       });
@@ -27362,11 +27324,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;
@@ -27517,7 +27479,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(() => props.color);
       const {
         elevationClasses
       } = useElevation(props);
@@ -27537,7 +27499,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', {
@@ -27579,7 +27541,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');
@@ -27772,18 +27734,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(() => {
@@ -28133,7 +28095,7 @@
       const {
         backgroundColorStyles,
         backgroundColorClasses
-      } = useBackgroundColor(vue.toRef(props, 'dotColor'));
+      } = useBackgroundColor(() => props.dotColor);
       const {
         roundedClasses
       } = useRounded(props, 'v-timeline-divider__dot');
@@ -28143,7 +28105,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
@@ -28314,17 +28276,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(() => {
@@ -28371,9 +28333,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", {
@@ -28420,7 +28382,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';
@@ -28428,7 +28390,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';
       });
@@ -28507,13 +28469,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 {
@@ -28522,8 +28490,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)
@@ -28544,16 +28512,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 {};
     }
@@ -28589,6 +28571,7 @@
   }, 'VCalendarInterval');
   const VCalendarInterval = genericComponent()({
     name: 'VCalendarInterval',
+    inheritAttrs: false,
     props: {
       index: {
         type: Number,
@@ -28598,6 +28581,7 @@
     },
     setup(props, _ref) {
       let {
+        attrs,
         emit,
         slots
       } = _ref;
@@ -28623,39 +28607,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("slot", {
-          "name": "intervalFormat",
-          "interval": interval.value
-        }, [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("slot", {
-          "name": "intervalBody",
-          "interval": interval.value
-        }, [interval.value.events?.map(event => vue.createVNode(VCalendarIntervalEvent, {
+        }, 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
-        }, null))])])]) : vue.createVNode("div", {
+        }, 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("slot", {
-          "name": "intervalBody",
-          "interval": interval.value
-        }, [interval.value.events?.filter(event => !event.allDay).map(event => vue.createVNode(VCalendarIntervalEvent, {
+        }, 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
-        }, null))])])]);
+        }, attrs), {
+          ...(slots.intervalEvent ? {
+            intervalEvent: _ref3 => {
+              let {
+                height,
+                margin,
+                eventClass,
+                event,
+                interval
+              } = _ref3;
+              return slots.intervalEvent?.({
+                height,
+                margin,
+                eventClass,
+                event,
+                interval
+              });
+            }
+          } : {})
+        }))])]);
       });
       return {
         interval
@@ -28663,6 +28682,8 @@
     }
   });
 
+  // Types
+
   const makeVCalendarDayProps = propsFactory({
     hideDayHeader: Boolean,
     intervals: {
@@ -28673,26 +28694,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
@@ -28731,7 +28760,8 @@
     },
     setup(props, _ref) {
       let {
-        emit
+        emit,
+        slots
       } = _ref;
       const {
         t
@@ -28765,7 +28795,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 {};
     }
   });
@@ -28777,14 +28809,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,
@@ -28795,87 +28837,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;
@@ -28893,27 +28943,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');
@@ -28927,20 +28983,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"
@@ -28949,24 +29010,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,
@@ -29515,10 +29591,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]]
@@ -29579,7 +29652,7 @@
         colorClasses,
         colorStyles,
         variantClasses
-      } = useVariant(vue.toRef(() => ({
+      } = useVariant(() => ({
         color: (() => {
           if (props.disabled) return undefined;
           if (!isActive.value) return props.color;
@@ -29594,7 +29667,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() {
@@ -29603,13 +29676,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,
@@ -30090,11 +30164,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);
@@ -30954,9 +31028,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);
@@ -30970,7 +31044,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);
@@ -31013,18 +31087,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(() => {
@@ -31564,7 +31638,7 @@
       };
     });
   }
-  const version$1 = "3.8.1";
+  const version$1 = "3.8.3";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31747,7 +31821,7 @@
         flat: true
       },
       VAutocomplete: {
-        variant: 'filled'
+        variant: 'outlined'
       },
       VBanner: {
         color: 'primary'
@@ -31776,7 +31850,10 @@
         rounded: 'sm'
       },
       VCombobox: {
-        variant: 'filled'
+        variant: 'outlined'
+      },
+      VDateInput: {
+        variant: 'outlined'
       },
       VDatePicker: {
         controlHeight: 48,
@@ -31790,6 +31867,9 @@
           rounded: 'circle'
         }
       },
+      VFileInput: {
+        variant: 'outlined'
+      },
       VNavigationDrawer: {
         // VList: {
         //   nav: true,
@@ -31798,8 +31878,15 @@
         //   },
         // },
       },
+      VNumberInput: {
+        variant: 'outlined',
+        VBtn: {
+          color: undefined,
+          rounded: undefined
+        }
+      },
       VSelect: {
-        variant: 'filled'
+        variant: 'outlined'
       },
       VSlider: {
         color: 'primary'
@@ -31808,10 +31895,10 @@
         color: 'primary'
       },
       VTextarea: {
-        variant: 'filled'
+        variant: 'outlined'
       },
       VTextField: {
-        variant: 'filled'
+        variant: 'outlined'
       },
       VToolbar: {
         VBtn: {
@@ -31849,7 +31936,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.1";
+  const version = "3.8.3";
 
   /* eslint-disable local-rules/sort-imports */