@vuetify/nightly 3.2.0-dev-20230214.0 → 3.2.0-dev-20230322.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230214.0
+* Vuetify v3.2.0-dev-20230322.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -207,6 +207,10 @@
     let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     return Math.max(min, Math.min(max, value));
   }
+  function getDecimals(value) {
+    const trimmedStr = value.toString().trim();
+    return trimmedStr.includes('.') ? trimmedStr.length - trimmedStr.indexOf('.') - 1 : 0;
+  }
   function padEnd(str, length) {
     let char = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
     return str + char.repeat(Math.max(0, length - str.length));
@@ -489,7 +493,14 @@
     if (typeof el.animate === 'undefined') return {
       finished: Promise.resolve()
     };
-    const animation = el.animate(keyframes, options);
+    let animation;
+    try {
+      animation = el.animate(keyframes, options);
+    } catch (err) {
+      return {
+        finished: Promise.resolve()
+      };
+    }
     if (typeof animation.finished === 'undefined') {
       animation.finished = new Promise(resolve => {
         animation.onfinish = () => {
@@ -784,11 +795,12 @@
       b,
       a
     } = _ref2;
-    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
+    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : ''].join('')}`;
   }
   function HexToRGB(hex) {
+    hex = parseHex(hex);
     let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
-    a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
+    a = a === undefined ? a : a / 255;
     return {
       r,
       g,
@@ -811,9 +823,7 @@
     if (hex.length === 3 || hex.length === 4) {
       hex = hex.split('').map(x => x + x).join('');
     }
-    if (hex.length === 6) {
-      hex = padEnd(hex, 8, 'F');
-    } else {
+    if (hex.length !== 6) {
       hex = padEnd(padEnd(hex, 6), 8, 'F');
     }
     return hex;
@@ -954,6 +964,8 @@
     const injectedDefaults = useDefaults();
     const providedDefaults = vue.ref(defaults);
     const newDefaults = vue.computed(() => {
+      const disabled = vue.unref(options?.disabled);
+      if (disabled) return injectedDefaults.value;
       const scoped = vue.unref(options?.scoped);
       const reset = vue.unref(options?.reset);
       const root = vue.unref(options?.root);
@@ -964,7 +976,9 @@
       if (reset || root) {
         const len = Number(reset || Infinity);
         for (let i = 0; i <= len; i++) {
-          if (!properties.prev) break;
+          if (!properties || !('prev' in properties)) {
+            break;
+          }
           properties = properties.prev;
         }
         return properties;
@@ -1006,15 +1020,22 @@
   function propIsDefined(vnode, prop) {
     return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
   }
-  const defineComponent = function defineComponent(options) {
+
+  // No props
+
+  // Implementation
+  function defineComponent(options) {
     options._setup = options._setup ?? options.setup;
     if (!options.name) {
       consoleWarn('The component is missing an explicit name, unable to generate default prop value');
       return options;
     }
     if (options._setup) {
-      options.props = options.props ?? {};
-      options.props = propsFactory(options.props, toKebabCase(options.name))();
+      options.props = propsFactory(options.props ?? {}, toKebabCase(options.name))();
+      const propKeys = Object.keys(options.props);
+      options.filterProps = function filterProps(props) {
+        return pick(props, propKeys);
+      };
       options.props._as = String;
       options.setup = function setup(props, ctx) {
         const defaults = useDefaults();
@@ -1025,10 +1046,11 @@
         const componentDefaults = vue.computed(() => defaults.value[props._as ?? options.name]);
         const _props = new Proxy(props, {
           get(target, prop) {
+            const propValue = Reflect.get(target, prop);
             if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-              return componentDefaults.value?.[prop] ?? defaults.value.global?.[prop] ?? target[prop];
+              return componentDefaults.value?.[prop] ?? defaults.value.global?.[prop] ?? propValue;
             }
-            return Reflect.get(target, prop);
+            return propValue;
           }
         });
         const _subcomponentDefaults = vue.shallowRef();
@@ -1053,7 +1075,7 @@
       };
     }
     return options;
-  };
+  }
   // Implementation
   function genericComponent() {
     let exposeDefaults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -1674,17 +1696,9 @@
       if (current.value.dark) {
         createCssClass(lines, ':root', ['color-scheme: dark']);
       }
+      createCssClass(lines, ':root', genCssVariables(current.value));
       for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-        const {
-          variables,
-          dark
-        } = theme;
-        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${dark ? 'dark' : 'normal'}`, ...genCssVariables(theme), ...Object.keys(variables).map(key => {
-          const value = variables[key];
-          const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
-          const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-          return `--v-${key}: ${rgb ?? value}`;
-        })]);
+        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]);
       }
       const bgLines = [];
       const fgLines = [];
@@ -1701,22 +1715,30 @@
       lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
+    function getHead() {
+      return {
+        style: [{
+          children: styles.value,
+          id: 'vuetify-theme-stylesheet',
+          nonce: parsedOptions.cspNonce || false
+        }]
+      };
+    }
     function install(app) {
       const head = app._context.provides.usehead;
       if (head) {
-        head.addHeadObjs(vue.computed(() => {
-          const style = {
-            children: styles.value,
-            type: 'text/css',
-            id: 'vuetify-theme-stylesheet'
-          };
-          if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
-          return {
-            style: [style]
-          };
-        }));
-        if (IN_BROWSER) {
-          vue.watchEffect(() => head.updateDOM());
+        if (head.push) {
+          const entry = head.push(getHead);
+          vue.watch(styles, () => {
+            entry.patch(getHead);
+          });
+        } else {
+          if (IN_BROWSER) {
+            head.addHeadObjs(vue.computed(getHead));
+            vue.watchEffect(() => head.updateDOM());
+          } else {
+            head.addHeadObjs(getHead());
+          }
         }
       } else {
         let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
@@ -1789,6 +1811,11 @@
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
+    for (const [key, value] of Object.entries(theme.variables)) {
+      const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+      const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
+      variables.push(`--v-${key}: ${rgb ?? value}`);
+    }
     return variables;
   }
 
@@ -1818,7 +1845,7 @@
     });
     const model = vue.computed({
       get() {
-        return transformIn(vue.toRaw(isControlled.value ? props[prop] : internal.value));
+        return transformIn(isControlled.value ? props[prop] : internal.value);
       },
       set(internalValue) {
         const newValue = transformOut(internalValue);
@@ -2018,7 +2045,7 @@
     en: false,
     es: false,
     et: false,
-    fa: false,
+    fa: true,
     fi: false,
     fr: false,
     hr: false,
@@ -2151,6 +2178,7 @@
     name: 'VDefaultsProvider',
     props: {
       defaults: Object,
+      disabled: Boolean,
       reset: [Number, String],
       root: Boolean,
       scoped: Boolean
@@ -2161,6 +2189,7 @@
       } = _ref;
       const {
         defaults,
+        disabled,
         reset,
         root,
         scoped
@@ -2168,7 +2197,8 @@
       provideDefaults(defaults, {
         reset,
         root,
-        scoped
+        scoped,
+        disabled
       });
       return () => slots.default?.();
     }
@@ -2179,7 +2209,7 @@
   // Types
 
   function createCssTransition(name) {
-    let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top center 0';
+    let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center center';
     let mode = arguments.length > 2 ? arguments[2] : undefined;
     return genericComponent()({
       name,
@@ -2790,7 +2820,7 @@
           "class": ['v-img__img', containClasses.value],
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
-          "alt": "",
+          "alt": props.alt,
           "sizes": props.sizes,
           "ref": image,
           "onLoad": onLoad,
@@ -2812,7 +2842,7 @@
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createVNode("img", {
           "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
           "src": normalisedSrc.value.lazySrc,
-          "alt": ""
+          "alt": props.alt
         }, null)]
       });
       const __placeholder = () => {
@@ -3154,16 +3184,20 @@
           default: () => [hasImage && vue.createVNode("div", {
             "key": "image",
             "class": "v-toolbar__image"
-          }, [vue.createVNode(VDefaultsProvider, {
+          }, [!slots.image ? vue.createVNode(VImg, {
+            "key": "image-img",
+            "cover": true,
+            "src": props.image
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "image-defaults",
+            "disabled": !props.image,
             "defaults": {
               VImg: {
                 cover: true,
                 src: props.image
               }
             }
-          }, {
-            default: () => [slots.image ? slots.image?.() : vue.createVNode(VImg, null, null)]
-          })]), vue.createVNode(VDefaultsProvider, {
+          }, slots.image)]), vue.createVNode(VDefaultsProvider, {
             "defaults": {
               VTabs: {
                 height: convertToUnit(contentHeight.value)
@@ -3209,8 +3243,24 @@
       };
     }
   });
-  function filterToolbarProps(props) {
-    return pick(props, Object.keys(VToolbar?.props ?? {}));
+
+  // Utilities
+
+  // Composables
+  function useSsrBoot() {
+    const isBooted = vue.ref(false);
+    vue.onMounted(() => {
+      window.requestAnimationFrame(() => {
+        isBooted.value = true;
+      });
+    });
+    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
+      transition: 'none !important'
+    } : undefined);
+    return {
+      ssrBootStyles,
+      isBooted: vue.readonly(isBooted)
+    };
   }
 
   // Types
@@ -3255,6 +3305,9 @@
         const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
         return height + extensionHeight;
       });
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const {
         layoutItemStyles
       } = useLayoutItem({
@@ -3267,7 +3320,7 @@
         absolute: vue.toRef(props, 'absolute')
       });
       useRender(() => {
-        const [toolbarProps] = filterToolbarProps(props);
+        const [toolbarProps] = VToolbar.filterProps(props);
         return vue.createVNode(VToolbar, vue.mergeProps({
           "ref": vToolbarRef,
           "class": ['v-app-bar', {
@@ -3275,7 +3328,8 @@
           }],
           "style": {
             ...layoutItemStyles.value,
-            height: undefined
+            height: undefined,
+            ...ssrBootStyles.value
           }
         }, toolbarProps), slots);
       });
@@ -3357,8 +3411,6 @@
     };
   }
 
-  // Types
-
   const makeVBtnGroupProps = propsFactory({
     divided: Boolean,
     ...makeBorderProps(),
@@ -3409,9 +3461,6 @@
       });
     }
   });
-  function filterVBtnGroupProps(props) {
-    return pick(props, Object.keys(VBtnGroup.props));
-  }
 
   // Composables
 
@@ -3638,7 +3687,7 @@
         selected
       } = useGroup(props, VBtnToggleSymbol);
       useRender(() => {
-        const [btnGroupProps] = filterVBtnGroupProps(props);
+        const [btnGroupProps] = VBtnGroup.filterProps(props);
         return vue.createVNode(VBtnGroup, vue.mergeProps({
           "class": "v-btn-toggle"
         }, btnGroupProps), {
@@ -4726,49 +4775,50 @@
 
   // Types
 
+  const makeVBtnProps = propsFactory({
+    active: {
+      type: Boolean,
+      default: undefined
+    },
+    symbol: {
+      type: null,
+      default: VBtnToggleSymbol
+    },
+    flat: Boolean,
+    icon: [Boolean, String, Function, Object],
+    prependIcon: IconValue,
+    appendIcon: IconValue,
+    block: Boolean,
+    stacked: Boolean,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    ...makeBorderProps(),
+    ...makeRoundedProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeGroupItemProps(),
+    ...makeLoaderProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRouterProps(),
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'button'
+    }),
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'elevated'
+    })
+  }, 'VBtn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
       Ripple
     },
-    props: {
-      active: {
-        type: Boolean,
-        default: undefined
-      },
-      symbol: {
-        type: null,
-        default: VBtnToggleSymbol
-      },
-      flat: Boolean,
-      icon: [Boolean, String, Function, Object],
-      prependIcon: IconValue,
-      appendIcon: IconValue,
-      block: Boolean,
-      stacked: Boolean,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      ...makeBorderProps(),
-      ...makeRoundedProps(),
-      ...makeDensityProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeGroupItemProps(),
-      ...makeLoaderProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRouterProps(),
-      ...makeSizeProps(),
-      ...makeTagProps({
-        tag: 'button'
-      }),
-      ...makeThemeProps(),
-      ...makeVariantProps({
-        variant: 'elevated'
-      })
-    },
+    props: makeVBtnProps(),
     emits: {
       'group:selected': val => true
     },
@@ -4861,43 +4911,49 @@
           },
           "value": valueAttr.value
         }, {
-          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode(VDefaultsProvider, {
+          default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
             "key": "prepend",
+            "class": "v-btn__prepend"
+          }, [!slots.prepend ? vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "icon": props.prependIcon
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !props.prependIcon,
             "defaults": {
               VIcon: {
                 icon: props.prependIcon
               }
             }
-          }, {
-            default: () => [vue.createVNode("span", {
-              "class": "v-btn__prepend"
-            }, [slots.prepend?.() ?? vue.createVNode(VIcon, null, null)])]
-          }), vue.createVNode("span", {
+          }, slots.prepend)]), vue.createVNode("span", {
             "class": "v-btn__content",
             "data-no-activator": ""
-          }, [vue.createVNode(VDefaultsProvider, {
-            "key": "content",
+          }, [!slots.default && hasIcon ? vue.createVNode(VIcon, {
+            "key": "content-icon",
+            "icon": props.icon
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "content-defaults",
+            "disabled": !hasIcon,
             "defaults": {
               VIcon: {
-                icon: hasIcon ? props.icon : undefined
+                icon: props.icon
               }
             }
-          }, {
-            default: () => [slots.default?.() ?? (hasIcon && vue.createVNode(VIcon, {
-              "key": "icon"
-            }, null))]
-          })]), !props.icon && hasAppend && vue.createVNode(VDefaultsProvider, {
+          }, slots.default)]), !props.icon && hasAppend && vue.createVNode("span", {
             "key": "append",
+            "class": "v-btn__append"
+          }, [!slots.append ? vue.createVNode(VIcon, {
+            "key": "append-icon",
+            "icon": props.appendIcon
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "append-defaults",
+            "disabled": !props.appendIcon,
             "defaults": {
               VIcon: {
                 icon: props.appendIcon
               }
             }
-          }, {
-            default: () => [vue.createVNode("span", {
-              "class": "v-btn__append"
-            }, [slots.append?.() ?? vue.createVNode(VIcon, null, null)])]
-          }), !!props.loading && vue.createVNode("span", {
+          }, slots.append)]), !!props.loading && vue.createVNode("span", {
             "key": "loader",
             "class": "v-btn__loader"
           }, [slots.loader?.() ?? vue.createVNode(VProgressCircular, {
@@ -5026,10 +5082,12 @@
       })
     },
     emits: {
+      'click:close': e => true,
       'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
@@ -5079,6 +5137,7 @@
         'aria-label': t(props.closeLabel),
         onClick(e) {
           isActive.value = false;
+          emit('click:close', e);
         }
       }));
       return () => {
@@ -5100,8 +5159,17 @@
             "key": "border",
             "class": ['v-alert__border', textColorClasses.value],
             "style": textColorStyles.value
-          }, null), hasPrepend && vue.createVNode(VDefaultsProvider, {
+          }, null), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
+            "class": "v-alert__prepend"
+          }, [!slots.prepend ? vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "density": props.density,
+            "icon": icon.value,
+            "size": props.prominent ? 44 : 28
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !icon.value,
             "defaults": {
               VIcon: {
                 density: props.density,
@@ -5109,21 +5177,25 @@
                 size: props.prominent ? 44 : 28
               }
             }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-alert__prepend"
-            }, [slots.prepend ? slots.prepend() : icon.value && vue.createVNode(VIcon, null, null)])]
-          }), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createVNode("div", {
             "class": "v-alert__content"
           }, [hasTitle && vue.createVNode(VAlertTitle, {
             "key": "title"
           }, {
-            default: () => [slots.title ? slots.title() : props.title]
-          }), hasText && (slots.text ? slots.text() : props.text), slots.default?.()]), slots.append && vue.createVNode("div", {
+            default: () => [slots.title?.() ?? props.title]
+          }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && vue.createVNode("div", {
             "key": "append",
             "class": "v-alert__append"
-          }, [slots.append()]), hasClose && vue.createVNode(VDefaultsProvider, {
+          }, [slots.append()]), hasClose && vue.createVNode("div", {
             "key": "close",
+            "class": "v-alert__close"
+          }, [!slots.close ? vue.createVNode(VBtn, vue.mergeProps({
+            "key": "close-btn",
+            "icon": props.closeIcon,
+            "size": "x-small",
+            "variant": "text"
+          }, closeProps.value), null) : vue.createVNode(VDefaultsProvider, {
+            "key": "close-defaults",
             "defaults": {
               VBtn: {
                 icon: props.closeIcon,
@@ -5132,12 +5204,10 @@
               }
             }
           }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-alert__close"
-            }, [slots.close?.({
+            default: () => [slots.close?.({
               props: closeProps.value
-            }) ?? vue.createVNode(VBtn, closeProps.value, null)])]
-          })]
+            })]
+          })])]
         });
       };
     }
@@ -6100,7 +6170,13 @@
         });
       }
       function onInput(e) {
-        model.value = e.target.value;
+        const el = e.target;
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        model.value = el.value;
+        vue.nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
       }
       useRender(() => {
         const hasCounter = !!(slots.counter || props.counter || props.counterValue);
@@ -6147,6 +6223,7 @@
               "id": id.value,
               "active": isActive.value || isDirty.value,
               "dirty": isDirty.value || props.dirty,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -6199,9 +6276,6 @@
       return forwardRefs({}, vInputRef, vFieldRef, inputRef);
     }
   });
-  function filterVTextFieldProps(props) {
-    return pick(props, Object.keys(VTextField.props));
-  }
 
   // Types
 
@@ -6459,11 +6533,6 @@
       };
     }
   });
-  function filterControlProps(props) {
-    return pick(props, Object.keys(VSelectionControl.props));
-  }
-
-  // Types
 
   const makeVCheckboxBtnProps = propsFactory({
     indeterminate: Boolean,
@@ -6513,9 +6582,6 @@
       return {};
     }
   });
-  function filterCheckboxBtnProps(props) {
-    return pick(props, Object.keys(VCheckboxBtn.props));
-  }
 
   // Types
 
@@ -6544,7 +6610,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [checkboxProps, _2] = filterCheckboxBtnProps(props);
+        const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "class": "v-checkbox"
         }, inputAttrs, inputProps, {
@@ -6801,10 +6867,13 @@
       const link = useLink(props, attrs);
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
-      function onCloseClick(e) {
-        isActive.value = false;
-        emit('click:close', e);
-      }
+      const closeProps = vue.computed(() => ({
+        'aria-label': t(props.closeLabel),
+        onClick(e) {
+          isActive.value = false;
+          emit('click:close', e);
+        }
+      }));
       function onClick(e) {
         emit('click', e);
         if (!isClickable.value) return;
@@ -6819,10 +6888,12 @@
       }
       return () => {
         const Tag = link.isLink.value ? 'a' : props.tag;
-        const hasAppend = !!(slots.append || props.appendIcon || props.appendAvatar);
+        const hasAppendMedia = !!(props.appendIcon || props.appendAvatar);
+        const hasAppend = !!(hasAppendMedia || slots.append);
         const hasClose = !!(slots.close || props.closable);
         const hasFilter = !!(slots.filter || props.filter) && group;
-        const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
+        const hasPrependMedia = !!(props.prependIcon || props.prependAvatar);
+        const hasPrepend = !!(hasPrependMedia || slots.prepend);
         const hasColor = !group || group.isSelected.value;
         return isActive.value && vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-chip', {
@@ -6840,77 +6911,94 @@
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
-          default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
-            "key": "filter",
-            "defaults": {
-              VIcon: {
-                icon: props.filterIcon
-              }
-            }
+          default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VExpandXTransition, {
+            "key": "filter"
           }, {
-            default: () => [vue.createVNode(VExpandXTransition, null, {
-              default: () => [vue.withDirectives(vue.createVNode("div", {
-                "class": "v-chip__filter"
-              }, [slots.filter ? slots.filter() : vue.createVNode(VIcon, null, null)]), [[vue.vShow, group.isSelected.value]])]
-            })]
-          }), hasPrepend && vue.createVNode(VDefaultsProvider, {
+            default: () => [vue.withDirectives(vue.createVNode("div", {
+              "class": "v-chip__filter"
+            }, [!slots.filter ? vue.createVNode(VIcon, {
+              "key": "filter-icon",
+              "icon": props.filterIcon
+            }, null) : vue.withDirectives(vue.createVNode(VDefaultsProvider, {
+              "key": "filter-defaults",
+              "disabled": !props.filterIcon,
+              "defaults": {
+                VIcon: {
+                  icon: props.filterIcon
+                }
+              }
+            }, null), [[vue.resolveDirective("slot"), slots.filter, "default"]])]), [[vue.vShow, group.isSelected.value]])]
+          }), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
+            "class": "v-chip__prepend"
+          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependIcon && vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "icon": props.prependIcon,
+            "start": true
+          }, null), props.prependAvatar && vue.createVNode(VAvatar, {
+            "key": "prepend-avatar",
+            "image": props.prependAvatar,
+            "start": true
+          }, null)]) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !hasPrependMedia,
             "defaults": {
               VAvatar: {
-                image: props.prependAvatar
+                image: props.prependAvatar,
+                start: true
               },
               VIcon: {
-                icon: props.prependIcon
+                icon: props.prependIcon,
+                start: true
               }
             }
-          }, {
-            default: () => [slots.prepend ? vue.createVNode("div", {
-              "class": "v-chip__prepend"
-            }, [slots.prepend()]) : props.prependAvatar ? vue.createVNode(VAvatar, {
-              "start": true
-            }, null) : props.prependIcon ? vue.createVNode(VIcon, {
-              "start": true
-            }, null) : undefined]
-          }), slots.default?.({
+          }, slots.prepend)]), slots.default?.({
             isSelected: group?.isSelected.value,
             selectedClass: group?.selectedClass.value,
             select: group?.select,
             toggle: group?.toggle,
             value: group?.value.value,
             disabled: props.disabled
-          }) ?? props.text, hasAppend && vue.createVNode(VDefaultsProvider, {
+          }) ?? props.text, hasAppend && vue.createVNode("div", {
             "key": "append",
+            "class": "v-chip__append"
+          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+            "key": "append-icon",
+            "end": true,
+            "icon": props.appendIcon
+          }, null), props.appendAvatar && vue.createVNode(VAvatar, {
+            "key": "append-avatar",
+            "end": true,
+            "image": props.appendAvatar
+          }, null)]) : vue.createVNode(VDefaultsProvider, {
+            "key": "append-defaults",
+            "disabled": !hasAppendMedia,
             "defaults": {
               VAvatar: {
+                end: true,
                 image: props.appendAvatar
               },
               VIcon: {
+                end: true,
                 icon: props.appendIcon
               }
             }
-          }, {
-            default: () => [slots.append ? vue.createVNode("div", {
-              "class": "v-chip__append"
-            }, [slots.append()]) : props.appendAvatar ? vue.createVNode(VAvatar, {
-              "end": true
-            }, null) : props.appendIcon ? vue.createVNode(VIcon, {
-              "end": true
-            }, null) : undefined]
-          }), hasClose && vue.createVNode(VDefaultsProvider, {
+          }, slots.append)]), hasClose && vue.createVNode("div", vue.mergeProps({
             "key": "close",
+            "class": "v-chip__close"
+          }, closeProps.value), [!slots.close ? vue.createVNode(VIcon, {
+            "key": "close-icon",
+            "icon": props.closeIcon,
+            "size": "x-small"
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "close-defaults",
             "defaults": {
               VIcon: {
                 icon: props.closeIcon,
                 size: 'x-small'
               }
             }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-chip__close",
-              "aria-label": t(props.closeLabel),
-              "onClick": onCloseClick
-            }, [slots.close ? slots.close() : vue.createVNode(VIcon, null, null)])]
-          })]
+          }, slots.close)])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
       };
     }
@@ -7051,7 +7139,6 @@
   };
 
   /* eslint-disable sonarjs/no-identical-functions */
-
   const independentSelectStrategy = mandatory => {
     const strategy = {
       select: _ref => {
@@ -7060,6 +7147,8 @@
           value,
           selected
         } = _ref;
+        id = vue.toRaw(id);
+
         // When mandatory and we're trying to deselect when id
         // is the only currently selected item then do nothing
         if (mandatory && !value) {
@@ -7104,6 +7193,7 @@
           id,
           ...rest
         } = _ref3;
+        id = vue.toRaw(id);
         const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
         return parentStrategy.select({
           ...rest,
@@ -7134,6 +7224,7 @@
           children,
           ...rest
         } = _ref4;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7157,6 +7248,7 @@
           children,
           ...rest
         } = _ref5;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7180,6 +7272,7 @@
           children,
           parents
         } = _ref6;
+        id = vue.toRaw(id);
         const original = new Map(selected);
         const items = [id];
         while (items.length) {
@@ -7401,7 +7494,7 @@
       isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
-      isSelected: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+      isSelected: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'on'),
       isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
       isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value)),
       isGroupActivator: parent.isGroupActivator
@@ -7421,8 +7514,6 @@
     });
   };
 
-  // Types
-
   const VListGroupActivator = defineComponent({
     name: 'VListGroupActivator',
     setup(_, _ref) {
@@ -7515,9 +7606,6 @@
       return {};
     }
   });
-  function filterListGroupProps(props) {
-    return pick(props, Object.keys(VListGroup.props));
-  }
 
   const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
@@ -7655,8 +7743,10 @@
         const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
         const hasSubtitle = slots.subtitle || props.subtitle;
-        const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
-        const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
+        const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
+        const hasAppend = !!(hasAppendMedia || slots.append);
+        const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
+        const hasPrepend = !!(hasPrependMedia || slots.prepend);
         list?.updateHasPrepend(hasPrepend);
         return vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-list-item', {
@@ -7676,7 +7766,7 @@
           default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
             "class": "v-list-item__prepend"
-          }, [props.prependAvatar && vue.createVNode(VAvatar, {
+          }, [!slots.prepend ? vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VAvatar, {
             "key": "prepend-avatar",
             "density": props.density,
             "image": props.prependAvatar
@@ -7684,8 +7774,9 @@
             "key": "prepend-icon",
             "density": props.density,
             "icon": props.prependIcon
-          }, null), slots.prepend && vue.createVNode(VDefaultsProvider, {
-            "key": "prepend",
+          }, null)]) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !hasPrependMedia,
             "defaults": {
               VAvatar: {
                 density: props.density,
@@ -7700,7 +7791,7 @@
               }
             }
           }, {
-            default: () => [slots.prepend(slotProps.value)]
+            default: () => [slots.prepend?.(slotProps.value)]
           })]), vue.createVNode("div", {
             "class": "v-list-item__content",
             "data-no-activator": ""
@@ -7719,8 +7810,17 @@
           }), slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
             "key": "append",
             "class": "v-list-item__append"
-          }, [slots.append && vue.createVNode(VDefaultsProvider, {
-            "key": "append",
+          }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
+            "key": "append-icon",
+            "density": props.density,
+            "icon": props.appendIcon
+          }, null), props.appendAvatar && vue.createVNode(VAvatar, {
+            "key": "append-avatar",
+            "density": props.density,
+            "image": props.appendAvatar
+          }, null)]) : vue.createVNode(VDefaultsProvider, {
+            "key": "append-defaults",
+            "disabled": !hasAppendMedia,
             "defaults": {
               VAvatar: {
                 density: props.density,
@@ -7735,16 +7835,8 @@
               }
             }
           }, {
-            default: () => [slots.append(slotProps.value)]
-          }), props.appendIcon && vue.createVNode(VIcon, {
-            "key": "append-icon",
-            "density": props.density,
-            "icon": props.appendIcon
-          }, null), props.appendAvatar && vue.createVNode(VAvatar, {
-            "key": "append-avatar",
-            "density": props.density,
-            "image": props.appendAvatar
-          }, null)])]
+            default: () => [slots.append?.(slotProps.value)]
+          })])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
       return {};
@@ -7841,7 +7933,7 @@
             item
           }) : undefined
         };
-        const [listGroupProps, _1] = filterListGroupProps(itemProps);
+        const [listGroupProps, _1] = VListGroup.filterProps(itemProps);
         return children ? vue.createVNode(VListGroup, vue.mergeProps({
           "value": itemProps?.value
         }, listGroupProps), {
@@ -8963,7 +9055,7 @@
       if (!(data.isActive.value && props.scrollStrategy)) return;
       scope = vue.effectScope();
       await vue.nextTick();
-      scope.run(() => {
+      scope.active && scope.run(() => {
         if (typeof props.scrollStrategy === 'function') {
           props.scrollStrategy(data, props, scope);
         } else {
@@ -9044,7 +9136,7 @@
       });
     });
     vue.onScopeDispose(() => {
-      cancelIdleCallback(ric);
+      typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
       cancelAnimationFrame(raf);
     });
   }
@@ -9068,6 +9160,8 @@
 
   // Types
 
+  const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
+
   const DisplaySymbol = Symbol.for('vuetify:display');
   const defaultDisplayOptions = {
     mobileBreakpoint: 'lg',
@@ -9090,8 +9184,8 @@
   function getClientHeight(isHydrate) {
     return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
   }
-  function getPlatform() {
-    const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
+  function getPlatform(isHydrate) {
+    const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
     function match(regexp) {
       return Boolean(userAgent.match(regexp));
     }
@@ -9106,7 +9200,6 @@
     const win = match(/win/i);
     const mac = match(/mac/i);
     const linux = match(/linux/i);
-    const ssr = match(/ssr/i);
     return {
       android,
       ios,
@@ -9120,7 +9213,7 @@
       mac,
       linux,
       touch: SUPPORTS_TOUCH,
-      ssr
+      ssr: userAgent === 'ssr'
     };
   }
   function createDisplay(options, ssr) {
@@ -9129,13 +9222,17 @@
       mobileBreakpoint
     } = parseDisplayOptions(options);
     const height = vue.ref(getClientHeight(ssr));
-    const platform = getPlatform();
+    const platform = vue.shallowRef(getPlatform(ssr));
     const state = vue.reactive({});
     const width = vue.ref(getClientWidth(ssr));
-    function update() {
+    function updateSize() {
       height.value = getClientHeight();
       width.value = getClientWidth();
     }
+    function update() {
+      updateSize();
+      platform.value = getPlatform();
+    }
 
     // eslint-disable-next-line max-statements
     vue.watchEffect(() => {
@@ -9147,7 +9244,7 @@
       const xxl = width.value >= thresholds.xxl;
       const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : xl ? 'xl' : 'xxl';
       const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];
-      const mobile = !platform.ssr ? width.value < breakpointValue : platform.android || platform.ios || platform.opera;
+      const mobile = width.value < breakpointValue;
       state.xs = xs;
       state.sm = sm;
       state.md = md;
@@ -9167,11 +9264,11 @@
       state.width = width.value;
       state.mobile = mobile;
       state.mobileBreakpoint = mobileBreakpoint;
-      state.platform = platform;
+      state.platform = platform.value;
       state.thresholds = thresholds;
     });
     if (IN_BROWSER) {
-      window.addEventListener('resize', update, {
+      window.addEventListener('resize', updateSize, {
         passive: true
       });
     }
@@ -9236,7 +9333,7 @@
       parent?.activeChildren.add(vm.uid);
       vue.onScopeDispose(() => {
         if (createStackEntry) {
-          const idx = globalStack.findIndex(v => v[0] === vm.uid);
+          const idx = vue.toRaw(globalStack).findIndex(v => v[0] === vm.uid);
           globalStack.splice(idx, 1);
         }
         parent?.activeChildren.delete(vm.uid);
@@ -9620,9 +9717,6 @@
       };
     }
   });
-  function filterVOverlayProps(props) {
-    return pick(props, Object.keys(VOverlay.props));
-  }
 
   // Types
 
@@ -9659,17 +9753,17 @@
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      let openChildren = 0;
+      const openChildren = vue.ref(0);
       vue.provide(VMenuSymbol, {
         register() {
-          ++openChildren;
+          ++openChildren.value;
         },
         unregister() {
-          --openChildren;
+          --openChildren.value;
         },
         closeParents() {
           setTimeout(() => {
-            if (!openChildren) {
+            if (!openChildren.value) {
               isActive.value = false;
               parent?.closeParents();
             }
@@ -9688,7 +9782,7 @@
         'aria-owns': id.value
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-menu']
@@ -9713,7 +9807,8 @@
         });
       });
       return forwardRefs({
-        id
+        id,
+        ΨopenChildren: openChildren
       }, overlay);
     }
   });
@@ -9773,7 +9868,15 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const {
         items,
         transformIn,
@@ -9855,7 +9958,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -9880,6 +9983,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -9940,7 +10044,13 @@
             return vue.createVNode("div", {
               "key": item.value,
               "class": "v-select__selection"
-            }, [hasChips ? vue.createVNode(VDefaultsProvider, {
+            }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
+              "key": "chip",
+              "closable": props.closableChips,
+              "size": "small",
+              "text": item.title
+            }, slotProps), null) : vue.createVNode(VDefaultsProvider, {
+              "key": "chip-defaults",
               "defaults": {
                 VChip: {
                   closable: props.closableChips,
@@ -9949,15 +10059,15 @@
                 }
               }
             }, {
-              default: () => [slots.chip ? slots.chip({
+              default: () => [slots.chip?.({
                 item,
                 index,
                 props: slotProps
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }) : slots.selection ? slots.selection({
+              })]
+            }) : slots.selection?.({
               item,
               index
-            }) : vue.createVNode("span", {
+            }) ?? vue.createVNode("span", {
               "class": "v-select__selection-text"
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-select__selection-comma"
@@ -10118,7 +10228,15 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.ref(false);
       const isPristine = vue.ref(true);
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const {
         items,
         transformIn,
@@ -10233,7 +10351,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -10260,6 +10378,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -10320,7 +10439,13 @@
             return vue.createVNode("div", {
               "key": item.value,
               "class": "v-autocomplete__selection"
-            }, [hasChips ? vue.createVNode(VDefaultsProvider, {
+            }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
+              "key": "chip",
+              "closable": props.closableChips,
+              "size": "small",
+              "text": item.title
+            }, slotProps), null) : vue.createVNode(VDefaultsProvider, {
+              "key": "chip-defaults",
               "defaults": {
                 VChip: {
                   closable: props.closableChips,
@@ -10329,15 +10454,15 @@
                 }
               }
             }, {
-              default: () => [slots.chip ? slots.chip({
+              default: () => [slots.chip?.({
                 item,
                 index,
                 props: slotProps
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }) : slots.selection ? slots.selection({
+              })]
+            }) : slots.selection?.({
               item,
               index
-            }) : vue.createVNode("span", {
+            }) ?? vue.createVNode("span", {
               "class": "v-autocomplete__selection-text"
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-autocomplete__selection-comma"
@@ -10538,7 +10663,8 @@
       });
       useRender(() => {
         const hasText = !!(props.text || slots.text);
-        const hasPrepend = !!(slots.prepend || props.avatar || props.icon);
+        const hasPrependMedia = !!(props.avatar || props.icon);
+        const hasPrepend = !!(hasPrependMedia || slots.prepend);
         return vue.createVNode(props.tag, {
           "class": ['v-banner', {
             'v-banner--stacked': props.stacked || mobile.value,
@@ -10548,8 +10674,18 @@
           "style": [dimensionStyles.value, locationStyles.value],
           "role": "banner"
         }, {
-          default: () => [hasPrepend && vue.createVNode(VDefaultsProvider, {
+          default: () => [hasPrepend && vue.createVNode("div", {
             "key": "prepend",
+            "class": "v-banner__prepend"
+          }, [!slots.prepend ? vue.createVNode(VAvatar, {
+            "key": "prepend-avatar",
+            "color": color.value,
+            "density": density.value,
+            "icon": props.icon,
+            "image": props.avatar
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !hasPrependMedia,
             "defaults": {
               VAvatar: {
                 color: color.value,
@@ -10558,19 +10694,15 @@
                 image: props.avatar
               }
             }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-banner__prepend"
-            }, [slots.prepend ? slots.prepend() : (props.avatar || props.icon) && vue.createVNode(VAvatar, null, null)])]
-          }), vue.createVNode("div", {
+          }, slots.prepend)]), vue.createVNode("div", {
             "class": "v-banner__content"
           }, [hasText && vue.createVNode(VBannerText, {
             "key": "text"
           }, {
-            default: () => [slots.text ? slots.text() : props.text]
-          }), slots.default?.()]), slots.actions && vue.createVNode(VBannerActions, null, {
-            default: () => [slots.actions()]
-          })]
+            default: () => [slots.text?.() ?? props.text]
+          }), slots.default?.()]), slots.actions && vue.createVNode(VBannerActions, {
+            "key": "actions"
+          }, slots.actions)]
         });
       });
     }
@@ -10636,6 +10768,9 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
       const isActive = vue.toRef(props, 'active');
       const {
@@ -10670,7 +10805,7 @@
           "style": [backgroundColorStyles.value, layoutItemStyles.value, {
             height: convertToUnit(height.value),
             transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-          }]
+          }, ssrBootStyles.value]
         }, {
           default: () => [slots.default && vue.createVNode("div", {
             "class": "v-bottom-navigation__content"
@@ -10800,19 +10935,23 @@
           "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
           "style": backgroundColorStyles.value
         }, {
-          default: () => [hasPrepend && vue.createVNode(VDefaultsProvider, {
+          default: () => [hasPrepend && vue.createVNode("div", {
             "key": "prepend",
+            "class": "v-breadcrumbs__prepend"
+          }, [!slots.prepend ? vue.createVNode(VIcon, {
+            "key": "prepend-icon",
+            "start": true,
+            "icon": props.icon
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "prepend-defaults",
+            "disabled": !props.icon,
             "defaults": {
               VIcon: {
                 icon: props.icon,
                 start: true
               }
             }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-breadcrumbs__prepend"
-            }, [slots.prepend ? slots.prepend() : props.icon && vue.createVNode(VIcon, null, null)])]
-          }), props.items.map((item, index, array) => vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
+          }, slots.prepend)]), props.items.map((item, index, array) => vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
             "key": index,
             "disabled": index >= array.length - 1
           }, typeof item === 'string' ? {
@@ -10876,30 +11015,33 @@
         slots
       } = _ref;
       useRender(() => {
-        const hasPrepend = !!(props.prependAvatar || props.prependIcon || slots.prepend);
-        const hasAppend = !!(props.appendAvatar || props.appendIcon || slots.append);
+        const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
+        const hasPrepend = !!(hasPrependMedia || slots.prepend);
+        const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
+        const hasAppend = !!(hasAppendMedia || slots.append);
         const hasTitle = !!(props.title || slots.title);
         const hasSubtitle = !!(props.subtitle || slots.subtitle);
         return vue.createVNode("div", {
           "class": "v-card-item"
-        }, [hasPrepend && vue.createVNode(VDefaultsProvider, {
+        }, [hasPrepend && vue.createVNode("div", {
           "key": "prepend",
+          "class": "v-card-item__prepend"
+        }, [!slots.prepend ? hasPrependMedia && vue.createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "density": props.density,
+          "icon": props.prependIcon,
+          "image": props.prependAvatar
+        }, null) : vue.createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !hasPrependMedia,
           "defaults": {
             VAvatar: {
               density: props.density,
               icon: props.prependIcon,
               image: props.prependAvatar
-            },
-            VIcon: {
-              density: props.density,
-              icon: props.prependIcon
             }
           }
-        }, {
-          default: () => [vue.createVNode("div", {
-            "class": "v-card-item__prepend"
-          }, [slots.prepend?.() ?? vue.createVNode(VAvatar, null, null)])]
-        }), vue.createVNode("div", {
+        }, slots.prepend)]), vue.createVNode("div", {
           "class": "v-card-item__content"
         }, [hasTitle && vue.createVNode(VCardTitle, {
           "key": "title"
@@ -10909,24 +11051,25 @@
           "key": "subtitle"
         }, {
           default: () => [slots.subtitle?.() ?? props.subtitle]
-        }), slots.default?.()]), hasAppend && vue.createVNode(VDefaultsProvider, {
+        }), slots.default?.()]), hasAppend && vue.createVNode("div", {
           "key": "append",
+          "class": "v-card-item__append"
+        }, [!slots.append ? hasAppendMedia && vue.createVNode(VAvatar, {
+          "key": "append-avatar",
+          "density": props.density,
+          "icon": props.appendIcon,
+          "image": props.appendAvatar
+        }, null) : vue.createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "disabled": !hasAppendMedia,
           "defaults": {
             VAvatar: {
               density: props.density,
               icon: props.appendIcon,
               image: props.appendAvatar
-            },
-            VIcon: {
-              density: props.density,
-              icon: props.appendIcon
             }
           }
-        }, {
-          default: () => [vue.createVNode("div", {
-            "class": "v-card-item__append"
-          }, [slots.append?.() ?? vue.createVNode(VAvatar, null, null)])]
-        })]);
+        }, slots.append)])]);
       });
       return {};
     }
@@ -11038,19 +11181,23 @@
           "onClick": isClickable.value && link.navigate,
           "tabindex": props.disabled ? -1 : undefined
         }, {
-          default: () => [hasImage && vue.createVNode(VDefaultsProvider, {
+          default: () => [hasImage && vue.createVNode("div", {
             "key": "image",
+            "class": "v-card__image"
+          }, [!slots.image ? vue.createVNode(VImg, {
+            "key": "image-img",
+            "cover": true,
+            "src": props.image
+          }, null) : vue.createVNode(VDefaultsProvider, {
+            "key": "image-defaults",
+            "disabled": !props.image,
             "defaults": {
               VImg: {
                 cover: true,
                 src: props.image
               }
             }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-card__image"
-            }, [slots.image?.() ?? vue.createVNode(VImg, null, null)])]
-          }), vue.createVNode(LoaderSlot, {
+          }, slots.image)]), vue.createVNode(LoaderSlot, {
             "name": "v-card",
             "active": !!props.loading,
             "color": typeof props.loading === 'boolean' ? undefined : props.loading
@@ -11360,25 +11507,6 @@
     }
   });
 
-  // Utilities
-
-  // Composables
-  function useSsrBoot() {
-    const isBooted = vue.ref(false);
-    vue.onMounted(() => {
-      window.requestAnimationFrame(() => {
-        isBooted.value = true;
-      });
-    });
-    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
-      transition: 'none !important'
-    } : undefined);
-    return {
-      ssrBootStyles,
-      isBooted: vue.readonly(isBooted)
-    };
-  }
-
   const VWindowItem = genericComponent()({
     name: 'VWindowItem',
     directives: {
@@ -11677,6 +11805,19 @@
         };
       });
       const canvasRef = vue.ref();
+      const canvasWidth = vue.ref(parseFloat(props.width));
+      const canvasHeight = vue.ref(parseFloat(props.height));
+      const {
+        resizeRef
+      } = useResizeObserver(entries => {
+        if (!resizeRef.value?.offsetParent) return;
+        const {
+          width,
+          height
+        } = entries[0].contentRect;
+        canvasWidth.value = width;
+        canvasHeight.value = height;
+      });
       function updateDotPosition(x, y, rect) {
         const {
           left,
@@ -11721,18 +11862,14 @@
           return;
         }
         if (!canvasRef.value) return;
-        const {
-          width,
-          height
-        } = canvasRef.value.getBoundingClientRect();
         const {
           x,
           y
         } = dotPosition.value;
         emit('update:color', {
           h: props.color?.h ?? 0,
-          s: clamp(x, 0, width) / width,
-          v: 1 - clamp(y, 0, height) / height,
+          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
+          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
           a: props.color?.a ?? 1
         });
       });
@@ -11755,16 +11892,27 @@
       vue.watch(() => props.color?.h, updateCanvas, {
         immediate: true
       });
+      vue.watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {
+        updateCanvas();
+        dotPosition.value = {
+          x: dotPosition.value.x * newVal[0] / oldVal[0],
+          y: dotPosition.value.y * newVal[1] / oldVal[1]
+        };
+      }, {
+        flush: 'post'
+      });
       vue.watch(() => props.color, () => {
         if (isInteracting.value) {
           isInteracting.value = false;
           return;
         }
-        if (!props.color) return;
         isOutsideUpdate.value = true;
-        dotPosition.value = {
-          x: props.color.s * parseInt(props.width, 10),
-          y: (1 - props.color.v) * parseInt(props.height, 10)
+        dotPosition.value = props.color ? {
+          x: props.color.s * canvasWidth.value,
+          y: (1 - props.color.v) * canvasHeight.value
+        } : {
+          x: 0,
+          y: 0
         };
       }, {
         deep: true,
@@ -11772,19 +11920,16 @@
       });
       vue.onMounted(() => updateCanvas());
       useRender(() => vue.createVNode("div", {
+        "ref": resizeRef,
         "class": "v-color-picker-canvas",
-        "style": {
-          width: convertToUnit(props.width),
-          height: convertToUnit(props.height)
-        },
         "onClick": handleClick,
         "onMousedown": handleMouseDown,
         "onTouchstart": handleMouseDown
       }, [vue.createVNode("canvas", {
         "ref": canvasRef,
-        "width": props.width,
-        "height": props.height
-      }, null), vue.createVNode("div", {
+        "width": canvasWidth.value,
+        "height": canvasHeight.value
+      }, null), props.color && vue.createVNode("div", {
         "class": ['v-color-picker-canvas__dot', {
           'v-color-picker-canvas__dot--disabled': props.disabled
         }],
@@ -11817,10 +11962,7 @@
         hsva = color;
       }
     }
-    return hsva != null ? {
-      ...hsva,
-      a: hsva.a ?? 1
-    } : null;
+    return hsva;
   }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
@@ -11840,7 +11982,7 @@
     if (typeof input === 'object') {
       let converted;
       if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color);else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color);else if (has(input, ['h', 's', 'v'])) converted = color;
-      return stripAlpha(converted, !has(input, ['a']));
+      return stripAlpha(converted, !has(input, ['a']) && color.a === 1);
     }
     return color;
   }
@@ -12031,7 +12173,7 @@
       const inputs = vue.computed(() => {
         const mode = enabledModes.value.find(m => m.name === props.mode);
         if (!mode) return [];
-        const color = props.color ? mode.to(props.color) : {};
+        const color = props.color ? mode.to(props.color) : null;
         return mode.inputs?.map(_ref3 => {
           let {
             getValue,
@@ -12042,11 +12184,11 @@
             ...mode.inputProps,
             ...inputProps,
             disabled: props.disabled,
-            value: getValue(color),
+            value: color && getValue(color),
             onChange: e => {
               const target = e.target;
               if (!target) return;
-              emit('update:color', mode.from(getColor(color, target.value)));
+              emit('update:color', mode.from(getColor(color ?? nullColor, target.value)));
             }
           };
         });
@@ -12157,10 +12299,7 @@
     const min = vue.computed(() => parseFloat(props.min));
     const max = vue.computed(() => parseFloat(props.max));
     const step = vue.computed(() => props.step > 0 ? parseFloat(props.step) : 0);
-    const decimals = vue.computed(() => {
-      const trimmedStep = step.value.toString().trim();
-      return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
-    });
+    const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     const thumbSize = vue.computed(() => parseInt(props.thumbSize, 10));
     const tickSize = vue.computed(() => parseInt(props.tickSize, 10));
     const trackSize = vue.computed(() => parseInt(props.trackSize, 10));
@@ -12259,7 +12398,9 @@
       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 parsedTicks = vue.computed(() => {
+      if (!showTicks.value) return [];
       if (!props.ticks) {
         return numTicks.value !== Infinity ? createRange(numTicks.value + 1).map(t => {
           const value = min.value + t * step.value;
@@ -12308,7 +12449,7 @@
       readonly: vue.toRef(props, 'readonly'),
       rounded: vue.toRef(props, 'rounded'),
       roundValue,
-      showTicks: vue.toRef(props, 'showTicks'),
+      showTicks,
       startOffset,
       step,
       thumbSize,
@@ -12530,6 +12671,7 @@
         };
       });
       const computedTicks = vue.computed(() => {
+        if (!showTicks.value) return [];
         const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
         return ticks.map((tick, index) => {
           const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
@@ -12745,12 +12887,12 @@
         "hideDetails": true
       }, null), !props.hideAlpha && vue.createVNode(VSlider, {
         "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
-        "modelValue": props.color?.a,
+        "modelValue": props.color?.a ?? 1,
         "onUpdate:modelValue": a => emit('update:color', {
           ...(props.color ?? nullColor),
           a
         }),
-        "step": 0,
+        "step": 1 / 256,
         "min": 0,
         "max": 1,
         "disabled": props.disabled,
@@ -13135,18 +13277,21 @@
     }
   });
 
+  const makeVSheetProps = propsFactory({
+    color: String,
+    ...makeBorderProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  }, 'v-sheet');
   const VSheet = genericComponent()({
     name: 'VSheet',
     props: {
-      color: String,
-      ...makeBorderProps(),
-      ...makeDimensionProps(),
-      ...makeElevationProps(),
-      ...makeLocationProps(),
-      ...makePositionProps(),
-      ...makeRoundedProps(),
-      ...makeTagProps(),
-      ...makeThemeProps()
+      ...makeVSheetProps()
     },
     setup(props, _ref) {
       let {
@@ -13177,10 +13322,11 @@
       const {
         roundedClasses
       } = useRounded(props);
-      return () => vue.createVNode(props.tag, {
+      useRender(() => vue.createVNode(props.tag, {
         "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
         "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
-      }, slots);
+      }, slots));
+      return {};
     }
   });
 
@@ -13257,6 +13403,13 @@
       vue.onMounted(() => {
         if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
       });
+      provideDefaults({
+        VSlider: {
+          color: undefined,
+          trackColor: undefined,
+          trackFillColor: undefined
+        }
+      });
       useRender(() => vue.createVNode(VSheet, {
         "rounded": props.rounded,
         "elevation": props.elevation,
@@ -13357,7 +13510,15 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.ref(false);
       const isPristine = vue.ref(true);
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const selectionIndex = vue.ref(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
@@ -13540,7 +13701,7 @@
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
-        const [textFieldProps] = filterVTextFieldProps(props);
+        const [textFieldProps] = VTextField.filterProps(props);
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -13566,6 +13727,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -13627,7 +13789,13 @@
               "key": item.value,
               "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
               "style": index === selectionIndex.value ? textColorStyles.value : {}
-            }, [hasChips ? vue.createVNode(VDefaultsProvider, {
+            }, [hasChips ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
+              "key": "chip",
+              "closable": props.closableChips,
+              "size": "small",
+              "text": item.title
+            }, slotProps), null) : vue.createVNode(VDefaultsProvider, {
+              "key": "chip-defaults",
               "defaults": {
                 VChip: {
                   closable: props.closableChips,
@@ -13636,15 +13804,15 @@
                 }
               }
             }, {
-              default: () => [slots.chip ? slots.chip({
+              default: () => [slots.chip?.({
                 item,
                 index,
                 props: slotProps
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }) : slots.selection ? slots.selection({
+              })]
+            }) : slots.selection?.({
               item,
               index
-            }) : vue.createVNode("span", {
+            }) ?? vue.createVNode("span", {
               "class": "v-combobox__selection-text"
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-combobox__selection-comma"
@@ -13741,7 +13909,7 @@
         'aria-expanded': String(isActive.value)
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-dialog', {
@@ -14145,6 +14313,7 @@
               "id": id.value,
               "active": isDirty.value || isFocused.value,
               "dirty": isDirty.value,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -14344,10 +14513,8 @@
 
   // Types
 
-  const breakpoints$1 = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
   const breakpointProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
+    return breakpoints.reduce((props, val) => {
       props[val] = {
         type: [Boolean, String, Number],
         default: false
@@ -14356,8 +14523,9 @@
     }, {});
   })();
   const offsetProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
-      props['offset' + vue.capitalize(val)] = {
+    return breakpoints.reduce((props, val) => {
+      const offsetKey = 'offset' + vue.capitalize(val);
+      props[offsetKey] = {
         type: [String, Number],
         default: null
       };
@@ -14365,8 +14533,9 @@
     }, {});
   })();
   const orderProps = (() => {
-    return breakpoints$1.reduce((props, val) => {
-      props['order' + vue.capitalize(val)] = {
+    return breakpoints.reduce((props, val) => {
+      const orderKey = 'order' + vue.capitalize(val);
+      props[orderKey] = {
         type: [String, Number],
         default: null
       };
@@ -14464,13 +14633,12 @@
 
   // Types
 
-  const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
-
   const ALIGNMENT = ['start', 'end', 'center'];
   const SPACE = ['space-between', 'space-around', 'space-evenly'];
   function makeRowProps(prefix, def) {
     return breakpoints.reduce((props, val) => {
-      props[prefix + vue.capitalize(val)] = def();
+      const prefixKey = prefix + vue.capitalize(val);
+      props[prefixKey] = def();
       return props;
     }, {});
   }
@@ -14800,7 +14968,10 @@
         }, {
           default: () => [slots.default?.()]
         })]
-      }), [[vue.resolveDirective("intersect"), onIntersect, props.options]]));
+      }), [[vue.resolveDirective("intersect"), {
+        handler: onIntersect,
+        options: props.options
+      }, null]]));
       return {};
     }
   });
@@ -15777,9 +15948,9 @@
         frame = requestAnimationFrame(() => {
           const el = (root.value?.$el).querySelector('.v-img__img');
           if (!el) return;
-          const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight;
-          const scrollPos = scrollParent.scrollTop ?? window.scrollY;
-          const top = intersectionRef.value.offsetTop;
+          const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight;
+          const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop;
+          const top = intersectionRef.value.getBoundingClientRect().top + scrollPos;
           const height = contentRect.value.height;
           const center = top + (height - scrollHeight) / 2;
           const translate = floor((scrollPos - center) * scale.value);
@@ -15861,10 +16032,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [controlProps, _2] = filterControlProps({
-          ...props,
-          multiple: false
-        });
+        const [controlProps, _2] = VSelectionControl.filterProps(props);
         const label = slots.label ? slots.label({
           label: props.label,
           props: {
@@ -15899,7 +16067,8 @@
               "type": props.type,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value,
-              "aria-labelledby": label ? id.value : undefined
+              "aria-labelledby": label ? id.value : undefined,
+              "multiple": false
             }, controlAttrs, {
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event
@@ -16164,9 +16333,6 @@
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
       const hoverIndex = vue.ref(-1);
-      const focusIndex = vue.ref(-1);
-      const firstRef = vue.ref();
-      let isClicking = false;
       const itemState = vue.computed(() => increments.value.map(value => {
         const isHovering = props.hover && hoverIndex.value > -1;
         const isFilled = normalizedValue.value >= value;
@@ -16189,16 +16355,6 @@
         function onMouseleave() {
           hoverIndex.value = -1;
         }
-        function onFocus() {
-          if (value === 0 && normalizedValue.value === 0) {
-            firstRef.value?.focus();
-          } else {
-            focusIndex.value = value;
-          }
-        }
-        function onBlur() {
-          if (!isClicking) focusIndex.value = -1;
-        }
         function onClick() {
           if (props.disabled || props.readonly) return;
           rating.value = normalizedValue.value === value && props.clearable ? 0 : value;
@@ -16206,17 +16362,9 @@
         return {
           onMouseenter: props.hover ? onMouseenter : undefined,
           onMouseleave: props.hover ? onMouseleave : undefined,
-          onFocus,
-          onBlur,
           onClick
         };
       }));
-      function onMousedown() {
-        isClicking = true;
-      }
-      function onMouseup() {
-        isClicking = false;
-      }
       const name = vue.computed(() => props.name ?? `v-rating-${getUid()}`);
       function VRatingItem(_ref2) {
         let {
@@ -16227,8 +16375,6 @@
         const {
           onMouseenter,
           onMouseleave,
-          onFocus,
-          onBlur,
           onClick
         } = eventState.value[index + 1];
         const id = `${name.value}-${String(value).replace('.', '-')}`;
@@ -16239,7 +16385,6 @@
           icon: itemState.value[index]?.icon,
           ripple: props.ripple,
           size: props.size,
-          tag: 'span',
           variant: 'plain'
         };
         return vue.createVNode(vue.Fragment, null, [vue.createVNode("label", {
@@ -16248,17 +16393,17 @@
             'v-rating__item--half': props.halfIncrements && value % 1 > 0,
             'v-rating__item--full': props.halfIncrements && value % 1 === 0
           },
-          "onMousedown": onMousedown,
-          "onMouseup": onMouseup,
           "onMouseenter": onMouseenter,
-          "onMouseleave": onMouseleave
+          "onMouseleave": onMouseleave,
+          "onClick": onClick
         }, [vue.createVNode("span", {
           "class": "v-rating__hidden"
         }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
           ...itemState.value[index],
           props: btnProps,
           value,
-          index
+          index,
+          rating: normalizedValue.value
         }) : vue.createVNode(VBtn, btnProps, null)]), vue.createVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
@@ -16266,10 +16411,7 @@
           "type": "radio",
           "value": value,
           "checked": normalizedValue.value === value,
-          "onClick": onClick,
-          "onFocus": onFocus,
-          "onBlur": onBlur,
-          "ref": index === 0 ? firstRef : undefined,
+          "tabindex": -1,
           "readonly": props.readonly,
           "disabled": props.disabled
         }, null)]);
@@ -16298,9 +16440,7 @@
             index: i,
             label: props.itemLabels?.[i]
           }) : undefined, vue.createVNode("div", {
-            "class": ['v-rating__item', {
-              'v-rating__item--focused': Math.ceil(focusIndex.value) === value
-            }]
+            "class": "v-rating__item"
           }, [props.halfIncrements ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
             "value": value - 0.5,
             "index": i * 2
@@ -16769,7 +16909,7 @@
         window.clearTimeout(activeTimeout);
       }
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-snackbar', {
@@ -16781,19 +16921,18 @@
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
           "contentProps": vue.mergeProps({
-            style: locationStyles.value
+            class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
+            style: [locationStyles.value, colorStyles.value],
+            onPointerenter,
+            onPointerleave: startTimeout
           }, overlayProps.contentProps),
           "persistent": true,
           "noClickAnimation": true,
           "scrim": false,
-          "scrollStrategy": "none"
+          "scrollStrategy": "none",
+          "_disableGlobalStack": true
         }, scopeId), {
-          default: () => [vue.createVNode("div", {
-            "class": ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-            "style": [colorStyles.value],
-            "onPointerenter": onPointerenter,
-            "onPointerleave": startTimeout
-          }, [genOverlays(false, 'v-snackbar'), slots.default && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), slots.default && vue.createVNode("div", {
             "class": "v-snackbar__content",
             "role": "status",
             "aria-live": "polite"
@@ -16808,7 +16947,7 @@
             default: () => [vue.createVNode("div", {
               "class": "v-snackbar__actions"
             }, [slots.actions()])]
-          })])],
+          })],
           activator: slots.activator
         });
       });
@@ -16865,7 +17004,7 @@
       useRender(() => {
         const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
         const [inputProps, _1] = filterInputProps(props);
-        const [controlProps, _2] = filterControlProps(props);
+        const [controlProps, _2] = VSelectionControl.filterProps(props);
         const control = vue.ref();
         function onClick() {
           control.value?.input?.click();
@@ -16967,6 +17106,9 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const height = vue.computed(() => props.height ?? (props.window ? 32 : 24));
       const {
         layoutItemStyles
@@ -16983,7 +17125,7 @@
         "class": ['v-system-bar', {
           'v-system-bar--window': props.window
         }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
       }, slots));
       return {};
     }
@@ -16995,28 +17137,17 @@
     name: 'VTab',
     props: {
       fixed: Boolean,
-      icon: [Boolean, String, Function, Object],
-      prependIcon: IconValue,
-      appendIcon: IconValue,
-      stacked: Boolean,
       title: String,
-      ripple: {
-        type: Boolean,
-        default: true
-      },
-      color: String,
       sliderColor: String,
       hideSlider: Boolean,
       direction: {
         type: String,
         default: 'horizontal'
       },
-      ...makeTagProps(),
-      ...makeRouterProps(),
-      ...makeGroupItemProps({
-        selectedClass: 'v-tab--selected'
-      }),
-      ...makeThemeProps()
+      ...omit(makeVBtnProps({
+        selectedClass: 'v-tab--selected',
+        variant: 'text'
+      }), ['active', 'block', 'flat', 'location', 'position', 'symbol'])
     },
     setup(props, _ref) {
       let {
@@ -17066,7 +17197,7 @@
         }
       }
       useRender(() => {
-        const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
+        const [btnProps] = VBtn.filterProps(props);
         return vue.createVNode(VBtn, vue.mergeProps({
           "_as": "VTab",
           "symbol": VTabsSymbol,
@@ -17078,7 +17209,6 @@
           "active": false,
           "block": props.fixed,
           "maxWidth": props.fixed ? 300 : undefined,
-          "variant": "text",
           "rounded": 0
         }, btnProps, attrs, {
           "onGroup:selected": updateSlider
@@ -17323,7 +17453,13 @@
         });
       }
       function onInput(e) {
-        model.value = e.target.value;
+        const el = e.target;
+        const caretPosition = [el.selectionStart, el.selectionEnd];
+        model.value = el.value;
+        vue.nextTick(() => {
+          el.selectionStart = caretPosition[0];
+          el.selectionEnd = caretPosition[1];
+        });
       }
       const sizerRef = vue.ref();
       function calculateInputHeight() {
@@ -17407,6 +17543,7 @@
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
               "dirty": isDirty.value || props.dirty,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -17609,13 +17746,6 @@
         backgroundColorClasses: lineColorClasses,
         backgroundColorStyles: lineColorStyles
       } = useBackgroundColor(vue.toRef(props, 'lineColor'));
-      provideDefaults({
-        VIcon: {
-          color: vue.toRef(props, 'iconColor'),
-          icon: vue.toRef(props, 'icon'),
-          size: vue.toRef(props, 'size')
-        }
-      });
       useRender(() => vue.createVNode("div", {
         "class": ['v-timeline-divider', {
           'v-timeline-divider--fill-dot': props.fillDot
@@ -17630,7 +17760,22 @@
       }, [vue.createVNode("div", {
         "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
         "style": backgroundColorStyles.value
-      }, [slots.default?.() ?? (props.icon ? vue.createVNode(VIcon, null, null) : undefined)])]), vue.createVNode("div", {
+      }, [!slots.default ? vue.createVNode(VIcon, {
+        "key": "icon",
+        "color": props.iconColor,
+        "icon": props.icon,
+        "size": props.size
+      }, null) : vue.createVNode(VDefaultsProvider, {
+        "key": "icon-defaults",
+        "disabled": !props.icon,
+        "defaults": {
+          VIcon: {
+            color: props.iconColor,
+            icon: props.icon,
+            size: props.size
+          }
+        }
+      }, slots.default)])]), vue.createVNode("div", {
         "class": ['v-timeline-divider__after', lineColorClasses.value],
         "style": lineColorStyles.value
       }, null)]));
@@ -17716,6 +17861,7 @@
         closeOnBack: false,
         location: 'end',
         locationStrategy: 'connected',
+        eager: true,
         minWidth: 0,
         offset: 10,
         openOnClick: false,
@@ -17724,7 +17870,7 @@
         scrim: false,
         scrollStrategy: 'reposition',
         transition: false
-      }), ['absolute', 'persistent', 'eager'])
+      }), ['absolute', 'persistent'])
     },
     emits: {
       'update:modelValue': value => true
@@ -17754,7 +17900,7 @@
         'aria-describedby': id.value
       }, props.activatorProps));
       useRender(() => {
-        const [overlayProps] = filterVOverlayProps(props);
+        const [overlayProps] = VOverlay.filterProps(props);
         return vue.createVNode(VOverlay, vue.mergeProps({
           "ref": overlay,
           "class": ['v-tooltip'],
@@ -17768,7 +17914,6 @@
           "origin": origin.value,
           "persistent": true,
           "role": "tooltip",
-          "eager": true,
           "activatorProps": activatorProps.value,
           "_disableGlobalStack": true
         }, scopeId), {
@@ -18001,7 +18146,7 @@
     }
   }, 'v-data-table-select');
   const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
-  function createSelection(props, allItems) {
+  function provideSelection(props, allItems) {
     const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
       return new Set(v);
     }, v => {
@@ -18061,13 +18206,28 @@
   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');
+    return {
+      sortBy,
+      mustSort,
+      multiSort
+    };
+  }
+  function provideSort(options) {
+    const {
+      sortBy,
+      mustSort,
+      multiSort,
+      page
+    } = options;
     const toggleSort = key => {
       let newSortBy = sortBy.value.map(x => ({
         ...x
       })) ?? [];
       const item = newSortBy.find(x => x.key === key);
       if (!item) {
-        if (props.multiSort) newSortBy = [...newSortBy, {
+        if (multiSort.value) newSortBy = [...newSortBy, {
           key,
           order: 'asc'
         }];else newSortBy = [{
@@ -18075,7 +18235,7 @@
           order: 'asc'
         }];
       } else if (item.order === 'desc') {
-        if (props.mustSort) {
+        if (mustSort.value) {
           item.order = 'asc';
         } else {
           newSortBy = newSortBy.filter(x => x.key !== key);
@@ -18084,6 +18244,7 @@
         item.order = 'desc';
       }
       sortBy.value = newSortBy;
+      if (page) page.value = 1;
     };
     const data = {
       sortBy,
@@ -18286,9 +18447,6 @@
   });
 
   // Utilities
-
-  // Types
-
   const makeDataTableGroupProps = propsFactory({
     groupBy: {
       type: Array,
@@ -18296,7 +18454,17 @@
     }
   }, 'data-table-group');
   const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
-  function createGroupBy(props, groupBy, sortBy) {
+  function createGroupBy(props) {
+    const groupBy = useProxiedModel(props, 'groupBy');
+    return {
+      groupBy
+    };
+  }
+  function provideGroupBy(options) {
+    const {
+      groupBy,
+      sortBy
+    } = options;
     const opened = vue.ref(new Set());
     const sortByWithGroups = vue.computed(() => {
       return groupBy.value.map(val => ({
@@ -18506,7 +18674,7 @@
     }
   }, 'v-data-table-expand');
   const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
-  function createExpanded(props) {
+  function provideExpanded(props) {
     const expandOnClick = vue.toRef(props, 'expandOnClick');
     const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
       return new Set(v);
@@ -18549,7 +18717,9 @@
   const VDataTableRow = defineComponent({
     name: 'VDataTableRow',
     props: {
-      item: Object
+      index: Number,
+      item: Object,
+      onClick: Function
     },
     setup(props, _ref) {
       let {
@@ -18567,7 +18737,10 @@
         columns
       } = useHeaders();
       useRender(() => vue.createVNode("tr", {
-        "class": ['v-data-table__tr']
+        "class": ['v-data-table__tr', {
+          'v-data-table__tr--clickable': !!props.onClick
+        }],
+        "onClick": props.onClick
       }, [!columns.value.length && vue.createVNode(VDataTableColumn, {
         "key": "no-data"
       }, slots), props.item && columns.value.map((column, i) => vue.createVNode(VDataTableColumn, {
@@ -18582,6 +18755,7 @@
           const item = props.item;
           const slotName = `item.${column.key}`;
           const slotProps = {
+            index: props.index,
             item: props.item,
             columns: columns.value,
             isSelected,
@@ -18685,7 +18859,7 @@
             "item": item
           }, slots);
         }
-        return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item({
+        const slotProps = {
           index,
           item,
           columns: columns.value,
@@ -18693,21 +18867,20 @@
           toggleExpand,
           isSelected,
           toggleSelect
-        }) : vue.createVNode(VDataTableRow, {
+        };
+        return vue.createVNode(vue.Fragment, null, [slots.item ? slots.item(slotProps) : vue.createVNode(VDataTableRow, {
           "key": `item_${item.value}`,
           "onClick": event => {
             if (expandOnClick.value) {
-              toggleExpand(item.value);
+              toggleExpand(item);
             }
             emit('click:row', event, {
               item
             });
           },
+          "index": index,
           "item": item
-        }, slots), isExpanded(item) && slots['expanded-row']?.({
-          item,
-          columns: columns.value
-        })]);
+        }, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
       })]));
       return {};
     }
@@ -18728,10 +18901,20 @@
     }
   }, 'v-data-table-paginate');
   const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
-  function createPagination(props, items) {
+  function createPagination(props) {
     const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1));
     const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10));
-    const itemsLength = vue.computed(() => +(props.itemsLength ?? items.value.length));
+    return {
+      page,
+      itemsPerPage
+    };
+  }
+  function providePagination(options) {
+    const {
+      page,
+      itemsPerPage,
+      itemsLength
+    } = options;
     const startIndex = vue.computed(() => {
       if (itemsPerPage.value === -1) return 0;
       return itemsPerPage.value * (page.value - 1);
@@ -18744,13 +18927,18 @@
       if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
+    function setItemsPerPage(value) {
+      itemsPerPage.value = value;
+      page.value = 1;
+    }
     const data = {
       page,
       itemsPerPage,
+      itemsLength,
       startIndex,
       stopIndex,
       pageCount,
-      itemsLength
+      setItemsPerPage
     };
     vue.provide(VDataTablePaginationSymbol, data);
     return data;
@@ -18760,7 +18948,13 @@
     if (!data) throw new Error('Missing pagination!');
     return data;
   }
-  function usePaginatedItems(items, startIndex, stopIndex, itemsPerPage) {
+  function usePaginatedItems(options) {
+    const {
+      items,
+      startIndex,
+      stopIndex,
+      itemsPerPage
+    } = options;
     const paginatedItems = vue.computed(() => {
       if (itemsPerPage.value <= 0) return items.value;
       return items.value.slice(startIndex.value, stopIndex.value);
@@ -18849,7 +19043,8 @@
         startIndex,
         stopIndex,
         itemsLength,
-        itemsPerPage
+        itemsPerPage,
+        setItemsPerPage
       } = usePagination();
       const itemsPerPageOptions = vue.computed(() => props.itemsPerPageOptions.map(option => ({
         ...option,
@@ -18862,7 +19057,7 @@
       }, [vue.createVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
         "items": itemsPerPageOptions.value,
         "modelValue": itemsPerPage.value,
-        "onUpdate:modelValue": v => itemsPerPage.value = Number(v),
+        "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
         "density": "compact",
         "variant": "outlined",
         "hide-details": true
@@ -18940,7 +19135,8 @@
       page,
       itemsPerPage,
       sortBy,
-      groupBy
+      groupBy,
+      search
     } = _ref;
     const vm = getCurrentInstance('VDataTable');
     const options = vue.computed(() => ({
@@ -18950,15 +19146,8 @@
       groupBy: groupBy.value
     }));
 
-    // Reset page when sorting changes
-    vue.watch(sortBy, () => {
-      page.value = 1;
-    }, {
-      deep: true
-    });
-
-    // Reset page when items-per-page changes
-    vue.watch(itemsPerPage, () => {
+    // Reset page when searching
+    vue.watch(() => search?.value, () => {
       page.value = 1;
     });
     let oldOptions = null;
@@ -19014,7 +19203,18 @@
         emit,
         slots
       } = _ref;
-      const groupBy = useProxiedModel(props, 'groupBy');
+      const {
+        groupBy
+      } = createGroupBy(props);
+      const {
+        sortBy,
+        multiSort,
+        mustSort
+      } = createSort(props);
+      const {
+        page,
+        itemsPerPage
+      } = createPagination(props);
       const {
         columns
       } = createHeaders(props, {
@@ -19026,42 +19226,58 @@
         items
       } = useDataTableItems(props, columns);
       const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
+      const search = vue.toRef(props, 'search');
       const {
         filteredItems
-      } = useFilter(props, items, vue.toRef(props, 'search'), {
+      } = useFilter(props, items, search, {
         filterKeys
       });
-      const {
-        sortBy
-      } = createSort(props);
+      provideSort({
+        sortBy,
+        multiSort,
+        mustSort,
+        page
+      });
       const {
         sortByWithGroups,
         opened,
         extractRows
-      } = createGroupBy(props, groupBy, sortBy);
+      } = provideGroupBy({
+        groupBy,
+        sortBy
+      });
       const {
         sortedItems
       } = useSortedItems(filteredItems, sortByWithGroups, columns);
       const {
         flatItems
       } = useGroupedItems(sortedItems, groupBy, opened);
+      const itemsLength = vue.computed(() => flatItems.value.length);
       const {
-        page,
-        itemsPerPage,
         startIndex,
         stopIndex
-      } = createPagination(props, flatItems);
+      } = providePagination({
+        page,
+        itemsPerPage,
+        itemsLength
+      });
       const {
         paginatedItems
-      } = usePaginatedItems(flatItems, startIndex, stopIndex, itemsPerPage);
+      } = usePaginatedItems({
+        items: flatItems,
+        startIndex,
+        stopIndex,
+        itemsPerPage
+      });
       const paginatedItemsWithoutGroups = vue.computed(() => extractRows(paginatedItems.value));
-      createSelection(props, paginatedItemsWithoutGroups);
-      createExpanded(props);
+      provideSelection(props, paginatedItemsWithoutGroups);
+      provideExpanded(props);
       useOptions({
         page,
         itemsPerPage,
         sortBy,
-        groupBy
+        groupBy,
+        search
       });
       provideDefaults({
         VDataTableRows: {
@@ -19203,7 +19419,14 @@
         emit,
         slots
       } = _ref;
-      const groupBy = useProxiedModel(props, 'groupBy');
+      const {
+        groupBy
+      } = createGroupBy(props);
+      const {
+        sortBy,
+        multiSort,
+        mustSort
+      } = createSort(props);
       const {
         columns
       } = createHeaders(props, {
@@ -19215,19 +19438,25 @@
         items
       } = useDataTableItems(props, columns);
       const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
+      const search = vue.toRef(props, 'search');
       const {
         filteredItems
-      } = useFilter(props, items, vue.toRef(props, 'search'), {
+      } = useFilter(props, items, search, {
         filterKeys
       });
-      const {
-        sortBy
-      } = createSort(props);
+      provideSort({
+        sortBy,
+        multiSort,
+        mustSort
+      });
       const {
         sortByWithGroups,
         opened,
         extractRows
-      } = createGroupBy(props, groupBy, sortBy);
+      } = provideGroupBy({
+        groupBy,
+        sortBy
+      });
       const {
         sortedItems
       } = useSortedItems(filteredItems, sortByWithGroups, columns);
@@ -19235,8 +19464,8 @@
         flatItems
       } = useGroupedItems(sortedItems, groupBy, opened);
       const allRows = vue.computed(() => extractRows(flatItems.value));
-      createSelection(props, allRows);
-      createExpanded(props);
+      provideSelection(props, allRows);
+      provideExpanded(props);
       const {
         containerRef,
         paddingTop,
@@ -19253,7 +19482,8 @@
         sortBy,
         page: vue.ref(1),
         itemsPerPage: vue.ref(-1),
-        groupBy
+        groupBy,
+        search
       });
       provideDefaults({
         VDataTableRows: {
@@ -19322,7 +19552,10 @@
         type: String,
         default: '$vuetify.dataIterator.loadingText'
       },
-      itemsLength: [Number, String],
+      itemsLength: {
+        type: [Number, String],
+        required: true
+      },
       ...makeVDataTableProps(),
       ...makeDataTableExpandProps(),
       ...makeDataTableHeaderProps(),
@@ -19347,8 +19580,20 @@
         emit,
         slots
       } = _ref;
-      const groupBy = useProxiedModel(props, 'groupBy');
-      createExpanded(props);
+      const {
+        groupBy
+      } = createGroupBy(props);
+      const {
+        sortBy,
+        multiSort,
+        mustSort
+      } = createSort(props);
+      const {
+        page,
+        itemsPerPage
+      } = createPagination(props);
+      const itemsLength = vue.computed(() => parseInt(props.itemsLength, 10));
+      provideExpanded(props);
       const {
         columns
       } = createHeaders(props, {
@@ -19360,20 +19605,28 @@
         items
       } = useDataTableItems(props, columns);
       const {
-        sortBy,
         toggleSort
-      } = createSort(props);
+      } = provideSort({
+        sortBy,
+        multiSort,
+        mustSort,
+        page
+      });
       const {
         opened
-      } = createGroupBy(props, groupBy, sortBy);
-      const {
+      } = provideGroupBy({
+        groupBy,
+        sortBy
+      });
+      providePagination({
         page,
-        itemsPerPage
-      } = createPagination(props, items);
+        itemsPerPage,
+        itemsLength
+      });
       const {
         flatItems
       } = useGroupedItems(items, groupBy, opened);
-      createSelection(props, items);
+      provideSelection(props, items);
       useOptions({
         page,
         itemsPerPage,
@@ -19408,7 +19661,7 @@
           "sticky": props.fixedHeader,
           "loading": props.loading,
           "color": props.color
-        }, null)]), slots.thead?.(), vue.createVNode("tbody", {
+        }, slots)]), slots.thead?.(), vue.createVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
@@ -19493,13 +19746,15 @@
         resizeRef.value = rootEl.value;
       });
       const display = useDisplay();
-      const sizes = createRange(props.items.length).map(() => itemHeight.value);
+      const sizeMap = new Map();
+      let sizes = createRange(props.items.length).map(() => itemHeight.value);
       const visibleItems = vue.computed(() => {
         return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
       });
       function handleItemResize(index, height) {
         itemHeight.value = Math.max(itemHeight.value, height);
         sizes[index] = height;
+        sizeMap.set(props.items[index], height);
       }
       function calculateOffset(index) {
         return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
@@ -19529,9 +19784,9 @@
         const midPointIndex = calculateMidPointIndex(scrollTop + height / 2);
         const buffer = Math.round(visibleItems.value / 3);
         if (direction === UP && midPointIndex <= first.value + buffer * 2 - 1) {
-          first.value = Math.max(midPointIndex - buffer, 0);
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length);
         } else if (direction === DOWN && midPointIndex >= first.value + buffer * 2 - 1) {
-          first.value = Math.min(Math.max(0, midPointIndex - buffer), props.items.length - visibleItems.value);
+          first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value);
         }
         lastScrollTop = rootEl.value.scrollTop;
       }
@@ -19553,6 +19808,17 @@
           itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / visibleItems.value;
         }
       });
+      vue.watch(() => props.items.length, () => {
+        sizes = createRange(props.items.length).map(() => itemHeight.value);
+        sizeMap.forEach((height, item) => {
+          const index = props.items.indexOf(item);
+          if (index === -1) {
+            sizeMap.delete(item);
+          } else {
+            sizes[index] = height;
+          }
+        });
+      });
       useRender(() => vue.createVNode("div", {
         "ref": rootEl,
         "class": "v-virtual-scroll",
@@ -19931,7 +20197,7 @@
       locale
     };
   }
-  const version$1 = "3.2.0-dev-20230214.0";
+  const version$1 = "3.2.0-dev-20230322.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19943,7 +20209,7 @@
     }
   }
 
-  const version = "3.2.0-dev-20230214.0";
+  const version = "3.2.0-dev-20230322.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};