vuetify 3.3.15 → 3.4.0-alpha.1

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.3.15
+* Vuetify v3.4.0-alpha.1
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, vModelText } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -74,6 +74,7 @@ const makeComponentProps = propsFactory({
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
 const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
+const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -157,7 +158,15 @@ function isObject(obj) {
   return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
 }
 function refElement(obj) {
-  return obj && '$el' in obj ? obj.$el : obj;
+  if (obj && '$el' in obj) {
+    const el = obj.$el;
+    if (el?.nodeType === Node.TEXT_NODE) {
+      // Multi-root component, use the first element
+      return el.nextElementSibling;
+    }
+    return el;
+  }
+  return obj;
 }
 
 // KeyboardEvent.keyCode aliases
@@ -548,6 +557,18 @@ function getOverflow(a, b) {
     }
   };
 }
+function getTargetBox(target) {
+  if (Array.isArray(target)) {
+    return new Box({
+      x: target[0],
+      y: target[1],
+      width: 0,
+      height: 0
+    });
+  } else {
+    return target.getBoundingClientRect();
+  }
+}
 
 // Utilities
 
@@ -2106,9 +2127,9 @@ const defaultThemeOptions = {
         'surface-bright': '#FFFFFF',
         'surface-variant': '#424242',
         'on-surface-variant': '#EEEEEE',
-        primary: '#6200EE',
-        'primary-darken-1': '#3700B3',
-        secondary: '#03DAC6',
+        primary: '#1867C0',
+        'primary-darken-1': '#1F5592',
+        secondary: '#48A9A6',
         'secondary-darken-1': '#018786',
         error: '#B00020',
         info: '#2196F3',
@@ -2142,10 +2163,10 @@ const defaultThemeOptions = {
         'surface-bright': '#ccbfd6',
         'surface-variant': '#a3a3a3',
         'on-surface-variant': '#424242',
-        primary: '#BB86FC',
-        'primary-darken-1': '#3700B3',
-        secondary: '#03DAC5',
-        'secondary-darken-1': '#03DAC5',
+        primary: '#2196F3',
+        'primary-darken-1': '#277CC1',
+        secondary: '#54B6B2',
+        'secondary-darken-1': '#48A9A6',
         error: '#CF6679',
         info: '#2196F3',
         success: '#4CAF50',
@@ -2630,7 +2651,7 @@ function ExpandTransitionGenerator () {
 // Types
 
 const makeVDialogTransitionProps = propsFactory({
-  target: Object
+  target: [Object, Array]
 }, 'v-dialog-transition');
 const VDialogTransition = genericComponent()({
   name: 'VDialogTransition',
@@ -2732,7 +2753,7 @@ function getChildren(el) {
   return els && [...els];
 }
 function getDimensions(target, el) {
-  const targetBox = target.getBoundingClientRect();
+  const targetBox = getTargetBox(target);
   const elBox = nullifyTransforms(el);
   const [originX, originY] = getComputedStyle(el).transformOrigin.split(' ').map(v => parseFloat(v));
   const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue('--v-overlay-anchor-origin').split(' ');
@@ -2978,6 +2999,10 @@ const Intersect = {
 const makeVImgProps = propsFactory({
   alt: String,
   cover: Boolean,
+  draggable: {
+    type: [Boolean, String],
+    default: undefined
+  },
   eager: Boolean,
   gradient: String,
   lazySrc: String,
@@ -2996,6 +3021,8 @@ const makeVImgProps = propsFactory({
     type: [String, Object],
     default: ''
   },
+  crossorigin: String,
+  referrerpolicy: String,
   srcset: String,
   ...makeVResponsiveProps(),
   ...makeComponentProps(),
@@ -3120,6 +3147,9 @@ const VImg = genericComponent()({
         "src": normalisedSrc.value.src,
         "srcset": normalisedSrc.value.srcset,
         "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy,
+        "draggable": props.draggable,
         "sizes": props.sizes,
         "ref": image,
         "onLoad": onLoad,
@@ -3141,7 +3171,10 @@ const VImg = genericComponent()({
       default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && createVNode("img", {
         "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
         "src": normalisedSrc.value.lazySrc,
-        "alt": props.alt
+        "alt": props.alt,
+        "crossorigin": props.crossorigin,
+        "referrerpolicy": props.referrerpolicy,
+        "draggable": props.draggable
       }, null)]
     });
     const __placeholder = () => {
@@ -4165,7 +4198,8 @@ const aliases = {
   file: 'mdi-paperclip',
   plus: 'mdi-plus',
   minus: 'mdi-minus',
-  calendar: 'mdi-calendar'
+  calendar: 'mdi-calendar',
+  eyeDropper: 'mdi-eyedropper'
 };
 const mdi = {
   // Not using mergeProps here, functional components merge props by default (?)
@@ -5755,6 +5789,7 @@ const VSelectionControlGroup = genericComponent()({
 
 const makeVSelectionControlProps = propsFactory({
   label: String,
+  baseColor: String,
   trueValue: null,
   falseValue: null,
   value: null,
@@ -5793,7 +5828,8 @@ function useSelectionControl(props) {
     textColorClasses,
     textColorStyles
   } = useTextColor(computed(() => {
-    return model.value && !props.error && !props.disabled ? props.color : undefined;
+    if (props.error || props.disabled) return undefined;
+    return model.value ? props.color : props.baseColor;
   }));
   const {
     backgroundColorClasses,
@@ -6595,6 +6631,7 @@ const makeVAvatarProps = propsFactory({
   end: Boolean,
   icon: IconValue,
   image: String,
+  text: String,
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeRoundedProps(),
@@ -6645,7 +6682,7 @@ const VAvatar = genericComponent()({
       }, null) : props.icon ? createVNode(VIcon, {
         "key": "icon",
         "icon": props.icon
-      }, null) : slots.default?.(), genOverlays(false, 'v-avatar')]
+      }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
     }));
     return {};
   }
@@ -8426,7 +8463,7 @@ function getIntrinsicSize(el, isRtl) {
   return contentBox;
 }
 function connectedLocationStrategy(data, props, contentStyles) {
-  const activatorFixed = isFixedPosition(data.activatorEl.value);
+  const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);
   if (activatorFixed) {
     Object.assign(contentStyles.value, {
       position: 'fixed',
@@ -8475,11 +8512,11 @@ function connectedLocationStrategy(data, props, contentStyles) {
   const observer = new ResizeObserver(() => {
     if (observe) updateLocation();
   });
-  watch([data.activatorEl, data.contentEl], (_ref, _ref2) => {
-    let [newActivatorEl, newContentEl] = _ref;
-    let [oldActivatorEl, oldContentEl] = _ref2;
-    if (oldActivatorEl) observer.unobserve(oldActivatorEl);
-    if (newActivatorEl) observer.observe(newActivatorEl);
+  watch([data.target, data.contentEl], (_ref, _ref2) => {
+    let [newTarget, newContentEl] = _ref;
+    let [oldTarget, oldContentEl] = _ref2;
+    if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);
+    if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget);
     if (oldContentEl) observer.unobserve(oldContentEl);
     if (newContentEl) observer.observe(newContentEl);
   }, {
@@ -8495,8 +8532,8 @@ function connectedLocationStrategy(data, props, contentStyles) {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => observe = true);
     });
-    if (!data.activatorEl.value || !data.contentEl.value) return;
-    const targetBox = data.activatorEl.value.getBoundingClientRect();
+    if (!data.target.value || !data.contentEl.value) return;
+    const targetBox = getTargetBox(data.target.value);
     const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
     const scrollParents = getScrollParents(data.contentEl.value);
     const viewportMargin = 12;
@@ -8783,11 +8820,11 @@ function closeScrollStrategy(data) {
   function onScroll(e) {
     data.isActive.value = false;
   }
-  bindScroll(data.activatorEl.value ?? data.contentEl.value, onScroll);
+  bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
 }
 function blockScrollStrategy(data, props) {
   const offsetParent = data.root.value?.offsetParent;
-  const scrollElements = [...new Set([...getScrollParents(data.activatorEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+  const scrollElements = [...new Set([...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
   const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
   const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
   if (scrollableParent) {
@@ -8831,7 +8868,7 @@ function repositionScrollStrategy(data, props, scope) {
   }
   ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
     scope.run(() => {
-      bindScroll(data.activatorEl.value ?? data.contentEl.value, e => {
+      bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
         if (slow) {
           // If the position calculation is slow,
           // defer updates until scrolling is finished.
@@ -8912,6 +8949,7 @@ function useDelay(props, cb) {
 // Types
 
 const makeActivatorProps = propsFactory({
+  target: [String, Object],
   activator: [String, Object],
   activatorProps: {
     type: Object,
@@ -8934,6 +8972,7 @@ function useActivator(props, _ref) {
     isActive,
     isTop
   } = _ref;
+  const vm = getCurrentInstance('useActivator');
   const activatorEl = ref();
   let isHovered = false;
   let isFocused = false;
@@ -8951,10 +8990,14 @@ function useActivator(props, _ref) {
       isActive.value = value;
     }
   });
+  const cursorTarget = ref();
   const availableEvents = {
     onClick: e => {
       e.stopPropagation();
       activatorEl.value = e.currentTarget || e.target;
+      if (!isActive.value) {
+        cursorTarget.value = [e.clientX, e.clientY];
+      }
       isActive.value = !isActive.value;
     },
     onMouseenter: e => {
@@ -9048,6 +9091,15 @@ function useActivator(props, _ref) {
       isActive.value = false;
     }
   });
+  watch(isActive, val => {
+    if (!val) {
+      setTimeout(() => {
+        cursorTarget.value = undefined;
+      });
+    }
+  }, {
+    flush: 'post'
+  });
   const activatorRef = ref();
   watchEffect(() => {
     if (!activatorRef.value) return;
@@ -9055,7 +9107,15 @@ function useActivator(props, _ref) {
       activatorEl.value = refElement(activatorRef.value);
     });
   });
-  const vm = getCurrentInstance('useActivator');
+  const targetRef = ref();
+  const target = computed(() => {
+    if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
+    if (targetRef.value) return refElement(targetRef.value);
+    return getTarget(props.target, vm) || activatorEl.value;
+  });
+  const targetEl = computed(() => {
+    return Array.isArray(target.value) ? undefined : target.value;
+  });
   let scope;
   watch(() => !!props.activator, val => {
     if (val && IN_BROWSER) {
@@ -9079,6 +9139,9 @@ function useActivator(props, _ref) {
   return {
     activatorEl,
     activatorRef,
+    target,
+    targetEl,
+    targetRef,
     activatorEvents,
     contentEvents,
     scrimEvents
@@ -9120,31 +9183,34 @@ function _useActivator(props, vm, _ref2) {
   }
   function getActivator() {
     let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-    let activator;
-    if (selector) {
-      if (selector === 'parent') {
-        let el = vm?.proxy?.$el?.parentNode;
-        while (el?.hasAttribute('data-no-activator')) {
-          el = el.parentNode;
-        }
-        activator = el;
-      } else if (typeof selector === 'string') {
-        // Selector
-        activator = document.querySelector(selector);
-      } else if ('$el' in selector) {
-        // Component (ref)
-        activator = selector.$el;
-      } else {
-        // HTMLElement | Element
-        activator = selector;
-      }
-    }
+    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 : null;
+    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
     return activatorEl.value;
   }
 }
+function getTarget(selector, vm) {
+  if (!selector) return;
+  let target;
+  if (selector === 'parent') {
+    let el = vm?.proxy?.$el?.parentNode;
+    while (el?.hasAttribute('data-no-activator')) {
+      el = el.parentNode;
+    }
+    target = el;
+  } else if (typeof selector === 'string') {
+    // Selector
+    target = document.querySelector(selector);
+  } else if ('$el' in selector) {
+    // Component (ref)
+    target = selector.$el;
+  } else {
+    // HTMLElement | Element | [x, y]
+    target = selector;
+  }
+  return target;
+}
 
 // Utilities
 
@@ -9268,10 +9334,30 @@ function createDisplay(options, ssr) {
     ssr: !!ssr
   };
 }
+const makeDisplayProps = propsFactory({
+  mobileBreakpoint: [Number, String]
+}, 'display');
 function useDisplay() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
   const display = inject$1(DisplaySymbol);
   if (!display) throw new Error('Could not find Vuetify display injection');
-  return display;
+  const mobile = computed(() => {
+    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;
+  });
+  const displayClasses = computed(() => {
+    if (!name) return {};
+    return {
+      [`${name}--mobile`]: mobile.value
+    };
+  });
+  return {
+    ...display,
+    displayClasses,
+    mobile
+  };
 }
 
 // Composables
@@ -9588,6 +9674,9 @@ const VOverlay = genericComponent()({
     const {
       activatorEl,
       activatorRef,
+      target,
+      targetEl,
+      targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents
@@ -9613,13 +9702,13 @@ const VOverlay = genericComponent()({
     } = useLocationStrategies(props, {
       isRtl,
       contentEl,
-      activatorEl,
+      target,
       isActive
     });
     useScrollStrategies(props, {
       root,
       contentEl,
-      activatorEl,
+      targetEl,
       isActive,
       updateLocation
     });
@@ -9687,7 +9776,8 @@ const VOverlay = genericComponent()({
     useRender(() => createVNode(Fragment, null, [slots.activator?.({
       isActive: isActive.value,
       props: mergeProps({
-        ref: activatorRef
+        ref: activatorRef,
+        targetRef
       }, activatorEvents.value, props.activatorProps)
     }), isMounted.value && hasContent.value && createVNode(Teleport, {
       "disabled": !teleportTarget.value,
@@ -9710,7 +9800,7 @@ const VOverlay = genericComponent()({
         "appear": true,
         "persisted": true,
         "transition": props.transition,
-        "target": activatorEl.value,
+        "target": target.value,
         "onAfterLeave": () => {
           onAfterLeave();
           emit('afterLeave');
@@ -9731,6 +9821,7 @@ const VOverlay = genericComponent()({
     })]));
     return {
       activatorEl,
+      target,
       animateClick,
       contentEl,
       globalTop,
@@ -11870,6 +11961,7 @@ const makeVBannerProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
@@ -11891,8 +11983,9 @@ const VBanner = genericComponent()({
       densityClasses
     } = useDensity(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -11928,7 +12021,7 @@ const VBanner = genericComponent()({
           'v-banner--stacked': props.stacked || mobile.value,
           'v-banner--sticky': props.sticky,
           [`v-banner--${props.lines}-line`]: !!props.lines
-        }, borderClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        }, borderClasses.value, densityClasses.value, displayClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, themeClasses.value, props.class],
         "style": [dimensionStyles.value, locationStyles.value, props.style],
         "role": "banner"
       }, {
@@ -12235,12 +12328,17 @@ const VBreadcrumbs = genericComponent()({
             item,
             raw
           } = _ref2;
-          return createVNode(Fragment, null, [createVNode(VBreadcrumbsItem, mergeProps({
-            "key": item.title,
+          return createVNode(Fragment, null, [slots.item?.({
+            item,
+            index
+          }) ?? createVNode(VBreadcrumbsItem, mergeProps({
+            "key": index,
             "disabled": index >= array.length - 1
-          }, item), {
+          }, typeof item === 'string' ? {
+            title: item
+          } : item), {
             default: slots.title ? () => slots.title?.({
-              item: raw,
+              item,
               index
             }) : undefined
           }), index < array.length - 1 && createVNode(VBreadcrumbsDivider, null, {
@@ -13578,7 +13676,11 @@ const makeSliderProps = propsFactory({
   ...makeRoundedProps(),
   ...makeElevationProps({
     elevation: 2
-  })
+  }),
+  ripple: {
+    type: Boolean,
+    default: true
+  }
 }, 'Slider');
 const useSteps = props => {
   const min = computed(() => parseFloat(props.min));
@@ -14185,7 +14287,8 @@ const VSlider = genericComponent()({
             "position": trackStop.value,
             "elevation": props.elevation,
             "onFocus": focus,
-            "onBlur": blur
+            "onBlur": blur,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           })]);
@@ -14216,12 +14319,36 @@ const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
+    const abortController = new AbortController();
+    onUnmounted(() => abortController.abort());
+    async function openEyeDropper() {
+      if (!SUPPORTS_EYE_DROPPER) return;
+      const eyeDropper = new window.EyeDropper();
+      try {
+        const result = await eyeDropper.open({
+          signal: abortController.signal
+        });
+        const colorHexValue = HexToHSV(result.sRGBHex);
+        emit('update:color', {
+          ...(props.color ?? nullColor),
+          ...colorHexValue
+        });
+      } catch (e) {}
+    }
     useRender(() => createVNode("div", {
       "class": ['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
       }, props.class],
       "style": props.style
-    }, [createVNode("div", {
+    }, [SUPPORTS_EYE_DROPPER && createVNode("div", {
+      "class": "v-color-picker-preview__eye-dropper",
+      "key": "eyeDropper"
+    }, [createVNode(VBtn, {
+      "onClick": openEyeDropper,
+      "icon": "$eyeDropper",
+      "variant": "plain",
+      "density": "comfortable"
+    }, null)]), createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [createVNode("div", {
       "style": {
@@ -16902,6 +17029,7 @@ const makeVNavigationDrawerProps = propsFactory({
   sticky: Boolean,
   ...makeBorderProps(),
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
   ...makeRoundedProps(),
@@ -16940,8 +17068,9 @@ const VNavigationDrawer = genericComponent()({
       elevationClasses
     } = useElevation(props);
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const {
       roundedClasses
     } = useRounded(props);
@@ -17052,7 +17181,7 @@ const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--temporary': isTemporary.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        }, 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]
       }, scopeId, attrs), {
         default: () => [hasImage && createVNode("div", {
@@ -17800,7 +17929,8 @@ const VRangeSlider = genericComponent()({
             },
             "min": min.value,
             "max": model.value[1],
-            "position": trackStart.value
+            "position": trackStart.value,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           }), createVNode(VSliderThumb, {
@@ -17828,7 +17958,8 @@ const VRangeSlider = genericComponent()({
             },
             "min": model.value[0],
             "max": max.value,
-            "position": trackStop.value
+            "position": trackStop.value,
+            "ripple": props.ripple
           }, {
             'thumb-label': slots['thumb-label']
           })]);
@@ -18102,6 +18233,7 @@ const makeVSlideGroupProps = propsFactory({
     validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
   },
   ...makeComponentProps(),
+  ...makeDisplayProps(),
   ...makeTagProps(),
   ...makeGroupProps({
     selectedClass: 'v-slide-group-item--active'
@@ -18121,8 +18253,9 @@ const VSlideGroup = genericComponent()({
       isRtl
     } = useRtl();
     const {
+      displayClasses,
       mobile
-    } = useDisplay();
+    } = useDisplay(props);
     const group = useGroup(props, props.symbol);
     const isOverflowing = shallowRef(false);
     const scrollOffset = shallowRef(0);
@@ -18342,7 +18475,7 @@ const VSlideGroup = genericComponent()({
         'v-slide-group--vertical': !isHorizontal.value,
         'v-slide-group--has-affixes': hasAffixes.value,
         'v-slide-group--is-overflowing': isOverflowing.value
-      }, props.class],
+      }, displayClasses.value, props.class],
       "style": props.style,
       "tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
       "onFocus": onFocus
@@ -18417,8 +18550,41 @@ const VSlideGroupItem = genericComponent()({
   }
 });
 
+function useCountdown(milliseconds) {
+  const time = shallowRef(milliseconds);
+  let timer = -1;
+  function clear() {
+    clearInterval(timer);
+  }
+  function reset() {
+    clear();
+    nextTick(() => time.value = milliseconds);
+  }
+  function start(el) {
+    const style = el ? getComputedStyle(el) : {
+      transitionDuration: 0.2
+    };
+    const interval = parseFloat(style.transitionDuration) * 1000 || 200;
+    clear();
+    if (time.value <= 0) return;
+    const startTime = performance.now();
+    timer = window.setInterval(() => {
+      const elapsed = performance.now() - startTime + interval;
+      time.value = Math.max(milliseconds - elapsed, 0);
+      if (time.value <= 0) clear();
+    }, interval);
+  }
+  onScopeDispose(clear);
+  return {
+    clear,
+    time,
+    start,
+    reset
+  };
+}
 const makeVSnackbarProps = propsFactory({
   multiLine: Boolean,
+  timer: [Boolean, String],
   timeout: {
     type: [Number, String],
     default: 5000
@@ -18466,7 +18632,10 @@ const VSnackbar = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
+    const countdown = useCountdown(Number(props.timeout));
     const overlay = ref();
+    const timerRef = ref();
+    const isHovering = shallowRef(false);
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -18474,16 +18643,28 @@ const VSnackbar = genericComponent()({
     });
     let activeTimeout = -1;
     function startTimeout() {
+      countdown.reset();
       window.clearTimeout(activeTimeout);
       const timeout = Number(props.timeout);
       if (!isActive.value || timeout === -1) return;
+      const element = refElement(timerRef.value);
+      countdown.start(element);
       activeTimeout = window.setTimeout(() => {
         isActive.value = false;
       }, timeout);
     }
-    function onPointerenter() {
+    function clearTimeout() {
+      countdown.reset();
       window.clearTimeout(activeTimeout);
     }
+    function onPointerenter() {
+      isHovering.value = true;
+      clearTimeout();
+    }
+    function onPointerleave() {
+      isHovering.value = false;
+      startTimeout();
+    }
     useRender(() => {
       const [overlayProps] = VOverlay.filterProps(props);
       return createVNode(VOverlay, mergeProps({
@@ -18491,6 +18672,7 @@ const VSnackbar = genericComponent()({
         "class": ['v-snackbar', {
           'v-snackbar--active': isActive.value,
           '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
@@ -18501,7 +18683,7 @@ const VSnackbar = genericComponent()({
           class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
           style: [locationStyles.value, colorStyles.value],
           onPointerenter,
-          onPointerleave: startTimeout
+          onPointerleave
         }, overlayProps.contentProps),
         "persistent": true,
         "noClickAnimation": true,
@@ -18509,7 +18691,16 @@ const VSnackbar = genericComponent()({
         "scrollStrategy": "none",
         "_disableGlobalStack": true
       }, scopeId), {
-        default: () => [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), props.timer && createVNode("div", {
+          "key": "timer",
+          "class": "v-snackbar__timer"
+        }, [createVNode(VProgressLinear, {
+          "ref": timerRef,
+          "active": !isHovering.value,
+          "color": typeof props.timer === 'string' ? props.timer : 'info',
+          "max": props.timeout,
+          "model-value": countdown.time.value
+        }, null)]), slots.default && createVNode("div", {
           "class": "v-snackbar__content",
           "role": "status",
           "aria-live": "polite"
@@ -20408,7 +20599,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.15";
+const version$1 = "3.4.0-alpha.1";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20433,7 +20624,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.3.15";
+const version = "3.4.0-alpha.1";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };