vuetify 3.5.16 → 3.5.18

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.5.16
+* Vuetify v3.5.18
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, 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, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, ref, 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, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1931,6 +1931,7 @@ var en = {
   badge: 'Badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel'
@@ -4155,6 +4156,7 @@ function useGroup(props, injectKey) {
     const index = children.indexOf(vm);
     if (unref(unwrapped.value) == null) {
       unwrapped.value = index;
+      unwrapped.useIndexAsValue = true;
     }
     if (index > -1) {
       items.splice(index, 0, unwrapped);
@@ -4187,6 +4189,14 @@ function useGroup(props, injectKey) {
   onBeforeUnmount(() => {
     isUnmounted = true;
   });
+  onUpdated(() => {
+    // #19655 update the items that use the index as the value.
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].useIndexAsValue) {
+        items[i].value = i;
+      }
+    }
+  });
   function select(id, value) {
     const item = items.find(item => item.id === id);
     if (value && item?.disabled) return;
@@ -4775,6 +4785,65 @@ const VProgressCircular = genericComponent()({
   }
 });
 
+// Composables
+
+// Types
+
+const oppositeMap = {
+  center: 'center',
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const makeLocationProps = propsFactory({
+  location: String
+}, 'location');
+function useLocation(props) {
+  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let offset = arguments.length > 2 ? arguments[2] : undefined;
+  const {
+    isRtl
+  } = useRtl();
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+    function getOffset(side) {
+      return offset ? offset(side) : 0;
+    }
+    const styles = {};
+    if (side !== 'center') {
+      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== 'center') {
+      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === 'center') styles.top = styles.left = '50%';else {
+        styles[{
+          top: 'left',
+          bottom: 'left',
+          left: 'top',
+          right: 'top'
+        }[side]] = '50%';
+      }
+      styles.transform = {
+        top: 'translateX(-50%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateY(-50%)',
+        right: 'translateY(-50%)',
+        center: 'translate(-50%, -50%)'
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+
 const makeVProgressLinearProps = propsFactory({
   absolute: Boolean,
   active: {
@@ -4807,6 +4876,9 @@ const makeVProgressLinearProps = propsFactory({
   striped: Boolean,
   roundedBar: Boolean,
   ...makeComponentProps(),
+  ...makeLocationProps({
+    location: 'top'
+  }),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeThemeProps()
@@ -4829,6 +4901,9 @@ const VProgressLinear = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -4878,8 +4953,11 @@ const VProgressLinear = genericComponent()({
         'v-progress-linear--striped': props.striped
       }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
       "style": [{
+        bottom: props.location === 'bottom' ? 0 : undefined,
+        top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
-        '--v-progress-linear-height': convertToUnit(height.value)
+        '--v-progress-linear-height': convertToUnit(height.value),
+        ...(props.absolute ? locationStyles.value : {})
       }, props.style],
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
@@ -4965,65 +5043,6 @@ function LoaderSlot(props, _ref) {
   }, null)]);
 }
 
-// Composables
-
-// Types
-
-const oppositeMap = {
-  center: 'center',
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
-const makeLocationProps = propsFactory({
-  location: String
-}, 'location');
-function useLocation(props) {
-  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let offset = arguments.length > 2 ? arguments[2] : undefined;
-  const {
-    isRtl
-  } = useRtl();
-  const locationStyles = computed(() => {
-    if (!props.location) return {};
-    const {
-      side,
-      align
-    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-    function getOffset(side) {
-      return offset ? offset(side) : 0;
-    }
-    const styles = {};
-    if (side !== 'center') {
-      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-    }
-    if (align !== 'center') {
-      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-    } else {
-      if (side === 'center') styles.top = styles.left = '50%';else {
-        styles[{
-          top: 'left',
-          bottom: 'left',
-          left: 'top',
-          right: 'top'
-        }[side]] = '50%';
-      }
-      styles.transform = {
-        top: 'translateX(-50%)',
-        bottom: 'translateX(-50%)',
-        left: 'translateY(-50%)',
-        right: 'translateY(-50%)',
-        center: 'translate(-50%, -50%)'
-      }[side];
-    }
-    return styles;
-  });
-  return {
-    locationStyles
-  };
-}
-
 // Utilities
 
 // Types
@@ -6738,6 +6757,7 @@ const makeVInputProps = propsFactory({
   'onClick:append': EventProp(),
   ...makeComponentProps(),
   ...makeDensityProps(),
+  ...makeThemeProps(),
   ...makeValidationProps()
 }, 'VInput');
 const VInput = genericComponent()({
@@ -6757,6 +6777,9 @@ const VInput = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
@@ -6810,7 +6833,7 @@ const VInput = genericComponent()({
         "class": ['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, rtlClasses.value, validationClasses.value, props.class],
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
         "style": props.style
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
@@ -9166,7 +9189,8 @@ const VList = genericComponent()({
       if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
     }
     function onKeydown(e) {
-      if (!contentRef.value) return;
+      const target = e.target;
+      if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
       if (e.key === 'ArrowDown') {
         focus('next');
       } else if (e.key === 'ArrowUp') {
@@ -12080,6 +12104,10 @@ const VSelect = genericComponent()({
       const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
       if (item !== undefined) {
         model.value = [item];
+        const index = displayItems.value.indexOf(item);
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
       }
     }
 
@@ -12128,7 +12156,7 @@ const VSelect = genericComponent()({
         vTextFieldRef.value.value = '';
       }
     }
-    watch([menu, model], () => {
+    watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
         IN_BROWSER && window.requestAnimationFrame(() => {
@@ -12582,16 +12610,14 @@ const VAutocomplete = genericComponent()({
         listRef.value?.focus('next');
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -12639,7 +12665,7 @@ const VAutocomplete = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     const isSelecting = shallowRef(false);
 
@@ -13277,12 +13303,12 @@ const VDialog = genericComponent()({
   name: 'VDialog',
   props: makeVDialogProps(),
   emits: {
-    'click:outside': e => true,
     'update:modelValue': value => true,
     afterLeave: () => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
@@ -13325,6 +13351,9 @@ const VDialog = genericComponent()({
         });
       }
     }
+    function onAfterLeave() {
+      emit('afterLeave');
+    }
     watch(isActive, async val => {
       if (!val) {
         await nextTick();
@@ -13356,7 +13385,8 @@ const VDialog = genericComponent()({
         "activatorProps": activatorProps,
         "contentProps": contentProps,
         "role": "dialog",
-        "onAfterEnter": onAfterEnter
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
       }, scopeId), {
         activator: slots.activator,
         default: function () {
@@ -14406,7 +14436,7 @@ const VCarouselItem = genericComponent()({
       const imgProps = VImg.filterProps(props);
       const windowItemProps = VWindowItem.filterProps(props);
       return createVNode(VWindowItem, mergeProps({
-        "class": "v-carousel-item"
+        "class": ['v-carousel-item', props.class]
       }, windowItemProps), {
         default: () => [createVNode(VImg, mergeProps(attrs, imgProps), slots)]
       });
@@ -16411,16 +16441,14 @@ const VCombobox = genericComponent()({
         if (hasSelectionSlot.value) _search.value = '';
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -16489,7 +16517,7 @@ const VCombobox = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     watch(isFocused, (val, oldVal) => {
       if (val || val === oldVal) return;
@@ -21350,8 +21378,18 @@ const VDatePicker = genericComponent()({
       emit('update:year', value);
     }
     watch(model, (val, oldVal) => {
-      const before = adapter.date(wrapInArray(val)[0]);
-      const after = adapter.date(wrapInArray(oldVal)[0]);
+      const before = adapter.date(wrapInArray(oldVal)[oldVal.length - 1]);
+      const after = adapter.date(wrapInArray(val)[val.length - 1]);
+      const newMonth = adapter.getMonth(after);
+      const newYear = adapter.getYear(after);
+      if (newMonth !== month.value) {
+        month.value = newMonth;
+        onUpdateMonth(month.value);
+      }
+      if (newYear !== year.value) {
+        year.value = newYear;
+        onUpdateYear(year.value);
+      }
       isReversing.value = adapter.isBefore(before, after);
     });
     useRender(() => {
@@ -21705,7 +21743,7 @@ const makeVFileInputProps = propsFactory({
   }),
   modelValue: {
     type: [Array, Object],
-    default: () => [],
+    default: props => props.multiple ? [] : null,
     validator: val => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
@@ -22734,6 +22772,7 @@ function oops$1() {
 
 function useTouch(_ref) {
   let {
+    el,
     isActive,
     isTemporary,
     width,
@@ -22783,10 +22822,10 @@ function useTouch(_ref) {
     const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
     const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
-      maybeDragging = true;
       start = [touchX, touchY];
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      maybeDragging = offset.value > -20 && offset.value < 80;
       endTouch(e);
       addMovement(e);
     }
@@ -22846,6 +22885,18 @@ function useTouch(_ref) {
       transition: 'none'
     } : undefined;
   });
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null;
+    const transition = el.value?.style.transition ?? null;
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+    });
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform);
+      el.value?.style.setProperty('transition', transition);
+    });
+  });
   return {
     isDragging,
     dragProgress,
@@ -22978,9 +23029,9 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       isDragging,
-      dragProgress,
-      dragStyles
+      dragProgress
     } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -23050,7 +23101,7 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, scopeId, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -24160,9 +24211,6 @@ const VSnackbar = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      locationStyles
-    } = useLocation(props);
     const {
       positionClasses
     } = usePosition(props);
@@ -24184,6 +24232,15 @@ const VSnackbar = genericComponent()({
     const overlay = ref();
     const timerRef = ref();
     const isHovering = shallowRef(false);
+    const startY = shallowRef(0);
+    const mainStyles = ref();
+    const hasLayout = inject$1(VuetifyLayoutKey, undefined);
+    useToggleScope(() => !!hasLayout, () => {
+      const layout = useLayout();
+      watchEffect(() => {
+        mainStyles.value = layout.mainStyles.value;
+      });
+    });
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -24213,6 +24270,20 @@ const VSnackbar = genericComponent()({
       isHovering.value = false;
       startTimeout();
     }
+    function onTouchstart(event) {
+      startY.value = event.touches[0].clientY;
+    }
+    function onTouchend(event) {
+      if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) {
+        isActive.value = false;
+      }
+    }
+    const locationClasses = computed(() => {
+      return props.location.split(' ').reduce((acc, loc) => {
+        acc[`v-snackbar--${loc}`] = true;
+        return acc;
+      }, {});
+    });
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props);
       const hasContent = !!(slots.default || slots.text || props.text);
@@ -24223,14 +24294,14 @@ const VSnackbar = genericComponent()({
           'v-snackbar--multi-line': props.multiLine && !props.vertical,
           'v-snackbar--timer': !!props.timer,
           'v-snackbar--vertical': props.vertical
-        }, positionClasses.value, props.class],
-        "style": props.style
+        }, locationClasses.value, positionClasses.value, props.class],
+        "style": [mainStyles.value, props.style]
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "contentProps": mergeProps({
           class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-          style: [locationStyles.value, colorStyles.value],
+          style: [colorStyles.value],
           onPointerenter,
           onPointerleave
         }, overlayProps.contentProps),
@@ -24238,7 +24309,9 @@ const VSnackbar = genericComponent()({
         "noClickAnimation": true,
         "scrim": false,
         "scrollStrategy": "none",
-        "_disableGlobalStack": true
+        "_disableGlobalStack": true,
+        "onTouchstartPassive": onTouchstart,
+        "onTouchend": onTouchend
       }, scopeId), {
         default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
           "key": "timer",
@@ -26410,6 +26483,7 @@ const makeVFabProps = propsFactory({
   app: Boolean,
   appear: Boolean,
   extended: Boolean,
+  layout: Boolean,
   location: {
     type: String,
     default: 'bottom end'
@@ -26460,8 +26534,8 @@ const VFab = genericComponent()({
         id: props.name,
         order: computed(() => parseInt(props.order, 10)),
         position,
-        layoutSize: height,
-        elementSize: computed(() => height.value + 32),
+        layoutSize: computed(() => props.layout ? height.value + 24 : 0),
+        elementSize: computed(() => height.value + 24),
         active: computed(() => props.app && model.value),
         absolute: toRef(props, 'absolute')
       });
@@ -26515,9 +26589,18 @@ const makeVNumberInputProps = propsFactory({
   },
   inset: Boolean,
   hideInput: Boolean,
-  min: Number,
-  max: Number,
-  step: Number,
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
   ...only(makeVInputProps(), ['density', 'disabled', 'focused', 'hideDetails', 'hint', 'label', 'persistentHint', 'readonly']),
   ...only(makeVFieldProps(), ['baseColor', 'bgColor', 'class', 'color', 'disabled', 'error', 'loading', 'reverse', 'rounded', 'style', 'theme', 'variant']),
   ...makeFocusProps()
@@ -26528,8 +26611,8 @@ const VNumberInput = genericComponent()({
   props: {
     ...makeVNumberInputProps(),
     modelValue: {
-      type: [Number, String],
-      default: 0
+      type: Number,
+      default: undefined
     }
   },
   emits: {
@@ -26548,20 +26631,45 @@ const VNumberInput = genericComponent()({
       blur
     } = useFocus(props);
     const inputRef = ref();
+    const stepDecimals = computed(() => getDecimals(props.step));
+    const modelDecimals = computed(() => model.value != null ? getDecimals(model.value) : 0);
+    const canIncrease = computed(() => {
+      if (model.value == null) return true;
+      return model.value + props.step <= props.max;
+    });
+    const canDecrease = computed(() => {
+      if (model.value == null) return true;
+      return model.value - props.step >= props.min;
+    });
+    watchEffect(() => {
+      if (model.value != null && (model.value < props.min || model.value > props.max)) {
+        model.value = clamp(model.value, props.min, props.max);
+      }
+    });
     function onFocus() {
       if (!isFocused.value) focus();
     }
     const controlVariant = computed(() => {
       return props.hideInput ? 'stacked' : props.controlVariant;
     });
+    const incrementSlotProps = computed(() => ({
+      click: onClickUp
+    }));
+    const decrementSlotProps = computed(() => ({
+      click: onClickDown
+    }));
     function toggleUpDown() {
       let increment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      if (model.value == null) {
+        model.value = 0;
+        return;
+      }
+      const decimals = Math.max(modelDecimals.value, stepDecimals.value);
       if (increment) {
-        inputRef.value?.stepUp();
+        if (canIncrease.value) model.value = +(model.value + props.step).toFixed(decimals);
       } else {
-        inputRef.value?.stepDown();
+        if (canDecrease.value) model.value = +(model.value - props.step).toFixed(decimals);
       }
-      if (inputRef.value) model.value = parseInt(inputRef.value.value, 10);
     }
     function onClickUp() {
       toggleUpDown();
@@ -26569,12 +26677,28 @@ const VNumberInput = genericComponent()({
     function onClickDown() {
       toggleUpDown(false);
     }
-    const incrementSlotProps = computed(() => ({
-      click: onClickUp
-    }));
-    const decrementSlotProps = computed(() => ({
-      click: onClickDown
-    }));
+    function onKeydown(e) {
+      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(e.key) || e.ctrlKey) return;
+      if (['ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+        toggleUpDown(false);
+        return;
+      }
+      if (['ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+        toggleUpDown();
+        return;
+      }
+
+      // Only numbers, +, - & . are allowed
+      if (!/^[0-9\-+.]+$/.test(e.key)) {
+        e.preventDefault();
+      }
+    }
+    function onInput(e) {
+      const el = e.target;
+      model.value = el.value ? +el.value : undefined;
+    }
     useRender(() => {
       const fieldProps = filterFieldProps(props);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
@@ -26587,9 +26711,11 @@ const VNumberInput = genericComponent()({
         return createVNode("div", {
           "class": "v-number-input__control"
         }, [!slots.decrement ? createVNode(VBtn, {
+          "disabled": !canDecrease.value,
           "flat": true,
           "key": "decrement-btn",
           "height": defaultHeight,
+          "name": "decrement-btn",
           "icon": "$expand",
           "size": "small",
           "onClick": onClickDown
@@ -26597,6 +26723,7 @@ const VNumberInput = genericComponent()({
           "key": "decrement-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canDecrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -26608,9 +26735,11 @@ const VNumberInput = genericComponent()({
         }), createVNode(VDivider, {
           "vertical": controlVariant.value !== 'stacked'
         }, null), !slots.increment ? createVNode(VBtn, {
+          "disabled": !canIncrease.value,
           "flat": true,
           "key": "increment-btn",
           "height": defaultHeight,
+          "name": "increment-btn",
           "icon": "$collapse",
           "onClick": onClickUp,
           "size": "small"
@@ -26618,6 +26747,7 @@ const VNumberInput = genericComponent()({
           "key": "increment-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canIncrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -26659,17 +26789,16 @@ const VNumberInput = genericComponent()({
                 ...slotProps
               }
             } = _ref2;
-            return withDirectives(createVNode("input", mergeProps({
+            return createVNode("input", mergeProps({
               "ref": inputRef,
-              "type": "number",
-              "onUpdate:modelValue": $event => model.value = $event,
+              "type": "text",
+              "value": model.value,
+              "onInput": onInput,
+              "onKeydown": onKeydown,
               "class": fieldClass,
-              "max": props.max,
-              "min": props.min,
-              "step": props.step,
               "onFocus": onFocus,
               "onBlur": blur
-            }, inputAttrs), null), [[vModelText, model.value]]);
+            }, inputAttrs), null);
           },
           'append-inner': controlVariant.value === 'split' ? () => createVNode("div", {
             "class": "v-number-input__control"
@@ -26699,6 +26828,112 @@ const VNumberInput = genericComponent()({
   }
 });
 
+// Types
+
+const makeVSnackbarQueueProps = propsFactory({
+  // TODO: Port this to Snackbar on dev
+  closable: [Boolean, String],
+  closeText: {
+    type: String,
+    default: '$vuetify.dismiss'
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  ...omit(makeVSnackbarProps(), ['modelValue'])
+}, 'VSnackbarQueue');
+const VSnackbarQueue = genericComponent()({
+  name: 'VSnackbarQueue',
+  props: makeVSnackbarQueueProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const {
+      t
+    } = useLocale();
+    const isActive = shallowRef(false);
+    const isVisible = shallowRef(false);
+    const current = shallowRef();
+    watch(() => props.modelValue.length, (val, oldVal) => {
+      if (!isVisible.value && val > oldVal) {
+        showNext();
+      }
+    });
+    watch(isActive, val => {
+      if (val) isVisible.value = true;
+    });
+    function onAfterLeave() {
+      if (props.modelValue.length) {
+        showNext();
+      } else {
+        current.value = undefined;
+        isVisible.value = false;
+      }
+    }
+    function showNext() {
+      const [next, ...rest] = props.modelValue;
+      emit('update:modelValue', rest);
+      current.value = typeof next === 'string' ? {
+        text: next
+      } : next;
+      nextTick(() => {
+        isActive.value = true;
+      });
+    }
+    function onClickClose() {
+      isActive.value = false;
+    }
+    const btnProps = computed(() => ({
+      color: typeof props.closable === 'string' ? props.closable : undefined,
+      text: t(props.closeText)
+    }));
+    useRender(() => {
+      const hasActions = !!(props.closable || slots.actions);
+      const {
+        modelValue: _,
+        ...snackbarProps
+      } = VSnackbar.filterProps(props);
+      return createVNode(Fragment, null, [isVisible.value && !!current.value && (slots.default ? createVNode(VDefaultsProvider, {
+        "defaults": {
+          VSnackbar: current.value
+        }
+      }, {
+        default: () => [slots.default({
+          item: current.value
+        })]
+      }) : createVNode(VSnackbar, mergeProps(snackbarProps, current.value, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "onAfterLeave": onAfterLeave
+      }), {
+        text: slots.text ? () => slots.text?.({
+          item: current.value
+        }) : undefined,
+        actions: hasActions ? () => createVNode(Fragment, null, [!slots.actions ? createVNode(VBtn, mergeProps(btnProps.value, {
+          "onClick": onClickClose
+        }), null) : createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: btnProps.value
+          }
+        }, {
+          default: () => [slots.actions({
+            item: current.value,
+            props: {
+              onClick: onClickClose
+            }
+          })]
+        })]) : undefined
+      }))]);
+    });
+  }
+});
+
 // Utilities
 
 // Types
@@ -27195,8 +27430,7 @@ const VSpeedDial = genericComponent()({
           default: () => [createVNode(MaybeTransition, {
             "appear": true,
             "group": true,
-            "transition": props.transition,
-            "mode": "out-in"
+            "transition": props.transition
           }, {
             default: () => [slots.default?.(slotProps)]
           })]
@@ -27214,9 +27448,7 @@ const makeVTimePickerClockProps = propsFactory({
   ampm: Boolean,
   color: String,
   disabled: Boolean,
-  displayedValue: {
-    default: null
-  },
+  displayedValue: null,
   double: Boolean,
   format: {
     type: Function,
@@ -28345,6 +28577,7 @@ var components = /*#__PURE__*/Object.freeze({
   VSlideYTransition: VSlideYTransition,
   VSlider: VSlider,
   VSnackbar: VSnackbar,
+  VSnackbarQueue: VSnackbarQueue,
   VSpacer: VSpacer,
   VSparkline: VSparkline,
   VSpeedDial: VSpeedDial,
@@ -28601,7 +28834,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.16";
+const version$1 = "3.5.18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28854,7 +29087,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.16";
+const version = "3.5.18";
 
 /* eslint-disable local-rules/sort-imports */