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

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-24
+* 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) => {
@@ -7693,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) {
@@ -10544,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);
     }, {
@@ -10557,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() {
@@ -32459,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({
@@ -33218,6 +33872,92 @@
     }
   });
 
+  // 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({
@@ -33238,6 +33978,9 @@
   }, 'VVideoVolume');
   const VVideoVolume = genericComponent()({
     name: 'VVideoVolume',
+    directives: {
+      vTooltip: Tooltip
+    },
     props: makeVVideoVolumeProps(),
     emits: {
       'update:modelValue': val => true
@@ -33285,7 +34028,7 @@
               "onUpdate:modelValue": v => volume.value = v
             }, sliderDefaults, props.sliderProps), null)])]
           })]
-        }), [[vue.resolveDirective("tooltip"), props.label, 'top']]), props.inline && vue.createVNode(VSlider, vue.mergeProps({
+        }), [[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'),
@@ -33336,6 +34079,9 @@
   }, 'VVideoControls');
   const VVideoControls = genericComponent()({
     name: 'VVideoControls',
+    directives: {
+      vTooltip: Tooltip
+    },
     props: makeVVideoControlsProps(),
     emits: {
       'update:playing': val => true,
@@ -33465,7 +34211,7 @@
             "size": playBtnSize,
             "aria-label": labels.value.playAction,
             "onClick": () => playing.value = !playing.value
-          }, null), [[vue.resolveDirective("tooltip"), labels.value.playAction, 'top']])]), slots.prepend && vue.createElementVNode("div", {
+          }, 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'])
@@ -33493,7 +34239,7 @@
             "size": playBtnSize,
             "aria-label": labels.value.playAction,
             "onClick": () => playing.value = !playing.value
-          }, null), [[vue.resolveDirective("tooltip"), labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && vue.createElementVNode("div", {
+          }, 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",
@@ -33508,7 +34254,7 @@
             "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
             "aria-label": labels.value.fullscreenAction,
             "onClick": toggleFullscreen
-          }, null), [[vue.resolveDirective("tooltip"), labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && vue.createVNode(VSpacer, null, null)])]
+          }, null), [[Tooltip, labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && vue.createVNode(VSpacer, null, null)])]
         })]);
       });
       return {
@@ -34045,6 +34791,9 @@
     VParallax: VParallax,
     VPicker: VPicker,
     VPickerTitle: VPickerTitle,
+    VPie: VPie,
+    VPieSegment: VPieSegment,
+    VPieTooltip: VPieTooltip,
     VProgressCircular: VProgressCircular,
     VProgressLinear: VProgressLinear,
     VPullToRefresh: VPullToRefresh,
@@ -34237,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,
@@ -34434,7 +35097,7 @@
       };
     });
   }
-  const version$1 = "3.9.2-master.2025-07-24";
+  const version$1 = "3.9.2-master.2025-07-25";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -34732,7 +35395,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.2-master.2025-07-24";
+  const version = "3.9.2-master.2025-07-25";
 
   /* eslint-disable local-rules/sort-imports */