vuetify 3.3.10 → 3.3.11

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.10
+* Vuetify v3.3.11
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -75,6 +75,10 @@
     }
   }, 'component');
 
+  const IN_BROWSER = typeof window !== 'undefined';
+  const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
+  const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+
   function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
   function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
   function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
@@ -224,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
@@ -407,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();
@@ -421,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');
     }
   }
@@ -437,6 +452,17 @@
   }
   function noop() {}
 
+  /** Returns null if the selector is not supported or we can't check */
+  function matchesSelector(el, selector) {
+    const supportsSelector = IN_BROWSER && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports(`selector(${selector})`);
+    if (!supportsSelector) return null;
+    try {
+      return !!el && el.matches(selector);
+    } catch (err) {
+      return null;
+    }
+  }
+
   // Utilities
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -1286,11 +1312,6 @@
     return ['scroll', 'auto'].includes(style.overflowY);
   }
 
-  const IN_BROWSER = typeof window !== 'undefined';
-  const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
-  const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
-  const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports('selector(:focus-visible)');
-
   // Utilities
 
   // Types
@@ -1692,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',
@@ -1713,6 +1735,10 @@
         last: 'Last page'
       }
     },
+    stepper: {
+      next: 'Next',
+      prev: 'Previous'
+    },
     rating: {
       ariaLabel: {
         item: 'Rating {0} of {1}'
@@ -2251,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));
@@ -2264,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');
@@ -3871,7 +3903,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,
@@ -5806,7 +5838,7 @@
       });
       function onFocus(e) {
         isFocused.value = true;
-        if (!SUPPORTS_FOCUS_VISIBLE || SUPPORTS_FOCUS_VISIBLE && e.target.matches(':focus-visible')) {
+        if (matchesSelector(e.target, ':focus-visible') !== false) {
           isFocusVisible.value = true;
         }
       }
@@ -6815,7 +6847,7 @@
             }, [!slots.filter ? vue.createVNode(VIcon, {
               "key": "filter-icon",
               "icon": props.filterIcon
-            }, null) : vue.withDirectives(vue.createVNode(VDefaultsProvider, {
+            }, null) : vue.createVNode(VDefaultsProvider, {
               "key": "filter-defaults",
               "disabled": !props.filterIcon,
               "defaults": {
@@ -6823,7 +6855,7 @@
                   icon: props.filterIcon
                 }
               }
-            }, null), [[vue.resolveDirective("slot"), slots.filter, "default"]])]), [[vue.vShow, group.isSelected.value]])]
+            }, slots.filter)]), [[vue.vShow, group.isSelected.value]])]
           }), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
             "class": "v-chip__prepend"
@@ -8904,7 +8936,7 @@
         runCloseDelay();
       },
       onFocus: e => {
-        if (SUPPORTS_FOCUS_VISIBLE && !e.target.matches(':focus-visible')) return;
+        if (matchesSelector(e.target, ':focus-visible') === false) return;
         isFocused = true;
         e.stopPropagation();
         activatorEl.value = e.currentTarget || e.target;
@@ -9824,8 +9856,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();
@@ -9833,8 +9887,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) {
@@ -10748,6 +10805,7 @@
       type: Function,
       default: deepEqual
     },
+    itemColor: String,
     ...makeItemsProps({
       itemChildren: false
     })
@@ -10800,7 +10858,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));
@@ -10894,7 +10957,7 @@
         isFocused.value = true;
       }
       function onModelUpdate(v) {
-        if (v == null) model.value = [];else if (vTextFieldRef.value?.matches(':autofill') || vTextFieldRef.value?.matches(':-webkit-autofill')) {
+        if (v == null) model.value = [];else if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
           const item = items.value.find(item => item.title === v);
           if (item) {
             select(item);
@@ -10956,7 +11019,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)
@@ -11218,7 +11282,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
-      const listHasFocus = vue.ref(false);
+      const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -11251,7 +11315,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(() => {
@@ -11303,11 +11372,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');
@@ -11349,7 +11415,7 @@
         search.value = e.target.value;
       }
       function onChange(e) {
-        if (vTextFieldRef.value?.matches(':autofill') || vTextFieldRef.value?.matches(':-webkit-autofill')) {
+        if (matchesSelector(vTextFieldRef.value, ':autofill') || matchesSelector(vTextFieldRef.value, ':-webkit-autofill')) {
           const item = items.value.find(item => item.title === e.target.value);
           if (item) {
             select(item);
@@ -11473,7 +11539,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)
@@ -12521,6 +12588,7 @@
     },
     // TODO: mandatory should probably not be exposed but do this for now
     mandatory: {
+      type: [Boolean, String],
       default: 'force'
     },
     ...makeComponentProps(),
@@ -12888,7 +12956,9 @@
           "style": props.style
         }, [hasContent.value && slots.default?.()]), [[vue.vShow, groupItem.isSelected.value]])]
       }));
-      return {};
+      return {
+        groupItem
+      };
     }
   });
 
@@ -13442,6 +13512,7 @@
     const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
     const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     function roundValue(value) {
+      value = parseFloat(value);
       if (step.value <= 0) return value;
       const clamped = clamp(value, min.value, max.value);
       const offset = min.value % step.value;
@@ -13945,9 +14016,8 @@
         rtlClasses
       } = useRtl();
       const steps = useSteps(props);
-      const model = useProxiedModel(props, 'modelValue', undefined, v => {
-        const value = typeof v === 'string' ? parseFloat(v) : v == null ? steps.min.value : v;
-        return steps.roundValue(value);
+      const model = useProxiedModel(props, 'modelValue', undefined, value => {
+        return steps.roundValue(value == null ? steps.min.value : value);
       });
       const {
         min,
@@ -14741,7 +14811,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
-      const listHasFocus = vue.ref(false);
+      const listHasFocus = vue.shallowRef(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14813,7 +14883,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(() => {
@@ -15022,7 +15097,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)
@@ -15440,6 +15516,11 @@
         return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
       });
       vue.provide(VExpansionPanelSymbol, groupItem);
+      provideDefaults({
+        VExpansionPanelText: {
+          eager: vue.toRef(props, 'eager')
+        }
+      });
       useRender(() => {
         const hasText = !!(slots.text || props.text);
         const hasTitle = !!(slots.title || props.title);
@@ -15464,8 +15545,7 @@
           }, {
             default: () => [slots.title ? slots.title() : props.title]
           }), hasText && vue.createVNode(VExpansionPanelText, {
-            "key": "text",
-            "eager": props.eager
+            "key": "text"
           }, {
             default: () => [slots.text ? slots.text() : props.text]
           }), slots.default?.()]
@@ -17807,7 +17887,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,
@@ -21797,12 +21879,11 @@
   function endOfMonth(date) {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0);
   }
-  function formatYyyyMmDd(value) {
-    const formattedValue = value.split('-').map(d => d.padStart(2, '0')).join('-');
-    const offsetMin = new Date().getTimezoneOffset() / -60;
-    const offsetSign = offsetMin < 0 ? '-' : '+';
-    const offsetValue = Math.abs(offsetMin).toString().padStart(2, '0');
-    return `${formattedValue}T00:00:00.000${offsetSign}${offsetValue}:00`;
+  function parseLocalDate(value) {
+    const parts = value.split('-').map(Number);
+
+    // new Date() uses local time zone when passing individual date component values
+    return new Date(parts[0], parts[1] - 1, parts[2]);
   }
   const _YYYMMDD = /([12]\d{3}-([1-9]|0[1-9]|1[0-2])-([1-9]|0[1-9]|[12]\d|3[01]))/;
   function date(value) {
@@ -21811,7 +21892,7 @@
     if (typeof value === 'string') {
       let parsed;
       if (_YYYMMDD.test(value)) {
-        parsed = Date.parse(formatYyyyMmDd(value));
+        return parseLocalDate(value);
       } else {
         parsed = Date.parse(value);
       }
@@ -22798,7 +22879,7 @@
             "class": "v-picker__header"
           }, [slots.header()]), vue.createVNode("div", {
             "class": "v-picker__body"
-          }, [slots.default?.()]), slots.actions && vue.createVNode("div", {
+          }, [slots.default?.()]), slots.actions?.()[0]?.children && vue.createVNode("div", {
             "class": "v-picker__actions"
           }, [slots.actions()])]
         });
