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

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-26
 * 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,116 +15609,6 @@
 
   // 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 VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
@@ -18178,6 +18237,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 +18934,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 +20398,7 @@
     VBannerActions: VBannerActions,
     VBannerText: VBannerText,
     VBottomNavigation: VBottomNavigation,
+    VBottomSheet: VBottomSheet,
     VBreadcrumbs: VBreadcrumbs,
     VBreadcrumbsDivider: VBreadcrumbsDivider,
     VBreadcrumbsItem: VBreadcrumbsItem,
@@ -19911,6 +20491,7 @@
     VSelectionControl: VSelectionControl,
     VSelectionControlGroup: VSelectionControlGroup,
     VSheet: VSheet,
+    VSkeletonLoader: VSkeletonLoader,
     VSlideGroup: VSlideGroup,
     VSlideGroupItem: VSlideGroupItem,
     VSlideXReverseTransition: VSlideXReverseTransition,
@@ -19920,6 +20501,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 +20887,6 @@
     });
   }
   function format(value, formatString, locale) {
-    const date = new Date(value);
     let options = {};
     switch (formatString) {
       case 'fullDateWithWeekday':
@@ -20319,7 +20905,11 @@
         };
         break;
       case 'keyboardDate':
-        options = {};
+        options = {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric'
+        };
         break;
       case 'monthAndDate':
         options = {
@@ -20349,7 +20939,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 +21239,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-26";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -20674,7 +21264,7 @@
       ...options
     });
   };
-  const version = "3.4.0-alpha.1-dev.2023-10-21";
+  const version = "3.4.0-alpha.1-dev.2023-10-26";
   createVuetify.version = version;
 
   exports.components = components;