vuetify 3.6.15 → 3.7.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.15
+* Vuetify v3.7.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -466,16 +466,6 @@
     const timeoutId = window.setTimeout(cb, timeout);
     return () => window.clearTimeout(timeoutId);
   }
-  function eagerComputed(fn, options) {
-    const result = vue.shallowRef();
-    vue.watchEffect(() => {
-      result.value = fn();
-    }, {
-      flush: 'sync',
-      ...options
-    });
-    return vue.readonly(result);
-  }
   function isClickInsideElement(event, targetDiv) {
     const mouseX = event.clientX;
     const mouseY = event.clientY;
@@ -502,6 +492,11 @@
     });
     return fn;
   }
+  function checkPrintable(e) {
+    const isPrintableChar = e.key.length === 1;
+    const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
+    return isPrintableChar && noModifier;
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -2087,9 +2082,7 @@
   function useLayout() {
     const layout = vue.inject(VuetifyLayoutKey);
     if (!layout) throw new Error('[Vuetify] Could not find injected layout');
-    const layoutIsReady = vue.nextTick();
     return {
-      layoutIsReady,
       getLayoutItem: layout.getLayoutItem,
       mainRect: layout.mainRect,
       mainStyles: layout.mainStyles
@@ -2106,7 +2099,6 @@
     const isKeptAlive = vue.shallowRef(false);
     vue.onDeactivated(() => isKeptAlive.value = true);
     vue.onActivated(() => isKeptAlive.value = false);
-    const layoutIsReady = vue.nextTick();
     const {
       layoutItemStyles,
       layoutItemScrimStyles
@@ -2119,8 +2111,7 @@
     return {
       layoutItemStyles,
       layoutRect: layout.layoutRect,
-      layoutItemScrimStyles,
-      layoutIsReady
+      layoutItemScrimStyles
     };
   }
   const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -2166,7 +2157,29 @@
       resizeRef,
       contentRect: layoutRect
     } = useResizeObserver();
-    const layers = eagerComputed(() => {
+    const computedOverlaps = vue.computed(() => {
+      const map = new Map();
+      const overlaps = props.overlaps ?? [];
+      for (const overlap of overlaps.filter(item => item.includes(':'))) {
+        const [top, bottom] = overlap.split(':');
+        if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue;
+        const topPosition = positions.get(top);
+        const bottomPosition = positions.get(bottom);
+        const topAmount = layoutSizes.get(top);
+        const bottomAmount = layoutSizes.get(bottom);
+        if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue;
+        map.set(bottom, {
+          position: topPosition.value,
+          amount: parseInt(topAmount.value, 10)
+        });
+        map.set(top, {
+          position: bottomPosition.value,
+          amount: -parseInt(bottomAmount.value, 10)
+        });
+      }
+      return map;
+    });
+    const layers = vue.computed(() => {
       const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b);
       const layout = [];
       for (const p of uniquePriorities) {
@@ -2192,7 +2205,7 @@
         })
       };
     });
-    const items = eagerComputed(() => {
+    const items = vue.computed(() => {
       return layers.value.slice(1).map((_ref, index) => {
         let {
           id
@@ -2214,7 +2227,10 @@
       return items.value.find(item => item.id === id);
     };
     const rootVm = getCurrentInstance('createLayout');
-    const layoutIsReady = vue.nextTick();
+    const isMounted = vue.shallowRef(false);
+    vue.onMounted(() => {
+      isMounted.value = true;
+    });
     vue.provide(VuetifyLayoutKey, {
       register: (vm, _ref2) => {
         let {
@@ -2252,9 +2268,13 @@
               transition: 'none'
             })
           };
-          if (index.value < 0) throw new Error(`Layout item "${id}" is missing`);
+          if (!isMounted.value) return styles;
           const item = items.value[index.value];
           if (!item) throw new Error(`[Vuetify] Could not find layout item "${id}"`);
+          const overlap = computedOverlaps.value.get(id);
+          if (overlap) {
+            item[overlap.position] += overlap.amount;
+          }
           return {
             ...styles,
             height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : elementSize.value ? `${elementSize.value}px` : undefined,
@@ -2287,8 +2307,7 @@
       getLayoutItem,
       items,
       layoutRect,
-      rootZIndex,
-      layoutIsReady
+      rootZIndex
     });
     const layoutClasses = vue.computed(() => ['v-layout', {
       'v-layout--full-height': props.fullHeight
@@ -2304,7 +2323,6 @@
       getLayoutItem,
       items,
       layoutRect,
-      layoutIsReady,
       layoutRef: resizeRef
     };
   }
@@ -3001,9 +3019,7 @@
         "style": [props.style]
       }, [vue.createVNode("div", {
         "class": "v-application__wrap"
-      }, [vue.createVNode(vue.Suspense, null, {
-        default: () => [vue.createVNode(vue.Fragment, null, [slots.default?.()])]
-      })])]));
+      }, [slots.default?.()])]));
       return {
         getLayoutItem,
         items,
@@ -3692,6 +3708,7 @@
   // not intended for public use, this is passed in by vuetify-loader
 
   const makeVImgProps = propsFactory({
+    absolute: Boolean,
     alt: String,
     cover: Boolean,
     color: String,
@@ -3948,6 +3965,7 @@
         const responsiveProps = VResponsive.filterProps(props);
         return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
           "class": ['v-img', {
+            'v-img--absolute': props.absolute,
             'v-img--booting': !isBooted.value
           }, backgroundColorClasses.value, roundedClasses.value, props.class],
           "style": [{
@@ -4360,8 +4378,9 @@
       const isFlat = vue.computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.computed(() => {
-        const height = Number(vToolbarRef.value?.contentHeight ?? props.height);
-        const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0);
+        if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
+        const height = vToolbarRef.value?.contentHeight ?? 0;
+        const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
         if (!canHide.value) return height + extensionHeight;
         return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
       });
@@ -4382,8 +4401,7 @@
         ssrBootStyles
       } = useSsrBoot();
       const {
-        layoutItemStyles,
-        layoutIsReady
+        layoutItemStyles
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -4411,7 +4429,7 @@
           "flat": isFlat.value
         }), slots);
       });
