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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, toValue, watch, onBeforeUnmount, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1562,10 +1562,64 @@ function attachedRoot(node) {
   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 = shallowRef(toValue(source));
+  watch(() => toValue(source), async to => {
+    cancelAnimationFrame(raf);
+    const easing = {
+      ...defaultTransition,
+      ...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 computed(() => outputRef.value);
+}
+
 // Utilities
 function getPrefixedEventHandlers(attrs, suffix, getData) {
   return Object.keys(attrs).filter(key => isOn(key) && key.endsWith(suffix)).reduce((acc, key) => {
@@ -1656,6 +1710,10 @@ function useRender(render) {
   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
@@ -2176,6 +2234,17 @@ var en = {
     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'
   }
 };
 
@@ -4258,7 +4327,7 @@ function useDensity(props) {
 
 // Types
 
-const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
+const allowedVariants$4 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
 function genOverlays(isClickable, name) {
   return createElementVNode(Fragment, null, [isClickable && createElementVNode("span", {
     "key": "overlay",
@@ -4273,7 +4342,7 @@ const makeVariantProps = propsFactory({
   variant: {
     type: String,
     default: 'elevated',
-    validator: v => allowedVariants$2.includes(v)
+    validator: v => allowedVariants$4.includes(v)
   }
 }, 'variant');
 function useVariant(props) {
@@ -4697,7 +4766,15 @@ const aliases = {
   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 (?)
@@ -7666,21 +7743,7 @@ function genDefaults() {
     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) {
@@ -10517,11 +10580,23 @@ function connectedLocationStrategy(data, props, contentStyles) {
     const result = updateLocation();
     if (result) flipped.push(result.flipped);
   });
-  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
+  });
+  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
+  });
+  watch(data.contentEl, (newContentEl, oldContentEl) => {
     if (oldContentEl) observer.unobserve(oldContentEl);
     if (newContentEl) observer.observe(newContentEl);
   }, {
@@ -10530,12 +10605,6 @@ function connectedLocationStrategy(data, props, contentStyles) {
   onScopeDispose(() => {
     observer.disconnect();
   });
-  let targetBox = new Box({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
 
   // eslint-disable-next-line max-statements
   function updateLocation() {
@@ -10827,11 +10896,12 @@ function closeScrollStrategy(data) {
   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) {
@@ -10878,7 +10948,7 @@ function repositionScrollStrategy(data, props, scope) {
   }
   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.
@@ -10903,7 +10973,8 @@ function repositionScrollStrategy(data, props, scope) {
 }
 
 /** @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, {
@@ -11585,6 +11656,7 @@ const VOverlay = genericComponent()({
       root,
       contentEl,
       targetEl,
+      target,
       isActive,
       updateLocation
     });
@@ -11980,7 +12052,7 @@ const VFieldLabel = genericComponent()({
 
 // 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,
@@ -12014,7 +12086,7 @@ const makeVFieldProps = propsFactory({
   variant: {
     type: String,
     default: 'filled',
-    validator: v => allowedVariants$1.includes(v)
+    validator: v => allowedVariants$3.includes(v)
   },
   'onClick:clear': EventProp(),
   'onClick:appendInner': EventProp(),
@@ -16176,6 +16248,7 @@ const makeSliderProps = propsFactory({
     validator: v => ['vertical', 'horizontal'].includes(v)
   },
   reverse: Boolean,
+  noKeyboard: Boolean,
   ...makeRoundedProps(),
   ...makeElevationProps({
     elevation: 2
@@ -16379,6 +16452,7 @@ const useSlider = _ref => {
     min,
     max,
     mousePressed,
+    noKeyboard: toRef(() => props.noKeyboard),
     numTicks,
     onSliderMousedown,
     onSliderTouchstart,
@@ -16431,6 +16505,7 @@ const makeVSliderThumbProps = propsFactory({
     default: true
   },
   name: String,
+  noKeyboard: Boolean,
   ...makeComponentProps()
 }, 'VSliderThumb');
 const VSliderThumb = genericComponent()({
@@ -16493,6 +16568,7 @@ const VSliderThumb = genericComponent()({
       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;
@@ -16728,7 +16804,8 @@ const VSlider = genericComponent()({
       trackContainerRef,
       position,
       hasLabels,
-      readonly
+      readonly,
+      noKeyboard
     } = useSlider({
       props,
       steps,
@@ -16804,6 +16881,7 @@ const VSlider = genericComponent()({
             "ref": thumbContainerRef,
             "aria-describedby": messagesId.value,
             "focused": isFocused.value,
+            "noKeyboard": noKeyboard.value,
             "min": min.value,
             "max": max.value,
             "modelValue": model.value,
@@ -23880,7 +23958,7 @@ const VExpansionPanel = genericComponent()({
 
 // Types
 
-const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+const allowedVariants$2 = ['default', 'accordion', 'inset', 'popout'];
 const makeVExpansionPanelsProps = propsFactory({
   flat: Boolean,
   ...makeGroupProps(),
@@ -23891,7 +23969,7 @@ const makeVExpansionPanelsProps = propsFactory({
   variant: {
     type: String,
     default: 'default',
-    validator: v => allowedVariants.includes(v)
+    validator: v => allowedVariants$2.includes(v)
   }
 }, 'VExpansionPanels');
 const VExpansionPanels = genericComponent()({
@@ -32423,6 +32501,614 @@ const VMaskInput = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
+// Types
+
+// Composables
+const makeRevealProps = propsFactory({
+  reveal: {
+    type: [Boolean, Object],
+    default: false
+  }
+}, 'reveal');
+function useReveal(props) {
+  const defaultDuration = 900;
+  const duration = toRef(() => typeof props.reveal === 'object' ? Math.max(0, Number(props.reveal.duration ?? defaultDuration)) : defaultDuration);
+  const state = shallowRef(props.reveal ? 'initial' : 'disabled');
+  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 = toRef(() => clamp(Number(props.hoverScale ?? 0), 0, 0.25));
+  const normalizedValue = toRef(() => clamp(props.value - 100 * Number(props.gap ?? 0) / 360, 0.01, 99.99));
+  const normalizedInnerCut = toRef(() => {
+    const min = Number(props.rounded ?? 0) > 0 ? 0.2 : 0;
+    return clamp(Number(props.innerCut ?? 0) / 100, min, 1);
+  });
+  const radians = computed(() => (360 * (-normalizedValue.value / 100) + 90) * (Math.PI / 180));
+  const arcWidth = computed(() => 50 * (1 - normalizedInnerCut.value) * (isHovering.value ? 1 : 1 - hoverZoomRatio.value));
+  const outerX = toRef(() => 50 + 50 * Math.cos(radians.value));
+  const outerY = 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 computed(() => roundedArc([50, 50], toValue(radius), toValue(angle), toValue(angle) + 360 * toValue(size) / 100,
+  // angle end,
+  toValue(width), toValue(rounded)));
+}
+function useInnerSlicePath(_ref2) {
+  let {
+    angle,
+    radius,
+    size
+  } = _ref2;
+  return computed(() => simpleArc([50, 50], toValue(radius), toValue(angle), toValue(angle) + 360 * 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 = shallowRef(false);
+    const {
+      state: revealState,
+      duration: revealDuration
+    } = useReveal(props);
+    const transitionConfig = 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 = toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value);
+    const currentArcSize = useTransition(arcSize, transitionConfig);
+    const angle = toRef(() => revealState.value === 'initial' ? 0 : Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2);
+    const currentAngle = useTransition(angle, transitionConfig);
+    const arcRadius = 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 = toRef(() => `M 50 0 A 50 50 0 ${normalizedValue.value > 50 ? 1 : 0} 1 ${outerX.value} ${outerY.value} L 50 50`);
+    return () => createElementVNode("g", {
+      "class": "v-pie-segment",
+      "style": {
+        color: props.color
+      }
+    }, [createElementVNode("path", {
+      "key": "outer-slice",
+      "fill": "currentColor",
+      "shape-rendering": "geometricPrecision",
+      "d": outerSlicePath.value
+    }, null), props.pattern && createElementVNode("path", {
+      "key": "pattern-overlay",
+      "shape-rendering": "geometricPrecision",
+      "fill": props.pattern,
+      "d": outerSlicePath.value
+    }, null), !props.hideSlice && normalizedInnerCut.value > 0 && createElementVNode("path", {
+      "key": "inner-slice",
+      "fill": "oklch(from currentColor l c h / calc(alpha / 2))",
+      "d": innerSlicePath.value
+    }, null), ['disabled', 'done'].includes(revealState.value) && 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 = 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];
+      });
+    }
+    onMounted(() => {
+      vm.proxy.$el.parentNode.addEventListener('mousemove', onMouseMove);
+    });
+    onBeforeUnmount(() => {
+      vm.proxy.$el.parentNode.removeEventListener('mousemove', onMouseMove);
+    });
+    const tooltipTitleFormatFunction = toRef(() => segment => {
+      return typeof props.titleFormat === 'function' ? props.titleFormat(segment) : formatTextTemplate(props.titleFormat, segment);
+    });
+    const tooltipSubtitleFormatFunction = toRef(() => segment => {
+      return typeof props.subtitleFormat === 'function' ? props.subtitleFormat(segment) : formatTextTemplate(props.subtitleFormat, segment);
+    });
+    return () => createVNode(VTooltip, {
+      "offset": props.offset,
+      "modelValue": props.modelValue,
+      "target": target.value,
+      "contentClass": "v-pie__tooltip-content"
+    }, {
+      default: () => [!!props.item && (slots.default?.({
+        item: props.item
+      }) ?? createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "mode": "out-in"
+      }, {
+        default: () => [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 = computed(() => ({
+      visible: !!props.legend,
+      position: 'bottom',
+      textFormat: '[title]',
+      ...(typeof props.legend === 'object' ? props.legend : {})
+    }));
+    const {
+      colorClasses,
+      colorStyles
+    } = useColor(() => ({
+      background: props.bgColor
+    }));
+    const textColorStyles = toRef(() => pick(colorStyles.value, ['color', 'caretColor']));
+    const legendAvatarSize = toRef(() => ({
+      default: 20,
+      comfortable: 18,
+      compact: 16
+    })[props.density ?? 'default']);
+    const legendDirection = toRef(() => ['left', 'right'].includes(legendConfig.value.position) ? 'vertical' : 'horizontal');
+    const legendMode = toRef(() => !legendConfig.value.visible ? 'hidden' : legendConfig.value.position);
+    const legendTextFormatFunction = toRef(() => item => {
+      return typeof legendConfig.value.textFormat === 'function' ? legendConfig.value.textFormat(item) : formatTextTemplate(legendConfig.value.textFormat, item);
+    });
+    const arcs = 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 = shallowRef([]);
+    watch(() => arcs.value.length, () => {
+      // reset when number of items changes
+      visibleItemsKeys.value = arcs.value.map(a => a.key);
+    }, {
+      immediate: true
+    });
+    const visibleItems = computed(() => {
+      // hidden items get (value: 0) to trigger disappearing animation
+      return arcs.value.map(item => {
+        return isActive(item) ? item : {
+          ...item,
+          value: 0
+        };
+      });
+    });
+    const total = computed(() => visibleItems.value.reduce((sum, item) => sum + item.value, 0));
+    const gaugeCut = toRef(() => Number(props.gaugeCut ?? 0));
+    const gaugeOffset = computed(() => (1 - Math.cos(Math.PI * Math.min(90, gaugeCut.value / 2) / 180)) / 2);
+    const rotateDeg = 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 = shallowRef(null);
+    const tooltipVisible = 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 createVNode(VAvatar, {
+          "color": item.color,
+          "start": true
+        }, {
+          default: () => [item.pattern && createElementVNode("svg", {
+            "height": "40",
+            "width": "40"
+          }, [createElementVNode("rect", {
+            "width": "40",
+            "height": "40",
+            "fill": item.pattern
+          }, null)])]
+        });
+      };
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-pie', `v-pie--legend-${legendMode.value}`]),
+        "style": {
+          '--v-pie-size': convertToUnit(props.size)
+        }
+      }, [slots.title?.() ?? (props.title && createElementVNode("div", {
+        "class": "v-pie__title"
+      }, [props.title])), createElementVNode("div", {
+        "class": normalizeClass(['v-pie__content', colorClasses.value]),
+        "style": normalizeStyle([{
+          transform: `rotate(${rotateDeg.value})`,
+          marginBottom: `calc(-1 * ${convertToUnit(props.size)} * ${gaugeOffset.value})`
+        }, textColorStyles.value])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-pie__content-underlay', colorClasses.value]),
+        "style": normalizeStyle(colorStyles.value)
+      }, null), createElementVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 100 100"
+      }, [arcs.value.map((item, index) => createVNode(VPieSegment, 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))]), createElementVNode("div", {
+        "class": "v-pie__center-content",
+        "style": {
+          transform: `translate(-50%, -50%)
+                  rotate(-${rotateDeg.value})
+                  translateY(calc(-100% * ${gaugeOffset.value}))`
+        }
+      }, [createElementVNode("div", null, [slots.center?.({
+        total: total.value
+      })])])]), legendConfig.value.visible && createVNode(VDefaultsProvider, {
+        "key": "legend",
+        "defaults": legendDefaults
+      }, {
+        default: () => [createElementVNode("div", {
+          "class": "v-pie__legend"
+        }, [slots.legend?.({
+          isActive,
+          toggle,
+          items: arcs.value
+        }) ?? createVNode(VChipGroup, {
+          "column": true,
+          "multiple": true,
+          "modelValue": visibleItemsKeys.value,
+          "onUpdate:modelValue": $event => visibleItemsKeys.value = $event
+        }, {
+          default: () => [arcs.value.map(item => createVNode(VChip, {
+            "value": item.key
+          }, {
+            prepend: () => avatarSlot({
+              item
+            }),
+            default: () => createElementVNode("div", {
+              "class": "v-pie__legend__text"
+            }, [slots['legend-text']?.({
+              item
+            }) ?? legendTextFormatFunction.value(item)])
+          }))]
+        })])]
+      }), !!props.tooltip && createVNode(VDefaultsProvider, {
+        "defaults": tooltipDefaults
+      }, {
+        default: () => [createVNode(VPieTooltip, tooltipProps, {
+          default: slots.tooltip,
+          prepend: avatarSlot
+        })]
+      })]);
+    };
+  }
+});
+
 // Types
 
 const makeVStepperVerticalActionsProps = propsFactory({
@@ -33182,6 +33868,799 @@ const VHotkey = genericComponent()({
   }
 });
 
+// Utilities
+
+// Types
+
+function useDirectiveComponent(component, props) {
+  const concreteComponent = typeof component === 'string' ? resolveComponent(component) : component;
+  const hook = mountComponent(concreteComponent, props);
+  return {
+    mounted: hook,
+    updated: hook,
+    unmounted(el) {
+      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 = h(component, mergeProps(_props, value), children);
+    node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
+      provides
+    });
+    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 = toRef(() => volume.value > 70 ? '$volumeHigh' : volume.value > 40 ? '$volumeMedium' : volume.value > 10 ? '$volumeLow' : '$volumeOff');
+    const containerRef = ref();
+    useRender(() => {
+      const sliderDefaults = {
+        hideDetails: true,
+        step: 5,
+        thumbSize: 16
+      };
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-video-volume', {
+          'v-video-volume--inline': props.inline
+        }, props.class]),
+        "style": normalizeStyle(props.style),
+        "ref": containerRef
+      }, [withDirectives(createVNode(VIconBtn, mergeProps({
+        "icon": volumeIcon.value,
+        "aria-label": props.label,
+        "onClick": props.onClick
+      }, attrs), {
+        default: () => [createVNode(VIcon, null, null), !props.inline && createVNode(VMenu, {
+          "offset": "8",
+          "activator": "parent",
+          "attach": containerRef.value,
+          "location": props.menuProps?.location ?? 'top center',
+          "closeOnContentClick": false
+        }, {
+          default: () => [createElementVNode("div", {
+            "class": normalizeClass(['v-video-volume__menu', `v-video-volume__menu--${props.direction}`])
+          }, [createVNode(VSlider, 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 && createVNode(VSlider, 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 = shallowRef();
+    const currentTime = 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 = 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 createElementVNode("div", {
+        "class": 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": normalizeStyle([backgroundColorStyles.value, {
+          '--v-video-controls-pill-height': `${regularBtnSize}px`
+        }])
+      }, [createVNode(VDefaultsProvider, {
+        "defaults": innerDefaults
+      }, {
+        default: () => [slots.default?.(slotProps) ?? createElementVNode(Fragment, null, [props.variant !== 'mini' && createElementVNode(Fragment, null, [!props.hidePlay && createElementVNode("div", {
+          "class": normalizeClass([pillClasses, 'v-video__action-play'])
+        }, [withDirectives(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 && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [slots.prepend(slotProps)]), props.splitTime ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.elapsed]) : props.variant !== 'default' ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.elapsed, createTextVNode(" / "), currentTime.value.total]) : '', 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' && createVNode(VSpacer, null, null), props.splitTime ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && createElementVNode(Fragment, null, [createVNode(VSpacer, null, null), slots.prepend && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [slots.prepend(slotProps)]), !props.hidePlay && createElementVNode("div", {
+          "class": normalizeClass([pillClasses, 'v-video__action-play'])
+        }, [withDirectives(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) && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [!props.hideVolume && createVNode(VVideoVolume, 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 && withDirectives(createVNode(VIconBtn, {
+          "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
+          "aria-label": labels.value.fullscreenAction,
+          "onClick": toggleFullscreen
+        }, null), [[Tooltip, labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && 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 = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded);
+    const roundedForControls = toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false);
+    const {
+      roundedClasses: roundedContainerClasses
+    } = useRounded(roundedForContainer);
+    const {
+      roundedClasses: roundedControlsClasses
+    } = useRounded(roundedForControls);
+    const containerRef = ref();
+    const videoRef = ref();
+    const controlsRef = ref();
+    const playing = useProxiedModel(props, 'playing');
+    const progress = useProxiedModel(props, 'progress');
+    const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+    const fullscreen = shallowRef(false);
+    const waiting = shallowRef(false);
+    const triggered = shallowRef(false);
+    const startAfterLoad = shallowRef(false);
+    const state = shallowRef(props.autoplay ? 'loading' : 'idle');
+    const duration = shallowRef(0);
+    const fullscreenEnabled = 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 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;
+    }
+    watch(() => props.src, v => {
+      progress.value = 0;
+    });
+    watch(playing, v => {
+      if (!videoRef.value) return;
+      if (v) {
+        videoRef.value.play();
+      } else {
+        videoRef.value.pause();
+      }
+    });
+    watch(volume, v => {
+      if (!videoRef.value) return;
+      videoRef.value.volume = v / 100;
+    });
+    watch(triggered, () => onTriggered(), {
+      once: true
+    });
+    watch(() => props.eager, v => v && (triggered.value = true), {
+      immediate: true
+    });
+    onMounted(() => {
+      if (props.autoplay && !ssr) {
+        triggered.value = true;
+        startAfterLoad.value = true;
+      }
+    });
+    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 = createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "color": props.color,
+        "width": "3",
+        "size": Math.min(100, Number(props.height) / 2 || 50)
+      }, null);
+      const overlayPlayIcon = createVNode(VIconBtn, {
+        "icon": "$play",
+        "size": "80",
+        "color": "#fff",
+        "variant": "outlined",
+        "iconSize": "50",
+        "class": "v-video__center-icon"
+      }, null);
+      return createElementVNode("div", {
+        "ref": containerRef,
+        "class": 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": normalizeStyle([props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']), props.style]),
+        "onKeydown": onKeydown,
+        "onClick": onClick
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-video__content', elevationClasses.value]),
+        "style": normalizeStyle([props.variant === 'background' ? [] : dimensionStyles.value])
+      }, [(props.eager || triggered.value) && createElementVNode("video", 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?.() ?? createElementVNode("source", {
+        "src": props.src,
+        "type": props.type
+      }, null)]), props.variant === 'player' && !props.hideOverlay && createVNode(VOverlay, mergeProps({
+        "key": "pause-overlay",
+        "modelValue": state.value === 'loaded',
+        "opacity": "0"
+      }, overlayProps), {
+        default: () => [createVNode(VSpacer, null, null), createVNode(MaybeTransition, {
+          "name": "fade-transition"
+        }, {
+          default: () => [!playing.value && overlayPlayIcon]
+        }), createVNode(VSpacer, null, null)]
+      }), props.variant === 'player' && !!slots.header ? createElementVNode("div", {
+        "key": "header",
+        "class": "v-video__header"
+      }, [slots.header()]) : '', createVNode(VOverlay, mergeProps({
+        "key": "poster-overlay",
+        "modelValue": state.value !== 'loaded',
+        "transition": posterTransition
+      }, overlayProps), {
+        default: () => [createVNode(VImg, {
+          "cover": true,
+          "src": props.image
+        }, {
+          default: () => [createElementVNode("div", {
+            "class": normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
+          }, [overlayPlayIcon])]
+        })]
+      }), createVNode(VOverlay, mergeProps({
+        "key": "loading-overlay",
+        "modelValue": state.value === 'loading' || waiting.value,
+        "opacity": ".1"
+      }, overlayProps), {
+        default: () => [loadingIndicator]
+      })]), createVNode(MaybeTransition, {
+        "key": "actions",
+        "transition": props.controlsTransition
+      }, {
+        default: () => [showControls && createVNode(VVideoControls, 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,
@@ -33308,6 +34787,9 @@ var components = /*#__PURE__*/Object.freeze({
   VParallax: VParallax,
   VPicker: VPicker,
   VPickerTitle: VPickerTitle,
+  VPie: VPie,
+  VPieSegment: VPieSegment,
+  VPieTooltip: VPieTooltip,
   VProgressCircular: VProgressCircular,
   VProgressLinear: VProgressLinear,
   VPullToRefresh: VPullToRefresh,
@@ -33372,6 +34854,9 @@ var components = /*#__PURE__*/Object.freeze({
   VTreeviewGroup: VTreeviewGroup,
   VTreeviewItem: VTreeviewItem,
   VValidation: VValidation,
+  VVideo: VVideo,
+  VVideoControls: VVideoControls,
+  VVideoVolume: VVideoVolume,
   VVirtualScroll: VVirtualScroll,
   VWindow: VWindow,
   VWindowItem: VWindowItem
@@ -33497,92 +34982,6 @@ const Scroll = {
   updated
 };
 
-// Utilities
-
-// Types
-
-function useDirectiveComponent(component, props) {
-  const concreteComponent = typeof component === 'string' ? resolveComponent(component) : component;
-  const hook = mountComponent(concreteComponent, props);
-  return {
-    mounted: hook,
-    updated: hook,
-    unmounted(el) {
-      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 = h(component, mergeProps(_props, value), children);
-    node.appContext = Object.assign(Object.create(null), binding.instance.$.appContext, {
-      provides
-    });
-    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,
@@ -33694,7 +35093,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -33992,7 +35391,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */