@vuetify/nightly 3.3.10-master.2023-08-01 → 3.3.11-dev.2023-08-07

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.10-master.2023-08-01
+* Vuetify v3.3.11-dev.2023-08-07
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -224,6 +224,11 @@ function omit(obj, exclude) {
   exclude.forEach(prop => delete clone[prop]);
   return clone;
 }
+function only(obj, include) {
+  const clone = {};
+  include.forEach(prop => clone[prop] = obj[prop]);
+  return clone;
+}
 
 /**
  * Filter attributes that should be applied to
@@ -407,12 +412,22 @@ function callEvent(handler) {
   }
 }
 function focusableChildren(el) {
-  const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}:not([tabindex="-1"]):not([disabled])`).join(', ');
+  let filterByTabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const targets = ['button', '[href]', 'input:not([type="hidden"])', 'select', 'textarea', '[tabindex]'].map(s => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled])`).join(', ');
   return [...el.querySelectorAll(targets)];
 }
+function getNextElement(elements, location, condition) {
+  let _el;
+  let idx = elements.indexOf(document.activeElement);
+  const inc = location === 'next' ? 1 : -1;
+  do {
+    idx += inc;
+    _el = elements[idx];
+  } while ((!_el || _el.offsetParent == null || !(condition?.(_el) ?? true)) && idx < elements.length && idx >= 0);
+  return _el;
+}
 function focusChild(el, location) {
   const focusable = focusableChildren(el);
-  const idx = focusable.indexOf(document.activeElement);
   if (!location) {
     if (el === document.activeElement || !el.contains(document.activeElement)) {
       focusable[0]?.focus();
@@ -421,14 +436,10 @@ function focusChild(el, location) {
     focusable[0]?.focus();
   } else if (location === 'last') {
     focusable.at(-1)?.focus();
+  } else if (typeof location === 'number') {
+    focusable[location]?.focus();
   } else {
-    let _el;
-    let idxx = idx;
-    const inc = location === 'next' ? 1 : -1;
-    do {
-      idxx += inc;
-      _el = focusable[idxx];
-    } while ((!_el || _el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+    const _el = getNextElement(focusable, location);
     if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
   }
 }
@@ -1698,7 +1709,8 @@ var en = {
   input: {
     clear: 'Clear {0}',
     prependAction: '{0} prepended action',
-    appendAction: '{0} appended action'
+    appendAction: '{0} appended action',
+    otp: 'Please enter OTP character {0}'
   },
   fileInput: {
     counter: '{0} files',
@@ -1719,6 +1731,10 @@ var en = {
       last: 'Last page'
     }
   },
+  stepper: {
+    next: 'Next',
+    prev: 'Previous'
+  },
   rating: {
     ariaLabel: {
       item: 'Rating {0} of {1}'
@@ -2257,9 +2273,11 @@ function createTheme(options) {
     if (head) {
       if (head.push) {
         const entry = head.push(getHead);
-        watch(styles, () => {
-          entry.patch(getHead);
-        });
+        if (IN_BROWSER) {
+          watch(styles, () => {
+            entry.patch(getHead);
+          });
+        }
       } else {
         if (IN_BROWSER) {
           head.addHeadObjs(computed(getHead));
@@ -2270,9 +2288,13 @@ function createTheme(options) {
       }
     } else {
       let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-      watch(styles, updateStyles, {
-        immediate: true
-      });
+      if (IN_BROWSER) {
+        watch(styles, updateStyles, {
+          immediate: true
+        });
+      } else {
+        updateStyles();
+      }
       function updateStyles() {
         if (typeof document !== 'undefined' && !styleEl) {
           const el = document.createElement('style');
@@ -2970,6 +2992,8 @@ const makeVImgProps = propsFactory({
     type: [String, Object],
     default: ''
   },
+  crossorigin: String,
+  referrerpolicy: String,
   srcset: String,
   ...makeVResponsiveProps(),
   ...makeComponentProps(),
@@ -3094,6 +3118,8 @@ const VImg = genericComponent()({
         "src": normalisedSrc.value.src,
         "srcset": normalisedSrc.value.srcset,
         "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy,
         "sizes": props.sizes,
         "ref": image,
         "onLoad": onLoad,
@@ -3115,7 +3141,9 @@ const VImg = genericComponent()({
       default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
         "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
         "src": normalisedSrc.value.lazySrc,
-        "alt": props.alt
+        "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy
       }, null)]
     });
     const __placeholder = () => {
@@ -3877,7 +3905,7 @@ function useGroupItem(props, injectKey) {
     throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
   }
   const value = toRef(props, 'value');
-  const disabled = computed(() => group.disabled.value || props.disabled);
+  const disabled = computed(() => !!(group.disabled.value || props.disabled));
   group.register({
     id,
     value,
@@ -5724,6 +5752,7 @@ const VSelectionControlGroup = genericComponent()({
 
 const makeVSelectionControlProps = propsFactory({
   label: String,
+  baseColor: String,
   trueValue: null,
   falseValue: null,
   value: null,
@@ -5762,7 +5791,8 @@ function useSelectionControl(props) {
     textColorClasses,
     textColorStyles
   } = useTextColor(computed(() => {
-    return model.value && !props.error && !props.disabled ? props.color : undefined;
+    if (props.error || props.disabled) return undefined;
+    return model.value ? props.color : props.baseColor;
   }));
   const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
   return {
@@ -6542,6 +6572,7 @@ const makeVAvatarProps = propsFactory({
   end: Boolean,
   icon: IconValue,
   image: String,
+  text: String,
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -6592,7 +6623,7 @@ const VAvatar = genericComponent()({
       }, null) : props.icon ? createVNode(VIcon, {
         "key": "icon",
         "icon": props.icon
-      }, null) : slots.default?.(), genOverlays(false, 'v-avatar')]
+      }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
     }));
     return {};
   }
@@ -9830,8 +9861,30 @@ const VMenu = genericComponent()({
         }, 40);
       }
     });
+    function onFocusIn(e) {
+      const before = e.relatedTarget;
+      const after = e.target;
+      if (before !== after && overlay.value?.contentEl &&
+      // We're the topmost menu
+      overlay.value?.globalTop &&
+      // It isn't the document or the menu body
+      ![document, overlay.value.contentEl].includes(after) &&
+      // It isn't inside the menu body
+      !overlay.value.contentEl.contains(after)) {
+        const focusable = focusableChildren(overlay.value.contentEl);
+        focusable[0]?.focus();
+      }
+    }
     watch(isActive, val => {
-      val ? parent?.register() : parent?.unregister();
+      if (val) {
+        parent?.register();
+        document.addEventListener('focusin', onFocusIn, {
+          once: true
+        });
+      } else {
+        parent?.unregister();
+        document.removeEventListener('focusin', onFocusIn);
+      }
     });
     function onClickOutside() {
       parent?.closeParents();
@@ -9839,8 +9892,11 @@ const VMenu = genericComponent()({
     function onKeydown(e) {
       if (props.disabled) return;
       if (e.key === 'Tab') {
-        isActive.value = false;
-        overlay.value?.activatorEl?.focus();
+        const nextElement = getNextElement(focusableChildren(overlay.value?.contentEl, false), e.shiftKey ? 'prev' : 'next', el => el.tabIndex >= 0);
+        if (!nextElement) {
+          isActive.value = false;
+          overlay.value?.activatorEl?.focus();
+        }
       }
     }
     function onActivatorKeydown(e) {
@@ -10754,6 +10810,7 @@ const makeSelectProps = propsFactory({
     type: Function,
     default: deepEqual
   },
+  itemColor: String,
   ...makeItemsProps({
     itemChildren: false
   })
@@ -10806,7 +10863,12 @@ const VSelect = genericComponent()({
     const form = useForm();
     const selections = computed(() => {
       return model.value.map(v => {
-        return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+        return items.value.find(item => {
+          const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+          const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+          if (itemRawValue === undefined || modelRawValue === undefined) return false;
+          return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+        }) || v;
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
@@ -10962,7 +11024,8 @@ const VSelect = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onScrollPassive": onListScroll,
-            "tabindex": "-1"
+            "tabindex": "-1",
+            "color": props.itemColor ?? props.color
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -11257,7 +11320,12 @@ const VAutocomplete = genericComponent()({
     } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = computed(() => {
       return model.value.map(v => {
-        return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+        return items.value.find(item => {
+          const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+          const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+          if (itemRawValue === undefined || modelRawValue === undefined) return false;
+          return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+        }) || v;
       });
     });
     const displayItems = computed(() => {
@@ -11309,11 +11377,8 @@ const VAutocomplete = genericComponent()({
       if (['Escape'].includes(e.key)) {
         menu.value = false;
       }
-      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
-        if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
-          select(filteredItems.value[0]);
-        }
-        isPristine.value = true;
+      if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+        select(filteredItems.value[0]);
       }
       if (e.key === 'ArrowDown' && highlightFirst.value) {
         listRef.value?.focus('next');
@@ -11479,7 +11544,8 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "onScrollPassive": onListScroll,
-            "tabindex": "-1"
+            "tabindex": "-1",
+            "color": props.itemColor ?? props.color
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -12100,12 +12166,17 @@ const VBreadcrumbs = genericComponent()({
             item,
             raw
           } = _ref2;
-          return createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
-            "key": item.title,
+          return createVNode(Fragment, null, [slots.item?.({
+            item,
+            index
+          }) ?? createVNode(VBreadcrumbsItem, mergeProps({
+            "key": index,
             "disabled": index >= array.length - 1
-          }, item), {
+          }, typeof item === 'string' ? {
+            title: item
+          } : item), {
             default: slots.title ? () => slots.title?.({
-              item: raw,
+              item,
               index
             }) : undefined
           }), index < array.length - 1 && createVNode(VBreadcrumbsDivider, null, {
@@ -12527,6 +12598,7 @@ const makeVWindowProps = propsFactory({
   },
   // TODO: mandatory should probably not be exposed but do this for now
   mandatory: {
+    type: [Boolean, String],
     default: 'force'
   },
   ...makeComponentProps(),
@@ -12894,7 +12966,9 @@ const VWindowItem = genericComponent()({
         "style": props.style
       }, [hasContent.value && slots.default?.()]), [[vShow, groupItem.isSelected.value]])]
     }));
-    return {};
+    return {
+      groupItem
+    };
   }
 });
 
@@ -13440,7 +13514,11 @@ const makeSliderProps = propsFactory({
   ...makeRoundedProps(),
   ...makeElevationProps({
     elevation: 2
-  })
+  }),
+  ripple: {
+    type: Boolean,
+    default: true
+  }
 }, 'Slider');
 const useSteps = props => {
   const min = computed(() => parseFloat(props.min));
@@ -14047,7 +14125,8 @@ const VSlider = genericComponent()({
             "position": trackStop.value,
             "elevation": props.elevation,
             "onFocus": focus,
-            "onBlur": blur
+            "onBlur": blur,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           })]);
@@ -14819,7 +14898,12 @@ const VCombobox = genericComponent()({
     } = useFilter(props, items, () => isPristine.value ? '' : search.value);
     const selections = computed(() => {
       return model.value.map(v => {
-        return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
+        return items.value.find(item => {
+          const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
+          const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
+          if (itemRawValue === undefined || modelRawValue === undefined) return false;
+          return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
+        }) || v;
       });
     });
     const displayItems = computed(() => {
@@ -15028,7 +15112,8 @@ const VCombobox = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "onScrollPassive": onListScroll,
-            "tabindex": "-1"
+            "tabindex": "-1",
+            "color": props.itemColor ?? props.color
           }, {
             default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
@@ -17642,7 +17727,8 @@ const VRangeSlider = genericComponent()({
             },
             "min": min.value,
             "max": model.value[1],
-            "position": trackStart.value
+            "position": trackStart.value,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           }), createVNode(VSliderThumb, {
@@ -17670,7 +17756,8 @@ const VRangeSlider = genericComponent()({
             },
             "min": model.value[0],
             "max": max.value,
-            "position": trackStop.value
+            "position": trackStop.value,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           })]);
@@ -17817,7 +17904,9 @@ const VRating = genericComponent()({
         value,
         index,
         rating: normalizedValue.value
-      }) : createVNode(VBtn, btnProps, null)]), createVNode("input", {
+      }) : createVNode(VBtn, mergeProps({
+        "aria-label": t(props.itemAriaLabel, value, props.length)
+      }, btnProps), null)]), createVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
         "id": id,
@@ -23026,7 +23115,6 @@ const VInfiniteScrollIntersect = defineComponent({
       intersectionRef,
       isIntersecting
     } = useIntersectionObserver(entries => {}, props.rootMargin ? {
-      root: props.rootRef,
       rootMargin: props.rootMargin
     } : undefined);
     watch(isIntersecting, async val => {
@@ -23206,6 +23294,208 @@ const VInfiniteScroll = genericComponent()({
 
 // Types
 
+const makeVOtpInputProps = propsFactory({
+  autofocus: Boolean,
+  divider: String,
+  focusAll: Boolean,
+  label: {
+    type: String,
+    default: '$vuetify.input.otp'
+  },
+  length: {
+    type: [Number, String],
+    default: 6
+  },
+  modelValue: {
+    type: [Number, String],
+    default: undefined
+  },
+  placeholder: String,
+  type: {
+    type: String,
+    default: 'text'
+  },
+  ...makeDimensionProps(),
+  ...makeFocusProps(),
+  ...only(makeVFieldProps({
+    variant: 'outlined'
+  }), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'rounded', 'style', 'theme', 'variant'])
+}, 'VOtpInput');
+const VOtpInput = genericComponent()({
+  name: 'VOtpInput',
+  props: makeVOtpInputProps(),
+  emits: {
+    finish: val => true,
+    'update:focused': val => true,
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue', '', val => String(val).split(''), val => val.join(''));
+    const {
+      t
+    } = useLocale();
+    const fields = computed(() => Array(Number(props.length)).fill(0));
+    const focusIndex = ref(-1);
+    const contentRef = ref();
+    const inputRef = ref([]);
+    const current = computed(() => inputRef.value[focusIndex.value]);
+    function onInput() {
+      const array = model.value.slice();
+      const value = current.value.value;
+      array[focusIndex.value] = value;
+      model.value = array;
+      let target = null;
+      if (focusIndex.value > model.value.length) {
+        target = model.value.length + 1;
+      } else if (focusIndex.value + 1 !== Number(props.length)) {
+        target = 'next';
+      } else {
+        requestAnimationFrame(() => current.value?.blur());
+      }
+      if (target) focusChild(contentRef.value, target);
+    }
+    function onKeydown(e) {
+      const array = model.value.slice();
+      const index = focusIndex.value;
+      let target = null;
+      if (!['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'].includes(e.key)) return;
+      e.preventDefault();
+      if (e.key === 'ArrowLeft') {
+        target = 'prev';
+      } else if (e.key === 'ArrowRight') {
+        target = 'next';
+      } else if (['Backspace', 'Delete'].includes(e.key)) {
+        array[focusIndex.value] = '';
+        model.value = array;
+        if (focusIndex.value > 0 && e.key === 'Backspace') {
+          target = 'prev';
+        } else {
+          requestAnimationFrame(() => {
+            inputRef.value[index].select();
+          });
+        }
+      }
+      requestAnimationFrame(() => {
+        if (target != null) {
+          focusChild(contentRef.value, target);
+        }
+      });
+    }
+    function onPaste(index, e) {
+      e.preventDefault();
+      e.stopPropagation();
+      model.value = (e?.clipboardData?.getData('Text') ?? '').split('');
+      inputRef.value?.[index].blur();
+    }
+    function reset() {
+      model.value = [];
+    }
+    function onFocus(e, index) {
+      focus();
+      focusIndex.value = index;
+    }
+    function onBlur() {
+      blur();
+      focusIndex.value = -1;
+    }
+    provideDefaults({
+      VField: {
+        disabled: computed(() => props.disabled),
+        error: computed(() => props.error),
+        variant: computed(() => props.variant)
+      }
+    }, {
+      scoped: true
+    });
+    watch(model, val => {
+      if (val.length === props.length) emit('finish', val.join(''));
+    }, {
+      deep: true
+    });
+    watch(focusIndex, val => {
+      if (val < 0) return;
+      IN_BROWSER && window.requestAnimationFrame(() => {
+        inputRef.value[val].select();
+      });
+    });
+    useRender(() => {
+      return createVNode("div", {
+        "class": ['v-otp-input', {
+          'v-otp-input--divided': !!props.divider
+        }, props.class],
+        "style": [props.style]
+      }, [createVNode("div", {
+        "ref": contentRef,
+        "class": "v-otp-input__content",
+        "style": [dimensionStyles.value]
+      }, [fields.value.map((_, i) => createVNode(Fragment, null, [props.divider && i !== 0 && createVNode("span", {
+        "class": "v-otp-input__divider"
+      }, [props.divider]), createVNode(VField, {
+        "focused": isFocused.value && props.focusAll || focusIndex.value === i,
+        "key": i
+      }, {
+        ...slots,
+        default: () => {
+          return createVNode("input", {
+            "ref": val => inputRef.value[i] = val,
+            "aria-label": t(props.label, i + 1),
+            "autofocus": i === 0 && props.autofocus,
+            "autocomplete": "one-time-code",
+            "class": ['v-otp-input__field'],
+            "inputmode": "text",
+            "min": props.type === 'number' ? 0 : undefined,
+            "maxlength": "1",
+            "placeholder": props.placeholder,
+            "type": props.type,
+            "value": model.value[i],
+            "onInput": onInput,
+            "onFocus": e => onFocus(e, i),
+            "onBlur": onBlur,
+            "onKeydown": onKeydown,
+            "onPaste": event => onPaste(i, event)
+          }, null);
+        }
+      })])), createVNode(VOverlay, {
+        "contained": true,
+        "content-class": "v-otp-input__loader",
+        "model-value": !!props.loading,
+        "persistent": true
+      }, {
+        default: () => [slots.loader?.() ?? createVNode(VProgressCircular, {
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": true,
+          "size": "24",
+          "width": "2"
+        }, null)]
+      }), slots.default?.()])]);
+    });
+    return {
+      blur: () => {
+        inputRef.value?.some(input => input.blur());
+      },
+      focus: () => {
+        inputRef.value?.[0].focus();
+      },
+      reset,
+      isFocused
+    };
+  }
+});
+
+// Types
+
 const rootTypes = {
   actions: 'button@2',
   article: 'heading, paragraph',
@@ -23337,6 +23627,373 @@ const VSkeletonLoader = genericComponent()({
   }
 });
 
+// Types
+
+const makeVStepperActionsProps = propsFactory({
+  color: String,
+  disabled: {
+    type: [Boolean, String],
+    default: false
+  },
+  prevText: {
+    type: String,
+    default: '$vuetify.stepper.prev'
+  },
+  nextText: {
+    type: String,
+    default: '$vuetify.stepper.next'
+  }
+}, 'VStepperActions');
+const VStepperActions = genericComponent()({
+  name: 'VStepperActions',
+  props: makeVStepperActionsProps(),
+  emits: {
+    'click:prev': () => true,
+    'click:next': () => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      t
+    } = useLocale();
+    function onClickPrev() {
+      emit('click:prev');
+    }
+    function onClickNext() {
+      emit('click:next');
+    }
+    useRender(() => {
+      return createVNode("div", {
+        "class": "v-stepper-actions"
+      }, [createVNode(VBtn, {
+        "disabled": ['prev', true].includes(props.disabled),
+        "text": t(props.prevText),
+        "variant": "text",
+        "onClick": onClickPrev
+      }, null), createVNode(VBtn, {
+        "disabled": ['next', true].includes(props.disabled),
+        "color": props.color,
+        "text": t(props.nextText),
+        "variant": "tonal",
+        "onClick": onClickNext
+      }, null)]);
+    });
+    return {};
+  }
+});
+
+// Utilities
+const VStepperHeader = createSimpleFunctional('v-stepper-header');
+
+// Types
+
+const makeVStepperItemProps = propsFactory({
+  color: String,
+  title: String,
+  subtitle: String,
+  complete: Boolean,
+  completeIcon: {
+    type: String,
+    default: '$complete'
+  },
+  editable: Boolean,
+  editIcon: {
+    type: String,
+    default: '$edit'
+  },
+  error: Boolean,
+  errorIcon: {
+    type: String,
+    default: '$error'
+  },
+  icon: String,
+  ripple: {
+    type: [Boolean, Object],
+    default: true
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  ...makeGroupItemProps()
+}, 'VStepperItem');
+const VStepperItem = genericComponent()({
+  name: 'VStepperItem',
+  directives: {
+    Ripple
+  },
+  props: makeVStepperItemProps(),
+  emits: {
+    'group:selected': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const group = useGroupItem(props, VStepperSymbol, true);
+    const step = computed(() => group?.value.value ?? props.value);
+    const isValid = computed(() => props.rules.every(handler => handler() === true));
+    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;
+      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
+    }));
+    useRender(() => {
+      const hasColor = (!group || group.isSelected.value || hasCompleted.value || canEdit.value) && !hasError.value && !props.disabled;
+      const hasTitle = !!(props.title || slots.title);
+      const hasSubtitle = !!(props.subtitle || slots.subtitle);
+      function onClick() {
+        group?.toggle();
+      }
+      return withDirectives(createVNode("button", {
+        "class": ['v-stepper-item', {
+          'v-stepper-item--complete': hasCompleted.value,
+          'v-stepper-item--disabled': props.disabled,
+          'v-stepper-item--error': hasError.value
+        }, group?.selectedClass.value],
+        "disabled": !props.editable,
+        "onClick": onClick
+      }, [createVNode(VAvatar, {
+        "key": "stepper-avatar",
+        "class": "v-stepper-item__avatar",
+        "color": hasColor ? props.color : undefined,
+        "size": 24
+      }, {
+        default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? createVNode(VIcon, {
+          "icon": icon.value
+        }, null) : step.value)]
+      }), createVNode("div", {
+        "class": "v-stepper-item__content"
+      }, [hasTitle && createVNode("div", {
+        "key": "title",
+        "class": "v-stepper-item__title"
+      }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && createVNode("div", {
+        "key": "subtitle",
+        "class": "v-stepper-item__subtitle"
+      }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[resolveDirective("ripple"), props.ripple && props.editable, null]]);
+    });
+    return {};
+  }
+});
+
+// Types
+
+const VStepperSymbol$1 = Symbol.for('vuetify:v-stepper');
+const makeVStepperWindowProps = propsFactory({
+  ...makeVWindowProps({
+    mandatory: false
+  })
+}, 'VStepperWindow');
+const VStepperWindow = genericComponent()({
+  name: 'VStepperWindow',
+  props: makeVStepperWindowProps(),
+  emits: {
+    'update:modelValue': v => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const group = inject$1(VStepperSymbol$1, null);
+    const _model = useProxiedModel(props, 'modelValue');
+    const model = computed({
+      get() {
+        // Always return modelValue if defined
+        // or if not within a VStepper group
+        if (_model.value != null || !group) return _model.value;
+
+        // If inside of a VStepper, find the currently selected
+        // item by id. Item value may be assigned by its index
+        return group.items.value.find(item => group.selected.value.includes(item.id))?.value;
+      },
+      set(val) {
+        _model.value = val;
+      }
+    });
+    useRender(() => {
+      const [windowProps] = VWindow.filterProps(props);
+      return createVNode(VWindow, mergeProps(windowProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": "v-stepper-window"
+      }), slots);
+    });
+    return {};
+  }
+});
+
+const makeVStepperWindowItemProps = propsFactory({
+  ...makeVWindowItemProps()
+}, 'VStepperWindowItem');
+const VStepperWindowItem = genericComponent()({
+  name: 'VStepperWindowItem',
+  props: makeVStepperWindowItemProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => {
+      const [windowItemProps] = VWindowItem.filterProps(props);
+      return createVNode(VWindowItem, mergeProps(windowItemProps, {
+        "class": "v-stepper-window-item"
+      }), slots);
+    });
+    return {};
+  }
+});
+
+// Types
+
+const VStepperSymbol = Symbol.for('vuetify:v-stepper');
+const makeVStepperProps = propsFactory({
+  altLabels: Boolean,
+  bgColor: String,
+  editable: Boolean,
+  hideActions: Boolean,
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemTitle: {
+    type: String,
+    default: 'title'
+  },
+  itemValue: {
+    type: String,
+    default: 'value'
+  },
+  mobile: Boolean,
+  nonLinear: Boolean,
+  flat: Boolean,
+  ...makeGroupProps({
+    mandatory: 'force',
+    selectedClass: 'v-stepper-item--selected'
+  }),
+  ...makeVSheetProps(),
+  ...only(makeVStepperActionsProps(), ['prevText', 'nextText'])
+}, 'VStepper');
+const VStepper = genericComponent()({
+  name: 'VStepper',
+  props: makeVStepperProps(),
+  emits: {
+    'update:modelValue': v => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    // TODO: fix typing
+    const {
+      items: _items,
+      next,
+      prev,
+      selected
+    } = useGroup(props, VStepperSymbol);
+    const {
+      color,
+      editable,
+      prevText,
+      nextText
+    } = toRefs(props);
+    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
+      };
+    }));
+    const activeIndex = computed(() => {
+      return _items.value.findIndex(item => selected.value.includes(item.id));
+    });
+    const disabled = computed(() => {
+      if (props.disabled) return props.disabled;
+      if (activeIndex.value === 0) return 'prev';
+      if (activeIndex.value === _items.value.length - 1) return 'next';
+      return false;
+    });
+    provideDefaults({
+      VStepperItem: {
+        editable,
+        prevText,
+        nextText
+      },
+      VStepperActions: {
+        color,
+        disabled,
+        prevText,
+        nextText
+      }
+    });
+    useRender(() => {
+      const [sheetProps] = VSheet.filterProps(props);
+      const hasHeader = !!(slots.header || props.items.length);
+      const hasWindow = props.items.length > 0;
+      const hasActions = !props.hideActions && !!(hasWindow || slots.actions);
+      return createVNode(VSheet, mergeProps(sheetProps, {
+        "color": props.bgColor,
+        "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
+      }), {
+        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
+          })]))]
+        }), hasWindow && createVNode(VStepperWindow, {
+          "key": "stepper-window"
+        }, {
+          default: () => [items.value.map(item => createVNode(VStepperWindowItem, {
+            "value": item.value
+          }, {
+            default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item)
+          }))]
+        }), slots.default?.({
+          prev,
+          next
+        }), hasActions && (slots.actions?.({
+          next,
+          prev
+        }) ?? createVNode(VStepperActions, {
+          "key": "stepper-actions",
+          "onClick:prev": prev,
+          "onClick:next": next
+        }, null))]
+      });
+    });
+    return {
+      prev,
+      next
+    };
+  }
+});
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   VAlert: VAlert,
@@ -23439,6 +24096,7 @@ var components = /*#__PURE__*/Object.freeze({
   VMessages: VMessages,
   VNavigationDrawer: VNavigationDrawer,
   VNoSsr: VNoSsr,
+  VOtpInput: VOtpInput,
   VOverlay: VOverlay,
   VPagination: VPagination,
   VParallax: VParallax,
@@ -23471,6 +24129,12 @@ var components = /*#__PURE__*/Object.freeze({
   VSlider: VSlider,
   VSnackbar: VSnackbar,
   VSpacer: VSpacer,
+  VStepper: VStepper,
+  VStepperActions: VStepperActions,
+  VStepperHeader: VStepperHeader,
+  VStepperItem: VStepperItem,
+  VStepperWindow: VStepperWindow,
+  VStepperWindowItem: VStepperWindowItem,
   VSvgIcon: VSvgIcon,
   VSwitch: VSwitch,
   VSystemBar: VSystemBar,
@@ -23708,7 +24372,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.10-master.2023-08-01";
+const version$1 = "3.3.11-dev.2023-08-07";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -23722,7 +24386,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.10-master.2023-08-01";
+const version = "3.3.11-dev.2023-08-07";
 
 /* eslint-disable local-rules/sort-imports */