vuetify 3.6.0-alpha.2 → 3.6.0

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.6.0-alpha.2
+* Vuetify v3.6.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, Suspense, TransitionGroup, Transition, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, shallowRef, readonly, unref, warn, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, createVNode, mergeProps, onBeforeUnmount, watch, nextTick, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, Suspense, TransitionGroup, Transition, isRef, toRef, onBeforeMount, withDirectives, resolveDirective, vShow, onMounted, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -2219,10 +2219,12 @@ function createLayout(props) {
         const isHorizontal = position.value === 'left' || position.value === 'right';
         const isOppositeHorizontal = position.value === 'right';
         const isOppositeVertical = position.value === 'bottom';
+        const size = elementSize.value ?? layoutSize.value;
+        const unit = size === 0 ? '%' : 'px';
         const styles = {
           [position.value]: 0,
           zIndex: zIndex.value,
-          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -(elementSize.value ?? layoutSize.value)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}px)`,
+          transform: `translate${isHorizontal ? 'X' : 'Y'}(${(active.value ? 0 : -(size === 0 ? 100 : size)) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}${unit})`,
           position: absolute.value || rootZIndex.value !== ROOT_ZINDEX ? 'absolute' : 'fixed',
           ...(transitionsEnabled.value ? undefined : {
             transition: 'none'
@@ -2362,6 +2364,7 @@ var en = {
   badge: 'Badge',
   open: 'Open',
   close: 'Close',
+  dismiss: 'Dismiss',
   confirmEdit: {
     ok: 'OK',
     cancel: 'Cancel'
@@ -4592,6 +4595,7 @@ function useGroup(props, injectKey) {
     const index = children.indexOf(vm);
     if (unref(unwrapped.value) == null) {
       unwrapped.value = index;
+      unwrapped.useIndexAsValue = true;
     }
     if (index > -1) {
       items.splice(index, 0, unwrapped);
@@ -4624,6 +4628,14 @@ function useGroup(props, injectKey) {
   onBeforeUnmount(() => {
     isUnmounted = true;
   });
+  onUpdated(() => {
+    // #19655 update the items that use the index as the value.
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].useIndexAsValue) {
+        items[i].value = i;
+      }
+    }
+  });
   function select(id, value) {
     const item = items.find(item => item.id === id);
     if (value && item?.disabled) return;
@@ -5006,6 +5018,65 @@ const VProgressCircular = genericComponent()({
   }
 });
 
+// Composables
+
+// Types
+
+const oppositeMap = {
+  center: 'center',
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const makeLocationProps = propsFactory({
+  location: String
+}, 'location');
+function useLocation(props) {
+  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let offset = arguments.length > 2 ? arguments[2] : undefined;
+  const {
+    isRtl
+  } = useRtl();
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+    function getOffset(side) {
+      return offset ? offset(side) : 0;
+    }
+    const styles = {};
+    if (side !== 'center') {
+      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== 'center') {
+      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === 'center') styles.top = styles.left = '50%';else {
+        styles[{
+          top: 'left',
+          bottom: 'left',
+          left: 'top',
+          right: 'top'
+        }[side]] = '50%';
+      }
+      styles.transform = {
+        top: 'translateX(-50%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateY(-50%)',
+        right: 'translateY(-50%)',
+        center: 'translate(-50%, -50%)'
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+
 const makeVProgressLinearProps = propsFactory({
   absolute: Boolean,
   active: {
@@ -5041,6 +5112,9 @@ const makeVProgressLinearProps = propsFactory({
   striped: Boolean,
   roundedBar: Boolean,
   ...makeComponentProps(),
+  ...makeLocationProps({
+    location: 'top'
+  }),
   ...makeRoundedProps(),
   ...makeTagProps(),
   ...makeThemeProps()
@@ -5063,6 +5137,9 @@ const VProgressLinear = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -5113,8 +5190,11 @@ const VProgressLinear = genericComponent()({
         'v-progress-linear--striped': props.striped
       }, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class],
       "style": [{
+        bottom: props.location === 'bottom' ? 0 : undefined,
+        top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
-        '--v-progress-linear-height': convertToUnit(height.value)
+        '--v-progress-linear-height': convertToUnit(height.value),
+        ...(props.absolute ? locationStyles.value : {})
       }, props.style],
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
@@ -5206,65 +5286,6 @@ function LoaderSlot(props, _ref) {
   }, null)]);
 }
 
-// Composables
-
-// Types
-
-const oppositeMap = {
-  center: 'center',
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
-const makeLocationProps = propsFactory({
-  location: String
-}, 'location');
-function useLocation(props) {
-  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let offset = arguments.length > 2 ? arguments[2] : undefined;
-  const {
-    isRtl
-  } = useRtl();
-  const locationStyles = computed(() => {
-    if (!props.location) return {};
-    const {
-      side,
-      align
-    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-    function getOffset(side) {
-      return offset ? offset(side) : 0;
-    }
-    const styles = {};
-    if (side !== 'center') {
-      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-    }
-    if (align !== 'center') {
-      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-    } else {
-      if (side === 'center') styles.top = styles.left = '50%';else {
-        styles[{
-          top: 'left',
-          bottom: 'left',
-          left: 'top',
-          right: 'top'
-        }[side]] = '50%';
-      }
-      styles.transform = {
-        top: 'translateX(-50%)',
-        bottom: 'translateX(-50%)',
-        left: 'translateY(-50%)',
-        right: 'translateY(-50%)',
-        center: 'translate(-50%, -50%)'
-      }[side];
-    }
-    return styles;
-  });
-  return {
-    locationStyles
-  };
-}
-
 // Utilities
 
 // Types
@@ -5692,6 +5713,7 @@ const makeVBtnProps = propsFactory({
   prependIcon: IconValue,
   appendIcon: IconValue,
   block: Boolean,
+  readonly: Boolean,
   slim: Boolean,
   stacked: Boolean,
   ripple: {
@@ -5813,6 +5835,7 @@ const VBtn = genericComponent()({
           'v-btn--flat': props.flat,
           'v-btn--icon': !!props.icon,
           'v-btn--loading': props.loading,
+          'v-btn--readonly': props.readonly,
           'v-btn--slim': props.slim,
           'v-btn--stacked': props.stacked
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
@@ -5820,7 +5843,7 @@ const VBtn = genericComponent()({
         "aria-busy": props.loading ? true : undefined,
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
-        "tabindex": props.loading ? -1 : undefined,
+        "tabindex": props.loading || props.readonly ? -1 : undefined,
         "onClick": onClick,
         "value": valueAttr.value
       }, {
@@ -6991,6 +7014,7 @@ const makeVInputProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...only(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
+  ...makeThemeProps(),
   ...makeValidationProps()
 }, 'VInput');
 const VInput = genericComponent()({
@@ -7013,6 +7037,9 @@ const VInput = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
@@ -7066,7 +7093,7 @@ const VInput = genericComponent()({
         "class": ['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, rtlClasses.value, validationClasses.value, props.class],
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
         "style": [dimensionStyles.value, props.style]
       }, [hasPrepend && createVNode("div", {
         "key": "prepend",
@@ -7293,6 +7320,10 @@ function createDisplay(options, ssr) {
   };
 }
 const makeDisplayProps = propsFactory({
+  mobile: {
+    type: Boolean,
+    default: null
+  },
   mobileBreakpoint: [Number, String]
 }, 'display');
 function useDisplay() {
@@ -7301,6 +7332,7 @@ function useDisplay() {
   const display = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
   const mobile = computed(() => {
+    if (props.mobile != null) return props.mobile;
     if (!props.mobileBreakpoint) return display.mobile.value;
     const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
     return display.width.value < breakpointValue;
@@ -7318,45 +7350,205 @@ function useDisplay() {
   };
 }
 
-function bias(val) {
-  const c = 0.501;
-  const x = Math.abs(val);
-  return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
+// Utilities
+
+// Types
+
+const GoToSymbol = Symbol.for('vuetify:goto');
+function genDefaults() {
+  return {
+    container: undefined,
+    duration: 300,
+    layout: false,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    patterns: {
+      linear: t => t,
+      easeInQuad: t => t ** 2,
+      easeOutQuad: t => t * (2 - t),
+      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
+      easeInCubic: t => t ** 3,
+      easeOutCubic: t => --t ** 3 + 1,
+      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+      easeInQuart: t => t ** 4,
+      easeOutQuart: t => 1 - --t ** 4,
+      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
+      easeInQuint: t => t ** 5,
+      easeOutQuint: t => 1 + --t ** 5,
+      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
+    }
+  };
+}
+function getContainer(el) {
+  return getTarget$1(el) ?? (document.scrollingElement || document.body);
+}
+function getTarget$1(el) {
+  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
+}
+function getOffset$2(target, horizontal, rtl) {
+  if (typeof target === 'number') return horizontal && rtl ? -target : target;
+  let el = getTarget$1(target);
+  let totalOffset = 0;
+  while (el) {
+    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
+    el = el.offsetParent;
+  }
+  return totalOffset;
+}
+function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options)
+  };
+}
+async function scrollTo(_target, _options, horizontal, goTo) {
+  const property = horizontal ? 'scrollLeft' : 'scrollTop';
+  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
+  const rtl = goTo?.rtl.value;
+  const target = (typeof _target === 'number' ? _target : getTarget$1(_target)) ?? 0;
+  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
+  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
+  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
+  let targetLocation;
+  if (typeof target === 'number') {
+    targetLocation = getOffset$2(target, horizontal, rtl);
+  } else {
+    targetLocation = getOffset$2(target, horizontal, rtl) - getOffset$2(container, horizontal, rtl);
+    if (options.layout) {
+      const styles = window.getComputedStyle(target);
+      const layoutOffset = styles.getPropertyValue('--v-layout-top');
+      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
+    }
+  }
+  targetLocation += options.offset;
+  targetLocation = clampTarget(container, targetLocation, !!rtl, !!horizontal);
+  const startLocation = container[property] ?? 0;
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
+  const startTime = performance.now();
+  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
+    const timeElapsed = currentTime - startTime;
+    const progress = timeElapsed / options.duration;
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1)));
+    container[property] = location;
+
+    // Allow for some jitter if target time has elapsed
+    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+      return resolve(targetLocation);
+    } else if (progress > 2) {
+      // The target might not be reachable
+      consoleWarn('Scroll target is not reachable');
+      return resolve(container[property]);
+    }
+    requestAnimationFrame(step);
+  }));
+}
+function useGoTo() {
+  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const goToInstance = inject$1(GoToSymbol);
+  const {
+    isRtl
+  } = useRtl();
+  if (!goToInstance) throw new Error('[Vuetify] Could not find injected goto instance');
+  const goTo = {
+    ...goToInstance,
+    // can be set via VLocaleProvider
+    rtl: computed(() => goToInstance.rtl.value || isRtl.value)
+  };
+  async function go(target, options) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+  };
+  return go;
+}
+
+/**
+ * Clamp target value to achieve a smooth scroll animation
+ * when the value goes outside the scroll container size
+ */
+function clampTarget(container, value, rtl, horizontal) {
+  const {
+    scrollWidth,
+    scrollHeight
+  } = container;
+  const [containerWidth, containerHeight] = container === document.scrollingElement ? [window.innerWidth, window.innerHeight] : [container.offsetWidth, container.offsetHeight];
+  let min;
+  let max;
+  if (horizontal) {
+    if (rtl) {
+      min = -(scrollWidth - containerWidth);
+      max = 0;
+    } else {
+      min = 0;
+      max = scrollWidth - containerWidth;
+    }
+  } else {
+    min = 0;
+    max = scrollHeight + -containerHeight;
+  }
+  return Math.max(Math.min(value, max), min);
 }
-function 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
@@ -7422,6 +7614,14 @@ const VSlideGroup = genericComponent()({
       resizeRef: contentRef,
       contentRect
     } = useResizeObserver();
+    const goTo = useGoTo();
+    const goToOptions = computed(() => {
+      return {
+        container: containerRef.value,
+        duration: 200,
+        easing: 'easeOutQuart'
+      };
+    });
     const firstSelectedIndex = computed(() => {
       if (!group.selected.value.length) return -1;
       return group.items.value.findIndex(item => item.id === group.selected.value[0]);
@@ -7444,60 +7644,58 @@ const VSlideGroup = genericComponent()({
           if (firstSelectedIndex.value >= 0 && contentRef.value) {
             // TODO: Is this too naive? Should we store element references in group composable?
             const selectedElement = contentRef.value.children[lastSelectedIndex.value];
-            if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
-              scrollOffset.value = 0;
-            } else if (props.centerActive) {
-              scrollOffset.value = calculateCenteredOffset({
-                selectedElement,
-                containerSize: containerSize.value,
-                contentSize: contentSize.value,
-                isRtl: isRtl.value,
-                isHorizontal: isHorizontal.value
-              });
-            } else if (isOverflowing.value) {
-              scrollOffset.value = calculateUpdatedOffset({
-                selectedElement,
-                containerSize: containerSize.value,
-                contentSize: contentSize.value,
-                isRtl: isRtl.value,
-                currentScrollOffset: scrollOffset.value,
-                isHorizontal: isHorizontal.value
-              });
-            }
+            scrollToChildren(selectedElement, props.centerActive);
           }
         });
       });
     }
-    const disableTransition = shallowRef(false);
-    let startTouch = 0;
-    let startOffset = 0;
-    function onTouchstart(e) {
-      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      startOffset = sign * scrollOffset.value;
-      startTouch = e.touches[0][sizeProperty];
-      disableTransition.value = true;
-    }
-    function onTouchmove(e) {
-      if (!isOverflowing.value) return;
-      const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      scrollOffset.value = sign * (startOffset + startTouch - e.touches[0][sizeProperty]);
-    }
-    function onTouchend(e) {
-      const maxScrollOffset = contentSize.value - containerSize.value;
-      if (scrollOffset.value < 0 || !isOverflowing.value) {
-        scrollOffset.value = 0;
-      } else if (scrollOffset.value >= maxScrollOffset) {
-        scrollOffset.value = maxScrollOffset;
-      }
-      disableTransition.value = false;
+    const isFocused = shallowRef(false);
+    function scrollToChildren(children, center) {
+      let target = 0;
+      if (center) {
+        target = calculateCenteredTarget({
+          containerElement: containerRef.value,
+          isHorizontal: isHorizontal.value,
+          selectedElement: children
+        });
+      } else {
+        target = calculateUpdatedTarget({
+          containerElement: containerRef.value,
+          isHorizontal: isHorizontal.value,
+          isRtl: isRtl.value,
+          selectedElement: children
+        });
+      }
+      scrollToPosition(target);
+    }
+    function scrollToPosition(newPosition) {
+      if (!IN_BROWSER || !containerRef.value) return;
+      const offsetSize = getOffsetSize(isHorizontal.value, containerRef.value);
+      const scrollPosition = getScrollPosition(isHorizontal.value, isRtl.value, containerRef.value);
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+      if (scrollSize <= offsetSize ||
+      // Prevent scrolling by only a couple of pixels, which doesn't look smooth
+      Math.abs(newPosition - scrollPosition) < 16) return;
+      if (isHorizontal.value && isRtl.value && containerRef.value) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.value;
+        newPosition = scrollWidth - containerWidth - newPosition;
+      }
+      if (isHorizontal.value) {
+        goTo.horizontal(newPosition, goToOptions.value);
+      } else {
+        goTo(newPosition, goToOptions.value);
+      }
     }
-    function onScroll() {
-      if (!containerRef.value) return;
-      containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
+    function onScroll(e) {
+      const {
+        scrollTop,
+        scrollLeft
+      } = e.target;
+      scrollOffset.value = isHorizontal.value ? scrollLeft : scrollTop;
     }
-    const isFocused = shallowRef(false);
     function onFocusin(e) {
       isFocused.value = true;
       if (!isOverflowing.value || !contentRef.value) return;
@@ -7507,14 +7705,7 @@ const VSlideGroup = genericComponent()({
       for (const el of e.composedPath()) {
         for (const item of contentRef.value.children) {
           if (item === el) {
-            scrollOffset.value = calculateUpdatedOffset({
-              selectedElement: item,
-              containerSize: containerSize.value,
-              contentSize: contentSize.value,
-              isRtl: isRtl.value,
-              currentScrollOffset: scrollOffset.value,
-              isHorizontal: isHorizontal.value
-            });
+            scrollToChildren(item);
             return;
           }
         }
@@ -7523,66 +7714,79 @@ const VSlideGroup = genericComponent()({
     function onFocusout(e) {
       isFocused.value = false;
     }
+
+    // Affix clicks produce onFocus that we have to ignore to avoid extra scrollToChildren
+    let ignoreFocusEvent = false;
     function onFocus(e) {
-      if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+      if (!ignoreFocusEvent && !isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+      ignoreFocusEvent = false;
+    }
+    function onFocusAffixes() {
+      ignoreFocusEvent = true;
     }
     function onKeydown(e) {
       if (!contentRef.value) return;
+      function toFocus(location) {
+        e.preventDefault();
+        focus(location);
+      }
       if (isHorizontal.value) {
         if (e.key === 'ArrowRight') {
-          focus(isRtl.value ? 'prev' : 'next');
+          toFocus(isRtl.value ? 'prev' : 'next');
         } else if (e.key === 'ArrowLeft') {
-          focus(isRtl.value ? 'next' : 'prev');
+          toFocus(isRtl.value ? 'next' : 'prev');
         }
       } else {
         if (e.key === 'ArrowDown') {
-          focus('next');
+          toFocus('next');
         } else if (e.key === 'ArrowUp') {
-          focus('prev');
+          toFocus('prev');
         }
       }
       if (e.key === 'Home') {
-        focus('first');
+        toFocus('first');
       } else if (e.key === 'End') {
-        focus('last');
+        toFocus('last');
       }
     }
     function focus(location) {
       if (!contentRef.value) return;
+      let el;
       if (!location) {
         const focusable = focusableChildren(contentRef.value);
-        focusable[0]?.focus();
+        el = focusable[0];
       } else if (location === 'next') {
-        const el = contentRef.value.querySelector(':focus')?.nextElementSibling;
-        if (el) el.focus();else focus('first');
+        el = contentRef.value.querySelector(':focus')?.nextElementSibling;
+        if (!el) return focus('first');
       } else if (location === 'prev') {
-        const el = contentRef.value.querySelector(':focus')?.previousElementSibling;
-        if (el) el.focus();else focus('last');
+        el = contentRef.value.querySelector(':focus')?.previousElementSibling;
+        if (!el) return focus('last');
       } else if (location === 'first') {
-        contentRef.value.firstElementChild?.focus();
+        el = contentRef.value.firstElementChild;
       } else if (location === 'last') {
-        contentRef.value.lastElementChild?.focus();
+        el = contentRef.value.lastElementChild;
+      }
+      if (el) {
+        el.focus({
+          preventScroll: true
+        });
       }
     }
     function scrollTo(location) {
-      const newAbsoluteOffset = scrollOffset.value + (location === 'prev' ? -1 : 1) * containerSize.value;
-      scrollOffset.value = clamp(newAbsoluteOffset, 0, contentSize.value - containerSize.value);
-    }
-    const contentStyles = computed(() => {
-      // This adds friction when scrolling the 'wrong' way when at max offset
-      let scrollAmount = scrollOffset.value > contentSize.value - containerSize.value ? -(contentSize.value - containerSize.value) + bias(contentSize.value - containerSize.value - scrollOffset.value) : -scrollOffset.value;
+      const direction = isHorizontal.value && isRtl.value ? -1 : 1;
+      const offsetStep = (location === 'prev' ? -direction : direction) * containerSize.value;
+      let newPosition = scrollOffset.value + offsetStep;
 
-      // This adds friction when scrolling the 'wrong' way when at min offset
-      if (scrollOffset.value <= 0) {
-        scrollAmount = bias(-scrollOffset.value);
+      // TODO: improve it
+      if (isHorizontal.value && isRtl.value && containerRef.value) {
+        const {
+          scrollWidth,
+          offsetWidth: containerWidth
+        } = containerRef.value;
+        newPosition += scrollWidth - containerWidth;
       }
-      const sign = isRtl.value && isHorizontal.value ? -1 : 1;
-      return {
-        transform: `translate${isHorizontal.value ? 'X' : 'Y'}(${sign * scrollAmount}px)`,
-        transition: disableTransition.value ? 'none' : '',
-        willChange: disableTransition.value ? 'transform' : ''
-      };
-    });
+      scrollToPosition(newPosition);
+    }
     const slotProps = computed(() => ({
       next: group.next,
       prev: group.prev,
@@ -7616,11 +7820,17 @@ const VSlideGroup = genericComponent()({
       }
     });
     const hasPrev = computed(() => {
-      return Math.abs(scrollOffset.value) > 0;
+      // 1 pixel in reserve, may be lost after rounding
+      return Math.abs(scrollOffset.value) > 1;
     });
     const hasNext = computed(() => {
-      // Check one scroll ahead to know the width of right-most item
-      return contentSize.value > Math.abs(scrollOffset.value) + containerSize.value;
+      if (!containerRef.value) return false;
+      const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
+      const clientSize = getClientSize(isHorizontal.value, containerRef.value);
+      const scrollSizeMax = scrollSize - clientSize;
+
+      // 1 pixel in reserve, may be lost after rounding
+      return scrollSizeMax - Math.abs(scrollOffset.value) > 1;
     });
     useRender(() => createVNode(props.tag, {
       "class": ['v-slide-group', {
@@ -7637,6 +7847,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__prev', {
           'v-slide-group__prev--disabled': !hasPrev.value
         }],
+        "onMousedown": onFocusAffixes,
         "onClick": () => hasPrev.value && scrollTo('prev')
       }, [slots.prev?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
@@ -7650,10 +7861,6 @@ const VSlideGroup = genericComponent()({
       }, [createVNode("div", {
         "ref": contentRef,
         "class": "v-slide-group__content",
-        "style": contentStyles.value,
-        "onTouchstartPassive": onTouchstart,
-        "onTouchmovePassive": onTouchmove,
-        "onTouchendPassive": onTouchend,
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
         "onKeydown": onKeydown
@@ -7662,6 +7869,7 @@ const VSlideGroup = genericComponent()({
         "class": ['v-slide-group__next', {
           'v-slide-group__next--disabled': !hasNext.value
         }],
+        "onMousedown": onFocusAffixes,
         "onClick": () => hasNext.value && scrollTo('next')
       }, [slots.next?.(slotProps.value) ?? createVNode(VFadeTransition, null, {
         default: () => [createVNode(VIcon, {
@@ -9456,7 +9664,8 @@ const VList = genericComponent()({
       if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
     }
     function onKeydown(e) {
-      if (!contentRef.value) return;
+      const target = e.target;
+      if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
       if (e.key === 'ArrowDown') {
         focus('next');
       } else if (e.key === 'ArrowUp') {
@@ -9576,7 +9785,7 @@ function elementToViewport(point, offset) {
 }
 
 /** Get the difference between two points */
-function getOffset$2(a, b) {
+function getOffset$1(a, b) {
   return {
     x: a.x - b.x,
     y: a.y - b.y
@@ -9823,7 +10032,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
       let {
         x,
         y
-      } = getOffset$2(targetPoint, contentPoint);
+      } = getOffset$1(targetPoint, contentPoint);
       switch (_placement.anchor.side) {
         case 'top':
           y -= offset.value[0];
@@ -10361,7 +10570,7 @@ function useActivator(props, _ref) {
   const target = computed(() => {
     if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
     if (targetRef.value) return refElement(targetRef.value);
-    return getTarget$1(props.target, vm) || activatorEl.value;
+    return getTarget(props.target, vm) || activatorEl.value;
   });
   const targetEl = computed(() => {
     return Array.isArray(target.value) ? undefined : target.value;
@@ -10433,14 +10642,14 @@ function _useActivator(props, vm, _ref2) {
   }
   function getActivator() {
     let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-    const activator = getTarget$1(selector, vm);
+    const activator = getTarget(selector, vm);
 
     // The activator should only be a valid element (Ignore comments and text nodes)
     activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
     return activatorEl.value;
   }
 }
-function getTarget$1(selector, vm) {
+function getTarget(selector, vm) {
   if (!selector) return;
   let target;
   if (selector === 'parent') {
@@ -10893,9 +11102,9 @@ const VOverlay = genericComponent()({
     }
     useRender(() => createVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
+      targetRef,
       props: mergeProps({
-        ref: activatorRef,
-        targetRef
+        ref: activatorRef
       }, activatorEvents.value, props.activatorProps)
     }), isMounted.value && hasContent.value && createVNode(Teleport, {
       "disabled": !teleportTarget.value,
@@ -12374,6 +12583,10 @@ const VSelect = genericComponent()({
       const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
       if (item !== undefined) {
         model.value = [item];
+        const index = displayItems.value.indexOf(item);
+        IN_BROWSER && window.requestAnimationFrame(() => {
+          index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+        });
       }
     }
 
@@ -12422,7 +12635,7 @@ const VSelect = genericComponent()({
         vTextFieldRef.value.value = '';
       }
     }
-    watch([menu, model], () => {
+    watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
         IN_BROWSER && window.requestAnimationFrame(() => {
@@ -12876,16 +13089,14 @@ const VAutocomplete = genericComponent()({
         listRef.value?.focus('next');
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -12933,7 +13144,7 @@ const VAutocomplete = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     const isSelecting = shallowRef(false);
 
@@ -13573,12 +13784,12 @@ const VDialog = genericComponent()({
   name: 'VDialog',
   props: makeVDialogProps(),
   emits: {
-    'click:outside': e => true,
     'update:modelValue': value => true,
     afterLeave: () => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
@@ -13621,6 +13832,9 @@ const VDialog = genericComponent()({
         });
       }
     }
+    function onAfterLeave() {
+      emit('afterLeave');
+    }
     watch(isActive, async val => {
       if (!val) {
         await nextTick();
@@ -13652,7 +13866,8 @@ const VDialog = genericComponent()({
         "activatorProps": activatorProps,
         "contentProps": contentProps,
         "role": "dialog",
-        "onAfterEnter": onAfterEnter
+        "onAfterEnter": onAfterEnter,
+        "onAfterLeave": onAfterLeave
       }, scopeId), {
         activator: slots.activator,
         default: function () {
@@ -14740,7 +14955,7 @@ const VCarouselItem = genericComponent()({
       const imgProps = VImg.filterProps(props);
       const windowItemProps = VWindowItem.filterProps(props);
       return createVNode(VWindowItem, mergeProps({
-        "class": "v-carousel-item"
+        "class": ['v-carousel-item', props.class]
       }, windowItemProps), {
         default: () => [createVNode(VImg, mergeProps(attrs, imgProps), slots)]
       });
@@ -15189,7 +15404,7 @@ const VColorPickerEdit = defineComponent({
 // Types
 
 const VSliderSymbol = Symbol.for('vuetify:v-slider');
-function getOffset$1(e, el, direction) {
+function getOffset(e, el, direction) {
   const vertical = direction === 'vertical';
   const rect = el.getBoundingClientRect();
   const touch = 'touches' in e ? e.touches[0] : e;
@@ -15348,7 +15563,7 @@ const useSlider = _ref => {
     activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
-      startOffset.value = getOffset$1(e, activeThumbRef.value, props.direction);
+      startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
       onSliderMove({
@@ -16745,16 +16960,14 @@ const VCombobox = genericComponent()({
         if (hasSelectionSlot.value) _search.value = '';
       }
       if (['Backspace', 'Delete'].includes(e.key)) {
-        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0) return select(model.value[0], false);
-        if (selectionIndex.value < 0) {
-          if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
+        if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+        if (~selectionIndex.value) {
+          const originalSelectionIndex = selectionIndex.value;
+          select(model.value[selectionIndex.value], false);
+          selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+        } else if (e.key === 'Backspace' && !search.value) {
+          selectionIndex.value = length - 1;
         }
-        const originalSelectionIndex = selectionIndex.value;
-        select(model.value[selectionIndex.value], false);
-        selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (!props.multiple) return;
       if (e.key === 'ArrowLeft') {
@@ -16823,7 +17036,7 @@ const VCombobox = genericComponent()({
       listHasFocus.value = false;
     }
     function onUpdateModelValue(v) {
-      if (v == null || v === '' && !props.multiple) model.value = [];
+      if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
     }
     watch(isFocused, (val, oldVal) => {
       if (val || val === oldVal) return;
@@ -18395,110 +18608,6 @@ function getWeek(adapter, value) {
   return Math.floor(diffDays / 7) + 1;
 }
 
-// Utilities
-
-// Types
-
-const GoToSymbol = Symbol.for('vuetify:goto');
-function genDefaults() {
-  return {
-    container: undefined,
-    duration: 300,
-    layout: false,
-    offset: 0,
-    easing: 'easeInOutCubic',
-    patterns: {
-      linear: t => t,
-      easeInQuad: t => t ** 2,
-      easeOutQuad: t => t * (2 - t),
-      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
-      easeInCubic: t => t ** 3,
-      easeOutCubic: t => --t ** 3 + 1,
-      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-      easeInQuart: t => t ** 4,
-      easeOutQuart: t => 1 - --t ** 4,
-      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
-      easeInQuint: t => t ** 5,
-      easeOutQuint: t => 1 + --t ** 5,
-      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
-    }
-  };
-}
-function getContainer(el) {
-  return getTarget(el) ?? (document.scrollingElement || document.body);
-}
-function getTarget(el) {
-  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
-}
-function getOffset(target, horizontal, rtl) {
-  if (typeof target === 'number') return horizontal && rtl ? -target : target;
-  let el = getTarget(target);
-  let totalOffset = 0;
-  while (el) {
-    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
-    el = el.offsetParent;
-  }
-  return totalOffset;
-}
-function createGoTo(options, locale) {
-  return {
-    rtl: locale.isRtl,
-    options: mergeDeep(genDefaults(), options)
-  };
-}
-async function scrollTo(_target, _options, horizontal, goTo) {
-  const property = horizontal ? 'scrollLeft' : 'scrollTop';
-  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
-  const rtl = goTo?.rtl.value;
-  const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
-  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
-  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
-  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
-  let targetLocation;
-  if (typeof target === 'number') {
-    targetLocation = getOffset(target, horizontal, rtl);
-  } else {
-    targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl);
-    if (options.layout) {
-      const styles = window.getComputedStyle(target);
-      const layoutOffset = styles.getPropertyValue('--v-layout-top');
-      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
-    }
-  }
-  targetLocation += options.offset;
-  const startLocation = container[property] ?? 0;
-  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
-  const startTime = performance.now();
-  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
-    const timeElapsed = currentTime - startTime;
-    const progress = timeElapsed / options.duration;
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1)));
-    container[property] = location;
-
-    // Allow for some jitter if target time has elapsed
-    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
-      return resolve(targetLocation);
-    } else if (progress > 2) {
-      // The target might not be reachable
-      consoleWarn('Scroll target is not reachable');
-      return resolve(container[property]);
-    }
-    requestAnimationFrame(step);
-  }));
-}
-function useGoTo() {
-  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const goTo = inject$1(GoToSymbol);
-  if (!goTo) throw new Error('[Vuetify] Could not find injected goto instance');
-  async function go(target, options) {
-    return scrollTo(target, mergeDeep(_options, options), false, goTo);
-  }
-  go.horizontal = async (target, options) => {
-    return scrollTo(target, mergeDeep(_options, options), true, goTo);
-  };
-  return go;
-}
-
 // Composables
 
 // Types
@@ -19649,6 +19758,7 @@ const makeVDataTableHeadersProps = propsFactory({
   headerProps: {
     type: Object
   },
+  ...makeDisplayProps(),
   ...makeLoaderProps()
 }, 'VDataTableHeaders');
 const VDataTableHeaders = genericComponent()({
@@ -19658,6 +19768,9 @@ const VDataTableHeaders = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const {
       toggleSort,
       sortBy,
@@ -19693,6 +19806,10 @@ const VDataTableHeaders = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props);
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
@@ -19704,6 +19821,9 @@ const VDataTableHeaders = genericComponent()({
       selectAll,
       getSortIcon
     }));
+    const headerCellClasses = computed(() => ['v-data-table__th', {
+      'v-data-table__th--sticky': props.sticky
+    }, displayClasses.value, loaderClasses.value]);
     const VDataTableHeaderCell = _ref2 => {
       let {
         column,
@@ -19715,12 +19835,11 @@ const VDataTableHeaders = genericComponent()({
       return createVNode(VDataTableColumn, mergeProps({
         "tag": "th",
         "align": column.align,
-        "class": ['v-data-table__th', {
+        "class": [{
           'v-data-table__th--sortable': column.sortable,
           'v-data-table__th--sorted': isSorted(column),
-          'v-data-table__th--fixed': column.fixed,
-          'v-data-table__th--sticky': props.sticky
-        }, loaderClasses.value],
+          'v-data-table__th--fixed': column.fixed
+        }, ...headerCellClasses.value],
         "style": {
           width: convertToUnit(column.width),
           minWidth: convertToUnit(column.minWidth),
@@ -19769,8 +19888,53 @@ const VDataTableHeaders = genericComponent()({
         }
       });
     };
+    const VDataTableMobileHeaderCell = () => {
+      const headerProps = mergeProps(props.headerProps ?? {} ?? {});
+      const displayItems = computed(() => {
+        return columns.value.filter(column => column?.sortable);
+      });
+      const appendIcon = computed(() => {
+        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff';
+      });
+      return createVNode(VDataTableColumn, mergeProps({
+        "tag": "th",
+        "class": [...headerCellClasses.value],
+        "colspan": headers.value.length + 1
+      }, headerProps), {
+        default: () => [createVNode("div", {
+          "class": "v-data-table-header__content"
+        }, [createVNode(VSelect, {
+          "chips": true,
+          "class": "v-data-table__td-sort-select",
+          "clearable": true,
+          "density": "default",
+          "items": displayItems.value,
+          "label": t('$vuetify.dataTable.sortBy'),
+          "multiple": props.multiSort,
+          "variant": "underlined",
+          "onClick:clear": () => sortBy.value = [],
+          "appendIcon": appendIcon.value,
+          "onClick:append": () => selectAll(!allSelected.value)
+        }, {
+          ...slots,
+          chip: props => createVNode(VChip, {
+            "onClick": props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined,
+            "onMousedown": e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }, {
+            default: () => [props.item.title, createVNode(VIcon, {
+              "class": ['v-data-table__td-sort-icon', isSorted(props.item.raw) && 'v-data-table__td-sort-icon-active'],
+              "icon": getSortIcon(props.item.raw),
+              "size": "small"
+            }, null)]
+          })
+        })])]
+      });
+    };
     useRender(() => {
-      return createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
+      return mobile.value ? createVNode("tr", null, [createVNode(VDataTableMobileHeaderCell, null, null)]) : createVNode(Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => createVNode("tr", null, [row.map((column, x) => createVNode(VDataTableHeaderCell, {
         "column": column,
         "x": x,
         "y": y
@@ -19878,7 +20042,8 @@ const makeVDataTableRowProps = propsFactory({
   cellProps: [Object, Function],
   onClick: EventProp(),
   onContextmenu: EventProp(),
-  onDblclick: EventProp()
+  onDblclick: EventProp(),
+  ...makeDisplayProps()
 }, 'VDataTableRow');
 const VDataTableRow = genericComponent()({
   name: 'VDataTableRow',
@@ -19887,27 +20052,40 @@ const VDataTableRow = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      displayClasses,
+      mobile
+    } = useDisplay(props, 'v-data-table__tr');
     const {
       isSelected,
-      toggleSelect
+      toggleSelect,
+      someSelected,
+      allSelected,
+      selectAll
     } = useSelection();
     const {
       isExpanded,
       toggleExpand
     } = useExpanded();
+    const {
+      toggleSort,
+      sortBy,
+      isSorted
+    } = useSort();
     const {
       columns
     } = useHeaders();
     useRender(() => createVNode("tr", {
       "class": ['v-data-table__tr', {
         'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
-      }],
+      }, displayClasses.value],
       "onClick": props.onClick,
       "onContextmenu": props.onContextmenu,
       "onDblclick": props.onDblclick
     }, [props.item && columns.value.map((column, i) => {
       const item = props.item;
       const slotName = `item.${column.key}`;
+      const headerSlotName = `header.${column.key}`;
       const slotProps = {
         index: props.index,
         item: item.raw,
@@ -19919,6 +20097,16 @@ const VDataTableRow = genericComponent()({
         isExpanded,
         toggleExpand
       };
+      const columnSlotProps = {
+        column,
+        selectAll,
+        isSorted,
+        toggleSort,
+        sortBy: sortBy.value,
+        someSelected: someSelected.value,
+        allSelected: allSelected.value,
+        getSortIcon: () => ''
+      };
       const cellProps = typeof props.cellProps === 'function' ? props.cellProps({
         index: slotProps.index,
         item: slotProps.item,
@@ -19934,16 +20122,20 @@ const VDataTableRow = genericComponent()({
       }) : column.cellProps;
       return createVNode(VDataTableColumn, mergeProps({
         "align": column.align,
+        "class": {
+          'v-data-table__td--expanded-row': column.key === 'data-table-expand',
+          'v-data-table__td--select-row': column.key === 'data-table-select'
+        },
         "fixed": column.fixed,
         "fixedOffset": column.fixedOffset,
         "lastFixed": column.lastFixed,
+        "maxWidth": !mobile.value ? column.maxWidth : undefined,
         "noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
-        "width": column.width,
-        "maxWidth": column.maxWidth,
-        "nowrap": column.nowrap
+        "nowrap": column.nowrap,
+        "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
         default: () => {
-          if (slots[slotName]) return slots[slotName](slotProps);
+          if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
           if (column.key === 'data-table-select') {
             return slots['item.data-table-select']?.(slotProps) ?? createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
@@ -19959,7 +20151,12 @@ const VDataTableRow = genericComponent()({
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
-          return toDisplayString(slotProps.value);
+          const displayValue = toDisplayString(slotProps.value);
+          return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
+            "class": "v-data-table__td-title"
+          }, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), createVNode("div", {
+            "class": "v-data-table__td-value"
+          }, [slots[slotName]?.(slotProps) ?? displayValue])]);
         }
       });
     })]));
@@ -19984,7 +20181,8 @@ const makeVDataTableRowsProps = propsFactory({
     default: '$vuetify.noDataText'
   },
   rowProps: [Object, Function],
-  cellProps: [Object, Function]
+  cellProps: [Object, Function],
+  ...makeDisplayProps()
 }, 'VDataTableRows');
 const VDataTableRows = genericComponent()({
   name: 'VDataTableRows',
@@ -20014,6 +20212,9 @@ const VDataTableRows = genericComponent()({
     const {
       t
     } = useLocale();
+    const {
+      mobile
+    } = useDisplay(props);
     useRender(() => {
       if (props.loading && (!props.items.length || slots.loading)) {
         return createVNode("tr", {
@@ -20068,7 +20269,8 @@ const VDataTableRows = genericComponent()({
             } : undefined,
             index,
             item,
-            cellProps: props.cellProps
+            cellProps: props.cellProps,
+            mobile: mobile.value
           }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
             item: slotProps.item,
             index: slotProps.index,
@@ -21895,8 +22097,18 @@ const VDatePicker = genericComponent()({
       emit('update:year', value);
     }
     watch(model, (val, oldVal) => {
-      const before = adapter.date(wrapInArray(val)[0]);
-      const after = adapter.date(wrapInArray(oldVal)[0]);
+      const before = adapter.date(wrapInArray(oldVal)[oldVal.length - 1]);
+      const after = adapter.date(wrapInArray(val)[val.length - 1]);
+      const newMonth = adapter.getMonth(after);
+      const newYear = adapter.getYear(after);
+      if (newMonth !== month.value) {
+        month.value = newMonth;
+        onUpdateMonth(month.value);
+      }
+      if (newYear !== year.value) {
+        year.value = newYear;
+        onUpdateYear(year.value);
+      }
       isReversing.value = adapter.isBefore(before, after);
     });
     useRender(() => {
@@ -22239,7 +22451,7 @@ const makeVFileInputProps = propsFactory({
   }),
   modelValue: {
     type: [Array, Object],
-    default: () => [],
+    default: props => props.multiple ? [] : null,
     validator: val => {
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
@@ -22898,6 +23110,7 @@ const VKbd = createSimpleFunctional('v-kbd');
 
 const makeVLayoutProps = propsFactory({
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeLayoutProps()
 }, 'VLayout');
 const VLayout = genericComponent()({
@@ -22914,10 +23127,13 @@ const VLayout = genericComponent()({
       items,
       layoutRef
     } = createLayout(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => createVNode("div", {
       "ref": layoutRef,
       "class": [layoutClasses.value, props.class],
-      "style": [layoutStyles.value, props.style]
+      "style": [dimensionStyles.value, layoutStyles.value, props.style]
     }, [createVNode(Suspense, null, {
       default: () => [createVNode(Fragment, null, [slots.default?.()])]
     })]));
@@ -23280,6 +23496,7 @@ function oops$1() {
 
 function useTouch(_ref) {
   let {
+    el,
     isActive,
     isTemporary,
     width,
@@ -23329,10 +23546,10 @@ function useTouch(_ref) {
     const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
     const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
-      maybeDragging = true;
       start = [touchX, touchY];
       offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
       dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      maybeDragging = offset.value > -20 && offset.value < 80;
       endTouch(e);
       addMovement(e);
     }
@@ -23392,6 +23609,18 @@ function useTouch(_ref) {
       transition: 'none'
     } : undefined;
   });
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null;
+    const transition = el.value?.style.transition ?? null;
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none');
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null);
+    });
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform);
+      el.value?.style.setProperty('transition', transition);
+    });
+  });
   return {
     isDragging,
     dragProgress,
@@ -23430,6 +23659,7 @@ const makeVNavigationDrawerProps = propsFactory({
   },
   image: String,
   temporary: Boolean,
+  persistent: Boolean,
   touchless: Boolean,
   width: {
     type: [Number, String],
@@ -23511,6 +23741,7 @@ const VNavigationDrawer = genericComponent()({
     const location = computed(() => {
       return toPhysical(props.location, isRtl.value);
     });
+    const isPersistent = computed(() => props.persistent);
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
     const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
     useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -23530,9 +23761,9 @@ const VNavigationDrawer = genericComponent()({
     }
     const {
       isDragging,
-      dragProgress,
-      dragStyles
+      dragProgress
     } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -23543,6 +23774,7 @@ const VNavigationDrawer = genericComponent()({
       const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
       return isDragging.value ? size * dragProgress.value : size;
     });
+    const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value);
     const {
       layoutItemStyles,
       layoutItemScrimStyles,
@@ -23552,7 +23784,7 @@ const VNavigationDrawer = genericComponent()({
       order: computed(() => parseInt(props.order, 10)),
       position: location,
       layoutSize,
-      elementSize: width,
+      elementSize,
       active: computed(() => isActive.value || isDragging.value),
       disableTransitions: computed(() => isDragging.value),
       absolute: computed(() =>
@@ -23594,10 +23826,13 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--is-hovering': isHovering.value,
           'v-navigation-drawer--rail': props.rail,
           'v-navigation-drawer--temporary': isTemporary.value,
+          'v-navigation-drawer--persistent': isPersistent.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, displayClasses.value, elevationClasses.value, roundedClasses.value, props.class],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, stickyStyles.value, props.style, ['top', 'bottom'].includes(location.value) ? {
+          height: 'auto'
+        } : {}]
       }, scopeId, attrs), {
         default: () => [hasImage && createVNode("div", {
           "key": "image",
@@ -23632,7 +23867,10 @@ const VNavigationDrawer = genericComponent()({
         default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createVNode("div", mergeProps({
           "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
           "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
-          "onClick": () => isActive.value = false
+          "onClick": () => {
+            if (isPersistent.value) return;
+            isActive.value = false;
+          }
         }, scopeId), null)]
       })]);
     });
@@ -24113,8 +24351,8 @@ const VRangeSlider = genericComponent()({
     } = useRtl();
     function getActiveThumb(e) {
       if (!startThumbRef.value || !stopThumbRef.value) return;
-      const startOffset = getOffset$1(e, startThumbRef.value.$el, props.direction);
-      const stopOffset = getOffset$1(e, stopThumbRef.value.$el, props.direction);
+      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
+      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction);
       const a = Math.abs(startOffset);
       const b = Math.abs(stopOffset);
       return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
@@ -24709,9 +24947,6 @@ const VSnackbar = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      locationStyles
-    } = useLocation(props);
     const {
       positionClasses
     } = usePosition(props);
@@ -24733,6 +24968,15 @@ const VSnackbar = genericComponent()({
     const overlay = ref();
     const timerRef = ref();
     const isHovering = shallowRef(false);
+    const startY = shallowRef(0);
+    const mainStyles = ref();
+    const hasLayout = inject$1(VuetifyLayoutKey, undefined);
+    useToggleScope(() => !!hasLayout, () => {
+      const layout = useLayout();
+      watchEffect(() => {
+        mainStyles.value = layout.mainStyles.value;
+      });
+    });
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -24762,6 +25006,20 @@ const VSnackbar = genericComponent()({
       isHovering.value = false;
       startTimeout();
     }
+    function onTouchstart(event) {
+      startY.value = event.touches[0].clientY;
+    }
+    function onTouchend(event) {
+      if (Math.abs(startY.value - event.changedTouches[0].clientY) > 50) {
+        isActive.value = false;
+      }
+    }
+    const locationClasses = computed(() => {
+      return props.location.split(' ').reduce((acc, loc) => {
+        acc[`v-snackbar--${loc}`] = true;
+        return acc;
+      }, {});
+    });
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props);
       const hasContent = !!(slots.default || slots.text || props.text);
@@ -24772,14 +25030,14 @@ const VSnackbar = genericComponent()({
           'v-snackbar--multi-line': props.multiLine && !props.vertical,
           'v-snackbar--timer': !!props.timer,
           'v-snackbar--vertical': props.vertical
-        }, positionClasses.value, props.class],
-        "style": props.style
+        }, locationClasses.value, positionClasses.value, props.class],
+        "style": [mainStyles.value, props.style]
       }, overlayProps, {
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "contentProps": mergeProps({
           class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-          style: [locationStyles.value, colorStyles.value],
+          style: [colorStyles.value],
           onPointerenter,
           onPointerleave
         }, overlayProps.contentProps),
@@ -24787,7 +25045,9 @@ const VSnackbar = genericComponent()({
         "noClickAnimation": true,
         "scrim": false,
         "scrollStrategy": "none",
-        "_disableGlobalStack": true
+        "_disableGlobalStack": true,
+        "onTouchstartPassive": onTouchstart,
+        "onTouchend": onTouchend
       }, scopeId), {
         default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
           "key": "timer",
@@ -26663,7 +26923,7 @@ function useDirectiveComponent(component, props) {
 function mountComponent(component, props) {
   return function (el, binding, vnode) {
     const _props = typeof props === 'function' ? props(binding) : props;
-    const text = binding.value?.text ?? binding.value;
+    const text = binding.value?.text ?? binding.value ?? _props?.text;
     const value = isObject(binding.value) ? binding.value : {};
 
     // Get the children from the props or directive value, or the element's children
@@ -26672,7 +26932,9 @@ function mountComponent(component, props) {
     // If vnode.ctx is the same as the instance, then we're bound to a plain element
     // and need to find the nearest parent component instance to inherit provides from
     const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
-    const node = h(component, mergeProps(_props, value), children);
+    const node = h(component, mergeProps(_props, value), {
+      default: () => children
+    });
     node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
       provides
     });
@@ -26831,7 +27093,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.0-alpha.2";
+const version$1 = "3.6.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26856,7 +27118,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.0-alpha.2";
+const version = "3.6.0";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };