@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.0.0-beta.0
+* Vuetify v3.0.0-beta.2
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, ref, computed, unref, provide, inject, defineComponent as defineComponent$1, getCurrentInstance as getCurrentInstance$1, shallowReactive, toRaw, watchEffect, capitalize, camelize, h, watch, readonly, onBeforeUnmount, onDeactivated, onActivated, reactive, onMounted, createVNode, toRefs, mergeProps, Transition, onBeforeMount, nextTick, withDirectives, vShow, resolveDirective, isRef, toRef, resolveDynamicComponent, TransitionGroup, effectScope, onScopeDispose, warn, toHandlers, Teleport, vModelDynamic, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, ref, computed, unref, provide, inject, defineComponent as defineComponent$1, getCurrentInstance as getCurrentInstance$1, shallowRef, shallowReactive, toRaw, watchEffect, watch, effectScope, capitalize, camelize, h, readonly, onBeforeUnmount, onDeactivated, onActivated, reactive, onMounted, createVNode, toRefs, mergeProps, Transition, onBeforeMount, nextTick, withDirectives, vShow, resolveDirective, isRef, toRef, resolveDynamicComponent, TransitionGroup, onScopeDispose, warn, toHandlers, Teleport, vModelDynamic, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
 
 class Box {
   constructor(_ref) {
@@ -793,7 +793,7 @@ function provideDefaults(defaults, options) {
       return properties;
     }
 
-    return mergeDeep(properties, properties.prev);
+    return mergeDeep(properties.prev, properties);
   });
   provide(DefaultsSymbol, newDefaults);
   return newDefaults;
@@ -818,16 +818,33 @@ const defineComponent = function defineComponent(options) {
   }
 
   if (options._setup) {
+    var _options$props;
+
+    options.props = (_options$props = options.props) != null ? _options$props : {};
+    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)
       });
 
       watchEffect(() => {
+        var _props$_as;
+
         const globalDefaults = defaults.value.global;
-        const componentDefaults = defaults.value[options.name];
+        const componentDefaults = defaults.value[(_props$_as = props._as) != null ? _props$_as : options.name];
+
+        if (componentDefaults) {
+          const subComponents = Object.entries(componentDefaults).filter(_ref => {
+            let [key] = _ref;
+            return key.startsWith('V');
+          });
+          if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
+        }
 
         for (const prop of Object.keys(props)) {
           let newVal;
@@ -835,9 +852,9 @@ const defineComponent = function defineComponent(options) {
           if (propIsDefined(vm.vnode, prop)) {
             newVal = props[prop];
           } else {
-            var _ref, _componentDefaults$pr;
+            var _ref2, _componentDefaults$pr;
 
-            newVal = (_ref = (_componentDefaults$pr = componentDefaults == null ? void 0 : componentDefaults[prop]) != null ? _componentDefaults$pr : globalDefaults == null ? void 0 : globalDefaults[prop]) != null ? _ref : props[prop];
+            newVal = (_ref2 = (_componentDefaults$pr = componentDefaults == null ? void 0 : componentDefaults[prop]) != null ? _componentDefaults$pr : globalDefaults == null ? void 0 : globalDefaults[prop]) != null ? _ref2 : props[prop];
           }
 
           if (_props[prop] !== newVal) {
@@ -845,7 +862,21 @@ const defineComponent = function defineComponent(options) {
           }
         }
       });
-      return options._setup(_props, ctx);
+
+      const setupBindings = options._setup(_props, ctx);
+
+      let scope;
+      watch(_subcomponentDefaults, (val, oldVal) => {
+        if (!val && scope) scope.stop();else if (val && !oldVal) {
+          scope = effectScope();
+          scope.run(() => {
+            provideDefaults(val);
+          });
+        }
+      }, {
+        immediate: true
+      });
+      return setupBindings;
     };
   }
 
