vuetify 3.6.0-alpha.2 → 3.6.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.0-alpha.2
+* Vuetify v3.6.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1783,10 +1783,12 @@
           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'
@@ -1926,6 +1928,7 @@
     badge: 'Badge',
     open: 'Open',
     close: 'Close',
+    dismiss: 'Dismiss',
     confirmEdit: {
       ok: 'OK',
       cancel: 'Cancel'
@@ -4156,6 +4159,7 @@
       const index = children.indexOf(vm);
       if (vue.unref(unwrapped.value) == null) {
         unwrapped.value = index;
+        unwrapped.useIndexAsValue = true;
       }
       if (index > -1) {
         items.splice(index, 0, unwrapped);
@@ -4188,6 +4192,14 @@
     vue.onBeforeUnmount(() => {
       isUnmounted = true;
     });
+    vue.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;
@@ -4777,6 +4789,65 @@
     }
   });
 
+  // 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 = vue.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: {
@@ -4812,6 +4883,9 @@
     striped: Boolean,
     roundedBar: Boolean,
     ...makeComponentProps(),
+    ...makeLocationProps({
+      location: 'top'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -4834,6 +4908,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        locationStyles
+      } = useLocation(props);
       const {
         textColorClasses,
         textColorStyles
@@ -4884,8 +4961,11 @@
           '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',
@@ -4977,65 +5057,6 @@
     }, 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 = vue.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
@@ -5463,6 +5484,7 @@
     prependIcon: IconValue,
     appendIcon: IconValue,
     block: Boolean,
+    readonly: Boolean,
     slim: Boolean,
     stacked: Boolean,
     ripple: {
@@ -5584,6 +5606,7 @@
             '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],
@@ -5591,7 +5614,7 @@
           "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
         }, {
@@ -6762,6 +6785,7 @@
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...only(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
+    ...makeThemeProps(),
     ...makeValidationProps()
   }, 'VInput');
   const VInput = genericComponent()({
@@ -6784,6 +6808,9 @@
       const {
         dimensionStyles
       } = useDimension(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
       const {
         rtlClasses
       } = useRtl();
@@ -6837,7 +6864,7 @@
           "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 && vue.createVNode("div", {
           "key": "prepend",
@@ -7064,6 +7091,10 @@
     };
   }
   const makeDisplayProps = propsFactory({
+    mobile: {
+      type: Boolean,
+      default: null
+    },
     mobileBreakpoint: [Number, String]
   }, 'display');
   function useDisplay() {
@@ -7072,6 +7103,7 @@
     const display = vue.inject(DisplaySymbol);
     if (!display) throw new Error('Could not find Vuetify display injection');
     const mobile = vue.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;
@@ -7089,45 +7121,205 @@
     };
   }
 
-  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 = vue.inject(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: vue.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
@@ -7193,6 +7385,14 @@
         resizeRef: contentRef,
         contentRect
       } = useResizeObserver();
+      const goTo = useGoTo();
+      const goToOptions = vue.computed(() => {
+        return {
+          container: containerRef.value,
+          duration: 200,
+          easing: 'easeOutQuart'
+        };
+      });
       const firstSelectedIndex = vue.computed(() => {
         if (!group.selected.value.length) return -1;
         return group.items.value.findIndex(item => item.id === group.selected.value[0]);
@@ -7215,60 +7415,58 @@
             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 = vue.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 = vue.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 = vue.shallowRef(false);
       function onFocusin(e) {
         isFocused.value = true;
         if (!isOverflowing.value || !contentRef.value) return;
@@ -7278,14 +7476,7 @@
         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;
             }
           }
@@ -7294,66 +7485,79 @@
       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 = vue.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 = vue.computed(() => ({
         next: group.next,
         prev: group.prev,
@@ -7387,11 +7591,17 @@
         }
       });
       const hasPrev = vue.computed(() => {
-        return Math.abs(scrollOffset.value) > 0;
+        // 1 pixel in reserve, may be lost after rounding
+        return Math.abs(scrollOffset.value) > 1;
       });
       const hasNext = vue.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(() => vue.createVNode(props.tag, {
         "class": ['v-slide-group', {
@@ -7408,6 +7618,7 @@
           "class": ['v-slide-group__prev', {
             'v-slide-group__prev--disabled': !hasPrev.value
           }],
+          "onMousedown": onFocusAffixes,
           "onClick": () => hasPrev.value && scrollTo('prev')
         }, [slots.prev?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
@@ -7421,10 +7632,6 @@
         }, [vue.createVNode("div", {
           "ref": contentRef,
           "class": "v-slide-group__content",
-          "style": contentStyles.value,
-          "onTouchstartPassive": onTouchstart,
-          "onTouchmovePassive": onTouchmove,
-          "onTouchendPassive": onTouchend,
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
           "onKeydown": onKeydown
@@ -7433,6 +7640,7 @@
           "class": ['v-slide-group__next', {
             'v-slide-group__next--disabled': !hasNext.value
           }],
+          "onMousedown": onFocusAffixes,
           "onClick": () => hasNext.value && scrollTo('next')
         }, [slots.next?.(slotProps.value) ?? vue.createVNode(VFadeTransition, null, {
           default: () => [vue.createVNode(VIcon, {
@@ -9227,7 +9435,8 @@
         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') {
@@ -9347,7 +9556,7 @@
   }
 
   /** 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
@@ -9594,7 +9803,7 @@
         let {
           x,
           y
-        } = getOffset$2(targetPoint, contentPoint);
+        } = getOffset$1(targetPoint, contentPoint);
         switch (_placement.anchor.side) {
           case 'top':
             y -= offset.value[0];
@@ -10132,7 +10341,7 @@
     const target = vue.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 = vue.computed(() => {
       return Array.isArray(target.value) ? undefined : target.value;
@@ -10204,14 +10413,14 @@
     }
     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') {
@@ -10664,9 +10873,9 @@
       }
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
+        targetRef,
         props: vue.mergeProps({
-          ref: activatorRef,
-          targetRef
+          ref: activatorRef
         }, activatorEvents.value, props.activatorProps)
       }), isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
@@ -12145,6 +12354,10 @@
         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);
+          });
         }
       }
 
@@ -12193,7 +12406,7 @@
           vTextFieldRef.value.value = '';
         }
       }
-      vue.watch([menu, model], () => {
+      vue.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(() => {
@@ -12647,16 +12860,14 @@
           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') {
@@ -12704,7 +12915,7 @@
         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 = vue.shallowRef(false);
 
@@ -13344,12 +13555,12 @@
     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');
@@ -13392,6 +13603,9 @@
           });
         }
       }
+      function onAfterLeave() {
+        emit('afterLeave');
+      }
       vue.watch(isActive, async val => {
         if (!val) {
           await vue.nextTick();
@@ -13423,7 +13637,8 @@
           "activatorProps": activatorProps,
           "contentProps": contentProps,
           "role": "dialog",
-          "onAfterEnter": onAfterEnter
+          "onAfterEnter": onAfterEnter,
+          "onAfterLeave": onAfterLeave
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -14511,7 +14726,7 @@
         const imgProps = VImg.filterProps(props);
         const windowItemProps = VWindowItem.filterProps(props);
         return vue.createVNode(VWindowItem, vue.mergeProps({
-          "class": "v-carousel-item"
+          "class": ['v-carousel-item', props.class]
         }, windowItemProps), {
           default: () => [vue.createVNode(VImg, vue.mergeProps(attrs, imgProps), slots)]
         });
@@ -14960,7 +15175,7 @@
   // 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;
@@ -15119,7 +15334,7 @@
       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({
@@ -16516,16 +16731,14 @@
           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') {
@@ -16594,7 +16807,7 @@
         listHasFocus.value = false;
       }
       function onUpdateModelValue(v) {
-        if (v == null || v === '' && !props.multiple) model.value = [];
+        if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
       }
       vue.watch(isFocused, (val, oldVal) => {
         if (val || val === oldVal) return;
@@ -18166,110 +18379,6 @@
     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 = vue.inject(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
@@ -19420,6 +19529,7 @@
     headerProps: {
       type: Object
     },
+    ...makeDisplayProps(),
     ...makeLoaderProps()
   }, 'VDataTableHeaders');
   const VDataTableHeaders = genericComponent()({
@@ -19429,6 +19539,9 @@
       let {
         slots
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const {
         toggleSort,
         sortBy,
@@ -19464,6 +19577,10 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const {
+        displayClasses,
+        mobile
+      } = useDisplay(props);
       const slotProps = vue.computed(() => ({
         headers: headers.value,
         columns: columns.value,
@@ -19475,6 +19592,9 @@
         selectAll,
         getSortIcon
       }));
+      const headerCellClasses = vue.computed(() => ['v-data-table__th', {
+        'v-data-table__th--sticky': props.sticky
+      }, displayClasses.value, loaderClasses.value]);
       const VDataTableHeaderCell = _ref2 => {
         let {
           column,
@@ -19486,12 +19606,11 @@
         return vue.createVNode(VDataTableColumn, vue.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),
@@ -19540,8 +19659,53 @@
           }
         });
       };
+      const VDataTableMobileHeaderCell = () => {
+        const headerProps = vue.mergeProps(props.headerProps ?? {} ?? {});
+        const displayItems = vue.computed(() => {
+          return columns.value.filter(column => column?.sortable);
+        });
+        const appendIcon = vue.computed(() => {
+          return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
+        });
+        return vue.createVNode(VDataTableColumn, vue.mergeProps({
+          "tag": "th",
+          "class": [...headerCellClasses.value],
+          "colspan": headers.value.length + 1
+        }, headerProps), {
+          default: () => [vue.createVNode("div", {
+            "class": "v-data-table-header__content"
+          }, [vue.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 => vue.createVNode(VChip, {
+              "onClick": props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined,
+              "onMousedown": e => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }, {
+              default: () => [props.item.title, vue.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 vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
+        return mobile.value ? vue.createVNode("tr", null, [vue.createVNode(VDataTableMobileHeaderCell, null, null)]) : vue.createVNode(vue.Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => vue.createVNode("tr", null, [row.map((column, x) => vue.createVNode(VDataTableHeaderCell, {
           "column": column,
           "x": x,
           "y": y
@@ -19649,7 +19813,8 @@
     cellProps: [Object, Function],
     onClick: EventProp(),
     onContextmenu: EventProp(),
-    onDblclick: EventProp()
+    onDblclick: EventProp(),
+    ...makeDisplayProps()
   }, 'VDataTableRow');
   const VDataTableRow = genericComponent()({
     name: 'VDataTableRow',
@@ -19658,27 +19823,40 @@
       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(() => vue.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,
@@ -19690,6 +19868,16 @@
           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,
@@ -19705,16 +19893,20 @@
         }) : column.cellProps;
         return vue.createVNode(VDataTableColumn, vue.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) ?? vue.createVNode(VCheckboxBtn, {
                 "disabled": !item.selectable,
@@ -19730,7 +19922,12 @@
                 "onClick": vue.withModifiers(() => toggleExpand(item), ['stop'])
               }, null);
             }
-            return vue.toDisplayString(slotProps.value);
+            const displayValue = vue.toDisplayString(slotProps.value);
+            return !mobile.value ? displayValue : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+              "class": "v-data-table__td-title"
+            }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), vue.createVNode("div", {
+              "class": "v-data-table__td-value"
+            }, [slots[slotName]?.(slotProps) ?? displayValue])]);
           }
         });
       })]));
@@ -19755,7 +19952,8 @@
       default: '$vuetify.noDataText'
     },
     rowProps: [Object, Function],
-    cellProps: [Object, Function]
+    cellProps: [Object, Function],
+    ...makeDisplayProps()
   }, 'VDataTableRows');
   const VDataTableRows = genericComponent()({
     name: 'VDataTableRows',
@@ -19785,6 +19983,9 @@
       const {
         t
       } = useLocale();
+      const {
+        mobile
+      } = useDisplay(props);
       useRender(() => {
         if (props.loading && (!props.items.length || slots.loading)) {
           return vue.createVNode("tr", {
@@ -19839,7 +20040,8 @@
               } : 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,
@@ -21666,8 +21868,18 @@
         emit('update:year', value);
       }
       vue.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(() => {
@@ -22010,7 +22222,7 @@
     }),
     modelValue: {
       type: [Array, Object],
-      default: () => [],
+      default: props => props.multiple ? [] : null,
       validator: val => {
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
@@ -22669,6 +22881,7 @@
 
   const makeVLayoutProps = propsFactory({
     ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeLayoutProps()
   }, 'VLayout');
   const VLayout = genericComponent()({
@@ -22685,10 +22898,13 @@
         items,
         layoutRef
       } = createLayout(props);
+      const {
+        dimensionStyles
+      } = useDimension(props);
       useRender(() => vue.createVNode("div", {
         "ref": layoutRef,
         "class": [layoutClasses.value, props.class],
-        "style": [layoutStyles.value, props.style]
+        "style": [dimensionStyles.value, layoutStyles.value, props.style]
       }, [vue.createVNode(vue.Suspense, null, {
         default: () => [vue.createVNode(vue.Fragment, null, [slots.default?.()])]
       })]));
@@ -23051,6 +23267,7 @@
 
   function useTouch(_ref) {
     let {
+      el,
       isActive,
       isTemporary,
       width,
@@ -23100,10 +23317,10 @@
       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);
       }
@@ -23163,6 +23380,18 @@
         transition: 'none'
       } : undefined;
     });
+    useToggleScope(isDragging, () => {
+      const transform = el.value?.style.transform ?? null;
+      const transition = el.value?.style.transition ?? null;
+      vue.watchEffect(() => {
+        el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+        el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+      });
+      vue.onScopeDispose(() => {
+        el.value?.style.setProperty('transform', transform);
+        el.value?.style.setProperty('transition', transition);
+      });
+    });
     return {
       isDragging,
       dragProgress,
@@ -23201,6 +23430,7 @@
     },
     image: String,
     temporary: Boolean,
+    persistent: Boolean,
     touchless: Boolean,
     width: {
       type: [Number, String],
@@ -23282,6 +23512,7 @@
       const location = vue.computed(() => {
         return toPhysical(props.location, isRtl.value);
       });
+      const isPersistent = vue.computed(() => props.persistent);
       const isTemporary = vue.computed(() => !props.permanent && (mobile.value || props.temporary));
       const isSticky = vue.computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
       useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -23301,9 +23532,9 @@
       }
       const {
         isDragging,
-        dragProgress,
-        dragStyles
+        dragProgress
       } = useTouch({
+        el: rootEl,
         isActive,
         isTemporary,
         width,
@@ -23314,6 +23545,7 @@
         const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
         return isDragging.value ? size * dragProgress.value : size;
       });
+      const elementSize = vue.computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
       const {
         layoutItemStyles,
         layoutItemScrimStyles,
@@ -23323,7 +23555,7 @@
         order: vue.computed(() => parseInt(props.order, 10)),
         position: location,
         layoutSize,
-        elementSize: width,
+        elementSize,
         active: vue.computed(() => isActive.value || isDragging.value),
         disableTransitions: vue.computed(() => isDragging.value),
         absolute: vue.computed(() =>
@@ -23365,10 +23597,13 @@
             '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 && vue.createVNode("div", {
             "key": "image",
@@ -23403,7 +23638,10 @@
           default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && vue.createVNode("div", vue.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)]
         })]);
       });
@@ -23884,8 +24122,8 @@
       } = 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;
@@ -24480,9 +24718,6 @@
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
-      const {
-        locationStyles
-      } = useLocation(props);
       const {
         positionClasses
       } = usePosition(props);
@@ -24504,6 +24739,15 @@
       const overlay = vue.ref();
       const timerRef = vue.ref();
       const isHovering = vue.shallowRef(false);
+      const startY = vue.shallowRef(0);
+      const mainStyles = vue.ref();
+      const hasLayout = vue.inject(VuetifyLayoutKey, undefined);
+      useToggleScope(() => !!hasLayout, () => {
+        const layout = useLayout();
+        vue.watchEffect(() => {
+          mainStyles.value = layout.mainStyles.value;
+        });
+      });
       vue.watch(isActive, startTimeout);
       vue.watch(() => props.timeout, startTimeout);
       vue.onMounted(() => {
@@ -24533,6 +24777,20 @@
         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 = vue.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);
@@ -24543,14 +24801,14 @@
             '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": vue.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),
@@ -24558,7 +24816,9 @@
           "noClickAnimation": true,
           "scrim": false,
           "scrollStrategy": "none",
-          "_disableGlobalStack": true
+          "_disableGlobalStack": true,
+          "onTouchstartPassive": onTouchstart,
+          "onTouchend": onTouchend
         }, scopeId), {
           default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createVNode("div", {
             "key": "timer",
@@ -26690,6 +26950,125 @@
 
   // 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 = vue.shallowRef(false);
+      const display = vue.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 vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "modelValue": display.value,
+          "onKeydown": onKeydown,
+          "focused": menu.value || isFocused.value,
+          "onFocus": focus,
+          "onBlur": blur,
+          "onClick:control": onClick,
+          "onClick:prepend": onClick
+        }), {
+          default: () => [vue.createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "min-width": "0",
+            "closeOnContentClick": false,
+            "openOnClick": false
+          }, {
+            default: () => [vue.createVNode(VConfirmEdit, vue.mergeProps(confirmEditProps, {
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
+              "onSave": onSave
+            }), {
+              default: _ref2 => {
+                let {
+                  actions,
+                  model: proxyModel
+                } = _ref2;
+                return vue.createVNode(VDatePicker, vue.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({
@@ -26827,6 +27206,7 @@
     app: Boolean,
     appear: Boolean,
     extended: Boolean,
+    layout: Boolean,
     location: {
       type: String,
       default: 'bottom end'
@@ -26877,8 +27257,8 @@
           id: props.name,
           order: vue.computed(() => parseInt(props.order, 10)),
           position,
-          layoutSize: height,
-          elementSize: vue.computed(() => height.value + 32),
+          layoutSize: vue.computed(() => props.layout ? height.value + 24 : 0),
+          elementSize: vue.computed(() => height.value + 24),
           active: vue.computed(() => props.app && model.value),
           absolute: vue.toRef(props, 'absolute')
         });
@@ -26932,9 +27312,18 @@
     },
     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()
@@ -26945,8 +27334,8 @@
     props: {
       ...makeVNumberInputProps(),
       modelValue: {
-        type: [Number, String],
-        default: 0
+        type: Number,
+        default: undefined
       }
     },
     emits: {
@@ -26965,20 +27354,45 @@
         blur
       } = useFocus(props);
       const inputRef = vue.ref();
+      const stepDecimals = vue.computed(() => getDecimals(props.step));
+      const modelDecimals = vue.computed(() => model.value != null ? getDecimals(model.value) : 0);
+      const canIncrease = vue.computed(() => {
+        if (model.value == null) return true;
+        return model.value + props.step <= props.max;
+      });
+      const canDecrease = vue.computed(() => {
+        if (model.value == null) return true;
+        return model.value - props.step >= props.min;
+      });
+      vue.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 = vue.computed(() => {
         return props.hideInput ? 'stacked' : props.controlVariant;
       });
+      const incrementSlotProps = vue.computed(() => ({
+        click: onClickUp
+      }));
+      const decrementSlotProps = vue.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();
@@ -26986,12 +27400,28 @@
       function onClickDown() {
         toggleUpDown(false);
       }
-      const incrementSlotProps = vue.computed(() => ({
-        click: onClickUp
-      }));
-      const decrementSlotProps = vue.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);
@@ -27004,9 +27434,11 @@
           return vue.createVNode("div", {
             "class": "v-number-input__control"
           }, [!slots.decrement ? vue.createVNode(VBtn, {
+            "disabled": !canDecrease.value,
             "flat": true,
             "key": "decrement-btn",
             "height": defaultHeight,
+            "name": "decrement-btn",
             "icon": "$expand",
             "size": "small",
             "onClick": onClickDown
@@ -27014,6 +27446,7 @@
             "key": "decrement-defaults",
             "defaults": {
               VBtn: {
+                disabled: !canDecrease.value,
                 flat: true,
                 height: defaultHeight,
                 size: 'small',
@@ -27025,9 +27458,11 @@
           }), vue.createVNode(VDivider, {
             "vertical": controlVariant.value !== 'stacked'
           }, null), !slots.increment ? vue.createVNode(VBtn, {
+            "disabled": !canIncrease.value,
             "flat": true,
             "key": "increment-btn",
             "height": defaultHeight,
+            "name": "increment-btn",
             "icon": "$collapse",
             "onClick": onClickUp,
             "size": "small"
@@ -27035,6 +27470,7 @@
             "key": "increment-defaults",
             "defaults": {
               VBtn: {
+                disabled: !canIncrease.value,
                 flat: true,
                 height: defaultHeight,
                 size: 'small',
@@ -27076,17 +27512,16 @@
                   ...slotProps
                 }
               } = _ref2;
-              return vue.withDirectives(vue.createVNode("input", vue.mergeProps({
+              return vue.createVNode("input", vue.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), [[vue.vModelText, model.value]]);
+              }, inputAttrs), null);
             },
             'append-inner': controlVariant.value === 'split' ? () => vue.createVNode("div", {
               "class": "v-number-input__control"
@@ -27116,6 +27551,220 @@
     }
   });
 
+  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 = vue.shallowRef(0);
+      const containerRef = vue.ref();
+      const refreshing = vue.shallowRef(false);
+      const goingUp = vue.shallowRef(false);
+      const touching = vue.shallowRef(false);
+      const canRefresh = vue.computed(() => touchDiff.value >= props.pullDownThreshold && !refreshing.value);
+      const topOffset = vue.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;
+        }
+      }
+      vue.onMounted(() => {
+        scrollParents = getScrollParents(containerRef.value);
+      });
+      vue.watch([topOffset, refreshing], () => {
+        if (scrollParents.length) {
+          const stopScrolling = topOffset.value && !refreshing.value;
+          scrollParents.forEach(p => p.style.overflow = stopScrolling ? 'hidden' : 'auto');
+        }
+      });
+      vue.watch(topOffset, (newVal, oldVal) => {
+        goingUp.value = newVal < oldVal;
+      });
+      useRender(() => {
+        return vue.createVNode("div", {
+          "class": ['v-pull-to-refresh'],
+          "onTouchstart": onTouchstart,
+          "onTouchmove": onTouchmove,
+          "onTouchend": onTouchend,
+          "onMousedown": onTouchstart,
+          "onMouseup": onTouchend,
+          "onMouseleave": onTouchend,
+          "onMousemove": onTouchmove,
+          "ref": containerRef
+        }, [vue.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
+        }) : vue.createVNode("div", {
+          "class": ['v-pull-to-refresh__pull-down-default']
+        }, [refreshing.value ? vue.createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "active": false
+        }, null) : vue.createVNode(VIcon, {
+          "icon": canRefresh.value || goingUp.value ? '$sortAsc' : '$sortDesc'
+        }, null)])]), vue.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 = vue.shallowRef(false);
+      const isVisible = vue.shallowRef(false);
+      const current = vue.shallowRef();
+      vue.watch(() => props.modelValue.length, (val, oldVal) => {
+        if (!isVisible.value && val > oldVal) {
+          showNext();
+        }
+      });
+      vue.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;
+        vue.nextTick(() => {
+          isActive.value = true;
+        });
+      }
+      function onClickClose() {
+        isActive.value = false;
+      }
+      const btnProps = vue.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 vue.createVNode(vue.Fragment, null, [isVisible.value && !!current.value && (slots.default ? vue.createVNode(VDefaultsProvider, {
+          "defaults": {
+            VSnackbar: current.value
+          }
+        }, {
+          default: () => [slots.default({
+            item: current.value
+          })]
+        }) : vue.createVNode(VSnackbar, vue.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 ? () => vue.createVNode(vue.Fragment, null, [!slots.actions ? vue.createVNode(VBtn, vue.mergeProps(btnProps.value, {
+            "onClick": onClickClose
+          }), null) : vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: btnProps.value
+            }
+          }, {
+            default: () => [slots.actions({
+              item: current.value,
+              props: {
+                onClick: onClickClose
+              }
+            })]
+          })]) : undefined
+        }))]);
+      });
+    }
+  });
+
   // Utilities
 
   // Types
@@ -27579,10 +28228,14 @@
   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 = vue.ref();
       const location = vue.computed(() => {
         const [y, x = 'center'] = props.location.split(' ');
@@ -27594,6 +28247,8 @@
       useRender(() => {
         const menuProps = VMenu.filterProps(props);
         return vue.createVNode(VMenu, vue.mergeProps(menuProps, {
+          "modelValue": model.value,
+          "onUpdate:modelValue": $event => model.value = $event,
           "class": props.class,
           "style": props.style,
           "contentClass": ['v-speed-dial__content', locationClasses.value],
@@ -27612,8 +28267,7 @@
             default: () => [vue.createVNode(MaybeTransition, {
               "appear": true,
               "group": true,
-              "transition": props.transition,
-              "mode": "out-in"
+              "transition": props.transition
             }, {
               default: () => [slots.default?.(slotProps)]
             })]
@@ -27631,9 +28285,7 @@
     ampm: Boolean,
     color: String,
     disabled: Boolean,
-    displayedValue: {
-      default: null
-    },
+    displayedValue: null,
     double: Boolean,
     format: {
       type: Function,
@@ -28674,6 +29326,7 @@
     VDataTableRows: VDataTableRows,
     VDataTableServer: VDataTableServer,
     VDataTableVirtual: VDataTableVirtual,
+    VDateInput: VDateInput,
     VDatePicker: VDatePicker,
     VDatePickerControls: VDatePickerControls,
     VDatePickerHeader: VDatePickerHeader,
@@ -28738,6 +29391,7 @@
     VPickerTitle: VPickerTitle,
     VProgressCircular: VProgressCircular,
     VProgressLinear: VProgressLinear,
+    VPullToRefresh: VPullToRefresh,
     VRadio: VRadio,
     VRadioGroup: VRadioGroup,
     VRangeSlider: VRangeSlider,
@@ -28762,6 +29416,7 @@
     VSlideYTransition: VSlideYTransition,
     VSlider: VSlider,
     VSnackbar: VSnackbar,
+    VSnackbarQueue: VSnackbarQueue,
     VSpacer: VSpacer,
     VSparkline: VSparkline,
     VSpeedDial: VSpeedDial,
@@ -28938,7 +29593,7 @@
   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
@@ -28947,7 +29602,9 @@
       // 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 = vue.h(component, vue.mergeProps(_props, value), children);
+      const node = vue.h(component, vue.mergeProps(_props, value), {
+        default: () => children
+      });
       node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
         provides
       });
@@ -29106,7 +29763,7 @@
       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
@@ -29359,7 +30016,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.6.0-alpha.2";
+  const version = "3.6.0";
 
   /* eslint-disable local-rules/sort-imports */