@vuetify/nightly 3.9.2-master.2025-07-23 → 3.9.2-master.2025-07-25

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-23
+* Vuetify v3.9.2-master.2025-07-25
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1566,10 +1566,64 @@
     return root;
   }
 
+  // Utilities
+
+  // Types
+
   const standardEasing = 'cubic-bezier(0.4, 0, 0.2, 1)';
   const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering
   const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
+  const easingPatterns = {
+    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 useTransition(source, options) {
+    const defaultTransition = {
+      duration: 300,
+      transition: easingPatterns.easeInOutCubic
+    };
+    let raf = -1;
+    const outputRef = vue.shallowRef(vue.toValue(source));
+    vue.watch(() => vue.toValue(source), async to => {
+      cancelAnimationFrame(raf);
+      const easing = {
+        ...defaultTransition,
+        ...vue.toValue(options)
+      };
+      await executeTransition(outputRef, outputRef.value, to, easing);
+    });
+    function executeTransition(out, from, to, options) {
+      const startTime = performance.now();
+      const ease = options.transition ?? easingPatterns.easeInOutCubic;
+      return new Promise(resolve => {
+        raf = requestAnimationFrame(function step(currentTime) {
+          const timeElapsed = currentTime - startTime;
+          const progress = timeElapsed / options.duration;
+          out.value = from + (to - from) * ease(clamp(progress, 0, 1));
+          if (progress < 1) {
+            raf = requestAnimationFrame(step);
+          } else {
+            out.value = to;
+            resolve();
+          }
+        });
+      });
+    }
+    return vue.computed(() => outputRef.value);
+  }
+
   // Utilities
   function getPrefixedEventHandlers(attrs, suffix, getData) {
     return Object.keys(attrs).filter(key => isOn(key) && key.endsWith(suffix)).reduce((acc, key) => {
@@ -1660,6 +1714,10 @@
     vm.render = render;
   }
 
+  function formatTime(seconds) {
+    return [Math.floor(seconds % 60), Math.floor(seconds / 60 % 60), Math.floor(seconds / 60 / 60 % 60)].filter((x, i) => i < 2 || x > 0).reverse().map(String).map((x, i) => i > 0 ? x.padStart(2, '0') : x).join(':');
+  }
+
   // Utilities
 
   // Types
@@ -2180,6 +2238,17 @@
       option: 'Option',
       plus: 'plus',
       shortcut: 'Keyboard shortcut: {0}'
+    },
+    video: {
+      play: 'Play',
+      pause: 'Pause',
+      seek: 'Seek',
+      volume: 'Volume',
+      showVolume: 'Show volume control',
+      mute: 'Mute',
+      unmute: 'Unmute',
+      enterFullscreen: 'Full screen',
+      exitFullscreen: 'Exit full screen'
     }
   };
 
@@ -4262,7 +4331,7 @@
 
   // Types
 
-  const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
+  const allowedVariants$4 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
   function genOverlays(isClickable, name) {
     return vue.createElementVNode(vue.Fragment, null, [isClickable && vue.createElementVNode("span", {
       "key": "overlay",
@@ -4277,7 +4346,7 @@
     variant: {
       type: String,
       default: 'elevated',
-      validator: v => allowedVariants$2.includes(v)
+      validator: v => allowedVariants$4.includes(v)
     }
   }, 'variant');
   function useVariant(props) {
@@ -4701,7 +4770,15 @@
     arrowdown: 'mdi-arrow-down',
     arrowleft: 'mdi-arrow-left',
     arrowright: 'mdi-arrow-right',
-    backspace: 'mdi-backspace'
+    backspace: 'mdi-backspace',
+    play: 'mdi-play',
+    pause: 'mdi-pause',
+    fullscreen: 'mdi-fullscreen',
+    fullscreenExit: 'mdi-fullscreen-exit',
+    volumeHigh: 'mdi-volume-high',
+    volumeMedium: 'mdi-volume-medium',
+    volumeLow: 'mdi-volume-low',
+    volumeOff: 'mdi-volume-variant-off'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -7670,21 +7747,7 @@
       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
-      }
+      patterns: easingPatterns
     };
   }
   function getContainer(el) {
@@ -10521,11 +10584,23 @@
       const result = updateLocation();
       if (result) flipped.push(result.flipped);
     });
-    vue.watch([data.target, data.contentEl], (_ref, _ref2) => {
-      let [newTarget, newContentEl] = _ref;
-      let [oldTarget, oldContentEl] = _ref2;
+    let targetBox = new Box({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    vue.watch(data.target, (newTarget, oldTarget) => {
       if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);
-      if (newTarget && !Array.isArray(newTarget)) observer.observe(newTarget);
+      if (!Array.isArray(newTarget)) {
+        if (newTarget) observer.observe(newTarget);
+      } else if (!deepEqual(newTarget, oldTarget)) {
+        updateLocation();
+      }
+    }, {
+      immediate: true
+    });
+    vue.watch(data.contentEl, (newContentEl, oldContentEl) => {
       if (oldContentEl) observer.unobserve(oldContentEl);
       if (newContentEl) observer.observe(newContentEl);
     }, {
@@ -10534,12 +10609,6 @@
     vue.onScopeDispose(() => {
       observer.disconnect();
     });
-    let targetBox = new Box({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
 
     // eslint-disable-next-line max-statements
     function updateLocation() {
@@ -10831,11 +10900,12 @@
     function onScroll(e) {
       data.isActive.value = false;
     }
-    bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
+    bindScroll(data.target.value ?? data.contentEl.value, onScroll);
   }
   function blockScrollStrategy(data, props) {
     const offsetParent = data.root.value?.offsetParent;
-    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 target = Array.isArray(data.target.value) ? document.elementFromPoint(...data.target.value) : data.target.value;
+    const scrollElements = [...new Set([...getScrollParents(target, 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) {
@@ -10882,7 +10952,7 @@
     }
     ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
       scope.run(() => {
-        bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
+        bindScroll(data.target.value ?? data.contentEl.value, e => {
           if (slow) {
             // If the position calculation is slow,
             // defer updates until scrolling is finished.
@@ -10907,7 +10977,8 @@
   }
 
   /** @private */
-  function bindScroll(el, onScroll) {
+  function bindScroll(target, onScroll) {
+    const el = Array.isArray(target) ? document.elementFromPoint(...target) : target;
     const scrollElements = [document, ...getScrollParents(el)];
     scrollElements.forEach(el => {
       el.addEventListener('scroll', onScroll, {
@@ -11589,6 +11660,7 @@
         root,
         contentEl,
         targetEl,
+        target,
         isActive,
         updateLocation
       });
@@ -11984,7 +12056,7 @@
 
   // Types
 
-  const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
+  const allowedVariants$3 = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
   const makeVFieldProps = propsFactory({
     appendInnerIcon: IconValue,
     bgColor: String,
@@ -12018,7 +12090,7 @@
     variant: {
       type: String,
       default: 'filled',
-      validator: v => allowedVariants$1.includes(v)
+      validator: v => allowedVariants$3.includes(v)
     },
     'onClick:clear': EventProp(),
     'onClick:appendInner': EventProp(),
@@ -16180,6 +16252,7 @@
       validator: v => ['vertical', 'horizontal'].includes(v)
     },
     reverse: Boolean,
+    noKeyboard: Boolean,
     ...makeRoundedProps(),
     ...makeElevationProps({
       elevation: 2
@@ -16383,6 +16456,7 @@
       min,
       max,
       mousePressed,
+      noKeyboard: vue.toRef(() => props.noKeyboard),
       numTicks,
       onSliderMousedown,
       onSliderTouchstart,
@@ -16435,6 +16509,7 @@
       default: true
     },
     name: String,
+    noKeyboard: Boolean,
     ...makeComponentProps()
   }, 'VSliderThumb');
   const VSliderThumb = genericComponent()({
@@ -16497,6 +16572,7 @@
         if (step.value) return [1, 2, 3];else return [1, 5, 10];
       });
       function parseKeydown(e, value) {
+        if (props.noKeyboard) return;
         if (!relevantKeys.includes(e.key)) return;
         e.preventDefault();
         const _step = step.value || 0.1;
@@ -16732,7 +16808,8 @@
         trackContainerRef,
         position,
         hasLabels,
-        readonly
+        readonly,
+        noKeyboard
       } = useSlider({
         props,
         steps,
@@ -16808,6 +16885,7 @@
               "ref": thumbContainerRef,
               "aria-describedby": messagesId.value,
               "focused": isFocused.value,
+              "noKeyboard": noKeyboard.value,
               "min": min.value,
               "max": max.value,
               "modelValue": model.value,
@@ -23884,7 +23962,7 @@
 
   // Types
 
-  const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+  const allowedVariants$2 = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     flat: Boolean,
     ...makeGroupProps(),
@@ -23895,7 +23973,7 @@
     variant: {
       type: String,
       default: 'default',
-      validator: v => allowedVariants.includes(v)
+      validator: v => allowedVariants$2.includes(v)
     }
   }, 'VExpansionPanels');
   const VExpansionPanels = genericComponent()({
@@ -32427,6 +32505,614 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
+  // Types
+
+  // Composables
+  const makeRevealProps = propsFactory({
+    reveal: {
+      type: [Boolean, Object],
+      default: false
+    }
+  }, 'reveal');
+  function useReveal(props) {
+    const defaultDuration = 900;
+    const duration = vue.toRef(() => typeof props.reveal === 'object' ? Math.max(0, Number(props.reveal.duration ?? defaultDuration)) : defaultDuration);
+    const state = vue.shallowRef(props.reveal ? 'initial' : 'disabled');
+    vue.onMounted(async () => {
+      if (props.reveal) {
+        state.value = 'initial';
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        state.value = 'pending';
+        await new Promise(resolve => setTimeout(resolve, duration.value));
+        state.value = 'done';
+      }
+    });
+    return {
+      duration,
+      state
+    };
+  }
+
+  /*
+   * Credits: Alexander Milevski https://github.com/w8r/svg-arc-corners
+   */
+
+  function pointOnArc(center, radius, angle) {
+    const radians = (angle - 90) * Math.PI / 180.0;
+    return [center[0] + radius * Math.cos(radians), center[1] + radius * Math.sin(radians)];
+  }
+  function drawCircle(_ref, r, width) {
+    let [x, y] = _ref;
+    const innerRadius = r - width;
+    return ['M', x - r, y, 'A', r, r, 0, 1, 0, x + r, y, 'A', r, r, 0, 1, 0, x - r, y, 'M', x - innerRadius, y, 'A', innerRadius, innerRadius, 0, 1, 0, x + innerRadius, y, 'A', innerRadius, innerRadius, 0, 1, 0, x - innerRadius, y, 'Z'];
+  }
+  function simpleArc(center, r, startAngle, endAngle) {
+    const start = pointOnArc(center, r, startAngle);
+    const end = pointOnArc(center, r, endAngle);
+    const sweep = endAngle - startAngle > 180 ? 1 : 0;
+    return [`M${start[0]} ${start[1]}`, `A${r} ${r} 0 ${sweep} 1 ${end[0]} ${end[1]}`, `L${center[0]} ${center[1]}Z`].join(' ');
+  }
+  function roundedArc(center, radius, startAngle, endAngle, width, rounding) {
+    width = Math.min(radius, width);
+    if (Math.abs(endAngle - startAngle) === 360) {
+      return drawCircle(center, radius, width).join(' ');
+    }
+    if (rounding === 0 && radius === width) {
+      return simpleArc(center, radius, startAngle, endAngle);
+    }
+    const innerR = radius - width;
+    const circumference = Math.abs(endAngle - startAngle);
+    rounding = Math.min(width / 2, rounding);
+    if (360 * (rounding / (Math.PI * (radius - width))) > Math.abs(startAngle - endAngle)) {
+      rounding = circumference / 360 * innerR * Math.PI;
+    }
+
+    // inner and outer radiuses
+    const innerR2 = innerR + rounding;
+    const outerRadius = radius - rounding;
+
+    // butts corner points
+    const oStart = pointOnArc(center, outerRadius, startAngle);
+    const oEnd = pointOnArc(center, outerRadius, endAngle);
+    const iStart = pointOnArc(center, innerR2, startAngle);
+    const iEnd = pointOnArc(center, innerR2, endAngle);
+    const iSection = innerR ? 360 * (rounding / (2 * Math.PI * innerR)) : 0;
+    const oSection = 360 * (rounding / (2 * Math.PI * radius));
+
+    // arcs endpoints
+    const iArcStart = pointOnArc(center, innerR, startAngle + iSection);
+    const iArcEnd = pointOnArc(center, innerR, endAngle - iSection);
+    const oArcStart = pointOnArc(center, radius, startAngle + oSection);
+    const oArcEnd = pointOnArc(center, radius, endAngle - oSection);
+    const arcSweep1 = circumference > 180 + 2 * oSection ? 1 : 0;
+    const arcSweep2 = circumference > 180 + 2 * iSection ? 1 : 0;
+    return [
+    // begin path
+    'M', oStart[0], oStart[1],
+    // outer start corner
+    'A', rounding, rounding, 0, 0, 1, oArcStart[0], oArcStart[1],
+    // outer main arc
+    'A', radius, radius, 0, arcSweep1, 1, oArcEnd[0], oArcEnd[1],
+    // outer end corner
+    'A', rounding, rounding, 0, 0, 1, oEnd[0], oEnd[1],
+    // end butt
+    'L', iEnd[0], iEnd[1],
+    // inner end corner
+    'A', rounding, rounding, 0, 0, 1, iArcEnd[0], iArcEnd[1],
+    // inner arc
+    'A', innerR, innerR, 0, arcSweep2, 0, iArcStart[0], iArcStart[1],
+    // inner start corner
+    'A', rounding, rounding, 0, 0, 1, iStart[0], iStart[1], 'Z' // end path
+    ].join(' ');
+  }
+
+  // Utilities
+
+  // Types
+
+  function formatTextTemplate(template, item) {
+    return item ? template.replaceAll('[title]', item.title).replaceAll('[value]', String(item.value)) : undefined;
+  }
+  function usePieArc(props, isHovering) {
+    const hoverZoomRatio = vue.toRef(() => clamp(Number(props.hoverScale ?? 0), 0, 0.25));
+    const normalizedValue = vue.toRef(() => clamp(props.value - 100 * Number(props.gap ?? 0) / 360, 0.01, 99.99));
+    const normalizedInnerCut = vue.toRef(() => {
+      const min = Number(props.rounded ?? 0) > 0 ? 0.2 : 0;
+      return clamp(Number(props.innerCut ?? 0) / 100, min, 1);
+    });
+    const radians = vue.computed(() => (360 * (-normalizedValue.value / 100) + 90) * (Math.PI / 180));
+    const arcWidth = vue.computed(() => 50 * (1 - normalizedInnerCut.value) * (isHovering.value ? 1 : 1 - hoverZoomRatio.value));
+    const outerX = vue.toRef(() => 50 + 50 * Math.cos(radians.value));
+    const outerY = vue.toRef(() => 50 - 50 * Math.sin(radians.value));
+    return {
+      hoverZoomRatio,
+      normalizedValue,
+      normalizedInnerCut,
+      outerX,
+      outerY,
+      arcWidth
+    };
+  }
+  function useOuterSlicePath(_ref) {
+    let {
+      angle,
+      radius,
+      size,
+      width,
+      rounded
+    } = _ref;
+    return vue.computed(() => roundedArc([50, 50], vue.toValue(radius), vue.toValue(angle), vue.toValue(angle) + 360 * vue.toValue(size) / 100,
+    // angle end,
+    vue.toValue(width), vue.toValue(rounded)));
+  }
+  function useInnerSlicePath(_ref2) {
+    let {
+      angle,
+      radius,
+      size
+    } = _ref2;
+    return vue.computed(() => simpleArc([50, 50], vue.toValue(radius), vue.toValue(angle), vue.toValue(angle) + 360 * vue.toValue(size) / 100 // angle end,
+    ));
+  }
+
+  // Types
+
+  const makeVPieSegmentProps = propsFactory({
+    rotate: [Number, String],
+    value: {
+      type: Number,
+      default: 0
+    },
+    color: String,
+    innerCut: [Number, String],
+    hoverScale: {
+      type: [Number, String],
+      default: 0.05
+    },
+    gap: [Number, String],
+    rounded: [Number, String],
+    animation: {
+      type: [Boolean, Object],
+      default: false
+    },
+    pattern: String,
+    hideSlice: Boolean,
+    ...makeRevealProps()
+  }, 'VPieSegment');
+  const VPieSegment = genericComponent()({
+    name: 'VPieSegment',
+    props: makeVPieSegmentProps(),
+    setup(props) {
+      const isHovering = vue.shallowRef(false);
+      const {
+        state: revealState,
+        duration: revealDuration
+      } = useReveal(props);
+      const transitionConfig = vue.computed(() => {
+        const defaultEasing = 'easeInOutCubic';
+        const defaultDuration = 400;
+        const easingName = typeof props.animation === 'object' ? props.animation.easing ?? defaultEasing : defaultEasing;
+        return {
+          duration: ['initial', 'pending'].includes(revealState.value) ? revealDuration.value : typeof props.animation === 'object' ? props.animation.duration : props.animation ? defaultDuration : 0,
+          transition: easingPatterns[easingName]
+        };
+      });
+      const {
+        hoverZoomRatio,
+        normalizedValue,
+        normalizedInnerCut,
+        outerX,
+        outerY,
+        arcWidth
+      } = usePieArc(props, isHovering);
+      const arcSize = vue.toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value);
+      const currentArcSize = useTransition(arcSize, transitionConfig);
+      const angle = vue.toRef(() => revealState.value === 'initial' ? 0 : Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2);
+      const currentAngle = useTransition(angle, transitionConfig);
+      const arcRadius = vue.toRef(() => 50 * (isHovering.value ? 1 : 1 - hoverZoomRatio.value));
+      const currentArcRadius = useTransition(arcRadius, transitionConfig);
+      const currentArcWidth = useTransition(arcWidth, transitionConfig);
+      const outerSlicePath = useOuterSlicePath({
+        angle: currentAngle,
+        radius: currentArcRadius,
+        size: currentArcSize,
+        width: currentArcWidth,
+        rounded: () => Number(props.rounded ?? 0)
+      });
+      const innerSlicePath = useInnerSlicePath({
+        angle: currentAngle,
+        radius: () => currentArcRadius.value - currentArcWidth.value,
+        size: currentArcSize
+      });
+      const overlayPath = vue.toRef(() => `M 50 0 A 50 50 0 ${normalizedValue.value > 50 ? 1 : 0} 1 ${outerX.value} ${outerY.value} L 50 50`);
+      return () => vue.createElementVNode("g", {
+        "class": "v-pie-segment",
+        "style": {
+          color: props.color
+        }
+      }, [vue.createElementVNode("path", {
+        "key": "outer-slice",
+        "fill": "currentColor",
+        "shape-rendering": "geometricPrecision",
+        "d": outerSlicePath.value
+      }, null), props.pattern && vue.createElementVNode("path", {
+        "key": "pattern-overlay",
+        "shape-rendering": "geometricPrecision",
+        "fill": props.pattern,
+        "d": outerSlicePath.value
+      }, null), !props.hideSlice && normalizedInnerCut.value > 0 && vue.createElementVNode("path", {
+        "key": "inner-slice",
+        "fill": "oklch(from currentColor l c h / calc(alpha / 2))",
+        "d": innerSlicePath.value
+      }, null), ['disabled', 'done'].includes(revealState.value) && vue.createElementVNode("path", {
+        "transform": `rotate(${currentAngle.value} 50 50)`,
+        "class": "v-pie-segment__overlay",
+        "d": overlayPath.value,
+        "onMouseenter": () => isHovering.value = true,
+        "onMouseleave": () => isHovering.value = false
+      }, null)]);
+    }
+  });
+
+  // Types
+
+  const makeVPieTooltipProps = propsFactory({
+    modelValue: Boolean,
+    item: {
+      type: Object,
+      default: null
+    },
+    titleFormat: {
+      type: [String, Function],
+      default: '[title]'
+    },
+    subtitleFormat: {
+      type: [String, Function],
+      default: '[value]'
+    },
+    ...makeTransitionProps(),
+    ...pick(makeVTooltipProps(), ['offset'])
+  }, 'VPieTooltip');
+  const VPieTooltip = genericComponent()({
+    name: 'VPieTooltip',
+    props: makeVPieTooltipProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const target = vue.shallowRef([0, 0]);
+      const vm = getCurrentInstance('VPieTooltip');
+      let frame = -1;
+      function onMouseMove(_ref2) {
+        let {
+          clientX,
+          clientY
+        } = _ref2;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          target.value = [clientX, clientY];
+        });
+      }
+      vue.onMounted(() => {
+        vm.proxy.$el.parentNode.addEventListener('mousemove', onMouseMove);
+      });
+      vue.onBeforeUnmount(() => {
+        vm.proxy.$el.parentNode.removeEventListener('mousemove', onMouseMove);
+      });
+      const tooltipTitleFormatFunction = vue.toRef(() => segment => {
+        return typeof props.titleFormat === 'function' ? props.titleFormat(segment) : formatTextTemplate(props.titleFormat, segment);
+      });
+      const tooltipSubtitleFormatFunction = vue.toRef(() => segment => {
+        return typeof props.subtitleFormat === 'function' ? props.subtitleFormat(segment) : formatTextTemplate(props.subtitleFormat, segment);
+      });
+      return () => vue.createVNode(VTooltip, {
+        "offset": props.offset,
+        "modelValue": props.modelValue,
+        "target": target.value,
+        "contentClass": "v-pie__tooltip-content"
+      }, {
+        default: () => [!!props.item && (slots.default?.({
+          item: props.item
+        }) ?? vue.createVNode(MaybeTransition, {
+          "transition": props.transition,
+          "mode": "out-in"
+        }, {
+          default: () => [vue.createVNode(VListItem, {
+            "key": props.item.key,
+            "density": "compact",
+            "title": tooltipTitleFormatFunction.value(props.item),
+            "subtitle": tooltipSubtitleFormatFunction.value(props.item)
+          }, {
+            prepend: slots.prepend ? () => slots.prepend({
+              item: props.item
+            }) : undefined
+          })]
+        }))]
+      });
+    }
+  });
+
+  // Types
+
+  const makeVPieProps = propsFactory({
+    title: String,
+    bgColor: String,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    palette: {
+      type: Array,
+      default: () => []
+    },
+    itemKey: {
+      type: String,
+      default: 'key'
+    },
+    itemValue: {
+      type: String,
+      default: 'value'
+    },
+    itemTitle: {
+      type: String,
+      default: 'title'
+    },
+    size: {
+      type: [Number, String],
+      default: 250
+    },
+    rotate: [Number, String],
+    gaugeCut: [Number, String],
+    legend: {
+      type: [Boolean, Object],
+      default: false
+    },
+    tooltip: {
+      type: [Boolean, Object],
+      default: false
+    },
+    ...makeDensityProps(),
+    ...pick(makeVPieSegmentProps(), ['animation', 'gap', 'rounded', 'innerCut', 'hoverScale', 'hideSlice', 'reveal'])
+  }, 'VPie');
+  const VPie = genericComponent()({
+    name: 'VPie',
+    props: makeVPieProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const legendConfig = vue.computed(() => ({
+        visible: !!props.legend,
+        position: 'bottom',
+        textFormat: '[title]',
+        ...(typeof props.legend === 'object' ? props.legend : {})
+      }));
+      const {
+        colorClasses,
+        colorStyles
+      } = useColor(() => ({
+        background: props.bgColor
+      }));
+      const textColorStyles = vue.toRef(() => pick(colorStyles.value, ['color', 'caretColor']));
+      const legendAvatarSize = vue.toRef(() => ({
+        default: 20,
+        comfortable: 18,
+        compact: 16
+      })[props.density ?? 'default']);
+      const legendDirection = vue.toRef(() => ['left', 'right'].includes(legendConfig.value.position) ? 'vertical' : 'horizontal');
+      const legendMode = vue.toRef(() => !legendConfig.value.visible ? 'hidden' : legendConfig.value.position);
+      const legendTextFormatFunction = vue.toRef(() => item => {
+        return typeof legendConfig.value.textFormat === 'function' ? legendConfig.value.textFormat(item) : formatTextTemplate(legendConfig.value.textFormat, item);
+      });
+      const arcs = vue.computed(() => {
+        // hidden items get (value: 0) to trigger disappearing animation
+        return props.items.filter(Boolean).map((item, index) => {
+          return {
+            key: item[props.itemKey],
+            color: item.color ?? colorFromPalette(index),
+            value: item[props.itemValue],
+            title: String(item[props.itemTitle]),
+            pattern: item.pattern ?? patternFromPalette(index),
+            raw: item
+          };
+        });
+      });
+      const visibleItemsKeys = vue.shallowRef([]);
+      vue.watch(() => arcs.value.length, () => {
+        // reset when number of items changes
+        visibleItemsKeys.value = arcs.value.map(a => a.key);
+      }, {
+        immediate: true
+      });
+      const visibleItems = vue.computed(() => {
+        // hidden items get (value: 0) to trigger disappearing animation
+        return arcs.value.map(item => {
+          return isActive(item) ? item : {
+            ...item,
+            value: 0
+          };
+        });
+      });
+      const total = vue.computed(() => visibleItems.value.reduce((sum, item) => sum + item.value, 0));
+      const gaugeCut = vue.toRef(() => Number(props.gaugeCut ?? 0));
+      const gaugeOffset = vue.computed(() => (1 - Math.cos(Math.PI * Math.min(90, gaugeCut.value / 2) / 180)) / 2);
+      const rotateDeg = vue.computed(() => `${gaugeCut.value ? 180 + gaugeCut.value / 2 : props.rotate ?? 0}deg`);
+      function arcOffset(index) {
+        return visibleItems.value.slice(0, index).reduce((acc, s) => acc + (total.value > 0 ? s.value / total.value : 0) * (360 - gaugeCut.value), 0);
+      }
+      function arcSize(v) {
+        return v / total.value * (100 - gaugeCut.value / 3.6);
+      }
+      function colorFromPalette(index) {
+        if (props.palette.length === 0) return undefined;
+        const paletteItem = props.palette[index % props.palette.length];
+        return typeof paletteItem === 'object' ? paletteItem.color : paletteItem;
+      }
+      function patternFromPalette(index) {
+        if (props.palette.length === 0) return undefined;
+        const paletteItem = props.palette[index % props.palette.length];
+        return typeof paletteItem === 'object' ? paletteItem.pattern : undefined;
+      }
+      function isActive(item) {
+        return visibleItemsKeys.value.includes(item.key);
+      }
+      function toggle(item) {
+        if (isActive(item)) {
+          visibleItemsKeys.value = visibleItemsKeys.value.filter(x => x !== item.key);
+        } else {
+          visibleItemsKeys.value = [...visibleItemsKeys.value, item.key];
+        }
+      }
+      const tooltipItem = vue.shallowRef(null);
+      const tooltipVisible = vue.shallowRef(false);
+      let mouseLeaveTimeout = null;
+      function onMouseenter(item) {
+        if (!props.tooltip) return;
+        clearTimeout(mouseLeaveTimeout);
+        tooltipVisible.value = true;
+        tooltipItem.value = item;
+      }
+      function onMouseleave() {
+        if (!props.tooltip) return;
+        clearTimeout(mouseLeaveTimeout);
+        mouseLeaveTimeout = setTimeout(() => {
+          tooltipVisible.value = false;
+
+          // intentionally reusing timeout here
+          mouseLeaveTimeout = setTimeout(() => {
+            tooltipItem.value = null;
+          }, 500);
+        }, 100);
+      }
+      return () => {
+        const segmentProps = pick(props, ['animation', 'gap', 'rounded', 'hideSlice', 'reveal', 'innerCut', 'hoverScale']);
+        const defaultTooltipTransition = {
+          name: 'fade-transition',
+          duration: 150
+        };
+        const tooltipProps = {
+          item: tooltipItem.value,
+          modelValue: tooltipVisible.value,
+          titleFormat: typeof props.tooltip === 'object' ? props.tooltip.titleFormat : '[title]',
+          subtitleFormat: typeof props.tooltip === 'object' ? props.tooltip.subtitleFormat : '[value]',
+          transition: typeof props.tooltip === 'object' ? props.tooltip.transition : defaultTooltipTransition,
+          offset: typeof props.tooltip === 'object' ? props.tooltip.offset : 16
+        };
+        const legendDefaults = {
+          VChipGroup: {
+            direction: legendDirection.value
+          },
+          VChip: {
+            density: props.density
+          },
+          VAvatar: {
+            size: legendAvatarSize.value
+          }
+        };
+        const tooltipDefaults = {
+          VAvatar: {
+            size: 28
+          }
+        };
+        const avatarSlot = _ref2 => {
+          let {
+            item
+          } = _ref2;
+          return vue.createVNode(VAvatar, {
+            "color": item.color,
+            "start": true
+          }, {
+            default: () => [item.pattern && vue.createElementVNode("svg", {
+              "height": "40",
+              "width": "40"
+            }, [vue.createElementVNode("rect", {
+              "width": "40",
+              "height": "40",
+              "fill": item.pattern
+            }, null)])]
+          });
+        };
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-pie', `v-pie--legend-${legendMode.value}`]),
+          "style": {
+            '--v-pie-size': convertToUnit(props.size)
+          }
+        }, [slots.title?.() ?? (props.title && vue.createElementVNode("div", {
+          "class": "v-pie__title"
+        }, [props.title])), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-pie__content', colorClasses.value]),
+          "style": vue.normalizeStyle([{
+            transform: `rotate(${rotateDeg.value})`,
+            marginBottom: `calc(-1 * ${convertToUnit(props.size)} * ${gaugeOffset.value})`
+          }, textColorStyles.value])
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-pie__content-underlay', colorClasses.value]),
+          "style": vue.normalizeStyle(colorStyles.value)
+        }, null), vue.createElementVNode("svg", {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "viewBox": "0 0 100 100"
+        }, [arcs.value.map((item, index) => vue.createVNode(VPieSegment, vue.mergeProps(segmentProps, {
+          "key": item.key,
+          "color": item.color,
+          "value": isActive(item) ? arcSize(item.value) : 0,
+          "rotate": arcOffset(index),
+          "pattern": item.pattern,
+          "onMouseenter": () => onMouseenter(item),
+          "onMouseleave": () => onMouseleave()
+        }), null))]), vue.createElementVNode("div", {
+          "class": "v-pie__center-content",
+          "style": {
+            transform: `translate(-50%, -50%)
+                  rotate(-${rotateDeg.value})
+                  translateY(calc(-100% * ${gaugeOffset.value}))`
+          }
+        }, [vue.createElementVNode("div", null, [slots.center?.({
+          total: total.value
+        })])])]), legendConfig.value.visible && vue.createVNode(VDefaultsProvider, {
+          "key": "legend",
+          "defaults": legendDefaults
+        }, {
+          default: () => [vue.createElementVNode("div", {
+            "class": "v-pie__legend"
+          }, [slots.legend?.({
+            isActive,
+            toggle,
+            items: arcs.value
+          }) ?? vue.createVNode(VChipGroup, {
+            "column": true,
+            "multiple": true,
+            "modelValue": visibleItemsKeys.value,
+            "onUpdate:modelValue": $event => visibleItemsKeys.value = $event
+          }, {
+            default: () => [arcs.value.map(item => vue.createVNode(VChip, {
+              "value": item.key
+            }, {
+              prepend: () => avatarSlot({
+                item
+              }),
+              default: () => vue.createElementVNode("div", {
+                "class": "v-pie__legend__text"
+              }, [slots['legend-text']?.({
+                item
+              }) ?? legendTextFormatFunction.value(item)])
+            }))]
+          })])]
+        }), !!props.tooltip && vue.createVNode(VDefaultsProvider, {
+          "defaults": tooltipDefaults
+        }, {
+          default: () => [vue.createVNode(VPieTooltip, tooltipProps, {
+            default: slots.tooltip,
+            prepend: avatarSlot
+          })]
+        })]);
+      };
+    }
+  });
+
   // Types
 
   const makeVStepperVerticalActionsProps = propsFactory({
@@ -33186,6 +33872,799 @@
     }
   });
 
+  // Utilities
+
+  // Types
+
+  function useDirectiveComponent(component, props) {
+    const concreteComponent = typeof component === 'string' ? vue.resolveComponent(component) : component;
+    const hook = mountComponent(concreteComponent, props);
+    return {
+      mounted: hook,
+      updated: hook,
+      unmounted(el) {
+        vue.render(null, el);
+      }
+    };
+  }
+  function mountComponent(component, props) {
+    return function (el, binding, vnode) {
+      const _props = typeof props === 'function' ? props(binding) : props;
+      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
+      const children = () => text ?? el.textContent;
+
+      // If vnode.ctx is the same as the instance, then we're bound to a plain element
+      // and need to find the nearest parent component instance to inherit provides from
+      const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
+      const node = vue.h(component, vue.mergeProps(_props, value), children);
+      node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
+        provides
+      });
+      vue.render(node, el);
+    };
+  }
+  function findComponentParent(vnode, root) {
+    // Walk the tree from root until we find the child vnode
+    const stack = new Set();
+    const walk = children => {
+      for (const child of children) {
+        if (!child) continue;
+        if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
+          return true;
+        }
+        stack.add(child);
+        let result;
+        if (child.suspense) {
+          result = walk([child.ssContent]);
+        } else if (Array.isArray(child.children)) {
+          result = walk(child.children);
+        } else if (child.component?.vnode) {
+          result = walk([child.component?.subTree]);
+        }
+        if (result) {
+          return result;
+        }
+        stack.delete(child);
+      }
+      return false;
+    };
+    if (!walk([root.subTree])) {
+      consoleError('Could not find original vnode, component will not inherit provides');
+      return root;
+    }
+
+    // Return the first component parent
+    const result = Array.from(stack).reverse();
+    for (const child of result) {
+      if (child.component) {
+        return child.component;
+      }
+    }
+    return root;
+  }
+
+  // Components
+
+  // Types
+
+  const Tooltip = useDirectiveComponent(VTooltip, binding => {
+    return {
+      activator: 'parent',
+      location: binding.arg?.replace('-', ' '),
+      text: typeof binding.value === 'boolean' ? undefined : binding.value
+    };
+  });
+
+  // Types
+
+  const makeVVideoVolumeProps = propsFactory({
+    inline: Boolean,
+    label: String,
+    direction: {
+      type: String,
+      default: 'vertical'
+    },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    menuProps: Object,
+    sliderProps: Object,
+    onClick: EventProp(),
+    ...makeComponentProps()
+  }, 'VVideoVolume');
+  const VVideoVolume = genericComponent()({
+    name: 'VVideoVolume',
+    directives: {
+      vTooltip: Tooltip
+    },
+    props: makeVVideoVolumeProps(),
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const volume = useProxiedModel(props, 'modelValue');
+      const volumeIcon = vue.toRef(() => volume.value > 70 ? '$volumeHigh' : volume.value > 40 ? '$volumeMedium' : volume.value > 10 ? '$volumeLow' : '$volumeOff');
+      const containerRef = vue.ref();
+      useRender(() => {
+        const sliderDefaults = {
+          hideDetails: true,
+          step: 5,
+          thumbSize: 16
+        };
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video-volume', {
+            'v-video-volume--inline': props.inline
+          }, props.class]),
+          "style": vue.normalizeStyle(props.style),
+          "ref": containerRef
+        }, [vue.withDirectives(vue.createVNode(VIconBtn, vue.mergeProps({
+          "icon": volumeIcon.value,
+          "aria-label": props.label,
+          "onClick": props.onClick
+        }, attrs), {
+          default: () => [vue.createVNode(VIcon, null, null), !props.inline && vue.createVNode(VMenu, {
+            "offset": "8",
+            "activator": "parent",
+            "attach": containerRef.value,
+            "location": props.menuProps?.location ?? 'top center',
+            "closeOnContentClick": false
+          }, {
+            default: () => [vue.createElementVNode("div", {
+              "class": vue.normalizeClass(['v-video-volume__menu', `v-video-volume__menu--${props.direction}`])
+            }, [vue.createVNode(VSlider, vue.mergeProps({
+              "direction": props.direction,
+              "aria-label": t('$vuetify.video.volume'),
+              "modelValue": volume.value,
+              "onUpdate:modelValue": v => volume.value = v
+            }, sliderDefaults, props.sliderProps), null)])]
+          })]
+        }), [[Tooltip, props.label, 'top']]), props.inline && vue.createVNode(VSlider, vue.mergeProps({
+          "class": "v-video-volume-inline__slider",
+          "minWidth": "50",
+          "aria-label": t('$vuetify.video.volume'),
+          "modelValue": volume.value,
+          "onUpdate:modelValue": v => volume.value = v,
+          "onKeydown": e => {
+            e.stopPropagation();
+          }
+        }, sliderDefaults, props.sliderProps), null)]);
+      });
+    }
+  });
+
+  // Types
+
+  const allowedVariants$1 = ['hidden', 'default', 'tube', 'mini'];
+  const makeVVideoControlsProps = propsFactory({
+    color: String,
+    backgroundColor: String,
+    trackColor: String,
+    playing: Boolean,
+    hidePlay: Boolean,
+    hideVolume: Boolean,
+    hideFullscreen: Boolean,
+    fullscreen: Boolean,
+    floating: Boolean,
+    splitTime: Boolean,
+    pills: Boolean,
+    detached: Boolean,
+    progress: {
+      type: Number,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      default: 0
+    },
+    volume: [Number, String],
+    variant: {
+      type: String,
+      default: 'default',
+      validator: v => allowedVariants$1.includes(v)
+    },
+    volumeProps: Object,
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeThemeProps()
+  }, 'VVideoControls');
+  const VVideoControls = genericComponent()({
+    name: 'VVideoControls',
+    directives: {
+      vTooltip: Tooltip
+    },
+    props: makeVVideoControlsProps(),
+    emits: {
+      'update:playing': val => true,
+      'update:progress': val => true,
+      'update:volume': val => true,
+      skip: val => true,
+      'click:fullscreen': () => true
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(() => {
+        const fallbackBackground = props.detached ? 'surface' : undefined;
+        return props.backgroundColor ?? fallbackBackground;
+      });
+      const playing = useProxiedModel(props, 'playing');
+      const progress = useProxiedModel(props, 'progress');
+      const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+      const lastVolume = vue.shallowRef();
+      const currentTime = vue.computed(() => {
+        const secondsElapsed = Math.round(props.progress / 100 * props.duration);
+        return {
+          elapsed: formatTime(secondsElapsed),
+          remaining: formatTime(props.duration - secondsElapsed),
+          total: formatTime(props.duration)
+        };
+      });
+      const labels = vue.computed(() => {
+        const playIconLocaleKey = playing.value ? 'pause' : 'play';
+        const volumeIconLocaleKey = props.volumeProps?.inline ? volume.value ? 'mute' : 'unmute' : 'showVolume';
+        const fullscreenIconLocaleKey = props.fullscreen ? 'exitFullscreen' : 'enterFullscreen';
+        return {
+          seek: t('$vuetify.video.seek'),
+          volume: t('$vuetify.video.volume'),
+          playAction: t(`$vuetify.video.${playIconLocaleKey}`),
+          volumeAction: t(`$vuetify.video.${volumeIconLocaleKey}`),
+          fullscreenAction: t(`$vuetify.video.${fullscreenIconLocaleKey}`)
+        };
+      });
+      function play() {
+        playing.value = true;
+      }
+      function pause() {
+        playing.value = false;
+      }
+      function skipTo(v) {
+        progress.value = v;
+      }
+      function toggleMuted() {
+        if (volume.value) {
+          lastVolume.value = volume.value;
+          volume.value = 0;
+        } else {
+          volume.value = lastVolume.value ?? 100;
+        }
+      }
+      function toggleFullscreen() {
+        emit('click:fullscreen');
+      }
+      useRender(() => {
+        const sizes = props.pills ? [42, 36, 30] : [32, 28, 24];
+        const innerDefaults = {
+          VIconBtn: {
+            size: props.density === 'compact' ? sizes[2] : props.density === 'comfortable' ? sizes[1] : sizes[0],
+            iconSize: props.density === 'compact' ? 20 : props.density === 'comfortable' ? 24 : 26,
+            variant: 'text',
+            color: props.color
+          },
+          VSlider: {
+            thumbSize: props.variant === 'tube' ? 10 : 16,
+            hideDetails: true
+          }
+        };
+        const regularBtnSize = innerDefaults.VIconBtn.size;
+        const playBtnSize = props.pills ? regularBtnSize + 8 : regularBtnSize;
+        const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : []];
+        const slotProps = {
+          play,
+          pause,
+          playing: playing.value,
+          progress: progress.value,
+          currentTime: currentTime.value,
+          skipTo,
+          volume,
+          toggleMuted,
+          fullscreen: props.fullscreen,
+          toggleFullscreen,
+          labels: labels.value
+        };
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video-controls', `v-video-controls--variant-${props.variant}`, {
+            'v-video-controls--pills': props.pills
+          }, {
+            'v-video-controls--detached': props.detached
+          }, {
+            'v-video-controls--floating': props.floating
+          }, {
+            'v-video-controls--split-time': props.splitTime
+          }, backgroundColorClasses.value, props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
+          "style": vue.normalizeStyle([backgroundColorStyles.value, {
+            '--v-video-controls-pill-height': `${regularBtnSize}px`
+          }])
+        }, [vue.createVNode(VDefaultsProvider, {
+          "defaults": innerDefaults
+        }, {
+          default: () => [slots.default?.(slotProps) ?? vue.createElementVNode(vue.Fragment, null, [props.variant !== 'mini' && vue.createElementVNode(vue.Fragment, null, [!props.hidePlay && vue.createElementVNode("div", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__action-play'])
+          }, [vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": playing.value ? '$pause' : '$play',
+            "size": playBtnSize,
+            "aria-label": labels.value.playAction,
+            "onClick": () => playing.value = !playing.value
+          }, null), [[Tooltip, labels.value.playAction, 'top']])]), slots.prepend && vue.createElementVNode("div", {
+            "class": vue.normalizeClass(pillClasses)
+          }, [slots.prepend(slotProps)]), props.splitTime ? vue.createElementVNode("span", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+          }, [currentTime.value.elapsed]) : props.variant !== 'default' ? vue.createElementVNode("span", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+          }, [currentTime.value.elapsed, vue.createTextVNode(" / "), currentTime.value.total]) : '', vue.createVNode(VSlider, {
+            "modelValue": props.progress,
+            "noKeyboard": true,
+            "color": props.trackColor ?? props.color,
+            "trackColor": props.variant === 'tube' ? 'white' : undefined,
+            "class": "v-video__track",
+            "thumbLabel": "always",
+            "aria-label": labels.value.seek,
+            "onUpdate:modelValue": skipTo
+          }, {
+            'thumb-label': () => currentTime.value.elapsed
+          }), props.variant === 'tube' && vue.createVNode(VSpacer, null, null), props.splitTime ? vue.createElementVNode("span", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+          }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSpacer, null, null), slots.prepend && vue.createElementVNode("div", {
+            "class": vue.normalizeClass(pillClasses)
+          }, [slots.prepend(slotProps)]), !props.hidePlay && vue.createElementVNode("div", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__action-play'])
+          }, [vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": playing.value ? '$pause' : '$play',
+            "size": playBtnSize,
+            "aria-label": labels.value.playAction,
+            "onClick": () => playing.value = !playing.value
+          }, null), [[Tooltip, labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && vue.createElementVNode("div", {
+            "class": vue.normalizeClass(pillClasses)
+          }, [!props.hideVolume && vue.createVNode(VVideoVolume, vue.mergeProps({
+            "key": "volume-control",
+            "sliderProps": {
+              color: props.color
+            },
+            "modelValue": volume.value,
+            "label": labels.value.volumeAction,
+            "onUpdate:modelValue": v => volume.value = v,
+            "onClick": () => props.volumeProps?.inline && toggleMuted()
+          }, props.volumeProps), null), slots.append?.(slotProps), !props.hideFullscreen && vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
+            "aria-label": labels.value.fullscreenAction,
+            "onClick": toggleFullscreen
+          }, null), [[Tooltip, labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && vue.createVNode(VSpacer, null, null)])]
+        })]);
+      });
+      return {
+        toggleMuted
+      };
+    }
+  });
+
+  // Types
+
+  const allowedVariants = ['background', 'player'];
+  const makeVVideoProps = propsFactory({
+    autoplay: Boolean,
+    muted: Boolean,
+    eager: Boolean,
+    src: String,
+    type: String,
+    // e.g. video/mp4
+    image: String,
+    hideOverlay: Boolean,
+    noFullscreen: Boolean,
+    startAt: [Number, String],
+    variant: {
+      type: String,
+      default: 'player',
+      validator: v => allowedVariants.includes(v)
+    },
+    controlsTransition: {
+      type: [Boolean, String, Object],
+      component: VFadeTransition
+    },
+    controlsVariant: {
+      type: String,
+      default: 'default'
+    },
+    controlsProps: {
+      type: Object
+    },
+    rounded: [Boolean, Number, String, Array],
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeThemeProps(),
+    ...omit(makeVVideoControlsProps(), ['fullscreen', 'variant'])
+  }, 'VVideo');
+  const VVideo = genericComponent()({
+    name: 'VVideo',
+    inheritAttrs: false,
+    props: makeVVideoProps(),
+    emits: {
+      loaded: element => true,
+      'update:playing': val => true,
+      'update:progress': val => true,
+      'update:volume': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs,
+        emit,
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        ssr
+      } = useDisplay();
+      const roundedForContainer = vue.toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded);
+      const roundedForControls = vue.toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false);
+      const {
+        roundedClasses: roundedContainerClasses
+      } = useRounded(roundedForContainer);
+      const {
+        roundedClasses: roundedControlsClasses
+      } = useRounded(roundedForControls);
+      const containerRef = vue.ref();
+      const videoRef = vue.ref();
+      const controlsRef = vue.ref();
+      const playing = useProxiedModel(props, 'playing');
+      const progress = useProxiedModel(props, 'progress');
+      const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+      const fullscreen = vue.shallowRef(false);
+      const waiting = vue.shallowRef(false);
+      const triggered = vue.shallowRef(false);
+      const startAfterLoad = vue.shallowRef(false);
+      const state = vue.shallowRef(props.autoplay ? 'loading' : 'idle');
+      const duration = vue.shallowRef(0);
+      const fullscreenEnabled = vue.toRef(() => !props.noFullscreen && !String(attrs.controlsList ?? '').includes('nofullscreen'));
+      function onTimeupdate() {
+        const {
+          currentTime,
+          duration
+        } = videoRef.value;
+        progress.value = duration === 0 ? 0 : 100 * currentTime / duration;
+      }
+      async function onTriggered() {
+        await vue.nextTick();
+        if (!videoRef.value) return;
+        videoRef.value.addEventListener('timeupdate', onTimeupdate);
+        videoRef.value.volume = volume.value / 100;
+        if (state.value !== 'loaded') {
+          state.value = 'loading';
+        }
+      }
+      function onVideoLoaded() {
+        state.value = 'loaded';
+        duration.value = videoRef.value.duration;
+        const startTime = Number(props.startAt ?? 0);
+        if (startTime && startTime <= duration.value) {
+          videoRef.value.currentTime = startTime;
+          progress.value = duration.value === 0 ? 0 : 100 * startTime / duration.value;
+        }
+        if (startAfterLoad.value) {
+          setTimeout(() => playing.value = true, 100);
+        }
+        emit('loaded', videoRef.value);
+      }
+      function onClick() {
+        if (state.value !== 'loaded') {
+          triggered.value = true;
+          startAfterLoad.value = !startAfterLoad.value;
+        }
+      }
+      function onKeydown(e) {
+        if (!videoRef.value || e.ctrlKey) return;
+        if (e.key.startsWith('Arrow')) {
+          e.preventDefault();
+        }
+        switch (true) {
+          case e.key === ' ':
+            {
+              if (!['A', 'BUTTON'].includes(e.target?.tagName)) {
+                e.preventDefault();
+                playing.value = !playing.value;
+              }
+              break;
+            }
+          case e.key === 'ArrowRight':
+            {
+              const step = 10 * (e.shiftKey ? 6 : 1);
+              videoRef.value.currentTime = Math.min(videoRef.value.currentTime + step, duration.value);
+              // TODO: show skip indicator
+              break;
+            }
+          case e.key === 'ArrowLeft':
+            {
+              const step = 10 * (e.shiftKey ? 6 : 1);
+              videoRef.value.currentTime = Math.max(videoRef.value.currentTime - step, 0);
+              // TODO: show skip indicator
+              break;
+            }
+          case createRange(10).map(String).includes(e.key):
+            {
+              skipTo(Number(e.key) * 10);
+              break;
+            }
+          case e.key === 'ArrowUp':
+            {
+              volume.value = Math.min(volume.value + 10, 100);
+              // TODO: show volume change indicator
+              break;
+            }
+          case e.key === 'ArrowDown':
+            {
+              volume.value = Math.max(volume.value - 10, 0);
+              // TODO: show volume change indicator
+              break;
+            }
+          case e.key === 'm':
+            {
+              controlsRef.value?.toggleMuted();
+              break;
+            }
+          case e.key === 'f':
+            {
+              toggleFullscreen();
+              break;
+            }
+        }
+      }
+      function skipTo(v) {
+        if (!videoRef.value) return;
+        progress.value = v;
+        videoRef.value.currentTime = duration.value * v / 100;
+      }
+      vue.watch(() => props.src, v => {
+        progress.value = 0;
+      });
+      vue.watch(playing, v => {
+        if (!videoRef.value) return;
+        if (v) {
+          videoRef.value.play();
+        } else {
+          videoRef.value.pause();
+        }
+      });
+      vue.watch(volume, v => {
+        if (!videoRef.value) return;
+        videoRef.value.volume = v / 100;
+      });
+      vue.watch(triggered, () => onTriggered(), {
+        once: true
+      });
+      vue.watch(() => props.eager, v => v && (triggered.value = true), {
+        immediate: true
+      });
+      vue.onMounted(() => {
+        if (props.autoplay && !ssr) {
+          triggered.value = true;
+          startAfterLoad.value = true;
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        videoRef.value?.removeEventListener('timeupdate', onTimeupdate);
+      });
+      function focusSlider() {
+        const container = videoRef.value?.closest('.v-video');
+        const innerSlider = container?.querySelector('[role="slider"]');
+        innerSlider?.focus();
+      }
+      function fullscreenExitShortcut(e) {
+        if (['ESC', 'f'].includes(e.key)) {
+          toggleFullscreen();
+          document.body.removeEventListener('keydown', fullscreenExitShortcut);
+        }
+      }
+      async function toggleFullscreen() {
+        if (!fullscreenEnabled.value || !document.fullscreenEnabled) {
+          return;
+        }
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+          onFullscreenExit();
+        } else {
+          await containerRef.value?.requestFullscreen();
+          document.body.addEventListener('keydown', fullscreenExitShortcut);
+          document.addEventListener('fullscreenchange', onFullscreenExit);
+          fullscreen.value = true;
+        }
+      }
+      function onFullscreenExit() {
+        // event fires with a delay after requestFullscreen(), ignore first run
+        if (document.fullscreenElement) return;
+        focusSlider();
+        fullscreen.value = false;
+        document.body.removeEventListener('keydown', fullscreenExitShortcut);
+        document.removeEventListener('fullscreenchange', onFullscreenExit);
+      }
+      function onVideoClick(e) {
+        e.preventDefault();
+        if (state.value === 'loaded') {
+          playing.value = !playing.value;
+          focusSlider();
+        }
+      }
+      function onDoubleClick(e) {
+        e.preventDefault();
+        toggleFullscreen();
+      }
+      let lastTap = 0;
+      function onTouchend(e) {
+        const now = performance.now();
+        if (now - lastTap < 500) {
+          e.preventDefault();
+          toggleFullscreen();
+        } else {
+          lastTap = now;
+        }
+      }
+      useRender(() => {
+        const showControls = state.value === 'loaded' && props.variant === 'player' && props.controlsVariant !== 'hidden';
+        const posterTransition = props.variant === 'background' ? 'poster-fade-out' : 'fade-transition';
+        const overlayProps = {
+          contained: true,
+          persistent: true,
+          contentClass: 'v-video__overlay-fill'
+        };
+        const controlsProps = {
+          ...VVideoControls.filterProps(omit(props, ['variant', 'rounded', 'hideVolume'])),
+          rounded: Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded,
+          fullscreen: fullscreen.value,
+          hideVolume: props.hideVolume || props.muted,
+          hideFullscreen: props.hideFullscreen || !fullscreenEnabled.value,
+          density: props.density,
+          variant: props.controlsVariant,
+          playing: playing.value,
+          progress: progress.value,
+          duration: duration.value,
+          volume: volume.value,
+          ...props.controlsProps
+        };
+        const controlsEventHandlers = {
+          onSkip: v => skipTo(v),
+          'onClick:fullscreen': () => toggleFullscreen(),
+          'onUpdate:playing': v => playing.value = v,
+          'onUpdate:progress': v => skipTo(v),
+          'onUpdate:volume': v => volume.value = v,
+          onClick: e => e.stopPropagation()
+        };
+        const controlslist = [attrs.controlslist, props.noFullscreen ? 'nofullscreen' : ''].filter(Boolean).join(' ');
+        const loadingIndicator = vue.createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "color": props.color,
+          "width": "3",
+          "size": Math.min(100, Number(props.height) / 2 || 50)
+        }, null);
+        const overlayPlayIcon = vue.createVNode(VIconBtn, {
+          "icon": "$play",
+          "size": "80",
+          "color": "#fff",
+          "variant": "outlined",
+          "iconSize": "50",
+          "class": "v-video__center-icon"
+        }, null);
+        return vue.createElementVNode("div", {
+          "ref": containerRef,
+          "class": vue.normalizeClass(['v-video', `v-video--variant-${props.variant}`, `v-video--${state.value}`, {
+            'v-video--playing': playing.value
+          }, themeClasses.value, densityClasses.value, roundedContainerClasses.value, props.class]),
+          "style": vue.normalizeStyle([props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']), props.style]),
+          "onKeydown": onKeydown,
+          "onClick": onClick
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video__content', elevationClasses.value]),
+          "style": vue.normalizeStyle([props.variant === 'background' ? [] : dimensionStyles.value])
+        }, [(props.eager || triggered.value) && vue.createElementVNode("video", vue.mergeProps({
+          "key": "video-element",
+          "class": ['v-video__video', roundedContainerClasses.value]
+        }, omit(attrs, ['controlslist', 'class', 'style']), {
+          "controlslist": controlslist,
+          "autoplay": props.autoplay,
+          "muted": props.muted,
+          "playsinline": true,
+          "ref": videoRef,
+          "onLoadeddata": onVideoLoaded,
+          "onPlay": () => playing.value = true,
+          "onPause": () => playing.value = false,
+          "onWaiting": () => waiting.value = true,
+          "onPlaying": () => waiting.value = false,
+          "onClick": onVideoClick,
+          "onDblclick": onDoubleClick,
+          "onTouchend": onTouchend
+        }), [slots.sources?.() ?? vue.createElementVNode("source", {
+          "src": props.src,
+          "type": props.type
+        }, null)]), props.variant === 'player' && !props.hideOverlay && vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "pause-overlay",
+          "modelValue": state.value === 'loaded',
+          "opacity": "0"
+        }, overlayProps), {
+          default: () => [vue.createVNode(VSpacer, null, null), vue.createVNode(MaybeTransition, {
+            "name": "fade-transition"
+          }, {
+            default: () => [!playing.value && overlayPlayIcon]
+          }), vue.createVNode(VSpacer, null, null)]
+        }), props.variant === 'player' && !!slots.header ? vue.createElementVNode("div", {
+          "key": "header",
+          "class": "v-video__header"
+        }, [slots.header()]) : '', vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "poster-overlay",
+          "modelValue": state.value !== 'loaded',
+          "transition": posterTransition
+        }, overlayProps), {
+          default: () => [vue.createVNode(VImg, {
+            "cover": true,
+            "src": props.image
+          }, {
+            default: () => [vue.createElementVNode("div", {
+              "class": vue.normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
+            }, [overlayPlayIcon])]
+          })]
+        }), vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "loading-overlay",
+          "modelValue": state.value === 'loading' || waiting.value,
+          "opacity": ".1"
+        }, overlayProps), {
+          default: () => [loadingIndicator]
+        })]), vue.createVNode(MaybeTransition, {
+          "key": "actions",
+          "transition": props.controlsTransition
+        }, {
+          default: () => [showControls && vue.createVNode(VVideoControls, vue.mergeProps({
+            "ref": controlsRef,
+            "class": roundedControlsClasses.value
+          }, controlsProps, controlsEventHandlers), {
+            default: slots.controls,
+            prepend: slots.prepend,
+            append: slots.append
+          })]
+        })]);
+      });
+      return {
+        video: videoRef,
+        ...forwardRefs({
+          skipTo,
+          toggleFullscreen
+        }, controlsRef)
+      };
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -33312,6 +34791,9 @@
     VParallax: VParallax,
     VPicker: VPicker,
     VPickerTitle: VPickerTitle,
