vuetify 3.6.3 → 3.6.5

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.3
+* Vuetify v3.6.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -74,7 +74,7 @@
 
   // Composables
   const makeComponentProps = propsFactory({
-    class: [String, Array],
+    class: [String, Array, Object],
     style: {
       type: [String, Array, Object],
       default: null
@@ -561,6 +561,22 @@
     const divBottom = divRect.bottom;
     return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
   }
+  function templateRef() {
+    const el = vue.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'];
@@ -1569,7 +1585,7 @@
 
   function useResizeObserver(callback) {
     let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
-    const resizeRef = vue.ref();
+    const resizeRef = templateRef();
     const contentRect = vue.ref();
     if (IN_BROWSER) {
       const observer = new ResizeObserver(entries => {
@@ -1584,12 +1600,12 @@
       vue.onBeforeUnmount(() => {
         observer.disconnect();
       });
-      vue.watch(resizeRef, (newValue, oldValue) => {
+      vue.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'
       });
@@ -3005,7 +3021,7 @@
   }
   const makeVResponsiveProps = propsFactory({
     aspectRatio: [String, Number],
-    contentClass: String,
+    contentClass: null,
     inline: Boolean,
     ...makeComponentProps(),
     ...makeDimensionProps()
@@ -4121,6 +4137,12 @@
     const isSelected = vue.computed(() => {
       return group.isSelected(id);
     });
+    const isFirst = vue.computed(() => {
+      return group.items.value[0].id === id;
+    });
+    const isLast = vue.computed(() => {
+      return group.items.value[group.items.value.length - 1].id === id;
+    });
     const selectedClass = vue.computed(() => isSelected.value && [group.selectedClass.value, props.selectedClass]);
     vue.watch(isSelected, value => {
       vm.emit('group:selected', {
@@ -4132,6 +4154,8 @@
     return {
       id,
       isSelected,
+      isFirst,
+      isLast,
       toggle: () => group.select(id, !isSelected.value),
       select: value => group.select(id, value),
       selectedClass,
@@ -7093,7 +7117,7 @@
   const makeDisplayProps = propsFactory({
     mobile: {
       type: Boolean,
-      default: null
+      default: false
     },
     mobileBreakpoint: [Number, String]
   }, 'display');
@@ -7388,7 +7412,7 @@
       const goTo = useGoTo();
       const goToOptions = vue.computed(() => {
         return {
-          container: containerRef.value,
+          container: containerRef.el,
           duration: 200,
           easing: 'easeOutQuart'
         };
@@ -7412,9 +7436,9 @@
               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);
             }
           });
@@ -7425,13 +7449,13 @@
         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
@@ -7440,18 +7464,18 @@
         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) {
@@ -7469,12 +7493,12 @@
       }
       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;
@@ -7489,14 +7513,14 @@
       // 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);
@@ -7521,21 +7545,21 @@
         }
       }
       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({
@@ -7549,11 +7573,11 @@
         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);
@@ -7596,8 +7620,8 @@
       });
       const hasNext = vue.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
@@ -8021,14 +8045,16 @@
       },
       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;
       },
@@ -8057,8 +8083,11 @@
       },
       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;
       },
@@ -8402,12 +8431,12 @@
   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 => {
@@ -8417,6 +8446,7 @@
     const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
     const activeStrategy = vue.computed(() => {
       if (typeof props.activeStrategy === 'object') return props.activeStrategy;
+      if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
       switch (props.activeStrategy) {
         case 'leaf':
           return leafActiveStrategy(props.mandatory);
@@ -8431,6 +8461,7 @@
     });
     const selectStrategy = vue.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);
@@ -8759,7 +8790,7 @@
     appendIcon: IconValue,
     baseColor: String,
     disabled: Boolean,
-    lines: String,
+    lines: [Boolean, String],
     link: {
       type: Boolean,
       default: undefined
@@ -8870,8 +8901,9 @@
       }));
       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) {
@@ -10330,17 +10362,17 @@
     }, {
       flush: 'post'
     });
-    const activatorRef = vue.ref();
+    const activatorRef = templateRef();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
       vue.nextTick(() => {
-        activatorEl.value = refElement(activatorRef.value);
+        activatorEl.value = activatorRef.el;
       });
     });