-      return layoutIsReady;
+      return {};
     }
   });
 
@@ -5748,6 +5766,7 @@
       type: Boolean,
       default: undefined
     },
+    activeColor: String,
     baseColor: String,
     symbol: {
       type: null,
@@ -5839,10 +5858,11 @@
         }
         return group?.isSelected.value;
       });
+      const color = vue.computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
       const variantProps = vue.computed(() => {
         const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
         return {
-          color: showColor ? props.color ?? props.baseColor : props.baseColor,
+          color: showColor ? color.value ?? props.baseColor : props.baseColor,
           variant: props.variant
         };
       });
@@ -6183,6 +6203,7 @@
     icon: IconValue,
     image: String,
     text: String,
+    ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -6203,6 +6224,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        borderClasses
+      } = useBorder(props);
       const {
         colorClasses,
         colorStyles,
@@ -6222,7 +6246,7 @@
         "class": ['v-avatar', {
           'v-avatar--start': props.start,
           'v-avatar--end': props.end
-        }, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, sizeStyles.value, props.style]
       }, {
         default: () => [!slots.default ? props.image ? vue.createVNode(VImg, {
@@ -6922,12 +6946,14 @@
     const validateOn = vue.computed(() => {
       let value = (props.validateOn ?? form?.validateOn.value) || 'input';
       if (value === 'lazy') value = 'input lazy';
+      if (value === 'eager') value = 'input eager';
       const set = new Set(value?.split(' ') ?? []);
       return {
-        blur: set.has('blur') || set.has('input'),
         input: set.has('input'),
-        submit: set.has('submit'),
-        lazy: set.has('lazy')
+        blur: set.has('blur') || set.has('input') || set.has('invalid-input'),
+        invalidInput: set.has('invalid-input'),
+        lazy: set.has('lazy'),
+        eager: set.has('eager')
       };
     });
     const isValid = vue.computed(() => {
@@ -6964,11 +6990,11 @@
     });
     vue.onMounted(async () => {
       if (!validateOn.value.lazy) {
-        await validate(true);
+        await validate(!validateOn.value.eager);
       }
       form?.update(uid.value, isValid.value, errorMessages.value);
     });
-    useToggleScope(() => validateOn.value.input, () => {
+    useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
       vue.watch(validationModel, () => {
         if (validationModel.value != null) {
           validate();
@@ -6996,7 +7022,7 @@
     async function resetValidation() {
       isPristine.value = true;
       if (!validateOn.value.lazy) {
-        await validate(true);
+        await validate(!validateOn.value.eager);
       } else {
         internalErrorMessages.value = [];
       }
@@ -7936,7 +7962,9 @@
         selected: group.selected,
         scrollTo,
         scrollOffset,
-        focus
+        focus,
+        hasPrev,
+        hasNext
       };
     }
   });
@@ -8406,6 +8434,7 @@
     return strategy;
   };
 
+  // Utilities
   const singleOpenStrategy = {
     open: _ref => {
       let {
@@ -8439,11 +8468,11 @@
         parents
       } = _ref2;
       if (value) {
-        let parent = parents.get(id);
+        let parent = vue.toRaw(parents.get(id));
         opened.add(id);
         while (parent != null && parent !== id) {
           opened.add(parent);
-          parent = parents.get(parent);
+          parent = vue.toRaw(parents.get(parent));
         }
         return opened;
       } else {
@@ -8614,18 +8643,18 @@
         const items = [id];
         while (items.length) {
           const item = items.shift();
-          selected.set(item, value ? 'on' : 'off');
+          selected.set(vue.toRaw(item), value ? 'on' : 'off');
           if (children.has(item)) {
             items.push(...children.get(item));
           }
         }
-        let parent = parents.get(id);
+        let parent = vue.toRaw(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');
+          const everySelected = childrenIds.every(cid => selected.get(vue.toRaw(cid)) === 'on');
+          const noneSelected = childrenIds.every(cid => !selected.has(vue.toRaw(cid)) || selected.get(vue.toRaw(cid)) === 'off');
           selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
-          parent = parents.get(parent);
+          parent = vue.toRaw(parents.get(parent));
         }
 
         // If mandatory and planned deselect results in no selected
@@ -8703,7 +8732,7 @@
     let isUnmounted = false;
     const children = vue.ref(new Map());
     const parents = vue.ref(new Map());
-    const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+    const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(vue.toRaw(v)), v => [...v.values()]);
     const activeStrategy = vue.computed(() => {
       if (typeof props.activeStrategy === 'object') return props.activeStrategy;
       if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -8876,9 +8905,9 @@
     const item = {
       ...parent,
       id: computedId,
-      open: (open, e) => parent.root.open(computedId.value, open, e),
+      open: (open, e) => parent.root.open(vue.toRaw(computedId.value), open, e),
       openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
-      isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
+      isOpen: vue.computed(() => parent.root.opened.value.has(vue.toRaw(computedId.value))),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
       isActivated: vue.computed(() => parent.root.activated.value.has(vue.toRaw(computedId.value))),
@@ -9102,6 +9131,7 @@
         activate,
         isActivated,
         select,
+        isOpen,
         isSelected,
         isIndeterminate,
         isGroupActivator,
@@ -9156,6 +9186,7 @@
       const slotProps = vue.computed(() => ({
         isActive: isActive.value,
         select,
+        isOpen: isOpen.value,
         isSelected: isSelected.value,
         isIndeterminate: isIndeterminate.value
       }));
@@ -9175,7 +9206,7 @@
       function onKeyDown(e) {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
-          onClick(e);
+          e.target.dispatchEvent(new MouseEvent('click', e));
         }
       }
       useRender(() => {
@@ -9965,12 +9996,6 @@
     // el.style.removeProperty('max-width')
     // el.style.removeProperty('max-height')
 
-    if (isRtl) {
-      el.style.removeProperty('left');
-    } else {
-      el.style.removeProperty('right');
-    }
-
     /* eslint-disable-next-line sonarjs/prefer-immediate-return */
     const contentBox = nullifyTransforms(el);
     if (isRtl) {
@@ -10498,7 +10523,8 @@
   function useActivator(props, _ref) {
     let {
       isActive,
-      isTop
+      isTop,
+      contentEl
     } = _ref;
     const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
@@ -10615,7 +10641,7 @@
       return events;
     });
     vue.watch(isTop, val => {
-      if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) {
+      if (val && (props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused) || openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered)) && !contentEl.value?.contains(document.activeElement)) {
         isActive.value = false;
       }
     });
@@ -11025,6 +11051,9 @@
         emit
       } = _ref;
       const vm = getCurrentInstance('VOverlay');
+      const root = vue.ref();
+      const scrimEl = vue.ref();
+      const contentEl = vue.ref();
       const model = useProxiedModel(props, 'modelValue');
       const isActive = vue.computed({
         get: () => model.value,
@@ -11062,7 +11091,8 @@
         scrimEvents
       } = useActivator(props, {
         isActive,
-        isTop: localTop
+        isTop: localTop,
+        contentEl
       });
       const {
         teleportTarget
@@ -11083,9 +11113,6 @@
       vue.watch(() => props.disabled, v => {
         if (v) isActive.value = false;
       });
-      const root = vue.ref();
-      const scrimEl = vue.ref();
-      const contentEl = vue.ref();
       const {
         contentStyles,
         updateLocation
@@ -11336,10 +11363,12 @@
     // TODO
     // disableKeys: Boolean,
     id: String,
+    submenu: Boolean,
     ...omit(makeVOverlayProps({
       closeDelay: 250,
       closeOnContentClick: true,
       locationStrategy: 'connected',
+      location: undefined,
       openDelay: 300,
       scrim: false,
       scrollStrategy: 'reposition',
@@ -11362,27 +11391,32 @@
       const {
         scopeId
       } = useScopeId();
+      const {
+        isRtl
+      } = useRtl();
       const uid = getUid();
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      const openChildren = vue.shallowRef(0);
+      const openChildren = vue.shallowRef(new Set());
       vue.provide(VMenuSymbol, {
         register() {
-          ++openChildren.value;
+          openChildren.value.add(uid);
         },
         unregister() {
-          --openChildren.value;
+          openChildren.value.delete(uid);
         },
         closeParents(e) {
           setTimeout(() => {
-            if (!openChildren.value && !props.persistent && (e == null || overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl))) {
+            if (!openChildren.value.size && !props.persistent && (e == null || overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl))) {
               isActive.value = false;
               parent?.closeParents();
             }
           }, 40);
         }
       });
+      vue.onBeforeUnmount(() => parent?.unregister());
+      vue.onDeactivated(() => isActive.value = false);
       async function onFocusIn(e) {
         const before = e.relatedTarget;
         const after = e.target;
@@ -11422,9 +11456,9 @@
             isActive.value = false;
             overlay.value?.activatorEl?.focus();
           }
-        } else if (['Enter', ' '].includes(e.key) && props.closeOnContentClick) {
+        } else if (props.submenu && e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
           isActive.value = false;
-          parent?.closeParents();
+          overlay.value?.activatorEl?.focus();
         }
       }
       function onActivatorKeydown(e) {
@@ -11433,12 +11467,21 @@
         if (el && isActive.value) {
           if (e.key === 'ArrowDown') {
             e.preventDefault();
+            e.stopImmediatePropagation();
             focusChild(el, 'next');
           } else if (e.key === 'ArrowUp') {
             e.preventDefault();
+            e.stopImmediatePropagation();
             focusChild(el, 'prev');
+          } else if (props.submenu) {
+            if (e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
+              isActive.value = false;
+            } else if (e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight')) {
+              e.preventDefault();
+              focusChild(el, 'first');
+            }
           }
-        } else if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        } else if (props.submenu ? e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight') : ['ArrowDown', 'ArrowUp'].includes(e.key)) {
           isActive.value = true;
           e.preventDefault();
           setTimeout(() => setTimeout(() => onActivatorKeydown(e)));
@@ -11462,6 +11505,7 @@
           "onUpdate:modelValue": $event => isActive.value = $event,
           "absolute": true,
           "activatorProps": activatorProps.value,
+          "location": props.location ?? (props.submenu ? 'end' : 'bottom'),
           "onClick:outside": onClickOutside,
           "onKeydown": onKeydown
         }, scopeId), {
@@ -12294,6 +12338,7 @@
       deep: true
     });
     return {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       computedItems,
@@ -12357,6 +12402,7 @@
         dimensionStyles
       } = useDimension(props);
       const {
+        calculateVisibleItems,
         containerRef,
         markerRef,
         handleScroll,
@@ -12428,6 +12474,7 @@
         }, [children])]);
       });
       return {
+        calculateVisibleItems,
         scrollToIndex
       };
     }
@@ -12496,9 +12543,9 @@
       }
     }
     return {
-      onListScroll,
-      onListKeydown
-    };
+      onScrollPassive: onListScroll,
+      onKeydown: onListKeydown
+    }; // typescript doesn't know about vue's event merging
   }
 
   // Types
@@ -12573,7 +12620,7 @@
       const menu = vue.computed({
         get: () => _menu.value,
         set: v => {
-          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
           _menu.value = v;
         }
       });
@@ -12612,10 +12659,7 @@
         };
       });
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -12625,6 +12669,11 @@
         if (menuDisabled.value) return;
         menu.value = !menu.value;
       }
+      function onListKeydown(e) {
+        if (checkPrintable(e)) {
+          onKeydown(e);
+        }
+      }
       function onKeydown(e) {
         if (!e.key || props.readonly || form?.isReadonly.value) return;
         if (['Enter', ' ', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {
@@ -12645,11 +12694,6 @@
         // html select hotkeys
         const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
 
-        function checkPrintable(e) {
-          const isPrintableChar = e.key.length === 1;
-          const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
-          return isPrintableChar && noModifier;
-        }
         if (props.multiple || !checkPrintable(e)) return;
         const now = performance.now();
         if (now - keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
@@ -12694,6 +12738,11 @@
           menu.value = false;
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           vTextFieldRef.value?.focus();
@@ -12772,6 +12821,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, computedMenuProps.value), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -12781,11 +12831,10 @@
               "onMousedown": e => e.preventDefault(),
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
-              "onScrollPassive": onListScroll,
               "tabindex": "-1",
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
-            }, props.listProps), {
+            }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -13080,7 +13129,7 @@
       const menu = vue.computed({
         get: () => _menu.value,
         set: v => {
-          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
           _menu.value = v;
         }
       });
@@ -13124,10 +13173,7 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         if (props.openOnClear) {
           menu.value = true;
@@ -13146,6 +13192,11 @@
         }
         menu.value = !menu.value;
       }
+      function onListKeydown(e) {
+        if (checkPrintable(e)) {
+          vTextFieldRef.value?.focus();
+        }
+      }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
@@ -13210,6 +13261,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -13338,6 +13394,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -13348,11 +13405,10 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
-              "onScrollPassive": onListScroll,
               "tabindex": "-1",
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
-            }, props.listProps), {
+            }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -13802,8 +13858,7 @@
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
       const isActive = useProxiedModel(props, 'active', props.active);
       const {
-        layoutItemStyles,
-        layoutIsReady
+        layoutItemStyles
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -13841,7 +13896,7 @@
           }, [slots.default()])]
         });
       });
-      return layoutIsReady;
+      return {};
     }
   });
 
@@ -16913,7 +16968,7 @@
       const menu = vue.computed({
         get: () => _menu.value,
         set: v => {
-          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
           _menu.value = v;
         }
       });
@@ -16996,10 +17051,7 @@
       });
       const menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
       const listRef = vue.ref();
-      const {
-        onListScroll,
-        onListKeydown
-      } = useScrolling(listRef, vTextFieldRef);
+      const listEvents = useScrolling(listRef, vTextFieldRef);
       function onClear(e) {
         cleared = true;
         if (props.openOnClear) {
@@ -17018,6 +17070,11 @@
         }
         menu.value = !menu.value;
       }
+      function onListKeydown(e) {
+        if (checkPrintable(e)) {
+          vTextFieldRef.value?.focus();
+        }
+      }
       // eslint-disable-next-line complexity
       function onKeydown(e) {
         if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
@@ -17082,6 +17139,11 @@
           }
         }
       }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
       function onAfterLeave() {
         if (isFocused.value) {
           isPristine.value = true;
@@ -17206,6 +17268,7 @@
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
             "onAfterLeave": onAfterLeave
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
@@ -17216,11 +17279,10 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
-              "onScrollPassive": onListScroll,
               "tabindex": "-1",
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
-            }, props.listProps), {
+            }, listEvents, props.listProps), {
               default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), vue.createVNode(VVirtualScroll, {
@@ -21164,6 +21226,7 @@
       default: false
     },
     ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeTagProps()
   }, 'VContainer');
   const VContainer = genericComponent()({
@@ -21176,11 +21239,14 @@
       const {
         rtlClasses
       } = useRtl();
+      const {
+        dimensionStyles
+      } = useDimension(props);
       useRender(() => vue.createVNode(props.tag, {
         "class": ['v-container', {
           'v-container--fluid': props.fluid
         }, rtlClasses.value, props.class],
-        "style": props.style
+        "style": [dimensionStyles.value, props.style]
       }, slots));
       return {};
     }
@@ -22602,7 +22668,8 @@
       default: false
     },
     readonly: Boolean,
