@vuetify/nightly 3.4.0-alpha.1-dev.2023-10-21 → 3.4.0-alpha.1-dev.2023-10-28

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.4.0-alpha.1-dev.2023-10-21
+* Vuetify v3.4.0-alpha.1-dev.2023-10-28
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -234,6 +234,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;
+}
 const onRE = /^on[^a-z]/;
 const isOn = key => onRE.test(key);
 const bubblingEvents = ['onAfterscriptexecute', 'onAnimationcancel', 'onAnimationend', 'onAnimationiteration', 'onAnimationstart', 'onAuxclick', 'onBeforeinput', 'onBeforescriptexecute', 'onChange', 'onClick', 'onCompositionend', 'onCompositionstart', 'onCompositionupdate', 'onContextmenu', 'onCopy', 'onCut', 'onDblclick', 'onFocusin', 'onFocusout', 'onFullscreenchange', 'onFullscreenerror', 'onGesturechange', 'onGestureend', 'onGesturestart', 'onGotpointercapture', 'onInput', 'onKeydown', 'onKeypress', 'onKeyup', 'onLostpointercapture', 'onMousedown', 'onMousemove', 'onMouseout', 'onMouseover', 'onMouseup', 'onMousewheel', 'onPaste', 'onPointercancel', 'onPointerdown', 'onPointerenter', 'onPointerleave', 'onPointermove', 'onPointerout', 'onPointerover', 'onPointerup', 'onReset', 'onSelect', 'onSubmit', 'onTouchcancel', 'onTouchend', 'onTouchmove', 'onTouchstart', 'onTransitioncancel', 'onTransitionend', 'onTransitionrun', 'onTransitionstart', 'onWheel'];
@@ -474,6 +479,13 @@ function matchesSelector(el, selector) {
     return null;
   }
 }
+function ensureValidVNode(vnodes) {
+  return vnodes.some(child => {
+    if (!isVNode(child)) return true;
+    if (child.type === Comment) return false;
+    return child.type !== Fragment || ensureValidVNode(child.children);
+  }) ? vnodes : null;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -866,6 +878,9 @@ function toXYZ(_ref) {
 function isCssColor(color) {
   return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
 }
+function isParsableColor(color) {
+  return isCssColor(color) && !/^((rgb|hsl)a?\()?var\(--/.test(color);
+}
 const cssColorRe = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/;
 const mappers = {
   rgb: (r, g, b, a) => ({
@@ -3302,7 +3317,7 @@ function useColor(colors) {
     if (colors.value.background) {
       if (isCssColor(colors.value.background)) {
         styles.backgroundColor = colors.value.background;
-        if (!colors.value.text) {
+        if (!colors.value.text && isParsableColor(colors.value.background)) {
           const backgroundColor = parseColor(colors.value.background);
           if (backgroundColor.a == null || backgroundColor.a === 1) {
             const textColor = getForeground(backgroundColor);
@@ -11250,6 +11265,16 @@ const VSelect = genericComponent()({
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
+          const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
+          const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
+            item,
+            index,
+            props: slotProps
+          }) : slots.selection({
+            item,
+            index
+          })) : undefined;
+          if (hasSlot && !slotContent) return undefined;
           return createVNode("div", {
             "key": item.value,
             "class": "v-select__selection"
@@ -11269,15 +11294,8 @@ const VSelect = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip?.({
-              item,
-              index,
-              props: slotProps
-            })]
-          }) : slots.selection?.({
-            item,
-            index
-          }) ?? createVNode("span", {
+            default: () => [slotContent]
+          }) : slotContent ?? createVNode("span", {
             "class": "v-select__selection-text"
           }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
             "class": "v-select__selection-comma"
@@ -11778,6 +11796,16 @@ const VAutocomplete = genericComponent()({
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
+          const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
+          const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
+            item,
+            index,
+            props: slotProps
+          }) : slots.selection({
+            item,
+            index
+          })) : undefined;
+          if (hasSlot && !slotContent) return undefined;
           return createVNode("div", {
             "key": item.value,
             "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
@@ -11798,15 +11826,8 @@ const VAutocomplete = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip?.({
-              item,
-              index,
-              props: slotProps
-            })]
-          }) : slots.selection?.({
-            item,
-            index
-          }) ?? createVNode("span", {
+            default: () => [slotContent]
+          }) : slotContent ?? createVNode("span", {
             "class": "v-autocomplete__selection-text"
           }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
             "class": "v-autocomplete__selection-comma"
@@ -12191,6 +12212,151 @@ const VBottomNavigation = genericComponent()({
   }
 });
 
+// Types
+
+const makeVDialogProps = propsFactory({
+  fullscreen: Boolean,
+  retainFocus: {
+    type: Boolean,
+    default: true
+  },
+  scrollable: Boolean,
+  ...makeVOverlayProps({
+    origin: 'center center',
+    scrollStrategy: 'block',
+    transition: {
+      component: VDialogTransition
+    },
+    zIndex: 2400
+  })
+}, 'VDialog');
+const VDialog = genericComponent()({
+  name: 'VDialog',
+  props: makeVDialogProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      scopeId
+    } = useScopeId();
+    const overlay = ref();
+    function onFocusin(e) {
+      const before = e.relatedTarget;
+      const after = e.target;
+      if (before !== after && overlay.value?.contentEl &&
+      // We're the topmost dialog
+      overlay.value?.globalTop &&
+      // It isn't the document or the dialog body
+      ![document, overlay.value.contentEl].includes(after) &&
+      // It isn't inside the dialog body
+      !overlay.value.contentEl.contains(after)) {
+        const focusable = focusableChildren(overlay.value.contentEl);
+        if (!focusable.length) return;
+        const firstElement = focusable[0];
+        const lastElement = focusable[focusable.length - 1];
+        if (before === firstElement) {
+          lastElement.focus();
+        } else {
+          firstElement.focus();
+        }
+      }
+    }
+    if (IN_BROWSER) {
+      watch(() => isActive.value && props.retainFocus, val => {
+        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+      }, {
+        immediate: true
+      });
+    }
+    watch(isActive, async val => {
+      await nextTick();
+      if (val) {
+        overlay.value.contentEl?.focus({
+          preventScroll: true
+        });
+      } else {
+        overlay.value.activatorEl?.focus({
+          preventScroll: true
+        });
+      }
+    });
+    const activatorProps = computed(() => mergeProps({
+      'aria-haspopup': 'dialog',
+      'aria-expanded': String(isActive.value)
+    }, props.activatorProps));
+    useRender(() => {
+      const [overlayProps] = VOverlay.filterProps(props);
+      return createVNode(VOverlay, mergeProps({
+        "ref": overlay,
+        "class": ['v-dialog', {
+          'v-dialog--fullscreen': props.fullscreen,
+          'v-dialog--scrollable': props.scrollable
+        }, props.class],
+        "style": props.style
+      }, overlayProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "aria-modal": "true",
+        "activatorProps": activatorProps.value,
+        "role": "dialog"
+      }, scopeId), {
+        activator: slots.activator,
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(VDefaultsProvider, {
+            "root": "VDialog"
+          }, {
+            default: () => [slots.default?.(...args)]
+          });
+        }
+      });
+    });
+    return forwardRefs({}, overlay);
+  }
+});
+
+// Types
+
+const makeVBottomSheetProps = propsFactory({
+  inset: Boolean,
+  ...makeVDialogProps({
+    transition: 'bottom-sheet-transition'
+  })
+}, 'VBottomSheet');
+const VBottomSheet = genericComponent()({
+  name: 'VBottomSheet',
+  props: makeVBottomSheetProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    useRender(() => {
+      const [dialogProps] = VDialog.filterProps(props);
+      return createVNode(VDialog, mergeProps(dialogProps, {
+        "contentClass": ['v-bottom-sheet__content', props.contentClass],
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "class": ['v-bottom-sheet', {
+          'v-bottom-sheet--inset': props.inset
+        }, props.class],
+        "style": props.style
+      }), slots);
+    });
+    return {};
+  }
+});
+
 const makeVBreadcrumbsDividerProps = propsFactory({
   divider: [Number, String],
   ...makeComponentProps()
@@ -15373,6 +15539,16 @@ const VCombobox = genericComponent()({
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
+          const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
+          const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
+            item,
+            index,
+            props: slotProps
+          }) : slots.selection({
+            item,
+            index
+          })) : undefined;
+          if (hasSlot && !slotContent) return undefined;
           return createVNode("div", {
             "key": item.value,
             "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
@@ -15393,15 +15569,8 @@ const VCombobox = genericComponent()({
               }
             }
           }, {
-            default: () => [slots.chip?.({
-              item,
-              index,
-              props: slotProps
-            })]
-          }) : slots.selection?.({
-            item,
-            index
-          }) ?? createVNode("span", {
+            default: () => [slotContent]
+          }) : slotContent ?? createVNode("span", {
             "class": "v-combobox__selection-text"
           }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
             "class": "v-combobox__selection-comma"
@@ -15436,154 +15605,44 @@ const VCombobox = genericComponent()({
 
 // Types
 
-const makeVDialogProps = propsFactory({
-  fullscreen: Boolean,
-  retainFocus: {
-    type: Boolean,
-    default: true
+const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
+const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+const makeVExpansionPanelsProps = propsFactory({
+  color: String,
+  static: Boolean,
+  variant: {
+    type: String,
+    default: 'default',
+    validator: v => allowedVariants.includes(v)
   },
-  scrollable: Boolean,
-  ...makeVOverlayProps({
-    origin: 'center center',
-    scrollStrategy: 'block',
-    transition: {
-      component: VDialogTransition
-    },
-    zIndex: 2400
-  })
-}, 'VDialog');
-const VDialog = genericComponent()({
-  name: 'VDialog',
-  props: makeVDialogProps(),
+  readonly: Boolean,
+  ...makeComponentProps(),
+  ...makeGroupProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'VExpansionPanels');
+const VExpansionPanels = genericComponent()({
+  name: 'VExpansionPanels',
+  props: makeVExpansionPanelsProps(),
   emits: {
-    'update:modelValue': value => true
+    'update:modelValue': val => true
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
-    const isActive = useProxiedModel(props, 'modelValue');
+    useGroup(props, VExpansionPanelSymbol);
     const {
-      scopeId
-    } = useScopeId();
-    const overlay = ref();
-    function onFocusin(e) {
-      const before = e.relatedTarget;
-      const after = e.target;
-      if (before !== after && overlay.value?.contentEl &&
-      // We're the topmost dialog
-      overlay.value?.globalTop &&
-      // It isn't the document or the dialog body
-      ![document, overlay.value.contentEl].includes(after) &&
-      // It isn't inside the dialog body
-      !overlay.value.contentEl.contains(after)) {
-        const focusable = focusableChildren(overlay.value.contentEl);
-        if (!focusable.length) return;
-        const firstElement = focusable[0];
-        const lastElement = focusable[focusable.length - 1];
-        if (before === firstElement) {
-          lastElement.focus();
-        } else {
-          firstElement.focus();
-        }
-      }
-    }
-    if (IN_BROWSER) {
-      watch(() => isActive.value && props.retainFocus, val => {
-        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
-      }, {
-        immediate: true
-      });
-    }
-    watch(isActive, async val => {
-      await nextTick();
-      if (val) {
-        overlay.value.contentEl?.focus({
-          preventScroll: true
-        });
-      } else {
-        overlay.value.activatorEl?.focus({
-          preventScroll: true
-        });
-      }
-    });
-    const activatorProps = computed(() => mergeProps({
-      'aria-haspopup': 'dialog',
-      'aria-expanded': String(isActive.value)
-    }, props.activatorProps));
-    useRender(() => {
-      const [overlayProps] = VOverlay.filterProps(props);
-      return createVNode(VOverlay, mergeProps({
-        "ref": overlay,
-        "class": ['v-dialog', {
-          'v-dialog--fullscreen': props.fullscreen,
-          'v-dialog--scrollable': props.scrollable
-        }, props.class],
-        "style": props.style
-      }, overlayProps, {
-        "modelValue": isActive.value,
-        "onUpdate:modelValue": $event => isActive.value = $event,
-        "aria-modal": "true",
-        "activatorProps": activatorProps.value,
-        "role": "dialog"
-      }, scopeId), {
-        activator: slots.activator,
-        default: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          return createVNode(VDefaultsProvider, {
-            "root": "VDialog"
-          }, {
-            default: () => [slots.default?.(...args)]
-          });
-        }
-      });
-    });
-    return forwardRefs({}, overlay);
-  }
-});
-
-// Types
-
-const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
-const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
-const makeVExpansionPanelsProps = propsFactory({
-  color: String,
-  static: Boolean,
-  variant: {
-    type: String,
-    default: 'default',
-    validator: v => allowedVariants.includes(v)
-  },
-  readonly: Boolean,
-  ...makeComponentProps(),
-  ...makeGroupProps(),
-  ...makeTagProps(),
-  ...makeThemeProps()
-}, 'VExpansionPanels');
-const VExpansionPanels = genericComponent()({
-  name: 'VExpansionPanels',
-  props: makeVExpansionPanelsProps(),
-  emits: {
-    'update:modelValue': val => true
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    useGroup(props, VExpansionPanelSymbol);
-    const {
-      themeClasses
-    } = provideTheme(props);
-    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
-    provideDefaults({
-      VExpansionPanel: {
-        color: toRef(props, 'color')
-      },
-      VExpansionPanelTitle: {
-        readonly: toRef(props, 'readonly'),
-        static: toRef(props, 'static')
+      themeClasses
+    } = provideTheme(props);
+    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+    provideDefaults({
+      VExpansionPanel: {
+        color: toRef(props, 'color')
+      },
+      VExpansionPanelTitle: {
+        readonly: toRef(props, 'readonly'),
+        static: toRef(props, 'static')
       }
     });
     useRender(() => createVNode(props.tag, {
@@ -16422,6 +16481,235 @@ const VHover = genericComponent()({
   }
 });
 
+// Types
+
+const makeVInfiniteScrollProps = propsFactory({
+  color: String,
+  direction: {
+    type: String,
+    default: 'vertical',
+    validator: v => ['vertical', 'horizontal'].includes(v)
+  },
+  side: {
+    type: String,
+    default: 'end',
+    validator: v => ['start', 'end', 'both'].includes(v)
+  },
+  mode: {
+    type: String,
+    default: 'intersect',
+    validator: v => ['intersect', 'manual'].includes(v)
+  },
+  margin: [Number, String],
+  loadMoreText: {
+    type: String,
+    default: '$vuetify.infiniteScroll.loadMore'
+  },
+  emptyText: {
+    type: String,
+    default: '$vuetify.infiniteScroll.empty'
+  },
+  ...makeDimensionProps(),
+  ...makeTagProps()
+}, 'VInfiniteScroll');
+const VInfiniteScrollIntersect = defineComponent({
+  name: 'VInfiniteScrollIntersect',
+  props: {
+    side: {
+      type: String,
+      required: true
+    },
+    rootRef: null,
+    rootMargin: String
+  },
+  emits: {
+    intersect: (side, isIntersecting) => true
+  },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver(entries => {}, props.rootMargin ? {
+      rootMargin: props.rootMargin
+    } : undefined);
+    watch(isIntersecting, async val => {
+      emit('intersect', props.side, val);
+    });
+    useRender(() => createVNode("div", {
+      "class": "v-infinite-scroll-intersect",
+      "ref": intersectionRef
+    }, [createTextVNode("\xA0")]));
+    return {};
+  }
+});
+const VInfiniteScroll = genericComponent()({
+  name: 'VInfiniteScroll',
+  props: makeVInfiniteScrollProps(),
+  emits: {
+    load: options => true
+  },
+  setup(props, _ref2) {
+    let {
+      slots,
+      emit
+    } = _ref2;
+    const rootEl = ref();
+    const startStatus = shallowRef('ok');
+    const endStatus = shallowRef('ok');
+    const margin = computed(() => convertToUnit(props.margin));
+    const isIntersecting = shallowRef(false);
+    function setScrollAmount(amount) {
+      if (!rootEl.value) return;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      rootEl.value[property] = amount;
+    }
+    function getScrollAmount() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      return rootEl.value[property];
+    }
+    function getScrollSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth';
+      return rootEl.value[property];
+    }
+    function getContainerSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth';
+      return rootEl.value[property];
+    }
+    onMounted(() => {
+      if (!rootEl.value) return;
+      if (props.side === 'start') {
+        setScrollAmount(getScrollSize());
+      } else if (props.side === 'both') {
+        setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2);
+      }
+    });
+    function setStatus(side, status) {
+      if (side === 'start') {
+        startStatus.value = status;
+      } else if (side === 'end') {
+        endStatus.value = status;
+      }
+    }
+    function getStatus(side) {
+      return side === 'start' ? startStatus.value : endStatus.value;
+    }
+    let previousScrollSize = 0;
+    function handleIntersect(side, _isIntersecting) {
+      isIntersecting.value = _isIntersecting;
+      if (isIntersecting.value) {
+        intersecting(side);
+      }
+    }
+    function intersecting(side) {
+      if (props.mode !== 'manual' && !isIntersecting.value) return;
+      const status = getStatus(side);
+      if (!rootEl.value || status === 'loading') return;
+      previousScrollSize = getScrollSize();
+      setStatus(side, 'loading');
+      function done(status) {
+        setStatus(side, status);
+        nextTick(() => {
+          if (status === 'empty' || status === 'error') return;
+          if (status === 'ok' && side === 'start') {
+            setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+          }
+          if (props.mode !== 'manual') {
+            nextTick(() => {
+              window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                  window.requestAnimationFrame(() => {
+                    intersecting(side);
+                  });
+                });
+              });
+            });
+          }
+        });
+      }
+      emit('load', {
+        side,
+        done
+      });
+    }
+    const {
+      t
+    } = useLocale();
+    function renderSide(side, status) {
+      if (props.side !== side && props.side !== 'both') return;
+      const onClick = () => intersecting(side);
+      const slotProps = {
+        side,
+        props: {
+          onClick,
+          color: props.color
+        }
+      };
+      if (status === 'error') return slots.error?.(slotProps);
+      if (status === 'empty') return slots.empty?.(slotProps) ?? createVNode("div", null, [t(props.emptyText)]);
+      if (props.mode === 'manual') {
+        if (status === 'loading') {
+          return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+            "indeterminate": true,
+            "color": props.color
+          }, null);
+        }
+        return slots['load-more']?.(slotProps) ?? createVNode(VBtn, {
+          "variant": "outlined",
+          "color": props.color,
+          "onClick": onClick
+        }, {
+          default: () => [t(props.loadMoreText)]
+        });
+      }
+      return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "color": props.color
+      }, null);
+    }
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    useRender(() => {
+      const Tag = props.tag;
+      const hasStartIntersect = props.side === 'start' || props.side === 'both';
+      const hasEndIntersect = props.side === 'end' || props.side === 'both';
+      const intersectMode = props.mode === 'intersect';
+      return createVNode(Tag, {
+        "ref": rootEl,
+        "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+          'v-infinite-scroll--start': hasStartIntersect,
+          'v-infinite-scroll--end': hasEndIntersect
+        }],
+        "style": dimensionStyles.value
+      }, {
+        default: () => [createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+          "key": "start",
+          "side": "start",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+          "key": "end",
+          "side": "end",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('end', endStatus.value)])]
+      });
+    });
+  }
+});
+
 const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
 const makeVItemGroupProps = propsFactory({
   ...makeComponentProps(),
@@ -18174,6 +18462,140 @@ const VRating = genericComponent()({
   }
 });
 
+// Types
+
+const rootTypes = {
+  actions: 'button@2',
+  article: 'heading, paragraph',
+  avatar: 'avatar',
+  button: 'button',
+  card: 'image, heading',
+  'card-avatar': 'image, list-item-avatar',
+  chip: 'chip',
+  'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',
+  'date-picker-options': 'text, avatar@2',
+  'date-picker-days': 'avatar@28',
+  divider: 'divider',
+  heading: 'heading',
+  image: 'image',
+  'list-item': 'text',
+  'list-item-avatar': 'avatar, text',
+  'list-item-two-line': 'sentences',
+  'list-item-avatar-two-line': 'avatar, sentences',
+  'list-item-three-line': 'paragraph',
+  'list-item-avatar-three-line': 'avatar, paragraph',
+  ossein: 'ossein',
+  paragraph: 'text@3',
+  sentences: 'text@2',
+  subtitle: 'text',
+  table: 'table-heading, table-thead, table-tbody, table-tfoot',
+  'table-heading': 'chip, text',
+  'table-thead': 'heading@6',
+  'table-tbody': 'table-row-divider@6',
+  'table-row-divider': 'table-row, divider',
+  'table-row': 'text@6',
+  'table-tfoot': 'text@2, avatar@2',
+  text: 'text'
+};
+function genBone(type) {
+  let children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return createVNode("div", {
+    "class": ['v-skeleton-loader__bone', `v-skeleton-loader__${type}`]
+  }, [children]);
+}
+function genBones(bone) {
+  // e.g. 'text@3'
+  const [type, length] = bone.split('@');
+
+  // Generate a length array based upon
+  // value after @ in the bone string
+  return Array.from({
+    length
+  }).map(() => genStructure(type));
+}
+function genStructure(type) {
+  let children = [];
+  if (!type) return children;
+
+  // TODO: figure out a better way to type this
+  const bone = rootTypes[type];
+
+  // End of recursion, do nothing
+  /* eslint-disable-next-line no-empty, brace-style */
+  if (type === bone) ;
+  // Array of values - e.g. 'heading, paragraph, text@2'
+  else if (type.includes(',')) return mapBones(type);
+  // Array of values - e.g. 'paragraph@4'
+  else if (type.includes('@')) return genBones(type);
+  // Array of values - e.g. 'card@2'
+  else if (bone.includes(',')) children = mapBones(bone);
+  // Array of values - e.g. 'list-item@2'
+  else if (bone.includes('@')) children = genBones(bone);
+  // Single value - e.g. 'card-heading'
+  else if (bone) children.push(genStructure(bone));
+  return [genBone(type, children)];
+}
+function mapBones(bones) {
+  // Remove spaces and return array of structures
+  return bones.replace(/\s/g, '').split(',').map(genStructure);
+}
+const makeVSkeletonLoaderProps = propsFactory({
+  boilerplate: Boolean,
+  color: String,
+  loading: Boolean,
+  loadingText: {
+    type: String,
+    default: '$vuetify.loading'
+  },
+  type: {
+    type: [String, Array],
+    default: 'ossein'
+  },
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeThemeProps()
+}, 'VSkeletonLoader');
+const VSkeletonLoader = genericComponent()({
+  name: 'VSkeletonLoader',
+  props: makeVSkeletonLoaderProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      t
+    } = useLocale();
+    const items = computed(() => genStructure(wrapInArray(props.type).join(',')));
+    useRender(() => {
+      const isLoading = !slots.default || props.loading;
+      return createVNode("div", {
+        "class": ['v-skeleton-loader', {
+          'v-skeleton-loader--boilerplate': props.boilerplate
+        }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value],
+        "style": [backgroundColorStyles.value, isLoading ? dimensionStyles.value : {}],
+        "aria-busy": !props.boilerplate ? isLoading : undefined,
+        "aria-live": !props.boilerplate ? 'polite' : undefined,
+        "aria-label": !props.boilerplate ? t(props.loadingText) : undefined,
+        "role": !props.boilerplate ? 'alert' : undefined
+      }, [isLoading ? items.value : slots.default?.()]);
+    });
+    return {};
+  }
+});
+
 function bias(val) {
   const c = 0.501;
   const x = Math.abs(val);
@@ -18737,6 +19159,392 @@ const VSnackbar = 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(() => {
+      const prevSlotProps = {
+        onClick: onClickPrev
+      };
+      const nextSlotProps = {
+        onClick: onClickNext
+      };
+      return createVNode("div", {
+        "class": "v-stepper-actions"
+      }, [createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            disabled: ['prev', true].includes(props.disabled),
+            text: t(props.prevText),
+            variant: 'text'
+          }
+        }
+      }, {
+        default: () => [slots.prev?.({
+          props: prevSlotProps
+        }) ?? createVNode(VBtn, prevSlotProps, null)]
+      }), createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            color: props.color,
+            disabled: ['next', true].includes(props.disabled),
+            text: t(props.nextText),
+            variant: 'tonal'
+          }
+        }
+      }, {
+        default: () => [slots.next?.({
+          props: nextSlotProps
+        }) ?? createVNode(VBtn, nextSlotProps, 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;
+    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
+        }, slots))]
+      });
+    });
+    return {
+      prev,
+      next
+    };
+  }
+});
+
+// Types
+
 const makeVSwitchProps = propsFactory({
   indeterminate: Boolean,
   inset: Boolean,
@@ -19815,6 +20623,7 @@ var components = /*#__PURE__*/Object.freeze({
   VBannerActions: VBannerActions,
   VBannerText: VBannerText,
   VBottomNavigation: VBottomNavigation,
+  VBottomSheet: VBottomSheet,
   VBreadcrumbs: VBreadcrumbs,
   VBreadcrumbsDivider: VBreadcrumbsDivider,
   VBreadcrumbsItem: VBreadcrumbsItem,
@@ -19863,6 +20672,7 @@ var components = /*#__PURE__*/Object.freeze({
   VHover: VHover,
   VIcon: VIcon,
   VImg: VImg,
+  VInfiniteScroll: VInfiniteScroll,
   VInput: VInput,
   VItem: VItem,
   VItemGroup: VItemGroup,
@@ -19907,6 +20717,7 @@ var components = /*#__PURE__*/Object.freeze({
   VSelectionControl: VSelectionControl,
   VSelectionControlGroup: VSelectionControlGroup,
   VSheet: VSheet,
+  VSkeletonLoader: VSkeletonLoader,
   VSlideGroup: VSlideGroup,
   VSlideGroupItem: VSlideGroupItem,
   VSlideXReverseTransition: VSlideXReverseTransition,
@@ -19916,6 +20727,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,
@@ -20296,7 +21113,6 @@ function getWeekdays(locale) {
   });
 }
 function format(value, formatString, locale) {
-  const date = new Date(value);
   let options = {};
   switch (formatString) {
     case 'fullDateWithWeekday':
@@ -20315,7 +21131,11 @@ function format(value, formatString, locale) {
       };
       break;
     case 'keyboardDate':
-      options = {};
+      options = {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+      };
       break;
     case 'monthAndDate':
       options = {
@@ -20345,7 +21165,7 @@ function format(value, formatString, locale) {
         timeZoneName: 'short'
       };
   }
-  return new Intl.DateTimeFormat(locale, options).format(date);
+  return new Intl.DateTimeFormat(locale, options).format(date(value) ?? undefined);
 }
 function toISO(adapter, value) {
   const date = adapter.toJsDate(value);
@@ -20645,7 +21465,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.0-alpha.1-dev.2023-10-21";
+const version$1 = "3.4.0-alpha.1-dev.2023-10-28";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20670,7 +21490,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.4.0-alpha.1-dev.2023-10-21";
+const version = "3.4.0-alpha.1-dev.2023-10-28";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };