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

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230309.0
+* Vuetify v3.2.0-dev-20230322.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -203,6 +203,10 @@ function clamp(value) {
   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));
@@ -485,7 +489,14 @@ function animate(el, keyframes, options) {
   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 = () => {
@@ -949,6 +960,8 @@ function provideDefaults(defaults, options) {
   const injectedDefaults = useDefaults();
   const providedDefaults = ref(defaults);
   const newDefaults = computed(() => {
+    const disabled = unref(options?.disabled);
+    if (disabled) return injectedDefaults.value;
     const scoped = unref(options?.scoped);
     const reset = unref(options?.reset);
     const root = unref(options?.root);
@@ -1003,15 +1016,22 @@ function useToggleScope(source, fn) {
 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();
@@ -1022,10 +1042,11 @@ const defineComponent = function defineComponent(options) {
       const componentDefaults = 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 = shallowRef();
@@ -1050,7 +1071,7 @@ const defineComponent = function defineComponent(options) {
     };
   }
   return options;
-};
+}
 // Implementation
 function genericComponent() {
   let exposeDefaults = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -2153,6 +2174,7 @@ const VDefaultsProvider = genericComponent(false)({
   name: 'VDefaultsProvider',
   props: {
     defaults: Object,
+    disabled: Boolean,
     reset: [Number, String],
     root: Boolean,
     scoped: Boolean
@@ -2163,6 +2185,7 @@ const VDefaultsProvider = genericComponent(false)({
     } = _ref;
     const {
       defaults,
+      disabled,
       reset,
       root,
       scoped
@@ -2170,7 +2193,8 @@ const VDefaultsProvider = genericComponent(false)({
     provideDefaults(defaults, {
       reset,
       root,
-      scoped
+      scoped,
+      disabled
     });
     return () => slots.default?.();
   }
@@ -2792,7 +2816,7 @@ const VImg = genericComponent()({
         "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,
@@ -2814,7 +2838,7 @@ const VImg = genericComponent()({
       default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
         "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
         "src": normalisedSrc.value.lazySrc,
-        "alt": ""
+        "alt": props.alt
       }, null)]
     });
     const __placeholder = () => {
@@ -3156,16 +3180,20 @@ const VToolbar = genericComponent()({
         default: () => [hasImage && createVNode("div", {
           "key": "image",
           "class": "v-toolbar__image"
-        }, [createVNode(VDefaultsProvider, {
+        }, [!slots.image ? createVNode(VImg, {
+          "key": "image-img",
+          "cover": true,
+          "src": props.image
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "image-defaults",
+          "disabled": !props.image,
           "defaults": {
             VImg: {
               cover: true,
               src: props.image
             }
           }
-        }, {
-          default: () => [slots.image ? slots.image?.() : createVNode(VImg, null, null)]
-        })]), createVNode(VDefaultsProvider, {
+        }, slots.image)]), createVNode(VDefaultsProvider, {
           "defaults": {
             VTabs: {
               height: convertToUnit(contentHeight.value)
@@ -3211,9 +3239,6 @@ const VToolbar = genericComponent()({
     };
   }
 });
-function filterToolbarProps(props) {
-  return pick(props, Object.keys(VToolbar?.props ?? {}));
-}
 
 // Utilities
 
@@ -3291,7 +3316,7 @@ const VAppBar = genericComponent()({
       absolute: toRef(props, 'absolute')
     });
     useRender(() => {
-      const [toolbarProps] = filterToolbarProps(props);
+      const [toolbarProps] = VToolbar.filterProps(props);
       return createVNode(VToolbar, mergeProps({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
@@ -3382,8 +3407,6 @@ function useVariant(props) {
   };
 }
 
-// Types
-
 const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
@@ -3434,9 +3457,6 @@ const VBtnGroup = genericComponent()({
     });
   }
 });
-function filterVBtnGroupProps(props) {
-  return pick(props, Object.keys(VBtnGroup.props));
-}
 
 // Composables
 
@@ -3663,7 +3683,7 @@ const VBtnToggle = genericComponent()({
       selected
     } = useGroup(props, VBtnToggleSymbol);
     useRender(() => {
-      const [btnGroupProps] = filterVBtnGroupProps(props);
+      const [btnGroupProps] = VBtnGroup.filterProps(props);
       return createVNode(VBtnGroup, mergeProps({
         "class": "v-btn-toggle"
       }, btnGroupProps), {
@@ -4751,49 +4771,50 @@ function useSelectLink(link, select) {
 
 // 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
   },
@@ -4886,43 +4907,49 @@ const VBtn = genericComponent()({
         },
         "value": valueAttr.value
       }, {
-        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode(VDefaultsProvider, {
+        default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode("span", {
           "key": "prepend",
+          "class": "v-btn__prepend"
+        }, [!slots.prepend ? createVNode(VIcon, {
+          "key": "prepend-icon",
+          "icon": props.prependIcon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !props.prependIcon,
           "defaults": {
             VIcon: {
               icon: props.prependIcon
             }
           }
-        }, {
-          default: () => [createVNode("span", {
-            "class": "v-btn__prepend"
-          }, [slots.prepend?.() ?? createVNode(VIcon, null, null)])]
-        }), createVNode("span", {
+        }, slots.prepend)]), createVNode("span", {
           "class": "v-btn__content",
           "data-no-activator": ""
-        }, [createVNode(VDefaultsProvider, {
-          "key": "content",
+        }, [!slots.default && hasIcon ? createVNode(VIcon, {
+          "key": "content-icon",
+          "icon": props.icon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "content-defaults",
+          "disabled": !hasIcon,
           "defaults": {
             VIcon: {
-              icon: hasIcon ? props.icon : undefined
+              icon: props.icon
             }
           }
-        }, {
-          default: () => [slots.default?.() ?? (hasIcon && createVNode(VIcon, {
-            "key": "icon"
-          }, null))]
-        })]), !props.icon && hasAppend && createVNode(VDefaultsProvider, {
+        }, slots.default)]), !props.icon && hasAppend && createVNode("span", {
           "key": "append",
+          "class": "v-btn__append"
+        }, [!slots.append ? createVNode(VIcon, {
+          "key": "append-icon",
+          "icon": props.appendIcon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "disabled": !props.appendIcon,
           "defaults": {
             VIcon: {
               icon: props.appendIcon
             }
           }
-        }, {
-          default: () => [createVNode("span", {
-            "class": "v-btn__append"
-          }, [slots.append?.() ?? createVNode(VIcon, null, null)])]
-        }), !!props.loading && createVNode("span", {
+        }, slots.append)]), !!props.loading && createVNode("span", {
           "key": "loader",
           "class": "v-btn__loader"
         }, [slots.loader?.() ?? createVNode(VProgressCircular, {
@@ -5051,10 +5078,12 @@ const VAlert = genericComponent()({
     })
   },
   emits: {
+    'click:close': e => true,
     'update:modelValue': value => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
@@ -5104,6 +5133,7 @@ const VAlert = genericComponent()({
       'aria-label': t(props.closeLabel),
       onClick(e) {
         isActive.value = false;
+        emit('click:close', e);
       }
     }));
     return () => {
@@ -5125,8 +5155,17 @@ const VAlert = genericComponent()({
           "key": "border",
           "class": ['v-alert__border', textColorClasses.value],
           "style": textColorStyles.value
-        }, null), hasPrepend && createVNode(VDefaultsProvider, {
+        }, null), hasPrepend && createVNode("div", {
           "key": "prepend",
+          "class": "v-alert__prepend"
+        }, [!slots.prepend ? createVNode(VIcon, {
+          "key": "prepend-icon",
+          "density": props.density,
+          "icon": icon.value,
+          "size": props.prominent ? 44 : 28
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !icon.value,
           "defaults": {
             VIcon: {
               density: props.density,
@@ -5134,21 +5173,25 @@ const VAlert = genericComponent()({
               size: props.prominent ? 44 : 28
             }
           }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-alert__prepend"
-          }, [slots.prepend ? slots.prepend() : icon.value && createVNode(VIcon, null, null)])]
-        }), createVNode("div", {
+        }, slots.prepend)]), createVNode("div", {
           "class": "v-alert__content"
         }, [hasTitle && createVNode(VAlertTitle, {
           "key": "title"
         }, {
-          default: () => [slots.title ? slots.title() : props.title]
-        }), hasText && (slots.text ? slots.text() : props.text), slots.default?.()]), slots.append && createVNode("div", {
+          default: () => [slots.title?.() ?? props.title]
+        }), hasText && (slots.text?.() ?? props.text), slots.default?.()]), slots.append && createVNode("div", {
           "key": "append",
           "class": "v-alert__append"
-        }, [slots.append()]), hasClose && createVNode(VDefaultsProvider, {
+        }, [slots.append()]), hasClose && createVNode("div", {
           "key": "close",
+          "class": "v-alert__close"
+        }, [!slots.close ? createVNode(VBtn, mergeProps({
+          "key": "close-btn",
+          "icon": props.closeIcon,
+          "size": "x-small",
+          "variant": "text"
+        }, closeProps.value), null) : createVNode(VDefaultsProvider, {
+          "key": "close-defaults",
           "defaults": {
             VBtn: {
               icon: props.closeIcon,
@@ -5157,12 +5200,10 @@ const VAlert = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
-            "class": "v-alert__close"
-          }, [slots.close?.({
+          default: () => [slots.close?.({
             props: closeProps.value
-          }) ?? createVNode(VBtn, closeProps.value, null)])]
-        })]
+          })]
+        })])]
       });
     };
   }
@@ -6125,7 +6166,13 @@ const VTextField = genericComponent()({
       });
     }
     function onInput(e) {
-      model.value = e.target.value;
+      const el = e.target;
+      const caretPosition = [el.selectionStart, el.selectionEnd];
+      model.value = el.value;
+      nextTick(() => {
+        el.selectionStart = caretPosition[0];
+        el.selectionEnd = caretPosition[1];
+      });
     }
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter || props.counterValue);
@@ -6225,9 +6272,6 @@ const VTextField = genericComponent()({
     return forwardRefs({}, vInputRef, vFieldRef, inputRef);
   }
 });
-function filterVTextFieldProps(props) {
-  return pick(props, Object.keys(VTextField.props));
-}
 
 // Types
 
@@ -6485,11 +6529,6 @@ const VSelectionControl = genericComponent()({
     };
   }
 });
-function filterControlProps(props) {
-  return pick(props, Object.keys(VSelectionControl.props));
-}
-
-// Types
 
 const makeVCheckboxBtnProps = propsFactory({
   indeterminate: Boolean,
@@ -6539,9 +6578,6 @@ const VCheckboxBtn = genericComponent()({
     return {};
   }
 });
-function filterCheckboxBtnProps(props) {
-  return pick(props, Object.keys(VCheckboxBtn.props));
-}
 
 // Types
 
@@ -6570,7 +6606,7 @@ const VCheckbox = genericComponent()({
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = filterInputProps(props);
-      const [checkboxProps, _2] = filterCheckboxBtnProps(props);
+      const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
       return createVNode(VInput, mergeProps({
         "class": "v-checkbox"
       }, inputAttrs, inputProps, {
@@ -6827,10 +6863,13 @@ const VChip = genericComponent()({
     const link = useLink(props, attrs);
     const isLink = computed(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
-    function onCloseClick(e) {
-      isActive.value = false;
-      emit('click:close', e);
-    }
+    const closeProps = 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;
@@ -6845,10 +6884,12 @@ const VChip = genericComponent()({
     }
     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 && withDirectives(createVNode(Tag, {
         "class": ['v-chip', {
@@ -6866,77 +6907,94 @@ const VChip = genericComponent()({
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, {
-        default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VDefaultsProvider, {
-          "key": "filter",
-          "defaults": {
-            VIcon: {
-              icon: props.filterIcon
-            }
-          }
+        default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VExpandXTransition, {
+          "key": "filter"
         }, {
-          default: () => [createVNode(VExpandXTransition, null, {
-            default: () => [withDirectives(createVNode("div", {
-              "class": "v-chip__filter"
-            }, [slots.filter ? slots.filter() : createVNode(VIcon, null, null)]), [[vShow, group.isSelected.value]])]
-          })]
-        }), hasPrepend && createVNode(VDefaultsProvider, {
+          default: () => [withDirectives(createVNode("div", {
+            "class": "v-chip__filter"
+          }, [!slots.filter ? createVNode(VIcon, {
+            "key": "filter-icon",
+            "icon": props.filterIcon
+          }, null) : withDirectives(createVNode(VDefaultsProvider, {
+            "key": "filter-defaults",
+            "disabled": !props.filterIcon,
+            "defaults": {
+              VIcon: {
+                icon: props.filterIcon
+              }
+            }
+          }, null), [[resolveDirective("slot"), slots.filter, "default"]])]), [[vShow, group.isSelected.value]])]
+        }), hasPrepend && createVNode("div", {
           "key": "prepend",
+          "class": "v-chip__prepend"
+        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependIcon && createVNode(VIcon, {
+          "key": "prepend-icon",
+          "icon": props.prependIcon,
+          "start": true
+        }, null), props.prependAvatar && createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "image": props.prependAvatar,
+          "start": true
+        }, null)]) : 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 ? createVNode("div", {
-            "class": "v-chip__prepend"
-          }, [slots.prepend()]) : props.prependAvatar ? createVNode(VAvatar, {
-            "start": true
-          }, null) : props.prependIcon ? 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 && createVNode(VDefaultsProvider, {
+        }) ?? props.text, hasAppend && createVNode("div", {
           "key": "append",
+          "class": "v-chip__append"
+        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+          "key": "append-icon",
+          "end": true,
+          "icon": props.appendIcon
+        }, null), props.appendAvatar && createVNode(VAvatar, {
+          "key": "append-avatar",
+          "end": true,
+          "image": props.appendAvatar
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "disabled": !hasAppendMedia,
           "defaults": {
             VAvatar: {
+              end: true,
               image: props.appendAvatar
             },
             VIcon: {
+              end: true,
               icon: props.appendIcon
             }
           }
-        }, {
-          default: () => [slots.append ? createVNode("div", {
-            "class": "v-chip__append"
-          }, [slots.append()]) : props.appendAvatar ? createVNode(VAvatar, {
-            "end": true
-          }, null) : props.appendIcon ? createVNode(VIcon, {
-            "end": true
-          }, null) : undefined]
-        }), hasClose && createVNode(VDefaultsProvider, {
+        }, slots.append)]), hasClose && createVNode("div", mergeProps({
           "key": "close",
+          "class": "v-chip__close"
+        }, closeProps.value), [!slots.close ? createVNode(VIcon, {
+          "key": "close-icon",
+          "icon": props.closeIcon,
+          "size": "x-small"
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "close-defaults",
           "defaults": {
             VIcon: {
               icon: props.closeIcon,
               size: 'x-small'
             }
           }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-chip__close",
-            "aria-label": t(props.closeLabel),
-            "onClick": onCloseClick
-          }, [slots.close ? slots.close() : createVNode(VIcon, null, null)])]
-        })]
+        }, slots.close)])]
       }), [[resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
     };
   }
@@ -7452,8 +7510,6 @@ const useNestedGroupActivator = () => {
   });
 };
 
-// Types
-
 const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
   setup(_, _ref) {
@@ -7546,9 +7602,6 @@ const VListGroup = genericComponent()({
     return {};
   }
 });
-function filterListGroupProps(props) {
-  return pick(props, Object.keys(VListGroup.props));
-}
 
 const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
@@ -7686,8 +7739,10 @@ const VListItem = genericComponent()({
       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 withDirectives(createVNode(Tag, {
         "class": ['v-list-item', {
@@ -7707,7 +7762,7 @@ const VListItem = genericComponent()({
         default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode("div", {
           "key": "prepend",
           "class": "v-list-item__prepend"
-        }, [props.prependAvatar && createVNode(VAvatar, {
+        }, [!slots.prepend ? createVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
           "key": "prepend-avatar",
           "density": props.density,
           "image": props.prependAvatar
@@ -7715,8 +7770,9 @@ const VListItem = genericComponent()({
           "key": "prepend-icon",
           "density": props.density,
           "icon": props.prependIcon
-        }, null), slots.prepend && createVNode(VDefaultsProvider, {
-          "key": "prepend",
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !hasPrependMedia,
           "defaults": {
             VAvatar: {
               density: props.density,
@@ -7731,7 +7787,7 @@ const VListItem = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.prepend(slotProps.value)]
+          default: () => [slots.prepend?.(slotProps.value)]
         })]), createVNode("div", {
           "class": "v-list-item__content",
           "data-no-activator": ""
@@ -7750,8 +7806,17 @@ const VListItem = genericComponent()({
         }), slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-list-item__append"
-        }, [slots.append && createVNode(VDefaultsProvider, {
-          "key": "append",
+        }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+          "key": "append-icon",
+          "density": props.density,
+          "icon": props.appendIcon
+        }, null), props.appendAvatar && createVNode(VAvatar, {
+          "key": "append-avatar",
+          "density": props.density,
+          "image": props.appendAvatar
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "disabled": !hasAppendMedia,
           "defaults": {
             VAvatar: {
               density: props.density,
@@ -7766,16 +7831,8 @@ const VListItem = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.append(slotProps.value)]
-        }), props.appendIcon && createVNode(VIcon, {
-          "key": "append-icon",
-          "density": props.density,
-          "icon": props.appendIcon
-        }, null), props.appendAvatar && createVNode(VAvatar, {
-          "key": "append-avatar",
-          "density": props.density,
-          "image": props.appendAvatar
-        }, null)])]
+          default: () => [slots.append?.(slotProps.value)]
+        })])]
       }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
@@ -7872,7 +7929,7 @@ const VListChildren = genericComponent()({
           item
         }) : undefined
       };
-      const [listGroupProps, _1] = filterListGroupProps(itemProps);
+      const [listGroupProps, _1] = VListGroup.filterProps(itemProps);
       return children ? createVNode(VListGroup, mergeProps({
         "value": itemProps?.value
       }, listGroupProps), {
@@ -9099,6 +9156,8 @@ function bindScroll(el, onScroll) {
 
 // Types
 
+const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
+
 const DisplaySymbol = Symbol.for('vuetify:display');
 const defaultDisplayOptions = {
   mobileBreakpoint: 'lg',
@@ -9654,9 +9713,6 @@ const VOverlay = genericComponent()({
     };
   }
 });
-function filterVOverlayProps(props) {
-  return pick(props, Object.keys(VOverlay.props));
-}
 
 // Types
 
@@ -9722,7 +9778,7 @@ const VMenu = genericComponent()({
       'aria-owns': id.value
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-menu']
@@ -9898,7 +9954,7 @@ const VSelect = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -9984,7 +10040,13 @@ const VSelect = genericComponent()({
           return createVNode("div", {
             "key": item.value,
             "class": "v-select__selection"
-          }, [hasChips ? createVNode(VDefaultsProvider, {
+          }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
+            "key": "chip",
+            "closable": props.closableChips,
+            "size": "small",
+            "text": item.title
+          }, slotProps), null) : createVNode(VDefaultsProvider, {
+            "key": "chip-defaults",
             "defaults": {
               VChip: {
                 closable: props.closableChips,
@@ -9993,15 +10055,15 @@ const VSelect = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip ? slots.chip({
+            default: () => [slots.chip?.({
               item,
               index,
               props: slotProps
-            }) : createVNode(VChip, slotProps, null)]
-          }) : slots.selection ? slots.selection({
+            })]
+          }) : slots.selection?.({
             item,
             index
-          }) : createVNode("span", {
+          }) ?? createVNode("span", {
             "class": "v-select__selection-text"
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-select__selection-comma"
@@ -10285,7 +10347,7 @@ const VAutocomplete = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -10373,7 +10435,13 @@ const VAutocomplete = genericComponent()({
           return createVNode("div", {
             "key": item.value,
             "class": "v-autocomplete__selection"
-          }, [hasChips ? createVNode(VDefaultsProvider, {
+          }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
+            "key": "chip",
+            "closable": props.closableChips,
+            "size": "small",
+            "text": item.title
+          }, slotProps), null) : createVNode(VDefaultsProvider, {
+            "key": "chip-defaults",
             "defaults": {
               VChip: {
                 closable: props.closableChips,
@@ -10382,15 +10450,15 @@ const VAutocomplete = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip ? slots.chip({
+            default: () => [slots.chip?.({
               item,
               index,
               props: slotProps
-            }) : createVNode(VChip, slotProps, null)]
-          }) : slots.selection ? slots.selection({
+            })]
+          }) : slots.selection?.({
             item,
             index
-          }) : createVNode("span", {
+          }) ?? createVNode("span", {
             "class": "v-autocomplete__selection-text"
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-autocomplete__selection-comma"
@@ -10591,7 +10659,8 @@ const VBanner = genericComponent()({
     });
     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 createVNode(props.tag, {
         "class": ['v-banner', {
           'v-banner--stacked': props.stacked || mobile.value,
@@ -10601,8 +10670,18 @@ const VBanner = genericComponent()({
         "style": [dimensionStyles.value, locationStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasPrepend && createVNode(VDefaultsProvider, {
+        default: () => [hasPrepend && createVNode("div", {
           "key": "prepend",
+          "class": "v-banner__prepend"
+        }, [!slots.prepend ? createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "color": color.value,
+          "density": density.value,
+          "icon": props.icon,
+          "image": props.avatar
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !hasPrependMedia,
           "defaults": {
             VAvatar: {
               color: color.value,
@@ -10611,19 +10690,15 @@ const VBanner = genericComponent()({
               image: props.avatar
             }
           }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-banner__prepend"
-          }, [slots.prepend ? slots.prepend() : (props.avatar || props.icon) && createVNode(VAvatar, null, null)])]
-        }), createVNode("div", {
+        }, slots.prepend)]), createVNode("div", {
           "class": "v-banner__content"
         }, [hasText && createVNode(VBannerText, {
           "key": "text"
         }, {
-          default: () => [slots.text ? slots.text() : props.text]
-        }), slots.default?.()]), slots.actions && createVNode(VBannerActions, null, {
-          default: () => [slots.actions()]
-        })]
+          default: () => [slots.text?.() ?? props.text]
+        }), slots.default?.()]), slots.actions && createVNode(VBannerActions, {
+          "key": "actions"
+        }, slots.actions)]
       });
     });
   }
@@ -10856,19 +10931,23 @@ const VBreadcrumbs = genericComponent()({
         "class": ['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value],
         "style": backgroundColorStyles.value
       }, {
-        default: () => [hasPrepend && createVNode(VDefaultsProvider, {
+        default: () => [hasPrepend && createVNode("div", {
           "key": "prepend",
+          "class": "v-breadcrumbs__prepend"
+        }, [!slots.prepend ? createVNode(VIcon, {
+          "key": "prepend-icon",
+          "start": true,
+          "icon": props.icon
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "disabled": !props.icon,
           "defaults": {
             VIcon: {
               icon: props.icon,
               start: true
             }
           }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-breadcrumbs__prepend"
-          }, [slots.prepend ? slots.prepend() : props.icon && createVNode(VIcon, null, null)])]
-        }), props.items.map((item, index, array) => createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
+        }, slots.prepend)]), props.items.map((item, index, array) => createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
           "key": index,
           "disabled": index >= array.length - 1
         }, typeof item === 'string' ? {
@@ -10932,30 +11011,33 @@ const VCardItem = genericComponent()({
       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 createVNode("div", {
         "class": "v-card-item"
-      }, [hasPrepend && createVNode(VDefaultsProvider, {
+      }, [hasPrepend && createVNode("div", {
         "key": "prepend",
+        "class": "v-card-item__prepend"
+      }, [!slots.prepend ? hasPrependMedia && createVNode(VAvatar, {
+        "key": "prepend-avatar",
+        "density": props.density,
+        "icon": props.prependIcon,
+        "image": props.prependAvatar
+      }, null) : 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: () => [createVNode("div", {
-          "class": "v-card-item__prepend"
-        }, [slots.prepend?.() ?? createVNode(VAvatar, null, null)])]
-      }), createVNode("div", {
+      }, slots.prepend)]), createVNode("div", {
         "class": "v-card-item__content"
       }, [hasTitle && createVNode(VCardTitle, {
         "key": "title"
@@ -10965,24 +11047,25 @@ const VCardItem = genericComponent()({
         "key": "subtitle"
       }, {
         default: () => [slots.subtitle?.() ?? props.subtitle]
-      }), slots.default?.()]), hasAppend && createVNode(VDefaultsProvider, {
+      }), slots.default?.()]), hasAppend && createVNode("div", {
         "key": "append",
+        "class": "v-card-item__append"
+      }, [!slots.append ? hasAppendMedia && createVNode(VAvatar, {
+        "key": "append-avatar",
+        "density": props.density,
+        "icon": props.appendIcon,
+        "image": props.appendAvatar
+      }, null) : 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: () => [createVNode("div", {
-          "class": "v-card-item__append"
-        }, [slots.append?.() ?? createVNode(VAvatar, null, null)])]
-      })]);
+      }, slots.append)])]);
     });
     return {};
   }
@@ -11094,19 +11177,23 @@ const VCard = genericComponent()({
         "onClick": isClickable.value && link.navigate,
         "tabindex": props.disabled ? -1 : undefined
       }, {
-        default: () => [hasImage && createVNode(VDefaultsProvider, {
+        default: () => [hasImage && createVNode("div", {
           "key": "image",
+          "class": "v-card__image"
+        }, [!slots.image ? createVNode(VImg, {
+          "key": "image-img",
+          "cover": true,
+          "src": props.image
+        }, null) : createVNode(VDefaultsProvider, {
+          "key": "image-defaults",
+          "disabled": !props.image,
           "defaults": {
             VImg: {
               cover: true,
               src: props.image
             }
           }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-card__image"
-          }, [slots.image?.() ?? createVNode(VImg, null, null)])]
-        }), createVNode(LoaderSlot, {
+        }, slots.image)]), createVNode(LoaderSlot, {
           "name": "v-card",
           "active": !!props.loading,
           "color": typeof props.loading === 'boolean' ? undefined : props.loading
@@ -12208,10 +12295,7 @@ const useSlider = _ref => {
   const min = computed(() => parseFloat(props.min));
   const max = computed(() => parseFloat(props.max));
   const step = computed(() => props.step > 0 ? parseFloat(props.step) : 0);
-  const decimals = computed(() => {
-    const trimmedStep = step.value.toString().trim();
-    return trimmedStep.includes('.') ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
-  });
+  const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
   const thumbSize = computed(() => parseInt(props.thumbSize, 10));
   const tickSize = computed(() => parseInt(props.tickSize, 10));
   const trackSize = computed(() => parseInt(props.trackSize, 10));
@@ -12310,7 +12394,9 @@ const useSlider = _ref => {
     const percentage = (val - min.value) / (max.value - min.value) * 100;
     return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
   };
+  const showTicks = toRef(props, 'showTicks');
   const parsedTicks = 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;
@@ -12359,7 +12445,7 @@ const useSlider = _ref => {
     readonly: toRef(props, 'readonly'),
     rounded: toRef(props, 'rounded'),
     roundValue,
-    showTicks: toRef(props, 'showTicks'),
+    showTicks,
     startOffset,
     step,
     thumbSize,
@@ -12581,6 +12667,7 @@ const VSliderTrack = genericComponent()({
       };
     });
     const computedTicks = 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';
@@ -13186,8 +13273,6 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
-// Types
-
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
@@ -13612,7 +13697,7 @@ const VCombobox = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -13700,7 +13785,13 @@ const VCombobox = genericComponent()({
             "key": item.value,
             "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
             "style": index === selectionIndex.value ? textColorStyles.value : {}
-          }, [hasChips ? createVNode(VDefaultsProvider, {
+          }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
+            "key": "chip",
+            "closable": props.closableChips,
+            "size": "small",
+            "text": item.title
+          }, slotProps), null) : createVNode(VDefaultsProvider, {
+            "key": "chip-defaults",
             "defaults": {
               VChip: {
                 closable: props.closableChips,
@@ -13709,15 +13800,15 @@ const VCombobox = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip ? slots.chip({
+            default: () => [slots.chip?.({
               item,
               index,
               props: slotProps
-            }) : createVNode(VChip, slotProps, null)]
-          }) : slots.selection ? slots.selection({
+            })]
+          }) : slots.selection?.({
             item,
             index
-          }) : createVNode("span", {
+          }) ?? createVNode("span", {
             "class": "v-combobox__selection-text"
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-combobox__selection-comma"
@@ -13814,7 +13905,7 @@ const VDialog = genericComponent()({
       'aria-expanded': String(isActive.value)
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-dialog', {
@@ -14418,10 +14509,8 @@ const VContainer = genericComponent()({
 
 // 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
@@ -14430,8 +14519,9 @@ const breakpointProps = (() => {
   }, {});
 })();
 const offsetProps = (() => {
-  return breakpoints$1.reduce((props, val) => {
-    props['offset' + capitalize(val)] = {
+  return breakpoints.reduce((props, val) => {
+    const offsetKey = 'offset' + capitalize(val);
+    props[offsetKey] = {
       type: [String, Number],
       default: null
     };
@@ -14439,8 +14529,9 @@ const offsetProps = (() => {
   }, {});
 })();
 const orderProps = (() => {
-  return breakpoints$1.reduce((props, val) => {
-    props['order' + capitalize(val)] = {
+  return breakpoints.reduce((props, val) => {
+    const orderKey = 'order' + capitalize(val);
+    props[orderKey] = {
       type: [String, Number],
       default: null
     };
@@ -14538,13 +14629,12 @@ const VCol = genericComponent()({
 
 // 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 + capitalize(val)] = def();
+    const prefixKey = prefix + capitalize(val);
+    props[prefixKey] = def();
     return props;
   }, {});
 }
@@ -14874,7 +14964,10 @@ const VLazy = genericComponent()({
       }, {
         default: () => [slots.default?.()]
       })]
-    }), [[resolveDirective("intersect"), onIntersect, props.options]]));
+    }), [[resolveDirective("intersect"), {
+      handler: onIntersect,
+      options: props.options
+    }, null]]));
     return {};
   }
 });
@@ -15851,9 +15944,9 @@ const VParallax = genericComponent()({
       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);
@@ -15935,10 +16028,7 @@ const VRadioGroup = genericComponent()({
     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: {
@@ -15973,7 +16063,8 @@ const VRadioGroup = genericComponent()({
             "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
@@ -16814,7 +16905,7 @@ const VSnackbar = genericComponent()({
       window.clearTimeout(activeTimeout);
     }
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-snackbar', {
@@ -16834,7 +16925,8 @@ const VSnackbar = genericComponent()({
         "persistent": true,
         "noClickAnimation": true,
         "scrim": false,
-        "scrollStrategy": "none"
+        "scrollStrategy": "none",
+        "_disableGlobalStack": true
       }, scopeId), {
         default: () => [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
           "class": "v-snackbar__content",
@@ -16908,7 +17000,7 @@ const VSwitch = genericComponent()({
     useRender(() => {
       const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
       const [inputProps, _1] = filterInputProps(props);
-      const [controlProps, _2] = filterControlProps(props);
+      const [controlProps, _2] = VSelectionControl.filterProps(props);
       const control = ref();
       function onClick() {
         control.value?.input?.click();
@@ -17041,28 +17133,17 @@ const VTab = genericComponent()({
   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 {
@@ -17112,7 +17193,7 @@ const VTab = genericComponent()({
       }
     }
     useRender(() => {
-      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
+      const [btnProps] = VBtn.filterProps(props);
       return createVNode(VBtn, mergeProps({
         "_as": "VTab",
         "symbol": VTabsSymbol,
@@ -17124,7 +17205,6 @@ const VTab = genericComponent()({
         "active": false,
         "block": props.fixed,
         "maxWidth": props.fixed ? 300 : undefined,
-        "variant": "text",
         "rounded": 0
       }, btnProps, attrs, {
         "onGroup:selected": updateSlider
@@ -17369,7 +17449,13 @@ const VTextarea = genericComponent()({
       });
     }
     function onInput(e) {
-      model.value = e.target.value;
+      const el = e.target;
+      const caretPosition = [el.selectionStart, el.selectionEnd];
+      model.value = el.value;
+      nextTick(() => {
+        el.selectionStart = caretPosition[0];
+        el.selectionEnd = caretPosition[1];
+      });
     }
     const sizerRef = ref();
     function calculateInputHeight() {
@@ -17656,13 +17742,6 @@ const VTimelineDivider = genericComponent()({
       backgroundColorClasses: lineColorClasses,
       backgroundColorStyles: lineColorStyles
     } = useBackgroundColor(toRef(props, 'lineColor'));
-    provideDefaults({
-      VIcon: {
-        color: toRef(props, 'iconColor'),
-        icon: toRef(props, 'icon'),
-        size: toRef(props, 'size')
-      }
-    });
     useRender(() => createVNode("div", {
       "class": ['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot
@@ -17677,7 +17756,22 @@ const VTimelineDivider = genericComponent()({
     }, [createVNode("div", {
       "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
       "style": backgroundColorStyles.value
-    }, [slots.default?.() ?? (props.icon ? createVNode(VIcon, null, null) : undefined)])]), createVNode("div", {
+    }, [!slots.default ? createVNode(VIcon, {
+      "key": "icon",
+      "color": props.iconColor,
+      "icon": props.icon,
+      "size": props.size
+    }, null) : createVNode(VDefaultsProvider, {
+      "key": "icon-defaults",
+      "disabled": !props.icon,
+      "defaults": {
+        VIcon: {
+          color: props.iconColor,
+          icon: props.icon,
+          size: props.size
+        }
+      }
+    }, slots.default)])]), createVNode("div", {
       "class": ['v-timeline-divider__after', lineColorClasses.value],
       "style": lineColorStyles.value
     }, null)]));
@@ -17802,7 +17896,7 @@ const VTooltip = genericComponent()({
       'aria-describedby': id.value
     }, props.activatorProps));
     useRender(() => {
-      const [overlayProps] = filterVOverlayProps(props);
+      const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
         "ref": overlay,
         "class": ['v-tooltip'],
@@ -18048,7 +18142,7 @@ const makeDataTableSelectProps = propsFactory({
   }
 }, '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 => {
@@ -18108,13 +18202,28 @@ const makeDataTableSortProps = propsFactory({
 const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
 function createSort(props) {
   const sortBy = useProxiedModel(props, 'sortBy');
+  const mustSort = toRef(props, 'mustSort');
+  const multiSort = toRef(props, 'multiSort');
+  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 = [{
@@ -18122,7 +18231,7 @@ function createSort(props) {
         order: 'asc'
       }];
     } else if (item.order === 'desc') {
-      if (props.mustSort) {
+      if (mustSort.value) {
         item.order = 'asc';
       } else {
         newSortBy = newSortBy.filter(x => x.key !== key);
@@ -18131,6 +18240,7 @@ function createSort(props) {
       item.order = 'desc';
     }
     sortBy.value = newSortBy;
+    if (page) page.value = 1;
   };
   const data = {
     sortBy,
@@ -18333,9 +18443,6 @@ const VDataTableHeaders = genericComponent()({
 });
 
 // Utilities
-
-// Types
-
 const makeDataTableGroupProps = propsFactory({
   groupBy: {
     type: Array,
@@ -18343,7 +18450,17 @@ const makeDataTableGroupProps = propsFactory({
   }
 }, '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 = ref(new Set());
   const sortByWithGroups = computed(() => {
     return groupBy.value.map(val => ({
@@ -18553,7 +18670,7 @@ const makeDataTableExpandProps = propsFactory({
   }
 }, 'v-data-table-expand');
 const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
-function createExpanded(props) {
+function provideExpanded(props) {
   const expandOnClick = toRef(props, 'expandOnClick');
   const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
     return new Set(v);
@@ -18596,7 +18713,9 @@ function useExpanded() {
 const VDataTableRow = defineComponent({
   name: 'VDataTableRow',
   props: {
-    item: Object
+    index: Number,
+    item: Object,
+    onClick: Function
   },
   setup(props, _ref) {
     let {
@@ -18614,7 +18733,10 @@ const VDataTableRow = defineComponent({
       columns
     } = useHeaders();
     useRender(() => 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 && createVNode(VDataTableColumn, {
       "key": "no-data"
     }, slots), props.item && columns.value.map((column, i) => createVNode(VDataTableColumn, {
@@ -18629,6 +18751,7 @@ const VDataTableRow = defineComponent({
         const item = props.item;
         const slotName = `item.${column.key}`;
         const slotProps = {
+          index: props.index,
           item: props.item,
           columns: columns.value,
           isSelected,
@@ -18745,12 +18868,13 @@ const VDataTableRows = genericComponent()({
         "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']?.(slotProps)]);
     })]));
@@ -18773,10 +18897,20 @@ const makeDataTablePaginateProps = propsFactory({
   }
 }, '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 = computed(() => +(props.itemsLength ?? items.value.length));
+  return {
+    page,
+    itemsPerPage
+  };
+}
+function providePagination(options) {
+  const {
+    page,
+    itemsPerPage,
+    itemsLength
+  } = options;
   const startIndex = computed(() => {
     if (itemsPerPage.value === -1) return 0;
     return itemsPerPage.value * (page.value - 1);
@@ -18789,13 +18923,18 @@ function createPagination(props, items) {
     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
   };
   provide(VDataTablePaginationSymbol, data);
   return data;
@@ -18805,7 +18944,13 @@ function usePagination() {
   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 = computed(() => {
     if (itemsPerPage.value <= 0) return items.value;
     return items.value.slice(startIndex.value, stopIndex.value);
@@ -18894,7 +19039,8 @@ const VDataTableFooter = genericComponent()({
       startIndex,
       stopIndex,
       itemsLength,
-      itemsPerPage
+      itemsPerPage,
+      setItemsPerPage
     } = usePagination();
     const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => ({
       ...option,
@@ -18907,7 +19053,7 @@ const VDataTableFooter = genericComponent()({
     }, [createVNode("span", null, [t(props.itemsPerPageText)]), 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
@@ -18996,22 +19142,10 @@ function useOptions(_ref) {
     groupBy: groupBy.value
   }));
 
-  // Reset page when sorting changes
-  watch(sortBy, () => {
-    page.value = 1;
-  }, {
-    deep: true
-  });
-
   // Reset page when searching
   watch(() => search?.value, () => {
     page.value = 1;
   });
-
-  // Reset page when items-per-page changes
-  watch(itemsPerPage, () => {
-    page.value = 1;
-  });
   let oldOptions = null;
   watch(options, () => {
     if (deepEqual(oldOptions, options.value)) return;
@@ -19065,7 +19199,18 @@ const VDataTable = genericComponent()({
       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, {
@@ -19083,32 +19228,46 @@ const VDataTable = genericComponent()({
     } = 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 = 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 = computed(() => extractRows(paginatedItems.value));
-    createSelection(props, paginatedItemsWithoutGroups);
-    createExpanded(props);
+    provideSelection(props, paginatedItemsWithoutGroups);
+    provideExpanded(props);
     useOptions({
       page,
       itemsPerPage,
@@ -19256,7 +19415,14 @@ const VDataTableVirtual = genericComponent()({
       emit,
       slots
     } = _ref;
-    const groupBy = useProxiedModel(props, 'groupBy');
+    const {
+      groupBy
+    } = createGroupBy(props);
+    const {
+      sortBy,
+      multiSort,
+      mustSort
+    } = createSort(props);
     const {
       columns
     } = createHeaders(props, {
@@ -19274,14 +19440,19 @@ const VDataTableVirtual = genericComponent()({
     } = 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);
@@ -19289,8 +19460,8 @@ const VDataTableVirtual = genericComponent()({
       flatItems
     } = useGroupedItems(sortedItems, groupBy, opened);
     const allRows = computed(() => extractRows(flatItems.value));
-    createSelection(props, allRows);
-    createExpanded(props);
+    provideSelection(props, allRows);
+    provideExpanded(props);
     const {
       containerRef,
       paddingTop,
@@ -19377,7 +19548,10 @@ const VDataTableServer = genericComponent()({
       type: String,
       default: '$vuetify.dataIterator.loadingText'
     },
-    itemsLength: [Number, String],
+    itemsLength: {
+      type: [Number, String],
+      required: true
+    },
     ...makeVDataTableProps(),
     ...makeDataTableExpandProps(),
     ...makeDataTableHeaderProps(),
@@ -19402,8 +19576,20 @@ const VDataTableServer = genericComponent()({
       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 = computed(() => parseInt(props.itemsLength, 10));
+    provideExpanded(props);
     const {
       columns
     } = createHeaders(props, {
@@ -19415,20 +19601,28 @@ const VDataTableServer = genericComponent()({
       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,
@@ -19999,7 +20193,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.2.0-dev-20230309.0";
+const version$1 = "3.2.0-dev-20230322.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20011,7 +20205,7 @@ function inject(key) {
   }
 }
 
-const version = "3.2.0-dev-20230309.0";
+const version = "3.2.0-dev-20230322.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};