vuetify 3.6.15 → 3.7.0

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.6.15
+* Vuetify v3.7.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, readonly, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, Suspense, TransitionGroup, Transition, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -462,16 +462,6 @@ function defer(timeout, cb) {
   const timeoutId = window.setTimeout(cb, timeout);
   return () => window.clearTimeout(timeoutId);
 }
-function eagerComputed(fn, options) {
-  const result = shallowRef();
-  watchEffect(() => {
-    result.value = fn();
-  }, {
-    flush: 'sync',
-    ...options
-  });
-  return readonly(result);
-}
 function isClickInsideElement(event, targetDiv) {
   const mouseX = event.clientX;
   const mouseY = event.clientY;
@@ -498,6 +488,11 @@ function templateRef() {
   });
   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'];
@@ -2083,9 +2078,7 @@ const makeLayoutItemProps = propsFactory({
 function useLayout() {
   const layout = inject$1(VuetifyLayoutKey);
   if (!layout) throw new Error('[Vuetify] Could not find injected layout');
-  const layoutIsReady = nextTick();
   return {
-    layoutIsReady,
     getLayoutItem: layout.getLayoutItem,
     mainRect: layout.mainRect,
     mainStyles: layout.mainStyles
@@ -2102,7 +2095,6 @@ function useLayoutItem(options) {
   const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
-  const layoutIsReady = nextTick();
   const {
     layoutItemStyles,
     layoutItemScrimStyles
@@ -2115,8 +2107,7 @@ function useLayoutItem(options) {
   return {
     layoutItemStyles,
     layoutRect: layout.layoutRect,
-    layoutItemScrimStyles,
-    layoutIsReady
+    layoutItemScrimStyles
   };
 }
 const generateLayers = (layout, positions, layoutSizes, activeItems) => {
@@ -2162,7 +2153,29 @@ function createLayout(props) {
     resizeRef,
     contentRect: layoutRect
   } = useResizeObserver();
-  const layers = eagerComputed(() => {
+  const computedOverlaps = 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 = computed(() => {
     const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b);
     const layout = [];
     for (const p of uniquePriorities) {
@@ -2188,7 +2201,7 @@ function createLayout(props) {
       })
     };
   });
-  const items = eagerComputed(() => {
+  const items = computed(() => {
     return layers.value.slice(1).map((_ref, index) => {
       let {
         id
@@ -2210,7 +2223,10 @@ function createLayout(props) {
     return items.value.find(item => item.id === id);
   };
   const rootVm = getCurrentInstance('createLayout');
-  const layoutIsReady = nextTick();
+  const isMounted = shallowRef(false);
+  onMounted(() => {
+    isMounted.value = true;
+  });
   provide(VuetifyLayoutKey, {
     register: (vm, _ref2) => {
       let {
@@ -2248,9 +2264,13 @@ function createLayout(props) {
             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,
@@ -2283,8 +2303,7 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
-    rootZIndex,
-    layoutIsReady
+    rootZIndex
   });
   const layoutClasses = computed(() => ['v-layout', {
     'v-layout--full-height': props.fullHeight
@@ -2300,7 +2319,6 @@ function createLayout(props) {
     getLayoutItem,
     items,
     layoutRect,
-    layoutIsReady,
     layoutRef: resizeRef
   };
 }
@@ -2997,9 +3015,7 @@ const VApp = genericComponent()({
       "style": [props.style]
     }, [createVNode("div", {
       "class": "v-application__wrap"
-    }, [createVNode(Suspense, null, {
-      default: () => [createVNode(Fragment, null, [slots.default?.()])]
-    })])]));
+    }, [slots.default?.()])]));
     return {
       getLayoutItem,
       items,
@@ -3688,6 +3704,7 @@ const Intersect = {
 // not intended for public use, this is passed in by vuetify-loader
 
 const makeVImgProps = propsFactory({
+  absolute: Boolean,
   alt: String,
   cover: Boolean,
   color: String,
@@ -3944,6 +3961,7 @@ const VImg = genericComponent()({
       const responsiveProps = VResponsive.filterProps(props);
       return withDirectives(createVNode(VResponsive, mergeProps({
         "class": ['v-img', {
+          'v-img--absolute': props.absolute,
           'v-img--booting': !isBooted.value
         }, backgroundColorClasses.value, roundedClasses.value, props.class],
         "style": [{
@@ -4356,8 +4374,9 @@ const VAppBar = genericComponent()({
     const isFlat = computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = 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;
     });
@@ -4378,8 +4397,7 @@ const VAppBar = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const {
-      layoutItemStyles,
-      layoutIsReady
+      layoutItemStyles
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -4407,7 +4425,7 @@ const VAppBar = genericComponent()({
         "flat": isFlat.value
       }), slots);
     });
-    return layoutIsReady;
+    return {};
   }
 });
 
@@ -5744,6 +5762,7 @@ const makeVBtnProps = propsFactory({
     type: Boolean,
     default: undefined
   },
+  activeColor: String,
   baseColor: String,
   symbol: {
     type: null,
@@ -5835,10 +5854,11 @@ const VBtn = genericComponent()({
       }
       return group?.isSelected.value;
     });
+    const color = computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
     const variantProps = 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
       };
     });
@@ -6179,6 +6199,7 @@ const makeVAvatarProps = propsFactory({
   icon: IconValue,
   image: String,
   text: String,
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -6199,6 +6220,9 @@ const VAvatar = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
     const {
       colorClasses,
       colorStyles,
@@ -6218,7 +6242,7 @@ const VAvatar = genericComponent()({
       "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 ? createVNode(VImg, {
@@ -6918,12 +6942,14 @@ function useValidation(props) {
   const validateOn = 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 = computed(() => {
@@ -6960,11 +6986,11 @@ function useValidation(props) {
   });
   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, () => {
     watch(validationModel, () => {
       if (validationModel.value != null) {
         validate();
@@ -6992,7 +7018,7 @@ function useValidation(props) {
   async function resetValidation() {
     isPristine.value = true;
     if (!validateOn.value.lazy) {
-      await validate(true);
+      await validate(!validateOn.value.eager);
     } else {
       internalErrorMessages.value = [];
     }
@@ -7932,7 +7958,9 @@ const VSlideGroup = genericComponent()({
       selected: group.selected,
       scrollTo,
       scrollOffset,
-      focus
+      focus,
+      hasPrev,
+      hasNext
     };
   }
 });
@@ -8402,6 +8430,7 @@ const leafSingleActiveStrategy = mandatory => {
   return strategy;
 };
 
+// Utilities
 const singleOpenStrategy = {
   open: _ref => {
     let {
@@ -8435,11 +8464,11 @@ const multipleOpenStrategy = {
       parents
     } = _ref2;
     if (value) {
-      let parent = parents.get(id);
+      let parent = toRaw(parents.get(id));
       opened.add(id);
       while (parent != null && parent !== id) {
         opened.add(parent);
-        parent = parents.get(parent);
+        parent = toRaw(parents.get(parent));
       }
       return opened;
     } else {
@@ -8610,18 +8639,18 @@ const classicSelectStrategy = mandatory => {
       const items = [id];
       while (items.length) {
         const item = items.shift();
-        selected.set(item, value ? 'on' : 'off');
+        selected.set(toRaw(item), value ? 'on' : 'off');
         if (children.has(item)) {
           items.push(...children.get(item));
         }
       }
-      let parent = parents.get(id);
+      let parent = 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(toRaw(cid)) === 'on');
+        const noneSelected = childrenIds.every(cid => !selected.has(toRaw(cid)) || selected.get(toRaw(cid)) === 'off');
         selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
-        parent = parents.get(parent);
+        parent = toRaw(parents.get(parent));
       }
 
       // If mandatory and planned deselect results in no selected
@@ -8699,7 +8728,7 @@ const useNested = props => {
   let isUnmounted = false;
   const children = ref(new Map());
   const parents = 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(toRaw(v)), v => [...v.values()]);
   const activeStrategy = computed(() => {
     if (typeof props.activeStrategy === 'object') return props.activeStrategy;
     if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
@@ -8872,9 +8901,9 @@ const useNestedItem = (id, isGroup) => {
   const item = {
     ...parent,
     id: computedId,
-    open: (open, e) => parent.root.open(computedId.value, open, e),
+    open: (open, e) => parent.root.open(toRaw(computedId.value), open, e),
     openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
-    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
+    isOpen: computed(() => parent.root.opened.value.has(toRaw(computedId.value))),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
@@ -9098,6 +9127,7 @@ const VListItem = genericComponent()({
       activate,
       isActivated,
       select,
+      isOpen,
       isSelected,
       isIndeterminate,
       isGroupActivator,
@@ -9152,6 +9182,7 @@ const VListItem = genericComponent()({
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
+      isOpen: isOpen.value,
       isSelected: isSelected.value,
       isIndeterminate: isIndeterminate.value
     }));
@@ -9171,7 +9202,7 @@ const VListItem = genericComponent()({
     function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
-        onClick(e);
+        e.target.dispatchEvent(new MouseEvent('click', e));
       }
     }
     useRender(() => {
@@ -9961,12 +9992,6 @@ function getIntrinsicSize(el, isRtl) {
   // 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) {
@@ -10494,7 +10519,8 @@ const makeActivatorProps = propsFactory({
 function useActivator(props, _ref) {
   let {
     isActive,
-    isTop
+    isTop,
+    contentEl
   } = _ref;
   const vm = getCurrentInstance('useActivator');
   const activatorEl = ref();
@@ -10611,7 +10637,7 @@ function useActivator(props, _ref) {
     return events;
   });
   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;
     }
   });
@@ -11021,6 +11047,9 @@ const VOverlay = genericComponent()({
       emit
     } = _ref;
     const vm = getCurrentInstance('VOverlay');
+    const root = ref();
+    const scrimEl = ref();
+    const contentEl = ref();
     const model = useProxiedModel(props, 'modelValue');
     const isActive = computed({
       get: () => model.value,
@@ -11058,7 +11087,8 @@ const VOverlay = genericComponent()({
       scrimEvents
     } = useActivator(props, {
       isActive,
-      isTop: localTop
+      isTop: localTop,
+      contentEl
     });
     const {
       teleportTarget
@@ -11079,9 +11109,6 @@ const VOverlay = genericComponent()({
     watch(() => props.disabled, v => {
       if (v) isActive.value = false;
     });
-    const root = ref();
-    const scrimEl = ref();
-    const contentEl = ref();
     const {
       contentStyles,
       updateLocation
@@ -11332,10 +11359,12 @@ const makeVMenuProps = propsFactory({
   // TODO
   // disableKeys: Boolean,
   id: String,
+  submenu: Boolean,
   ...omit(makeVOverlayProps({
     closeDelay: 250,
     closeOnContentClick: true,
     locationStrategy: 'connected',
+    location: undefined,
     openDelay: 300,
     scrim: false,
     scrollStrategy: 'reposition',
@@ -11358,27 +11387,32 @@ const VMenu = genericComponent()({
     const {
       scopeId
     } = useScopeId();
+    const {
+      isRtl
+    } = useRtl();
     const uid = getUid();
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
-    const openChildren = shallowRef(0);
+    const openChildren = shallowRef(new Set());
     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);
       }
     });
+    onBeforeUnmount(() => parent?.unregister());
+    onDeactivated(() => isActive.value = false);
     async function onFocusIn(e) {
       const before = e.relatedTarget;
       const after = e.target;
@@ -11418,9 +11452,9 @@ const VMenu = genericComponent()({
           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) {
@@ -11429,12 +11463,21 @@ const VMenu = genericComponent()({
       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)));
@@ -11458,6 +11501,7 @@ const VMenu = genericComponent()({
         "onUpdate:modelValue": $event => isActive.value = $event,
         "absolute": true,
         "activatorProps": activatorProps.value,
+        "location": props.location ?? (props.submenu ? 'end' : 'bottom'),
         "onClick:outside": onClickOutside,
         "onKeydown": onKeydown
       }, scopeId), {
@@ -12290,6 +12334,7 @@ function useVirtual(props, items) {
     deep: true
   });
   return {
+    calculateVisibleItems,
     containerRef,
     markerRef,
     computedItems,
@@ -12353,6 +12398,7 @@ const VVirtualScroll = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     const {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       handleScroll,
@@ -12424,6 +12470,7 @@ const VVirtualScroll = genericComponent()({
       }, [children])]);
     });
     return {
+      calculateVisibleItems,
       scrollToIndex
     };
   }
@@ -12492,9 +12539,9 @@ function useScrolling(listRef, textFieldRef) {
     }
   }
   return {
-    onListScroll,
-    onListKeydown
-  };
+    onScrollPassive: onListScroll,
+    onKeydown: onListKeydown
+  }; // typescript doesn't know about vue's event merging
 }
 
 // Types
@@ -12569,7 +12616,7 @@ const VSelect = genericComponent()({
     const menu = 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;
       }
     });
@@ -12608,10 +12655,7 @@ const VSelect = genericComponent()({
       };
     });
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -12621,6 +12665,11 @@ const VSelect = genericComponent()({
       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)) {
@@ -12641,11 +12690,6 @@ const VSelect = genericComponent()({
       // 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) {
@@ -12690,6 +12734,11 @@ const VSelect = genericComponent()({
         menu.value = false;
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         vTextFieldRef.value?.focus();
@@ -12768,6 +12817,7 @@ const VSelect = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, computedMenuProps.value), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -12777,11 +12827,10 @@ const VSelect = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -13076,7 +13125,7 @@ const VAutocomplete = genericComponent()({
     const menu = 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;
       }
     });
@@ -13120,10 +13169,7 @@ const VAutocomplete = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       if (props.openOnClear) {
         menu.value = true;
@@ -13142,6 +13188,11 @@ const VAutocomplete = genericComponent()({
       }
       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;
@@ -13206,6 +13257,11 @@ const VAutocomplete = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -13334,6 +13390,7 @@ const VAutocomplete = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -13344,11 +13401,10 @@ const VAutocomplete = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -13798,8 +13854,7 @@ const VBottomNavigation = genericComponent()({
     const height = 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: computed(() => parseInt(props.order, 10)),
@@ -13837,7 +13892,7 @@ const VBottomNavigation = genericComponent()({
         }, [slots.default()])]
       });
     });
-    return layoutIsReady;
+    return {};
   }
 });
 
@@ -16909,7 +16964,7 @@ const VCombobox = genericComponent()({
     const menu = 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;
       }
     });
@@ -16992,10 +17047,7 @@ const VCombobox = genericComponent()({
     });
     const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
-    const {
-      onListScroll,
-      onListKeydown
-    } = useScrolling(listRef, vTextFieldRef);
+    const listEvents = useScrolling(listRef, vTextFieldRef);
     function onClear(e) {
       cleared = true;
       if (props.openOnClear) {
@@ -17014,6 +17066,11 @@ const VCombobox = genericComponent()({
       }
       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;
@@ -17078,6 +17135,11 @@ const VCombobox = genericComponent()({
         }
       }
     }
+    function onAfterEnter() {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems();
+      }
+    }
     function onAfterLeave() {
       if (isFocused.value) {
         isPristine.value = true;
@@ -17202,6 +17264,7 @@ const VCombobox = genericComponent()({
           "openOnClick": false,
           "closeOnContentClick": false,
           "transition": props.transition,
+          "onAfterEnter": onAfterEnter,
           "onAfterLeave": onAfterLeave
         }, props.menuProps), {
           default: () => [hasList && createVNode(VList, mergeProps({
@@ -17212,11 +17275,10 @@ const VCombobox = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), createVNode(VVirtualScroll, {
@@ -21160,6 +21222,7 @@ const makeVContainerProps = propsFactory({
     default: false
   },
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeTagProps()
 }, 'VContainer');
 const VContainer = genericComponent()({
@@ -21172,11 +21235,14 @@ const VContainer = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => 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 {};
   }
@@ -22598,7 +22664,8 @@ const makeVExpansionPanelTitleProps = propsFactory({
     default: false
   },
   readonly: Boolean,
-  ...makeComponentProps()
+  ...makeComponentProps(),
+  ...makeDimensionProps()
 }, 'VExpansionPanelTitle');
 const VExpansionPanelTitle = genericComponent()({
   name: 'VExpansionPanelTitle',
@@ -22616,6 +22683,9 @@ const VExpansionPanelTitle = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      dimensionStyles
+    } = useDimension(props);
     const slotProps = computed(() => ({
       collapseIcon: props.collapseIcon,
       disabled: expansionPanel.disabled.value,
@@ -22630,7 +22700,7 @@ const VExpansionPanelTitle = genericComponent()({
         '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,
@@ -23153,7 +23223,6 @@ const VFooter = genericComponent()({
       slots
     } = _ref;
     const layoutItemStyles = ref();
-    const layoutIsReady = shallowRef();
     const {
       themeClasses
     } = provideTheme(props);
@@ -23190,7 +23259,6 @@ const VFooter = genericComponent()({
       });
       watchEffect(() => {
         layoutItemStyles.value = layout.layoutItemStyles.value;
-        layoutIsReady.value = layout.layoutIsReady;
       });
     });
     useRender(() => createVNode(props.tag, {
@@ -23200,7 +23268,7 @@ const VFooter = genericComponent()({
         height: convertToUnit(props.height)
       }, props.style]
     }, slots));
-    return props.app ? layoutIsReady.value : {};
+    return {};
   }
 });
 
@@ -23627,9 +23695,7 @@ const VLayout = genericComponent()({
       "ref": layoutRef,
       "class": [layoutClasses.value, props.class],
       "style": [dimensionStyles.value, layoutStyles.value, props.style]
-    }, [createVNode(Suspense, null, {
-      default: () => [createVNode(Fragment, null, [slots.default?.()])]
-    })]));
+    }, [slots.default?.()]));
     return {
       getLayoutItem,
       items
@@ -23660,8 +23726,7 @@ const VLayoutItem = genericComponent()({
       slots
     } = _ref;
     const {
-      layoutItemStyles,
-      layoutIsReady
+      layoutItemStyles
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -23671,11 +23736,10 @@ const VLayoutItem = genericComponent()({
       active: toRef(props, 'modelValue'),
       absolute: toRef(props, 'absolute')
     });
-    useRender(() => createVNode("div", {
+    return () => createVNode("div", {
       "class": ['v-layout-item', props.class],
       "style": [layoutItemStyles.value, props.style]
-    }, [slots.default?.()]));
-    return layoutIsReady;
+    }, [slots.default?.()]);
   }
 });
 
@@ -23786,8 +23850,7 @@ const VMain = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     const {
-      mainStyles,
-      layoutIsReady
+      mainStyles
     } = useLayout();
     const {
       ssrBootStyles
@@ -23802,7 +23865,7 @@ const VMain = genericComponent()({
         "class": "v-main__scroller"
       }, [slots.default?.()]) : slots.default?.()]
     }));
-    return layoutIsReady;
+    return {};
   }
 });
 
@@ -24272,8 +24335,7 @@ const VNavigationDrawer = genericComponent()({
     const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
     const {
       layoutItemStyles,
-      layoutItemScrimStyles,
-      layoutIsReady
+      layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
@@ -24369,9 +24431,9 @@ const VNavigationDrawer = genericComponent()({
         }, scopeId), null)]
       })]);
     });
-    return layoutIsReady.then(() => ({
+    return {
       isStuck
-    }));
+    };
   }
 });
 
@@ -26060,7 +26122,7 @@ const VSpeedDial = genericComponent()({
     const model = useProxiedModel(props, 'modelValue');
     const menuRef = ref();
     const location = computed(() => {
-      const [y, x = 'center'] = props.location.split(' ');
+      const [y, x = 'center'] = props.location?.split(' ') ?? [];
       return `${y} ${x}`;
     });
     const locationClasses = computed(() => ({
@@ -28146,7 +28208,7 @@ function createVuetify$1() {
     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
@@ -28171,7 +28233,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.15";
+const version = "3.7.0";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };