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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-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, resolveDirective, 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) => {
@@ -7689,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) {
@@ -10540,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);
   }, {
@@ -10553,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() {
@@ -32455,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({
@@ -33214,6 +33868,92 @@ 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({
@@ -33234,6 +33974,9 @@ const makeVVideoVolumeProps = propsFactory({
 }, 'VVideoVolume');
 const VVideoVolume = genericComponent()({
   name: 'VVideoVolume',
+  directives: {
+    vTooltip: Tooltip
+  },
   props: makeVVideoVolumeProps(),
   emits: {
     'update:modelValue': val => true
@@ -33281,7 +34024,7 @@ const VVideoVolume = genericComponent()({
             "onUpdate:modelValue": v => volume.value = v
           }, sliderDefaults, props.sliderProps), null)])]
         })]
-      }), [[resolveDirective("tooltip"), props.label, 'top']]), props.inline && createVNode(VSlider, mergeProps({
+      }), [[Tooltip, props.label, 'top']]), props.inline && createVNode(VSlider, mergeProps({
         "class": "v-video-volume-inline__slider",
         "minWidth": "50",
         "aria-label": t('$vuetify.video.volume'),
@@ -33332,6 +34075,9 @@ const makeVVideoControlsProps = propsFactory({
 }, 'VVideoControls');
 const VVideoControls = genericComponent()({
   name: 'VVideoControls',
+  directives: {
+    vTooltip: Tooltip
+  },
   props: makeVVideoControlsProps(),
   emits: {
     'update:playing': val => true,
@@ -33461,7 +34207,7 @@ const VVideoControls = genericComponent()({
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
-        }, null), [[resolveDirective("tooltip"), labels.value.playAction, 'top']])]), slots.prepend && createElementVNode("div", {
+        }, 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'])
@@ -33489,7 +34235,7 @@ const VVideoControls = genericComponent()({
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
-        }, null), [[resolveDirective("tooltip"), labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && createElementVNode("div", {
+        }, 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",
@@ -33504,7 +34250,7 @@ const VVideoControls = genericComponent()({
           "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
           "aria-label": labels.value.fullscreenAction,
           "onClick": toggleFullscreen
-        }, null), [[resolveDirective("tooltip"), labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && createVNode(VSpacer, null, null)])]
+        }, null), [[Tooltip, labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && createVNode(VSpacer, null, null)])]
       })]);
     });
     return {
@@ -34041,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,
@@ -34233,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,
@@ -34430,7 +35093,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -34728,7 +35391,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */