vuetify 3.1.1 → 3.1.3

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.1.1
+* Vuetify v3.1.3
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, effectScope, onScopeDispose, shallowRef, shallowReactive, toRaw, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, getCurrentInstance as getCurrentInstance$1, unref, provide, inject as inject$1, onScopeDispose, effectScope, shallowRef, defineComponent as defineComponent$1, camelize, h, onDeactivated, onActivated, onMounted, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -258,8 +258,12 @@ function mergeDeep() {
 }
 function toKebabCase() {
   let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase();
+  if (toKebabCase.cache.has(str)) return toKebabCase.cache.get(str);
+  const kebab = str.replace(/[^a-z]/gi, '-').replace(/\B([A-Z])/g, '-$1').toLowerCase();
+  toKebabCase.cache.set(str, kebab);
+  return kebab;
 }
+toKebabCase.cache = new Map();
 function findChildrenWithProvide(key, vnode) {
   if (!vnode || typeof vnode !== 'object') return [];
   if (Array.isArray(vnode)) {
@@ -886,7 +890,7 @@ function injectSelf(key) {
 
 const DefaultsSymbol = Symbol.for('vuetify:defaults');
 function createDefaults(options) {
-  return ref(options ?? {});
+  return ref(options);
 }
 function useDefaults() {
   const defaults = inject$1(DefaultsSymbol);
@@ -918,23 +922,30 @@ function provideDefaults(defaults, options) {
   return newDefaults;
 }
 
-function useToggleScope(source, cb) {
+function useToggleScope(source, fn) {
   let scope;
+  function start() {
+    scope = effectScope();
+    scope.run(() => fn.length ? fn(() => {
+      var _scope;
+      (_scope = scope) == null ? void 0 : _scope.stop();
+      start();
+    }) : fn());
+  }
   watch(source, active => {
     if (active && !scope) {
-      scope = effectScope();
-      scope.run(cb);
+      start();
     } else if (!active) {
-      var _scope;
-      (_scope = scope) == null ? void 0 : _scope.stop();
+      var _scope2;
+      (_scope2 = scope) == null ? void 0 : _scope2.stop();
       scope = undefined;
     }
   }, {
     immediate: true
   });
   onScopeDispose(() => {
-    var _scope2;
-    (_scope2 = scope) == null ? void 0 : _scope2.stop();
+    var _scope3;
+    (_scope3 = scope) == null ? void 0 : _scope3.stop();
   });
 }
 
@@ -1003,33 +1014,36 @@ const defineComponent = function defineComponent(options) {
     options.props = propsFactory(options.props, toKebabCase(options.name))();
     options.props._as = String;
     options.setup = function setup(props, ctx) {
-      const vm = getCurrentInstance$1();
       const defaults = useDefaults();
-      const _subcomponentDefaults = shallowRef();
-      const _props = shallowReactive({
-        ...toRaw(props)
+
+      // Skip props proxy if defaults are not provided
+      if (!defaults.value) return options._setup(props, ctx);
+      const vm = getCurrentInstance$1();
+      const componentDefaults = computed(() => defaults.value[props._as ?? options.name]);
+      const _props = new Proxy(props, {
+        get(target, prop) {
+          if (!propIsDefined(vm.vnode, prop)) {
+            var _componentDefaults$va, _global;
+            return ((_componentDefaults$va = componentDefaults.value) == null ? void 0 : _componentDefaults$va[prop]) ?? ((_global = defaults.value.global) == null ? void 0 : _global[prop]) ?? target[prop];
+          }
+          return Reflect.get(target, prop);
+        }
       });
+      const _subcomponentDefaults = shallowRef();
       watchEffect(() => {
-        const globalDefaults = defaults.value.global;
-        const componentDefaults = defaults.value[props._as ?? options.name];
-        if (componentDefaults) {
-          const subComponents = Object.entries(componentDefaults).filter(_ref => {
+        if (componentDefaults.value) {
+          const subComponents = Object.entries(componentDefaults.value).filter(_ref => {
             let [key] = _ref;
             return key.startsWith(key[0].toUpperCase());
           });
           if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
         }
-        for (const prop of Object.keys(props)) {
-          let newVal = props[prop];
-          if (!propIsDefined(vm.vnode, prop)) {
-            newVal = (componentDefaults == null ? void 0 : componentDefaults[prop]) ?? (globalDefaults == null ? void 0 : globalDefaults[prop]) ?? props[prop];
-          }
-          if (_props[prop] !== newVal) {
-            _props[prop] = newVal;
-          }
-        }
       });
       const setupBindings = options._setup(_props, ctx);
+
+      // If subcomponent defaults are provided, override any
+      // subcomponents provided by the component's setup function.
+      // This uses injectSelf so must be done after the original setup to work.
       useToggleScope(_subcomponentDefaults, () => {
         var _injectSelf;
         provideDefaults(mergeDeep(((_injectSelf = injectSelf(DefaultsSymbol)) == null ? void 0 : _injectSelf.value) ?? {}, _subcomponentDefaults.value));
@@ -1892,8 +1906,8 @@ var en = {
       root: 'Pagination Navigation',
       next: 'Next page',
       previous: 'Previous page',
-      page: 'Goto Page {0}',
-      currentPage: 'Page {0}, Current Page',
+      page: 'Go to page {0}',
+      currentPage: 'Page {0}, Current page',
       first: 'First page',
       last: 'Last page'
     }
@@ -4384,9 +4398,69 @@ const Ripple = {
   updated: updated$1
 };
 
+// Composables
+
+// Types
+
+const oppositeMap = {
+  center: 'center',
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const makeLocationProps = propsFactory({
+  location: String
+}, 'location');
+function useLocation(props) {
+  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let offset = arguments.length > 2 ? arguments[2] : undefined;
+  const {
+    isRtl
+  } = useRtl();
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+    function getOffset(side) {
+      return offset ? offset(side) : 0;
+    }
+    const styles = {};
+    if (side !== 'center') {
+      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== 'center') {
+      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === 'center') styles.top = styles.left = '50%';else {
+        styles[{
+          top: 'left',
+          bottom: 'left',
+          left: 'top',
+          right: 'top'
+        }[side]] = '50%';
+      }
+      styles.transform = {
+        top: 'translateX(-50%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateY(-50%)',
+        right: 'translateY(-50%)',
+        center: 'translate(-50%, -50%)'
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+
 const VProgressLinear = defineComponent({
   name: 'VProgressLinear',
   props: {
+    absolute: Boolean,
     active: {
       type: Boolean,
       default: true
@@ -4416,6 +4490,9 @@ const VProgressLinear = defineComponent({
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeLocationProps({
+      location: 'top'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -4434,6 +4511,9 @@ const VProgressLinear = defineComponent({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -4475,6 +4555,7 @@ const VProgressLinear = defineComponent({
     useRender(() => createVNode(props.tag, {
       "ref": intersectionRef,
       "class": ['v-progress-linear', {
+        'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
         'v-progress-linear--reverse': isReversed.value,
         'v-progress-linear--rounded': props.rounded,
@@ -4482,8 +4563,11 @@ const VProgressLinear = defineComponent({
         'v-progress-linear--striped': props.striped
       }, roundedClasses.value, themeClasses.value],
       "style": {
+        bottom: props.location === 'bottom' ? 0 : undefined,
+        top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
-        '--v-progress-linear-height': convertToUnit(height.value)
+        '--v-progress-linear-height': convertToUnit(height.value),
+        ...locationStyles.value
       },
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
@@ -4569,65 +4653,6 @@ function LoaderSlot(props, _ref) {
   }, null)]);
 }
 
-// Composables
-
-// Types
-
-const oppositeMap = {
-  center: 'center',
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
-const makeLocationProps = propsFactory({
-  location: String
-}, 'location');
-function useLocation(props) {
-  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let offset = arguments.length > 2 ? arguments[2] : undefined;
-  const {
-    isRtl
-  } = useRtl();
-  const locationStyles = computed(() => {
-    if (!props.location) return {};
-    const {
-      side,
-      align
-    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-    function getOffset(side) {
-      return offset ? offset(side) : 0;
-    }
-    const styles = {};
-    if (side !== 'center') {
-      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-    }
-    if (align !== 'center') {
-      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-    } else {
-      if (side === 'center') styles.top = styles.left = '50%';else {
-        styles[{
-          top: 'left',
-          bottom: 'left',
-          left: 'top',
-          right: 'top'
-        }[side]] = '50%';
-      }
-      styles.transform = {
-        top: 'translateX(-50%)',
-        bottom: 'translateX(-50%)',
-        left: 'translateY(-50%)',
-        right: 'translateY(-50%)',
-        center: 'translate(-50%, -50%)'
-      }[side];
-    }
-    return styles;
-  });
-  return {
-    locationStyles
-  };
-}
-
 // Utilities
 
 // Types
@@ -4833,21 +4858,31 @@ const VBtn = defineComponent({
     const group = useGroupItem(props, props.symbol, false);
     const link = useLink(props, attrs);
     const isActive = computed(() => {
-      var _link$isActive;
-      return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || (group == null ? void 0 : group.isSelected.value));
+      if (props.active !== undefined) {
+        return props.active;
+      }
+      if (link.isLink.value) {
+        var _link$isActive;
+        return (_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value;
+      }
+      return group == null ? void 0 : group.isSelected.value;
     });
     const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
     const isElevated = computed(() => {
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
     });
+    const valueAttr = computed(() => {
+      if (props.value === undefined) return undefined;
+      return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
+    });
     useSelectLink(link, group == null ? void 0 : group.select);
     useRender(() => {
-      var _slots$prepend, _slots$default, _slots$append, _slots$loader;
+      var _link$isActive2, _link$isActive3, _slots$prepend, _slots$default, _slots$append, _slots$loader;
       const Tag = link.isLink.value ? 'a' : props.tag;
-      const hasColor = !group || group.isSelected.value;
       const hasPrepend = !!(props.prependIcon || slots.prepend);
       const hasAppend = !!(props.appendIcon || slots.append);
       const hasIcon = !!(props.icon && props.icon !== true);
+      const hasColor = (group == null ? void 0 : group.isSelected.value) && (!link.isLink.value || ((_link$isActive2 = link.isActive) == null ? void 0 : _link$isActive2.value)) || !group || ((_link$isActive3 = link.isActive) == null ? void 0 : _link$isActive3.value);
       return withDirectives(createVNode(Tag, {
         "type": Tag === 'a' ? undefined : 'button',
         "class": ['v-btn', group == null ? void 0 : group.selectedClass.value, {
@@ -4868,7 +4903,8 @@ const VBtn = defineComponent({
           if (isDisabled.value) return;
           (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
           group == null ? void 0 : group.toggle();
-        }
+        },
+        "value": valueAttr.value
       }, {
         default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && createVNode(VDefaultsProvider, {
           "key": "prepend",
@@ -5342,32 +5378,34 @@ const VField = genericComponent()({
       if (hasLabel.value) {
         const el = labelRef.value.$el;
         const targetEl = floatingLabelRef.value.$el;
-        const rect = nullifyTransforms(el);
-        const targetRect = targetEl.getBoundingClientRect();
-        const x = targetRect.x - rect.x;
-        const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
-        const targetWidth = targetRect.width / 0.75;
-        const width = Math.abs(targetWidth - rect.width) > 1 ? {
-          maxWidth: convertToUnit(targetWidth)
-        } : undefined;
-        const style = getComputedStyle(el);
-        const targetStyle = getComputedStyle(targetEl);
-        const duration = parseFloat(style.transitionDuration) * 1000 || 150;
-        const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
-        const color = targetStyle.getPropertyValue('color');
-        el.style.visibility = 'visible';
-        targetEl.style.visibility = 'hidden';
-        animate(el, {
-          transform: `translate(${x}px, ${y}px) scale(${scale})`,
-          color,
-          ...width
-        }, {
-          duration,
-          easing: standardEasing,
-          direction: val ? 'normal' : 'reverse'
-        }).finished.then(() => {
-          el.style.removeProperty('visibility');
-          targetEl.style.removeProperty('visibility');
+        requestAnimationFrame(() => {
+          const rect = nullifyTransforms(el);
+          const targetRect = targetEl.getBoundingClientRect();
+          const x = targetRect.x - rect.x;
+          const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
+          const targetWidth = targetRect.width / 0.75;
+          const width = Math.abs(targetWidth - rect.width) > 1 ? {
+            maxWidth: convertToUnit(targetWidth)
+          } : undefined;
+          const style = getComputedStyle(el);
+          const targetStyle = getComputedStyle(targetEl);
+          const duration = parseFloat(style.transitionDuration) * 1000 || 150;
+          const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
+          const color = targetStyle.getPropertyValue('color');
+          el.style.visibility = 'visible';
+          targetEl.style.visibility = 'hidden';
+          animate(el, {
+            transform: `translate(${x}px, ${y}px) scale(${scale})`,
+            color,
+            ...width
+          }, {
+            duration,
+            easing: standardEasing,
+            direction: val ? 'normal' : 'reverse'
+          }).finished.then(() => {
+            el.style.removeProperty('visibility');
+            targetEl.style.removeProperty('visibility');
+          });
         });
       }
     }, {
@@ -5556,7 +5594,6 @@ const FormKey = Symbol.for('vuetify:form');
 const makeFormProps = propsFactory({
   disabled: Boolean,
   fastFail: Boolean,
-  lazyValidation: Boolean,
   readonly: Boolean,
   modelValue: {
     type: Boolean,
@@ -6701,6 +6738,7 @@ const VChipGroup = defineComponent({
     provideDefaults({
       VChip: {
         color: toRef(props, 'color'),
+        disabled: toRef(props, 'disabled'),
         filter: toRef(props, 'filter'),
         variant: toRef(props, 'variant')
       }
@@ -6750,7 +6788,10 @@ const VChip = defineComponent({
       default: '$complete'
     },
     label: Boolean,
-    link: Boolean,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
     pill: Boolean,
     prependAvatar: String,
     prependIcon: IconValue,
@@ -6763,6 +6804,8 @@ const VChip = defineComponent({
       type: Boolean,
       default: true
     },
+    onClick: EventProp,
+    onClickOnce: EventProp,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
@@ -6816,7 +6859,8 @@ const VChip = defineComponent({
     const isActive = useProxiedModel(props, 'modelValue');
     const group = useGroupItem(props, VChipGroupSymbol, false);
     const link = useLink(props, attrs);
-    const isClickable = computed(() => !props.disabled && (!!group || link.isClickable.value || props.link));
+    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);
@@ -6828,6 +6872,12 @@ const VChip = defineComponent({
       (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
       group == null ? void 0 : group.toggle();
     }
+    function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
     return () => {
       var _slots$default;
       const Tag = link.isLink.value ? 'a' : props.tag;
@@ -6848,7 +6898,9 @@ const VChip = defineComponent({
         "disabled": props.disabled || undefined,
         "draggable": props.draggable,
         "href": link.href.value,
-        "onClick": onClick
+        "tabindex": isClickable.value ? 0 : undefined,
+        "onClick": onClick,
+        "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, {
         default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && createVNode(VDefaultsProvider, {
           "key": "filter",
@@ -6945,9 +6997,9 @@ const VDivider = defineComponent({
       themeClasses
     } = provideTheme(props);
     const {
-      backgroundColorClasses,
-      backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(toRef(props, 'color'));
     const dividerStyles = computed(() => {
       const styles = {};
       if (props.length) {
@@ -6963,8 +7015,8 @@ const VDivider = defineComponent({
         'v-divider': true,
         'v-divider--inset': props.inset,
         'v-divider--vertical': props.vertical
-      }, themeClasses.value, backgroundColorClasses.value],
-      "style": [dividerStyles.value, backgroundColorStyles.value],
+      }, themeClasses.value, textColorClasses.value],
+      "style": [dividerStyles.value, textColorStyles.value],
       "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
       "role": `${attrs.role || 'separator'}`
     }, null));
@@ -7564,6 +7616,10 @@ const VListItem = genericComponent()({
     nav: Boolean,
     prependAvatar: String,
     prependIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
@@ -7670,7 +7726,7 @@ const VListItem = genericComponent()({
       }
     }
     useRender(() => {
-      var _slots$prepend, _slots$title, _slots$subtitle, _slots$default, _slots$append;
+      var _slots$title, _slots$subtitle, _slots$default;
       const Tag = isLink.value ? 'a' : props.tag;
       const hasColor = !list || isSelected.value || isActive.value;
       const hasTitle = slots.title || props.title;
@@ -7693,7 +7749,18 @@ const VListItem = genericComponent()({
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, {
-        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode(VDefaultsProvider, {
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createVNode("div", {
+          "key": "prepend",
+          "class": "v-list-item__prepend"
+        }, [props.prependAvatar && createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "density": props.density,
+          "image": props.prependAvatar
+        }, null), props.prependIcon && createVNode(VIcon, {
+          "key": "prepend-icon",
+          "density": props.density,
+          "icon": props.prependIcon
+        }, null), slots.prepend && createVNode(VDefaultsProvider, {
           "key": "prepend",
           "defaults": {
             VAvatar: {
@@ -7709,14 +7776,8 @@ const VListItem = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
-            "class": "v-list-item__prepend"
-          }, [props.prependAvatar && createVNode(VAvatar, {
-            "key": "prepend-avatar"
-          }, null), props.prependIcon && createVNode(VIcon, {
-            "key": "prepend-icon"
-          }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
-        }), createVNode("div", {
+          default: () => [slots.prepend(slotProps.value)]
+        })]), createVNode("div", {
           "class": "v-list-item__content",
           "data-no-activator": ""
         }, [hasTitle && createVNode(VListItemTitle, {
@@ -7731,7 +7792,10 @@ const VListItem = genericComponent()({
           default: () => [((_slots$subtitle = slots.subtitle) == null ? void 0 : _slots$subtitle.call(slots, {
             subtitle: props.subtitle
           })) ?? props.subtitle]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && createVNode(VDefaultsProvider, {
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && createVNode("div", {
+          "key": "append",
+          "class": "v-list-item__append"
+        }, [slots.append && createVNode(VDefaultsProvider, {
           "key": "append",
           "defaults": {
             VAvatar: {
@@ -7747,15 +7811,17 @@ const VListItem = genericComponent()({
             }
           }
         }, {
-          default: () => [createVNode("div", {
-            "class": "v-list-item__append"
-          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && createVNode(VIcon, {
-            "key": "append-icon"
-          }, null), props.appendAvatar && createVNode(VAvatar, {
-            "key": "append-avatar"
-          }, null)])]
-        })]
-      }), [[resolveDirective("ripple"), isClickable.value]]);
+          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)])]
+      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
   }
@@ -7968,9 +8034,12 @@ function useItems(props) {
 
 // Types
 
+function isPrimitive(value) {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
+}
 function transformItem(props, item) {
   const type = getPropertyFromItem(item, props.itemType, 'item');
-  const title = typeof item === 'string' ? item : getPropertyFromItem(item, props.itemTitle);
+  const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
   const value = getPropertyFromItem(item, props.itemValue, undefined);
   const children = getPropertyFromItem(item, props.itemChildren);
   const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps);
@@ -8596,17 +8665,12 @@ const makeLocationStrategyProps = propsFactory({
 function useLocationStrategies(props, data) {
   const contentStyles = ref({});
   const updateLocation = ref();
-  let scope;
-  watchEffect(async () => {
-    var _scope;
-    (_scope = scope) == null ? void 0 : _scope.stop();
-    updateLocation.value = undefined;
-    if (!(IN_BROWSER && data.isActive.value && props.locationStrategy)) return;
-    scope = effectScope();
-    if (!(props.locationStrategy === 'connected')) {
-      await nextTick();
-    }
-    scope.run(() => {
+  if (IN_BROWSER) {
+    useToggleScope(() => !!(data.isActive.value && props.locationStrategy), reset => {
+      watch(() => props.locationStrategy, reset);
+      onScopeDispose(() => {
+        updateLocation.value = undefined;
+      });
       if (typeof props.locationStrategy === 'function') {
         var _props$locationStrate;
         updateLocation.value = (_props$locationStrate = props.locationStrategy(data, props, contentStyles)) == null ? void 0 : _props$locationStrate.updateLocation;
@@ -8615,16 +8679,14 @@ function useLocationStrategies(props, data) {
         updateLocation.value = (_locationStrategies$p = locationStrategies[props.locationStrategy](data, props, contentStyles)) == null ? void 0 : _locationStrategies$p.updateLocation;
       }
     });
-  });
-  IN_BROWSER && window.addEventListener('resize', onResize, {
-    passive: true
-  });
-  onScopeDispose(() => {
-    var _scope2;
-    IN_BROWSER && window.removeEventListener('resize', onResize);
-    updateLocation.value = undefined;
-    (_scope2 = scope) == null ? void 0 : _scope2.stop();
-  });
+    window.addEventListener('resize', onResize, {
+      passive: true
+    });
+    onScopeDispose(() => {
+      window.removeEventListener('resize', onResize);
+      updateLocation.value = undefined;
+    });
+  }
   function onResize(e) {
     var _updateLocation$value;
     (_updateLocation$value = updateLocation.value) == null ? void 0 : _updateLocation$value.call(updateLocation, e);
@@ -8918,13 +8980,30 @@ function connectedLocationStrategy(data, props, contentStyles) {
       maxWidth: convertToUnit(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
       maxHeight: convertToUnit(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
     });
+    return {
+      available,
+      contentBox
+    };
   }
-  watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation(), {
-    immediate: !activatorFixed
-  });
-  if (activatorFixed) nextTick(() => updateLocation());
-  requestAnimationFrame(() => {
-    if (contentStyles.value.maxHeight) updateLocation();
+  watch(() => [preferredAnchor.value, preferredOrigin.value, props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateLocation());
+  nextTick(() => {
+    const result = updateLocation();
+
+    // TODO: overflowing content should only require a single updateLocation call
+    // Icky hack to make sure the content is positioned consistently
+    if (!result) return;
+    const {
+      available,
+      contentBox
+    } = result;
+    if (contentBox.height > available.y) {
+      requestAnimationFrame(() => {
+        updateLocation();
+        requestAnimationFrame(() => {
+          updateLocation();
+        });
+      });
+    }
   });
   return {
     updateLocation
@@ -8992,10 +9071,10 @@ function useScrollStrategies(props, data) {
     await nextTick();
     scope.run(() => {
       if (typeof props.scrollStrategy === 'function') {
-        props.scrollStrategy(data, props);
+        props.scrollStrategy(data, props, scope);
       } else {
         var _scrollStrategies$pro;
-        (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props);
+        (_scrollStrategies$pro = scrollStrategies[props.scrollStrategy]) == null ? void 0 : _scrollStrategies$pro.call(scrollStrategies, data, props, scope);
       }
     });
   });
@@ -9041,9 +9120,10 @@ function blockScrollStrategy(data, props) {
     }
   });
 }
-function repositionScrollStrategy(data) {
+function repositionScrollStrategy(data, props, scope) {
   let slow = false;
   let raf = -1;
+  let ric = -1;
   function update(e) {
     requestNewFrame(() => {
       var _data$updateLocation$, _data$updateLocation;
@@ -9053,21 +9133,29 @@ function repositionScrollStrategy(data) {
       slow = time / (1000 / 60) > 2;
     });
   }
-  bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
-    if (slow) {
-      // If the position calculation is slow,
-      // defer updates until scrolling is finished.
-      // Browsers usually fire one scroll event per frame so
-      // we just wait until we've got two frames without an event
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(() => {
-        raf = requestAnimationFrame(() => {
+  ric = requestIdleCallback(() => {
+    scope.run(() => {
+      bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+        if (slow) {
+          // If the position calculation is slow,
+          // defer updates until scrolling is finished.
+          // Browsers usually fire one scroll event per frame so
+          // we just wait until we've got two frames without an event
+          cancelAnimationFrame(raf);
+          raf = requestAnimationFrame(() => {
+            raf = requestAnimationFrame(() => {
+              update(e);
+            });
+          });
+        } else {
           update(e);
-        });
+        }
       });
-    } else {
-      update(e);
-    }
+    });
+  });
+  onScopeDispose(() => {
+    cancelIdleCallback(ric);
+    cancelAnimationFrame(raf);
   });
 }
 
@@ -9296,19 +9384,18 @@ function useTeleport(target) {
       warn(`Unable to locate target ${_target}`);
       return undefined;
     }
-    if (!useTeleport.cache.has(targetElement)) {
-      const el = document.createElement('div');
-      el.className = 'v-overlay-container';
-      targetElement.appendChild(el);
-      useTeleport.cache.set(targetElement, el);
+    let container = targetElement.querySelector('.v-overlay-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'v-overlay-container';
+      targetElement.appendChild(container);
     }
-    return useTeleport.cache.get(targetElement);
+    return container;
   });
   return {
     teleportTarget
   };
 }
-useTeleport.cache = new WeakMap();
 
 function defaultConditional() {
   return true;
@@ -9711,6 +9798,11 @@ const VMenu = genericComponent()({
     function onClickOutside() {
       parent == null ? void 0 : parent.closeParents();
     }
+    const activatorProps = computed(() => mergeProps({
+      'aria-haspopup': 'menu',
+      'aria-expanded': String(isActive.value),
+      'aria-owns': id.value
+    }, props.activatorProps));
     useRender(() => {
       const [overlayProps] = filterVOverlayProps(props);
       return createVNode(VOverlay, mergeProps({
@@ -9720,11 +9812,7 @@ const VMenu = genericComponent()({
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "absolute": true,
-        "activatorProps": mergeProps({
-          'aria-haspopup': 'menu',
-          'aria-expanded': String(isActive.value),
-          'aria-owns': id.value
-        }, props.activatorProps),
+        "activatorProps": activatorProps.value,
         "onClick:outside": onClickOutside
       }, scopeId), {
         activator: slots.activator,
@@ -9838,8 +9926,10 @@ const VSelect = genericComponent()({
     }
     function onKeydown(e) {
       if (props.readonly || form != null && form.isReadonly.value) return;
-      if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
+      if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
         e.preventDefault();
+      }
+      if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
         menu.value = true;
       }
       if (['Escape', 'Tab'].includes(e.key)) {
@@ -9850,15 +9940,12 @@ const VSelect = genericComponent()({
         (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
       } else if (e.key === 'ArrowUp') {
         var _listRef$value2;
-        e.preventDefault();
         (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
       } else if (e.key === 'Home') {
         var _listRef$value3;
-        e.preventDefault();
         (_listRef$value3 = listRef.value) == null ? void 0 : _listRef$value3.focus('first');
       } else if (e.key === 'End') {
         var _listRef$value4;
-        e.preventDefault();
         (_listRef$value4 = listRef.value) == null ? void 0 : _listRef$value4.focus('last');
       }
     }
@@ -9924,6 +10011,7 @@ const VSelect = genericComponent()({
             "activator": "parent",
             "contentClass": "v-select__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition
@@ -10039,7 +10127,7 @@ function filterItems(items, query, options) {
   const customFiltersLength = Object.keys((options == null ? void 0 : options.customKeyFilter) ?? {}).length;
   if (!(items != null && items.length)) return array;
   loop: for (let i = 0; i < items.length; i++) {
-    const item = items[i].raw;
+    const item = items[i];
     const customMatches = {};
     const defaultMatches = {};
     let match = -1;
@@ -10079,7 +10167,7 @@ function filterItems(items, query, options) {
   }
   return array;
 }
-function useFilter(props, items, query) {
+function useFilter(props, items, query, options) {
   const strQuery = computed(() => typeof (query == null ? void 0 : query.value) !== 'string' && typeof (query == null ? void 0 : query.value) !== 'number' ? '' : String(query.value));
   const filteredItems = ref([]);
   const filteredMatches = ref(new Map());
@@ -10090,7 +10178,7 @@ function useFilter(props, items, query) {
     const results = filterItems(transformedItems, strQuery.value, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
-      filterKeys: props.filterKeys,
+      filterKeys: unref(options == null ? void 0 : options.filterKeys) ?? props.filterKeys,
       filterMode: props.filterMode,
       noFilter: props.noFilter
     });
@@ -10201,6 +10289,9 @@ const VAutocomplete = genericComponent()({
     }
     function onKeydown(e) {
       if (props.readonly || form != null && form.isReadonly.value) return;
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+      }
       if (['Enter', 'ArrowDown'].includes(e.key)) {
         menu.value = true;
       }
@@ -10212,11 +10303,9 @@ const VAutocomplete = genericComponent()({
       }
       if (e.key === 'ArrowDown') {
         var _listRef$value;
-        e.preventDefault();
         (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
       } else if (e.key === 'ArrowUp') {
         var _listRef$value2;
-        e.preventDefault();
         (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
       }
     }
@@ -10313,6 +10402,7 @@ const VAutocomplete = genericComponent()({
             "activator": "parent",
             "contentClass": "v-autocomplete__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
@@ -11021,7 +11111,10 @@ const VCard = defineComponent({
     },
     prependAvatar: String,
     prependIcon: IconValue,
-    ripple: Boolean,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
     subtitle: String,
     text: String,
     title: String,
@@ -11142,7 +11235,7 @@ const VCard = defineComponent({
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
         }), genOverlays(isClickable.value, 'v-card')]
-      }), [[resolveDirective("ripple"), isClickable.value]]);
+      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
   }
@@ -12435,6 +12528,10 @@ const VSliderThumb = defineComponent({
     position: {
       type: Number,
       required: true
+    },
+    ripple: {
+      type: Boolean,
+      default: true
     }
   },
   emits: {
@@ -12535,7 +12632,7 @@ const VSliderThumb = defineComponent({
       }, null), withDirectives(createVNode("div", {
         "class": ['v-slider-thumb__ripple', textColorClasses.value],
         "style": textColorStyles.value
-      }, null), [[resolveDirective("ripple"), true, null, {
+      }, null), [[resolveDirective("ripple"), props.ripple, null, {
         circle: true,
         center: true
       }]]), createVNode(VScaleTransition, {
@@ -13537,7 +13634,9 @@ const VCombobox = genericComponent()({
       if (props.readonly || form != null && form.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = selected.value.length;
-      if (selectionIndex.value > -1) e.preventDefault();
+      if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+      }
       if (['Enter', 'ArrowDown'].includes(e.key)) {
         menu.value = true;
       }
@@ -13549,11 +13648,9 @@ const VCombobox = genericComponent()({
       }
       if (e.key === 'ArrowDown') {
         var _listRef$value;
-        e.preventDefault();
         (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
       } else if (e.key === 'ArrowUp') {
         var _listRef$value2;
-        e.preventDefault();
         (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
       }
       if (!props.multiple) return;
@@ -13587,7 +13684,7 @@ const VCombobox = genericComponent()({
           vTextFieldRef.value.setSelectionRange(0, 0);
         }
       }
-      if (e.key === 'Enter') {
+      if (e.key === 'Enter' && search.value) {
         select(transformItem$1(props, search.value));
         search.value = '';
       }
@@ -13676,6 +13773,7 @@ const VCombobox = genericComponent()({
             "activator": "parent",
             "contentClass": "v-combobox__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
@@ -13847,6 +13945,10 @@ const VDialog = genericComponent()({
         });
       }
     });
+    const activatorProps = computed(() => mergeProps({
+      'aria-haspopup': 'dialog',
+      'aria-expanded': String(isActive.value)
+    }, props.activatorProps));
     useRender(() => {
       const [overlayProps] = filterVOverlayProps(props);
       return createVNode(VOverlay, mergeProps({
@@ -13860,10 +13962,7 @@ const VDialog = genericComponent()({
         "onUpdate:modelValue": $event => isActive.value = $event,
         "aria-role": "dialog",
         "aria-modal": "true",
-        "activatorProps": mergeProps({
-          'aria-haspopup': 'dialog',
-          'aria-expanded': String(isActive.value)
-        }, props.activatorProps)
+        "activatorProps": activatorProps.value
       }, scopeId), {
         activator: slots.activator,
         default: function () {
@@ -14212,12 +14311,15 @@ const VFileInput = defineComponent({
       onFocus();
       nextTick(() => {
         model.value = [];
-        if (inputRef != null && inputRef.value) {
-          inputRef.value.value = '';
-        }
         callEvent(props['onClick:clear'], e);
       });
     }
+    watch(model, newValue => {
+      const hasModelReset = !Array.isArray(newValue) || !newValue.length;
+      if (hasModelReset && inputRef.value) {
+        inputRef.value.value = '';
+      }
+    });
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter);
       const hasDetails = !!(hasCounter || slots.details);
@@ -15208,7 +15310,7 @@ function useTouch(_ref) {
     window.removeEventListener('touchmove', onTouchmove);
     window.removeEventListener('touchend', onTouchend);
   });
-  const isHorizontal = computed(() => position.value !== 'bottom');
+  const isHorizontal = computed(() => ['left', 'right'].includes(position.value));
   const {
     addMovement,
     endTouch,
@@ -15220,11 +15322,11 @@ function useTouch(_ref) {
   const offset = ref(0);
   let start;
   function getOffset(pos, active) {
-    return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
+    return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'top' ? pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
   }
   function getProgress(pos) {
     let limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
+    const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'top' ? (pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
     return limit ? Math.max(0, Math.min(1, progress)) : progress;
   }
   function onTouchstart(e) {
@@ -15232,8 +15334,8 @@ function useTouch(_ref) {
     const touchX = e.changedTouches[0].clientX;
     const touchY = e.changedTouches[0].clientY;
     const touchZone = 25;
-    const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
-    const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
+    const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
+    const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
       maybeDragging = true;
       start = [touchX, touchY];
@@ -15285,6 +15387,7 @@ function useTouch(_ref) {
       isActive.value = velocity.direction === ({
         left: 'right',
         right: 'left',
+        top: 'down',
         bottom: 'up'
       }[position.value] || oops());
     } else {
@@ -15293,7 +15396,7 @@ function useTouch(_ref) {
   }
   const dragStyles = computed(() => {
     return isDragging.value ? {
-      transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
+      transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
       transition: 'none'
     } : undefined;
   });
@@ -15309,7 +15412,7 @@ function oops() {
 
 // Types
 
-const locations = ['start', 'end', 'left', 'right', 'bottom'];
+const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
 const VNavigationDrawer = defineComponent({
   name: 'VNavigationDrawer',
   props: {
@@ -15766,7 +15869,7 @@ const VPagination = defineComponent({
               disabled: !!props.disabled || props.length < 2,
               color: isActive ? props.activeColor : props.color,
               ariaCurrent: isActive,
-              ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, index + 1),
+              ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
               onClick: e => setValue(e, item)
             }
           };
@@ -17945,6 +18048,9 @@ const VTooltip = genericComponent()({
       if (props.transition) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });
+    const activatorProps = computed(() => mergeProps({
+      'aria-describedby': id.value
+    }, props.activatorProps));
     useRender(() => {
       const [overlayProps] = filterVOverlayProps(props);
       return createVNode(VOverlay, mergeProps({
@@ -17961,9 +18067,7 @@ const VTooltip = genericComponent()({
         "persistent": true,
         "role": "tooltip",
         "eager": true,
-        "activatorProps": mergeProps({
-          'aria-describedby': id.value
-        }, props.activatorProps),
+        "activatorProps": activatorProps.value,
         "_disableGlobalStack": true
       }, scopeId), {
         activator: slots.activator,
@@ -18262,10 +18366,9 @@ const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
 function createSort(props) {
   const sortBy = useProxiedModel(props, 'sortBy');
   const toggleSort = key => {
-    var _sortBy$value;
-    let newSortBy = ((_sortBy$value = sortBy.value) == null ? void 0 : _sortBy$value.map(x => ({
+    let newSortBy = sortBy.value.map(x => ({
       ...x
-    }))) ?? [];
+    })) ?? [];
     const item = newSortBy.find(x => x.key === key);
     if (!item) {
       if (props.multiSort) newSortBy = [...newSortBy, {
@@ -18307,8 +18410,7 @@ function useSortedItems(items, sortBy, columns) {
     }, {});
   });
   const sortedItems = computed(() => {
-    var _sortBy$value2;
-    if (!((_sortBy$value2 = sortBy.value) != null && _sortBy$value2.length)) return items.value;
+    if (!sortBy.value.length) return items.value;
     return sortItems(items.value, sortBy.value, 'en', customSorters.value);
   });
   return {
@@ -18507,9 +18609,13 @@ function createGroupBy(props, groupBy, sortBy) {
       order: val.order ?? false
     })).concat(sortBy.value);
   });
-  function toggleGroup(group, value) {
-    const open = value == null ? !opened.value.has(group) : value;
-    if (open) opened.value.add(group);else opened.value.delete(group);
+  function isGroupOpen(group) {
+    return opened.value.has(group.id);
+  }
+  function toggleGroup(group) {
+    const newOpened = new Set(opened.value);
+    if (!isGroupOpen(group)) newOpened.add(group.id);else newOpened.delete(group.id);
+    opened.value = newOpened;
   }
   function extractRows(items) {
     function dive(group) {
@@ -18542,7 +18648,8 @@ function createGroupBy(props, groupBy, sortBy) {
     toggleGroup,
     opened,
     groupBy,
-    extractRows
+    extractRows,
+    isGroupOpen
   };
   provide(VDataTableGroupSymbol, data);
   return data;
@@ -18628,7 +18735,7 @@ const VDataTableGroupHeaderRow = defineComponent({
       slots
     } = _ref;
     const {
-      opened,
+      isGroupOpen,
       toggleGroup,
       extractRows
     } = useGroupBy();
@@ -18651,8 +18758,8 @@ const VDataTableGroupHeaderRow = defineComponent({
     }, [columns.value.map(column => {
       if (column.key === 'data-table-group') {
         var _slots$dataTableGro;
-        const icon = opened.value.has(props.item.id) ? '$expand' : '$next';
-        const onClick = () => toggleGroup(props.item.id);
+        const icon = isGroupOpen(props.item) ? '$expand' : '$next';
+        const onClick = () => toggleGroup(props.item);
         return ((_slots$dataTableGro = slots['data-table-group']) == null ? void 0 : _slots$dataTableGro.call(slots, {
           item: props.item,
           count: rows.value.length,
@@ -18845,10 +18952,18 @@ const VDataTableRows = defineComponent({
       columns
     } = useHeaders();
     const {
-      expanded,
-      expand,
-      expandOnClick
+      expandOnClick,
+      toggleExpand,
+      isExpanded
     } = useExpanded();
+    const {
+      isSelected,
+      toggleSelect
+    } = useSelection();
+    const {
+      toggleGroup,
+      isGroupOpen
+    } = useGroupBy();
     const {
       t
     } = useLocale();
@@ -18867,23 +18982,41 @@ const VDataTableRows = defineComponent({
       })), props.items.map((item, index) => {
         var _slots$expandedRow;
         if (item.type === 'group-header') {
-          return createVNode(VDataTableGroupHeaderRow, {
+          return slots['group-header'] ? slots['group-header']({
+            index,
+            item,
+            columns: columns.value,
+            isExpanded,
+            toggleExpand,
+            isSelected,
+            toggleSelect,
+            toggleGroup,
+            isGroupOpen
+          }) : createVNode(VDataTableGroupHeaderRow, {
             "key": `group-header_${item.id}`,
             "item": item
           }, slots);
         }
-        return createVNode(Fragment, null, [createVNode(VDataTableRow, {
+        return createVNode(Fragment, null, [slots.item ? slots.item({
+          index,
+          item,
+          columns: columns.value,
+          isExpanded,
+          toggleExpand,
+          isSelected,
+          toggleSelect
+        }) : createVNode(VDataTableRow, {
           "key": `item_${item.value}`,
           "onClick": event => {
             if (expandOnClick.value) {
-              expand(item, !expanded.value.has(item.value));
+              toggleExpand(item.value);
             }
             emit('click:row', event, {
               item
             });
           },
           "item": item
-        }, slots), expanded.value.has(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
+        }, slots), isExpanded(item) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
           item,
           columns: columns.value
         }))]);
@@ -19094,7 +19227,8 @@ function useOptions(_ref) {
     sortBy,
     startIndex,
     stopIndex,
-    pageCount
+    pageCount,
+    groupBy
   } = _ref;
   const vm = getCurrentInstance('VDataTable');
   const options = computed(() => ({
@@ -19103,7 +19237,8 @@ function useOptions(_ref) {
     startIndex: startIndex.value,
     stopIndex: stopIndex.value,
     pageCount: pageCount.value,
-    sortBy: sortBy.value
+    sortBy: sortBy.value,
+    groupBy: groupBy.value
   }));
 
   // Reset page when sorting changes
@@ -19181,9 +19316,12 @@ const VDataTable = defineComponent({
     const {
       items
     } = useDataTableItems(props, columns);
+    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'));
+    } = useFilter(props, items, toRef(props, 'search'), {
+      filterKeys
+    });
     const {
       sortBy
     } = createSort(props);
@@ -19217,7 +19355,8 @@ const VDataTable = defineComponent({
       sortBy,
       pageCount,
       startIndex,
-      stopIndex
+      stopIndex,
+      groupBy
     });
     provideDefaults({
       VDataTableRows: {
@@ -19234,7 +19373,7 @@ const VDataTable = defineComponent({
       "height": props.height
     }, {
       top: slots.top,
-      default: slots.default ? slots.default() : () => {
+      default: slots.default ?? (() => {
         var _slots$colgroup, _slots$thead, _slots$tbody, _slots$tfoot;
         return createVNode(Fragment, null, [(_slots$colgroup = slots.colgroup) == null ? void 0 : _slots$colgroup.call(slots, {
           columns
@@ -19245,10 +19384,10 @@ const VDataTable = defineComponent({
           "items": paginatedItems.value,
           "onClick:row": (event, value) => emit('click:row', event, value)
         }, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
-      },
-      bottom: slots.bottom ? slots.bottom() : () => createVNode(VDataTableFooter, null, {
+      }),
+      bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
-      })
+      }))
     }));
     return {};
   }
@@ -19373,9 +19512,12 @@ const VDataTableVirtual = defineComponent({
     const {
       items
     } = useDataTableItems(props, columns);
+    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'));
+    } = useFilter(props, items, toRef(props, 'search'), {
+      filterKeys
+    });
     const {
       sortBy
     } = createSort(props);
@@ -19411,7 +19553,8 @@ const VDataTableVirtual = defineComponent({
       startIndex: ref(0),
       stopIndex: computed(() => flatItems.value.length - 1),
       pageCount: ref(1),
-      itemsPerPage: ref(-1)
+      itemsPerPage: ref(-1),
+      groupBy
     });
     provideDefaults({
       VDataTableRows: {
@@ -19487,7 +19630,8 @@ const VDataTableServer = defineComponent({
     ...makeDataTableItemProps(),
     ...makeDataTableSelectProps(),
     ...makeDataTableSortProps(),
-    ...makeDataTablePaginateProps()
+    ...makeDataTablePaginateProps(),
+    ...makeDataTableGroupProps()
   },
   emits: {
     'update:modelValue': value => true,
@@ -19496,6 +19640,7 @@ const VDataTableServer = defineComponent({
     'update:sortBy': sortBy => true,
     'update:options': options => true,
     'update:expanded': options => true,
+    'update:groupBy': value => true,
     'click:row': (event, value) => true
   },
   setup(props, _ref) {
@@ -19503,10 +19648,12 @@ const VDataTableServer = defineComponent({
       emit,
       slots
     } = _ref;
+    const groupBy = useProxiedModel(props, 'groupBy');
     createExpanded(props);
     const {
       columns
     } = createHeaders(props, {
+      groupBy,
       showSelect: toRef(props, 'showSelect'),
       showExpand: toRef(props, 'showExpand')
     });
@@ -19517,6 +19664,9 @@ const VDataTableServer = defineComponent({
       sortBy,
       toggleSort
     } = createSort(props);
+    const {
+      opened
+    } = createGroupBy(props, groupBy, sortBy);
     const {
       page,
       itemsPerPage,
@@ -19524,6 +19674,9 @@ const VDataTableServer = defineComponent({
       stopIndex,
       pageCount
     } = createPagination(props, items);
+    const {
+      flatItems
+    } = useGroupedItems(items, groupBy, opened);
     createSelection(props, items);
     useOptions({
       page,
@@ -19531,7 +19684,8 @@ const VDataTableServer = defineComponent({
       sortBy,
       startIndex,
       stopIndex,
-      pageCount
+      pageCount,
+      groupBy
     });
     provide('v-data-table', {
       toggleSort,
@@ -19554,7 +19708,7 @@ const VDataTableServer = defineComponent({
       "height": props.height
     }, {
       top: slots.top,
-      default: slots.default ? slots.default() : () => {
+      default: slots.default ?? (() => {
         var _slots$thead, _slots$tbody, _slots$tfoot;
         return createVNode(Fragment, null, [createVNode("thead", {
           "class": "v-data-table__thead",
@@ -19567,13 +19721,13 @@ const VDataTableServer = defineComponent({
           "class": "v-data-table__tbody",
           "role": "rowgroup"
         }, [slots.body ? slots.body() : createVNode(VDataTableRows, {
-          "items": items.value,
+          "items": flatItems.value,
           "onClick:row": (event, value) => emit('click:row', event, value)
         }, slots)]), (_slots$tbody = slots.tbody) == null ? void 0 : _slots$tbody.call(slots), (_slots$tfoot = slots.tfoot) == null ? void 0 : _slots$tfoot.call(slots)]);
-      },
-      bottom: slots.bottom ? slots.bottom() : () => createVNode(VDataTableFooter, null, {
+      }),
+      bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, null, {
         prepend: slots['footer.prepend']
-      })
+      }))
     }));
   }
 });
@@ -20073,7 +20227,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.1";
+const version$1 = "3.1.3";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20086,7 +20240,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.1";
+const version = "3.1.3";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};