vuetify 3.6.0-alpha.2 → 3.6.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.0-alpha.2
+* Vuetify v3.6.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2223,10 +2223,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'
@@ -2366,6 +2368,7 @@
     badge: 'Badge',
     open: 'Open',
     close: 'Close',
+    dismiss: 'Dismiss',
     confirmEdit: {
       ok: 'OK',
       cancel: 'Cancel'
@@ -4596,6 +4599,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);
@@ -4628,6 +4632,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;
@@ -5010,6 +5022,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: {
@@ -5045,6 +5116,9 @@
     striped: Boolean,
     roundedBar: Boolean,
     ...makeComponentProps(),
+    ...makeLocationProps({
+      location: 'top'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -5067,6 +5141,9 @@
       const {
         themeClasses
       } = provideTheme(props);
+      const {
+        locationStyles
+      } = useLocation(props);
       const {
         textColorClasses,
         textColorStyles
@@ -5117,8 +5194,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',
@@ -5210,65 +5290,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
@@ -5696,6 +5717,7 @@
     prependIcon: IconValue,
     appendIcon: IconValue,
     block: Boolean,
+    readonly: Boolean,
     slim: Boolean,
     stacked: Boolean,
     ripple: {
@@ -5817,6 +5839,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],
@@ -5824,7 +5847,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
         }, {
@@ -6995,6 +7018,7 @@
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...only(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
+    ...makeThemeProps(),
     ...makeValidationProps()
   }, 'VInput');
   const VInput = genericComponent()({
@@ -7017,6 +7041,9 @@
       const {
         dimensionStyles
       } = useDimension(props);
+      const {
+        themeClasses
+      } = provideTheme(props);
       const {
         rtlClasses
       } = useRtl();
@@ -7070,7 +7097,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",
@@ -7297,6 +7324,10 @@
     };
   }
   const makeDisplayProps = propsFactory({
+    mobile: {
+      type: Boolean,
+      default: null
+    },
     mobileBreakpoint: [Number, String]
   }, 'display');
   function useDisplay() {
@@ -7305,6 +7336,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;
@@ -7322,45 +7354,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 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 calculateUpdatedOffset(_ref) {
+
+  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
@@ -7426,6 +7618,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]);
@@ -7448,60 +7648,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;
-        }
-        disableTransition.value = false;
+      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);
+        }
       }
-      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;
@@ -7511,14 +7709,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;
             }
           }
@@ -7527,66 +7718,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,
@@ -7620,11 +7824,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', {
@@ -7641,6 +7851,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, {
@@ -7654,10 +7865,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
@@ -7666,6 +7873,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, {
@@ -9460,7 +9668,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') {
@@ -9580,7 +9789,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
@@ -9827,7 +10036,7 @@
         let {
           x,
           y
-        } = getOffset$2(targetPoint, contentPoint);
+        } = getOffset$1(targetPoint, contentPoint);
         switch (_placement.anchor.side) {
           case 'top':
             y -= offset.value[0];
@@ -10365,7 +10574,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;
@@ -10437,14 +10646,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') {
@@ -10897,9 +11106,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,
@@ -12378,6 +12587,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);
+          });
         }
       }
 
@@ -12426,7 +12639,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(() => {
@@ -12880,16 +13093,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') {
@@ -12937,7 +13148,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);
 
@@ -13577,12 +13788,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');
@@ -13625,6 +13836,9 @@
           });
         }
       }
+      function onAfterLeave() {
+        emit('afterLeave');
+      }
       vue.watch(isActive, async val => {
         if (!val) {
           await vue.nextTick();
@@ -13656,7 +13870,8 @@
           "activatorProps": activatorProps,
           "contentProps": contentProps,
           "role": "dialog",
-          "onAfterEnter": onAfterEnter
+          "onAfterEnter": onAfterEnter,
+          "onAfterLeave": onAfterLeave
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -14744,7 +14959,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)]
         });
