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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* 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.
 */
@@ -238,6 +238,11 @@
     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'];
@@ -478,6 +483,13 @@
       return null;
     }
   }
+  function ensureValidVNode(vnodes) {
+    return vnodes.some(child => {
+      if (!vue.isVNode(child)) return true;
+      if (child.type === vue.Comment) return false;
+      return child.type !== vue.Fragment || ensureValidVNode(child.children);
+    }) ? vnodes : null;
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -870,6 +882,9 @@
   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) => ({
@@ -3306,7 +3321,7 @@
       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);
@@ -11254,6 +11269,16 @@
               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 vue.createVNode("div", {
               "key": item.value,
               "class": "v-select__selection"
@@ -11273,15 +11298,8 @@
                 }
               }
             }, {
-              default: () => [slots.chip?.({
-                item,
-                index,
-                props: slotProps
-              })]
-            }) : slots.selection?.({
-              item,
-              index
-            }) ?? vue.createVNode("span", {
+              default: () => [slotContent]
+            }) : slotContent ?? vue.createVNode("span", {
               "class": "v-select__selection-text"
             }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-select__selection-comma"
@@ -11782,6 +11800,16 @@
               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 vue.createVNode("div", {
               "key": item.value,
               "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
@@ -11802,15 +11830,8 @@
                 }
               }
             }, {
-              default: () => [slots.chip?.({
-                item,
-                index,
-                props: slotProps
-              })]
-            }) : slots.selection?.({
-              item,
-              index
-            }) ?? vue.createVNode("span", {
+              default: () => [slotContent]
+            }) : slotContent ?? vue.createVNode("span", {
               "class": "v-autocomplete__selection-text"
             }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-autocomplete__selection-comma"
@@ -12195,6 +12216,151 @@
     }
   });
 
+  // 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 = vue.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) {
+        vue.watch(() => isActive.value && props.retainFocus, val => {
+          val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
+        }, {
+          immediate: true
+        });
+      }
+      vue.watch(isActive, async val => {
+        await vue.nextTick();
+        if (val) {
+          overlay.value.contentEl?.focus({
+            preventScroll: true
+          });
+        } else {
+          overlay.value.activatorEl?.focus({
+            preventScroll: true
+          });
+        }
+      });
+      const activatorProps = vue.computed(() => vue.mergeProps({
+        'aria-haspopup': 'dialog',
+        'aria-expanded': String(isActive.value)
+      }, props.activatorProps));
+      useRender(() => {
+        const [overlayProps] = VOverlay.filterProps(props);
+        return vue.createVNode(VOverlay, vue.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 vue.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 vue.createVNode(VDialog, vue.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()
@@ -15377,6 +15543,16 @@
               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 vue.createVNode("div", {
               "key": item.value,
               "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
@@ -15397,15 +15573,8 @@
                 }
               }
             }, {
-              default: () => [slots.chip?.({
-                item,
-                index,
-                props: slotProps
-              })]
-            }) : slots.selection?.({
-              item,
-              index
-            }) ?? vue.createVNode("span", {
+              default: () => [slotContent]
+            }) : slotContent ?? vue.createVNode("span", {
               "class": "v-combobox__selection-text"
             }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-combobox__selection-comma"
@@ -15440,154 +15609,44 @@
 
   // 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 = vue.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) {
-        vue.watch(() => isActive.value && props.retainFocus, val => {
-          val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
-        }, {
-          immediate: true
-        });
-      }
-      vue.watch(isActive, async val => {
-        await vue.nextTick();
-        if (val) {
-          overlay.value.contentEl?.focus({
-            preventScroll: true
-          });
-        } else {
-          overlay.value.activatorEl?.focus({
-            preventScroll: true
-          });
-        }
-      });
-      const activatorProps = vue.computed(() => vue.mergeProps({
-        'aria-haspopup': 'dialog',
-        'aria-expanded': String(isActive.value)
-      }, props.activatorProps));
-      useRender(() => {
-        const [overlayProps] = VOverlay.filterProps(props);
-        return vue.createVNode(VOverlay, vue.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 vue.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 = vue.computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
-      provideDefaults({
-        VExpansionPanel: {
-          color: vue.toRef(props, 'color')
-        },
-        VExpansionPanelTitle: {
-          readonly: vue.toRef(props, 'readonly'),
-          static: vue.toRef(props, 'static')
+        themeClasses
+      } = provideTheme(props);
+      const variantClass = vue.computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+      provideDefaults({
+        VExpansionPanel: {
+          color: vue.toRef(props, 'color')
+        },
+        VExpansionPanelTitle: {
+          readonly: vue.toRef(props, 'readonly'),
+          static: vue.toRef(props, 'static')
         }
       });
       useRender(() => vue.createVNode(props.tag, {
@@ -16426,6 +16485,235 @@
     }
   });
 
+  // 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);
+      vue.watch(isIntersecting, async val => {
+        emit('intersect', props.side, val);
+      });
+      useRender(() => vue.createVNode("div", {
+        "class": "v-infinite-scroll-intersect",
+        "ref": intersectionRef
+      }, [vue.createTextVNode("\xA0")]));
+      return {};
+    }
+  });
+  const VInfiniteScroll = genericComponent()({
+    name: 'VInfiniteScroll',
+    props: makeVInfiniteScrollProps(),
+    emits: {
+      load: options => true
+    },
+    setup(props, _ref2) {
+      let {
+        slots,
+        emit
+      } = _ref2;
+      const rootEl = vue.ref();
+      const startStatus = vue.shallowRef('ok');
+      const endStatus = vue.shallowRef('ok');
+      const margin = vue.computed(() => convertToUnit(props.margin));
+      const isIntersecting = vue.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];
+      }
+      vue.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);
+          vue.nextTick(() => {
+            if (status === 'empty' || status === 'error') return;
+            if (status === 'ok' && side === 'start') {
+              setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+            }
+            if (props.mode !== 'manual') {
+              vue.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) ?? vue.createVNode("div", null, [t(props.emptyText)]);
+        if (props.mode === 'manual') {
+          if (status === 'loading') {
+            return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
+              "indeterminate": true,
+              "color": props.color
+            }, null);
+          }
+          return slots['load-more']?.(slotProps) ?? vue.createVNode(VBtn, {
+            "variant": "outlined",
+            "color": props.color,
+            "onClick": onClick
+          }, {
+            default: () => [t(props.loadMoreText)]
+          });
+        }
+        return slots.loading?.(slotProps) ?? vue.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 vue.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: () => [vue.createVNode("div", {
+            "class": "v-infinite-scroll__side"
+          }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+            "key": "start",
+            "side": "start",
+            "onIntersect": handleIntersect,
+            "rootRef": rootEl.value,
+            "rootMargin": margin.value
+          }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+            "key": "end",
+            "side": "end",
+            "onIntersect": handleIntersect,
+            "rootRef": rootEl.value,
+            "rootMargin": margin.value
+          }, null), vue.createVNode("div", {
+            "class": "v-infinite-scroll__side"
+          }, [renderSide('end', endStatus.value)])]
+        });
+      });
+    }
+  });
+
   const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
   const makeVItemGroupProps = propsFactory({
     ...makeComponentProps(),
@@ -18178,6 +18466,140 @@
     }
   });
 
+  // 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 vue.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(vue.toRef(props, 'color'));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        t
+      } = useLocale();
+      const items = vue.computed(() => genStructure(wrapInArray(props.type).join(',')));
+      useRender(() => {
+        const isLoading = !slots.default || props.loading;
+        return vue.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);
@@ -18741,6 +19163,392 @@
 
   // 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 vue.createVNode("div", {
+          "class": "v-stepper-actions"
+        }, [vue.createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              disabled: ['prev', true].includes(props.disabled),
+              text: t(props.prevText),
+              variant: 'text'
+            }
+          }
+        }, {
+          default: () => [slots.prev?.({
+            props: prevSlotProps
+          }) ?? vue.createVNode(VBtn, prevSlotProps, null)]
+        }), vue.createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              color: props.color,
+              disabled: ['next', true].includes(props.disabled),
+              text: t(props.nextText),
+              variant: 'tonal'
+            }
+          }
+        }, {
+          default: () => [slots.next?.({
+            props: nextSlotProps
+          }) ?? vue.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 = 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;
+      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
+          }, slots))]
+        });
+      });
+      return {
+        prev,
+        next
+      };
+    }
+  });
+
+  // Types
+
   const makeVSwitchProps = propsFactory({
     indeterminate: Boolean,
     inset: Boolean,
@@ -19819,6 +20627,7 @@
     VBannerActions: VBannerActions,
     VBannerText: VBannerText,
     VBottomNavigation: VBottomNavigation,
+    VBottomSheet: VBottomSheet,
     VBreadcrumbs: VBreadcrumbs,
     VBreadcrumbsDivider: VBreadcrumbsDivider,
     VBreadcrumbsItem: VBreadcrumbsItem,
@@ -19867,6 +20676,7 @@
     VHover: VHover,
     VIcon: VIcon,
     VImg: VImg,
+    VInfiniteScroll: VInfiniteScroll,
     VInput: VInput,
     VItem: VItem,
     VItemGroup: VItemGroup,
@@ -19911,6 +20721,7 @@
     VSelectionControl: VSelectionControl,
     VSelectionControlGroup: VSelectionControlGroup,
     VSheet: VSheet,
+    VSkeletonLoader: VSkeletonLoader,
     VSlideGroup: VSlideGroup,
     VSlideGroupItem: VSlideGroupItem,
     VSlideXReverseTransition: VSlideXReverseTransition,
@@ -19920,6 +20731,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,
@@ -20300,7 +21117,6 @@
     });
   }
   function format(value, formatString, locale) {
-    const date = new Date(value);
     let options = {};
     switch (formatString) {
       case 'fullDateWithWeekday':
@@ -20319,7 +21135,11 @@
         };
         break;
       case 'keyboardDate':
-        options = {};
+        options = {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric'
+        };
         break;
       case 'monthAndDate':
         options = {
@@ -20349,7 +21169,7 @@
           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);
@@ -20649,7 +21469,7 @@
       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
@@ -20674,7 +21494,7 @@
       ...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;
 
   exports.components = components;