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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.0-beta.0
+* Vuetify v3.0.0-beta.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -797,7 +797,7 @@
         return properties;
       }
 
-      return mergeDeep(properties, properties.prev);
+      return mergeDeep(properties.prev, properties);
     });
     vue.provide(DefaultsSymbol, newDefaults);
     return newDefaults;
@@ -822,16 +822,33 @@
     }
 
     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 = vue.getCurrentInstance();
         const defaults = useDefaults();
 
+        const _subcomponentDefaults = vue.shallowRef();
+
         const _props = vue.shallowReactive({ ...vue.toRaw(props)
         });
 
         vue.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;
@@ -839,9 +856,9 @@
             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) {
@@ -849,7 +866,21 @@
             }
           }
         });
-        return options._setup(_props, ctx);
+
+        const setupBindings = options._setup(_props, ctx);
+
+        let scope;
+        vue.watch(_subcomponentDefaults, (val, oldVal) => {
+          if (!val && scope) scope.stop();else if (val && !oldVal) {
+            scope = vue.effectScope();
+            scope.run(() => {
+              provideDefaults(val);
+            });
+          }
+        }, {
+          immediate: true
+        });
+        return setupBindings;
       };
     }
 
@@ -1406,16 +1437,12 @@
   function useResizeObserver(callback) {
     const resizeRef = vue.ref();
     const contentRect = vue.ref();
-    const contentBoxSize = vue.ref();
-    const borderBoxSize = vue.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];
       });
       vue.onBeforeUnmount(() => {
         observer.disconnect();
@@ -1424,8 +1451,6 @@
         if (oldValue) {
           observer.unobserve(oldValue);
           contentRect.value = undefined;
-          contentBoxSize.value = undefined;
-          borderBoxSize.value = undefined;
         }
 
         if (newValue) observer.observe(newValue);
@@ -1436,16 +1461,15 @@
 
     return {
       resizeRef,
-      contentRect: vue.readonly(contentRect),
-      contentBoxSize: vue.readonly(contentBoxSize),
-      borderBoxSize: vue.readonly(borderBoxSize)
+      contentRect: vue.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,
@@ -1476,6 +1500,9 @@
     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');
+    vue.provide(VuetifyLayoutItemKey, {
+      id
+    });
     const isKeptAlive = vue.ref(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
@@ -1527,7 +1554,7 @@
 
   function createLayout(props) {
     const parentLayout = vue.inject(VuetifyLayoutKey, null);
-    const rootZIndex = vue.computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX$1);
+    const rootZIndex = vue.computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
     const registered = vue.ref([]);
     const positions = vue.reactive(new Map());
     const layoutSizes = vue.reactive(new Map());
@@ -1638,7 +1665,7 @@
         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 = vue.computed(() => items.value.findIndex(i => i.id === id));
@@ -1651,7 +1678,7 @@
             [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'
             })
@@ -1667,17 +1694,17 @@
           }
 
           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 = vue.computed(() => ({
           zIndex: zIndex.value - 1,
-          position: rootZIndex.value === ROOT_ZINDEX$1 ? 'fixed' : 'absolute'
+          position: rootZIndex.value === ROOT_ZINDEX ? 'fixed' : 'absolute'
         }));
         return {
           layoutItemStyles,
@@ -2573,19 +2600,23 @@
 
       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;
@@ -2649,24 +2680,20 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(vue.toRef(props, 'color'));
-      const contentHeight = vue.computed(() => Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
+      const isExtended = vue.computed(() => !!(props.extended || slots.extension));
+      const contentHeight = vue.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 = vue.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 vue.createVNode(props.tag, {
           "class": ['v-toolbar', {
             'v-toolbar--absolute': props.absolute,
@@ -2702,16 +2729,17 @@
             text: slots.title
           }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && vue.createVNode("div", {
             "class": "v-toolbar__append"
-          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended && vue.createVNode("div", {
+          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended.value && vue.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
       });
     }
 
@@ -2789,9 +2817,11 @@
       const vToolbarRef = vue.ref();
       const isActive = useProxiedModel(props, 'modelValue');
       const height = vue.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
@@ -2811,7 +2841,9 @@
           "class": ['v-app-bar', {
             'v-app-bar--bottom': props.position === 'bottom'
           }],
-          "style": layoutItemStyles.value
+          "style": { ...layoutItemStyles.value,
+            height: undefined
+          }
         }, toolbarProps), slots);
       };
     }
@@ -2849,7 +2881,6 @@
   }
   const makeVariantProps = propsFactory({
     color: String,
-    textColor: String,
     variant: {
       type: String,
       default: 'contained',
@@ -2869,12 +2900,10 @@
       colorStyles
     } = useColor(vue.computed(() => {
       const {
-        textColor,
         variant,
         color
       } = vue.unref(props);
       return {
-        text: textColor,
         [['contained', 'contained-flat'].includes(variant) ? 'background' : 'text']: color
       };
     }));
@@ -2985,10 +3014,11 @@
     const isSelected = vue.computed(() => {
       return group.isSelected(id);
     });
-    const selectedClass = vue.computed(() => {
-      var _group$selectedClass$;
-
-      return isSelected.value && ((_group$selectedClass$ = group.selectedClass.value) != null ? _group$selectedClass$ : props.selectedClass);
+    const selectedClass = vue.computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
+    vue.watch(isSelected, value => {
+      vm.emit('group:selected', {
+        value
+      });
     });
     return {
       id,
@@ -3115,12 +3145,19 @@
       next: () => step(1),
       isSelected: id => selected.value.includes(id),
       selectedClass: vue.computed(() => props.selectedClass),
-      items: vue.computed(() => items)
+      items: vue.computed(() => items),
+      getItemIndex: value => getItemIndex(items, value)
     };
     vue.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 = [];
 
@@ -3348,24 +3385,26 @@
     };
   };
 
+  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;
@@ -3398,8 +3437,9 @@
           "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),
@@ -3489,21 +3529,33 @@
     replace: Boolean,
     to: [String, Object]
   }, 'router');
+  let inTransition = false;
   function useBackButton(cb) {
     const router = useRouter();
     let popped = false;
-    let removeGuard;
+    let removeBefore;
+    let removeAfter;
     vue.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;
       });
     });
     vue.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) {
@@ -3515,9 +3567,27 @@
     }
   }
 
+  // Utilities
+
+  function useSelectLink(link, select) {
+    vue.watch(() => {
+      var _link$isExactActive;
+
+      return (_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value;
+    }, isExactActive => {
+      if (link.isLink.value && isExactActive && select) {
+        vue.nextTick(() => {
+          select(true);
+        });
+      }
+    }, {
+      immediate: true
+    });
+  }
+
   // Styles
 
-  const rippleStop = Symbol('rippleStop');
+  const stopSymbol = Symbol('rippleStop');
   const DELAY_RIPPLE = 80;
 
   function transform(el, value) {
@@ -3665,9 +3735,9 @@
   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;
@@ -3708,6 +3778,10 @@
     }
   }
 