@@ -1402,16 +1433,12 @@ function useTheme() {
 function useResizeObserver(callback) {
   const resizeRef = ref();
   const contentRect = ref();
-  const contentBoxSize = ref();
-  const borderBoxSize = ref();
 
   if (IN_BROWSER) {
     const observer = new ResizeObserver(entries => {
       callback == null ? void 0 : callback(entries, observer);
       if (!entries.length) return;
       contentRect.value = entries[0].contentRect;
-      contentBoxSize.value = entries[0].contentBoxSize[0];
-      borderBoxSize.value = entries[0].borderBoxSize[0];
     });
     onBeforeUnmount(() => {
       observer.disconnect();
@@ -1420,8 +1447,6 @@ function useResizeObserver(callback) {
       if (oldValue) {
         observer.unobserve(oldValue);
         contentRect.value = undefined;
-        contentBoxSize.value = undefined;
-        borderBoxSize.value = undefined;
       }
 
       if (newValue) observer.observe(newValue);
@@ -1432,16 +1457,15 @@ function useResizeObserver(callback) {
 
   return {
     resizeRef,
-    contentRect: readonly(contentRect),
-    contentBoxSize: readonly(contentBoxSize),
-    borderBoxSize: readonly(borderBoxSize)
+    contentRect: readonly(contentRect)
   };
 }
 
 // Composables
 
 const VuetifyLayoutKey = Symbol.for('vuetify:layout');
-const ROOT_ZINDEX$1 = 1000;
+const VuetifyLayoutItemKey = Symbol.for('vuetify:layout-item');
+const ROOT_ZINDEX = 1000;
 const makeLayoutProps = propsFactory({
   overlaps: {
     type: Array,
@@ -1472,6 +1496,9 @@ function useLayoutItem(options) {
   if (!layout) throw new Error('Could not find injected Vuetify layout');
   const id = (_options$id = options.id) != null ? _options$id : `layout-item-${getUid()}`;
   const vm = getCurrentInstance('useLayoutItem');
+  provide(VuetifyLayoutItemKey, {
+    id
+  });
   const isKeptAlive = ref(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
@@ -1523,7 +1550,7 @@ const generateLayers = (layout, positions, layoutSizes, activeItems) => {
 
 function createLayout(props) {
   const parentLayout = inject(VuetifyLayoutKey, null);
-  const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX$1);
+  const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
   const registered = ref([]);
   const positions = reactive(new Map());
   const layoutSizes = reactive(new Map());
@@ -1634,7 +1661,7 @@ function createLayout(props) {
       layoutSizes.set(id, layoutSize);
       activeItems.set(id, active);
       disableTransitions && disabledTransitions.set(id, disableTransitions);
-      const instances = findChildrenWithProvide(VuetifyLayoutKey, rootVm == null ? void 0 : rootVm.vnode);
+      const instances = findChildrenWithProvide(VuetifyLayoutItemKey, rootVm == null ? void 0 : rootVm.vnode);
       const instanceIndex = instances.indexOf(vm);
       if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);else registered.value.push(id);
       const index = computed(() => items.value.findIndex(i => i.id === id));
@@ -1647,7 +1674,7 @@ function createLayout(props) {
           [position.value]: 0,
           zIndex: zIndex.value,
           transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -110) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
-          position: absolute.value || rootZIndex.value !== ROOT_ZINDEX$1 ? 'absolute' : 'fixed',
+          position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? 'absolute' : 'fixed',
           ...(transitionsEnabled.value ? undefined : {
             transition: 'none'
           })
@@ -1663,17 +1690,17 @@ function createLayout(props) {
         }
 
         return { ...styles,
-          height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : `${elementSize.value}px`,
+          height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : elementSize.value ? `${elementSize.value}px` : undefined,
           marginLeft: isOppositeHorizontal ? undefined : `${item.left}px`,
           marginRight: isOppositeHorizontal ? `${item.right}px` : undefined,
           marginTop: position.value !== 'bottom' ? `${item.top}px` : undefined,
           marginBottom: position.value !== 'top' ? `${item.bottom}px` : undefined,
-          width: !isHorizontal ? `calc(100% - ${item.left}px - ${item.right}px)` : `${elementSize.value}px`
+          width: !isHorizontal ? `calc(100% - ${item.left}px - ${item.right}px)` : elementSize.value ? `${elementSize.value}px` : undefined
         };
       });
       const layoutItemScrimStyles = computed(() => ({
         zIndex: zIndex.value - 1,
-        position: rootZIndex.value === ROOT_ZINDEX$1 ? 'fixed' : 'absolute'
+        position: rootZIndex.value === ROOT_ZINDEX ? 'fixed' : 'absolute'
       }));
       return {
         layoutItemStyles,
@@ -2569,19 +2596,23 @@ function useForwardRef(target) {
 
     getOwnPropertyDescriptor(target, key) {
       const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
-      if (descriptor) return descriptor;
+      if (descriptor) return descriptor; // Check each ref's own properties
 
       for (const ref of refs) {
         if (!ref.value) continue;
         const descriptor = Reflect.getOwnPropertyDescriptor(ref.value, key);
         if (descriptor) return descriptor;
-      }
+      } // Recursive search up each ref's prototype
+
 
       for (const ref of refs) {
-        const obj = ref.value && Object.getPrototypeOf(ref.value);
-        if (!obj) continue;
-        const descriptor = Reflect.getOwnPropertyDescriptor(obj, key);
-        if (descriptor) return descriptor;
+        let obj = ref.value && Object.getPrototypeOf(ref.value);
+
+        while (obj) {
+          const descriptor = Reflect.getOwnPropertyDescriptor(obj, key);
+          if (descriptor) return descriptor;
+          obj = Object.getPrototypeOf(obj);
+        }
       }
 
       return undefined;
@@ -2645,24 +2676,20 @@ const VToolbar = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
-    const contentHeight = computed(() => Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
+    const isExtended = computed(() => !!(props.extended || slots.extension));
+    const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
+    const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
     provideDefaults({
       VBtn: {
         flat: true,
         variant: 'text'
-      },
-      VTextField: {
-        hideDetails: true
       }
-    }, {
-      scoped: true
     });
     useRender(() => {
       var _slots$image, _slots$prepend, _slots$default, _slots$append, _slots$extension;
 
       const hasTitle = !!(props.title || slots.title);
       const hasImage = !!(slots.image || props.image);
-      const isExtended = !!(props.extended || slots.extension);
       return createVNode(props.tag, {
         "class": ['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -2698,16 +2725,17 @@ const VToolbar = genericComponent()({
           text: slots.title
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && createVNode("div", {
           "class": "v-toolbar__append"
-        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended && createVNode("div", {
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended.value && createVNode("div", {
           "class": "v-toolbar__extension",
           "style": {
-            height: convertToUnit(props.extensionHeight)
+            height: convertToUnit(extensionHeight.value)
           }
         }, [(_slots$extension = slots.extension) == null ? void 0 : _slots$extension.call(slots)])]
       });
     });
     return useForwardRef({
-      contentHeight
+      contentHeight,
+      extensionHeight
     });
   }
 
@@ -2785,9 +2813,11 @@ const VAppBar = defineComponent({
     const vToolbarRef = ref();
     const isActive = useProxiedModel(props, 'modelValue');
     const height = computed(() => {
-      var _vToolbarRef$value;
+      var _vToolbarRef$value$co, _vToolbarRef$value, _vToolbarRef$value$ex, _vToolbarRef$value2;
 
-      return (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight;
+      const height = (_vToolbarRef$value$co = (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight) != null ? _vToolbarRef$value$co : 0;
+      const extensionHeight = (_vToolbarRef$value$ex = (_vToolbarRef$value2 = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value2.extensionHeight) != null ? _vToolbarRef$value$ex : 0;
+      return height + extensionHeight;
     });
     const {
       layoutItemStyles
@@ -2807,7 +2837,9 @@ const VAppBar = defineComponent({
         "class": ['v-app-bar', {
           'v-app-bar--bottom': props.position === 'bottom'
         }],
-        "style": layoutItemStyles.value
+        "style": { ...layoutItemStyles.value,
+          height: undefined
+        }
       }, toolbarProps), slots);
     };
   }
@@ -2845,7 +2877,6 @@ function genOverlays(isClickable, name) {
 }
 const makeVariantProps = propsFactory({
   color: String,
-  textColor: String,
   variant: {
     type: String,
     default: 'contained',
@@ -2865,12 +2896,10 @@ function useVariant(props) {
     colorStyles
   } = useColor(computed(() => {
     const {
-      textColor,
       variant,
       color
     } = unref(props);
     return {
-      text: textColor,
       [['contained', 'contained-flat'].includes(variant) ? 'background' : 'text']: color
     };
   }));
@@ -2981,10 +3010,11 @@ function useGroupItem(props, injectKey) {
   const isSelected = computed(() => {
     return group.isSelected(id);
   });
-  const selectedClass = computed(() => {
-    var _group$selectedClass$;
-
-    return isSelected.value && ((_group$selectedClass$ = group.selectedClass.value) != null ? _group$selectedClass$ : props.selectedClass);
+  const selectedClass = computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
+  watch(isSelected, value => {
+    vm.emit('group:selected', {
+      value
+    });
   });
   return {
     id,
@@ -3111,12 +3141,19 @@ function useGroup(props, injectKey) {
     next: () => step(1),
     isSelected: id => selected.value.includes(id),
     selectedClass: computed(() => props.selectedClass),
-    items: computed(() => items)
+    items: computed(() => items),
+    getItemIndex: value => getItemIndex(items, value)
   };
   provide(injectKey, state);
   return state;
 }
 
+function getItemIndex(items, value) {
+  const ids = getIds(items, [value]);
+  if (!ids.length) return -1;
+  return items.findIndex(item => item.id === ids[0]);
+}
+
 function getIds(items, modelValue) {
   const ids = [];
 
@@ -3344,24 +3381,26 @@ const useIcon = props => {
   };
 };
 
+const makeVIconProps = propsFactory({
+  color: String,
+  start: Boolean,
+  end: Boolean,
+  icon: {
+    type: [String, Object]
+  },
+  ...makeSizeProps(),
+  ...makeTagProps({
+    tag: 'i'
+  }),
+  ...makeThemeProps()
+}, 'v-icon');
 const VIcon = defineComponent({
   name: 'VIcon',
-  props: {
-    color: String,
-    left: Boolean,
-    right: Boolean,
-    icon: {
-      type: [String, Object]
-    },
-    ...makeSizeProps(),
-    ...makeTagProps({
-      tag: 'i'
-    }),
-    ...makeThemeProps()
-  },
+  props: makeVIconProps(),
 
   setup(props, _ref) {
     let {
+      attrs,
       slots
     } = _ref;
     let slotIcon;
@@ -3394,8 +3433,9 @@ const VIcon = defineComponent({
         "tag": props.tag,
         "icon": iconData.value.icon,
         "class": ['v-icon', 'notranslate', sizeClasses.value, textColorClasses.value, themeClasses.value, {
-          'v-icon--left': props.left,
-          'v-icon--right': props.right
+          'v-icon--clickable': !!attrs.onClick,
+          'v-icon--start': props.start,
+          'v-icon--end': props.end
         }],
         "style": [!sizeClasses.value ? {
           fontSize: convertToUnit(props.size),
@@ -3485,21 +3525,33 @@ const makeRouterProps = propsFactory({
   replace: Boolean,
   to: [String, Object]
 }, 'router');
+let inTransition = false;
 function useBackButton(cb) {
   const router = useRouter();
   let popped = false;
-  let removeGuard;
+  let removeBefore;
+  let removeAfter;
   onMounted(() => {
     window.addEventListener('popstate', onPopstate);
-    removeGuard = router == null ? void 0 : router.beforeEach((to, from, next) => {
-      setTimeout(() => popped ? cb(next) : next());
+    removeBefore = router == null ? void 0 : router.beforeEach((to, from, next) => {
+      if (!inTransition) {
+        setTimeout(() => popped ? cb(next) : next());
+      } else {
+        popped ? cb(next) : next();
+      }
+
+      inTransition = true;
+    });
+    removeAfter = router == null ? void 0 : router.afterEach(() => {
+      inTransition = false;
     });
   });
   onBeforeUnmount(() => {
-    var _removeGuard;
+    var _removeBefore, _removeAfter;
 
     window.removeEventListener('popstate', onPopstate);
-    (_removeGuard = removeGuard) == null ? void 0 : _removeGuard();
+    (_removeBefore = removeBefore) == null ? void 0 : _removeBefore();
+    (_removeAfter = removeAfter) == null ? void 0 : _removeAfter();
   });
 
   function onPopstate(e) {
@@ -3511,9 +3563,27 @@ function useBackButton(cb) {
   }
 }
 
+// Utilities
+
+function useSelectLink(link, select) {
+  watch(() => {
+    var _link$isExactActive;
+
+    return (_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value;
+  }, isExactActive => {
+    if (link.isLink.value && isExactActive && select) {
+      nextTick(() => {
+        select(true);
+      });
+    }
+  }, {
+    immediate: true
+  });
+}
+
 // Styles
 
-const rippleStop = Symbol('rippleStop');
+const stopSymbol = Symbol('rippleStop');
 const DELAY_RIPPLE = 80;
 
 function transform(el, value) {
@@ -3661,9 +3731,9 @@ function isRippleEnabled(value) {
 function rippleShow(e) {
   const value = {};
   const element = e.currentTarget;
-  if (!(element != null && element._ripple) || element._ripple.touched || e[rippleStop]) return; // Don't allow the event to trigger ripples on any other elements
+  if (!(element != null && element._ripple) || element._ripple.touched || e[stopSymbol]) return; // Don't allow the event to trigger ripples on any other elements
 
-  e[rippleStop] = true;
+  e[stopSymbol] = true;
 
   if (isTouchEvent(e)) {
     element._ripple.touched = true;
@@ -3704,6 +3774,10 @@ function rippleShow(e) {
   }
 }
 
+function rippleStop(e) {
+  e[stopSymbol] = true;
+}
+
 function rippleHide(e) {
   const element = e.currentTarget;
   if (!element || !element._ripple) return;
@@ -3784,6 +3858,14 @@ function updateRipple(el, binding, wasEnabled) {
   }
 
   if (enabled && !wasEnabled) {
+    if (modifiers.stop) {
+      el.addEventListener('touchstart', rippleStop, {
+        passive: true
+      });
+      el.addEventListener('mousedown', rippleStop);
+      return;
+    }
+
     el.addEventListener('touchstart', rippleShow, {
       passive: true
     });
@@ -3853,6 +3935,11 @@ const VBtn = defineComponent({
     Ripple
   },
   props: {
+    active: Boolean,
+    symbol: {
+      type: null,
+      default: VBtnToggleSymbol
+    },
     flat: Boolean,
     icon: [Boolean, String],
     prependIcon: String,
@@ -3916,21 +4003,22 @@ const VBtn = defineComponent({
     const {
       sizeClasses
     } = useSize(props);
-    const group = useGroupItem(props, VBtnToggleSymbol, false);
+    const group = useGroupItem(props, props.symbol, false);
     const link = useLink(props, attrs);
     const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
     const isElevated = computed(() => {
       return props.variant === 'contained' && !(props.disabled || props.flat || props.border);
     });
+    useSelectLink(link, group == null ? void 0 : group.select);
     return () => {
-      var _link$isExactActive, _slots$default;
+      var _slots$default;
 
       const Tag = link.isLink.value ? 'a' : props.tag;
       const hasColor = !group || group.isSelected.value;
       return withDirectives(createVNode(Tag, {
         "type": Tag === 'a' ? undefined : 'button',
         "class": ['v-btn', group == null ? void 0 : group.selectedClass.value, {
-          'v-btn--active': (_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value,
+          'v-btn--active': props.active,
           'v-btn--block': props.block,
           'v-btn--disabled': isDisabled.value,
           'v-btn--elevated': isElevated.value,
@@ -3941,12 +4029,18 @@ const VBtn = defineComponent({
         "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, positionStyles.value],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
-        "onClick": isDisabled.value || link.navigate || (group == null ? void 0 : group.toggle)
+        "onClick": e => {
+          var _link$navigate;
+
+          if (isDisabled.value) return;
+          (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+          group == null ? void 0 : group.toggle();
+        }
       }, {
         default: () => [genOverlays(true, 'v-btn'), !props.icon && props.prependIcon && createVNode(VIcon, {
           "class": "v-btn__icon",
           "icon": props.prependIcon,
-          "left": !props.stacked
+          "start": true
         }, null), typeof props.icon === 'boolean' ? (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots) : createVNode(VIcon, {
           "class": "v-btn__icon",
           "icon": props.icon,
@@ -3954,7 +4048,7 @@ const VBtn = defineComponent({
         }, null), !props.icon && props.appendIcon && createVNode(VIcon, {
           "class": "v-btn__icon",
           "icon": props.appendIcon,
-          "right": !props.stacked
+          "end": true
         }, null)]
       }), [[resolveDirective("ripple"), !isDisabled.value && props.ripple, null]]);
     };
@@ -4004,7 +4098,6 @@ const VToolbarItems = defineComponent({
     provideDefaults({
       VBtn: {
         color: toRef(props, 'color'),
-        textColor: toRef(props, 'textColor'),
         variant: toRef(props, 'variant')
       }
     });
@@ -4031,6 +4124,7 @@ const VAppBarTitle = defineComponent({ ...VToolbarTitle,
 
 });
 
+// Utilities
 const VAlertTitle = createSimpleFunctional('v-alert-title');
 
 const allowedTypes = ['success', 'info', 'warning', 'error'];
@@ -4100,7 +4194,6 @@ const VAlert = defineComponent({
 
       return {
         color: (_props$color = props.color) != null ? _props$color : props.type,
-        textColor: props.textColor,
         variant: props.variant
       };
     });
@@ -4140,9 +4233,10 @@ const VAlert = defineComponent({
     return () => {
       var _slots$default;
 
-      const hasClose = !!(slots.close || props.closable);
       const hasPrepend = !!(slots.prepend || icon.value);
       const hasTitle = !!(slots.title || props.title);
+      const hasText = !!(props.text || slots.text);
+      const hasClose = !!(slots.close || props.closable);
       return isActive.value && createVNode(props.tag, {
         "class": ['v-alert', props.border && {
           'v-alert--border': !!props.border,
@@ -4156,43 +4250,57 @@ const VAlert = defineComponent({
         default: () => [genOverlays(false, 'v-alert'), props.border && createVNode("div", {
           "class": ['v-alert__border', textColorClasses.value],
           "style": textColorStyles.value
-        }, null), hasPrepend && createVNode("div", {
-          "class": "v-alert__prepend"
-        }, [slots.prepend ? slots.prepend() : createVNode(VIcon, {
-          "icon": icon.value,
-          "size": props.prominent ? 'large' : 'default'
-        }, null)]), createVNode("div", {
+        }, null), hasPrepend && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VIcon: {
+              density: props.density,
+              icon: icon.value,
+              size: props.prominent ? 44 : 'default'
+            }
+          }
+        }, {
+          default: () => [createVNode("div", {
+            "class": "v-alert__prepend"
+          }, [slots.prepend ? slots.prepend() : icon.value && createVNode(VIcon, null, null)])]
+        }), createVNode("div", {
           "class": "v-alert__content"
         }, [hasTitle && createVNode(VAlertTitle, null, {
           default: () => [slots.title ? slots.title() : props.title]
-        }), slots.text ? slots.text() : props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && createVNode("div", {
+        }), hasText && (slots.text ? slots.text() : props.text), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && createVNode("div", {
           "class": "v-alert__append"
-        }, [slots.append()]), hasClose && createVNode("div", {
-          "class": "v-alert__close",
-          "onClick": onCloseClick
-        }, [slots.close ? slots.close() : createVNode(VIcon, {
-          "icon": props.closeIcon,
-          "size": "small"
-        }, null)])]
+        }, [slots.append()]), hasClose && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VIcon: {
+              icon: props.closeIcon,
+              size: 'small'
+            }
+          }
+        }, {
+          default: () => [createVNode("div", {
+            "class": "v-alert__close",
+            "onClick": onCloseClick
+          }, [slots.close ? slots.close() : createVNode(VIcon, null, null)])]
+        })]
       });
     };
   }
 
 });
 
+const makeVAvatarProps = propsFactory({
+  color: String,
+  start: Boolean,
+  end: Boolean,
+  icon: String,
+  image: String,
+  ...makeDensityProps(),
+  ...makeRoundedProps(),
+  ...makeSizeProps(),
+  ...makeTagProps()
+});
 const VAvatar = defineComponent({
   name: 'VAvatar',
-  props: {
-    color: String,
-    left: Boolean,
-    right: Boolean,
-    icon: String,
-    image: String,
-    ...makeDensityProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeTagProps()
-  },
+  props: makeVAvatarProps(),
 
   setup(props, _ref) {
     let {
@@ -4217,8 +4325,8 @@ const VAvatar = defineComponent({
 
       return createVNode(props.tag, {
         "class": ['v-avatar', {
-          'v-avatar--left': props.left,
-          'v-avatar--right': props.right
+          'v-avatar--start': props.start,
+          'v-avatar--end': props.end
         }, backgroundColorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value],
         "style": [backgroundColorStyles.value, sizeStyles.value]
       }, {
@@ -4847,139 +4955,109 @@ function useList() {
   return inject(ListKey, null);
 }
 
-const singleOpenStrategy = _ref => {
-  let {
-    id,
-    value,
-    opened,
-    parents
-  } = _ref;
-
-  if (value) {
-    const newOpened = new Set();
-    newOpened.add(id);
-    let parent = parents.get(id);
-
-    while (parent != null) {
-      newOpened.add(parent);
-      parent = parents.get(parent);
-    }
+const singleOpenStrategy = {
+  open: _ref => {
+    let {
+      id,
+      value,
+      opened,
+      parents
+    } = _ref;
 
-    return newOpened;
-  } else {
-    opened.delete(id);
-    return opened;
-  }
-};
-const multipleOpenStrategy = _ref2 => {
-  let {
-    id,
-    value,
-    opened,
-    parents
-  } = _ref2;
+    if (value) {
+      const newOpened = new Set();
+      newOpened.add(id);
+      let parent = parents.get(id);
 
-  if (value) {
-    let parent = parents.get(id);
-    opened.add(id);
+      while (parent != null) {
+        newOpened.add(parent);
+        parent = parents.get(parent);
+      }
 
-    while (parent != null && parent !== id) {
-      opened.add(parent);
-      parent = parents.get(parent);
+      return newOpened;
+    } else {
+      opened.delete(id);
+      return opened;
     }
-
-    return opened;
-  } else {
-    opened.delete(id);
-  }
-
-  return opened;
+  },
+  select: () => null
 };
-
-const independentSelectStrategy = {
-  select: _ref => {
+const multipleOpenStrategy = {
+  open: _ref2 => {
     let {
       id,
       value,
-      mandatory,
-      selected
-    } = _ref;
-    selected.set(id, value ? 'on' : mandatory && !Array.from(selected.entries()).find(_ref2 => {
-      let [key, value] = _ref2;
-      return value === 'on' && key !== id;
-    }) ? 'on' : 'off');
-    return selected;
-  },
-  in: (v, children, parents) => {
-    let map = new Map();
+      opened,
+      parents
+    } = _ref2;
 
-    for (const id of v || []) {
-      map = independentSelectStrategy.select({
-        id,
-        value: true,
-        selected: new Map(map),
-        children,
-        parents
-      });
-    }
+    if (value) {
+      let parent = parents.get(id);
+      opened.add(id);
 
-    return map;
-  },
-  out: v => {
-    const arr = [];
+      while (parent != null && parent !== id) {
+        opened.add(parent);
+        parent = parents.get(parent);
+      }
 
-    for (const [key, value] of v.entries()) {
-      if (value === 'on') arr.push(key);
+      return opened;
+    } else {
+      opened.delete(id);
     }
 
-    return arr;
-  }
+    return opened;
+  },
+  select: () => null
 };
-const independentSingleSelectStrategy = {
+const listOpenStrategy = {
+  open: multipleOpenStrategy.open,
   select: _ref3 => {
     let {
       id,
       value,
-      ...rest
+      opened,
+      parents
     } = _ref3;
-    return independentSelectStrategy.select({ ...rest,
-      id,
-      value,
-      selected: new Map()
-    });
-  },
-  in: (v, children, parents) => {
-    let map = new Map();
+    if (!value) return opened;
+    const path = [];
+    let parent = parents.get(id);
 
-    if (v != null && v.length) {
-      map = independentSelectStrategy.in(v.slice(0, 1), children, parents);
+    while (parent != null) {
+      path.push(parent);
+      parent = parents.get(parent);
     }
 
-    return map;
-  },
-  out: (v, children, parents) => {
-    return independentSelectStrategy.out(v, children, parents);
+    return new Set(path);
   }
 };
-const leafSelectStrategy = function () {
-  let single = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+/* eslint-disable sonarjs/no-identical-functions */
+const independentSelectStrategy = mandatory => {
   const strategy = {
-    select: _ref4 => {
+    select: _ref => {
       let {
         id,
         value,
-        selected,
-        children
-      } = _ref4;
-      if (children.has(id)) return selected;
-      if (single) return new Map([[id, value ? 'on' : 'off']]);
+        selected
+      } = _ref;
+
+      // When mandatory and we're trying to deselect when id
+      // is the only currently selected item then do nothing
+      if (mandatory && !value) {
+        const on = Array.from(selected.entries()).reduce((arr, _ref2) => {
+          let [key, value] = _ref2;
+          return value === 'on' ? [...arr, key] : arr;
+        }, []);
+        if (on.length === 1 && on[0] === id) return selected;
+      }
+
       selected.set(id, value ? 'on' : 'off');
       return selected;
     },
     in: (v, children, parents) => {
       let map = new Map();
 
-      for (const id of v != null ? v : []) {
+      for (const id of v || []) {
         map = strategy.select({
           id,
           value: true,
@@ -4991,66 +5069,164 @@ const leafSelectStrategy = function () {
 
       return map;
     },
-    out: independentSelectStrategy.out
+    out: v => {
+      const arr = [];
+
+      for (const [key, value] of v.entries()) {
+        if (value === 'on') arr.push(key);
+      }
+
+      return arr;
+    }
   };
   return strategy;
 };
-const classicSelectStrategy = {
-  select: _ref5 => {
-    let {
-      id,
-      value,
-      selected,
-      children,
-      parents
-    } = _ref5;
-    const items = [id];
-
-    while (items.length) {
-      const item = items.shift();
-      selected.set(item, value ? 'on' : 'off');
+const independentSingleSelectStrategy = mandatory => {
+  const parentStrategy = independentSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref3 => {
+      let {
+        selected,
+        id,
+        ...rest
+      } = _ref3;
+      const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
+      return parentStrategy.select({ ...rest,
+        id,
+        selected: singleSelected
+      });
+    },
+    in: (v, children, parents) => {
+      let map = new Map();
 
-      if (children.has(item)) {
-        items.push(...children.get(item));
+      if (v != null && v.length) {
+        map = parentStrategy.in(v.slice(0, 1), children, parents);
       }
-    }
-
-    let parent = parents.get(id);
 
-    while (parent) {
-      const childrenIds = children.get(parent);
-      const everySelected = childrenIds.every(cid => selected.get(cid) === 'on');
-      const noneSelected = childrenIds.every(cid => !selected.has(cid) || selected.get(cid) === 'off');
-      selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
-      parent = parents.get(parent);
+      return map;
+    },
+    out: (v, children, parents) => {
+      return parentStrategy.out(v, children, parents);
     }
-
-    return selected;
-  },
-  in: (v, children, parents) => {
-    let map = new Map();
-
-    for (const id of v || []) {
-      map = classicSelectStrategy.select({
+  };
+  return strategy;
+};
+const leafSelectStrategy = mandatory => {
+  const parentStrategy = independentSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref4 => {
+      let {
         id,
-        value: true,
-        selected: new Map(map),
+        selected,
         children,
-        parents
+        ...rest
+      } = _ref4;
+      if (children.has(id)) return selected;
+      return parentStrategy.select({
+        id,
+        selected,
+        children,
+        ...rest
       });
-    }
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+const leafSingleSelectStrategy = mandatory => {
+  const parentStrategy = independentSingleSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref5 => {
+      let {
+        id,
+        selected,
+        children,
+        ...rest
+      } = _ref5;
+      if (children.has(id)) return selected;
+      return parentStrategy.select({
+        id,
+        selected,
+        children,
+        ...rest
+      });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+const classicSelectStrategy = mandatory => {
+  const strategy = {
+    select: _ref6 => {
+      let {
+        id,
+        value,
+        selected,
+        children,
+        parents
+      } = _ref6;
+      const original = new Map(selected);
+      const items = [id];
 
-    return map;
-  },
-  out: (v, children) => {
-    const arr = [];
+      while (items.length) {
+        const item = items.shift();
+        selected.set(item, value ? 'on' : 'off');
 
-    for (const [key, value] of v.entries()) {
-      if (value === 'on' && !children.has(key)) arr.push(key);
-    }
+        if (children.has(item)) {
+          items.push(...children.get(item));
+        }
+      }
 
-    return arr;
-  }
+      let parent = parents.get(id);
+
+      while (parent) {
+        const childrenIds = children.get(parent);
+        const everySelected = childrenIds.every(cid => selected.get(cid) === 'on');
+        const noneSelected = childrenIds.every(cid => !selected.has(cid) || selected.get(cid) === 'off');
+        selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
+        parent = parents.get(parent);
+      } // If mandatory and planned deselect results in no selected
+      // items then we can't do it, so return original state
+
+
+      if (mandatory && !value) {
+        const on = Array.from(selected.entries()).reduce((arr, _ref7) => {
+          let [key, value] = _ref7;
+          return value === 'on' ? [...arr, key] : arr;
+        }, []);
+        if (on.length === 0) return original;
+      }
+
+      return selected;
+    },
+    in: (v, children, parents) => {
+      let map = new Map();
+
+      for (const id of v || []) {
+        map = strategy.select({
+          id,
+          value: true,
+          selected: new Map(map),
+          children,
+          parents
+        });
+      }
+
+      return map;
+    },
+    out: (v, children) => {
+      const arr = [];
+
+      for (const [key, value] of v.entries()) {
+        if (value === 'on' && !children.has(key)) arr.push(key);
+      }
+
+      return arr;
+    }
+  };
+  return strategy;
 };
 
 const VNestedSymbol = Symbol.for('vuetify:nested');
@@ -5085,26 +5261,29 @@ const useNested = props => {
 
     switch (props.selectStrategy) {
       case 'single-leaf':
-        return leafSelectStrategy(true);
+        return leafSingleSelectStrategy(props.mandatory);
 
       case 'leaf':
-        return leafSelectStrategy();
+        return leafSelectStrategy(props.mandatory);
 
       case 'independent':
-        return independentSelectStrategy;
+        return independentSelectStrategy(props.mandatory);
 
       case 'single-independent':
-        return independentSingleSelectStrategy;
+        return independentSingleSelectStrategy(props.mandatory);
 
       case 'classic':
       default:
-        return classicSelectStrategy;
+        return classicSelectStrategy(props.mandatory);
     }
   });
   const openStrategy = computed(() => {
     if (typeof props.openStrategy === 'function') return props.openStrategy;
 
     switch (props.openStrategy) {
+      case 'list':
+        return listOpenStrategy;
+
       case 'single':
         return singleOpenStrategy;
 
@@ -5175,7 +5354,7 @@ const useNested = props => {
           path: getPath(id),
           event
         });
-        const newOpened = openStrategy.value({
+        const newOpened = openStrategy.value.open({
           id,
           value,
           opened: new Set(opened.value),
@@ -5198,10 +5377,19 @@ const useNested = props => {
           selected: new Map(selected.value),
           children: children.value,
           parents: parents.value,
-          event,
-          mandatory: props.mandatory
+          event
         });
         newSelected && (selected.value = newSelected);
+        const newOpened = openStrategy.value.select({
+          id,
+          value,
+          selected: new Map(selected.value),
+          opened: new Set(opened.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newOpened && (opened.value = newOpened);
       },
       children,
       parents
@@ -5225,11 +5413,12 @@ const useNestedItem = (id, isGroup) => {
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
     isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
-    isLeaf: computed(() => !parent.root.children.value.get(computedId.value))
+    isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
+    isGroupActivator: parent.isGroupActivator
   };
-  !parent.skipRegister && parent.root.register(computedId.value, parent.id.value, isGroup);
+  !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
   onBeforeUnmount(() => {
-    !parent.skipRegister && parent.root.unregister(computedId.value);
+    !parent.isGroupActivator && parent.root.unregister(computedId.value);
   });
   isGroup && provide(VNestedSymbol, item);
   return item;
@@ -5237,11 +5426,11 @@ const useNestedItem = (id, isGroup) => {
 const useNestedGroupActivator = () => {
   const parent = inject(VNestedSymbol, emptyNested);
   provide(VNestedSymbol, { ...parent,
-    skipRegister: true
+    isGroupActivator: true
   });
 };
 
-const VListGroupActivator = defineComponent$1({
+const VListGroupActivator = defineComponent({
   name: 'VListGroupActivator',
 
   setup(_, _ref) {
@@ -5260,6 +5449,8 @@ const VListGroupActivator = defineComponent$1({
 const VListGroup = genericComponent()({
   name: 'VListGroup',
   props: {
+    activeColor: String,
+    color: String,
     collapseIcon: {
       type: String,
       default: '$collapse'
@@ -5286,11 +5477,17 @@ const VListGroup = genericComponent()({
       open(!isOpen.value, e);
     };
 
-    const activatorProps = computed(() => ({
-      onClick,
-      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-      class: 'v-list-group__header'
-    }));
+    const activatorProps = computed(() => {
+      var _props$activeColor;
+
+      return {
+        onClick,
+        active: isOpen.value,
+        appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
+        class: 'v-list-group__header',
+        color: isOpen.value ? (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color : undefined
+      };
+    });
     return () => {
       var _slots$default2;
 
@@ -5299,9 +5496,18 @@ const VListGroup = genericComponent()({
           'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
         }]
       }, {
-        default: () => [slots.activator && createVNode(VListGroupActivator, null, {
-          default: () => [slots.activator({
-            props: activatorProps.value
+        default: () => [slots.activator && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VListItemIcon: {
+              color: activatorProps.value.color
+            }
+          }
+        }, {
+          default: () => [createVNode(VListGroupActivator, null, {
+            default: () => [slots.activator({
+              props: activatorProps.value,
+              isOpen
+            })]
           })]
         }), createVNode(VExpandTransition, null, {
           default: () => [withDirectives(createVNode("div", {
@@ -5316,30 +5522,42 @@ const VListGroup = genericComponent()({
 
 const VListItemAvatar = defineComponent({
   name: 'VListItemAvatar',
-  props: {
-    left: Boolean,
-    right: Boolean,
-    ...makeTagProps()
-  },
+  props: makeVAvatarProps(),
 
   setup(props, _ref) {
     let {
       slots
     } = _ref;
-    return () => {
-      return createVNode(props.tag, {
-        "class": ['v-list-item-avatar', {
-          'v-list-item-avatar--start': props.left,
-          'v-list-item-avatar--end': props.right
-        }]
-      }, slots);
-    };
+    return () => createVNode(VAvatar, mergeProps({
+      "class": ['v-list-item-avatar', {
+        'v-list-item-avatar--start': props.start,
+        'v-list-item-avatar--end': props.end
+      }]
+    }, props), slots);
   }
 
 });
 
 const VListItemHeader = createSimpleFunctional('v-list-item-header');
 
+const VListItemIcon = defineComponent({
+  name: 'VListItemIcon',
+  props: makeVIconProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => createVNode(VIcon, mergeProps({
+      "class": ['v-list-item-icon', {
+        'v-list-item-icon--start': props.start,
+        'v-list-item-icon--end': props.end
+      }]
+    }, props), slots);
+  }
+
+});
+
 const VListItemSubtitle = createSimpleFunctional('v-list-item-subtitle');
 
 const VListItemTitle = createSimpleFunctional('v-list-item-title');
@@ -5356,12 +5574,14 @@ const VListItem = genericComponent()({
     appendAvatar: String,
     appendIcon: String,
     disabled: Boolean,
-    link: Boolean,
+    lines: String,
+    nav: Boolean,
     prependAvatar: String,
     prependIcon: String,
     subtitle: String,
     title: String,
     value: null,
+    link: Boolean,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -5389,6 +5609,8 @@ const VListItem = genericComponent()({
     const {
       select,
       isSelected,
+      isIndeterminate,
+      isGroupActivator,
       root,
       parent
     } = useNestedItem(id, false);
@@ -5398,13 +5620,12 @@ const VListItem = genericComponent()({
 
       return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value;
     });
+    const roundedProps = computed(() => props.rounded || props.nav);
     const variantProps = computed(() => {
       var _props$activeColor;
 
-      const activeColor = (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color;
       return {
-        color: isActive.value ? activeColor : props.color,
-        textColor: props.textColor,
+        color: isActive.value ? (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color : props.color,
         variant: props.variant
       };
     });
@@ -5446,50 +5667,53 @@ const VListItem = genericComponent()({
     } = useElevation(props);
     const {
       roundedClasses
-    } = useRounded(props);
+    } = useRounded(roundedProps);
+    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
-      isSelected: isSelected.value
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value
     }));
     useRender(() => {
-      var _slots$default;
+      var _slots$prepend, _slots$default, _slots$append;
 
       const Tag = link.isLink.value ? 'a' : props.tag;
+      const hasColor = !list || isSelected.value || isActive.value;
       const hasTitle = slots.title || props.title;
       const hasSubtitle = slots.subtitle || props.subtitle;
       const hasHeader = !!(hasTitle || hasSubtitle);
       const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
       const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
-      const isClickable = !props.disabled && (link.isClickable.value || props.link || props.value != null);
+      const isClickable = !props.disabled && (props.link || link.isClickable.value || props.value != null && !!list);
       list == null ? void 0 : list.updateHasPrepend(hasPrepend);
       return withDirectives(createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
           'v-list-item--disabled': props.disabled,
           'v-list-item--link': isClickable,
+          'v-list-item--nav': props.nav,
           'v-list-item--prepend': !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
-          [`${props.activeClass}`]: isActive.value && props.activeClass
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value],
+          [`${props.activeClass}`]: isActive.value
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
         "href": link.href.value,
         "tabindex": isClickable ? 0 : undefined,
         "onClick": isClickable && (e => {
           var _link$navigate;
 
+          if (isGroupActivator) return;
           (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
-          select(!isSelected.value, e);
+          props.value != null && select(!isSelected.value, e);
         })
       }, {
-        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && (slots.prepend ? slots.prepend(slotProps.value) : createVNode(VListItemAvatar, {
-          "left": true
-        }, {
-          default: () => [createVNode(VAvatar, {
-            "density": props.density,
-            "icon": props.prependIcon,
-            "image": props.prependAvatar
-          }, null)]
-        })), hasHeader && createVNode(VListItemHeader, null, {
+        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && createVNode(Fragment, null, [props.prependAvatar && createVNode(VListItemAvatar, {
+          "image": props.prependAvatar,
+          "start": true
+        }, null), props.prependIcon && createVNode(VListItemIcon, {
+          "icon": props.prependIcon,
+          "start": true
+        }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), hasHeader && createVNode(VListItemHeader, null, {
           default: () => [hasTitle && createVNode(VListItemTitle, null, {
             default: () => [slots.title ? slots.title({
               title: props.title
@@ -5499,15 +5723,13 @@ const VListItem = genericComponent()({
               subtitle: props.subtitle
             }) : props.subtitle]
           })]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && (slots.append ? slots.append(slotProps.value) : createVNode(VListItemAvatar, {
-          "right": true
-        }, {
-          default: () => [createVNode(VAvatar, {
-            "density": props.density,
-            "icon": props.appendIcon,
-            "image": props.appendAvatar
-          }, null)]
-        }))]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), hasAppend && createVNode(Fragment, null, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendAvatar && createVNode(VListItemAvatar, {
+          "image": props.appendAvatar,
+          "end": true
+        }, null), props.appendIcon && createVNode(VListItemIcon, {
+          "icon": props.appendIcon,
+          "end": true
+        }, null)])]
       }), [[resolveDirective("ripple"), isClickable]]);
     });
   }
@@ -5585,7 +5807,7 @@ const VListChildren = genericComponent()({
             } = _ref3;
             return slots.header ? slots.header({ ...itemProps,
               ...activatorProps
-            }) : createVNode(VListItem, mergeProps(itemProps, activatorProps), null);
+            }) : createVNode(VListItem, mergeProps(itemProps, activatorProps), slots);
           },
           default: () => createVNode(VListChildren, {
             "items": children
@@ -5629,17 +5851,19 @@ const parseItems$1 = items => {
 const VList = genericComponent()({
   name: 'VList',
   props: {
-    color: String,
+    activeColor: String,
+    activeClass: String,
+    bgColor: String,
     disabled: Boolean,
     lines: {
-      type: String,
+      type: [Boolean, String],
       default: 'one'
     },
     nav: Boolean,
     items: Array,
     ...makeNestedProps({
       selectStrategy: 'single-leaf',
-      openStrategy: 'multiple'
+      openStrategy: 'list'
     }),
     ...makeBorderProps(),
     ...makeDensityProps(),
@@ -5647,7 +5871,10 @@ const VList = genericComponent()({
     ...makeElevationProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
-    ...makeThemeProps()
+    ...makeThemeProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
   },
   emits: {
     'update:selected': val => true,
@@ -5667,7 +5894,7 @@ const VList = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(toRef(props, 'bgColor'));
     const {
       borderClasses
     } = useBorder(props);
@@ -5687,25 +5914,37 @@ const VList = genericComponent()({
       open,
       select
     } = useNested(props);
+    const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+    const activeColor = toRef(props, 'activeColor');
+    const color = toRef(props, 'color');
     createList();
+    provideDefaults({
+      VListGroup: {
+        activeColor,
+        color
+      },
+      VListItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor,
+        color,
+        density: toRef(props, 'density'),
+        disabled: toRef(props, 'disabled'),
+        lines: toRef(props, 'lines'),
+        nav: toRef(props, 'nav'),
+        variant: toRef(props, 'variant')
+      }
+    });
     useRender(() => {
       return createVNode(props.tag, {
         "class": ['v-list', {
           'v-list--disabled': props.disabled,
-          'v-list--nav': props.nav,
-          [`v-list--${props.lines}-line`]: true
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+          'v-list--nav': props.nav
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value],
         "style": [backgroundColorStyles.value, dimensionStyles.value]
       }, {
         default: () => [createVNode(VListChildren, {
           "items": items.value
-        }, {
-          default: slots.default,
-          item: slots.item,
-          title: slots.title,
-          subtitle: slots.subtitle,
-          header: slots.header
-        })]
+        }, slots)]
       });
     });
     return {
@@ -5718,11 +5957,35 @@ const VList = genericComponent()({
 
 const VListImg = createSimpleFunctional('v-list-img');
 
+const VListItemAction = defineComponent({
+  name: 'VListItemAction',
+  props: {
+    start: Boolean,
+    end: Boolean,
+    ...makeTagProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => {
+      return createVNode(props.tag, {
+        "class": ['v-list-item-action', {
+          'v-list-item-action--start': props.start,
+          'v-list-item-action--end': props.end
+        }]
+      }, slots);
+    };
+  }
+
+});
+
 const VListItemMedia = defineComponent({
   name: 'VListItemMedia',
   props: {
-    left: Boolean,
-    right: Boolean,
+    start: Boolean,
+    end: Boolean,
     ...makeTagProps()
   },
 
@@ -5733,8 +5996,8 @@ const VListItemMedia = defineComponent({
     return () => {
       return createVNode(props.tag, {
         "class": ['v-list-item-media', {
-          'v-list-item-media--start': props.left,
-          'v-list-item-media--end': props.right
+          'v-list-item-media--start': props.start,
+          'v-list-item-media--end': props.end
         }]
       }, slots);
     };
@@ -5777,6 +6040,8 @@ function useDelay(props, cb) {
   };
 }
 
+const VMenuSymbol = Symbol.for('vuetify:v-menu');
+
 // Utilities
 
 const makeActivatorProps = propsFactory({
@@ -5794,9 +6059,14 @@ const makeActivatorProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  closeOnContentClick: Boolean,
   ...makeDelayProps()
 });
-function useActivator(props, isActive) {
+function useActivator(props, _ref) {
+  let {
+    isActive,
+    isTop
+  } = _ref;
   const activatorEl = ref();
   let isHovered = false;
   let isFocused = false;
@@ -5806,7 +6076,7 @@ function useActivator(props, isActive) {
     runOpenDelay,
     runCloseDelay
   } = useDelay(props, value => {
-    if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused)) {
+    if (value === (props.openOnHover && isHovered || openOnFocus.value && isFocused) && !(props.openOnHover && isActive.value && !isTop.value)) {
       isActive.value = value;
     }
   });
@@ -5857,6 +6127,37 @@ function useActivator(props, isActive) {
 
     return events;
   });
+  const contentEvents = computed(() => {
+    const events = {};
+
+    if (props.openOnHover) {
+      events.mouseenter = () => {
+        isHovered = true;
+        runOpenDelay();
+      };
+
+      events.mouseleave = () => {
+        isHovered = false;
+        runCloseDelay();
+      };
+    }
+
+    if (props.closeOnContentClick) {
+      const menu = inject(VMenuSymbol, null);
+
+      events.click = () => {
+        isActive.value = false;
+        menu == null ? void 0 : menu.closeParents();
+      };
+    }
+
+    return events;
+  });
+  watch(isTop, val => {
+    if (val && props.openOnHover && !isHovered) {
+      isActive.value = false;
+    }
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;
@@ -5865,14 +6166,14 @@ function useActivator(props, isActive) {
       activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
     });
   });
+  const vm = getCurrentInstance('useActivator');
   let scope;
   watch(() => !!props.activator, val => {
     if (val && IN_BROWSER) {
       scope = effectScope();
       scope.run(() => {
-        _useActivator(props, {
+        _useActivator(props, vm, {
           activatorEl,
-          activatorRef,
           activatorEvents
         });
       });
@@ -5886,15 +6187,16 @@ function useActivator(props, isActive) {
   return {
     activatorEl,
     activatorRef,
-    activatorEvents
+    activatorEvents,
+    contentEvents
   };
 }
 
-function _useActivator(props, _ref) {
+function _useActivator(props, vm, _ref2) {
   let {
     activatorEl,
     activatorEvents
-  } = _ref;
+  } = _ref2;
   watch(() => props.activator, (val, oldVal) => {
     if (oldVal && val !== oldVal) {
       const activator = getActivator(oldVal);
@@ -5920,8 +6222,8 @@ function _useActivator(props, _ref) {
     let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
 
     if (!el) return;
-    Object.entries(activatorEvents.value).forEach(_ref2 => {
-      let [name, cb] = _ref2;
+    Object.entries(activatorEvents.value).forEach(_ref3 => {
+      let [name, cb] = _ref3;
       el.addEventListener(name, cb);
     });
     Object.keys(_props).forEach(k => {
@@ -5939,8 +6241,8 @@ function _useActivator(props, _ref) {
     let _props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.activatorProps;
 
     if (!el) return;
-    Object.entries(activatorEvents.value).forEach(_ref3 => {
-      let [name, cb] = _ref3;
+    Object.entries(activatorEvents.value).forEach(_ref4 => {
+      let [name, cb] = _ref4;
       el.removeEventListener(name, cb);
     });
     Object.keys(_props).forEach(k => {
@@ -5948,8 +6250,6 @@ function _useActivator(props, _ref) {
     });
   }
 
-  const vm = getCurrentInstance('useActivator');
-
   function getActivator() {
     var _activator;
 
@@ -6186,6 +6486,8 @@ function connectedPositionStrategy(data, props, contentStyles) {
 
 
   function updatePosition() {
+    var _props$maxWidth;
+
     observe = false;
     requestAnimationFrame(() => {
       requestAnimationFrame(() => observe = true);
@@ -6226,13 +6528,15 @@ function connectedPositionStrategy(data, props, contentStyles) {
         el.scrollTo(...position);
       });
     }
-    const contentHeight = Math.min(configuredMaxHeight.value, contentBox.height);
+    const contentHeight = Math.min(configuredMaxHeight.value, contentBox.height); // Regard undefined maxWidth as maximally occupying whole remaining space by default
+
+    const maxFreeSpaceWidth = props.maxWidth === undefined ? Number.MAX_VALUE : parseInt((_props$maxWidth = props.maxWidth) != null ? _props$maxWidth : 0, 10);
     const viewportMargin = 12;
     const freeSpace = {
       top: targetBox.top - viewportMargin,
       bottom: viewportHeight - targetBox.bottom - viewportMargin,
-      left: targetBox.left - viewportMargin,
-      right: viewportWidth - targetBox.right - viewportMargin
+      left: Math.min(targetBox.left - viewportMargin, maxFreeSpaceWidth),
+      right: Math.min(viewportWidth - targetBox.right - viewportMargin, maxFreeSpaceWidth)
     };
     const fitsY = preferredAnchor.value.side === 'bottom' && contentHeight <= freeSpace.bottom || preferredAnchor.value.side === 'top' && contentHeight <= freeSpace.top;
     const anchor = fitsY ? preferredAnchor.value : preferredAnchor.value.side === 'bottom' && freeSpace.top > freeSpace.bottom || preferredAnchor.value.side === 'top' && freeSpace.bottom > freeSpace.top ? oppositeAnchor(preferredAnchor.value) : preferredAnchor.value;
@@ -6304,6 +6608,7 @@ function run() {
 // Utilities
 
 const scrollStrategies = {
+  none: null,
   close: closeScrollStrategy,
   block: blockScrollStrategy,
   reposition: repositionScrollStrategy
@@ -6360,13 +6665,21 @@ function blockScrollStrategy(data) {
   }
 
   scrollElements.forEach((el, i) => {
+    el.style.setProperty('--v-body-scroll-x', convertToUnit(-el.scrollLeft));
+    el.style.setProperty('--v-body-scroll-y', convertToUnit(-el.scrollTop));
     el.style.setProperty('--v-scrollbar-offset', convertToUnit(scrollbarWidth));
     el.classList.add('v-overlay-scroll-blocked');
   });
   onScopeDispose(() => {
     scrollElements.forEach((el, i) => {
+      const x = parseFloat(el.style.getPropertyValue('--v-body-scroll-x'));
+      const y = parseFloat(el.style.getPropertyValue('--v-body-scroll-y'));
+      el.style.removeProperty('--v-body-scroll-x');
+      el.style.removeProperty('--v-body-scroll-y');
       el.style.removeProperty('--v-scrollbar-offset');
       el.classList.remove('v-overlay-scroll-blocked');
+      el.scrollLeft = -x;
+      el.scrollTop = -y;
     });
 
     if (scrollableParent) {
@@ -6496,39 +6809,14 @@ function useStack(isActive) {
   }, {
     immediate: true
   });
-  const isTop = computed(() => {
-    return toRaw(stack.value[stack.value.length - 1]) === vm;
-  });
-  return {
-    isTop
-  };
-}
-
-// Utilities
+  const isTop = ref(true);
+  watchEffect(() => {
+    const _isTop = toRaw(stack.value[stack.value.length - 1]) === vm;
 
-const VuetifyOverlayKey = Symbol.for('vuetify:overlay');
-const ROOT_ZINDEX = 2000;
-function useOverlay(isActive) {
-  const {
-    zIndex,
-    overlays
-  } = inject(VuetifyOverlayKey, {
-    zIndex: ref(ROOT_ZINDEX),
-    overlays: ref([])
+    setTimeout(() => isTop.value = _isTop);
   });
-  const id = getUid();
-  watch(isActive, value => {
-    if (value) {
-      overlays.value.push(id);
-    } else {
-      overlays.value = overlays.value.filter(x => x !== id);
-    }
-  }, {
-    immediate: true
-  });
-  const overlayZIndex = computed(() => zIndex.value + overlays.value.indexOf(id) + 1);
   return {
-    overlayZIndex
+    isTop: readonly(isTop)
   };
 }
 
@@ -6702,17 +6990,21 @@ const VOverlay = genericComponent()({
     const scrimColor = useBackgroundColor(computed(() => {
       return typeof props.scrim === 'string' ? props.scrim : null;
     }));
+    const {
+      isTop
+    } = useStack(isActive);
     const {
       activatorEl,
       activatorRef,
-      activatorEvents
-    } = useActivator(props, isActive);
+      activatorEvents,
+      contentEvents
+    } = useActivator(props, {
+      isActive,
+      isTop
+    });
     const {
       dimensionStyles
     } = useDimension(props);
-    const {
-      isTop
-    } = useStack(isActive);
     const root = ref();
     const contentEl = ref();
     const {
@@ -6793,9 +7085,6 @@ const VOverlay = genericComponent()({
       });
     }
 
-    const {
-      overlayZIndex
-    } = useOverlay(isActive);
     useRender(() => {
       var _slots$activator, _slots$default;
 
@@ -6815,8 +7104,7 @@ const VOverlay = genericComponent()({
             'v-overlay--contained': props.contained
           }, themeClasses.value, rtlClasses.value],
           "style": {
-            top: convertToUnit(top.value),
-            zIndex: overlayZIndex.value
+            top: convertToUnit(top.value)
           },
           "ref": root
         }, attrs), [createVNode(Scrim, {
@@ -6832,11 +7120,11 @@ const VOverlay = genericComponent()({
             emit('afterLeave');
           }
         }, {
-          default: () => [withDirectives(createVNode("div", {
+          default: () => [withDirectives(createVNode("div", mergeProps({
             "ref": contentEl,
             "class": ['v-overlay__content', props.contentClass],
             "style": [dimensionStyles.value, contentStyles.value]
-          }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
+          }, toHandlers(contentEvents.value)), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
             isActive
           })]), [[vShow, isActive.value], [resolveDirective("click-outside"), {
             handler: onClickOutside,
@@ -6849,7 +7137,9 @@ const VOverlay = genericComponent()({
     return {
       animateClick,
       contentEl,
-      activatorEl
+      activatorEl,
+      isTop,
+      updatePosition
     };
   }
 
@@ -6860,15 +7150,7 @@ const VMenu = genericComponent()({
   inheritAttrs: false,
   props: {
     // TODO
-    // closeOnClick: {
-    //   type: Boolean,
-    //   default: true,
-    // },
-    // closeOnContentClick: {
-    //   type: Boolean,
-    //   default: true,
-    // },
-    disableKeys: Boolean,
+    // disableKeys: Boolean,
     modelValue: Boolean,
     id: String,
     ...makeTransitionProps({
@@ -6889,26 +7171,62 @@ const VMenu = genericComponent()({
     const isActive = useProxiedModel(props, 'modelValue');
     const uid = getUid();
     const id = computed(() => props.id || `v-menu-${uid}`);
-    return () => {
-      return createVNode(VOverlay, mergeProps({
-        "modelValue": isActive.value,
-        "onUpdate:modelValue": $event => isActive.value = $event,
-        "class": ['v-menu'],
-        "transition": props.transition,
-        "absolute": true,
-        "positionStrategy": "connected",
-        "scrollStrategy": "reposition",
-        "scrim": false,
-        "activatorProps": {
-          'aria-haspopup': 'menu',
-          'aria-expanded': String(isActive.value),
-          'aria-owns': id.value
-        }
-      }, attrs), {
-        default: slots.default,
-        activator: slots.activator
-      });
-    };
+    const overlay = ref();
+    const parent = inject(VMenuSymbol, null);
+    let openChildren = 0;
+    provide(VMenuSymbol, {
+      register() {
+        ++openChildren;
+      },
+
+      unregister() {
+        --openChildren;
+      },
+
+      closeParents() {
+        setTimeout(() => {
+          if (!openChildren) {
+            isActive.value = false;
+            parent == null ? void 0 : parent.closeParents();
+          }
+        }, 40);
+      }
+
+    });
+    watch(isActive, val => {
+      val ? parent == null ? void 0 : parent.register() : parent == null ? void 0 : parent.unregister();
+    });
+
+    function onClickOutside() {
+      parent == null ? void 0 : parent.closeParents();
+    }
+
+    useRender(() => createVNode(VOverlay, mergeProps({
+      "ref": overlay,
+      "modelValue": isActive.value,
+      "onUpdate:modelValue": $event => isActive.value = $event,
+      "class": ['v-menu'],
+      "transition": props.transition,
+      "absolute": true,
+      "closeOnContentClick": true,
+      "positionStrategy": "connected",
+      "scrollStrategy": "reposition",
+      "scrim": false,
+      "openDelay": "300",
+      "closeDelay": "250",
+      "activatorProps": {
+        'aria-haspopup': 'menu',
+        'aria-expanded': String(isActive.value),
+        'aria-owns': id.value
+      },
+      "onClick:outside": onClickOutside
+    }, attrs), {
+      default: slots.default,
+      activator: slots.activator
+    }));
+    return useForwardRef({
+      id
+    }, overlay);
   }
 
 });
@@ -6982,7 +7300,6 @@ function createForm(props) {
     const results = [];
     let valid = true;
     errorMessages.value = [];
-    model.value = null;
     isValidating.value = true;
 
     for (const item of items.value) {
@@ -7000,7 +7317,6 @@ function createForm(props) {
     }
 
     errorMessages.value = results;
-    model.value = valid;
     isValidating.value = false;
     return {
       valid,
@@ -7019,8 +7335,21 @@ function createForm(props) {
     model.value = null;
   }
 
+  watch(items, () => {
+    let valid = null;
+
+    if (items.value.some(item => item.isValid === false)) {
+      valid = false;
+    } else if (items.value.every(item => item.isValid === true)) {
+      valid = true;
+    }
+
+    model.value = valid;
+  }, {
+    deep: true
+  });
   provide(FormKey, {
-    register: (id, validate, reset, resetValidation) => {
+    register: (id, validate, reset, resetValidation, isValid) => {
       if (items.value.some(item => item.id === id)) {
         consoleWarn(`Duplicate input name "${id}"`);
       }
@@ -7029,7 +7358,9 @@ function createForm(props) {
         id,
         validate,
         reset,
-        resetValidation
+        resetValidation,
+        isValid: isValid // TODO: Better way to type this unwrapping?
+
       });
     },
     unregister: id => {
@@ -7084,7 +7415,7 @@ function useValidation(props) {
   const form = useForm();
   const internalErrorMessages = ref([]);
   const isPristine = ref(true);
-  const isDirty = computed(() => wrapInArray(model.value || []).length > 0);
+  const isDirty = computed(() => wrapInArray(model.value === '' ? null : model.value).length > 0);
   const isDisabled = computed(() => !!(props.disabled || form != null && form.isDisabled.value));
   const isReadonly = computed(() => !!(props.readonly || form != null && form.isReadonly.value));
   const errorMessages = computed(() => {
@@ -7109,11 +7440,14 @@ function useValidation(props) {
     return (_props$name = props.name) != null ? _props$name : getUid();
   });
   onBeforeMount(() => {
-    form == null ? void 0 : form.register(uid.value, validate, reset, resetValidation);
+    form == null ? void 0 : form.register(uid.value, validate, reset, resetValidation, isValid);
   });
   onBeforeUnmount(() => {
     form == null ? void 0 : form.unregister(uid.value);
   });
+  watch(model, () => {
+    if (model.value != null) validate();
+  });
 
   function reset() {
     resetValidation();
@@ -7190,13 +7524,12 @@ const VInput = genericComponent()({
   props: { ...makeVInputProps()
   },
   emits: {
-    'click:prepend': e => true,
-    'click:append': e => true,
     'update:modelValue': val => true
   },
 
   setup(props, _ref) {
     let {
+      attrs,
       slots,
       emit
     } = _ref;
@@ -7242,14 +7575,14 @@ const VInput = genericComponent()({
       }, [hasPrepend && createVNode("div", {
         "class": "v-input__prepend"
       }, [slots == null ? void 0 : (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && createVNode(VIcon, {
-        "onClick": e => emit('click:prepend', e),
+        "onClick": attrs['onClick:prepend'],
         "icon": props.prependIcon
       }, null)]), slots.default && createVNode("div", {
         "class": "v-input__control"
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && createVNode("div", {
         "class": "v-input__append"
       }, [slots == null ? void 0 : (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && createVNode(VIcon, {
-        "onClick": e => emit('click:append', e),
+        "onClick": attrs['onClick:append'],
         "icon": props.appendIcon
       }, null)]), hasDetails && createVNode("div", {
         "class": "v-input__details"
@@ -7599,8 +7932,6 @@ const VField = genericComponent()({
   },
   emits: {
     'click:clear': e => true,
-    'click:prepend-inner': e => true,
-    'click:append-inner': e => true,
     'click:control': e => true,
     'update:focused': focused => true,
     'update:modelValue': val => true
@@ -7715,6 +8046,7 @@ const VField = genericComponent()({
           'v-field--prepended': hasPrepend,
           'v-field--reverse': props.reverse,
           'v-field--single-line': props.singleLine,
+          'v-field--has-label': !!label,
           [`v-field--variant-${props.variant}`]: true
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
         "style": [backgroundColorStyles.value, textColorStyles.value],
@@ -7730,7 +8062,7 @@ const VField = genericComponent()({
       }), hasPrepend && createVNode("div", {
         "class": "v-field__prepend-inner"
       }, [props.prependInnerIcon && createVNode(VIcon, {
-        "onClick": e => emit('click:prepend-inner', e),
+        "onClick": attrs['onClick:prependInner'],
         "icon": props.prependInnerIcon
       }, null), slots == null ? void 0 : (_slots$prependInner = slots.prependInner) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), createVNode("div", {
         "class": "v-field__field"
@@ -7762,7 +8094,7 @@ const VField = genericComponent()({
       }), hasAppend && createVNode("div", {
         "class": "v-field__append-inner"
       }, [slots == null ? void 0 : (_slots$appendInner = slots.appendInner) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && createVNode(VIcon, {
-        "onClick": e => emit('click:append-inner', e),
+        "onClick": attrs['onClick:appendInner'],
         "icon": props.appendInnerIcon
       }, null)]), createVNode("div", {
         "class": ['v-field__outline', textColorClasses.value]
@@ -7862,13 +8194,9 @@ const VTextField = genericComponent()({
     ...makeVFieldProps()
   },
   emits: {
-    'click:append': e => true,
-    'click:append-inner': e => true,
     'click:clear': e => true,
     'click:control': e => true,
     'click:input': e => true,
-    'click:prepend': e => true,
-    'click:prepend-inner': e => true,
     'update:modelValue': val => true
   },
 
@@ -7943,13 +8271,12 @@ const VTextField = genericComponent()({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-text-field', {
-          'v-text-field--persistent-placeholder': props.persistentPlaceholder,
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
         }],
-        "onClick:prepend": e => emit('click:prepend', e),
-        "onClick:append": e => emit('click:append', e)
+        "onClick:prepend": attrs['onClick:prepend'],
+        "onClick:append": attrs['onClick:append']
       }, rootAttrs, inputProps, {
         "messages": messages.value
       }), { ...slots,
@@ -7968,8 +8295,8 @@ const VTextField = genericComponent()({
             },
             "onClick:control": onControlClick,
             "onClick:clear": onClear,
-            "onClick:prependInner": e => emit('click:prepend-inner', e),
-            "onClick:appendInner": e => emit('click:append-inner', e),
+            "onClick:prependInner": attrs['onClick:prependInner'],
+            "onClick:appendInner": attrs['onClick:prependInner'],
             "role": "textbox"
           }, fieldProps, {
             "active": isActive.value || isDirty.value,
@@ -7997,6 +8324,7 @@ const VTextField = genericComponent()({
                 "autofocus": props.autofocus,
                 "readonly": isReadonly.value,
                 "disabled": isDisabled.value,
+                "name": props.name,
                 "placeholder": props.placeholder,
                 "size": 1,
                 "type": props.type,
@@ -8024,6 +8352,60 @@ const VTextField = genericComponent()({
 
 });
 
+// Utilities
+
+// Composables
+const makeItemsProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemTitle: {
+    type: [String, Array, Function],
+    default: 'title'
+  },
+  itemValue: {
+    type: [String, Array, Function],
+    default: 'value'
+  },
+  itemChildren: {
+    type: String,
+    default: 'children'
+  },
+  itemProps: {
+    type: Function,
+    default: item => ({})
+  }
+}, 'item');
+function transformItem(props, item) {
+  var _props$itemProps;
+
+  const title = getPropertyFromItem(item, props.itemTitle, item);
+  const value = getPropertyFromItem(item, props.itemValue, title);
+  const children = getObjectValueByPath(item, props.itemChildren);
+  return {
+    title,
+    value,
+    children: Array.isArray(children) ? transformItems(props, children) : undefined,
+    ...((_props$itemProps = props.itemProps) == null ? void 0 : _props$itemProps.call(props, item))
+  };
+}
+function transformItems(props, items) {
+  const array = [];
+
+  for (const item of items) {
+    array.push(transformItem(props, item));
+  }
+
+  return array;
+}
+function useItems(props) {
+  const items = computed(() => transformItems(props, props.items));
+  return {
+    items
+  };
+}
+
 const LocaleAdapterSymbol = Symbol.for('vuetify:locale-adapter');
 const VuetifyLocaleSymbol = Symbol.for('vuetify:locale');
 function provideLocale(props) {
@@ -8158,24 +8540,12 @@ function createDefaultLocaleAdapter(options) {
   };
 }
 
-function genItem(item) {
-  var _ref;
-
-  return {
-    title: String((_ref = typeof item === 'object' ? item.title : item) != null ? _ref : ''),
-    value: typeof item === 'object' ? item.value : item
-  };
-}
 const makeSelectProps = propsFactory({
   chips: Boolean,
   closableChips: Boolean,
   eager: Boolean,
   hideNoData: Boolean,
   hideSelected: Boolean,
-  items: {
-    type: Array,
-    default: () => []
-  },
   menuIcon: {
     type: String,
     default: '$dropdown'
@@ -8189,7 +8559,8 @@ const makeSelectProps = propsFactory({
     type: String,
     default: '$vuetify.noDataText'
   },
-  openOnClear: Boolean
+  openOnClear: Boolean,
+  ...makeItemsProps()
 }, 'select');
 const VSelect = genericComponent()({
   name: 'VSelect',
@@ -8202,36 +8573,21 @@ const VSelect = genericComponent()({
     'update:modelValue': val => true
   },
 
-  setup(props, _ref2) {
+  setup(props, _ref) {
     let {
       slots
-    } = _ref2;
+    } = _ref;
     const {
       t
     } = useLocale();
     const vTextFieldRef = ref();
     const activator = ref();
     const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items
+    } = useItems(props);
     const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v), v => props.multiple ? v : v[0]);
-    const selections = computed(() => {
-      const array = [];
-      let index = 0;
-
-      for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
-        const found = array.find(selection => selection.value === item.value);
-
-        if (found == null) {
-          array.push({ ...item,
-            index
-          });
-          index++;
-        }
-      }
-
-      return array;
-    });
+    const selections = computed(() => items.value.filter(item => model.value.includes(item.value)));
     const selected = computed(() => selections.value.map(selection => selection.value));
 
     function onClear(e) {
@@ -8259,12 +8615,14 @@ const VSelect = genericComponent()({
 
     function select(item) {
       if (props.multiple) {
-        const index = selections.value.findIndex(selection => selection.value === item.value);
+        const index = selected.value.findIndex(selection => selection === item.value);
 
         if (index === -1) {
-          model.value.push(item.value);
+          model.value = [...model.value, item.value];
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
       } else {
         model.value = [item.value];
@@ -8293,62 +8651,64 @@ const VSelect = genericComponent()({
         "modelValue": model.value.join(', '),
         "onKeydown": onKeydown
       }, { ...slots,
-        default: () => createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
-          "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
-          "activator": activator.value,
-          "contentClass": "v-select__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition
-        }, {
-          default: () => [createVNode(VList, {
-            "selected": selected.value,
-            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+        default: () => {
+          var _slots$noData, _slots$noData2;
+
+          return createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": activator.value,
+            "contentClass": "v-select__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "transition": props.transition
           }, {
-            default: () => [!items.value.length && !props.hideNoData && createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), items.value.map(item => createVNode(VListItem, {
-              "title": item.title,
-              "value": item.value,
-              "onMousedown": e => e.preventDefault(),
-              "onClick": () => select(item)
-            }, null))]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+            default: () => [createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+            }, {
+              default: () => [!items.value.length && !props.hideNoData && ((_slots$noData = (_slots$noData2 = slots['no-data']) == null ? void 0 : _slots$noData2.call(slots)) != null ? _slots$noData : createVNode(VListItem, {
+                "title": t(props.noDataText)
+              }, null)), items.value.map(item => createVNode(VListItem, mergeProps(item, {
+                "onMousedown": e => e.preventDefault(),
+                "onClick": () => select(item)
+              }), null))]
+            })]
+          }), selections.value.map((selection, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(selection);
+            }
 
-          const slotProps = {
-            'onClick:close': onChipClose,
-            modelValue: true
-          };
-          return createVNode("div", {
-            "class": "v-select__selection"
-          }, [hasChips && createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return createVNode("div", {
+              "class": "v-select__selection"
+            }, [hasChips && createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: selection.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                props: slotProps,
+                selection
+              }) : createVNode(VChip, slotProps, null)]
+            }), !hasChips && (slots.selection ? slots.selection({
               selection
-            }) : createVNode(VChip, slotProps, null)]
-          }), !hasChips && (slots.selection ? slots.selection({
-            selection
-          }) : createVNode("span", {
-            "class": "v-select__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
-            "class": "v-select__selection-comma"
-          }, [createTextVNode(",")])]))]);
-        })])
+            }) : createVNode("span", {
+              "class": "v-select__selection-text"
+            }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
+              "class": "v-select__selection-comma"
+            }, [createTextVNode(",")])]))]);
+          })]);
+        }
       });
     });
     return useForwardRef({}, vTextFieldRef);
@@ -8481,7 +8841,9 @@ const VAutocomplete = genericComponent()({
     const isFocused = ref(false);
     const isPristine = ref(true);
     const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items
+    } = useItems(props);
     const search = useProxiedModel(props, 'search', '');
     const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
     const {
@@ -8492,7 +8854,7 @@ const VAutocomplete = genericComponent()({
       let index = 0;
 
       for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
+        const item = transformItem(props, unwrapped);
         const found = array.find(selection => selection.value === item.value);
 
         if (found == null) {
@@ -8536,6 +8898,10 @@ const VAutocomplete = genericComponent()({
       }
     }
 
+    function onInput(e) {
+      search.value = e.target.value;
+    }
+
     function onAfterLeave() {
       if (isFocused.value) isPristine.value = true;
     }
@@ -8544,12 +8910,14 @@ const VAutocomplete = genericComponent()({
 
     function select(item) {
       if (props.multiple) {
-        const index = selections.value.findIndex(selection => selection.value === item.value);
+        const index = selected.value.findIndex(selection => selection === item.value);
 
         if (index === -1) {
-          model.value.push(item.value);
+          model.value = [...model.value, item.value];
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
       } else {
         model.value = [item.value];
@@ -8587,7 +8955,7 @@ const VAutocomplete = genericComponent()({
       return createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
@@ -8602,74 +8970,78 @@ const VAutocomplete = genericComponent()({
         "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }, { ...slots,
-        default: () => createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
-          "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
-          "activator": activator.value,
-          "contentClass": "v-autocomplete__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition,
-          "onAfterLeave": onAfterLeave
-        }, {
-          default: () => [createVNode(VList, {
-            "selected": selected.value,
-            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+        default: () => {
+          var _slots$noData, _slots$noData2;
+
+          return createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": activator.value,
+            "contentClass": "v-autocomplete__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "transition": props.transition,
+            "onAfterLeave": onAfterLeave
           }, {
-            default: () => [!filteredItems.value.length && !props.hideNoData && createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), filteredItems.value.map(_ref2 => {
-              let {
-                item,
-                matches
-              } = _ref2;
-              return createVNode(VListItem, {
-                "value": item.value,
-                "onMousedown": e => e.preventDefault(),
-                "onClick": () => select(item)
-              }, {
-                title: () => {
-                  var _search$value$length, _search$value;
-
-                  return isPristine.value ? item.title : highlightResult$1(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
-                }
-              });
+            default: () => [createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+            }, {
+              default: () => [!filteredItems.value.length && !props.hideNoData && ((_slots$noData = (_slots$noData2 = slots['no-data']) == null ? void 0 : _slots$noData2.call(slots)) != null ? _slots$noData : createVNode(VListItem, {
+                "title": t(props.noDataText)
+              }, null)), filteredItems.value.map(_ref2 => {
+                let {
+                  item,
+                  matches
+                } = _ref2;
+                return createVNode(VListItem, {
+                  "value": item.value,
+                  "onMousedown": e => e.preventDefault(),
+                  "onClick": () => select(item)
+                }, {
+                  title: () => {
+                    var _search$value$length, _search$value;
+
+                    return isPristine.value ? item.title : highlightResult$1(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
+                  }
+                });
+              })]
             })]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+          }), selections.value.map((selection, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(selection);
+            }
 
-          const slotProps = {
-            'onClick:close': onChipClose,
-            modelValue: true
-          };
-          return createVNode("div", {
-            "class": "v-autocomplete__selection"
-          }, [hasChips && createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return createVNode("div", {
+              "class": "v-autocomplete__selection"
+            }, [hasChips && createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: selection.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                props: slotProps,
+                selection
+              }) : createVNode(VChip, slotProps, null)]
+            }), !hasChips && (slots.selection ? slots.selection({
               selection
-            }) : createVNode(VChip, slotProps, null)]
-          }), !hasChips && (slots.selection ? slots.selection({
-            selection
-          }) : createVNode("span", {
-            "class": "v-autocomplete__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
-            "class": "v-autocomplete__selection-comma"
-          }, [createTextVNode(",")])]))]);
-        })])
+            }) : createVNode("span", {
+              "class": "v-autocomplete__selection-text"
+            }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
+              "class": "v-autocomplete__selection-comma"
+            }, [createTextVNode(",")])]))]);
+          })]);
+        }
       });
     });
     return useForwardRef({
@@ -8804,7 +9176,65 @@ const VBadge = defineComponent({
 
 });
 
-const VBannerActions = createSimpleFunctional('v-banner-actions');
+const VBannerActions = defineComponent({
+  name: 'VBannerActions',
+  props: {
+    color: String,
+    density: String
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    provideDefaults({
+      VBtn: {
+        color: props.color,
+        density: props.density,
+        variant: 'text'
+      }
+    });
+    useRender(() => {
+      var _slots$default;
+
+      return createVNode("div", {
+        "class": "v-banner-actions"
+      }, [slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
+    return {};
+  }
+
+});
+
+const VBannerAvatar = defineComponent({
+  name: 'VBannerAvatar',
+  props: makeVAvatarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => createVNode(VAvatar, mergeProps({
+      "class": "v-banner-avatar"
+    }, props), slots);
+  }
+
+});
+
+const VBannerIcon = defineComponent({
+  name: 'VBannerIcon',
+  props: makeVAvatarProps(),
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => createVNode(VAvatar, mergeProps({
+      "class": "v-banner-icon"
+    }, props), slots);
+  }
+
+});
 
 const VBannerText = createSimpleFunctional('v-banner-text');
 
@@ -8944,6 +9374,7 @@ const VBanner = defineComponent({
     color: String,
     icon: String,
     lines: String,
+    stacked: Boolean,
     sticky: Boolean,
     text: String,
     ...makeBorderProps(),
@@ -8960,21 +9391,18 @@ const VBanner = defineComponent({
     let {
       slots
     } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
     const {
       borderClasses
     } = useBorder(props);
     const {
       densityClasses
     } = useDensity(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       mobile
     } = useDisplay();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
@@ -8985,50 +9413,46 @@ const VBanner = defineComponent({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const color = toRef(props, 'color');
+    const density = toRef(props, 'density');
+    provideDefaults({
+      VBannerActions: {
+        color,
+        density
+      },
+      VBannerAvatar: {
+        density,
+        image: toRef(props, 'avatar')
+      },
+      VBannerIcon: {
+        color,
+        density,
+        icon: toRef(props, 'icon')
+      }
+    });
     useRender(() => {
       var _slots$default;
 
-      const hasAvatar = !!(props.avatar || props.icon || slots.avatar || slots.icon);
       const hasText = !!(props.text || slots.text);
-      const hasContent = hasAvatar || hasText || slots.default;
+      const hasPrepend = !!(slots.prepend || props.avatar || props.icon);
       return createVNode(props.tag, {
         "class": ['v-banner', {
-          'v-banner--mobile': mobile.value,
+          'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
-          [`v-banner--${props.lines}-line`]: true
+          [`v-banner--${props.lines}-line`]: !!props.lines
         }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value],
         "style": [dimensionStyles.value, positionStyles.value],
         "role": "banner"
       }, {
-        default: () => [hasContent && createVNode("div", {
-          "class": "v-banner__content"
-        }, [hasAvatar && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VAvatar: {
-              color: props.color,
-              density: props.density,
-              icon: props.icon,
-              image: props.avatar
-            }
-          }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-banner__avatar"
-          }, [slots.avatar ? slots.avatar() : createVNode(VAvatar, null, null)])]
-        }), hasText && createVNode(VBannerText, null, {
+        default: () => [hasPrepend && createVNode(Fragment, null, [slots.prepend ? createVNode("div", {
+          "class": "v-banner__prepend"
+        }, [slots.prepend()]) : props.avatar ? createVNode(VBannerAvatar, null, null) : props.icon ? createVNode(VBannerIcon, null, null) : undefined]), hasText && createVNode(VBannerText, null, {
           default: () => [slots.text ? slots.text() : props.text]
-        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              color: props.color,
-              density: props.density,
-              variant: 'text'
-            }
-          }
-        }, {
-          default: () => [createVNode(VBannerActions, null, {
-            default: slots.actions
-          })]
+        }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && createVNode(VBannerActions, null, {
+          default: () => [slots.actions()]
         })]
       });
     });
@@ -9158,30 +9582,31 @@ const VBreadcrumbsItem = defineComponent({
       slots,
       attrs
     } = _ref;
-    const {
-      isExactActive,
-      isLink,
-      navigate
-    } = useLink(props, attrs);
-    const isActive = computed(() => props.active || (isExactActive == null ? void 0 : isExactActive.value));
+    const link = useLink(props, attrs);
+    const isActive = computed(() => {
+      var _link$isExactActive;
+
+      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+    });
     const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
     useRender(() => {
-      const Tag = isLink.value ? 'a' : props.tag;
+      const Tag = link.isLink.value ? 'a' : props.tag;
       const hasText = !!(slots.default || props.text);
       return createVNode(Tag, {
         "class": ['v-breadcrumbs-item', {
           'v-breadcrumbs-item--active': isActive.value,
           'v-breadcrumbs-item--disabled': props.disabled,
-          'v-breadcrumbs-item--link': isLink.value,
+          'v-breadcrumbs-item--link': link.isLink.value,
           [`${props.activeClass}`]: isActive.value && props.activeClass
         }, textColorClasses.value],
         "style": [textColorStyles.value],
+        "href": link.href.value,
         "aria-current": isActive.value ? 'page' : undefined,
-        "onClick": isActive.value && navigate
+        "onClick": link.navigate
       }, {
         default: hasText ? () => {
           var _slots$default, _slots$default2;
@@ -9201,6 +9626,7 @@ const VBreadcrumbs = defineComponent({
   name: 'VBreadcrumbs',
   props: {
     activeClass: String,
+    activeColor: String,
     bgColor: String,
     color: String,
     disabled: Boolean,
@@ -9237,6 +9663,7 @@ const VBreadcrumbs = defineComponent({
     provideDefaults({
       VBreadcrumbsItem: {
         activeClass: toRef(props, 'activeClass'),
+        activeColor: toRef(props, 'activeColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled')
       }
@@ -9282,7 +9709,7 @@ const VBreadcrumbs = defineComponent({
 
 });
 
-const VCardActions = defineComponent$1({
+const VCardActions = defineComponent({
   name: 'VCardActions',
 
   setup(_, _ref) {
@@ -9308,6 +9735,8 @@ const VCardActions = defineComponent$1({
 
 const VCardAvatar = createSimpleFunctional('v-card-avatar');
 
+const VCardContent = createSimpleFunctional('v-card-content');
+
 const VCardHeader = createSimpleFunctional('v-card-header');
 
 const VCardHeaderText = createSimpleFunctional('v-card-header-text');
@@ -9387,7 +9816,7 @@ const VCard = defineComponent({
     } = useRounded(props);
     const link = useLink(props, attrs);
     return () => {
-      var _slots$image, _slots$media, _slots$default;
+      var _slots$image, _slots$media, _slots$headerText, _slots$default;
 
       const Tag = link.isLink.value ? 'a' : props.tag;
       const hasTitle = !!(slots.title || props.title);
@@ -9441,7 +9870,7 @@ const VCard = defineComponent({
               default: () => [slots.title ? slots.title() : props.title]
             }), hasSubtitle && createVNode(VCardSubtitle, null, {
               default: () => [slots.subtitle ? slots.subtitle() : props.subtitle]
-            })]
+            }), (_slots$headerText = slots.headerText) == null ? void 0 : _slots$headerText.call(slots)]
           }), hasAppend && createVNode(VDefaultsProvider, {
             "defaults": {
               VAvatar: {
@@ -9457,6 +9886,8 @@ const VCard = defineComponent({
           })]
         }), hasText && createVNode(VCardText, null, {
           default: () => [slots.text ? slots.text() : props.text]
+        }), slots.content && createVNode(VCardContent, null, {
+          default: slots.content
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
         })]
@@ -9698,13 +10129,6 @@ const VWindow = genericComponent()({
       canMoveForward.value && group.next();
     }
 
-    provideDefaults({
-      VBtn: {
-        variant: 'text'
-      }
-    }, {
-      scoped: true
-    });
     const arrows = computed(() => {
       const arrows = [];
       const prevProps = {
@@ -10006,7 +10430,7 @@ const VCarousel = defineComponent({
         })]), props.progress && createVNode(VProgressLinear, {
           "class": "v-carousel__progress",
           "color": typeof props.progress === 'string' ? props.progress : undefined,
-          "modelValue": (+model.value + 1) / group.items.value.length * 100
+          "modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
         }, null)]);
       },
       prev: slots.prev,
@@ -10039,7 +10463,7 @@ const VCarouselItem = defineComponent({
 });
 
 const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
-const VSelectionControlGroup = defineComponent$1({
+const VSelectionControlGroup = defineComponent({
   name: 'VSelectionControlGroup',
   props: {
     disabled: Boolean,
@@ -10140,6 +10564,7 @@ function useSelectionControl(props) {
     },
 
     set(val) {
+      if (props.readonly) return;
       const currentValue = val ? trueValue.value : falseValue.value;
       let newVal = currentValue;
 
@@ -10254,7 +10679,7 @@ const VSelectionControl = genericComponent()({
         "id": id.value,
         "onBlur": onBlur,
         "onFocus": onFocus,
-        "readonly": props.readonly,
+        "aria-readonly": props.readonly,
         "type": type,
         "value": trueValue.value,
         "name": (_group$name$value = group == null ? void 0 : group.name.value) != null ? _group$name$value : props.name,
@@ -10347,7 +10772,7 @@ const VCheckbox = defineComponent({
             "aria-checked": indeterminate.value ? 'mixed' : undefined,
             "disabled": isDisabled.value,
             "readonly": isReadonly.value
-          }, controlAttrs), null);
+          }, controlAttrs), slots);
         }
       });
     });
@@ -10913,7 +11338,7 @@ const VSliderTrack = defineComponent({
       return ticks.map((tick, index) => {
         var _slots$tickLabel, _slots$tickLabel2;
 
-        const directionProperty = vertical.value ? 'inset-block-end' : 'margin-inline-start';
+        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
         return createVNode("div", {
           "key": tick.value,
           "class": ['v-slider-track__tick', {
@@ -12116,11 +12541,13 @@ const VCombobox = genericComponent()({
     })
   },
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:searchInput': val => true
   },
 
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const {
@@ -12137,7 +12564,9 @@ const VCombobox = genericComponent()({
 
       return (_vTextFieldRef$value = vTextFieldRef.value) == null ? void 0 : _vTextFieldRef$value.color;
     });
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items
+    } = useItems(props);
     const {
       textColorClasses,
       textColorStyles
@@ -12147,7 +12576,7 @@ const VCombobox = genericComponent()({
     const _search = ref('');
 
     const search = computed({
-      get: () => props.multiple ? _search.value : genItem(model.value[0]).value,
+      get: () => props.multiple ? _search.value : transformItem(props, model.value[0]).value,
       set: val => {
         var _props$delimiters;
 
@@ -12176,6 +12605,9 @@ const VCombobox = genericComponent()({
         isPristine.value = !val;
       }
     });
+    watch(_search, value => {
+      emit('update:searchInput', value);
+    });
     const {
       filteredItems
     } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value));
@@ -12184,7 +12616,7 @@ const VCombobox = genericComponent()({
       let index = 0;
 
       for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
+        const item = transformItem(props, unwrapped);
         const found = array.find(selection => selection.value === item.value);
 
         if (found == null) {
@@ -12278,18 +12710,24 @@ const VCombobox = genericComponent()({
       }
     }
 
+    function onInput(e) {
+      search.value = e.target.value;
+    }
+
     function onAfterLeave() {
       if (isFocused.value) isPristine.value = true;
     }
 
     function select(item) {
       if (props.multiple) {
-        const index = selections.value.findIndex(selection => selection.value === item.value);
+        const index = selected.value.findIndex(selection => selection === item.value);
 
         if (index === -1) {
-          model.value.push(item.value);
+          model.value = [...model.value, item.value];
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
 
         search.value = '';
@@ -12315,7 +12753,7 @@ const VCombobox = genericComponent()({
       } else {
         menu.value = false;
         if (!props.multiple || !search.value) return;
-        model.value.push(search.value);
+        model.value = [...model.value, search.value];
         search.value = '';
       }
     });
@@ -12324,7 +12762,7 @@ const VCombobox = genericComponent()({
       return createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onInput": onInput,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
           'v-combobox--chips': !!props.chips,
@@ -12340,75 +12778,79 @@ const VCombobox = genericComponent()({
         "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }, { ...slots,
-        default: () => createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
-          "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
-          "activator": activator.value,
-          "contentClass": "v-combobox__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition,
-          "onAfterLeave": onAfterLeave
-        }, {
-          default: () => [createVNode(VList, {
-            "selected": selected.value,
-            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+        default: () => {
+          var _slots$noData, _slots$noData2;
+
+          return createVNode(Fragment, null, [activator.value && createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": activator.value,
+            "contentClass": "v-combobox__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "transition": props.transition,
+            "onAfterLeave": onAfterLeave
           }, {
-            default: () => [!filteredItems.value.length && !props.hideNoData && createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), filteredItems.value.map(_ref2 => {
-              let {
-                item,
-                matches
-              } = _ref2;
-              return createVNode(VListItem, {
-                "value": item.value,
-                "onMousedown": e => e.preventDefault(),
-                "onClick": () => select(item)
-              }, {
-                title: () => {
-                  var _search$value$length, _search$value;
-
-                  return isPristine.value ? item.title : highlightResult(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
-                }
-              });
+            default: () => [createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+            }, {
+              default: () => [!filteredItems.value.length && !props.hideNoData && ((_slots$noData = (_slots$noData2 = slots['no-data']) == null ? void 0 : _slots$noData2.call(slots)) != null ? _slots$noData : createVNode(VListItem, {
+                "title": t(props.noDataText)
+              }, null)), filteredItems.value.map(_ref2 => {
+                let {
+                  item,
+                  matches
+                } = _ref2;
+                return createVNode(VListItem, {
+                  "value": item.value,
+                  "onMousedown": e => e.preventDefault(),
+                  "onClick": () => select(item)
+                }, {
+                  title: () => {
+                    var _search$value$length, _search$value;
+
+                    return isPristine.value ? item.title : highlightResult(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
+                  }
+                });
+              })]
             })]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+          }), selections.value.map((selection, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(selection);
+            }
 
-          const slotProps = {
-            'onClick:close': onChipClose,
-            modelValue: true
-          };
-          return createVNode("div", {
-            "class": ['v-combobox__selection', selection.selected && ['v-combobox__selection--selected', textColorClasses.value]],
-            "style": selection.selected ? textColorStyles.value : {}
-          }, [hasChips && createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return createVNode("div", {
+              "class": ['v-combobox__selection', selection.selected && ['v-combobox__selection--selected', textColorClasses.value]],
+              "style": selection.selected ? textColorStyles.value : {}
+            }, [hasChips && createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: selection.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                props: slotProps,
+                selection
+              }) : createVNode(VChip, slotProps, null)]
+            }), !hasChips && (slots.selection ? slots.selection({
               selection
-            }) : createVNode(VChip, slotProps, null)]
-          }), !hasChips && (slots.selection ? slots.selection({
-            selection
-          }) : createVNode("span", {
-            "class": "v-combobox__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
-            "class": "v-combobox__selection-comma"
-          }, [createTextVNode(",")])]))]);
-        })])
+            }) : createVNode("span", {
+              "class": "v-combobox__selection-text"
+            }, [selection.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
+              "class": "v-combobox__selection-comma"
+            }, [createTextVNode(",")])]))]);
+          })]);
+        }
       });
     });
     return useForwardRef({
@@ -12464,19 +12906,15 @@ const VDialog = genericComponent()({
     const overlay = ref();
 
     function onFocusin(e) {
-      var _overlay$value;
+      var _overlay$value, _overlay$value2;
 
       const before = e.relatedTarget;
       const after = e.target;
 
-      if (before !== after && (_overlay$value = overlay.value) != null && _overlay$value.contentEl && // It isn't the document or the dialog body
+      if (before !== after && (_overlay$value = overlay.value) != null && _overlay$value.contentEl && // We're the topmost dialog
+      (_overlay$value2 = overlay.value) != null && _overlay$value2.isTop && // It isn't the document or the dialog body
       ![document, overlay.value.contentEl].includes(after) && // It isn't inside the dialog body
-      !overlay.value.contentEl.contains(after) // We're the topmost dialog
-      // TODO: this.activeZIndex >= this.getMaxZIndex() &&
-      // It isn't inside a dependent element (like a menu)
-      // TODO: !this.getOpenDependentElements().some(el => el.contains(target))
-      // So we must have focused something outside the dialog and its children
-      ) {
+      !overlay.value.contentEl.contains(after)) {
         const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
         if (!focusable.length) return;
         const firstElement = focusable[0];
@@ -12520,7 +12958,8 @@ const VDialog = genericComponent()({
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "class": ['v-dialog', {
-          'v-dialog--fullscreen': props.fullscreen
+          'v-dialog--fullscreen': props.fullscreen,
+          'v-dialog--scrollable': props.scrollable
         }],
         "style": dimensionStyles.value,
         "transition": props.transition,
@@ -12551,6 +12990,7 @@ const VExpansionPanels = defineComponent({
       default: 'default',
       validator: v => allowedVariants.includes(v)
     },
+    readonly: Boolean,
     ...makeGroupProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -12571,6 +13011,9 @@ const VExpansionPanels = defineComponent({
     provideDefaults({
       VExpansionPanel: {
         color: toRef(props, 'color')
+      },
+      VExpansionPanelTitle: {
+        readonly: toRef(props, 'readonly')
       }
     });
     useRender(() => createVNode(props.tag, {
@@ -12595,7 +13038,8 @@ const makeVExpansionPanelTitleProps = propsFactory({
   ripple: {
     type: [Boolean, Object],
     default: false
-  }
+  },
+  readonly: Boolean
 });
 const VExpansionPanelTitle = defineComponent({
   name: 'VExpansionPanelTitle',
@@ -12619,7 +13063,8 @@ const VExpansionPanelTitle = defineComponent({
       collapseIcon: props.collapseIcon,
       disabled: expansionPanel.disabled.value,
       expanded: expansionPanel.isSelected.value,
-      expandIcon: props.expandIcon
+      expandIcon: props.expandIcon,
+      readonly: props.readonly
     }));
     useRender(() => {
       var _slots$default;
@@ -12633,7 +13078,7 @@ const VExpansionPanelTitle = defineComponent({
         "tabindex": expansionPanel.disabled.value ? -1 : undefined,
         "disabled": expansionPanel.disabled.value,
         "aria-expanded": expansionPanel.isSelected.value,
-        "onClick": expansionPanel.toggle
+        "onClick": !props.readonly ? expansionPanel.toggle : undefined
       }, [createVNode("div", {
         "class": "v-expansion-panel-title__overlay"
       }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), !props.hideActions && createVNode("div", {
@@ -12710,13 +13155,17 @@ const VExpansionPanel = defineComponent({
       roundedClasses
     } = useRounded(props);
     const isDisabled = computed(() => (groupItem == null ? void 0 : groupItem.disabled.value) || props.disabled);
+    const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
+      if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
+      return arr;
+    }, []));
     const isBeforeSelected = computed(() => {
       const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
-      return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === 1);
+      return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === 1);
     });
     const isAfterSelected = computed(() => {
       const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
-      return !groupItem.isSelected.value && groupItem.group.selected.value.some(id => groupItem.group.items.value.indexOf(id) - index === -1);
+      return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
     });
     provide(VExpansionPanelSymbol, groupItem);
     useRender(() => {
@@ -12884,7 +13333,7 @@ const VFileInput = defineComponent({
     }
 
     useRender(() => {
-      const hasCounter = !!(slots.counter || props.counter || counterValue.value);
+      const hasCounter = !!(slots.counter || props.counter);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
       const [{
         modelValue: _,
@@ -12962,6 +13411,7 @@ const VFileInput = defineComponent({
           });
         },
         details: hasCounter ? () => createVNode(Fragment, null, [createVNode("span", null, null), createVNode(VCounter, {
+          "active": !!model.value.length,
           "value": counterValue.value
         }, slots.counter)]) : undefined
       });
@@ -12974,11 +13424,15 @@ const VFileInput = defineComponent({
 const VFooter = defineComponent({
   name: 'VFooter',
   props: {
+    app: Boolean,
     color: String,
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
     ...makeBorderProps(),
-    ...makeDimensionProps(),
     ...makeElevationProps(),
-    ...makePositionProps(),
+    ...makeLayoutItemProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
       tag: 'footer'
@@ -13000,22 +13454,35 @@ const VFooter = defineComponent({
     const {
       borderClasses
     } = useBorder(props);
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
     const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props);
+      roundedClasses
+    } = useRounded(props);
+    const autoHeight = ref(32);
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!entries.length) return;
+      autoHeight.value = entries[0].target.clientHeight;
+    });
+    const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
     const {
-      roundedClasses
-    } = useRounded(props);
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: computed(() => 'bottom'),
+      layoutSize: height,
+      elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
+      active: computed(() => props.app),
+      absolute: toRef(props, 'absolute')
+    });
     return () => createVNode(props.tag, {
-      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles, dimensionStyles.value, positionStyles.value]
+      "ref": resizeRef,
+      "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles, props.app ? layoutItemStyles.value : undefined]
     }, slots);
   }
 
@@ -13043,17 +13510,29 @@ const VForm = defineComponent({
       form.reset();
     }
 
-    function onSubmit(e) {
-      e.preventDefault();
-      form.validate().then(_ref2 => {
-        let {
-          valid
-        } = _ref2;
+    function onSubmit(_e) {
+      const e = _e;
+      const ready = form.validate();
+      e.then = ready.then.bind(ready);
+      e.catch = ready.catch.bind(ready);
+      e.finally = ready.finally.bind(ready);
+      emit('submit', e);
 
-        if (valid) {
-          emit('submit', e);
-        }
-      });
+      if (!e.defaultPrevented) {
+        ready.then(_ref2 => {
+          let {
+            valid
+          } = _ref2;
+
+          if (valid) {
+            var _formRef$value;
+
+            (_formRef$value = formRef.value) == null ? void 0 : _formRef$value.submit();
+          }
+        });
+      }
+
+      e.preventDefault();
     }
 
     useRender(() => {
@@ -13067,7 +13546,7 @@ const VForm = defineComponent({
         "onSubmit": onSubmit
       }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, form)]);
     });
-    return form;
+    return useForwardRef(form, formRef);
   }
 
 });
@@ -14026,7 +14505,7 @@ const VNavigationDrawer = defineComponent({
       roundedClasses
     } = useRounded(props);
     const router = useRouter();
-    const isActive = useProxiedModel(props, 'modelValue');
+    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v);
     const isHovering = ref(false);
     const width = computed(() => {
       return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
@@ -14315,27 +14794,25 @@ const VPagination = defineComponent({
     });
     const range = computed(() => {
       if (length.value <= 0) return [];
+      if (totalVisible.value <= 2) return [page.value];
 
-      if (totalVisible.value <= 3) {
-        return [Math.min(Math.max(start.value, page.value), start.value + length.value)];
-      }
-
-      if (props.length <= totalVisible.value) {
+      if (length.value <= totalVisible.value) {
         return createRange(length.value, start.value);
       }
 
-      const middle = Math.ceil(totalVisible.value / 2);
-      const left = middle;
+      const even = totalVisible.value % 2 === 0;
+      const middle = even ? totalVisible.value / 2 : Math.floor(totalVisible.value / 2);
+      const left = even ? middle : middle + 1;
       const right = length.value - middle;
 
-      if (page.value < left) {
-        return [...createRange(Math.max(1, totalVisible.value - 2), start.value), props.ellipsis, length.value];
-      } else if (page.value > right) {
-        const rangeLength = totalVisible.value - 2;
+      if (left - page.value >= 0) {
+        return [...createRange(Math.max(1, totalVisible.value - 1), start.value), props.ellipsis, length.value];
+      } else if (page.value - right >= 0) {
+        const rangeLength = totalVisible.value - 1;
         const rangeStart = length.value - rangeLength + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart)];
       } else {
-        const rangeLength = Math.max(1, totalVisible.value - 4);
+        const rangeLength = Math.max(1, totalVisible.value - 3);
         const rangeStart = rangeLength === 1 ? page.value : page.value - Math.ceil(rangeLength / 2) + start.value;
         return [start.value, props.ellipsis, ...createRange(rangeLength, rangeStart), props.ellipsis, length.value];
       }
@@ -14678,7 +15155,7 @@ const VProgressCircular = defineComponent({
 
 });
 
-const VRadio = defineComponent$1({
+const VRadio = defineComponent({
   name: 'VRadio',
   props: {
     falseIcon: {
@@ -14706,7 +15183,7 @@ const VRadio = defineComponent$1({
 
 });
 
-const VRadioGroup = defineComponent$1({
+const VRadioGroup = defineComponent({
   name: 'VRadioGroup',
   inheritAttrs: false,
   props: {
@@ -14775,7 +15252,7 @@ const VRadioGroup = defineComponent$1({
 
 });
 
-const VRangeSlider = defineComponent$1({
+const VRangeSlider = defineComponent({
   name: 'VRangeSlider',
   props: { ...makeFocusProps(),
     ...makeVInputProps(),
@@ -15162,6 +15639,12 @@ const VRating = genericComponent()({
       }, null)]);
     }
 
+    function createLabel(labelProps) {
+      if (slots['item-label']) return slots['item-label'](labelProps);
+      if (labelProps.label) return createVNode("span", null, [labelProps.label]);
+      return createVNode("span", null, [createTextVNode("\xA0")]);
+    }
+
     return () => {
       var _props$itemLabels;
 
@@ -15181,11 +15664,11 @@ const VRating = genericComponent()({
 
           return createVNode("div", {
             "class": "v-rating__wrapper"
-          }, [!hasLabels ? undefined : slots['item-label'] ? slots['item-label']({
+          }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
             value,
             index: i,
             label: (_props$itemLabels2 = props.itemLabels) == null ? void 0 : _props$itemLabels2[i]
-          }) : (_props$itemLabels3 = props.itemLabels) != null && _props$itemLabels3[i] ? createVNode("span", null, [props.itemLabels[i]]) : createVNode("span", null, [createTextVNode("\xA0")]), createVNode("div", {
+          }) : undefined, createVNode("div", {
             "class": ['v-rating__item', {
               'v-rating__item--focused': Math.ceil(focusIndex.value) === value
             }]
@@ -15198,7 +15681,11 @@ const VRating = genericComponent()({
           }, null)]) : createVNode(VRatingItem, {
             "value": value,
             "index": i
-          }, null)])]);
+          }, null)]), hasLabels && props.itemLabelPosition === 'bottom' ? createLabel({
+            value,
+            index: i,
+            label: (_props$itemLabels3 = props.itemLabels) == null ? void 0 : _props$itemLabels3[i]
+          }) : undefined]);
         })]
       });
     };
@@ -15264,10 +15751,6 @@ const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
 const VSlideGroup = defineComponent({
   name: 'VSlideGroup',
   props: {
-    activeClass: {
-      type: String,
-      default: 'v-slide-item--active'
-    },
     centerActive: Boolean,
     direction: {
       type: String,
@@ -15290,7 +15773,9 @@ const VSlideGroup = defineComponent({
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
     ...makeTagProps(),
-    ...makeGroupProps()
+    ...makeGroupProps({
+      selectedClass: 'v-slide-group-item--active'
+    })
   },
   emits: {
     'update:modelValue': value => true
@@ -15316,21 +15801,31 @@ const VSlideGroup = defineComponent({
       resizeRef: containerRef,
       contentRect: containerRect
     } = useResizeObserver();
-    const contentRef = ref();
+    const {
+      resizeRef: contentRef,
+      contentRect
+    } = useResizeObserver();
     watchEffect(() => {
-      if (!containerRect.value || !contentRef.value) return;
+      if (!containerRect.value || !contentRect.value) return;
       const sizeProperty = isHorizontal.value ? 'width' : 'height';
       containerSize.value = containerRect.value[sizeProperty];
-      contentSize.value = contentRef.value.getBoundingClientRect()[sizeProperty];
+      contentSize.value = contentRect.value[sizeProperty];
       isOverflowing.value = containerSize.value + 1 < contentSize.value;
     });
-    watch(group.selected, selected => {
-      if (!selected.length || !contentRef.value) return;
-      const index = group.items.value.findIndex(item => item.id === selected[selected.length - 1]); // TODO: Is this too naive? Should we store element references in group composable?
+    const firstSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[0]);
+    });
+    const lastSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
+    });
+    watch(group.selected, () => {
+      if (firstSelectedIndex.value < 0 || !contentRef.value) return; // TODO: Is this too naive? Should we store element references in group composable?
 
-      const selectedElement = contentRef.value.children[index];
+      const selectedElement = contentRef.value.children[lastSelectedIndex.value];
 
-      if (index === 0 || !isOverflowing.value) {
+      if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
         scrollOffset.value = 0;
       } else if (props.centerActive) {
         scrollOffset.value = calculateCenteredOffset({
@@ -15351,6 +15846,20 @@ const VSlideGroup = defineComponent({
         });
       }
     });
+    let firstOverflow = true;
+    watch(isOverflowing, () => {
+      if (!firstOverflow || !contentRef.value || firstSelectedIndex.value < 0) return;
+      firstOverflow = false; // TODO: Is this too naive? Should we store element references in group composable?
+
+      const selectedElement = contentRef.value.children[firstSelectedIndex.value];
+      scrollOffset.value = calculateCenteredOffset({
+        selectedElement,
+        containerSize: containerSize.value,
+        contentSize: contentSize.value,
+        isRtl: isRtl.value,
+        isHorizontal: isHorizontal.value
+      });
+    });
     const disableTransition = ref(false);
     let startTouch = 0;
     let startOffset = 0;
@@ -15498,7 +16007,7 @@ const VSlideGroup = defineComponent({
         // Always show arrows on desktop
 
         case 'desktop':
-          return mobile.value;
+          return !mobile.value;
         // Show arrows on mobile when overflowing.
         // This matches the default 2.2 behavior
 
@@ -15597,7 +16106,9 @@ const VSlideGroupItem = defineComponent({
 
       return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
         isSelected: slideGroupItem.isSelected.value,
-        select: slideGroupItem.select
+        select: slideGroupItem.select,
+        toggle: slideGroupItem.toggle,
+        selectedClass: slideGroupItem.selectedClass.value
       });
     };
   }
@@ -15621,6 +16132,7 @@ const VSnackbar = defineComponent({
     vertical: Boolean,
     modelValue: Boolean,
     ...makePositionProps(),
+    ...makeRoundedProps(),
     ...makeVariantProps(),
     ...makeTransitionProps({
       transition: 'v-snackbar-transition'
@@ -15644,6 +16156,9 @@ const VSnackbar = defineComponent({
       colorStyles,
       variantClasses
     } = useVariant(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -15667,7 +16182,9 @@ const VSnackbar = defineComponent({
     useRender(() => {
       var _slots$default, _slots$actions;
 
-      return createVNode("div", {
+      return createVNode(VOverlay, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
         "class": ['v-snackbar', {
           'v-snackbar--active': isActive.value,
           'v-snackbar--bottom': props.bottom || !props.top,
@@ -15678,12 +16195,15 @@ const VSnackbar = defineComponent({
           'v-snackbar--top': props.top,
           'v-snackbar--vertical': props.vertical
         }, positionClasses.value],
-        "style": [colorStyles.value, positionStyles.value]
-      }, [createVNode(MaybeTransition, {
+        "style": [colorStyles.value, positionStyles.value],
+        "persistent": true,
+        "noClickAnimation": true,
+        "scrim": false,
+        "scrollStrategy": "none",
         "transition": props.transition
       }, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": ['v-snackbar__wrapper', colorClasses.value, variantClasses.value],
+        default: () => [createVNode("div", {
+          "class": ['v-snackbar__wrapper', colorClasses.value, roundedClasses.value, variantClasses.value],
           "onPointerenter": onPointerenter,
           "onPointerleave": startTimeout
         }, [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
@@ -15701,21 +16221,25 @@ const VSnackbar = defineComponent({
           default: () => [createVNode("div", {
             "class": "v-snackbar__actions"
           }, [(_slots$actions = slots.actions) == null ? void 0 : _slots$actions.call(slots)])]
-        })]), [[vShow, isActive.value]])]
-      })]);
+        })])],
+        activator: slots.activator
+      });
     });
   }
 
 });
 
-const VSwitch = defineComponent$1({
+const VSwitch = defineComponent({
   name: 'VSwitch',
   inheritAttrs: false,
   props: {
     indeterminate: Boolean,
     inset: Boolean,
     flat: Boolean,
-    ...makeLoaderProps(),
+    loading: {
+      type: [Boolean, String],
+      default: false
+    },
     ...makeVInputProps(),
     ...makeSelectionControlProps()
   },
@@ -15775,7 +16299,7 @@ const VSwitch = defineComponent$1({
             "aria-checked": indeterminate.value ? 'mixed' : undefined,
             "disabled": isDisabled.value,
             "readonly": isReadonly.value
-          }, controlAttrs), {
+          }, controlAttrs), { ...slots,
             default: () => createVNode("div", {
               "class": "v-switch__track",
               "onClick": onClick
@@ -15813,10 +16337,10 @@ const VSystemBar = defineComponent({
   name: 'VSystemBar',
   props: {
     color: String,
+    height: [Number, String],
     window: Boolean,
-    ...makeDimensionProps(),
     ...makeElevationProps(),
-    ...makePositionProps(),
+    ...makeLayoutItemProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -15833,29 +16357,48 @@ const VSystemBar = defineComponent({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       elevationClasses
     } = useElevation(props);
-    const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
+    const height = computed(() => {
+      var _props$height;
+
+      return ((_props$height = props.height) != null ? _props$height : props.window) ? 32 : 24;
+    });
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: ref('top'),
+      layoutSize: height,
+      elementSize: height,
+      active: computed(() => true),
+      absolute: toRef(props, 'absolute')
+    });
+    provideDefaults({
+      VBtn: {
+        variant: 'text',
+        density: 'compact'
+      }
+    }, {
+      scoped: true
+    });
     return () => createVNode(props.tag, {
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, positionStyles.value]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value]
     }, slots);
   }
 
 });
 
+const VTabsSymbol = Symbol.for('vuetify:v-tabs');
+
 const VTab = defineComponent({
   name: 'VTab',
   props: {
@@ -15889,31 +16432,22 @@ const VTab = defineComponent({
       slots,
       attrs
     } = _ref;
-    const {
-      isSelected,
-      select,
-      selectedClass
-    } = useGroupItem(props, VTabsSymbol);
     const {
       textColorClasses: sliderColorClasses,
       textColorStyles: sliderColorStyles
     } = useTextColor(props, 'sliderColor');
     const isHorizontal = computed(() => props.direction === 'horizontal');
-    provideDefaults({
-      VBtn: {
-        block: toRef(props, 'fixed'),
-        maxWidth: computed(() => props.fixed ? 300 : undefined),
-        color: computed(() => isSelected.value ? props.color : undefined),
-        variant: 'text',
-        rounded: 0
-      }
-    }, {
-      scoped: true
-    });
+    const isSelected = ref(false);
     const rootEl = ref();
     const sliderEl = ref();
-    watch(isSelected, isSelected => {
-      if (isSelected) {
+
+    function updateSlider(_ref2) {
+      let {
+        value
+      } = _ref2;
+      isSelected.value = value;
+
+      if (value) {
         var _rootEl$value, _rootEl$value$$el$par;
 
         const prevEl = (_rootEl$value = rootEl.value) == null ? void 0 : (_rootEl$value$$el$par = _rootEl$value.$el.parentElement) == null ? void 0 : _rootEl$value$$el$par.querySelector('.v-tab--selected .v-tab__slider');
@@ -15943,17 +16477,25 @@ const VTab = defineComponent({
           easing: standardEasing
         });
       }
-    });
+    }
+
     useRender(() => {
-      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled']);
+      const [btnProps] = pick(props, ['href', 'to', 'replace', 'icon', 'stacked', 'prependIcon', 'appendIcon', 'ripple', 'theme', 'disabled', 'selectedClass', 'value', 'color']);
       return createVNode(VBtn, mergeProps({
+        "_as": "VTab",
+        "symbol": VTabsSymbol,
         "ref": rootEl,
-        "class": ['v-tab', selectedClass.value],
+        "class": ['v-tab'],
         "tabindex": isSelected.value ? 0 : -1,
         "role": "tab",
         "aria-selected": String(isSelected.value),
-        "onClick": () => !props.disabled && select(!isSelected.value)
-      }, btnProps, attrs), {
+        "block": props.fixed,
+        "maxWidth": props.fixed ? 300 : undefined,
+        "variant": "text",
+        "rounded": 0
+      }, btnProps, attrs, {
+        "onGroup:selected": updateSlider
+      }), {
         default: () => [slots.default ? slots.default() : props.title, !props.hideSlider && createVNode("div", {
           "ref": sliderEl,
           "class": ['v-tab__slider', sliderColorClasses.value],
@@ -15961,9 +16503,7 @@ const VTab = defineComponent({
         }, null)]
       });
     });
-    return {
-      isSelected
-    };
+    return {};
   }
 
 });
@@ -15979,7 +16519,6 @@ function parseItems(items) {
   });
 }
 
-const VTabsSymbol = Symbol.for('vuetify:v-tabs');
 const VTabs = defineComponent({
   name: 'VTabs',
   props: {
@@ -16004,7 +16543,7 @@ const VTabs = defineComponent({
     },
     hideSlider: Boolean,
     optional: Boolean,
-    right: Boolean,
+    end: Boolean,
     sliderColor: String,
     modelValue: null,
     ...makeDensityProps(),
@@ -16043,7 +16582,7 @@ const VTabs = defineComponent({
         'v-tabs--centered': props.centered,
         'v-tabs--fixed-tabs': props.fixedTabs,
         'v-tabs--grow': props.grow,
-        'v-tabs--right': props.right,
+        'v-tabs--end': props.end,
         'v-tabs--stacked': props.stacked
       }, densityClasses.value, backgroundColorClasses.value],
       "style": backgroundColorStyles.value,
@@ -16357,7 +16896,96 @@ const VThemeProvider = defineComponent({
 
 const VTimelineSymbol = Symbol.for('vuetify:timeline');
 
-const VTimelineDivider = defineComponent$1({
+const VTimeline = defineComponent({
+  name: 'VTimeline',
+  props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    side: {
+      type: String,
+      validator: v => v == null || ['start', 'end'].includes(v)
+    },
+    lineInset: {
+      type: [String, Number],
+      default: 0
+    },
+    lineThickness: {
+      type: [String, Number],
+      default: 2
+    },
+    lineColor: String,
+    truncateLine: {
+      type: String,
+      validator: v => ['start', 'end', 'both'].includes(v)
+    },
+    ...makeDensityProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    provide(VTimelineSymbol, {
+      density: toRef(props, 'density'),
+      lineColor: toRef(props, 'lineColor')
+    });
+    const sideClass = computed(() => {
+      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
+      return side && `v-timeline--side-${side}`;
+    });
+    const truncateClasses = computed(() => {
+      const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
+
+      switch (props.truncateLine) {
+        case 'both':
+          return classes;
+
+        case 'start':
+          return classes[0];
+
+        case 'end':
+          return classes[1];
+
+        default:
+          return null;
+      }
+    });
+    return () => {
+      var _slots$default;
+
+      return createVNode(props.tag, {
+        "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, !props.lineInset && truncateClasses.value, {
+          'v-timeline--inset-line': !!props.lineInset
+        }, themeClasses.value, densityClasses.value, sideClass.value],
+        "style": {
+          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
+          '--v-timeline-line-inset': convertToUnit(props.lineInset)
+        }
+      }, {
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+      });
+    };
+  }
+
+});
+
+const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
   props: {
     hideDot: Boolean,
@@ -16492,77 +17120,6 @@ const VTimelineItem = defineComponent({
 
 });
 
-const VTimeline = defineComponent({
-  name: 'VTimeline',
-  props: {
-    direction: {
-      type: String,
-      default: 'vertical',
-      validator: v => ['vertical', 'horizontal'].includes(v)
-    },
-    side: {
-      type: String,
-      validator: v => v == null || ['start', 'end'].includes(v)
-    },
-    lineInset: {
-      type: [String, Number],
-      default: 0
-    },
-    lineThickness: {
-      type: [String, Number],
-      default: 2
-    },
-    lineColor: String,
-    truncateLine: {
-      type: String,
-      default: 'start',
-      validator: v => ['none', 'start', 'end', 'both'].includes(v)
-    },
-    ...makeDensityProps(),
-    ...makeTagProps(),
-    ...makeThemeProps()
-  },
-
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const {
-      themeClasses
-    } = provideTheme(props);
-    const {
-      densityClasses
-    } = useDensity(props);
-    provide(VTimelineSymbol, {
-      density: toRef(props, 'density'),
-      lineColor: toRef(props, 'lineColor')
-    });
-    const sideClass = computed(() => {
-      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
-      return side && `v-timeline--side-${side}`;
-    });
-    return () => {
-      var _slots$default;
-
-      return createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, {
-          'v-timeline--inset-line': !!props.lineInset,
-          'v-timeline--truncate-line-end': props.truncateLine === 'end' || props.truncateLine === 'both'
-        }, themeClasses.value, densityClasses.value, sideClass.value],
-        "style": {
-          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
-          '--v-timeline-line-inset': convertToUnit(props.lineInset)
-        }
-      }, {
-        default: () => [(props.truncateLine === 'none' || props.truncateLine === 'end') && createVNode(VTimelineItem, {
-          "hideDot": true
-        }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-      });
-    };
-  }
-
-});
-
 const VTooltip = genericComponent()({
   name: 'VTooltip',
   inheritAttrs: false,
@@ -16680,6 +17237,8 @@ var components = /*#__PURE__*/Object.freeze({
   VBadge: VBadge,
   VBanner: VBanner,
   VBannerActions: VBannerActions,
+  VBannerAvatar: VBannerAvatar,
+  VBannerIcon: VBannerIcon,
   VBannerText: VBannerText,
   VBottomNavigation: VBottomNavigation,
   VBreadcrumbs: VBreadcrumbs,
@@ -16691,6 +17250,7 @@ var components = /*#__PURE__*/Object.freeze({
   VCard: VCard,
   VCardActions: VCardActions,
   VCardAvatar: VCardAvatar,
+  VCardContent: VCardContent,
   VCardHeader: VCardHeader,
   VCardHeaderText: VCardHeaderText,
   VCardImg: VCardImg,
@@ -16741,8 +17301,10 @@ var components = /*#__PURE__*/Object.freeze({
   VListSubheader: VListSubheader,
   VListImg: VListImg,
   VListItem: VListItem,
+  VListItemAction: VListItemAction,
   VListItemAvatar: VListItemAvatar,
   VListItemHeader: VListItemHeader,
+  VListItemIcon: VListItemIcon,
   VListItemMedia: VListItemMedia,
   VListItemSubtitle: VListItemSubtitle,
   VListItemTitle: VListItemTitle,
@@ -17012,19 +17574,24 @@ const createVuetify$1 = function () {
 
   const install = app => {
     const {
+      aliases: aliases$1 = {},
       components = {},
       directives = {},
       icons = {}
     } = options;
 
     for (const key in directives) {
-      const directive = directives[key];
-      app.directive(key, directive);
+      app.directive(key, directives[key]);
     }
 
     for (const key in components) {
-      const component = components[key];
-      app.component(key, component);
+      app.component(key, components[key]);
+    }
+
+    for (const key in aliases$1) {
+      app.component(key, defineComponent({ ...aliases$1[key],
+        name: key
+      }));
     }
 
     app.provide(DefaultsSymbol, createDefaults(options.defaults));
@@ -17035,7 +17602,7 @@ const createVuetify$1 = function () {
       sets: { ...defaultSets,
         mdi
       },
-      aliases
+      aliases: aliases
     }, icons));
     const {
       adapter,
@@ -17085,7 +17652,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.0.0-beta.0";
+const version = "3.0.0-beta.2";
 
 export { components, createVuetify, directives, provideRtl, useDisplay, useLayout, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify.esm.js.map