@@ -22866,7 +22947,7 @@
         viewMode,
         inputMode
       } = createDatePicker(props);
-      const isReversing = vue.ref(false);
+      const isReversing = vue.shallowRef(false);
       const inputModel = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'keyboardDate') : '');
       const title = vue.computed(() => t(props.title));
       const header = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
@@ -22948,7 +23029,7 @@
             "label": t(props.inputText),
             "placeholder": "dd/mm/yyyy"
           }, null)]),
-          actions: !props.hideActions ? () => vue.createVNode("div", null, [vue.createVNode(VBtn, {
+          actions: () => !props.hideActions ? vue.createVNode("div", null, [vue.createVNode(VBtn, {
             "variant": "text",
             "color": props.color,
             "onClick": onClickCancel,
@@ -23017,7 +23098,6 @@
         intersectionRef,
         isIntersecting
       } = useIntersectionObserver(entries => {}, props.rootMargin ? {
-        root: props.rootRef,
         rootMargin: props.rootMargin
       } : undefined);
       vue.watch(isIntersecting, async val => {
@@ -23042,10 +23122,10 @@
         emit
       } = _ref2;
       const rootEl = vue.ref();
-      const startStatus = vue.ref('ok');
-      const endStatus = vue.ref('ok');
+      const startStatus = vue.shallowRef('ok');
+      const endStatus = vue.shallowRef('ok');
       const margin = vue.computed(() => convertToUnit(props.margin));
-      const isIntersecting = vue.ref(false);
+      const isIntersecting = vue.shallowRef(false);
       function setScrollAmount(amount) {
         if (!rootEl.value) return;
         const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
@@ -23197,6 +23277,206 @@
 
   // 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;
+      }
+      function onKeydown(e) {
+        const array = model.value.slice();
+        const index = focusIndex.value;
+        let target = null;
+        if (e.key === 'ArrowLeft') {
+          target = 'prev';
+        } else if (e.key === 'ArrowRight') {
+          target = 'next';
+        } else if (e.key === 'Backspace') {
+          if (focusIndex.value > 0) {
+            target = 'prev';
+          }
+        } else if (e.key === 'Delete') {
+          array[focusIndex.value] = '';
+          model.value = array;
+          requestAnimationFrame(() => {
+            inputRef.value[index].select();
+          });
+        } else if (props.type === 'number' && isNaN(parseInt(e.key))) {
+          return;
+        } else 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());
+          return;
+        }
+        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',
@@ -23328,6 +23608,370 @@
     }
   });
 
+  // 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'
+    }),
+    ...omit(makeVSheetProps(), ['color']),
+    ...makeVStepperActionsProps()
+  }, '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 {
+        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: {
+          disabled
+        }
+      });
+      useRender(() => {
+        const [sheetProps] = VSheet.filterProps(props);
+        const [stepperActionProps] = VStepperActions.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, {
+          "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, vue.mergeProps({
+            "key": "stepper-actions"
+          }, stepperActionProps, {
+            "onClick:prev": prev,
+            "onClick:next": next
+          }), null))]
+        });
+      });
+      return {
+        prev,
+        next
+      };
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -23430,6 +24074,7 @@
     VMessages: VMessages,
     VNavigationDrawer: VNavigationDrawer,
     VNoSsr: VNoSsr,
+    VOtpInput: VOtpInput,
     VOverlay: VOverlay,
     VPagination: VPagination,
     VParallax: VParallax,
@@ -23462,6 +24107,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,
@@ -23699,7 +24350,7 @@
       date
     };
   }
-  const version$1 = "3.3.10";
+  const version$1 = "3.3.11";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -23713,7 +24364,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.10";
+  const version = "3.3.11";
 
   /* eslint-disable local-rules/sort-imports */