-    ...makeComponentProps()
+    ...makeComponentProps(),
+    ...makeDimensionProps()
   }, 'VExpansionPanelTitle');
   const VExpansionPanelTitle = genericComponent()({
     name: 'VExpansionPanelTitle',
@@ -22620,6 +22687,9 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const {
+        dimensionStyles
+      } = useDimension(props);
       const slotProps = vue.computed(() => ({
         collapseIcon: props.collapseIcon,
         disabled: expansionPanel.disabled.value,
@@ -22634,7 +22704,7 @@
           'v-expansion-panel-title--focusable': props.focusable,
           'v-expansion-panel-title--static': props.static
         }, backgroundColorClasses.value, props.class],
-        "style": [backgroundColorStyles.value, props.style],
+        "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
         "type": "button",
         "tabindex": expansionPanel.disabled.value ? -1 : undefined,
         "disabled": expansionPanel.disabled.value,
@@ -23157,7 +23227,6 @@
         slots
       } = _ref;
       const layoutItemStyles = vue.ref();
-      const layoutIsReady = vue.shallowRef();
       const {
         themeClasses
       } = provideTheme(props);
@@ -23194,7 +23263,6 @@
         });
         vue.watchEffect(() => {
           layoutItemStyles.value = layout.layoutItemStyles.value;
-          layoutIsReady.value = layout.layoutIsReady;
         });
       });
       useRender(() => vue.createVNode(props.tag, {
@@ -23204,7 +23272,7 @@
           height: convertToUnit(props.height)
         }, props.style]
       }, slots));
