vuetify 3.3.15 → 3.4.0-alpha.1

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.15
+* Vuetify v3.4.0-alpha.1
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -78,6 +78,7 @@
   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"); } }
@@ -161,7 +162,15 @@
     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
@@ -552,6 +561,18 @@
       }
     };
   }
+  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
 
@@ -2110,9 +2131,9 @@
           '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',
@@ -2146,10 +2167,10 @@
           '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',
@@ -2634,7 +2655,7 @@
   // Types
 
   const makeVDialogTransitionProps = propsFactory({
-    target: Object
+    target: [Object, Array]
   }, 'v-dialog-transition');
   const VDialogTransition = genericComponent()({
     name: 'VDialogTransition',
@@ -2736,7 +2757,7 @@
     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(' ');
@@ -2982,6 +3003,10 @@
   const makeVImgProps = propsFactory({
     alt: String,
     cover: Boolean,
+    draggable: {
+      type: [Boolean, String],
+      default: undefined
+    },
     eager: Boolean,
     gradient: String,
     lazySrc: String,
@@ -3000,6 +3025,8 @@
       type: [String, Object],
       default: ''
     },
+    crossorigin: String,
+    referrerpolicy: String,
     srcset: String,
     ...makeVResponsiveProps(),
     ...makeComponentProps(),
@@ -3124,6 +3151,9 @@
           "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,
@@ -3145,7 +3175,10 @@
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.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 = () => {
@@ -4169,7 +4202,8 @@
     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 (?)
@@ -5759,6 +5793,7 @@
 
   const makeVSelectionControlProps = propsFactory({
     label: String,
+    baseColor: String,
     trueValue: null,
     falseValue: null,
     value: null,
@@ -5797,7 +5832,8 @@
       textColorClasses,
       textColorStyles
     } = useTextColor(vue.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,
@@ -6599,6 +6635,7 @@
     end: Boolean,
     icon: IconValue,
     image: String,
+    text: String,
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeRoundedProps(),
@@ -6649,7 +6686,7 @@
         }, null) : props.icon ? vue.createVNode(VIcon, {
           "key": "icon",
           "icon": props.icon
-        }, null) : slots.default?.(), genOverlays(false, 'v-avatar')]
+        }, null) : slots.default?.() ?? props.text, genOverlays(false, 'v-avatar')]
       }));
       return {};
     }
@@ -8430,7 +8467,7 @@
     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',
@@ -8479,11 +8516,11 @@
     const observer = new ResizeObserver(() => {
       if (observe) updateLocation();
     });
-    vue.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);
+    vue.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);
     }, {
@@ -8499,8 +8536,8 @@
       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;
@@ -8787,11 +8824,11 @@
     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) {
@@ -8835,7 +8872,7 @@
     }
     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.
@@ -8916,6 +8953,7 @@
   // Types
 
   const makeActivatorProps = propsFactory({
+    target: [String, Object],
     activator: [String, Object],
     activatorProps: {
       type: Object,
@@ -8938,6 +8976,7 @@
       isActive,
       isTop
     } = _ref;
+    const vm = getCurrentInstance('useActivator');
     const activatorEl = vue.ref();
     let isHovered = false;
     let isFocused = false;
@@ -8955,10 +8994,14 @@
         isActive.value = value;
       }
     });
+    const cursorTarget = vue.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 => {
@@ -9052,6 +9095,15 @@
         isActive.value = false;
       }
     });
+    vue.watch(isActive, val => {
+      if (!val) {
+        setTimeout(() => {
+          cursorTarget.value = undefined;
+        });
+      }
+    }, {
+      flush: 'post'
+    });
     const activatorRef = vue.ref();
     vue.watchEffect(() => {
       if (!activatorRef.value) return;
@@ -9059,7 +9111,15 @@
         activatorEl.value = refElement(activatorRef.value);
       });
     });