+  function rippleStop(e) {
+    e[stopSymbol] = true;
+  }
+
   function rippleHide(e) {
     const element = e.currentTarget;
     if (!element || !element._ripple) return;
@@ -3788,6 +3862,14 @@
     }
 
     if (enabled && !wasEnabled) {
+      if (modifiers.stop) {
+        el.addEventListener('touchstart', rippleStop, {
+          passive: true
+        });
+        el.addEventListener('mousedown', rippleStop);
+        return;
+      }
+
       el.addEventListener('touchstart', rippleShow, {
         passive: true
       });
@@ -3857,6 +3939,11 @@
       Ripple
     },
     props: {
+      active: Boolean,
+      symbol: {
+        type: null,
+        default: VBtnToggleSymbol
+      },
       flat: Boolean,
       icon: [Boolean, String],
       prependIcon: String,
@@ -3920,21 +4007,22 @@
       const {
         sizeClasses
       } = useSize(props);
-      const group = useGroupItem(props, VBtnToggleSymbol, false);
+      const group = useGroupItem(props, props.symbol, false);
       const link = useLink(props, attrs);
       const isDisabled = vue.computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
       const isElevated = vue.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 vue.withDirectives(vue.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,
@@ -3945,12 +4033,18 @@
           "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 && vue.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) : vue.createVNode(VIcon, {
             "class": "v-btn__icon",
             "icon": props.icon,
@@ -3958,7 +4052,7 @@
           }, null), !props.icon && props.appendIcon && vue.createVNode(VIcon, {
             "class": "v-btn__icon",
             "icon": props.appendIcon,
-            "right": !props.stacked
+            "end": true
           }, null)]
         }), [[vue.resolveDirective("ripple"), !isDisabled.value && props.ripple, null]]);
       };
@@ -4008,7 +4102,6 @@
       provideDefaults({
         VBtn: {
           color: vue.toRef(props, 'color'),
-          textColor: vue.toRef(props, 'textColor'),
           variant: vue.toRef(props, 'variant')
         }
       });
@@ -4035,6 +4128,7 @@
 
   });
 
+  // Utilities
   const VAlertTitle = createSimpleFunctional('v-alert-title');
 
   const allowedTypes = ['success', 'info', 'warning', 'error'];
@@ -4104,7 +4198,6 @@
 
         return {
           color: (_props$color = props.color) != null ? _props$color : props.type,
-          textColor: props.textColor,
           variant: props.variant
         };
       });
@@ -4144,9 +4237,10 @@
       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 && vue.createVNode(props.tag, {
           "class": ['v-alert', props.border && {
             'v-alert--border': !!props.border,
@@ -4160,43 +4254,57 @@
           default: () => [genOverlays(false, 'v-alert'), props.border && vue.createVNode("div", {
             "class": ['v-alert__border', textColorClasses.value],
             "style": textColorStyles.value
-          }, null), hasPrepend && vue.createVNode("div", {
-            "class": "v-alert__prepend"
-          }, [slots.prepend ? slots.prepend() : vue.createVNode(VIcon, {
-            "icon": icon.value,
-            "size": props.prominent ? 'large' : 'default'
-          }, null)]), vue.createVNode("div", {
+          }, null), hasPrepend && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VIcon: {
+                density: props.density,
+                icon: icon.value,
+                size: props.prominent ? 44 : 'default'
+              }
+            }
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": "v-alert__prepend"
+            }, [slots.prepend ? slots.prepend() : icon.value && vue.createVNode(VIcon, null, null)])]
+          }), vue.createVNode("div", {
             "class": "v-alert__content"
           }, [hasTitle && vue.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 && vue.createVNode("div", {
+          }), hasText && (slots.text ? slots.text() : props.text), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && vue.createVNode("div", {
             "class": "v-alert__append"
-          }, [slots.append()]), hasClose && vue.createVNode("div", {
-            "class": "v-alert__close",
-            "onClick": onCloseClick
-          }, [slots.close ? slots.close() : vue.createVNode(VIcon, {
-            "icon": props.closeIcon,
-            "size": "small"
-          }, null)])]
+          }, [slots.append()]), hasClose && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VIcon: {
+                icon: props.closeIcon,
+                size: 'small'
+              }
+            }
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": "v-alert__close",
+              "onClick": onCloseClick
+            }, [slots.close ? slots.close() : vue.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 {
@@ -4221,8 +4329,8 @@
 
         return vue.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]
         }, {
@@ -4851,139 +4959,109 @@
     return vue.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,
@@ -4995,66 +5073,164 @@
 
         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');
@@ -5089,26 +5265,29 @@
 
       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 = vue.computed(() => {
       if (typeof props.openStrategy === 'function') return props.openStrategy;
 
       switch (props.openStrategy) {
+        case 'list':
+          return listOpenStrategy;
+
         case 'single':
           return singleOpenStrategy;
 
@@ -5179,7 +5358,7 @@
             path: getPath(id),
             event
           });
-          const newOpened = openStrategy.value({
+          const newOpened = openStrategy.value.open({
             id,
             value,
             opened: new Set(opened.value),
@@ -5202,10 +5381,19 @@
             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
@@ -5229,11 +5417,12 @@
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
       isSelected: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
       isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
-      isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value))
+      isLeaf: vue.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);
     vue.onBeforeUnmount(() => {
-      !parent.skipRegister && parent.root.unregister(computedId.value);
+      !parent.isGroupActivator && parent.root.unregister(computedId.value);
     });
     isGroup && vue.provide(VNestedSymbol, item);
     return item;
@@ -5241,11 +5430,11 @@
   const useNestedGroupActivator = () => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
     vue.provide(VNestedSymbol, { ...parent,
-      skipRegister: true
+      isGroupActivator: true
     });
   };
 
-  const VListGroupActivator = vue.defineComponent({
+  const VListGroupActivator = defineComponent({
     name: 'VListGroupActivator',
 
     setup(_, _ref) {
@@ -5264,6 +5453,8 @@
   const VListGroup = genericComponent()({
     name: 'VListGroup',
     props: {
+      activeColor: String,
+      color: String,
       collapseIcon: {
         type: String,
         default: '$collapse'
@@ -5290,11 +5481,17 @@
         open(!isOpen.value, e);
       };
 
-      const activatorProps = vue.computed(() => ({
-        onClick,
-        appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
-        class: 'v-list-group__header'
-      }));
+      const activatorProps = vue.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;
 
@@ -5303,9 +5500,18 @@
             'v-list-group--prepend': list == null ? void 0 : list.hasPrepend.value
           }]
         }, {
-          default: () => [slots.activator && vue.createVNode(VListGroupActivator, null, {
-            default: () => [slots.activator({
-              props: activatorProps.value
+          default: () => [slots.activator && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VListItemIcon: {
+                color: activatorProps.value.color
+              }
+            }
+          }, {
+            default: () => [vue.createVNode(VListGroupActivator, null, {
+              default: () => [slots.activator({
+                props: activatorProps.value,
+                isOpen
+              })]
             })]
           }), vue.createVNode(VExpandTransition, null, {
             default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -5320,30 +5526,42 @@
 
   const VListItemAvatar = defineComponent({
     name: 'VListItemAvatar',
-    props: {
-      left: Boolean,
-      right: Boolean,
-      ...makeTagProps()
-    },
+    props: makeVAvatarProps(),
 
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      return () => {
-        return vue.createVNode(props.tag, {
-          "class": ['v-list-item-avatar', {
-            'v-list-item-avatar--start': props.left,
-            'v-list-item-avatar--end': props.right
-          }]
-        }, slots);
-      };
+      return () => vue.createVNode(VAvatar, vue.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 () => vue.createVNode(VIcon, vue.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');
@@ -5360,12 +5578,14 @@
       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(),
@@ -5393,6 +5613,8 @@
       const {
         select,
         isSelected,
+        isIndeterminate,
+        isGroupActivator,
         root,
         parent
       } = useNestedItem(id, false);
@@ -5402,13 +5624,12 @@
 
         return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value;
       });
+      const roundedProps = vue.computed(() => props.rounded || props.nav);
       const variantProps = vue.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
         };
       });
@@ -5450,50 +5671,53 @@
       } = useElevation(props);
       const {
         roundedClasses
-      } = useRounded(props);
+      } = useRounded(roundedProps);
+      const lineClasses = vue.computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
       const slotProps = vue.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 vue.withDirectives(vue.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) : vue.createVNode(VListItemAvatar, {
-            "left": true
-          }, {
-            default: () => [vue.createVNode(VAvatar, {
-              "density": props.density,
-              "icon": props.prependIcon,
-              "image": props.prependAvatar
-            }, null)]
-          })), hasHeader && vue.createVNode(VListItemHeader, null, {
+          default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && vue.createVNode(vue.Fragment, null, [props.prependAvatar && vue.createVNode(VListItemAvatar, {
+            "image": props.prependAvatar,
+            "start": true
+          }, null), props.prependIcon && vue.createVNode(VListItemIcon, {
+            "icon": props.prependIcon,
+            "start": true
+          }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)]), hasHeader && vue.createVNode(VListItemHeader, null, {
             default: () => [hasTitle && vue.createVNode(VListItemTitle, null, {
               default: () => [slots.title ? slots.title({
                 title: props.title
@@ -5503,15 +5727,13 @@
                 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) : vue.createVNode(VListItemAvatar, {
-            "right": true
-          }, {
-            default: () => [vue.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 && vue.createVNode(vue.Fragment, null, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendAvatar && vue.createVNode(VListItemAvatar, {
+            "image": props.appendAvatar,
+            "end": true
+          }, null), props.appendIcon && vue.createVNode(VListItemIcon, {
+            "icon": props.appendIcon,
+            "end": true
+          }, null)])]
         }), [[vue.resolveDirective("ripple"), isClickable]]);
       });
     }
@@ -5589,7 +5811,7 @@
               } = _ref3;
               return slots.header ? slots.header({ ...itemProps,
                 ...activatorProps
-              }) : vue.createVNode(VListItem, vue.mergeProps(itemProps, activatorProps), null);
+              }) : vue.createVNode(VListItem, vue.mergeProps(itemProps, activatorProps), slots);
             },
             default: () => vue.createVNode(VListChildren, {
               "items": children
@@ -5633,17 +5855,19 @@
   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(),
@@ -5651,7 +5875,10 @@
       ...makeElevationProps(),
       ...makeRoundedProps(),
       ...makeTagProps(),
-      ...makeThemeProps()
+      ...makeThemeProps(),
+      ...makeVariantProps({
+        variant: 'text'
+      })
     },
     emits: {
       'update:selected': val => true,
@@ -5671,7 +5898,7 @@
       const {
         backgroundColorClasses,
         backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
+      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
       const {
         borderClasses
       } = useBorder(props);
@@ -5691,25 +5918,37 @@
         open,
         select
       } = useNested(props);
+      const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+      const activeColor = vue.toRef(props, 'activeColor');
+      const color = vue.toRef(props, 'color');
       createList();
+      provideDefaults({
+        VListGroup: {
+          activeColor,
+          color
+        },
+        VListItem: {
+          activeClass: vue.toRef(props, 'activeClass'),
+          activeColor,
+          color,
+          density: vue.toRef(props, 'density'),
+          disabled: vue.toRef(props, 'disabled'),
+          lines: vue.toRef(props, 'lines'),
+          nav: vue.toRef(props, 'nav'),
+          variant: vue.toRef(props, 'variant')
+        }
+      });
       useRender(() => {
         return vue.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: () => [vue.createVNode(VListChildren, {
             "items": items.value
-          }, {
-            default: slots.default,
-            item: slots.item,
-            title: slots.title,
-            subtitle: slots.subtitle,
-            header: slots.header
-          })]
+          }, slots)]
         });
       });
       return {
@@ -5722,11 +5961,35 @@
 
   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 vue.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()
     },
 
@@ -5737,8 +6000,8 @@
       return () => {
         return vue.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);
       };
@@ -5781,6 +6044,8 @@
     };
   }
 
+  const VMenuSymbol = Symbol.for('vuetify:v-menu');
+
   // Utilities
 
   const makeActivatorProps = propsFactory({
@@ -5798,9 +6063,14 @@
       type: Boolean,
       default: undefined
     },
+    closeOnContentClick: Boolean,
     ...makeDelayProps()
   });
-  function useActivator(props, isActive) {
+  function useActivator(props, _ref) {
+    let {
+      isActive,
+      isTop
+    } = _ref;
     const activatorEl = vue.ref();
     let isHovered = false;
     let isFocused = false;
@@ -5810,7 +6080,7 @@
       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;
       }
     });
@@ -5861,6 +6131,37 @@
 
       return events;
     });
+    const contentEvents = vue.computed(() => {
+      const events = {};
+
+      if (props.openOnHover) {
+        events.mouseenter = () => {
+          isHovered = true;
+          runOpenDelay();
+        };
+
+        events.mouseleave = () => {
+          isHovered = false;
+          runCloseDelay();
+        };
+      }
+
+      if (props.closeOnContentClick) {
+        const menu = vue.inject(VMenuSymbol, null);
+
+        events.click = () => {
+          isActive.value = false;
+          menu == null ? void 0 : menu.closeParents();
+        };
+      }
+
+      return events;
+    });
+    vue.watch(isTop, val => {
+      if (val && props.openOnHover && !isHovered) {
+        isActive.value = false;
+      }
+    });
     const activatorRef = vue.ref();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
@@ -5869,14 +6170,14 @@
         activatorEl.value = isComponentInstance(activator) ? activator.$el : activator;
       });
     });
+    const vm = getCurrentInstance('useActivator');
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
         scope = vue.effectScope();
         scope.run(() => {
-          _useActivator(props, {
+          _useActivator(props, vm, {
             activatorEl,
-            activatorRef,
             activatorEvents
           });
         });
@@ -5890,15 +6191,16 @@
     return {
       activatorEl,
       activatorRef,
-      activatorEvents
+      activatorEvents,
+      contentEvents
     };
   }
 
-  function _useActivator(props, _ref) {
+  function _useActivator(props, vm, _ref2) {
     let {
       activatorEl,
       activatorEvents
-    } = _ref;
+    } = _ref2;
     vue.watch(() => props.activator, (val, oldVal) => {
       if (oldVal && val !== oldVal) {
         const activator = getActivator(oldVal);
@@ -5924,8 +6226,8 @@
       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 => {
@@ -5943,8 +6245,8 @@
       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 => {
@@ -5952,8 +6254,6 @@
       });
     }
 
-    const vm = getCurrentInstance('useActivator');
-
     function getActivator() {
       var _activator;
 
@@ -6190,6 +6490,8 @@
 
 
     function updatePosition() {
+      var _props$maxWidth;
+
       observe = false;
       requestAnimationFrame(() => {
         requestAnimationFrame(() => observe = true);
@@ -6230,13 +6532,15 @@
           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;
@@ -6308,6 +6612,7 @@
   // Utilities
 
   const scrollStrategies = {
+    none: null,
     close: closeScrollStrategy,
     block: blockScrollStrategy,
     reposition: repositionScrollStrategy
@@ -6364,13 +6669,21 @@
     }
 
     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');
     });
     vue.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) {
@@ -6500,39 +6813,14 @@
     }, {
       immediate: true
     });
-    const isTop = vue.computed(() => {
-      return vue.toRaw(stack.value[stack.value.length - 1]) === vm;
-    });
-    return {
-      isTop
-    };
-  }
-
-  // Utilities
+    const isTop = vue.ref(true);
+    vue.watchEffect(() => {
+      const _isTop = vue.toRaw(stack.value[stack.value.length - 1]) === vm;
 
-  const VuetifyOverlayKey = Symbol.for('vuetify:overlay');
-  const ROOT_ZINDEX = 2000;
-  function useOverlay(isActive) {
-    const {
-      zIndex,
-      overlays
-    } = vue.inject(VuetifyOverlayKey, {
-      zIndex: vue.ref(ROOT_ZINDEX),
-      overlays: vue.ref([])
+      setTimeout(() => isTop.value = _isTop);
     });
-    const id = getUid();
-    vue.watch(isActive, value => {
-      if (value) {
-        overlays.value.push(id);
-      } else {
-        overlays.value = overlays.value.filter(x => x !== id);
-      }
-    }, {
-      immediate: true
-    });
-    const overlayZIndex = vue.computed(() => zIndex.value + overlays.value.indexOf(id) + 1);
     return {
-      overlayZIndex
+      isTop: vue.readonly(isTop)
     };
   }
 
@@ -6706,17 +6994,21 @@
       const scrimColor = useBackgroundColor(vue.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 = vue.ref();
       const contentEl = vue.ref();
       const {
@@ -6797,9 +7089,6 @@
         });
       }
 
-      const {
-        overlayZIndex
-      } = useOverlay(isActive);
       useRender(() => {
         var _slots$activator, _slots$default;
 
@@ -6819,8 +7108,7 @@
               'v-overlay--contained': props.contained
             }, themeClasses.value, rtlClasses.value],
             "style": {
-              top: convertToUnit(top.value),
-              zIndex: overlayZIndex.value
+              top: convertToUnit(top.value)
             },
             "ref": root
           }, attrs), [vue.createVNode(Scrim, {
@@ -6836,11 +7124,11 @@
               emit('afterLeave');
             }
           }, {
-            default: () => [vue.withDirectives(vue.createVNode("div", {
+            default: () => [vue.withDirectives(vue.createVNode("div", vue.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, {
+            }, vue.toHandlers(contentEvents.value)), [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, {
               isActive
             })]), [[vue.vShow, isActive.value], [vue.resolveDirective("click-outside"), {
               handler: onClickOutside,
@@ -6853,7 +7141,9 @@
       return {
         animateClick,
         contentEl,
-        activatorEl
+        activatorEl,
+        isTop,
+        updatePosition
       };
     }
 
@@ -6864,15 +7154,7 @@
     inheritAttrs: false,
     props: {
       // TODO
-      // closeOnClick: {
-      //   type: Boolean,
-      //   default: true,
-      // },
-      // closeOnContentClick: {
-      //   type: Boolean,
-      //   default: true,
-      // },
-      disableKeys: Boolean,
+      // disableKeys: Boolean,
       modelValue: Boolean,
       id: String,
       ...makeTransitionProps({
@@ -6893,26 +7175,62 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const uid = getUid();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
-      return () => {
-        return vue.createVNode(VOverlay, vue.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 = vue.ref();
+      const parent = vue.inject(VMenuSymbol, null);
+      let openChildren = 0;
+      vue.provide(VMenuSymbol, {
+        register() {
+          ++openChildren;
+        },
+
+        unregister() {
+          --openChildren;
+        },
+
+        closeParents() {
+          setTimeout(() => {
+            if (!openChildren) {
+              isActive.value = false;
+              parent == null ? void 0 : parent.closeParents();
+            }
+          }, 40);
+        }
+
+      });
+      vue.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(() => vue.createVNode(VOverlay, vue.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);
     }
 
   });
@@ -6986,7 +7304,6 @@
       const results = [];
       let valid = true;
       errorMessages.value = [];
-      model.value = null;
       isValidating.value = true;
 
       for (const item of items.value) {
@@ -7004,7 +7321,6 @@
       }
 
       errorMessages.value = results;
-      model.value = valid;
       isValidating.value = false;
       return {
         valid,
@@ -7023,8 +7339,21 @@
       model.value = null;
     }
 
+    vue.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
+    });
     vue.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}"`);
         }
@@ -7033,7 +7362,9 @@
           id,
           validate,
           reset,
-          resetValidation
+          resetValidation,
+          isValid: isValid // TODO: Better way to type this unwrapping?
+
         });
       },
       unregister: id => {
@@ -7088,7 +7419,7 @@
     const form = useForm();
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.ref(true);
-    const isDirty = vue.computed(() => wrapInArray(model.value || []).length > 0);
+    const isDirty = vue.computed(() => wrapInArray(model.value === '' ? null : model.value).length > 0);
     const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
     const errorMessages = vue.computed(() => {
@@ -7113,11 +7444,14 @@
       return (_props$name = props.name) != null ? _props$name : getUid();
     });
     vue.onBeforeMount(() => {
-      form == null ? void 0 : form.register(uid.value, validate, reset, resetValidation);
+      form == null ? void 0 : form.register(uid.value, validate, reset, resetValidation, isValid);
     });
     vue.onBeforeUnmount(() => {
       form == null ? void 0 : form.unregister(uid.value);
     });
+    vue.watch(model, () => {
+      if (model.value != null) validate();
+    });
 
     function reset() {
       resetValidation();
@@ -7194,13 +7528,12 @@
     props: { ...makeVInputProps()
     },
     emits: {
-      'click:prepend': e => true,
-      'click:append': e => true,
       'update:modelValue': val => true
     },
 
     setup(props, _ref) {
       let {
+        attrs,
         slots,
         emit
       } = _ref;
@@ -7246,14 +7579,14 @@
         }, [hasPrepend && vue.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 && vue.createVNode(VIcon, {
-          "onClick": e => emit('click:prepend', e),
+          "onClick": attrs['onClick:prepend'],
           "icon": props.prependIcon
         }, null)]), slots.default && vue.createVNode("div", {
           "class": "v-input__control"
         }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && vue.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 && vue.createVNode(VIcon, {
-          "onClick": e => emit('click:append', e),
+          "onClick": attrs['onClick:append'],
           "icon": props.appendIcon
         }, null)]), hasDetails && vue.createVNode("div", {
           "class": "v-input__details"
@@ -7603,8 +7936,6 @@
     },
     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
@@ -7719,6 +8050,7 @@
             '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],
@@ -7734,7 +8066,7 @@
         }), hasPrepend && vue.createVNode("div", {
           "class": "v-field__prepend-inner"
         }, [props.prependInnerIcon && vue.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)]), vue.createVNode("div", {
           "class": "v-field__field"
@@ -7766,7 +8098,7 @@
         }), hasAppend && vue.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 && vue.createVNode(VIcon, {
-          "onClick": e => emit('click:append-inner', e),
+          "onClick": attrs['onClick:appendInner'],
           "icon": props.appendInnerIcon
         }, null)]), vue.createVNode("div", {
           "class": ['v-field__outline', textColorClasses.value]
@@ -7866,13 +8198,9 @@
       ...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
     },
 
@@ -7947,13 +8275,12 @@
           "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,
@@ -7972,8 +8299,8 @@
               },
               "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,
@@ -8001,6 +8328,7 @@
                   "autofocus": props.autofocus,
                   "readonly": isReadonly.value,
                   "disabled": isDisabled.value,
+                  "name": props.name,
                   "placeholder": props.placeholder,
                   "size": 1,
                   "type": props.type,
@@ -8028,6 +8356,60 @@
 
   });
 