-    const targetRef = vue.ref();
+    const targetRef = templateRef();
     const target = vue.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 = vue.computed(() => {
@@ -10685,10 +10717,7 @@
     disabled: Boolean,
     opacity: [Number, String],
     noClickAnimation: Boolean,
-    modelValue: {
-      type: Boolean,
-      default: null
-    },
+    modelValue: Boolean,
     persistent: Boolean,
     scrim: {
       type: [Boolean, String],
@@ -10731,7 +10760,7 @@
       } = _ref;
       const model = useProxiedModel(props, 'modelValue');
       const isActive = vue.computed({
-        get: () => Boolean(model.value),
+        get: () => model.value,
         set: v => {
           if (!(v && props.disabled)) model.value = v;
         }
@@ -12968,7 +12997,7 @@
             select(displayItems.value[0]);
           }
           menu.value = false;
-          search.value = '';
+          if (props.multiple || hasSelectionSlot.value) search.value = '';
           selectionIndex.value = -1;
         }
       });
@@ -14812,7 +14841,7 @@
       const {
         resizeRef
       } = useResizeObserver(entries => {
-        if (!resizeRef.value?.offsetParent) return;
+        if (!resizeRef.el?.offsetParent) return;
         const {
           width,
           height
@@ -18435,6 +18464,7 @@
       });
       return !!items.length && isSelected(items);
     });
+    const showSelectAll = vue.computed(() => selectStrategy.value.showSelectAll);
     const data = {
       toggleSelect,
       select,
@@ -18443,7 +18473,7 @@
       isSomeSelected,
       someSelected,
       allSelected,
-      showSelectAll: selectStrategy.value.showSelectAll
+      showSelectAll
     };
     vue.provide(VDataTableSelectionSymbol, data);
     return data;
@@ -19714,7 +19744,7 @@
             };
             if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
             if (column.key === 'data-table-select') {
-              return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll && vue.createVNode(VCheckboxBtn, {
+              return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && vue.createVNode(VCheckboxBtn, {
                 "modelValue": allSelected.value,
                 "indeterminate": someSelected.value && !allSelected.value,
                 "onUpdate:modelValue": selectAll
@@ -20233,6 +20263,8 @@
 
   const makeDataTableProps = propsFactory({
     ...makeVDataTableRowsProps(),
+    hideDefaultFooter: Boolean,
+    hideDefaultHeader: Boolean,
     width: [String, Number],
     search: String,
     ...makeDataTableExpandProps(),
@@ -20415,10 +20447,12 @@
           "style": props.style
         }, tableProps), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(attrs, dataTableRowsProps, {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead"
+          }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.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) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -20586,7 +20620,9 @@
             "style": {
               height: convertToUnit(props.height)
             }
-          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
+          }, [vue.createVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead"
+          }, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
             "sticky": props.fixedHeader
           }), slots)]), vue.createVNode("tbody", null, [vue.createVNode("tr", {
             "ref": markerRef,
@@ -20791,7 +20827,8 @@
           "style": props.style
         }, tableProps), {
           top: () => slots.top?.(slotProps.value),
-          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", {
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createVNode("thead", {
+            "key": "thead",
             "class": "v-data-table__thead",
             "role": "rowgroup"
           }, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
@@ -20802,7 +20839,7 @@
           }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.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) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && vue.createVNode(vue.Fragment, null, [vue.createVNode(VDivider, null, null), vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
           })])
         });
@@ -21683,10 +21720,10 @@
       vue.watchEffect(() => {
         model.value = model.value ?? adapter.getYear(adapter.date());
       });
-      const yearRef = vue.ref();
+      const yearRef = templateRef();
       vue.onMounted(async () => {
         await vue.nextTick();
-        yearRef.value?.$el.scrollIntoView({
+        yearRef.el?.scrollIntoView({
           block: 'center'
         });
       });
@@ -22346,7 +22383,9 @@
           }), slots.default?.()]
         });
       });
-      return {};
+      return {
+        groupItem
+      };
     }
   });
 
@@ -22375,7 +22414,10 @@
       let {
         slots
       } = _ref;
-      useGroup(props, VExpansionPanelSymbol);
+      const {
+        next,
+        prev
+      } = useGroup(props, VExpansionPanelSymbol);
       const {
         themeClasses
       } = provideTheme(props);
@@ -22402,8 +22444,16 @@
           '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
+      };
     }
   });
 
@@ -22563,7 +22613,7 @@
       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,
@@ -22667,7 +22717,7 @@
             }, 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
@@ -23012,7 +23062,7 @@
       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) {
@@ -23758,7 +23808,9 @@
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDelayProps(),
-    ...makeDisplayProps(),
+    ...makeDisplayProps({
+      mobile: null
+    }),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -25764,7 +25816,7 @@
 
   // Types
 
-  const makeVStepperItemProps = propsFactory({
+  const makeStepperItemProps = propsFactory({
     color: String,
     title: String,
     subtitle: String,
@@ -25791,7 +25843,10 @@
     rules: {
       type: Array,
       default: () => []
-    },
+    }
+  }, 'StepperItem');
+  const makeVStepperItemProps = propsFactory({
+    ...makeStepperItemProps(),
     ...makeGroupItemProps()
   }, 'VStepperItem');
   const VStepperItem = genericComponent()({
@@ -25810,13 +25865,14 @@
       const group = useGroupItem(props, VStepperSymbol, true);
       const step = vue.computed(() => group?.value.value ?? props.value);
       const isValid = vue.computed(() => props.rules.every(handler => handler() === true));
+      const isClickable = vue.computed(() => !props.disabled && props.editable);
       const canEdit = vue.computed(() => !props.disabled && props.editable);
       const hasError = vue.computed(() => props.error || !isValid.value);
       const hasCompleted = vue.computed(() => props.complete || props.rules.length > 0 && isValid.value);
       const icon = vue.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 = vue.computed(() => ({
@@ -25843,7 +25899,7 @@
           }, group?.selectedClass.value],
           "disabled": !props.editable,
           "onClick": onClick
-        }, [vue.createVNode(VAvatar, {
+        }, [isClickable.value && genOverlays(true, 'v-stepper-item'), vue.createVNode(VAvatar, {
           "key": "stepper-avatar",
           "class": "v-stepper-item__avatar",
           "color": hasColor ? props.color : undefined,
@@ -25905,7 +25961,8 @@
         }, 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);
@@ -25929,7 +25986,8 @@
         return vue.createVNode(VWindowItem, vue.mergeProps({
           "_as": "VStepperWindowItem"
         }, windowItemProps, {
-          "class": "v-stepper-window-item"
+          "class": ['v-stepper-window-item', props.class],
+          "style": props.style
         }), slots);
       });
       return {};
@@ -25939,7 +25997,7 @@
   // Types
 
   const VStepperSymbol = Symbol.for('vuetify:v-stepper');
-  const makeVStepperProps = propsFactory({
+  const makeStepperProps = propsFactory({
     altLabels: Boolean,
     bgColor: String,
     editable: Boolean,
@@ -25958,7 +26016,10 @@
     },
     mobile: Boolean,
     nonLinear: Boolean,
-    flat: Boolean,
+    flat: Boolean
+  }, 'Stepper');
+  const makeVStepperProps = propsFactory({
+    ...makeStepperProps(),
     ...makeGroupProps({
       mandatory: 'force',
       selectedClass: 'v-stepper-item--selected'
@@ -26037,12 +26098,18 @@
           default: () => [hasHeader && vue.createVNode(VStepperHeader, {
             "key": "stepper-header"
           }, {
-            default: () => [items.value.map((item, index) => vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.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 vue.createVNode(vue.Fragment, null, [!!index && vue.createVNode(VDivider, null, null), vue.createVNode(VStepperItem, item, {
+                default: slots[`header-item.${item.value}`] ?? slots.header,
+                icon: slots.icon,
+                title: slots.title,
+                subtitle: slots.subtitle
+              })]);
+            })]
           }), hasWindow && vue.createVNode(VStepperWindow, {
             "key": "stepper-window"
           }, {
@@ -26428,7 +26495,8 @@
         }, 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);
@@ -26505,6 +26573,7 @@
     },
     setup(props, _ref) {
       let {
+        attrs,
         slots
       } = _ref;
       const model = useProxiedModel(props, 'modelValue');
@@ -26516,6 +26585,9 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      const {
+        scopeId
+      } = useScopeId();
       provideDefaults({
         VTab: {
           color: vue.toRef(props, 'color'),
@@ -26542,7 +26614,7 @@
           }, backgroundColorStyles.value, props.style],
           "role": "tablist",
           "symbol": VTabsSymbol
-        }), {
+        }, scopeId, attrs), {
           default: () => [slots.default?.() ?? items.value.map(item => slots.tab?.({
             item
           }) ?? vue.createVNode(VTab, vue.mergeProps(item, {
@@ -26553,11 +26625,11 @@
               item
             })
           }))]
-        }), hasWindow && vue.createVNode(VTabsWindow, {
+        }), hasWindow && vue.createVNode(VTabsWindow, vue.mergeProps({
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
           "key": "tabs-window"
-        }, {
+        }, scopeId), {
           default: () => [items.value.map(item => slots.item?.({
             item
           }) ?? vue.createVNode(VTabsWindowItem, {
@@ -27842,19 +27914,13 @@
       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
@@ -27866,12 +27932,6 @@
         slots
       } = _ref;
       const model = useProxiedModel(props, 'modelValue');
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
-      const inputRef = vue.ref();
       const stepDecimals = vue.computed(() => getDecimals(props.step));
       const modelDecimals = vue.computed(() => model.value != null ? getDecimals(model.value) : 0);
       const canIncrease = vue.computed(() => {
@@ -27887,9 +27947,6 @@
           model.value = clamp(model.value, props.min, props.max);
         }
       });
-      function onFocus() {
-        if (!isFocused.value) focus();
-      }
       const controlVariant = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
       });
@@ -27919,7 +27976,7 @@
         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);
@@ -27936,17 +27993,14 @@
           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 vue.createVNode("div", {
@@ -27959,6 +28013,7 @@
             "name": "decrement-btn",
             "icon": "$expand",
             "size": "small",
+            "tabindex": "-1",
             "onClick": onClickDown
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "decrement-defaults",
@@ -27983,7 +28038,8 @@
             "name": "increment-btn",
             "icon": "$collapse",
             "onClick": onClickUp,
-            "size": "small"
+            "size": "small",
+            "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "increment-defaults",
             "defaults": {
@@ -28004,7 +28060,36 @@
             "vertical": true
           }, null) : undefined;
         }
-        return vue.createVNode(VInput, vue.mergeProps({
+        const appendInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+          "class": "v-number-input__control"
+        }, [vue.createVNode(VDivider, {
+          "vertical": true
+        }, null), vue.createVNode(VBtn, {
+          "flat": true,
+          "height": "100%",
+          "icon": "$plus",
+          "tile": true,
+          "tabindex": "-1",
+          "onClick": onClickUp
+        }, null)]) : !props.reverse ? vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]) : undefined;
+        const hasAppendInner = slots['append-inner'] || appendInnerControl;
+        const prependInnerControl = controlVariant.value === 'split' ? vue.createVNode("div", {
+          "class": "v-number-input__control"
+        }, [vue.createVNode(VBtn, {
+          "flat": true,
+          "height": "100%",
+          "icon": "$minus",
+          "tile": true,
+          "tabindex": "-1",
+          "onClick": onClickDown
+        }, null), vue.createVNode(VDivider, {
+          "vertical": true
+        }, null)]) : props.reverse ? vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
+        const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
+        return vue.createVNode(VTextField, vue.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,
@@ -28013,59 +28098,281 @@
             '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: () => vue.createVNode(VField, vue.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 vue.createVNode(vue.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 vue.createVNode(vue.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 vue.createVNode(VStepperActions, vue.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 = vue.ref();
+      const step = vue.computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value);
+      const groupItem = vue.computed(() => vExpansionPanelRef.value?.groupItem);
+      const isSelected = vue.computed(() => groupItem.value?.isSelected.value ?? false);
+      const isValid = vue.computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null);
+      const canEdit = vue.computed(() => !props.disabled && props.editable);
+      const hasError = vue.computed(() => props.error || isSelected.value && !isValid.value);
+      const hasCompleted = vue.computed(() => props.complete || props.rules.length > 0 && isValid.value === true);
+      const disabled = vue.computed(() => {
+        if (props.disabled) return props.disabled;
+        if (groupItem.value?.isFirst.value) return 'prev';
+        return false;
+      });
+      const icon = vue.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 = vue.computed(() => ({
+        canEdit: canEdit.value,
+        hasError: hasError.value,
+        hasCompleted: hasCompleted.value,
+        title: props.title,
+        subtitle: props.subtitle,
+        step: step.value,
+        value: props.value
+      }));
+      const actionProps = vue.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 vue.createVNode(VExpansionPanel, vue.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: () => vue.createVNode(vue.Fragment, null, [vue.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 ? vue.createVNode(VIcon, {
+              "icon": icon.value
+            }, null) : step.value)]
+          }), vue.createVNode("div", null, [vue.createVNode("div", {
+            "class": "v-stepper-vertical-item__title"
+          }, [slots.title?.(slotProps.value) ?? props.title]), vue.createVNode("div", {
+            "class": "v-stepper-vertical-item__subtitle"
+          }, [slots.subtitle?.(slotProps.value) ?? props.subtitle])])]),
+          text: () => vue.createVNode(vue.Fragment, null, [slots.default?.(slotProps.value) ?? props.text, hasActions && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VStepperVerticalActions: {
+                disabled: disabled.value,
+                finish: groupItem.value?.isLast.value
+              }
+            }
+          }, {
+            default: () => [slots.actions?.(actionProps.value) ?? vue.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 = vue.ref();
+      const {
+        color,
+        editable,
+        prevText,
+        nextText,
+        hideActions
+      } = vue.toRefs(props);
+      const model = useProxiedModel(props, 'modelValue');
+      const items = vue.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 vue.createVNode(VExpansionPanels, vue.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 vue.createVNode(vue.Fragment, null, [items.value.map(_ref3 => {
               let {
-                props: {
-                  class: fieldClass,
-                  ...slotProps
-                }
-              } = _ref2;
-              return vue.createVNode("input", vue.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' ? () => vue.createVNode("div", {
-              "class": "v-number-input__control"
-            }, [vue.createVNode(VDivider, {
-              "vertical": true
-            }, null), vue.createVNode(VBtn, {
-              "flat": true,
-              "height": "100%",
-              "icon": "$plus",
-              "tile": true,
-              "onClick": onClickUp
-            }, null)]) : !props.reverse ? () => vue.createVNode(vue.Fragment, null, [dividerNode(), controlNode()]) : undefined,
-            'prepend-inner': controlVariant.value === 'split' ? () => vue.createVNode("div", {
-              "class": "v-number-input__control"
-            }, [vue.createVNode(VBtn, {
-              "flat": true,
-              "height": "100%",
-              "icon": "$minus",
-              "tile": true,
-              "onClick": onClickDown
-            }, null), vue.createVNode(VDivider, {
-              "vertical": true
-            }, null)]) : props.reverse ? () => vue.createVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined
-          })
+                raw,
+                ...item
+              } = _ref3;
+              return vue.createVNode(VStepperVerticalItem, item, {
+                ...slots,
+                default: slots[`item.${item.value}`]
+              });
+            }), slots.default?.({
+              prev,
+              next,
+              step: model.value
+            })]);
+          }
         });
       });
+      return {};
     }
   });
 
@@ -29429,6 +29736,9 @@
     VStepperActions: VStepperActions,
     VStepperHeader: VStepperHeader,
     VStepperItem: VStepperItem,
+    VStepperVertical: VStepperVertical,
+    VStepperVerticalActions: VStepperVerticalActions,
+    VStepperVerticalItem: VStepperVerticalItem,
     VStepperWindow: VStepperWindow,
     VStepperWindowItem: VStepperWindowItem,
     VSvgIcon: VSvgIcon,
@@ -29766,7 +30076,7 @@
       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
@@ -30019,7 +30329,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.3";
+  const version = "3.6.5";
 
   /* eslint-disable local-rules/sort-imports */