vuetify 3.6.3 → 3.6.5

package/dist/vuetify.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, 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, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, 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';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -480,6 +480,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'];
@@ -1222,7 +1238,7 @@ function propsFactory(props, source) {
 
 // Composables
 const makeComponentProps = propsFactory({
-  class: [String, Array],
+  class: [String, Array, Object],
   style: {
     type: [String, Array, Object],
     default: null
@@ -2005,7 +2021,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 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 => {
@@ -2020,12 +2036,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'
     });
@@ -3441,7 +3457,7 @@ function useAspectStyles(props) {
 }
 const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
-  contentClass: String,
+  contentClass: null,
   inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
@@ -4557,6 +4573,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', {
@@ -4568,6 +4590,8 @@ function useGroupItem(props, injectKey) {
   return {
     id,
     isSelected,
+    isFirst,
+    isLast,
     toggle: () => group.select(id, !isSelected.value),
     select: value => group.select(id, value),
     selectedClass,
@@ -7322,7 +7346,7 @@ function createDisplay(options, ssr) {
 const makeDisplayProps = propsFactory({
   mobile: {
     type: Boolean,
-    default: null
+    default: false
   },
   mobileBreakpoint: [Number, String]
 }, 'display');
@@ -7617,7 +7641,7 @@ const VSlideGroup = genericComponent()({
     const goTo = useGoTo();
     const goToOptions = computed(() => {
       return {
-        container: containerRef.value,
+        container: containerRef.el,
         duration: 200,
         easing: 'easeOutQuart'
       };
@@ -7641,9 +7665,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);
           }
         });
@@ -7654,13 +7678,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
@@ -7669,18 +7693,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) {
@@ -7698,12 +7722,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;
@@ -7718,14 +7742,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);
@@ -7750,21 +7774,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({
@@ -7778,11 +7802,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);
@@ -7825,8 +7849,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
@@ -8250,14 +8274,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;
     },
@@ -8286,8 +8312,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;
     },
@@ -8631,12 +8660,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 => {
@@ -8646,6 +8675,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);
@@ -8660,6 +8690,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);
@@ -8988,7 +9019,7 @@ const makeVListItemProps = propsFactory({
   appendIcon: IconValue,
   baseColor: String,
   disabled: Boolean,
-  lines: String,
+  lines: [Boolean, String],
   link: {
     type: Boolean,
     default: undefined
@@ -9099,8 +9130,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) {
@@ -10559,17 +10591,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(() => {
@@ -10914,10 +10946,7 @@ const makeVOverlayProps = propsFactory({
   disabled: Boolean,
   opacity: [Number, String],
   noClickAnimation: Boolean,
-  modelValue: {
-    type: Boolean,
-    default: null
-  },
+  modelValue: Boolean,
   persistent: Boolean,
   scrim: {
     type: [Boolean, String],
@@ -10960,7 +10989,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;
       }
@@ -13197,7 +13226,7 @@ const VAutocomplete = genericComponent()({
           select(displayItems.value[0]);
         }
         menu.value = false;
-        search.value = '';
+        if (props.multiple || hasSelectionSlot.value) search.value = '';
         selectionIndex.value = -1;
       }
     });
@@ -15041,7 +15070,7 @@ const VColorPickerCanvas = defineComponent({
     const {
       resizeRef
     } = useResizeObserver(entries => {
-      if (!resizeRef.value?.offsetParent) return;
+      if (!resizeRef.el?.offsetParent) return;
       const {
         width,
         height
@@ -18664,6 +18693,7 @@ function provideSelection(props, _ref9) {
     });
     return !!items.length && isSelected(items);
   });
+  const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
   const data = {
     toggleSelect,
     select,
@@ -18672,7 +18702,7 @@ function provideSelection(props, _ref9) {
     isSomeSelected,
     someSelected,
     allSelected,
-    showSelectAll: selectStrategy.value.showSelectAll
+    showSelectAll
   };
   provide(VDataTableSelectionSymbol, data);
   return data;
@@ -19943,7 +19973,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
@@ -20462,6 +20492,8 @@ function useDataTableItems(props, columns) {
 
 const makeDataTableProps = propsFactory({
   ...makeVDataTableRowsProps(),
+  hideDefaultFooter: Boolean,
+  hideDefaultHeader: Boolean,
   width: [String, Number],
   search: String,
   ...makeDataTableExpandProps(),
@@ -20644,10 +20676,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']
         })])
       });
@@ -20815,7 +20849,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,
@@ -21020,7 +21056,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, {
@@ -21031,7 +21068,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']
         })])
       });
@@ -21912,10 +21949,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'
       });
     });
@@ -22575,7 +22612,9 @@ const VExpansionPanel = genericComponent()({
         }), slots.default?.()]
       });
     });
-    return {};
+    return {
+      groupItem
+    };
   }
 });
 
@@ -22604,7 +22643,10 @@ const VExpansionPanels = genericComponent()({
     let {
       slots
     } = _ref;
-    useGroup(props, VExpansionPanelSymbol);
+    const {
+      next,
+      prev
+    } = useGroup(props, VExpansionPanelSymbol);
     const {
       themeClasses
     } = provideTheme(props);
@@ -22631,8 +22673,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
+    };
   }
 });
 
@@ -22792,7 +22842,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,
@@ -22896,7 +22946,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
@@ -23241,7 +23291,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) {
@@ -23987,7 +24037,9 @@ const makeVNavigationDrawerProps = propsFactory({
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDelayProps(),
-  ...makeDisplayProps(),
+  ...makeDisplayProps({
+    mobile: null
+  }),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
@@ -25993,7 +26045,7 @@ const VStepperHeader = createSimpleFunctional('v-stepper-header');
 
 // Types
 
-const makeVStepperItemProps = propsFactory({
+const makeStepperItemProps = propsFactory({
   color: String,
   title: String,
   subtitle: String,
@@ -26020,7 +26072,10 @@ const makeVStepperItemProps = propsFactory({
   rules: {
     type: Array,
     default: () => []
-  },
+  }
+}, 'StepperItem');
+const makeVStepperItemProps = propsFactory({
+  ...makeStepperItemProps(),
   ...makeGroupItemProps()
 }, 'VStepperItem');
 const VStepperItem = genericComponent()({
@@ -26039,13 +26094,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(() => ({
@@ -26072,7 +26128,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,
@@ -26134,7 +26190,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);
@@ -26158,7 +26215,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 {};
@@ -26168,7 +26226,7 @@ const VStepperWindowItem = genericComponent()({
 // Types
 
 const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-const makeVStepperProps = propsFactory({
+const makeStepperProps = propsFactory({
   altLabels: Boolean,
   bgColor: String,
   editable: Boolean,
@@ -26187,7 +26245,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'
@@ -26266,12 +26327,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"
         }, {
@@ -26657,7 +26724,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);
@@ -26734,6 +26802,7 @@ const VTabs = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      attrs,
       slots
     } = _ref;
     const model = useProxiedModel(props, 'modelValue');
@@ -26745,6 +26814,9 @@ const VTabs = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      scopeId
+    } = useScopeId();
     provideDefaults({
       VTab: {
         color: toRef(props, 'color'),
@@ -26771,7 +26843,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, {
@@ -26782,11 +26854,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, {
@@ -27922,7 +27994,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
@@ -27947,7 +28019,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.3";
+const version = "3.6.5";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };