vuetify 3.6.0-alpha.2 → 3.6.0

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.6.0-alpha.2
+* Vuetify v3.6.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, Suspense, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, Suspense, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1779,10 +1779,12 @@ function createLayout(props) {
         const isHorizontal = position.value === 'left' || position.value === 'right';
         const isOppositeHorizontal = position.value === 'right';
         const isOppositeVertical = position.value === 'bottom';
+        const size = elementSize.value ?? layoutSize.value;
+        const unit = size === 0 ? '%' : 'px';
         const styles = {
           [position.value]: 0,
           zIndex: zIndex.value,
-          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -(elementSize.value ?? layoutSize.value)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}px)`,
+          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -(size === 0 ? 100 : size)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}${unit})`,
           position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? 'absolute' : 'fixed',
           ...(transitionsEnabled.value ? undefined : {
             transition: 'none'
@@ -1922,6 +1924,7 @@ var en = {
   badge: 'Badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel'
@@ -4152,6 +4155,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);
@@ -4184,6 +4188,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;
@@ -4773,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: {
@@ -4808,6 +4879,9 @@ const makeVProgressLinearProps = propsFactory({
   striped: Boolean,
   roundedBar: Boolean,
   ...makeComponentProps(),
+  ...makeLocationProps({
+    location: 'top'
+  }),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeThemeProps()
@@ -4830,6 +4904,9 @@ const VProgressLinear = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -4880,8 +4957,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',
@@ -4973,65 +5053,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
@@ -5459,6 +5480,7 @@ const makeVBtnProps = propsFactory({
   prependIcon: IconValue,
   appendIcon: IconValue,
   block: Boolean,
+  readonly: Boolean,
   slim: Boolean,
   stacked: Boolean,
   ripple: {
@@ -5580,6 +5602,7 @@ const VBtn = genericComponent()({
           'v-btn--flat': props.flat,
           'v-btn--icon': !!props.icon,
           'v-btn--loading': props.loading,
+          'v-btn--readonly': props.readonly,
           'v-btn--slim': props.slim,
           'v-btn--stacked': props.stacked
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
@@ -5587,7 +5610,7 @@ const VBtn = genericComponent()({
         "aria-busy": props.loading ? true : undefined,
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
-        "tabindex": props.loading ? -1 : undefined,
+        "tabindex": props.loading || props.readonly ? -1 : undefined,
         "onClick": onClick,
         "value": valueAttr.value
       }, {
@@ -6758,6 +6781,7 @@ const makeVInputProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...only(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
+  ...makeThemeProps(),
   ...makeValidationProps()
 }, 'VInput');
 const VInput = genericComponent()({
@@ -6780,6 +6804,9 @@ const VInput = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
@@ -6833,7 +6860,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": [dimensionStyles.value, props.style]
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
@@ -7060,6 +7087,10 @@ function createDisplay(options, ssr) {
   };
 }
 const makeDisplayProps = propsFactory({
+  mobile: {
+    type: Boolean,
+    default: null
+  },
   mobileBreakpoint: [Number, String]
 }, 'display');
 function useDisplay() {
@@ -7068,6 +7099,7 @@ function useDisplay() {
   const display = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
   const mobile = computed(() => {
+    if (props.mobile != null) return props.mobile;
     if (!props.mobileBreakpoint) return display.mobile.value;
     const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
     return display.width.value < breakpointValue;
@@ -7085,45 +7117,205 @@ function useDisplay() {
   };
 }
 
-function bias(val) {
-  const c = 0.501;
-  const x = Math.abs(val);
-  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
+// Utilities
+
+// Types
+
+const GoToSymbol = Symbol.for('vuetify:goto');
+function genDefaults() {
+  return {
+    container: undefined,
+    duration: 300,
+    layout: false,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    patterns: {
+      linear: t => t,
+      easeInQuad: t => t ** 2,
+      easeOutQuad: t => t * (2 - t),
+      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
+      easeInCubic: t => t ** 3,
+      easeOutCubic: t => --t ** 3 + 1,
+      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+      easeInQuart: t => t ** 4,
+      easeOutQuart: t => 1 - --t ** 4,
+      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
+      easeInQuint: t => t ** 5,
+      easeOutQuint: t => 1 + --t ** 5,
+      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
+    }
+  };
+}
+function getContainer(el) {
+  return getTarget$1(el) ?? (document.scrollingElement || document.body);
 }
-function calculateUpdatedOffset(_ref) {
+function getTarget$1(el) {
+  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
+}
+function getOffset$2(target, horizontal, rtl) {
+  if (typeof target === 'number') return horizontal && rtl ? -target : target;
+  let el = getTarget$1(target);
+  let totalOffset = 0;
+  while (el) {
+    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
+    el = el.offsetParent;
+  }
+  return totalOffset;
+}
+function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options)
+  };
+}
+async function scrollTo(_target, _options, horizontal, goTo) {
+  const property = horizontal ? 'scrollLeft' : 'scrollTop';
+  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
+  const rtl = goTo?.rtl.value;
+  const target = (typeof _target === 'number' ? _target : getTarget$1(_target)) ?? 0;
+  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
+  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
+  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
+  let targetLocation;
+  if (typeof target === 'number') {
+    targetLocation = getOffset$2(target, horizontal, rtl);
+  } else {
+    targetLocation = getOffset$2(target, horizontal, rtl) - getOffset$2(container, horizontal, rtl);
+    if (options.layout) {
+      const styles = window.getComputedStyle(target);
+      const layoutOffset = styles.getPropertyValue('--v-layout-top');
+      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
+    }
+  }
+  targetLocation += options.offset;
+  targetLocation = clampTarget(container, targetLocation, !!rtl, !!horizontal);
+  const startLocation = container[property] ?? 0;
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
+  const startTime = performance.now();
+  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
+    const timeElapsed = currentTime - startTime;
+    const progress = timeElapsed / options.duration;
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1)));
+    container[property] = location;
+
+    // Allow for some jitter if target time has elapsed
+    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+      return resolve(targetLocation);
+    } else if (progress > 2) {
+      // The target might not be reachable
+      consoleWarn('Scroll target is not reachable');
+      return resolve(container[property]);
+    }
+    requestAnimationFrame(step);
+  }));
+}
+function useGoTo() {
+  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const goToInstance = inject$1(GoToSymbol);
+  const {
+    isRtl
+  } = useRtl();
+  if (!goToInstance) throw new Error('[Vuetify] Could not find injected goto instance');
+  const goTo = {
+    ...goToInstance,
+    // can be set via VLocaleProvider
+    rtl: computed(() => goToInstance.rtl.value || isRtl.value)
+  };
+  async function go(target, options) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+  };
+  return go;
+}
+
+/**
+ * Clamp target value to achieve a smooth scroll animation
+ * when the value goes outside the scroll container size
+ */
+function clampTarget(container, value, rtl, horizontal) {
+  const {
+    scrollWidth,
+    scrollHeight
+  } = container;
+  const [containerWidth, containerHeight] = container === document.scrollingElement ? [window.innerWidth, window.innerHeight] : [container.offsetWidth, container.offsetHeight];
+  let min;
+  let max;
+  if (horizontal) {
+    if (rtl) {
+      min = -(scrollWidth - containerWidth);
+      max = 0;
+    } else {
+      min = 0;
+      max = scrollWidth - containerWidth;
+    }
+  } else {
+    min = 0;
+    max = scrollHeight + -containerHeight;
+  }
+  return Math.max(Math.min(value, max), min);
+}
+
+function calculateUpdatedTarget(_ref) {
   let {
     selectedElement,
-    containerSize,
-    contentSize,
+    containerElement,
     isRtl,
-    currentScrollOffset,
     isHorizontal
   } = _ref;
-  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
-  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
-  const adjustedOffsetStart = isRtl && isHorizontal ? contentSize - offsetStart - clientSize : offsetStart;
-  const totalSize = containerSize + currentScrollOffset;
-  const itemOffset = clientSize + adjustedOffsetStart;
-  const additionalOffset = clientSize * 0.4;
-  if (adjustedOffsetStart <= currentScrollOffset) {
-    currentScrollOffset = Math.max(adjustedOffsetStart - additionalOffset, 0);
-  } else if (totalSize <= itemOffset) {
-    currentScrollOffset = Math.min(currentScrollOffset - (totalSize - itemOffset - additionalOffset), contentSize - containerSize);
-  }
-  return currentScrollOffset;
-}
-function calculateCenteredOffset(_ref2) {
+  const containerSize = getOffsetSize(isHorizontal, containerElement);
+  const scrollPosition = getScrollPosition(isHorizontal, isRtl, containerElement);
+  const childrenSize = getOffsetSize(isHorizontal, selectedElement);
+  const childrenStartPosition = getOffsetPosition(isHorizontal, selectedElement);
+  const additionalOffset = childrenSize * 0.4;
+  if (scrollPosition > childrenStartPosition) {
+    return childrenStartPosition - additionalOffset;
+  } else if (scrollPosition + containerSize < childrenStartPosition + childrenSize) {
+    return childrenStartPosition - containerSize + childrenSize + additionalOffset;
+  }
+  return scrollPosition;
+}
+function calculateCenteredTarget(_ref2) {
   let {
     selectedElement,
-    containerSize,
-    contentSize,
-    isRtl,
+    containerElement,
     isHorizontal
   } = _ref2;
-  const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
-  const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
-  const offsetCentered = isRtl && isHorizontal ? contentSize - offsetStart - clientSize / 2 - containerSize / 2 : offsetStart + clientSize / 2 - containerSize / 2;
-  return Math.min(contentSize - containerSize, Math.max(0, offsetCentered));
+  const containerOffsetSize = getOffsetSize(isHorizontal, containerElement);
+  const childrenOffsetPosition = getOffsetPosition(isHorizontal, selectedElement);
+  const childrenOffsetSize = getOffsetSize(isHorizontal, selectedElement);
+  return childrenOffsetPosition - containerOffsetSize / 2 + childrenOffsetSize / 2;
+}
+function getScrollSize(isHorizontal, element) {
+  const key = isHorizontal ? 'scrollWidth' : 'scrollHeight';
+  return element?.[key] || 0;
+}
+function getClientSize(isHorizontal, element) {
+  const key = isHorizontal ? 'clientWidth' : 'clientHeight';
+  return element?.[key] || 0;
+}
+function getScrollPosition(isHorizontal, rtl, element) {
+  if (!element) {
+    return 0;
+  }
+  const {
+    scrollLeft,
+    offsetWidth,
+    scrollWidth
+  } = element;
+  if (isHorizontal) {
+    return rtl ? scrollWidth - offsetWidth + scrollLeft : scrollLeft;
+  }
+  return element.scrollTop;
+}
+function getOffsetSize(isHorizontal, element) {
+  const key = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+  return element?.[key] || 0;
+}
+function getOffsetPosition(isHorizontal, element) {
+  const key = isHorizontal ? 'offsetLeft' : 'offsetTop';
+  return element?.[key] || 0;
 }
 
 // Types
@@ -7189,6 +7381,14 @@ const VSlideGroup = genericComponent()({
       resizeRef: contentRef,
       contentRect
     } = useResizeObserver();
+    const goTo = useGoTo();
+    const goToOptions = computed(() => {
+      return {
+        container: containerRef.value,
+        duration: 200,
+        easing: 'easeOutQuart'
+      };
+    });
     const firstSelectedIndex = computed(() => {
       if (!group.selected.value.length) return -1;
       return group.items.value.findIndex(item => item.id === group.selected.value[0]);
@@ -7211,60 +7411,58 @@ const VSlideGroup = genericComponent()({
           if (firstSelectedIndex.value >= 0 && contentRef.value) {
             // TODO: Is this too naive? Should we store element references in group composable?
             const selectedElement = contentRef.value.children[lastSelectedIndex.value];
-            if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
-              scrollOffset.value = 0;
-            } else if (props.centerActive) {
-              scrollOffset.value = calculateCenteredOffset({
-                selectedElement,
-                containerSize: containerSize.value,
-                contentSize: contentSize.value,
-                isRtl: isRtl.value,
-                isHorizontal: isHorizontal.value
-              });
-            } else if (isOverflowing.value) {
-              scrollOffset.value = calculateUpdatedOffset({
-                selectedElement,
-                containerSize: containerSize.value,
-                contentSize: contentSize.value,
-                isRtl: isRtl.value,
-                currentScrollOffset: scrollOffset.value,
-                isHorizontal: isHorizontal.value
-              });
-            }
+            scrollToChildren(selectedElement, props.centerActive);
           }
         });
       });
     }
-    const disableTransition = shallowRef(false);
-    let startTouch = 0;
-    let startOffset = 0;
-    function onTouchstart(e) {
-      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      startOffset = sign * scrollOffset.value;
-      startTouch = e.touches[0][sizeProperty];
-      disableTransition.value = true;
-    }
-    function onTouchmove(e) {
-      if (!isOverflowing.value) return;
-      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      scrollOffset.value = sign * (startOffset + startTouch - e.touches[0][sizeProperty]);
-    }
-    function onTouchend(e) {
-      const maxScrollOffset = contentSize.value - containerSize.value;
-      if (scrollOffset.value < 0 || !isOverflowing.value) {
-        scrollOffset.value = 0;
-      } else if (scrollOffset.value >= maxScrollOffset) {
-        scrollOffset.value = maxScrollOffset;
+    const isFocused = shallowRef(false);
+    function scrollToChildren(children, center) {
+      let target = 0;
+      if (center) {
+        target = calculateCenteredTarget({
+          containerElement: containerRef.value,
+          isHorizontal: isHorizontal.value,
+          selectedElement: children
+        });
+      } else {
+        target = calculateUpdatedTarget({
+          containerElement: containerRef.value,
+          isHorizontal: isHorizontal.value,
+          isRtl: isRtl.value,
+          selectedElement: children
+        });
+      }
+      scrollToPosition(target);
+    }
+    function scrollToPosition(newPosition) {
+      if (!IN_BROWSER || !containerRef.value) return;
+      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.value);
+      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.value);
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+      if (scrollSize <= offsetSize ||
+      // Prevent scrolling by only a couple of pixels, which doesn't look smooth
+      Math.abs(newPosition - scrollPosition) < 16) return;
+      if (isHorizontal.value && isRtl.value && containerRef.value) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.value;
+        newPosition = scrollWidth - containerWidth - newPosition;
+      }
+      if (isHorizontal.value) {
+        goTo.horizontal(newPosition, goToOptions.value);
+      } else {
+        goTo(newPosition, goToOptions.value);
       }
-      disableTransition.value = false;
     }
-    function onScroll() {
-      if (!containerRef.value) return;
-      containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
+    function onScroll(e) {
+      const {
+        scrollTop,
+        scrollLeft
+      } = e.target;
+      scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
     }
-    const isFocused = shallowRef(false);
     function onFocusin(e) {
       isFocused.value = true;
       if (!isOverflowing.value || !contentRef.value) return;
@@ -7274,14 +7472,7 @@ const VSlideGroup = genericComponent()({
       for (const el of e.composedPath()) {
         for (const item of contentRef.value.children) {
           if (item === el) {
-            scrollOffset.value = calculateUpdatedOffset({
-              selectedElement: item,
-              containerSize: containerSize.value,
-              contentSize: contentSize.value,
-              isRtl: isRtl.value,
-              currentScrollOffset: scrollOffset.value,
-              isHorizontal: isHorizontal.value
-            });
+            scrollToChildren(item);
             return;
           }
         }
@@ -7290,66 +7481,79 @@ const VSlideGroup = genericComponent()({
     function onFocusout(e) {
       isFocused.value = false;
     }
+
+    // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
+    let ignoreFocusEvent = false;
     function onFocus(e) {
-      if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+      if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+      ignoreFocusEvent = false;
+    }
+    function onFocusAffixes() {
+      ignoreFocusEvent = true;
     }
     function onKeydown(e) {
       if (!contentRef.value) return;
+      function toFocus(location) {
+        e.preventDefault();
+        focus(location);
+      }
       if (isHorizontal.value) {
         if (e.key === 'ArrowRight') {
-          focus(isRtl.value ? 'prev' : 'next');
+          toFocus(isRtl.value ? 'prev' : 'next');
         } else if (e.key === 'ArrowLeft') {
-          focus(isRtl.value ? 'next' : 'prev');
+          toFocus(isRtl.value ? 'next' : 'prev');
         }
       } else {
         if (e.key === 'ArrowDown') {
-          focus('next');
+          toFocus('next');
         } else if (e.key === 'ArrowUp') {
-          focus('prev');
+          toFocus('prev');
         }
       }
       if (e.key === 'Home') {
-        focus('first');
+        toFocus('first');
       } else if (e.key === 'End') {
-        focus('last');
+        toFocus('last');
       }
     }
     function focus(location) {
       if (!contentRef.value) return;
+      let el;
       if (!location) {
         const focusable = focusableChildren(contentRef.value);
-        focusable[0]?.focus();
+        el = focusable[0];
       } else if (location === 'next') {
-        const el = contentRef.value.querySelector(':focus')?.nextElementSibling;
-        if (el) el.focus();else focus('first');
+        el = contentRef.value.querySelector(':focus')?.nextElementSibling;
+        if (!el) return focus('first');
       } else if (location === 'prev') {
-        const el = contentRef.value.querySelector(':focus')?.previousElementSibling;
-        if (el) el.focus();else focus('last');
+        el = contentRef.value.querySelector(':focus')?.previousElementSibling;
+        if (!el) return focus('last');
       } else if (location === 'first') {
-        contentRef.value.firstElementChild?.focus();
+        el = contentRef.value.firstElementChild;
       } else if (location === 'last') {
-        contentRef.value.lastElementChild?.focus();
+        el = contentRef.value.lastElementChild;
+      }
+      if (el) {
+        el.focus({
+          preventScroll: true
+        });
       }
     }
     function scrollTo(location) {
-      const newAbsoluteOffset = scrollOffset.value + (location === 'prev' ? -1 : 1) * containerSize.value;
-      scrollOffset.value = clamp(newAbsoluteOffset, 0, contentSize.value - containerSize.value);
-    }
-    const contentStyles = computed(() => {
-      // This adds friction when scrolling the 'wrong' way when at max offset
-      let scrollAmount = scrollOffset.value > contentSize.value - containerSize.value ? -(contentSize.value - containerSize.value) + bias(contentSize.value - containerSize.value - scrollOffset.value) : -scrollOffset.value;
+      const direction = isHorizontal.value && isRtl.value ? -1 : 1;
+      const offsetStep = (location === 'prev' ? -direction : direction) * containerSize.value;
+      let newPosition = scrollOffset.value + offsetStep;
 
-      // This adds friction when scrolling the 'wrong' way when at min offset
-      if (scrollOffset.value <= 0) {
-        scrollAmount = bias(-scrollOffset.value);
+      // TODO: improve it
+      if (isHorizontal.value && isRtl.value && containerRef.value) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.value;
+        newPosition += scrollWidth - containerWidth;
       }
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      return {
-        transform: `translate${isHorizontal.value ? 'X' : 'Y'}(${sign * scrollAmount}px)`,
-        transition: disableTransition.value ? 'none' : '',
-        willChange: disableTransition.value ? 'transform' : ''
-      };
-    });
+      scrollToPosition(newPosition);
+    }
     const slotProps = computed(() => ({
       next: group.next,
       prev: group.prev,
@@ -7383,11 +7587,17 @@ const VSlideGroup = genericComponent()({
       }
     });
     const hasPrev = computed(() => {
-      return Math.abs(scrollOffset.value) > 0;
+      // 1 pixel in reserve, may be lost after rounding
+      return Math.abs(scrollOffset.value) > 1;
     });
     const hasNext = computed(() => {
-      // Check one scroll ahead to know the width of right-most item
-      return contentSize.value > Math.abs(scrollOffset.value) + containerSize.value;
+      if (!containerRef.value) return false;
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+      const clientSize = getClientSize(isHorizontal.value, containerRef.value);
+      const scrollSizeMax = scrollSize - clientSize;
+
+      // 1 pixel in reserve, may be lost after rounding
+      return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
     });
     useRender(() => createVNode(props.tag, {
       "class": ['v-slide-group', {
@@ -7404,6 +7614,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__prev', {
           'v-slide-group__prev--disabled': !hasPrev.value
         }],
+        "onMousedown": onFocusAffixes,
         "onClick": () => hasPrev.value && scrollTo('prev')
       }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
@@ -7417,10 +7628,6 @@ const VSlideGroup = genericComponent()({
       }, [createVNode("div", {
         "ref": contentRef,
         "class": "v-slide-group__content",
-        "style": contentStyles.value,
-        "onTouchstartPassive": onTouchstart,
-        "onTouchmovePassive": onTouchmove,
-        "onTouchendPassive": onTouchend,
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
         "onKeydown": onKeydown
@@ -7429,6 +7636,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__next', {
           'v-slide-group__next--disabled': !hasNext.value
         }],
+        "onMousedown": onFocusAffixes,
         "onClick": () => hasNext.value && scrollTo('next')
       }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
@@ -9223,7 +9431,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') {
@@ -9343,7 +9552,7 @@ function elementToViewport(point, offset) {
 }
 
 /** Get the difference between two points */
-function getOffset$2(a, b) {
+function getOffset$1(a, b) {
   return {
     x: a.x - b.x,
     y: a.y - b.y
@@ -9590,7 +9799,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
       let {
         x,
         y
-      } = getOffset$2(targetPoint, contentPoint);
+      } = getOffset$1(targetPoint, contentPoint);
       switch (_placement.anchor.side) {
         case 'top':
           y -= offset.value[0];
@@ -10128,7 +10337,7 @@ function useActivator(props, _ref) {
   const target = computed(() => {
     if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
     if (targetRef.value) return refElement(targetRef.value);
-    return getTarget$1(props.target, vm) || activatorEl.value;
+    return getTarget(props.target, vm) || activatorEl.value;
   });
   const targetEl = computed(() => {
     return Array.isArray(target.value) ? undefined : target.value;
@@ -10200,14 +10409,14 @@ function _useActivator(props, vm, _ref2) {
   }
   function getActivator() {
     let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-    const activator = getTarget$1(selector, vm);
+    const activator = getTarget(selector, vm);
 
     // The activator should only be a valid element (Ignore comments and text nodes)
     activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
     return activatorEl.value;
   }
 }
-function getTarget$1(selector, vm) {
+function getTarget(selector, vm) {
   if (!selector) return;
   let target;
   if (selector === 'parent') {
@@ -10660,9 +10869,9 @@ const VOverlay = genericComponent()({
     }
     useRender(() => createVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
+      targetRef,
       props: mergeProps({
-        ref: activatorRef,
-        targetRef
+        ref: activatorRef
       }, activatorEvents.value, props.activatorProps)
     }), isMounted.value && hasContent.value && createVNode(Teleport, {
       "disabled": !teleportTarget.value,
@@ -12141,6 +12350,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);
+        });
       }
     }
 
@@ -12189,7 +12402,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(() => {
@@ -12643,16 +12856,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') {
@@ -12700,7 +12911,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);
 
@@ -13340,12 +13551,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');
@@ -13388,6 +13599,9 @@ const VDialog = genericComponent()({
         });
       }
     }
+    function onAfterLeave() {
+      emit('afterLeave');
+    }
     watch(isActive, async val => {
       if (!val) {
         await nextTick();
@@ -13419,7 +13633,8 @@ const VDialog = genericComponent()({
         "activatorProps": activatorProps,
         "contentProps": contentProps,
         "role": "dialog",
-        "onAfterEnter": onAfterEnter
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
       }, scopeId), {
         activator: slots.activator,
         default: function () {
@@ -14507,7 +14722,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)]
       });
@@ -14956,7 +15171,7 @@ const VColorPickerEdit = defineComponent({
 // Types
 
 const VSliderSymbol = Symbol.for('vuetify:v-slider');
-function getOffset$1(e, el, direction) {
+function getOffset(e, el, direction) {
   const vertical = direction === 'vertical';
   const rect = el.getBoundingClientRect();
   const touch = 'touches' in e ? e.touches[0] : e;
@@ -15115,7 +15330,7 @@ const useSlider = _ref => {
     activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
-      startOffset.value = getOffset$1(e, activeThumbRef.value, props.direction);
+      startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
       onSliderMove({
@@ -16512,16 +16727,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') {
@@ -16590,7 +16803,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;
@@ -18162,110 +18375,6 @@ function getWeek(adapter, value) {
   return Math.floor(diffDays / 7) + 1;
 }
 
-// Utilities
-
-// Types
-
-const GoToSymbol = Symbol.for('vuetify:goto');
-function genDefaults() {
-  return {
-    container: undefined,
-    duration: 300,
-    layout: false,
-    offset: 0,
-    easing: 'easeInOutCubic',
-    patterns: {
-      linear: t => t,
-      easeInQuad: t => t ** 2,
-      easeOutQuad: t => t * (2 - t),
-      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
-      easeInCubic: t => t ** 3,
-      easeOutCubic: t => --t ** 3 + 1,
-      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-      easeInQuart: t => t ** 4,
-      easeOutQuart: t => 1 - --t ** 4,
-      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
-      easeInQuint: t => t ** 5,
-      easeOutQuint: t => 1 + --t ** 5,
-      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
-    }
-  };
-}
-function getContainer(el) {
-  return getTarget(el) ?? (document.scrollingElement || document.body);
-}
-function getTarget(el) {
-  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
-}
-function getOffset(target, horizontal, rtl) {
-  if (typeof target === 'number') return horizontal && rtl ? -target : target;
-  let el = getTarget(target);
-  let totalOffset = 0;
-  while (el) {
-    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
-    el = el.offsetParent;
-  }
-  return totalOffset;
-}
-function createGoTo(options, locale) {
-  return {
-    rtl: locale.isRtl,
-    options: mergeDeep(genDefaults(), options)
-  };
-}
-async function scrollTo(_target, _options, horizontal, goTo) {
-  const property = horizontal ? 'scrollLeft' : 'scrollTop';
-  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
-  const rtl = goTo?.rtl.value;
-  const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
-  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
-  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
-  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
-  let targetLocation;
-  if (typeof target === 'number') {
-    targetLocation = getOffset(target, horizontal, rtl);
-  } else {
-    targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl);
-    if (options.layout) {
-      const styles = window.getComputedStyle(target);
-      const layoutOffset = styles.getPropertyValue('--v-layout-top');
-      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
-    }
-  }
-  targetLocation += options.offset;
-  const startLocation = container[property] ?? 0;
-  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
-  const startTime = performance.now();
-  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
-    const timeElapsed = currentTime - startTime;
-    const progress = timeElapsed / options.duration;
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1)));
-    container[property] = location;
-
-    // Allow for some jitter if target time has elapsed
-    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
-      return resolve(targetLocation);
-    } else if (progress > 2) {
-      // The target might not be reachable
-      consoleWarn('Scroll target is not reachable');
-      return resolve(container[property]);
-    }
-    requestAnimationFrame(step);
-  }));
-}
-function useGoTo() {
-  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const goTo = inject$1(GoToSymbol);
-  if (!goTo) throw new Error('[Vuetify] Could not find injected goto instance');
-  async function go(target, options) {
-    return scrollTo(target, mergeDeep(_options, options), false, goTo);
-  }
-  go.horizontal = async (target, options) => {
-    return scrollTo(target, mergeDeep(_options, options), true, goTo);
-  };
-  return go;
-}
-
 // Composables
 
 // Types
@@ -19416,6 +19525,7 @@ const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object
   },
+  ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
 const VDataTableHeaders = genericComponent()({
@@ -19425,6 +19535,9 @@ const VDataTableHeaders = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       toggleSort,
       sortBy,
@@ -19460,6 +19573,10 @@ const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
@@ -19471,6 +19588,9 @@ const VDataTableHeaders = genericComponent()({
       selectAll,
       getSortIcon
     }));
+    const headerCellClasses = computed(() => ['v-data-table__th', {
+      'v-data-table__th--sticky': props.sticky
+    }, displayClasses.value, loaderClasses.value]);
     const VDataTableHeaderCell = _ref2 => {
       let {
         column,
@@ -19482,12 +19602,11 @@ const VDataTableHeaders = genericComponent()({
       return createVNode(VDataTableColumn, mergeProps({
         "tag": "th",
         "align": column.align,
-        "class": ['v-data-table__th', {
+        "class": [{
           'v-data-table__th--sortable': column.sortable,
           'v-data-table__th--sorted': isSorted(column),
-          'v-data-table__th--fixed': column.fixed,
-          'v-data-table__th--sticky': props.sticky
-        }, loaderClasses.value],
+          'v-data-table__th--fixed': column.fixed
+        }, ...headerCellClasses.value],
         "style": {
           width: convertToUnit(column.width),
           minWidth: convertToUnit(column.minWidth),
@@ -19536,8 +19655,53 @@ const VDataTableHeaders = genericComponent()({
         }
       });
     };
+    const VDataTableMobileHeaderCell = () => {
+      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
+      const displayItems = computed(() => {
+        return columns.value.filter(column => column?.sortable);
+      });
+      const appendIcon = computed(() => {
+        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
+      });
+      return createVNode(VDataTableColumn, mergeProps({
+        "tag": "th",
+        "class": [...headerCellClasses.value],
+        "colspan": headers.value.length + 1
+      }, headerProps), {
+        default: () => [createVNode("div", {
+          "class": "v-data-table-header__content"
+        }, [createVNode(VSelect, {
+          "chips": true,
+          "class": "v-data-table__td-sort-select",
+          "clearable": true,
+          "density": "default",
+          "items": displayItems.value,
+          "label": t('$vuetify.dataTable.sortBy'),
+          "multiple": props.multiSort,
+          "variant": "underlined",
+          "onClick:clear": () => sortBy.value = [],
+          "appendIcon": appendIcon.value,
+          "onClick:append": () => selectAll(!allSelected.value)
+        }, {
+          ...slots,
+          chip: props => createVNode(VChip, {
+            "onClick": props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined,
+            "onMousedown": e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }, {
+            default: () => [props.item.title, createVNode(VIcon, {
+              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "icon": getSortIcon(props.item.raw),
+              "size": "small"
+            }, null)]
+          })
+        })])]
+      });
+    };
     useRender(() => {
-      return createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+      return mobile.value ? createVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y
@@ -19645,7 +19809,8 @@ const makeVDataTableRowProps = propsFactory({
   cellProps: [Object, Function],
   onClick: EventProp(),
   onContextmenu: EventProp(),
-  onDblclick: EventProp()
+  onDblclick: EventProp(),
+  ...makeDisplayProps()
 }, 'VDataTableRow');
 const VDataTableRow = genericComponent()({
   name: 'VDataTableRow',
@@ -19654,27 +19819,40 @@ const VDataTableRow = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props, 'v-data-table__tr');
     const {
       isSelected,
-      toggleSelect
+      toggleSelect,
+      someSelected,
+      allSelected,
+      selectAll
     } = useSelection();
     const {
       isExpanded,
       toggleExpand
     } = useExpanded();
+    const {
+      toggleSort,
+      sortBy,
+      isSorted
+    } = useSort();
     const {
       columns
     } = useHeaders();
     useRender(() => createVNode("tr", {
       "class": ['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }],
+      }, displayClasses.value],
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
     }, [props.item && columns.value.map((column, i) => {
       const item = props.item;
       const slotName = `item.${column.key}`;
+      const headerSlotName = `header.${column.key}`;
       const slotProps = {
         index: props.index,
         item: item.raw,
@@ -19686,6 +19864,16 @@ const VDataTableRow = genericComponent()({
         isExpanded,
         toggleExpand
       };
+      const columnSlotProps = {
+        column,
+        selectAll,
+        isSorted,
+        toggleSort,
+        sortBy: sortBy.value,
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        getSortIcon: () => ''
+      };
       const cellProps = typeof props.cellProps === 'function' ? props.cellProps({
         index: slotProps.index,
         item: slotProps.item,
@@ -19701,16 +19889,20 @@ const VDataTableRow = genericComponent()({
       }) : column.cellProps;
       return createVNode(VDataTableColumn, mergeProps({
         "align": column.align,
+        "class": {
+          'v-data-table__td--expanded-row': column.key === 'data-table-expand',
+          'v-data-table__td--select-row': column.key === 'data-table-select'
+        },
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
         "lastFixed": column.lastFixed,
+        "maxWidth": !mobile.value ? column.maxWidth : undefined,
         "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
-        "width": column.width,
-        "maxWidth": column.maxWidth,
-        "nowrap": column.nowrap
+        "nowrap": column.nowrap,
+        "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
         default: () => {
-          if (slots[slotName]) return slots[slotName](slotProps);
+          if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
           if (column.key === 'data-table-select') {
             return slots['item.data-table-select']?.(slotProps) ?? createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
@@ -19726,7 +19918,12 @@ const VDataTableRow = genericComponent()({
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
-          return toDisplayString(slotProps.value);
+          const displayValue = toDisplayString(slotProps.value);
+          return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
+            "class": "v-data-table__td-title"
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createVNode("div", {
+            "class": "v-data-table__td-value"
+          }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
       });
     })]));
@@ -19751,7 +19948,8 @@ const makeVDataTableRowsProps = propsFactory({
     default: '$vuetify.noDataText'
   },
   rowProps: [Object, Function],
-  cellProps: [Object, Function]
+  cellProps: [Object, Function],
+  ...makeDisplayProps()
 }, 'VDataTableRows');
 const VDataTableRows = genericComponent()({
   name: 'VDataTableRows',
@@ -19781,6 +19979,9 @@ const VDataTableRows = genericComponent()({
     const {
       t
     } = useLocale();
+    const {
+      mobile
+    } = useDisplay(props);
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
         return createVNode("tr", {
@@ -19835,7 +20036,8 @@ const VDataTableRows = genericComponent()({
             } : undefined,
             index,
             item,
-            cellProps: props.cellProps
+            cellProps: props.cellProps,
+            mobile: mobile.value
           }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
             item: slotProps.item,
             index: slotProps.index,
@@ -21662,8 +21864,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(() => {
@@ -22006,7 +22218,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');
     }
@@ -22665,6 +22877,7 @@ const VKbd = createSimpleFunctional('v-kbd');
 
 const makeVLayoutProps = propsFactory({
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeLayoutProps()
 }, 'VLayout');
 const VLayout = genericComponent()({
@@ -22681,10 +22894,13 @@ const VLayout = genericComponent()({
       items,
       layoutRef
     } = createLayout(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => createVNode("div", {
       "ref": layoutRef,
       "class": [layoutClasses.value, props.class],
-      "style": [layoutStyles.value, props.style]
+      "style": [dimensionStyles.value, layoutStyles.value, props.style]
     }, [createVNode(Suspense, null, {
       default: () => [createVNode(Fragment, null, [slots.default?.()])]
     })]));
@@ -23047,6 +23263,7 @@ function oops$1() {
 
 function useTouch(_ref) {
   let {
+    el,
     isActive,
     isTemporary,
     width,
@@ -23096,10 +23313,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);
     }
@@ -23159,6 +23376,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,
@@ -23197,6 +23426,7 @@ const makeVNavigationDrawerProps = propsFactory({
   },
   image: String,
   temporary: Boolean,
+  persistent: Boolean,
   touchless: Boolean,
   width: {
     type: [Number, String],
@@ -23278,6 +23508,7 @@ const VNavigationDrawer = genericComponent()({
     const location = computed(() => {
       return toPhysical(props.location, isRtl.value);
     });
+    const isPersistent = computed(() => props.persistent);
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
     const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
     useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -23297,9 +23528,9 @@ const VNavigationDrawer = genericComponent()({
     }
     const {
       isDragging,
-      dragProgress,
-      dragStyles
+      dragProgress
     } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -23310,6 +23541,7 @@ const VNavigationDrawer = genericComponent()({
       const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
       return isDragging.value ? size * dragProgress.value : size;
     });
+    const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
     const {
       layoutItemStyles,
       layoutItemScrimStyles,
@@ -23319,7 +23551,7 @@ const VNavigationDrawer = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: location,
       layoutSize,
-      elementSize: width,
+      elementSize,
       active: computed(() => isActive.value || isDragging.value),
       disableTransitions: computed(() => isDragging.value),
       absolute: computed(() =>
@@ -23361,10 +23593,13 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--is-hovering': isHovering.value,
           'v-navigation-drawer--rail': props.rail,
           'v-navigation-drawer--temporary': isTemporary.value,
+          'v-navigation-drawer--persistent': isPersistent.value,
           '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, ['top', 'bottom'].includes(location.value) ? {
+          height: 'auto'
+        } : {}]
       }, scopeId, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -23399,7 +23634,10 @@ const VNavigationDrawer = genericComponent()({
         default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createVNode("div", mergeProps({
           "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
           "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
-          "onClick": () => isActive.value = false
+          "onClick": () => {
+            if (isPersistent.value) return;
+            isActive.value = false;
+          }
         }, scopeId), null)]
       })]);
     });
@@ -23880,8 +24118,8 @@ const VRangeSlider = genericComponent()({
     } = useRtl();
     function getActiveThumb(e) {
       if (!startThumbRef.value || !stopThumbRef.value) return;
-      const startOffset = getOffset$1(e, startThumbRef.value.$el, props.direction);
-      const stopOffset = getOffset$1(e, stopThumbRef.value.$el, props.direction);
+      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
+      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction);
       const a = Math.abs(startOffset);
       const b = Math.abs(stopOffset);
       return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
@@ -24476,9 +24714,6 @@ const VSnackbar = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      locationStyles
-    } = useLocation(props);
     const {
       positionClasses
     } = usePosition(props);
@@ -24500,6 +24735,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(() => {
@@ -24529,6 +24773,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);
@@ -24539,14 +24797,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),
@@ -24554,7 +24812,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",
@@ -26686,6 +26946,125 @@ const VConfirmEdit = genericComponent()({
 
 // Types
 
+const makeVDateInputProps = propsFactory({
+  hideActions: Boolean,
+  ...makeFocusProps(),
+  ...makeVConfirmEditProps(),
+  ...makeVTextFieldProps({
+    placeholder: 'mm/dd/yyyy',
+    prependIcon: '$calendar'
+  }),
+  ...omit(makeVDatePickerProps({
+    weeksInMonth: 'dynamic',
+    hideHeader: true
+  }), ['active'])
+}, 'VDateInput');
+const VDateInput = genericComponent()({
+  name: 'VDateInput',
+  props: makeVDateInputProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      t
+    } = useLocale();
+    const adapter = useDate();
+    const {
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null);
+    const menu = shallowRef(false);
+    const display = computed(() => {
+      const value = wrapInArray(model.value);
+      if (!value.length) return null;
+      if (props.multiple === true) {
+        return t('$vuetify.datePicker.itemsSelected', value.length);
+      }
+      if (props.multiple === 'range') {
+        const start = value[0];
+        const end = value[value.length - 1];
+        return adapter.isValid(start) && adapter.isValid(end) ? `${adapter.format(start, 'keyboardDate')} - ${adapter.format(end, 'keyboardDate')}` : '';
+      }
+      return adapter.isValid(model.value) ? adapter.format(model.value, 'keyboardDate') : '';
+    });
+    function onKeydown(e) {
+      if (e.key !== 'Enter') return;
+      if (!menu.value || !isFocused.value) {
+        menu.value = true;
+        return;
+      }
+      const target = e.target;
+      model.value = adapter.date(target.value);
+    }
+    function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.value = true;
+    }
+    function onSave() {
+      menu.value = false;
+    }
+    useRender(() => {
+      const confirmEditProps = VConfirmEdit.filterProps(props);
+      const datePickerProps = VDatePicker.filterProps(omit(props, ['active']));
+      const textFieldProps = VTextField.filterProps(props);
+      return createVNode(VTextField, mergeProps(textFieldProps, {
+        "modelValue": display.value,
+        "onKeydown": onKeydown,
+        "focused": menu.value || isFocused.value,
+        "onFocus": focus,
+        "onBlur": blur,
+        "onClick:control": onClick,
+        "onClick:prepend": onClick
+      }), {
+        default: () => [createVNode(VMenu, {
+          "modelValue": menu.value,
+          "onUpdate:modelValue": $event => menu.value = $event,
+          "activator": "parent",
+          "min-width": "0",
+          "closeOnContentClick": false,
+          "openOnClick": false
+        }, {
+          default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onSave": onSave
+          }), {
+            default: _ref2 => {
+              let {
+                actions,
+                model: proxyModel
+              } = _ref2;
+              return createVNode(VDatePicker, mergeProps(datePickerProps, {
+                "modelValue": props.hideActions ? model.value : proxyModel.value,
+                "onUpdate:modelValue": val => {
+                  if (!props.hideActions) {
+                    proxyModel.value = val;
+                  } else {
+                    model.value = val;
+                    if (!props.multiple) menu.value = false;
+                  }
+                },
+                "onMousedown": e => e.preventDefault()
+              }), {
+                actions: !props.hideActions ? () => actions : undefined
+              });
+            }
+          })]
+        }), slots.default?.()]
+      });
+    });
+  }
+});
+
+// Types
+
 // Types
 
 const makeVEmptyStateProps = propsFactory({
@@ -26823,6 +27202,7 @@ const makeVFabProps = propsFactory({
   app: Boolean,
   appear: Boolean,
   extended: Boolean,
+  layout: Boolean,
   location: {
     type: String,
     default: 'bottom end'
@@ -26873,8 +27253,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')
       });
@@ -26928,9 +27308,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()
@@ -26941,8 +27330,8 @@ const VNumberInput = genericComponent()({
   props: {
     ...makeVNumberInputProps(),
     modelValue: {
-      type: [Number, String],
-      default: 0
+      type: Number,
+      default: undefined
     }
   },
   emits: {
@@ -26961,20 +27350,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();
@@ -26982,12 +27396,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);
@@ -27000,9 +27430,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
@@ -27010,6 +27442,7 @@ const VNumberInput = genericComponent()({
           "key": "decrement-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canDecrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -27021,9 +27454,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"
@@ -27031,6 +27466,7 @@ const VNumberInput = genericComponent()({
           "key": "increment-defaults",
           "defaults": {
             VBtn: {
+              disabled: !canIncrease.value,
               flat: true,
               height: defaultHeight,
               size: 'small',
@@ -27072,17 +27508,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"
@@ -27112,6 +27547,220 @@ const VNumberInput = genericComponent()({
   }
 });
 
+const VPullToRefresh = genericComponent()({
+  name: 'VPullToRefresh',
+  props: {
+    pullDownThreshold: {
+      type: Number,
+      default: 64
+    }
+  },
+  emits: {
+    load: options => true
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    let touchstartY = 0;
+    let scrollParents = [];
+    const touchDiff = shallowRef(0);
+    const containerRef = ref();
+    const refreshing = shallowRef(false);
+    const goingUp = shallowRef(false);
+    const touching = shallowRef(false);
+    const canRefresh = computed(() => touchDiff.value >= props.pullDownThreshold && !refreshing.value);
+    const topOffset = computed(() => clamp(touchDiff.value, 0, props.pullDownThreshold));
+    function onTouchstart(e) {
+      if (refreshing.value) return;
+      touching.value = true;
+      touchstartY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+    }
+    function onTouchmove(e) {
+      if (refreshing.value || !touching.value) return;
+      const touchY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+      if (scrollParents.length && !scrollParents[0].scrollTop) {
+        touchDiff.value = touchY - touchstartY;
+      }
+    }
+    function onTouchend(e) {
+      if (refreshing.value) return;
+      touching.value = false;
+      if (canRefresh.value) {
+        function done() {
+          if (!refreshing.value) return;
+          touchDiff.value = 0;
+          refreshing.value = false;
+        }
+        emit('load', {
+          done
+        });
+        refreshing.value = true;
+      } else {
+        touchDiff.value = 0;
+      }
+    }
+    onMounted(() => {
+      scrollParents = getScrollParents(containerRef.value);
+    });
+    watch([topOffset, refreshing], () => {
+      if (scrollParents.length) {
+        const stopScrolling = topOffset.value && !refreshing.value;
+        scrollParents.forEach(p => p.style.overflow = stopScrolling ? 'hidden' : 'auto');
+      }
+    });
+    watch(topOffset, (newVal, oldVal) => {
+      goingUp.value = newVal < oldVal;
+    });
+    useRender(() => {
+      return createVNode("div", {
+        "class": ['v-pull-to-refresh'],
+        "onTouchstart": onTouchstart,
+        "onTouchmove": onTouchmove,
+        "onTouchend": onTouchend,
+        "onMousedown": onTouchstart,
+        "onMouseup": onTouchend,
+        "onMouseleave": onTouchend,
+        "onMousemove": onTouchmove,
+        "ref": containerRef
+      }, [createVNode("div", {
+        "class": ['v-pull-to-refresh__pull-down', {
+          'v-pull-to-refresh__pull-down--touching': touching.value
+        }],
+        "style": {
+          top: convertToUnit(-1 * props.pullDownThreshold + topOffset.value),
+          height: convertToUnit(props.pullDownThreshold)
+        }
+      }, [slots.pullDownPanel ? slots.pullDownPanel({
+        canRefresh: canRefresh.value,
+        goingUp: goingUp.value,
+        refreshing: refreshing.value
+      }) : createVNode("div", {
+        "class": ['v-pull-to-refresh__pull-down-default']
+      }, [refreshing.value ? createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "active": false
+      }, null) : createVNode(VIcon, {
+        "icon": canRefresh.value || goingUp.value ? '$sortAsc' : '$sortDesc'
+      }, null)])]), createVNode("div", {
+        "class": ['v-pull-to-refresh__scroll-container', {
+          'v-pull-to-refresh__scroll-container--touching': touching.value
+        }],
+        "style": {
+          top: convertToUnit(topOffset.value)
+        }
+      }, [slots.default?.()])]);
+    });
+  }
+});
+
+// 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
@@ -27575,10 +28224,14 @@ const makeVSpeedDialProps = propsFactory({
 const VSpeedDial = genericComponent()({
   name: 'VSpeedDial',
   props: makeVSpeedDialProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
     const menuRef = ref();
     const location = computed(() => {
       const [y, x = 'center'] = props.location.split(' ');
@@ -27590,6 +28243,8 @@ const VSpeedDial = genericComponent()({
     useRender(() => {
       const menuProps = VMenu.filterProps(props);
       return createVNode(VMenu, mergeProps(menuProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
         "class": props.class,
         "style": props.style,
         "contentClass": ['v-speed-dial__content', locationClasses.value],
@@ -27608,8 +28263,7 @@ const VSpeedDial = genericComponent()({
           default: () => [createVNode(MaybeTransition, {
             "appear": true,
             "group": true,
-            "transition": props.transition,
-            "mode": "out-in"
+            "transition": props.transition
           }, {
             default: () => [slots.default?.(slotProps)]
           })]
@@ -27627,9 +28281,7 @@ const makeVTimePickerClockProps = propsFactory({
   ampm: Boolean,
   color: String,
   disabled: Boolean,
-  displayedValue: {
-    default: null
-  },
+  displayedValue: null,
   double: Boolean,
   format: {
     type: Function,
@@ -28670,6 +29322,7 @@ var components = /*#__PURE__*/Object.freeze({
   VDataTableRows: VDataTableRows,
   VDataTableServer: VDataTableServer,
   VDataTableVirtual: VDataTableVirtual,
+  VDateInput: VDateInput,
   VDatePicker: VDatePicker,
   VDatePickerControls: VDatePickerControls,
   VDatePickerHeader: VDatePickerHeader,
@@ -28734,6 +29387,7 @@ var components = /*#__PURE__*/Object.freeze({
   VPickerTitle: VPickerTitle,
   VProgressCircular: VProgressCircular,
   VProgressLinear: VProgressLinear,
+  VPullToRefresh: VPullToRefresh,
   VRadio: VRadio,
   VRadioGroup: VRadioGroup,
   VRangeSlider: VRangeSlider,
@@ -28758,6 +29412,7 @@ var components = /*#__PURE__*/Object.freeze({
   VSlideYTransition: VSlideYTransition,
   VSlider: VSlider,
   VSnackbar: VSnackbar,
+  VSnackbarQueue: VSnackbarQueue,
   VSpacer: VSpacer,
   VSparkline: VSparkline,
   VSpeedDial: VSpeedDial,
@@ -28934,7 +29589,7 @@ function useDirectiveComponent(component, props) {
 function mountComponent(component, props) {
   return function (el, binding, vnode) {
     const _props = typeof props === 'function' ? props(binding) : props;
-    const text = binding.value?.text ?? binding.value;
+    const text = binding.value?.text ?? binding.value ?? _props?.text;
     const value = isObject(binding.value) ? binding.value : {};
 
     // Get the children from the props or directive value, or the element's children
@@ -28943,7 +29598,9 @@ function mountComponent(component, props) {
     // If vnode.ctx is the same as the instance, then we're bound to a plain element
     // and need to find the nearest parent component instance to inherit provides from
     const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
-    const node = h(component, mergeProps(_props, value), children);
+    const node = h(component, mergeProps(_props, value), {
+      default: () => children
+    });
     node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
       provides
     });
@@ -29102,7 +29759,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.0-alpha.2";
+const version$1 = "3.6.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29355,7 +30012,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.0-alpha.2";
+const version = "3.6.0";
 
 /* eslint-disable local-rules/sort-imports */