vuetify 3.6.3 → 3.6.5

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.6.3
+* Vuetify v3.6.5
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, Suspense, TransitionGroup, Transition, mergeProps, 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, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, Suspense, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -70,7 +70,7 @@ function propsFactory(props, source) {
 
 // Composables
 const makeComponentProps = propsFactory({
-  class: [String, Array],
+  class: [String, Array, Object],
   style: {
     type: [String, Array, Object],
     default: null
@@ -557,6 +557,22 @@ function isClickInsideElement(event, targetDiv) {
   const divBottom = divRect.bottom;
   return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
 }
+function templateRef() {
+  const el = shallowRef();
+  const fn = target => {
+    el.value = target;
+  };
+  Object.defineProperty(fn, 'value', {
+    enumerable: true,
+    get: () => el.value,
+    set: val => el.value = val
+  });
+  Object.defineProperty(fn, 'el', {
+    enumerable: true,
+    get: () => refElement(el.value)
+  });
+  return fn;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -1565,7 +1581,7 @@ function useRender(render) {
 
 function useResizeObserver(callback) {
   let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
-  const resizeRef = ref();
+  const resizeRef = templateRef();
   const contentRect = ref();
   if (IN_BROWSER) {
     const observer = new ResizeObserver(entries => {
@@ -1580,12 +1596,12 @@ function useResizeObserver(callback) {
     onBeforeUnmount(() => {
       observer.disconnect();
     });
-    watch(resizeRef, (newValue, oldValue) => {
+    watch(() => resizeRef.el, (newValue, oldValue) => {
       if (oldValue) {
-        observer.unobserve(refElement(oldValue));
+        observer.unobserve(oldValue);
         contentRect.value = undefined;
       }
-      if (newValue) observer.observe(refElement(newValue));
+      if (newValue) observer.observe(newValue);
     }, {
       flush: 'post'
     });
@@ -3001,7 +3017,7 @@ function useAspectStyles(props) {
 }
 const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
-  contentClass: String,
+  contentClass: null,
   inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
@@ -4117,6 +4133,12 @@ function useGroupItem(props, injectKey) {
   const isSelected = computed(() => {
     return group.isSelected(id);
   });
+  const isFirst = computed(() => {
+    return group.items.value[0].id === id;
+  });
+  const isLast = computed(() => {
+    return group.items.value[group.items.value.length - 1].id === id;
+  });
   const selectedClass = computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
   watch(isSelected, value => {
     vm.emit('group:selected', {
@@ -4128,6 +4150,8 @@ function useGroupItem(props, injectKey) {
   return {
     id,
     isSelected,
+    isFirst,
+    isLast,
     toggle: () => group.select(id, !isSelected.value),
     select: value => group.select(id, value),
     selectedClass,
@@ -7089,7 +7113,7 @@ function createDisplay(options, ssr) {
 const makeDisplayProps = propsFactory({
   mobile: {
     type: Boolean,
-    default: null
+    default: false
   },
   mobileBreakpoint: [Number, String]
 }, 'display');
@@ -7384,7 +7408,7 @@ const VSlideGroup = genericComponent()({
     const goTo = useGoTo();
     const goToOptions = computed(() => {
       return {
-        container: containerRef.value,
+        container: containerRef.el,
         duration: 200,
         easing: 'easeOutQuart'
       };
@@ -7408,9 +7432,9 @@ const VSlideGroup = genericComponent()({
             contentSize.value = contentRect.value[sizeProperty];
             isOverflowing.value = containerSize.value + 1 < contentSize.value;
           }
-          if (firstSelectedIndex.value >= 0 && contentRef.value) {
+          if (firstSelectedIndex.value >= 0 && contentRef.el) {
             // TODO: Is this too naive? Should we store element references in group composable?
-            const selectedElement = contentRef.value.children[lastSelectedIndex.value];
+            const selectedElement = contentRef.el.children[lastSelectedIndex.value];
             scrollToChildren(selectedElement, props.centerActive);
           }
         });
@@ -7421,13 +7445,13 @@ const VSlideGroup = genericComponent()({
       let target = 0;
       if (center) {
         target = calculateCenteredTarget({
-          containerElement: containerRef.value,
+          containerElement: containerRef.el,
           isHorizontal: isHorizontal.value,
           selectedElement: children
         });
       } else {
         target = calculateUpdatedTarget({
-          containerElement: containerRef.value,
+          containerElement: containerRef.el,
           isHorizontal: isHorizontal.value,
           isRtl: isRtl.value,
           selectedElement: children
@@ -7436,18 +7460,18 @@ const VSlideGroup = genericComponent()({
       scrollToPosition(target);
     }
     function scrollToPosition(newPosition) {
-      if (!IN_BROWSER || !containerRef.value) return;
-      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.value);
-      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.value);
-      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+      if (!IN_BROWSER || !containerRef.el) return;
+      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.el);
+      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.el);
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
       if (scrollSize <= offsetSize ||
       // Prevent scrolling by only a couple of pixels, which doesn't look smooth
       Math.abs(newPosition - scrollPosition) < 16) return;
-      if (isHorizontal.value && isRtl.value && containerRef.value) {
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
         const {
           scrollWidth,
           offsetWidth: containerWidth
-        } = containerRef.value;
+        } = containerRef.el;
         newPosition = scrollWidth - containerWidth - newPosition;
       }
       if (isHorizontal.value) {
@@ -7465,12 +7489,12 @@ const VSlideGroup = genericComponent()({
     }
     function onFocusin(e) {
       isFocused.value = true;
-      if (!isOverflowing.value || !contentRef.value) return;
+      if (!isOverflowing.value || !contentRef.el) return;
 
       // Focused element is likely to be the root of an item, so a
       // breadth-first search will probably find it in the first iteration
       for (const el of e.composedPath()) {
-        for (const item of contentRef.value.children) {
+        for (const item of contentRef.el.children) {
           if (item === el) {
             scrollToChildren(item);
             return;
@@ -7485,14 +7509,14 @@ const VSlideGroup = genericComponent()({
     // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
     let ignoreFocusEvent = false;
     function onFocus(e) {
-      if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+      if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.el?.contains(e.relatedTarget))) focus();
       ignoreFocusEvent = false;
     }
     function onFocusAffixes() {
       ignoreFocusEvent = true;
     }
     function onKeydown(e) {
-      if (!contentRef.value) return;
+      if (!contentRef.el) return;
       function toFocus(location) {
         e.preventDefault();
         focus(location);
@@ -7517,21 +7541,21 @@ const VSlideGroup = genericComponent()({
       }
     }
     function focus(location) {
-      if (!contentRef.value) return;
+      if (!contentRef.el) return;
       let el;
       if (!location) {
-        const focusable = focusableChildren(contentRef.value);
+        const focusable = focusableChildren(contentRef.el);
         el = focusable[0];
       } else if (location === 'next') {
-        el = contentRef.value.querySelector(':focus')?.nextElementSibling;
+        el = contentRef.el.querySelector(':focus')?.nextElementSibling;
         if (!el) return focus('first');
       } else if (location === 'prev') {
-        el = contentRef.value.querySelector(':focus')?.previousElementSibling;
+        el = contentRef.el.querySelector(':focus')?.previousElementSibling;
         if (!el) return focus('last');
       } else if (location === 'first') {
-        el = contentRef.value.firstElementChild;
+        el = contentRef.el.firstElementChild;
       } else if (location === 'last') {
-        el = contentRef.value.lastElementChild;
+        el = contentRef.el.lastElementChild;
       }
       if (el) {
         el.focus({
@@ -7545,11 +7569,11 @@ const VSlideGroup = genericComponent()({
       let newPosition = scrollOffset.value + offsetStep;
 
       // TODO: improve it
-      if (isHorizontal.value && isRtl.value && containerRef.value) {
+      if (isHorizontal.value && isRtl.value && containerRef.el) {
         const {
           scrollWidth,
           offsetWidth: containerWidth
-        } = containerRef.value;
+        } = containerRef.el;
         newPosition += scrollWidth - containerWidth;
       }
       scrollToPosition(newPosition);
@@ -7592,8 +7616,8 @@ const VSlideGroup = genericComponent()({
     });
     const hasNext = computed(() => {
       if (!containerRef.value) return false;
-      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
-      const clientSize = getClientSize(isHorizontal.value, containerRef.value);
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
+      const clientSize = getClientSize(isHorizontal.value, containerRef.el);
       const scrollSizeMax = scrollSize - clientSize;
 
       // 1 pixel in reserve, may be lost after rounding
@@ -8017,14 +8041,16 @@ const independentActiveStrategy = mandatory => {
     },
     in: (v, children, parents) => {
       let set = new Set();
-      for (const id of v || []) {
-        set = strategy.activate({
-          id,
-          value: true,
-          activated: new Set(set),
-          children,
-          parents
-        });
+      if (v != null) {
+        for (const id of wrapInArray(v)) {
+          set = strategy.activate({
+            id,
+            value: true,
+            activated: new Set(set),
+            children,
+            parents
+          });
+        }
       }
       return set;
     },
@@ -8053,8 +8079,11 @@ const independentSingleActiveStrategy = mandatory => {
     },
     in: (v, children, parents) => {
       let set = new Set();
-      if (v?.length) {
-        set = parentStrategy.in(v.slice(0, 1), children, parents);
+      if (v != null) {
+        const arr = wrapInArray(v);
+        if (arr.length) {
+          set = parentStrategy.in(arr.slice(0, 1), children, parents);
+        }
       }
       return set;
     },
@@ -8398,12 +8427,12 @@ const emptyNested = {
 const makeNestedProps = propsFactory({
   activatable: Boolean,
   selectable: Boolean,
-  activeStrategy: [String, Function],
-  selectStrategy: [String, Function],
+  activeStrategy: [String, Function, Object],
+  selectStrategy: [String, Function, Object],
   openStrategy: [String, Object],
-  opened: Array,
-  activated: Array,
-  selected: Array,
+  opened: null,
+  activated: null,
+  selected: null,
   mandatory: Boolean
 }, 'nested');
 const useNested = props => {
@@ -8413,6 +8442,7 @@ const useNested = props => {
   const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(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);
     switch (props.activeStrategy) {
       case 'leaf':
         return leafActiveStrategy(props.mandatory);
@@ -8427,6 +8457,7 @@ const useNested = props => {
   });
   const selectStrategy = computed(() => {
     if (typeof props.selectStrategy === 'object') return props.selectStrategy;
+    if (typeof props.selectStrategy === 'function') return props.selectStrategy(props.mandatory);
     switch (props.selectStrategy) {
       case 'single-leaf':
         return leafSingleSelectStrategy(props.mandatory);
@@ -8755,7 +8786,7 @@ const makeVListItemProps = propsFactory({
   appendIcon: IconValue,
   baseColor: String,
   disabled: Boolean,
-  lines: String,
+  lines: [Boolean, String],
   link: {
     type: Boolean,
     default: undefined
@@ -8866,8 +8897,9 @@ const VListItem = genericComponent()({
     }));
     function onClick(e) {
       emit('click', e);
-      if (isGroupActivator || !isClickable.value) return;
+      if (!isClickable.value) return;
       link.navigate?.(e);
+      if (isGroupActivator) return;
       if (root.activatable.value) {
         activate(!isActivated.value, e);
       } else if (root.selectable.value) {
@@ -10326,17 +10358,17 @@ function useActivator(props, _ref) {
   }, {
     flush: 'post'
   });
-  const activatorRef = ref();
+  const activatorRef = templateRef();
   watchEffect(() => {
     if (!activatorRef.value) return;
     nextTick(() => {
-      activatorEl.value = refElement(activatorRef.value);
+      activatorEl.value = activatorRef.el;
     });
   });
-  const targetRef = ref();
+  const targetRef = templateRef();
   const target = computed(() => {
     if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
-    if (targetRef.value) return refElement(targetRef.value);
+    if (targetRef.value) return targetRef.el;
     return getTarget(props.target, vm) || activatorEl.value;
   });
   const targetEl = computed(() => {
@@ -10681,10 +10713,7 @@ const makeVOverlayProps = propsFactory({
   disabled: Boolean,
   opacity: [Number, String],
   noClickAnimation: Boolean,
-  modelValue: {
-    type: Boolean,
-    default: null
-  },
+  modelValue: Boolean,
   persistent: Boolean,
   scrim: {
     type: [Boolean, String],
@@ -10727,7 +10756,7 @@ const VOverlay = genericComponent()({
     } = _ref;
     const model = useProxiedModel(props, 'modelValue');
     const isActive = computed({
-      get: () => Boolean(model.value),
+      get: () => model.value,
       set: v => {
         if (!(v && props.disabled)) model.value = v;
       }
@@ -12964,7 +12993,7 @@ const VAutocomplete = genericComponent()({
           select(displayItems.value[0]);
         }
         menu.value = false;
-        search.value = '';
+        if (props.multiple || hasSelectionSlot.value) search.value = '';
         selectionIndex.value = -1;
       }
     });
@@ -14808,7 +14837,7 @@ const VColorPickerCanvas = defineComponent({
     const {
       resizeRef
     } = useResizeObserver(entries => {
-      if (!resizeRef.value?.offsetParent) return;
+      if (!resizeRef.el?.offsetParent) return;
       const {
         width,
         height
@@ -18431,6 +18460,7 @@ function provideSelection(props, _ref9) {
     });
     return !!items.length && isSelected(items);
   });
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
   const data = {
     toggleSelect,
     select,
@@ -18439,7 +18469,7 @@ function provideSelection(props, _ref9) {
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll
+    showSelectAll
   };
   provide(VDataTableSelectionSymbol, data);
   return data;
@@ -19710,7 +19740,7 @@ const VDataTableHeaders = genericComponent()({
           };
           if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
           if (column.key === 'data-table-select') {
-            return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && createVNode(VCheckboxBtn, {
+            return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && createVNode(VCheckboxBtn, {
               "modelValue": allSelected.value,
               "indeterminate": someSelected.value && !allSelected.value,
               "onUpdate:modelValue": selectAll
@@ -20229,6 +20259,8 @@ function useDataTableItems(props, columns) {
 
 const makeDataTableProps = propsFactory({
   ...makeVDataTableRowsProps(),
+  hideDefaultFooter: Boolean,
+  hideDefaultHeader: Boolean,
   width: [String, Number],
   search: String,
   ...makeDataTableExpandProps(),
@@ -20411,10 +20443,12 @@ const VDataTable = genericComponent()({
         "style": props.style
       }, tableProps), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), createVNode("thead", null, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
+        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+          "key": "thead"
+        }, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": paginatedItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -20582,7 +20616,9 @@ const VDataTableVirtual = genericComponent()({
           "style": {
             height: convertToUnit(props.height)
           }
-        }, [createVNode("table", null, [slots.colgroup?.(slotProps.value), createVNode("thead", null, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
+        }, [createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+          "key": "thead"
+        }, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
           "sticky": props.fixedHeader
         }), slots)]), createVNode("tbody", null, [createVNode("tr", {
           "ref": markerRef,
@@ -20787,7 +20823,8 @@ const VDataTableServer = genericComponent()({
         "style": props.style
       }, tableProps), {
         top: () => slots.top?.(slotProps.value),
-        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), createVNode("thead", {
+        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && createVNode("thead", {
+          "key": "thead",
           "class": "v-data-table__thead",
           "role": "rowgroup"
         }, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
@@ -20798,7 +20835,7 @@ const VDataTableServer = genericComponent()({
         }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(attrs, dataTableRowsProps, {
           "items": flatItems.value
         }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
-        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && createVNode(Fragment, null, [createVNode(VDivider, null, null), createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
         })])
       });
@@ -21679,10 +21716,10 @@ const VDatePickerYears = genericComponent()({
     watchEffect(() => {
       model.value = model.value ?? adapter.getYear(adapter.date());
     });
-    const yearRef = ref();
+    const yearRef = templateRef();
     onMounted(async () => {
       await nextTick();
-      yearRef.value?.$el.scrollIntoView({
+      yearRef.el?.scrollIntoView({
         block: 'center'
       });
     });
@@ -22342,7 +22379,9 @@ const VExpansionPanel = genericComponent()({
         }), slots.default?.()]
       });
     });
-    return {};
+    return {
+      groupItem
+    };
   }
 });
 
@@ -22371,7 +22410,10 @@ const VExpansionPanels = genericComponent()({
     let {
       slots
     } = _ref;
-    useGroup(props, VExpansionPanelSymbol);
+    const {
+      next,
+      prev
+    } = useGroup(props, VExpansionPanelSymbol);
     const {
       themeClasses
     } = provideTheme(props);
@@ -22398,8 +22440,16 @@ const VExpansionPanels = genericComponent()({
         'v-expansion-panels--tile': props.tile
       }, themeClasses.value, variantClass.value, props.class],
       "style": props.style
-    }, slots));
-    return {};
+    }, {
+      default: () => [slots.default?.({
+        prev,
+        next
+      })]
+    }));
+    return {
+      next,
+      prev
+    };
   }
 });
 
@@ -22559,7 +22609,7 @@ const VFileInput = genericComponent()({
     const {
       t
     } = useLocale();
-    const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
+    const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0] ?? null);
     const {
       isFocused,
       focus,
@@ -22663,7 +22713,7 @@ const VFileInput = genericComponent()({
           }, fieldProps, {
             "id": id.value,
             "active": isActive.value || isDirty.value,
-            "dirty": isDirty.value,
+            "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
@@ -23008,7 +23058,7 @@ const VInfiniteScroll = genericComponent()({
     function intersecting(side) {
       if (props.mode !== 'manual' && !isIntersecting.value) return;
       const status = getStatus(side);
-      if (!rootEl.value || status === 'loading') return;
+      if (!rootEl.value || ['empty', 'loading'].includes(status)) return;
       previousScrollSize = getScrollSize();
       setStatus(side, 'loading');
       function done(status) {
@@ -23754,7 +23804,9 @@ const makeVNavigationDrawerProps = propsFactory({
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDelayProps(),
-  ...makeDisplayProps(),
+  ...makeDisplayProps({
+    mobile: null
+  }),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
@@ -25760,7 +25812,7 @@ const VStepperHeader = createSimpleFunctional('v-stepper-header');
 
 // Types
 
-const makeVStepperItemProps = propsFactory({
+const makeStepperItemProps = propsFactory({
   color: String,
   title: String,
   subtitle: String,
@@ -25787,7 +25839,10 @@ const makeVStepperItemProps = propsFactory({
   rules: {
     type: Array,
     default: () => []
-  },
+  }
+}, 'StepperItem');
+const makeVStepperItemProps = propsFactory({
+  ...makeStepperItemProps(),
   ...makeGroupItemProps()
 }, 'VStepperItem');
 const VStepperItem = genericComponent()({
@@ -25806,13 +25861,14 @@ const VStepperItem = genericComponent()({
     const group = useGroupItem(props, VStepperSymbol, true);
     const step = computed(() => group?.value.value ?? props.value);
     const isValid = computed(() => props.rules.every(handler => handler() === true));
+    const isClickable = computed(() => !props.disabled && props.editable);
     const canEdit = computed(() => !props.disabled && props.editable);
     const hasError = computed(() => props.error || !isValid.value);
     const hasCompleted = computed(() => props.complete || props.rules.length > 0 && isValid.value);
     const icon = computed(() => {
       if (hasError.value) return props.errorIcon;
       if (hasCompleted.value) return props.completeIcon;
-      if (props.editable) return props.editIcon;
+      if (group.isSelected.value && props.editable) return props.editIcon;
       return props.icon;
     });
     const slotProps = computed(() => ({
@@ -25839,7 +25895,7 @@ const VStepperItem = genericComponent()({
         }, group?.selectedClass.value],
         "disabled": !props.editable,
         "onClick": onClick
-      }, [createVNode(VAvatar, {
+      }, [isClickable.value && genOverlays(true, 'v-stepper-item'), createVNode(VAvatar, {
         "key": "stepper-avatar",
         "class": "v-stepper-item__avatar",
         "color": hasColor ? props.color : undefined,
@@ -25901,7 +25957,8 @@ const VStepperWindow = genericComponent()({
       }, windowProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "class": "v-stepper-window",
+        "class": ['v-stepper-window', props.class],
+        "style": props.style,
         "mandatory": false,
         "touch": false
       }), slots);
@@ -25925,7 +25982,8 @@ const VStepperWindowItem = genericComponent()({
       return createVNode(VWindowItem, mergeProps({
         "_as": "VStepperWindowItem"
       }, windowItemProps, {
-        "class": "v-stepper-window-item"
+        "class": ['v-stepper-window-item', props.class],
+        "style": props.style
       }), slots);
     });
     return {};
@@ -25935,7 +25993,7 @@ const VStepperWindowItem = genericComponent()({
 // Types
 
 const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-const makeVStepperProps = propsFactory({
+const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
   editable: Boolean,
@@ -25954,7 +26012,10 @@ const makeVStepperProps = propsFactory({
   },
   mobile: Boolean,
   nonLinear: Boolean,
-  flat: Boolean,
+  flat: Boolean
+}, 'Stepper');
+const makeVStepperProps = propsFactory({
+  ...makeStepperProps(),
   ...makeGroupProps({
     mandatory: 'force',
     selectedClass: 'v-stepper-item--selected'
@@ -26033,12 +26094,18 @@ const VStepper = genericComponent()({
         default: () => [hasHeader && createVNode(VStepperHeader, {
           "key": "stepper-header"
         }, {
-          default: () => [items.value.map((item, index) => createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
-            default: slots[`header-item.${item.value}`] ?? slots.header,
-            icon: slots.icon,
-            title: slots.title,
-            subtitle: slots.subtitle
-          })]))]
+          default: () => [items.value.map((_ref2, index) => {
+            let {
+              raw,
+              ...item
+            } = _ref2;
+            return createVNode(Fragment, null, [!!index && createVNode(VDivider, null, null), createVNode(VStepperItem, item, {
+              default: slots[`header-item.${item.value}`] ?? slots.header,
+              icon: slots.icon,
+              title: slots.title,
+              subtitle: slots.subtitle
+            })]);
+          })]
         }), hasWindow && createVNode(VStepperWindow, {
           "key": "stepper-window"
         }, {
@@ -26424,7 +26491,8 @@ const VTabsWindow = genericComponent()({
       }, windowProps, {
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
-        "class": "v-tabs-window",
+        "class": ['v-tabs-window', props.class],
+        "style": props.style,
         "mandatory": false,
         "touch": false
       }), slots);
@@ -26501,6 +26569,7 @@ const VTabs = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      attrs,
       slots
     } = _ref;
     const model = useProxiedModel(props, 'modelValue');
@@ -26512,6 +26581,9 @@ const VTabs = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      scopeId
+    } = useScopeId();
     provideDefaults({
       VTab: {
         color: toRef(props, 'color'),
@@ -26538,7 +26610,7 @@ const VTabs = genericComponent()({
         }, backgroundColorStyles.value, props.style],
         "role": "tablist",
         "symbol": VTabsSymbol
-      }), {
+      }, scopeId, attrs), {
         default: () => [slots.default?.() ?? items.value.map(item => slots.tab?.({
           item
         }) ?? createVNode(VTab, mergeProps(item, {
@@ -26549,11 +26621,11 @@ const VTabs = genericComponent()({
             item
           })
         }))]
-      }), hasWindow && createVNode(VTabsWindow, {
+      }), hasWindow && createVNode(VTabsWindow, mergeProps({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "key": "tabs-window"
-      }, {
+      }, scopeId), {
         default: () => [items.value.map(item => slots.item?.({
           item
         }) ?? createVNode(VTabsWindowItem, {
@@ -27838,19 +27910,13 @@ const makeVNumberInputProps = propsFactory({
     type: Number,
     default: 1
   },
-  ...only(makeVInputProps(), ['density', 'disabled', 'focused', 'hideDetails', 'hint', 'label', 'persistentHint', 'readonly']),
-  ...only(makeVFieldProps(), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'reverse', 'rounded', 'style', 'theme', 'variant']),
-  ...makeFocusProps()
+  ...omit(makeVTextFieldProps(), ['appendInnerIcon', 'prependInnerIcon'])
 }, 'VNumberInput');
 const VNumberInput = genericComponent()({
   name: 'VNumberInput',
   inheritAttrs: false,
   props: {
-    ...makeVNumberInputProps(),
-    modelValue: {
-      type: Number,
-      default: undefined
-    }
+    ...makeVNumberInputProps()
   },
   emits: {
     'update:modelValue': val => true
@@ -27862,12 +27928,6 @@ const VNumberInput = genericComponent()({
       slots
     } = _ref;
     const model = useProxiedModel(props, 'modelValue');
-    const {
-      isFocused,
-      focus,
-      blur
-    } = useFocus(props);
-    const inputRef = ref();
     const stepDecimals = computed(() => getDecimals(props.step));
     const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0);
     const canIncrease = computed(() => {
@@ -27883,9 +27943,6 @@ const VNumberInput = genericComponent()({
         model.value = clamp(model.value, props.min, props.max);
       }
     });
-    function onFocus() {
-      if (!isFocused.value) focus();
-    }
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant;
     });
@@ -27915,7 +27972,7 @@ const VNumberInput = genericComponent()({
       toggleUpDown(false);
     }
     function onKeydown(e) {
-      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) || e.ctrlKey) return;
+      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Tab'].includes(e.key) || e.ctrlKey) return;
       if (['ArrowDown'].includes(e.key)) {
         e.preventDefault();
         toggleUpDown(false);
@@ -27932,17 +27989,14 @@ const VNumberInput = genericComponent()({
         e.preventDefault();
       }
     }
-    function onInput(e) {
-      const el = e.target;
-      model.value = el.value ? +el.value : undefined;
+    function onModelUpdate(v) {
+      model.value = v ? +v : undefined;
     }
     useRender(() => {
-      const fieldProps = filterFieldProps(props);
-      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
       const {
         modelValue: _,
-        ...inputProps
-      } = VInput.filterProps(props);
+        ...textFieldProps
+      } = VTextField.filterProps(props);
       function controlNode() {
         const defaultHeight = controlVariant.value === 'stacked' ? 'auto' : '100%';
         return createVNode("div", {
@@ -27955,6 +28009,7 @@ const VNumberInput = genericComponent()({
           "name": "decrement-btn",
           "icon": "$expand",
           "size": "small",
+          "tabindex": "-1",
           "onClick": onClickDown
         }, null) : createVNode(VDefaultsProvider, {
           "key": "decrement-defaults",
@@ -27979,7 +28034,8 @@ const VNumberInput = genericComponent()({
           "name": "increment-btn",
           "icon": "$collapse",
           "onClick": onClickUp,
-          "size": "small"
+          "size": "small",
+          "tabindex": "-1"
         }, null) : createVNode(VDefaultsProvider, {
           "key": "increment-defaults",
           "defaults": {
@@ -28000,7 +28056,36 @@ const VNumberInput = genericComponent()({
           "vertical": true
         }, null) : undefined;
       }
-      return createVNode(VInput, mergeProps({
+      const appendInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+        "class": "v-number-input__control"
+      }, [createVNode(VDivider, {
+        "vertical": true
+      }, null), createVNode(VBtn, {
+        "flat": true,
+        "height": "100%",
+        "icon": "$plus",
+        "tile": true,
+        "tabindex": "-1",
+        "onClick": onClickUp
+      }, null)]) : !props.reverse ? createVNode(Fragment, null, [dividerNode(), controlNode()]) : undefined;
+      const hasAppendInner = slots['append-inner'] || appendInnerControl;
+      const prependInnerControl = controlVariant.value === 'split' ? createVNode("div", {
+        "class": "v-number-input__control"
+      }, [createVNode(VBtn, {
+        "flat": true,
+        "height": "100%",
+        "icon": "$minus",
+        "tile": true,
+        "tabindex": "-1",
+        "onClick": onClickDown
+      }, null), createVNode(VDivider, {
+        "vertical": true
+      }, null)]) : props.reverse ? createVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined;
+      const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
+      return createVNode(VTextField, mergeProps({
+        "modelValue": model.value,
+        "onUpdate:modelValue": onModelUpdate,
+        "onKeydown": onKeydown,
         "class": ['v-number-input', {
           'v-number-input--default': controlVariant.value === 'default',
           'v-number-input--hide-input': props.hideInput,
@@ -28009,59 +28094,281 @@ const VNumberInput = genericComponent()({
           'v-number-input--split': controlVariant.value === 'split',
           'v-number-input--stacked': controlVariant.value === 'stacked'
         }, props.class]
-      }, rootAttrs, inputProps, {
-        "focused": isFocused.value,
+      }, textFieldProps, {
         "style": props.style
       }), {
         ...slots,
-        default: () => createVNode(VField, mergeProps(fieldProps, {
-          "active": true,
-          "focused": isFocused.value
-        }), {
-          ...slots,
-          default: _ref2 => {
+        'append-inner': hasAppendInner ? function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(Fragment, null, [slots['append-inner']?.(...args), appendInnerControl]);
+        } : undefined,
+        'prepend-inner': hasPrependInner ? function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return createVNode(Fragment, null, [prependInnerControl, slots['prepend-inner']?.(...args)]);
+        } : undefined
+      });
+    });
+  }
+});
+
+// Types
+
+const makeVStepperVerticalActionsProps = propsFactory({
+  ...makeVStepperActionsProps()
+}, 'VStepperActions');
+const VStepperVerticalActions = genericComponent()({
+  name: 'VStepperVerticalActions',
+  props: makeVStepperVerticalActionsProps(),
+  emits: {
+    'click:prev': () => true,
+    'click:next': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    function onClickPrev() {
+      emit('click:prev');
+    }
+    function onClickNext() {
+      emit('click:next');
+    }
+    useRender(() => {
+      const stepperActionsProps = VStepperActions.filterProps(props);
+      return createVNode(VStepperActions, mergeProps({
+        "class": "v-stepper-vertical-actions"
+      }, stepperActionsProps, {
+        "onClick:prev": onClickPrev,
+        "onClick:next": onClickNext
+      }), slots);
+    });
+    return {};
+  }
+});
+
+// Types
+
+const makeVStepperVerticalItemProps = propsFactory({
+  hideActions: Boolean,
+  ...makeStepperItemProps(),
+  ...omit(makeVExpansionPanelProps({
+    expandIcon: '',
+    collapseIcon: ''
+  }), ['hideActions'])
+}, 'VStepperVerticalItem');
+const VStepperVerticalItem = genericComponent()({
+  name: 'VStepperVerticalItem',
+  props: makeVStepperVerticalItemProps(),
+  emits: {
+    'click:next': () => true,
+    'click:prev': () => true,
+    'click:finish': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const vExpansionPanelRef = ref();
+    const step = computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value);
+    const groupItem = computed(() => vExpansionPanelRef.value?.groupItem);
+    const isSelected = computed(() => groupItem.value?.isSelected.value ?? false);
+    const isValid = computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null);
+    const canEdit = computed(() => !props.disabled && props.editable);
+    const hasError = computed(() => props.error || isSelected.value && !isValid.value);
+    const hasCompleted = computed(() => props.complete || props.rules.length > 0 && isValid.value === true);
+    const disabled = computed(() => {
+      if (props.disabled) return props.disabled;
+      if (groupItem.value?.isFirst.value) return 'prev';
+      return false;
+    });
+    const icon = computed(() => {
+      if (hasError.value) return props.errorIcon;
+      if (hasCompleted.value) return props.completeIcon;
+      if (groupItem.value?.isSelected.value && props.editable) return props.editIcon;
+      return props.icon;
+    });
+    const slotProps = computed(() => ({
+      canEdit: canEdit.value,
+      hasError: hasError.value,
+      hasCompleted: hasCompleted.value,
+      title: props.title,
+      subtitle: props.subtitle,
+      step: step.value,
+      value: props.value
+    }));
+    const actionProps = computed(() => ({
+      ...slotProps.value,
+      prev: onClickPrev,
+      next: onClickNext
+    }));
+    function onClickNext() {
+      emit('click:next');
+      if (groupItem.value?.isLast.value) return;
+      groupItem.value.group.next();
+    }
+    function onClickPrev() {
+      emit('click:prev');
+      groupItem.value.group.prev();
+    }
+    useRender(() => {
+      const hasColor = (hasCompleted.value || groupItem.value?.isSelected.value) && !hasError.value && !props.disabled;
+      const hasActions = !props.hideActions || !!slots.actions;
+      const expansionPanelProps = VExpansionPanel.filterProps(props);
+      return createVNode(VExpansionPanel, mergeProps({
+        "_as": "VStepperVerticalItem",
+        "ref": vExpansionPanelRef
+      }, expansionPanelProps, {
+        "class": ['v-stepper-vertical-item', {
+          'v-stepper-vertical-item--complete': hasCompleted.value,
+          'v-stepper-vertical-item--disabled': props.disabled,
+          'v-stepper-vertical-item--editable': canEdit.value,
+          'v-stepper-vertical-item--error': hasError.value
+        }, props.class],
+        "readonly": !props.editable,
+        "style": props.style,
+        "color": "",
+        "hide-actions": false,
+        "value": step.value
+      }), {
+        title: () => createVNode(Fragment, null, [createVNode(VAvatar, {
+          "key": "stepper-avatar",
+          "class": "v-stepper-vertical-item__avatar",
+          "color": hasColor ? props.color : undefined,
+          "size": 24,
+          "start": true
+        }, {
+          default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? createVNode(VIcon, {
+            "icon": icon.value
+          }, null) : step.value)]
+        }), createVNode("div", null, [createVNode("div", {
+          "class": "v-stepper-vertical-item__title"
+        }, [slots.title?.(slotProps.value) ?? props.title]), createVNode("div", {
+          "class": "v-stepper-vertical-item__subtitle"
+        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle])])]),
+        text: () => createVNode(Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VStepperVerticalActions: {
+              disabled: disabled.value,
+              finish: groupItem.value?.isLast.value
+            }
+          }
+        }, {
+          default: () => [slots.actions?.(actionProps.value) ?? createVNode(VStepperVerticalActions, {
+            "onClick:next": onClickNext,
+            "onClick:prev": onClickPrev
+          }, {
+            prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,
+            next: slots.next ? () => slots.next?.(actionProps.value) : undefined
+          })]
+        })])
+      });
+    });
+    return {};
+  }
+});
+
+// Types
+
+const makeVStepperVerticalProps = propsFactory({
+  prevText: {
+    type: String,
+    default: '$vuetify.stepper.prev'
+  },
+  nextText: {
+    type: String,
+    default: '$vuetify.stepper.next'
+  },
+  ...makeStepperProps(),
+  ...omit(makeVExpansionPanelsProps({
+    mandatory: 'force',
+    variant: 'accordion'
+  }), ['static'])
+}, 'VStepperVertical');
+const VStepperVertical = genericComponent()({
+  name: 'VStepperVertical',
+  props: makeVStepperVerticalProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const vExpansionPanelsRef = ref();
+    const {
+      color,
+      editable,
+      prevText,
+      nextText,
+      hideActions
+    } = toRefs(props);
+    const model = useProxiedModel(props, 'modelValue');
+    const items = computed(() => props.items.map((item, index) => {
+      const title = getPropertyFromItem(item, props.itemTitle, item);
+      const value = getPropertyFromItem(item, props.itemValue, index + 1);
+      return {
+        title,
+        value,
+        raw: item
+      };
+    }));
+    provideDefaults({
+      VStepperVerticalItem: {
+        color,
+        editable,
+        prevText,
+        nextText,
+        hideActions,
+        static: true
+      },
+      VStepperActions: {
+        color
+      }
+    });
+    useRender(() => {
+      const expansionPanelProps = VExpansionPanels.filterProps(props);
+      return createVNode(VExpansionPanels, mergeProps(expansionPanelProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "ref": vExpansionPanelsRef,
+        "class": ['v-stepper', {
+          'v-stepper--alt-labels': props.altLabels,
+          'v-stepper--flat': props.flat,
+          'v-stepper--non-linear': props.nonLinear,
+          'v-stepper--mobile': props.mobile
+        }, props.class],
+        "style": props.style
+      }), {
+        ...slots,
+        default: _ref2 => {
+          let {
+            prev,
+            next
+          } = _ref2;
+          return createVNode(Fragment, null, [items.value.map(_ref3 => {
             let {
-              props: {
-                class: fieldClass,
-                ...slotProps
-              }
-            } = _ref2;
-            return createVNode("input", mergeProps({
-              "ref": inputRef,
-              "type": "text",
-              "value": model.value,
-              "onInput": onInput,
-              "onKeydown": onKeydown,
-              "class": fieldClass,
-              "onFocus": onFocus,
-              "onBlur": blur
-            }, inputAttrs), null);
-          },
-          'append-inner': controlVariant.value === 'split' ? () => createVNode("div", {
-            "class": "v-number-input__control"
-          }, [createVNode(VDivider, {
-            "vertical": true
-          }, null), createVNode(VBtn, {
-            "flat": true,
-            "height": "100%",
-            "icon": "$plus",
-            "tile": true,
-            "onClick": onClickUp
-          }, null)]) : !props.reverse ? () => createVNode(Fragment, null, [dividerNode(), controlNode()]) : undefined,
-          'prepend-inner': controlVariant.value === 'split' ? () => createVNode("div", {
-            "class": "v-number-input__control"
-          }, [createVNode(VBtn, {
-            "flat": true,
-            "height": "100%",
-            "icon": "$minus",
-            "tile": true,
-            "onClick": onClickDown
-          }, null), createVNode(VDivider, {
-            "vertical": true
-          }, null)]) : props.reverse ? () => createVNode(Fragment, null, [controlNode(), dividerNode()]) : undefined
-        })
+              raw,
+              ...item
+            } = _ref3;
+            return createVNode(VStepperVerticalItem, item, {
+              ...slots,
+              default: slots[`item.${item.value}`]
+            });
+          }), slots.default?.({
+            prev,
+            next,
+            step: model.value
+          })]);
+        }
       });
     });
+    return {};
   }
 });
 
@@ -29425,6 +29732,9 @@ var components = /*#__PURE__*/Object.freeze({
   VStepperActions: VStepperActions,
   VStepperHeader: VStepperHeader,
   VStepperItem: VStepperItem,
+  VStepperVertical: VStepperVertical,
+  VStepperVerticalActions: VStepperVerticalActions,
+  VStepperVerticalItem: VStepperVerticalItem,
   VStepperWindow: VStepperWindow,
   VStepperWindowItem: VStepperWindowItem,
   VSvgIcon: VSvgIcon,
@@ -29762,7 +30072,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.3";
+const version$1 = "3.6.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30015,7 +30325,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.3";
+const version = "3.6.5";
 
 /* eslint-disable local-rules/sort-imports */