+    VPie: VPie,
+    VPieSegment: VPieSegment,
+    VPieTooltip: VPieTooltip,
     VProgressCircular: VProgressCircular,
     VProgressLinear: VProgressLinear,
     VPullToRefresh: VPullToRefresh,
@@ -33376,6 +34858,9 @@
     VTreeviewGroup: VTreeviewGroup,
     VTreeviewItem: VTreeviewItem,
     VValidation: VValidation,
+    VVideo: VVideo,
+    VVideoControls: VVideoControls,
+    VVideoVolume: VVideoVolume,
     VVirtualScroll: VVirtualScroll,
     VWindow: VWindow,
     VWindowItem: VWindowItem
@@ -33501,92 +34986,6 @@
     updated
   };
 
-  // Utilities
-
-  // Types
-
-  function useDirectiveComponent(component, props) {
-    const concreteComponent = typeof component === 'string' ? vue.resolveComponent(component) : component;
-    const hook = mountComponent(concreteComponent, props);
-    return {
-      mounted: hook,
-      updated: hook,
-      unmounted(el) {
-        vue.render(null, el);
-      }
-    };
-  }
-  function mountComponent(component, props) {
-    return function (el, binding, vnode) {
-      const _props = typeof props === 'function' ? props(binding) : props;
-      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
-      const children = () => text ?? el.textContent;
-
-      // If vnode.ctx is the same as the instance, then we're bound to a plain element
-      // and need to find the nearest parent component instance to inherit provides from
-      const provides = (vnode.ctx === binding.instance.$ ? findComponentParent(vnode, binding.instance.$)?.provides : vnode.ctx?.provides) ?? binding.instance.$.provides;
-      const node = vue.h(component, vue.mergeProps(_props, value), children);
-      node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
-        provides
-      });
-      vue.render(node, el);
-    };
-  }
-  function findComponentParent(vnode, root) {
-    // Walk the tree from root until we find the child vnode
-    const stack = new Set();
-    const walk = children => {
-      for (const child of children) {
-        if (!child) continue;
-        if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
-          return true;
-        }
-        stack.add(child);
-        let result;
-        if (child.suspense) {
-          result = walk([child.ssContent]);
-        } else if (Array.isArray(child.children)) {
-          result = walk(child.children);
-        } else if (child.component?.vnode) {
-          result = walk([child.component?.subTree]);
-        }
-        if (result) {
-          return result;
-        }
-        stack.delete(child);
-      }
-      return false;
-    };
-    if (!walk([root.subTree])) {
-      consoleError('Could not find original vnode, component will not inherit provides');
-      return root;
-    }
-
-    // Return the first component parent
-    const result = Array.from(stack).reverse();
-    for (const child of result) {
-      if (child.component) {
-        return child.component;
-      }
-    }
-    return root;
-  }
-
-  // Components
-
-  // Types
-
-  const Tooltip = useDirectiveComponent(VTooltip, binding => {
-    return {
-      activator: 'parent',
-      location: binding.arg?.replace('-', ' '),
-      text: typeof binding.value === 'boolean' ? undefined : binding.value
-    };
-  });
-
   var directives = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ClickOutside: ClickOutside,
@@ -33698,7 +35097,7 @@
       };
     });
   }
-  const version$1 = "3.9.2-master.2025-07-23";
+  const version$1 = "3.9.2-master.2025-07-25";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -33996,7 +35395,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.2-master.2025-07-23";
+  const version = "3.9.2-master.2025-07-25";
 
   /* eslint-disable local-rules/sort-imports */