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

package/dist/vuetify-labs.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.
 */
@@ -228,6 +228,11 @@
     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
@@ -411,12 +416,22 @@
     }
   }
   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();
@@ -425,14 +440,10 @@
       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');
     }
   }
@@ -1702,7 +1713,8 @@
     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',
@@ -1723,6 +1735,10 @@
         last: 'Last page'
       }
     },
+    stepper: {
+      next: 'Next',
+      prev: 'Previous'
+    },
     rating: {
       ariaLabel: {
         item: 'Rating {0} of {1}'
@@ -2261,9 +2277,11 @@
       if (head) {
         if (head.push) {
           const entry = head.push(getHead);
-          vue.watch(styles, () => {
-            entry.patch(getHead);
-          });
+          if (IN_BROWSER) {
+            vue.watch(styles, () => {
+              entry.patch(getHead);
+            });
+          }
         } else {
           if (IN_BROWSER) {
             head.addHeadObjs(vue.computed(getHead));
@@ -2274,9 +2292,13 @@
         }
       } else {
         let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
-        vue.watch(styles, updateStyles, {
-          immediate: true
-        });
+        if (IN_BROWSER) {
+          vue.watch(styles, updateStyles, {
+            immediate: true
+          });
+        } else {
+          updateStyles();
+        }
         function updateStyles() {
           if (typeof document !== 'undefined' && !styleEl) {
             const el = document.createElement('style');
@@ -2974,6 +2996,8 @@
       type: [String, Object],
       default: ''
     },
+    crossorigin: String,
+    referrerpolicy: String,
     srcset: String,
     ...makeVResponsiveProps(),
     ...makeComponentProps(),
@@ -3098,6 +3122,8 @@
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
           "alt": props.alt,
+          "crossorigin": props.crossorigin,
+          "referrerpolicy": props.referrerpolicy,
           "sizes": props.sizes,
           "ref": image,
           "onLoad": onLoad,
@@ -3119,7 +3145,9 @@
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.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 = () => {
@@ -3881,7 +3909,7 @@
       throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
     }
     const value = vue.toRef(props, 'value');
-    const disabled = vue.computed(() => group.disabled.value || props.disabled);
+    const disabled = vue.computed(() => !!(group.disabled.value || props.disabled));
     group.register({
       id,
       value,
@@ -5728,6 +5756,7 @@
 
   const makeVSelectionControlProps = propsFactory({
     label: String,
+    baseColor: String,
     trueValue: null,
     falseValue: null,
     value: null,
@@ -5766,7 +5795,8 @@
       textColorClasses,
       textColorStyles
     } = useTextColor(vue.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 = vue.computed(() => model.value ? props.trueIcon : props.falseIcon);
     return {
@@ -6546,6 +6576,7 @@
     end: Boolean,
     icon: IconValue,
     image: String,
+    text: String,
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -6596,7 +6627,7 @@
         }, null) : props.icon ? vue.createVNode(VIcon, {
           "key": "icon",
           "icon": props.icon
-        }, null) : slots.default?.(), genOverlays(false, 'v-avatar')]
+        }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
       }));
       return {};
     }
@@ -9834,8 +9865,30 @@
           }, 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();
+        }
+      }
       vue.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();
@@ -9843,8 +9896,11 @@
       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) {
@@ -10758,6 +10814,7 @@
       type: Function,
       default: deepEqual
     },
+    itemColor: String,
     ...makeItemsProps({
       itemChildren: false
     })
@@ -10810,7 +10867,12 @@
       const form = useForm();
       const selections = vue.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 = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -10966,7 +11028,8 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -11261,7 +11324,12 @@
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.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 = vue.computed(() => {
@@ -11313,11 +11381,8 @@
         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');
@@ -11483,7 +11548,8 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -12104,12 +12170,17 @@
               item,
               raw
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-              "key": item.title,
+            return vue.createVNode(vue.Fragment, null, [slots.item?.({
+              item,
+              index
+            }) ?? vue.createVNode(VBreadcrumbsItem, vue.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 && vue.createVNode(VBreadcrumbsDivider, null, {
@@ -12531,6 +12602,7 @@
     },
     // TODO: mandatory should probably not be exposed but do this for now
     mandatory: {
+      type: [Boolean, String],
       default: 'force'
     },
     ...makeComponentProps(),
@@ -12898,7 +12970,9 @@
           "style": props.style
         }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
-      return {};
+      return {
+        groupItem
+      };
     }
   });
 
@@ -13444,7 +13518,11 @@
     ...makeRoundedProps(),
     ...makeElevationProps({
       elevation: 2
-    })
+    }),
+    ripple: {
+      type: Boolean,
+      default: true
+    }
   }, 'Slider');
   const useSteps = props => {
     const min = vue.computed(() => parseFloat(props.min));
@@ -14051,7 +14129,8 @@
               "position": trackStop.value,
               "elevation": props.elevation,
               "onFocus": focus,
-              "onBlur": blur
+              "onBlur": blur,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -14823,7 +14902,12 @@
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
       const selections = vue.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 = vue.computed(() => {
@@ -15032,7 +15116,8 @@
               "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']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
@@ -17646,7 +17731,8 @@
               },
               "min": min.value,
               "max": model.value[1],
-              "position": trackStart.value
+              "position": trackStart.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             }), vue.createVNode(VSliderThumb, {
@@ -17674,7 +17760,8 @@
               },
               "min": model.value[0],
               "max": max.value,
-              "position": trackStop.value
+              "position": trackStop.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -17821,7 +17908,9 @@
           value,
           index,
           rating: normalizedValue.value
-        }) : vue.createVNode(VBtn, btnProps, null)]), vue.createVNode("input", {
+        }) : vue.createVNode(VBtn, vue.mergeProps({
+          "aria-label": t(props.itemAriaLabel, value, props.length)
+        }, btnProps), null)]), vue.createVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
           "id": id,
@@ -23030,7 +23119,6 @@
         intersectionRef,
         isIntersecting
       } = useIntersectionObserver(entries => {}, props.rootMargin ? {
-        root: props.rootRef,
         rootMargin: props.rootMargin
       } : undefined);
       vue.watch(isIntersecting, async val => {
@@ -23210,6 +23298,208 @@
 
   // 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 = vue.computed(() => Array(Number(props.length)).fill(0));
+      const focusIndex = vue.ref(-1);
+      const contentRef = vue.ref();
+      const inputRef = vue.ref([]);
+      const current = vue.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: vue.computed(() => props.disabled),
+          error: vue.computed(() => props.error),
+          variant: vue.computed(() => props.variant)
+        }
+      }, {
+        scoped: true
+      });
+      vue.watch(model, val => {
+        if (val.length === props.length) emit('finish', val.join(''));
+      }, {
+        deep: true
+      });
+      vue.watch(focusIndex, val => {
+        if (val < 0) return;
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          inputRef.value[val].select();
+        });
+      });
+      useRender(() => {
+        return vue.createVNode("div", {
+          "class": ['v-otp-input', {
+            'v-otp-input--divided': !!props.divider
+          }, props.class],
+          "style": [props.style]
+        }, [vue.createVNode("div", {
+          "ref": contentRef,
+          "class": "v-otp-input__content",
+          "style": [dimensionStyles.value]
+        }, [fields.value.map((_, i) => vue.createVNode(vue.Fragment, null, [props.divider && i !== 0 && vue.createVNode("span", {
+          "class": "v-otp-input__divider"
+        }, [props.divider]), vue.createVNode(VField, {
+          "focused": isFocused.value && props.focusAll || focusIndex.value === i,
+          "key": i
+        }, {
+          ...slots,
+          default: () => {
+            return vue.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);
+          }
+        })])), vue.createVNode(VOverlay, {
+          "contained": true,
+          "content-class": "v-otp-input__loader",
+          "model-value": !!props.loading,
+          "persistent": true
+        }, {
+          default: () => [slots.loader?.() ?? vue.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',
@@ -23341,6 +23631,373 @@
     }
   });
 
+  // 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 vue.createVNode("div", {
+          "class": "v-stepper-actions"
+        }, [vue.createVNode(VBtn, {
+          "disabled": ['prev', true].includes(props.disabled),
+          "text": t(props.prevText),
+          "variant": "text",
+          "onClick": onClickPrev
+        }, null), vue.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 = vue.computed(() => group?.value.value ?? props.value);
+      const isValid = vue.computed(() => props.rules.every(handler => handler() === true));
+      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;
+        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
+      }));
+      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 vue.withDirectives(vue.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
+        }, [vue.createVNode(VAvatar, {
+          "key": "stepper-avatar",
+          "class": "v-stepper-item__avatar",
+          "color": hasColor ? props.color : undefined,
+          "size": 24
+        }, {
+          default: () => [slots.icon?.(slotProps.value) ?? (icon.value ? vue.createVNode(VIcon, {
+            "icon": icon.value
+          }, null) : step.value)]
+        }), vue.createVNode("div", {
+          "class": "v-stepper-item__content"
+        }, [hasTitle && vue.createVNode("div", {
+          "key": "title",
+          "class": "v-stepper-item__title"
+        }, [slots.title?.(slotProps.value) ?? props.title]), hasSubtitle && vue.createVNode("div", {
+          "key": "subtitle",
+          "class": "v-stepper-item__subtitle"
+        }, [slots.subtitle?.(slotProps.value) ?? props.subtitle]), slots.default?.(slotProps.value)])]), [[vue.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 = vue.inject(VStepperSymbol$1, null);
+      const _model = useProxiedModel(props, 'modelValue');
+      const model = vue.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 vue.createVNode(VWindow, vue.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 vue.createVNode(VWindowItem, vue.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
+      } = vue.toRefs(props);
+      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
+        };
+      }));
+      const activeIndex = vue.computed(() => {
+        return _items.value.findIndex(item => selected.value.includes(item.id));
+      });
+      const disabled = vue.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 vue.createVNode(VSheet, vue.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 && 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
+            })]))]
+          }), hasWindow && vue.createVNode(VStepperWindow, {
+            "key": "stepper-window"
+          }, {
+            default: () => [items.value.map(item => vue.createVNode(VStepperWindowItem, {
+              "value": item.value
+            }, {
+              default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item)
+            }))]
+          }), slots.default?.({
+            prev,
+            next
+          }), hasActions && (slots.actions?.({
+            next,
+            prev
+          }) ?? vue.createVNode(VStepperActions, {
+            "key": "stepper-actions",
+            "onClick:prev": prev,
+            "onClick:next": next
+          }, null))]
+        });
+      });
+      return {
+        prev,
+        next
+      };
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -23443,6 +24100,7 @@
     VMessages: VMessages,
     VNavigationDrawer: VNavigationDrawer,
     VNoSsr: VNoSsr,
+    VOtpInput: VOtpInput,
     VOverlay: VOverlay,
     VPagination: VPagination,
     VParallax: VParallax,
@@ -23475,6 +24133,12 @@
     VSlider: VSlider,
     VSnackbar: VSnackbar,
     VSpacer: VSpacer,
+    VStepper: VStepper,
+    VStepperActions: VStepperActions,
+    VStepperHeader: VStepperHeader,
+    VStepperItem: VStepperItem,
+    VStepperWindow: VStepperWindow,
+    VStepperWindowItem: VStepperWindowItem,
     VSvgIcon: VSvgIcon,
     VSwitch: VSwitch,
     VSystemBar: VSystemBar,
@@ -23712,7 +24376,7 @@
       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
@@ -23726,7 +24390,7 @@
 
   /* 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 */