@@ -15193,7 +15408,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;
@@ -15352,7 +15567,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({
@@ -16749,16 +16964,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') {
@@ -16827,7 +17040,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;
@@ -18399,110 +18612,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
@@ -19653,6 +19762,7 @@
     headerProps: {
       type: Object
     },
+    ...makeDisplayProps(),
     ...makeLoaderProps()
   }, 'VDataTableHeaders');
   const VDataTableHeaders = genericComponent()({
@@ -19662,6 +19772,9 @@
       let {
         slots
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const {
         toggleSort,
         sortBy,
@@ -19697,6 +19810,10 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      const {
+        displayClasses,
+        mobile
+      } = useDisplay(props);
       const slotProps = vue.computed(() => ({
         headers: headers.value,
         columns: columns.value,
@@ -19708,6 +19825,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,
@@ -19719,12 +19839,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),
@@ -19773,8 +19892,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
@@ -19882,7 +20046,8 @@
     cellProps: [Object, Function],
     onClick: EventProp(),
     onContextmenu: EventProp(),
-    onDblclick: EventProp()
+    onDblclick: EventProp(),
+    ...makeDisplayProps()
   }, 'VDataTableRow');
   const VDataTableRow = genericComponent()({
     name: 'VDataTableRow',
@@ -19891,27 +20056,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,
@@ -19923,6 +20101,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,
@@ -19938,16 +20126,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,
@@ -19963,7 +20155,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])]);
           }
         });
       })]));
@@ -19988,7 +20185,8 @@
       default: '$vuetify.noDataText'
     },
     rowProps: [Object, Function],
-    cellProps: [Object, Function]
+    cellProps: [Object, Function],
+    ...makeDisplayProps()
   }, 'VDataTableRows');
   const VDataTableRows = genericComponent()({
     name: 'VDataTableRows',
@@ -20018,6 +20216,9 @@
       const {
         t
       } = useLocale();
+      const {
+        mobile
+      } = useDisplay(props);
       useRender(() => {
         if (props.loading && (!props.items.length || slots.loading)) {
           return vue.createVNode("tr", {
@@ -20072,7 +20273,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,
@@ -21899,8 +22101,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(() => {
@@ -22243,7 +22455,7 @@
     }),
     modelValue: {
       type: [Array, Object],
-      default: () => [],
+      default: props => props.multiple ? [] : null,
       validator: val => {
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
@@ -22902,6 +23114,7 @@
 
   const makeVLayoutProps = propsFactory({
     ...makeComponentProps(),
+    ...makeDimensionProps(),
     ...makeLayoutProps()
   }, 'VLayout');
   const VLayout = genericComponent()({
@@ -22918,10 +23131,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?.()])]
       })]));
@@ -23284,6 +23500,7 @@
 
   function useTouch(_ref) {
     let {
+      el,
       isActive,
       isTemporary,
       width,
@@ -23333,10 +23550,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);
       }
@@ -23396,6 +23613,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,
@@ -23434,6 +23663,7 @@
     },
     image: String,
     temporary: Boolean,
+    persistent: Boolean,
     touchless: Boolean,
     width: {
       type: [Number, String],
@@ -23515,6 +23745,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, () => {
@@ -23534,9 +23765,9 @@
       }
       const {
         isDragging,
-        dragProgress,
-        dragStyles
+        dragProgress
       } = useTouch({
+        el: rootEl,
         isActive,
         isTemporary,
         width,
@@ -23547,6 +23778,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,
@@ -23556,7 +23788,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(() =>
@@ -23598,10 +23830,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",
@@ -23636,7 +23871,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)]
         })]);
       });
@@ -24117,8 +24355,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;
@@ -24713,9 +24951,6 @@
         slots
       } = _ref;
       const isActive = useProxiedModel(props, 'modelValue');
-      const {
-        locationStyles
-      } = useLocation(props);
       const {
         positionClasses
       } = usePosition(props);
@@ -24737,6 +24972,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(() => {
@@ -24766,6 +25010,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);
@@ -24776,14 +25034,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),
@@ -24791,7 +25049,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",
@@ -26667,7 +26927,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
@@ -26676,7 +26936,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
       });
@@ -26835,7 +27097,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
@@ -26860,7 +27122,7 @@
       ...options
     });
   };
-  const version = "3.6.0-alpha.2";
+  const version = "3.6.0";
   createVuetify.version = version;
 
   exports.blueprints = index;