-    const vm = getCurrentInstance('useActivator');
+    const targetRef = vue.ref();
+    const target = vue.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 = vue.computed(() => {
+      return Array.isArray(target.value) ? undefined : target.value;
+    });
     let scope;
     vue.watch(() => !!props.activator, val => {
       if (val && IN_BROWSER) {
@@ -9083,6 +9143,9 @@
     return {
       activatorEl,
       activatorRef,
+      target,
+      targetEl,
+      targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents
@@ -9124,31 +9187,34 @@
     }
     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
 
@@ -9272,10 +9338,30 @@
       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 = vue.inject(DisplaySymbol);
     if (!display) throw new Error('Could not find Vuetify display injection');
-    return display;
+    const mobile = vue.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 = vue.computed(() => {
+      if (!name) return {};
+      return {
+        [`${name}--mobile`]: mobile.value
+      };
+    });
+    return {
+      ...display,
+      displayClasses,
+      mobile
+    };
   }
 
   // Composables
@@ -9592,6 +9678,9 @@
       const {
         activatorEl,
         activatorRef,
+        target,
+        targetEl,
+        targetRef,
         activatorEvents,
         contentEvents,
         scrimEvents
@@ -9617,13 +9706,13 @@
       } = useLocationStrategies(props, {
         isRtl,
         contentEl,
-        activatorEl,
+        target,
         isActive
       });
       useScrollStrategies(props, {
         root,
         contentEl,
-        activatorEl,
+        targetEl,
         isActive,
         updateLocation
       });
@@ -9691,7 +9780,8 @@
       useRender(() => vue.createVNode(vue.Fragment, null, [slots.activator?.({
         isActive: isActive.value,
         props: vue.mergeProps({
-          ref: activatorRef
+          ref: activatorRef,
+          targetRef
         }, activatorEvents.value, props.activatorProps)
       }), isMounted.value && hasContent.value && vue.createVNode(vue.Teleport, {
         "disabled": !teleportTarget.value,
@@ -9714,7 +9804,7 @@
           "appear": true,
           "persisted": true,
           "transition": props.transition,
-          "target": activatorEl.value,
+          "target": target.value,
           "onAfterLeave": () => {
             onAfterLeave();
             emit('afterLeave');
@@ -9735,6 +9825,7 @@
       })]));
       return {
         activatorEl,
+        target,
         animateClick,
         contentEl,
         globalTop,
@@ -11874,6 +11965,7 @@
     ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
@@ -11895,8 +11987,9 @@
         densityClasses
       } = useDensity(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         dimensionStyles
       } = useDimension(props);
@@ -11932,7 +12025,7 @@
             '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"
         }, {
@@ -12239,12 +12332,17 @@
               item,
               raw
             } = _ref2;
-            return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBreadcrumbsItem, vue.mergeProps({
-              "key": item.title,
+            return vue.createVNode(vue.Fragment, null, [slots.item?.({
+              item,
+              index
+            }) ?? vue.createVNode(VBreadcrumbsItem, vue.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 && vue.createVNode(VBreadcrumbsDivider, null, {
@@ -13582,7 +13680,11 @@
     ...makeRoundedProps(),
     ...makeElevationProps({
       elevation: 2
-    })
+    }),
+    ripple: {
+      type: Boolean,
+      default: true
+    }
   }, 'Slider');
   const useSteps = props => {
     const min = vue.computed(() => parseFloat(props.min));
@@ -14189,7 +14291,8 @@
               "position": trackStop.value,
               "elevation": props.elevation,
               "onFocus": focus,
-              "onBlur": blur
+              "onBlur": blur,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -14220,12 +14323,36 @@
       let {
         emit
       } = _ref;
+      const abortController = new AbortController();
+      vue.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(() => vue.createVNode("div", {
         "class": ['v-color-picker-preview', {
           'v-color-picker-preview--hide-alpha': props.hideAlpha
         }, props.class],
         "style": props.style
-      }, [vue.createVNode("div", {
+      }, [SUPPORTS_EYE_DROPPER && vue.createVNode("div", {
+        "class": "v-color-picker-preview__eye-dropper",
+        "key": "eyeDropper"
+      }, [vue.createVNode(VBtn, {
+        "onClick": openEyeDropper,
+        "icon": "$eyeDropper",
+        "variant": "plain",
+        "density": "comfortable"
+      }, null)]), vue.createVNode("div", {
         "class": "v-color-picker-preview__dot"
       }, [vue.createVNode("div", {
         "style": {
@@ -16906,6 +17033,7 @@
     sticky: Boolean,
     ...makeBorderProps(),
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -16944,8 +17072,9 @@
         elevationClasses
       } = useElevation(props);
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const {
         roundedClasses
       } = useRounded(props);
@@ -17056,7 +17185,7 @@
             '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 && vue.createVNode("div", {
@@ -17804,7 +17933,8 @@
               },
               "min": min.value,
               "max": model.value[1],
-              "position": trackStart.value
+              "position": trackStart.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             }), vue.createVNode(VSliderThumb, {
@@ -17832,7 +17962,8 @@
               },
               "min": model.value[0],
               "max": max.value,
-              "position": trackStop.value
+              "position": trackStop.value,
+              "ripple": props.ripple
             }, {
               'thumb-label': slots['thumb-label']
             })]);
@@ -18106,6 +18237,7 @@
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
     ...makeComponentProps(),
+    ...makeDisplayProps(),
     ...makeTagProps(),
     ...makeGroupProps({
       selectedClass: 'v-slide-group-item--active'
@@ -18125,8 +18257,9 @@
         isRtl
       } = useRtl();
       const {
+        displayClasses,
         mobile
-      } = useDisplay();
+      } = useDisplay(props);
       const group = useGroup(props, props.symbol);
       const isOverflowing = vue.shallowRef(false);
       const scrollOffset = vue.shallowRef(0);
@@ -18346,7 +18479,7 @@
           '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
@@ -18421,8 +18554,41 @@
     }
   });
 
+  function useCountdown(milliseconds) {
+    const time = vue.shallowRef(milliseconds);
+    let timer = -1;
+    function clear() {
+      clearInterval(timer);
+    }
+    function reset() {
+      clear();
+      vue.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);
+    }
+    vue.onScopeDispose(clear);
+    return {
+      clear,
+      time,
+      start,
+      reset
+    };
+  }
   const makeVSnackbarProps = propsFactory({
     multiLine: Boolean,
+    timer: [Boolean, String],
     timeout: {
       type: [Number, String],
       default: 5000
@@ -18470,7 +18636,10 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const countdown = useCountdown(Number(props.timeout));
       const overlay = vue.ref();
+      const timerRef = vue.ref();
+      const isHovering = vue.shallowRef(false);
       vue.watch(isActive, startTimeout);
       vue.watch(() => props.timeout, startTimeout);
       vue.onMounted(() => {
@@ -18478,16 +18647,28 @@
       });
       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 vue.createVNode(VOverlay, vue.mergeProps({
@@ -18495,6 +18676,7 @@
           "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
@@ -18505,7 +18687,7 @@
             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,
@@ -18513,7 +18695,16 @@
           "scrollStrategy": "none",
           "_disableGlobalStack": true
         }, scopeId), {
-          default: () => [genOverlays(false, 'v-snackbar'), slots.default && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), props.timer && vue.createVNode("div", {
+            "key": "timer",
+            "class": "v-snackbar__timer"
+          }, [vue.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 && vue.createVNode("div", {
             "class": "v-snackbar__content",
             "role": "status",
             "aria-live": "polite"
@@ -20412,7 +20603,7 @@
       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
@@ -20437,7 +20628,7 @@
       ...options
     });
   };
-  const version = "3.3.15";
+  const version = "3.4.0-alpha.1";
   createVuetify.version = version;
 
   exports.components = components;