-      return props.app ? layoutIsReady.value : {};
+      return {};
     }
   });
 
@@ -23631,9 +23699,7 @@
         "ref": layoutRef,
         "class": [layoutClasses.value, props.class],
         "style": [dimensionStyles.value, layoutStyles.value, props.style]
-      }, [vue.createVNode(vue.Suspense, null, {
-        default: () => [vue.createVNode(vue.Fragment, null, [slots.default?.()])]
-      })]));
+      }, [slots.default?.()]));
       return {
         getLayoutItem,
         items
@@ -23664,8 +23730,7 @@
         slots
       } = _ref;
       const {
-        layoutItemStyles,
-        layoutIsReady
+        layoutItemStyles
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -23675,11 +23740,10 @@
         active: vue.toRef(props, 'modelValue'),
         absolute: vue.toRef(props, 'absolute')
       });
-      useRender(() => vue.createVNode("div", {
+      return () => vue.createVNode("div", {
         "class": ['v-layout-item', props.class],
         "style": [layoutItemStyles.value, props.style]
-      }, [slots.default?.()]));
-      return layoutIsReady;
+      }, [slots.default?.()]);
     }
   });
 
@@ -23790,8 +23854,7 @@
         dimensionStyles
       } = useDimension(props);
       const {
-        mainStyles,
-        layoutIsReady
+        mainStyles
       } = useLayout();
       const {
         ssrBootStyles
@@ -23806,7 +23869,7 @@
           "class": "v-main__scroller"
         }, [slots.default?.()]) : slots.default?.()]
       }));
-      return layoutIsReady;
+      return {};
     }
   });
 
@@ -24276,8 +24339,7 @@
       const elementSize = vue.computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
       const {
         layoutItemStyles,
-        layoutItemScrimStyles,
-        layoutIsReady
+        layoutItemScrimStyles
       } = useLayoutItem({
         id: props.name,
         order: vue.computed(() => parseInt(props.order, 10)),
@@ -24373,9 +24435,9 @@
           }, scopeId), null)]
         })]);
       });
-      return layoutIsReady.then(() => ({
+      return {
         isStuck
-      }));
+      };
     }
   });
 
@@ -26064,7 +26126,7 @@
       const model = useProxiedModel(props, 'modelValue');
       const menuRef = vue.ref();
       const location = vue.computed(() => {
-        const [y, x = 'center'] = props.location.split(' ');
+        const [y, x = 'center'] = props.location?.split(' ') ?? [];
         return `${y} ${x}`;
       });
       const locationClasses = vue.computed(() => ({
@@ -28150,7 +28212,7 @@
       goTo
     };
   }
-  const version$1 = "3.6.15";
+  const version$1 = "3.7.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -28175,7 +28237,7 @@
       ...options
     });
   };
-  const version = "3.6.15";
+  const version = "3.7.0";
   createVuetify.version = version;
 
   exports.blueprints = index;