+  // 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 = vue.computed(() => transformItems(props, props.items));
+    return {
+      items
+    };
+  }
+
   const LocaleAdapterSymbol = Symbol.for('vuetify:locale-adapter');
   const VuetifyLocaleSymbol = Symbol.for('vuetify:locale');
   function provideLocale(props) {
@@ -8162,24 +8544,12 @@
     };
   }
 
-  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'
@@ -8193,7 +8563,8 @@
       type: String,
       default: '$vuetify.noDataText'
     },
-    openOnClear: Boolean
+    openOnClear: Boolean,
+    ...makeItemsProps()
   }, 'select');
   const VSelect = genericComponent()({
     name: 'VSelect',
@@ -8206,36 +8577,21 @@
       'update:modelValue': val => true
     },
 
-    setup(props, _ref2) {
+    setup(props, _ref) {
       let {
         slots
-      } = _ref2;
+      } = _ref;
       const {
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
       const activator = vue.ref();
       const menu = vue.ref(false);
-      const items = vue.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 = vue.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 = vue.computed(() => items.value.filter(item => model.value.includes(item.value)));
       const selected = vue.computed(() => selections.value.map(selection => selection.value));
 
       function onClear(e) {
@@ -8263,12 +8619,14 @@
 
       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];
@@ -8297,62 +8655,64 @@
           "modelValue": model.value.join(', '),
           "onKeydown": onKeydown
         }, { ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [activator.value && vue.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: () => [vue.createVNode(VList, {
-              "selected": selected.value,
-              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+          default: () => {
+            var _slots$noData, _slots$noData2;
+
+            return vue.createVNode(vue.Fragment, null, [activator.value && vue.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 && vue.createVNode(VListItem, {
-                "title": t(props.noDataText)
-              }, null), items.value.map(item => vue.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: () => [vue.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 : vue.createVNode(VListItem, {
+                  "title": t(props.noDataText)
+                }, null)), items.value.map(item => vue.createVNode(VListItem, vue.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 vue.createVNode("div", {
-              "class": "v-select__selection"
-            }, [hasChips && vue.createVNode(VDefaultsProvider, {
-              "defaults": {
-                VChip: {
-                  closable: props.closableChips,
-                  size: 'small',
-                  text: selection.title
+              const slotProps = {
+                'onClick:close': onChipClose,
+                modelValue: true
+              };
+              return vue.createVNode("div", {
+                "class": "v-select__selection"
+              }, [hasChips && vue.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
+                }) : vue.createVNode(VChip, slotProps, null)]
+              }), !hasChips && (slots.selection ? slots.selection({
                 selection
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }), !hasChips && (slots.selection ? slots.selection({
-              selection
-            }) : vue.createVNode("span", {
-              "class": "v-select__selection-text"
-            }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
-              "class": "v-select__selection-comma"
-            }, [vue.createTextVNode(",")])]))]);
-          })])
+              }) : vue.createVNode("span", {
+                "class": "v-select__selection-text"
+              }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+                "class": "v-select__selection-comma"
+              }, [vue.createTextVNode(",")])]))]);
+            })]);
+          }
         });
       });
       return useForwardRef({}, vTextFieldRef);
@@ -8485,7 +8845,9 @@
       const isFocused = vue.ref(false);
       const isPristine = vue.ref(true);
       const menu = vue.ref(false);
-      const items = vue.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 {
@@ -8496,7 +8858,7 @@
         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) {
@@ -8540,6 +8902,10 @@
         }
       }
 
+      function onInput(e) {
+        search.value = e.target.value;
+      }
+
       function onAfterLeave() {
         if (isFocused.value) isPristine.value = true;
       }
@@ -8548,12 +8914,14 @@
 
       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];
@@ -8591,7 +8959,7 @@
         return vue.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,
@@ -8606,74 +8974,78 @@
           "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }, { ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [activator.value && vue.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: () => [vue.createVNode(VList, {
-              "selected": selected.value,
-              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+          default: () => {
+            var _slots$noData, _slots$noData2;
+
+            return vue.createVNode(vue.Fragment, null, [activator.value && vue.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 && vue.createVNode(VListItem, {
-                "title": t(props.noDataText)
-              }, null), filteredItems.value.map(_ref2 => {
-                let {
-                  item,
-                  matches
-                } = _ref2;
-                return vue.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: () => [vue.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 : vue.createVNode(VListItem, {
+                  "title": t(props.noDataText)
+                }, null)), filteredItems.value.map(_ref2 => {
+                  let {
+                    item,
+                    matches
+                  } = _ref2;
+                  return vue.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 vue.createVNode("div", {
-              "class": "v-autocomplete__selection"
-            }, [hasChips && vue.createVNode(VDefaultsProvider, {
-              "defaults": {
-                VChip: {
-                  closable: props.closableChips,
-                  size: 'small',
-                  text: selection.title
+              const slotProps = {
+                'onClick:close': onChipClose,
+                modelValue: true
+              };
+              return vue.createVNode("div", {
+                "class": "v-autocomplete__selection"
+              }, [hasChips && vue.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
+                }) : vue.createVNode(VChip, slotProps, null)]
+              }), !hasChips && (slots.selection ? slots.selection({
                 selection
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }), !hasChips && (slots.selection ? slots.selection({
-              selection
-            }) : vue.createVNode("span", {
-              "class": "v-autocomplete__selection-text"
-            }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
-              "class": "v-autocomplete__selection-comma"
-            }, [vue.createTextVNode(",")])]))]);
-          })])
+              }) : vue.createVNode("span", {
+                "class": "v-autocomplete__selection-text"
+              }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+                "class": "v-autocomplete__selection-comma"
+              }, [vue.createTextVNode(",")])]))]);
+            })]);
+          }
         });
       });
       return useForwardRef({
@@ -8808,7 +9180,65 @@
 
   });
 
-  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 vue.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 () => vue.createVNode(VAvatar, vue.mergeProps({
+        "class": "v-banner-avatar"
+      }, props), slots);
+    }
+
+  });
+
+  const VBannerIcon = defineComponent({
+    name: 'VBannerIcon',
+    props: makeVAvatarProps(),
+
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      return () => vue.createVNode(VAvatar, vue.mergeProps({
+        "class": "v-banner-icon"
+      }, props), slots);
+    }
+
+  });
 
   const VBannerText = createSimpleFunctional('v-banner-text');
 
@@ -8948,6 +9378,7 @@
       color: String,
       icon: String,
       lines: String,
+      stacked: Boolean,
       sticky: Boolean,
       text: String,
       ...makeBorderProps(),
@@ -8964,21 +9395,18 @@
       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);
@@ -8989,50 +9417,46 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const color = vue.toRef(props, 'color');
+      const density = vue.toRef(props, 'density');
+      provideDefaults({
+        VBannerActions: {
+          color,
+          density
+        },
+        VBannerAvatar: {
+          density,
+          image: vue.toRef(props, 'avatar')
+        },
+        VBannerIcon: {
+          color,
+          density,
+          icon: vue.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 vue.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 && vue.createVNode("div", {
-            "class": "v-banner__content"
-          }, [hasAvatar && vue.createVNode(VDefaultsProvider, {
-            "defaults": {
-              VAvatar: {
-                color: props.color,
-                density: props.density,
-                icon: props.icon,
-                image: props.avatar
-              }
-            }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-banner__avatar"
-            }, [slots.avatar ? slots.avatar() : vue.createVNode(VAvatar, null, null)])]
-          }), hasText && vue.createVNode(VBannerText, null, {
+          default: () => [hasPrepend && vue.createVNode(vue.Fragment, null, [slots.prepend ? vue.createVNode("div", {
+            "class": "v-banner__prepend"
+          }, [slots.prepend()]) : props.avatar ? vue.createVNode(VBannerAvatar, null, null) : props.icon ? vue.createVNode(VBannerIcon, null, null) : undefined]), hasText && vue.createVNode(VBannerText, null, {
             default: () => [slots.text ? slots.text() : props.text]
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && vue.createVNode(VDefaultsProvider, {
-            "defaults": {
-              VBtn: {
-                color: props.color,
-                density: props.density,
-                variant: 'text'
-              }
-            }
-          }, {
-            default: () => [vue.createVNode(VBannerActions, null, {
-              default: slots.actions
-            })]
+          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && vue.createVNode(VBannerActions, null, {
+            default: () => [slots.actions()]
           })]
         });
       });
@@ -9162,30 +9586,31 @@
         slots,
         attrs
       } = _ref;
-      const {
-        isExactActive,
-        isLink,
-        navigate
-      } = useLink(props, attrs);
-      const isActive = vue.computed(() => props.active || (isExactActive == null ? void 0 : isExactActive.value));
+      const link = useLink(props, attrs);
+      const isActive = vue.computed(() => {
+        var _link$isExactActive;
+
+        return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+      });
       const color = vue.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 vue.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;
@@ -9205,6 +9630,7 @@
     name: 'VBreadcrumbs',
     props: {
       activeClass: String,
+      activeColor: String,
       bgColor: String,
       color: String,
       disabled: Boolean,
@@ -9241,6 +9667,7 @@
       provideDefaults({
         VBreadcrumbsItem: {
           activeClass: vue.toRef(props, 'activeClass'),
+          activeColor: vue.toRef(props, 'activeColor'),
           color: vue.toRef(props, 'color'),
           disabled: vue.toRef(props, 'disabled')
         }
@@ -9286,7 +9713,7 @@
 
   });
 
-  const VCardActions = vue.defineComponent({
+  const VCardActions = defineComponent({
     name: 'VCardActions',
 
     setup(_, _ref) {
@@ -9312,6 +9739,8 @@
 
   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');
@@ -9391,7 +9820,7 @@
       } = 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);
@@ -9445,7 +9874,7 @@
                 default: () => [slots.title ? slots.title() : props.title]
               }), hasSubtitle && vue.createVNode(VCardSubtitle, null, {
                 default: () => [slots.subtitle ? slots.subtitle() : props.subtitle]
-              })]
+              }), (_slots$headerText = slots.headerText) == null ? void 0 : _slots$headerText.call(slots)]
             }), hasAppend && vue.createVNode(VDefaultsProvider, {
               "defaults": {
                 VAvatar: {
@@ -9461,6 +9890,8 @@
             })]
           }), hasText && vue.createVNode(VCardText, null, {
             default: () => [slots.text ? slots.text() : props.text]
+          }), slots.content && vue.createVNode(VCardContent, null, {
+            default: slots.content
           }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && vue.createVNode(VCardActions, null, {
             default: slots.actions
           })]
@@ -9702,13 +10133,6 @@
         canMoveForward.value && group.next();
       }
 
-      provideDefaults({
-        VBtn: {
-          variant: 'text'
-        }
-      }, {
-        scoped: true
-      });
       const arrows = vue.computed(() => {
         const arrows = [];
         const prevProps = {
@@ -10010,7 +10434,7 @@
           })]), props.progress && vue.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,
@@ -10043,7 +10467,7 @@
   });
 
   const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
-  const VSelectionControlGroup = vue.defineComponent({
+  const VSelectionControlGroup = defineComponent({
     name: 'VSelectionControlGroup',
     props: {
       disabled: Boolean,
@@ -10144,6 +10568,7 @@
       },
 
       set(val) {
+        if (props.readonly) return;
         const currentValue = val ? trueValue.value : falseValue.value;
         let newVal = currentValue;
 
@@ -10258,7 +10683,7 @@
           "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,
@@ -10351,7 +10776,7 @@
               "aria-checked": indeterminate.value ? 'mixed' : undefined,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
-            }, controlAttrs), null);
+            }, controlAttrs), slots);
           }
         });
       });
@@ -10917,7 +11342,7 @@
         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 vue.createVNode("div", {
             "key": tick.value,
             "class": ['v-slider-track__tick', {
@@ -12120,11 +12545,13 @@
       })
     },
     emits: {
-      'update:modelValue': val => true
+      'update:modelValue': val => true,
+      'update:searchInput': val => true
     },
 
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const {
@@ -12141,7 +12568,9 @@
 
         return (_vTextFieldRef$value = vTextFieldRef.value) == null ? void 0 : _vTextFieldRef$value.color;
       });
-      const items = vue.computed(() => props.items.map(genItem));
+      const {
+        items
+      } = useItems(props);
       const {
         textColorClasses,
         textColorStyles
@@ -12151,7 +12580,7 @@
       const _search = vue.ref('');
 
       const search = vue.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;
 
@@ -12180,6 +12609,9 @@
           isPristine.value = !val;
         }
       });
+      vue.watch(_search, value => {
+        emit('update:searchInput', value);
+      });
       const {
         filteredItems
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
@@ -12188,7 +12620,7 @@
         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) {
@@ -12282,18 +12714,24 @@
         }
       }
 
+      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 = '';
@@ -12319,7 +12757,7 @@
         } else {
           menu.value = false;
           if (!props.multiple || !search.value) return;
-          model.value.push(search.value);
+          model.value = [...model.value, search.value];
           search.value = '';
         }
       });
@@ -12328,7 +12766,7 @@
         return vue.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,
@@ -12344,75 +12782,79 @@
           "onBlur": () => isFocused.value = false,
           "onKeydown": onKeydown
         }, { ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [activator.value && vue.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: () => [vue.createVNode(VList, {
-              "selected": selected.value,
-              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+          default: () => {
+            var _slots$noData, _slots$noData2;
+
+            return vue.createVNode(vue.Fragment, null, [activator.value && vue.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 && vue.createVNode(VListItem, {
-                "title": t(props.noDataText)
-              }, null), filteredItems.value.map(_ref2 => {
-                let {
-                  item,
-                  matches
-                } = _ref2;
-                return vue.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: () => [vue.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 : vue.createVNode(VListItem, {
+                  "title": t(props.noDataText)
+                }, null)), filteredItems.value.map(_ref2 => {
+                  let {
+                    item,
+                    matches
+                  } = _ref2;
+                  return vue.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 vue.createVNode("div", {
-              "class": ['v-combobox__selection', selection.selected && ['v-combobox__selection--selected', textColorClasses.value]],
-              "style": selection.selected ? textColorStyles.value : {}
-            }, [hasChips && vue.createVNode(VDefaultsProvider, {
-              "defaults": {
-                VChip: {
-                  closable: props.closableChips,
-                  size: 'small',
-                  text: selection.title
+              const slotProps = {
+                'onClick:close': onChipClose,
+                modelValue: true
+              };
+              return vue.createVNode("div", {
+                "class": ['v-combobox__selection', selection.selected && ['v-combobox__selection--selected', textColorClasses.value]],
+                "style": selection.selected ? textColorStyles.value : {}
+              }, [hasChips && vue.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
+                }) : vue.createVNode(VChip, slotProps, null)]
+              }), !hasChips && (slots.selection ? slots.selection({
                 selection
-              }) : vue.createVNode(VChip, slotProps, null)]
-            }), !hasChips && (slots.selection ? slots.selection({
-              selection
-            }) : vue.createVNode("span", {
-              "class": "v-combobox__selection-text"
-            }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
-              "class": "v-combobox__selection-comma"
-            }, [vue.createTextVNode(",")])]))]);
-          })])
+              }) : vue.createVNode("span", {
+                "class": "v-combobox__selection-text"
+              }, [selection.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+                "class": "v-combobox__selection-comma"
+              }, [vue.createTextVNode(",")])]))]);
+            })]);
+          }
         });
       });
       return useForwardRef({
@@ -12468,19 +12910,15 @@
       const overlay = vue.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];
@@ -12524,7 +12962,8 @@
           "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,
@@ -12555,6 +12994,7 @@
         default: 'default',
         validator: v => allowedVariants.includes(v)
       },
+      readonly: Boolean,
       ...makeGroupProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -12575,6 +13015,9 @@
       provideDefaults({
         VExpansionPanel: {
           color: vue.toRef(props, 'color')
+        },
+        VExpansionPanelTitle: {
+          readonly: vue.toRef(props, 'readonly')
         }
       });
       useRender(() => vue.createVNode(props.tag, {
@@ -12599,7 +13042,8 @@
     ripple: {
       type: [Boolean, Object],
       default: false
-    }
+    },
+    readonly: Boolean
   });
   const VExpansionPanelTitle = defineComponent({
     name: 'VExpansionPanelTitle',
@@ -12623,7 +13067,8 @@
         collapseIcon: props.collapseIcon,
         disabled: expansionPanel.disabled.value,
         expanded: expansionPanel.isSelected.value,
-        expandIcon: props.expandIcon
+        expandIcon: props.expandIcon,
+        readonly: props.readonly
       }));
       useRender(() => {
         var _slots$default;
@@ -12637,7 +13082,7 @@
           "tabindex": expansionPanel.disabled.value ? -1 : undefined,
           "disabled": expansionPanel.disabled.value,
           "aria-expanded": expansionPanel.isSelected.value,
-          "onClick": expansionPanel.toggle
+          "onClick": !props.readonly ? expansionPanel.toggle : undefined
         }, [vue.createVNode("div", {
           "class": "v-expansion-panel-title__overlay"
         }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value), !props.hideActions && vue.createVNode("div", {
@@ -12714,13 +13159,17 @@
         roundedClasses
       } = useRounded(props);
       const isDisabled = vue.computed(() => (groupItem == null ? void 0 : groupItem.disabled.value) || props.disabled);
+      const selectedIndices = vue.computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
+        if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
+        return arr;
+      }, []));
       const isBeforeSelected = vue.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 = vue.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);
       });
       vue.provide(VExpansionPanelSymbol, groupItem);
       useRender(() => {
@@ -12888,7 +13337,7 @@
       }
 
       useRender(() => {
-        const hasCounter = !!(slots.counter || props.counter || counterValue.value);
+        const hasCounter = !!(slots.counter || props.counter);
         const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
         const [{
           modelValue: _,
@@ -12966,6 +13415,7 @@
             });
           },
           details: hasCounter ? () => vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, null), vue.createVNode(VCounter, {
+            "active": !!model.value.length,
             "value": counterValue.value
           }, slots.counter)]) : undefined
         });
@@ -12978,11 +13428,15 @@
   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'
@@ -13004,22 +13458,35 @@
       const {
         borderClasses
       } = useBorder(props);
-      const {
-        dimensionStyles
-      } = useDimension(props);
       const {
         elevationClasses
       } = useElevation(props);
       const {
-        positionClasses,
-        positionStyles
-      } = usePosition(props);
+        roundedClasses
+      } = useRounded(props);
+      const autoHeight = vue.ref(32);
+      const {
+        resizeRef
+      } = useResizeObserver(entries => {
+        if (!entries.length) return;
+        autoHeight.value = entries[0].target.clientHeight;
+      });
+      const height = vue.computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
       const {
-        roundedClasses
-      } = useRounded(props);
+        layoutItemStyles
+      } = useLayoutItem({
+        id: props.name,
+        priority: vue.computed(() => parseInt(props.priority, 10)),
+        position: vue.computed(() => 'bottom'),
+        layoutSize: height,
+        elementSize: vue.computed(() => props.height === 'auto' ? undefined : height.value),
+        active: vue.computed(() => props.app),
+        absolute: vue.toRef(props, 'absolute')
+      });
       return () => vue.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);
     }
 
@@ -13047,17 +13514,29 @@
         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(() => {
@@ -13071,7 +13550,7 @@
           "onSubmit": onSubmit
         }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, form)]);
       });
-      return form;
+      return useForwardRef(form, formRef);
     }
 
   });
@@ -14030,7 +14509,7 @@
         roundedClasses
       } = useRounded(props);
       const router = useRouter();
-      const isActive = useProxiedModel(props, 'modelValue');
+      const isActive = useProxiedModel(props, 'modelValue', null, v => !!v);
       const isHovering = vue.ref(false);
       const width = vue.computed(() => {
         return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
@@ -14319,27 +14798,25 @@
       });
       const range = vue.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];
         }
@@ -14682,7 +15159,7 @@
 
   });
 
-  const VRadio = vue.defineComponent({
+  const VRadio = defineComponent({
     name: 'VRadio',
     props: {
       falseIcon: {
@@ -14710,7 +15187,7 @@
 
   });
 
-  const VRadioGroup = vue.defineComponent({
+  const VRadioGroup = defineComponent({
     name: 'VRadioGroup',
     inheritAttrs: false,
     props: {
@@ -14779,7 +15256,7 @@
 
   });
 
-  const VRangeSlider = vue.defineComponent({
+  const VRangeSlider = defineComponent({
     name: 'VRangeSlider',
     props: { ...makeFocusProps(),
       ...makeVInputProps(),
@@ -15166,6 +15643,12 @@
         }, null)]);
       }
 
+      function createLabel(labelProps) {
+        if (slots['item-label']) return slots['item-label'](labelProps);
+        if (labelProps.label) return vue.createVNode("span", null, [labelProps.label]);
+        return vue.createVNode("span", null, [vue.createTextVNode("\xA0")]);
+      }
+
       return () => {
         var _props$itemLabels;
 
@@ -15185,11 +15668,11 @@
 
             return vue.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] ? vue.createVNode("span", null, [props.itemLabels[i]]) : vue.createVNode("span", null, [vue.createTextVNode("\xA0")]), vue.createVNode("div", {
+            }) : undefined, vue.createVNode("div", {
               "class": ['v-rating__item', {
                 'v-rating__item--focused': Math.ceil(focusIndex.value) === value
               }]
@@ -15202,7 +15685,11 @@
             }, null)]) : vue.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]);
           })]
         });
       };
@@ -15268,10 +15755,6 @@
   const VSlideGroup = defineComponent({
     name: 'VSlideGroup',
     props: {
-      activeClass: {
-        type: String,
-        default: 'v-slide-item--active'
-      },
       centerActive: Boolean,
       direction: {
         type: String,
@@ -15294,7 +15777,9 @@
         validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
       },
       ...makeTagProps(),
-      ...makeGroupProps()
+      ...makeGroupProps({
+        selectedClass: 'v-slide-group-item--active'
+      })
     },
     emits: {
       'update:modelValue': value => true
@@ -15320,21 +15805,31 @@
         resizeRef: containerRef,
         contentRect: containerRect
       } = useResizeObserver();
-      const contentRef = vue.ref();
+      const {
+        resizeRef: contentRef,
+        contentRect
+      } = useResizeObserver();
       vue.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;
       });
-      vue.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 = vue.computed(() => {
+        if (!group.selected.value.length) return -1;
+        return group.items.value.findIndex(item => item.id === group.selected.value[0]);
+      });
+      const lastSelectedIndex = vue.computed(() => {
+        if (!group.selected.value.length) return -1;
+        return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
+      });
+      vue.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({
@@ -15355,6 +15850,20 @@
           });
         }
       });
+      let firstOverflow = true;
+      vue.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 = vue.ref(false);
       let startTouch = 0;
       let startOffset = 0;
@@ -15502,7 +16011,7 @@
           // 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
 
@@ -15601,7 +16110,9 @@
 
         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
         });
       };
     }
@@ -15625,6 +16136,7 @@
       vertical: Boolean,
       modelValue: Boolean,
       ...makePositionProps(),
+      ...makeRoundedProps(),
       ...makeVariantProps(),
       ...makeTransitionProps({
         transition: 'v-snackbar-transition'
@@ -15648,6 +16160,9 @@
         colorStyles,
         variantClasses
       } = useVariant(props);
+      const {
+        roundedClasses
+      } = useRounded(props);
       vue.watch(isActive, startTimeout);
       vue.watch(() => props.timeout, startTimeout);
       vue.onMounted(() => {
@@ -15671,7 +16186,9 @@
       useRender(() => {
         var _slots$default, _slots$actions;
 
-        return vue.createVNode("div", {
+        return vue.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,
@@ -15682,12 +16199,15 @@
             'v-snackbar--top': props.top,
             'v-snackbar--vertical': props.vertical
           }, positionClasses.value],
-          "style": [colorStyles.value, positionStyles.value]
-        }, [vue.createVNode(MaybeTransition, {
+          "style": [colorStyles.value, positionStyles.value],
+          "persistent": true,
+          "noClickAnimation": true,
+          "scrim": false,
+          "scrollStrategy": "none",
           "transition": props.transition
         }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": ['v-snackbar__wrapper', colorClasses.value, variantClasses.value],
+          default: () => [vue.createVNode("div", {
+            "class": ['v-snackbar__wrapper', colorClasses.value, roundedClasses.value, variantClasses.value],
             "onPointerenter": onPointerenter,
             "onPointerleave": startTimeout
           }, [genOverlays(false, 'v-snackbar'), slots.default && vue.createVNode("div", {
@@ -15705,21 +16225,25 @@
             default: () => [vue.createVNode("div", {
               "class": "v-snackbar__actions"
             }, [(_slots$actions = slots.actions) == null ? void 0 : _slots$actions.call(slots)])]
-          })]), [[vue.vShow, isActive.value]])]
-        })]);
+          })])],
+          activator: slots.activator
+        });
       });
     }
 
   });
 
-  const VSwitch = vue.defineComponent({
+  const VSwitch = defineComponent({
     name: 'VSwitch',
     inheritAttrs: false,
     props: {
       indeterminate: Boolean,
       inset: Boolean,
       flat: Boolean,
-      ...makeLoaderProps(),
+      loading: {
+        type: [Boolean, String],
+        default: false
+      },
       ...makeVInputProps(),
       ...makeSelectionControlProps()
     },
@@ -15779,7 +16303,7 @@
               "aria-checked": indeterminate.value ? 'mixed' : undefined,
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
-            }, controlAttrs), {
+            }, controlAttrs), { ...slots,
               default: () => vue.createVNode("div", {
                 "class": "v-switch__track",
                 "onClick": onClick
@@ -15817,10 +16341,10 @@
     name: 'VSystemBar',
     props: {
       color: String,
+      height: [Number, String],
       window: Boolean,
-      ...makeDimensionProps(),
       ...makeElevationProps(),
-      ...makePositionProps(),
+      ...makeLayoutItemProps(),
       ...makeRoundedProps(),
       ...makeTagProps(),
       ...makeThemeProps()
@@ -15837,29 +16361,48 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(vue.toRef(props, 'color'));
-      const {
-        dimensionStyles
-      } = useDimension(props);
       const {
         elevationClasses
       } = useElevation(props);
-      const {
-        positionClasses,
-        positionStyles
-      } = usePosition(props);
       const {
         roundedClasses
       } = useRounded(props);
+      const height = vue.computed(() => {
+        var _props$height;
+
+        return ((_props$height = props.height) != null ? _props$height : props.window) ? 32 : 24;
+      });
+      const {
+        layoutItemStyles
+      } = useLayoutItem({
+        id: props.name,
+        priority: vue.computed(() => parseInt(props.priority, 10)),
+        position: vue.ref('top'),
+        layoutSize: height,
+        elementSize: height,
+        active: vue.computed(() => true),
+        absolute: vue.toRef(props, 'absolute')
+      });
+      provideDefaults({
+        VBtn: {
+          variant: 'text',
+          density: 'compact'
+        }
+      }, {
+        scoped: true
+      });
       return () => vue.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: {
@@ -15893,31 +16436,22 @@
         slots,
         attrs
       } = _ref;
-      const {
-        isSelected,
-        select,
-        selectedClass
-      } = useGroupItem(props, VTabsSymbol);
       const {
         textColorClasses: sliderColorClasses,
         textColorStyles: sliderColorStyles
       } = useTextColor(props, 'sliderColor');
       const isHorizontal = vue.computed(() => props.direction === 'horizontal');
-      provideDefaults({
-        VBtn: {
-          block: vue.toRef(props, 'fixed'),
-          maxWidth: vue.computed(() => props.fixed ? 300 : undefined),
-          color: vue.computed(() => isSelected.value ? props.color : undefined),
-          variant: 'text',
-          rounded: 0
-        }
-      }, {
-        scoped: true
-      });
+      const isSelected = vue.ref(false);
       const rootEl = vue.ref();
       const sliderEl = vue.ref();
-      vue.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');
@@ -15947,17 +16481,25 @@
             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 vue.createVNode(VBtn, vue.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 && vue.createVNode("div", {
             "ref": sliderEl,
             "class": ['v-tab__slider', sliderColorClasses.value],
@@ -15965,9 +16507,7 @@
           }, null)]
         });
       });
-      return {
-        isSelected
-      };
+      return {};
     }
 
   });
@@ -15983,7 +16523,6 @@
     });
   }
 
-  const VTabsSymbol = Symbol.for('vuetify:v-tabs');
   const VTabs = defineComponent({
     name: 'VTabs',
     props: {
@@ -16008,7 +16547,7 @@
       },
       hideSlider: Boolean,
       optional: Boolean,
-      right: Boolean,
+      end: Boolean,
       sliderColor: String,
       modelValue: null,
       ...makeDensityProps(),
@@ -16047,7 +16586,7 @@
           '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,
@@ -16361,7 +16900,96 @@
 
   const VTimelineSymbol = Symbol.for('vuetify:timeline');
 
-  const VTimelineDivider = vue.defineComponent({
+  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);
+      vue.provide(VTimelineSymbol, {
+        density: vue.toRef(props, 'density'),
+        lineColor: vue.toRef(props, 'lineColor')
+      });
+      const sideClass = vue.computed(() => {
+        const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
+        return side && `v-timeline--side-${side}`;
+      });
+      const truncateClasses = vue.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 vue.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,
@@ -16496,77 +17124,6 @@
 
   });
 
-  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);
-      vue.provide(VTimelineSymbol, {
-        density: vue.toRef(props, 'density'),
-        lineColor: vue.toRef(props, 'lineColor')
-      });
-      const sideClass = vue.computed(() => {
-        const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
-        return side && `v-timeline--side-${side}`;
-      });
-      return () => {
-        var _slots$default;
-
-        return vue.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') && vue.createVNode(VTimelineItem, {
-            "hideDot": true
-          }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-        });
-      };
-    }
-
-  });
-
   const VTooltip = genericComponent()({
     name: 'VTooltip',
     inheritAttrs: false,
@@ -16684,6 +17241,8 @@
     VBadge: VBadge,
     VBanner: VBanner,
     VBannerActions: VBannerActions,
+    VBannerAvatar: VBannerAvatar,
+    VBannerIcon: VBannerIcon,
     VBannerText: VBannerText,
     VBottomNavigation: VBottomNavigation,
     VBreadcrumbs: VBreadcrumbs,
@@ -16695,6 +17254,7 @@
     VCard: VCard,
     VCardActions: VCardActions,
     VCardAvatar: VCardAvatar,
+    VCardContent: VCardContent,
     VCardHeader: VCardHeader,
     VCardHeaderText: VCardHeaderText,
     VCardImg: VCardImg,
@@ -16745,8 +17305,10 @@
     VListSubheader: VListSubheader,
     VListImg: VListImg,
     VListItem: VListItem,
+    VListItemAction: VListItemAction,
     VListItemAvatar: VListItemAvatar,
     VListItemHeader: VListItemHeader,
+    VListItemIcon: VListItemIcon,
     VListItemMedia: VListItemMedia,
     VListItemSubtitle: VListItemSubtitle,
     VListItemTitle: VListItemTitle,
@@ -17016,19 +17578,24 @@
 
     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));
@@ -17039,7 +17606,7 @@
         sets: { ...defaultSets,
           mdi
         },
-        aliases
+        aliases: aliases
       }, icons));
       const {
         adapter,
@@ -17089,7 +17656,7 @@
       ...options
     });
   };
-  const version = "3.0.0-beta.0";
+  const version = "3.0.0-beta.2";
 
   exports.components = components;
   exports.createVuetify = createVuetify;