vuetify 3.9.5 → 3.9.7

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.5
+* Vuetify v3.9.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3501,14 +3501,14 @@
       const rounded = vue.isRef(props) ? props.value : props.rounded;
       const tile = vue.isRef(props) ? props.value : props.tile;
       const classes = [];
-      if (rounded === true || rounded === '') {
+      if (tile || rounded === false) {
+        classes.push('rounded-0');
+      } else if (rounded === true || rounded === '') {
         classes.push(`${name}--rounded`);
       } else if (typeof rounded === 'string' || rounded === 0) {
         for (const value of String(rounded).split(' ')) {
           classes.push(`rounded-${value}`);
         }
-      } else if (tile || rounded === false) {
-        classes.push('rounded-0');
       }
       return classes;
     });
@@ -5368,7 +5368,6 @@
       const normalizedValue = vue.computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
       const isReversed = vue.computed(() => isRtl.value !== props.reverse);
       const transition = vue.computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
-      const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
       function handleClick(e) {
         if (!intersectionRef.value) return;
         const {
@@ -5417,13 +5416,13 @@
             '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
           }
         }, null), vue.createElementVNode("div", {
-          "class": vue.normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+          "class": vue.normalizeClass(['v-progress-linear__background', backgroundColorClasses.value]),
           "style": vue.normalizeStyle([backgroundColorStyles.value, {
             opacity: parseFloat(props.bgOpacity),
             width: props.stream ? 0 : undefined
           }])
         }, null), vue.createElementVNode("div", {
-          "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+          "class": vue.normalizeClass(['v-progress-linear__buffer', bufferColorClasses.value]),
           "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
             width: convertToUnit(normalizedBuffer.value, '%')
@@ -5432,7 +5431,7 @@
           "name": transition.value
         }, {
           default: () => [!props.indeterminate ? vue.createElementVNode("div", {
-            "class": vue.normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "class": vue.normalizeClass(['v-progress-linear__determinate', barColorClasses.value]),
             "style": vue.normalizeStyle([barColorStyles.value, {
               width: convertToUnit(normalizedValue.value, '%')
             }])
@@ -5440,7 +5439,7 @@
             "class": "v-progress-linear__indeterminate"
           }, [['long', 'short'].map(bar => vue.createElementVNode("div", {
             "key": bar,
-            "class": vue.normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+            "class": vue.normalizeClass(['v-progress-linear__indeterminate', bar, barColorClasses.value]),
             "style": vue.normalizeStyle(barColorStyles.value)
           }, null))])]
         }), slots.default && vue.createElementVNode("div", {
@@ -8212,6 +8211,7 @@
         select: group.select,
         isSelected: group.isSelected
       }));
+      const hasOverflowOrScroll = vue.computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
       const hasAffixes = vue.computed(() => {
         switch (props.showArrows) {
           // Always show arrows on desktop & mobile
@@ -8225,17 +8225,17 @@
           // Show arrows on mobile when overflowing.
           // This matches the default 2.2 behavior
           case true:
-            return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+            return hasOverflowOrScroll.value;
 
           // Always show on mobile
           case 'mobile':
-            return mobile.value || isOverflowing.value || Math.abs(scrollOffset.value) > 0;
+            return mobile.value || hasOverflowOrScroll.value;
 
           // https://material.io/components/tabs#scrollable-tabs
           // Always show arrows when
           // overflowed on desktop
           default:
-            return !mobile.value && (isOverflowing.value || Math.abs(scrollOffset.value) > 0);
+            return !mobile.value && hasOverflowOrScroll.value;
         }
       });
       const hasPrev = vue.computed(() => {
@@ -8243,7 +8243,7 @@
         return Math.abs(scrollOffset.value) > 1;
       });
       const hasNext = vue.computed(() => {
-        if (!containerRef.value) return false;
+        if (!containerRef.value || !hasOverflowOrScroll.value) return false;
         const scrollSize = getScrollSize(isHorizontal.value, containerRef.el);
         const clientSize = getClientSize(isHorizontal.value, containerRef.el);
         const scrollSizeMax = scrollSize - clientSize;
@@ -9240,7 +9240,7 @@
     function getPath(id) {
       const path = [];
       let parent = vue.toRaw(id);
-      while (parent != null) {
+      while (parent !== undefined) {
         path.unshift(parent);
         parent = parents.value.get(parent);
       }
@@ -9386,7 +9386,10 @@
   const useNestedItem = (id, isDisabled, isGroup) => {
     const parent = vue.inject(VNestedSymbol, emptyNested);
     const uidSymbol = Symbol('nested item');
-    const computedId = vue.computed(() => vue.toRaw(vue.toValue(id)) ?? uidSymbol);
+    const computedId = vue.computed(() => {
+      const idValue = vue.toRaw(vue.toValue(id));
+      return idValue !== undefined ? idValue : uidSymbol;
+    });
     const item = {
       ...parent,
       id: computedId,
@@ -12546,7 +12549,7 @@
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner'],
               "role": props.role
-            }, fieldProps, {
+            }, omit(fieldProps, ['onClick:clear']), {
               "id": id.value,
               "active": isActive.value || isDirty.value,
               "dirty": isDirty.value || props.dirty,
@@ -13597,11 +13600,13 @@
       const defaultMatches = {};
       let match = -1;
       if ((query || customFiltersLength > 0) && !options?.noFilter) {
+        let hasOnlyCustomFilters = false;
         if (typeof item === 'object') {
           if (item.type === 'divider' || item.type === 'subheader') {
             continue;
           }
           const filterKeys = keys || Object.keys(transformed);
+          hasOnlyCustomFilters = filterKeys.length === customFiltersLength;
           for (const key of filterKeys) {
             const value = getPropertyFromItem(transformed, key);
             const keyFilter = options?.customKeyFilter?.[key];
@@ -13622,7 +13627,7 @@
         const customMatchesLength = Object.keys(customMatches).length;
         if (!defaultMatchesLength && !customMatchesLength) continue;
         if (options?.filterMode === 'union' && customMatchesLength !== customFiltersLength && !defaultMatchesLength) continue;
-        if (options?.filterMode === 'intersection' && (customMatchesLength !== customFiltersLength || !defaultMatchesLength)) continue;
+        if (options?.filterMode === 'intersection' && (customMatchesLength !== customFiltersLength || !defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters)) continue;
       }
       array.push({
         index: i,
@@ -15296,7 +15301,7 @@
     };
     const uid = binding.instance?.$.uid; // TODO: use custom uid generator
 
-    if (!target || !uid) return;
+    if (!target || uid === undefined) return;
     const handlers = createHandlers(binding.value);
     target._touchHandlers = target._touchHandlers ?? Object.create(null);
     target._touchHandlers[uid] = handlers;
@@ -15307,7 +15312,7 @@
   function unmounted$3(el, binding) {
     const target = binding.value?.parent ? el.parentElement : el;
     const uid = binding.instance?.$.uid;
-    if (!target?._touchHandlers || !uid) return;
+    if (!target?._touchHandlers || uid === undefined) return;
     const handlers = target._touchHandlers[uid];
     keys(handlers).forEach(eventName => {
       target.removeEventListener(eventName, handlers[eventName]);
@@ -23320,6 +23325,9 @@
   const VDatePickerYears = genericComponent()({
     name: 'VDatePickerYears',
     props: makeVDatePickerYearsProps(),
+    directives: {
+      vIntersect: Intersect
+    },
     emits: {
       'update:modelValue': year => true
     },
@@ -23356,10 +23364,12 @@
         model.value = model.value ?? adapter.getYear(adapter.date());
       });
       const yearRef = templateRef();
-      vue.onMounted(async () => {
-        await vue.nextTick();
+      function focusSelectedYear() {
         yearRef.el?.focus();
-      });
+        yearRef.el?.scrollIntoView({
+          block: 'center'
+        });
+      }
       function isYearAllowed(year) {
         if (Array.isArray(props.allowedYears) && props.allowedYears.length) {
           return props.allowedYears.includes(year);
@@ -23369,7 +23379,7 @@
         }
         return true;
       }
-      useRender(() => vue.createElementVNode("div", {
+      useRender(() => vue.withDirectives(vue.createElementVNode("div", {
         "class": "v-date-picker-years",
         "style": {
           height: convertToUnit(props.height)
@@ -23400,7 +23410,11 @@
         }) ?? vue.createVNode(VBtn, vue.mergeProps({
           "key": "month"
         }, btnProps), null);
-      })])]));
+      })])]), [[Intersect, {
+        handler: focusSelectedYear
+      }, null, {
+        once: true
+      }]]));
       return {};
     }
   });
@@ -23541,6 +23555,12 @@
         }
         return targets;
       });
+      const allowedYears = vue.computed(() => {
+        return props.allowedYears || isYearAllowed;
+      });
+      const allowedMonths = vue.computed(() => {
+        return props.allowedMonths || isMonthAllowed;
+      });
       function isAllowedInRange(start, end) {
         const allowedDates = props.allowedDates;
         if (typeof allowedDates !== 'function') return true;
@@ -23550,7 +23570,7 @@
         }
         return false;
       }
-      function allowedYears(year) {
+      function isYearAllowed(year) {
         if (typeof props.allowedDates === 'function') {
           const startOfYear = adapter.parseISO(`${year}-01-01`);
           return isAllowedInRange(startOfYear, adapter.endOfYear(startOfYear));
@@ -23563,7 +23583,7 @@
         }
         return true;
       }
-      function allowedMonths(month) {
+      function isMonthAllowed(month) {
         if (typeof props.allowedDates === 'function') {
           const monthTwoDigits = String(month + 1).padStart(2, '0');
           const startOfMonth = adapter.parseISO(`${year.value}-${monthTwoDigits}-01`);
@@ -23691,7 +23711,7 @@
               "min": minDate.value,
               "max": maxDate.value,
               "year": year.value,
-              "allowedMonths": allowedMonths
+              "allowedMonths": allowedMonths.value
             }), {
               month: slots.month
             }) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
@@ -23701,7 +23721,7 @@
               "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
               "min": minDate.value,
               "max": maxDate.value,
-              "allowedYears": allowedYears
+              "allowedYears": allowedYears.value
             }), {
               year: slots.year
             }) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
@@ -24436,7 +24456,10 @@
           modelValue: _,
           ...inputProps
         } = VInput.filterProps(props);
-        const fieldProps = VField.filterProps(props);
+        const fieldProps = {
+          ...VField.filterProps(props),
+          'onClick:clear': onClear
+        };
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": props.multiple ? model.value : model.value[0],
@@ -24467,7 +24490,6 @@
               "prependIcon": props.prependIcon,
               "onMousedown": onControlMousedown,
               "onClick": onControlClick,
-              "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
@@ -26158,7 +26180,6 @@
             "aria-hidden": "true",
             "data-testid": "increment",
             "disabled": !canIncrease.value,
-            "flat": true,
             "height": controlNodeDefaultHeight.value,
             "icon": incrementIcon.value,
             "key": "increment-btn",
@@ -26167,16 +26188,17 @@
             "onPointerup": onControlMouseup,
             "onPointercancel": onControlMouseup,
             "size": controlNodeSize.value,
+            "variant": "text",
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "increment-defaults",
             "defaults": {
               VBtn: {
                 disabled: !canIncrease.value,
-                flat: true,
                 height: controlNodeDefaultHeight.value,
                 size: controlNodeSize.value,
-                icon: incrementIcon.value
+                icon: incrementIcon.value,
+                variant: 'text'
               }
             }
           }, {
@@ -26188,7 +26210,6 @@
             "aria-hidden": "true",
             "data-testid": "decrement",
             "disabled": !canDecrease.value,
-            "flat": true,
             "height": controlNodeDefaultHeight.value,
             "icon": decrementIcon.value,
             "key": "decrement-btn",
@@ -26197,16 +26218,17 @@
             "onPointerup": onControlMouseup,
             "onPointercancel": onControlMouseup,
             "size": controlNodeSize.value,
+            "variant": "text",
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "decrement-defaults",
             "defaults": {
               VBtn: {
                 disabled: !canDecrease.value,
-                flat: true,
                 height: controlNodeDefaultHeight.value,
                 size: controlNodeSize.value,
-                icon: decrementIcon.value
+                icon: decrementIcon.value,
+                variant: 'text'
               }
             }
           }, {
@@ -26342,6 +26364,7 @@
       const contentRef = vue.ref();
       const inputRef = vue.ref([]);
       const current = vue.computed(() => inputRef.value[focusIndex.value]);
+      let _isComposing = false;
       useToggleScope(() => props.autofocus, () => {
         const intersectScope = vue.effectScope();
         intersectScope.run(() => {
@@ -26366,6 +26389,7 @@
           current.value.value = '';
           return;
         }
+        if (_isComposing) return;
         const array = model.value.slice();
         const value = current.value.value;
         array[focusIndex.value] = value;
@@ -26378,6 +26402,10 @@
         model.value = array;
         if (target) focusChild(contentRef.value, target);
       }
+      function onCompositionend() {
+        _isComposing = false;
+        onInput();
+      }
       function onKeydown(e) {
         const array = model.value.slice();
         const index = focusIndex.value;
@@ -26412,7 +26440,7 @@
         const finalIndex = clipboardText.length - 1 === -1 ? index : clipboardText.length - 1;
         if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
-        inputRef.value?.[finalIndex].focus();
+        focusIndex.value = finalIndex;
       }
       function reset() {
         model.value = [];
@@ -26442,7 +26470,6 @@
       });
       vue.watch(model, val => {
         if (val.length === length.value) {
-          focusIndex.value = length.value - 1;
           emit('finish', val.join(''));
         }
       }, {
@@ -26491,6 +26518,8 @@
               "onFocus": e => onFocus(e, i),
               "onBlur": onBlur,
               "onKeydown": onKeydown,
+              "onCompositionstart": () => _isComposing = true,
+              "onCompositionend": onCompositionend,
               "onPaste": event => onPaste(i, event)
             }, null);
           }
@@ -27715,7 +27744,7 @@
         let minValue = props.min != null ? Number(props.min) : Math.min(...values);
         if (minValue > 0 && props.min == null) minValue = 0;
         if (maxValue < 0 && props.max == null) maxValue = 0;
-        const gridX = maxX / totalValues;
+        const gridX = maxX / (totalValues === 1 ? 2 : totalValues);
         const gridY = (maxY - minY) / (maxValue - minValue || 1);
         const horizonY = maxY - Math.abs(minValue * gridY);
         return values.map((value, index) => {
@@ -27746,7 +27775,7 @@
         return labels;
       });
       const bars = vue.computed(() => genBars(items.value, boundary.value));
-      const offsetX = vue.computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+      const offsetX = vue.computed(() => bars.value.length === 1 ? (boundary.value.maxX - lineWidth.value) / 2 : (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
       const smooth = vue.computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
       useRender(() => {
         const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
@@ -27897,6 +27926,9 @@
           minY,
           maxY
         } = boundary;
+        if (values.length === 1) {
+          values = [values[0], values[0]];
+        }
         const totalValues = values.length;
         const maxValue = props.max != null ? Number(props.max) : Math.max(...values);
         const minValue = props.min != null ? Number(props.min) : Math.min(...values);
@@ -29211,7 +29243,10 @@
           modelValue: _,
           ...inputProps
         } = VInput.filterProps(props);
-        const fieldProps = VField.filterProps(props);
+        const fieldProps = {
+          ...VField.filterProps(props),
+          'onClick:clear': onClear
+        };
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": model.value,
@@ -29247,7 +29282,6 @@
               },
               "onClick": onControlClick,
               "onMousedown": onControlMousedown,
-              "onClick:clear": onClear,
               "onClick:prependInner": props['onClick:prependInner'],
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
@@ -31835,6 +31869,7 @@
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
         const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
+        const datePickerSlots = pick(slots, ['title', 'header', 'day', 'month', 'year']);
         const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
@@ -31897,6 +31932,7 @@
                   "onUpdate:modelValue": value => onUpdateModel(value),
                   "onMousedown": e => e.preventDefault()
                 }), {
+                  ...datePickerSlots,
                   actions: !props.hideActions ? () => slots.actions?.({
                     save,
                     cancel,
@@ -32331,7 +32367,7 @@
         const iconProps = {
           icon,
           size: iconSize.value,
-          iconColor: props.iconColor,
+          color: props.iconColor,
           opacity: props.opacity
         };
         return vue.createVNode(props.tag, {
@@ -32786,6 +32822,7 @@
   // Types
 
   const makeVPieSegmentProps = propsFactory({
+    active: Boolean,
     rotate: [Number, String],
     value: {
       type: Number,
@@ -32810,8 +32847,11 @@
   const VPieSegment = genericComponent()({
     name: 'VPieSegment',
     props: makeVPieSegmentProps(),
+    emits: {
+      'update:active': val => true
+    },
     setup(props) {
-      const isHovering = vue.shallowRef(false);
+      const isActive = useProxiedModel(props, 'active');
       const {
         state: revealState,
         duration: revealDuration
@@ -32832,12 +32872,12 @@
         outerX,
         outerY,
         arcWidth
-      } = usePieArc(props, isHovering);
+      } = usePieArc(props, isActive);
       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 arcRadius = vue.toRef(() => 50 * (isActive.value ? 1 : 1 - hoverZoomRatio.value));
       const currentArcRadius = useTransition(arcRadius, transitionConfig);
       const currentArcWidth = useTransition(arcWidth, transitionConfig);
       const outerSlicePath = useOuterSlicePath({
@@ -32876,8 +32916,8 @@
         "transform": `rotate(${currentAngle.value} 50 50)`,
         "class": "v-pie-segment__overlay",
         "d": overlayPath.value,
-        "onMouseenter": () => isHovering.value = true,
-        "onMouseleave": () => isHovering.value = false
+        "onMouseenter": () => isActive.value = true,
+        "onMouseleave": () => isActive.value = false
       }, null)]);
     }
   });
@@ -32886,6 +32926,7 @@
 
   const makeVPieTooltipProps = propsFactory({
     modelValue: Boolean,
+    target: Object,
     item: {
       type: Object,
       default: null
@@ -32908,25 +32949,6 @@
       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);
       });
@@ -32936,7 +32958,7 @@
       return () => vue.createVNode(VTooltip, {
         "offset": props.offset,
         "modelValue": props.modelValue,
-        "target": target.value,
+        "target": props.target,
         "contentClass": "v-pie__tooltip-content"
       }, {
         default: () => [!!props.item && (slots.default?.({
@@ -33004,6 +33026,9 @@
   }, 'VPie');
   const VPie = genericComponent()({
     name: 'VPie',
+    directives: {
+      vClickOutside: ClickOutside
+    },
     props: makeVPieProps(),
     setup(props, _ref) {
       let {
@@ -33055,7 +33080,7 @@
       const visibleItems = vue.computed(() => {
         // hidden items get (value: 0) to trigger disappearing animation
         return arcs.value.map(item => {
-          return isActive(item) ? item : {
+          return isVisible(item) ? item : {
             ...item,
             value: 0
           };
@@ -33081,11 +33106,11 @@
         const paletteItem = props.palette[index % props.palette.length];
         return typeof paletteItem === 'object' ? paletteItem.pattern : undefined;
       }
-      function isActive(item) {
+      function isVisible(item) {
         return visibleItemsKeys.value.includes(item.key);
       }
       function toggle(item) {
-        if (isActive(item)) {
+        if (isVisible(item)) {
           visibleItemsKeys.value = visibleItemsKeys.value.filter(x => x !== item.key);
         } else {
           visibleItemsKeys.value = [...visibleItemsKeys.value, item.key];
@@ -33093,24 +33118,55 @@
       }
       const tooltipItem = vue.shallowRef(null);
       const tooltipVisible = vue.shallowRef(false);
+      const tooltipTarget = vue.shallowRef([0, 0]);
       let mouseLeaveTimeout = null;
-      function onMouseenter(item) {
-        if (!props.tooltip) return;
-        clearTimeout(mouseLeaveTimeout);
-        tooltipVisible.value = true;
-        tooltipItem.value = item;
+      function setItemActive(item, active) {
+        arcs.value.forEach(a => a.isActive = a.key === item.key && active);
+        if (props.tooltip) {
+          setTooltip(item, active);
+        }
       }
-      function onMouseleave() {
-        if (!props.tooltip) return;
+      function setTooltip(item, active) {
         clearTimeout(mouseLeaveTimeout);
-        mouseLeaveTimeout = setTimeout(() => {
-          tooltipVisible.value = false;
-
-          // intentionally reusing timeout here
+        if (active) {
+          tooltipVisible.value = true;
+          tooltipItem.value = item;
+        } else {
           mouseLeaveTimeout = setTimeout(() => {
-            tooltipItem.value = null;
-          }, 500);
-        }, 100);
+            tooltipVisible.value = false;
+
+            // intentionally reusing timeout here
+            mouseLeaveTimeout = setTimeout(() => {
+              tooltipItem.value = null;
+            }, 500);
+          }, 100);
+        }
+      }
+      let frame = -1;
+      function onSvgMousemove(_ref2) {
+        let {
+          clientX,
+          clientY
+        } = _ref2;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          tooltipTarget.value = [clientX, clientY];
+        });
+      }
+      function onSvgTouchstart(_ref3) {
+        let {
+          touches
+        } = _ref3;
+        if (!touches) return;
+        const {
+          clientX,
+          clientY
+        } = touches[0];
+        tooltipTarget.value = [clientX, clientY];
+      }
+      function onSvgClickOutside() {
+        arcs.value.forEach(a => a.isActive = false);
+        tooltipVisible.value = false;
       }
       return () => {
         const segmentProps = pick(props, ['animation', 'gap', 'rounded', 'hideSlice', 'reveal', 'innerCut', 'hoverScale']);
@@ -33124,7 +33180,8 @@
           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
+          offset: typeof props.tooltip === 'object' ? props.tooltip.offset : 16,
+          target: tooltipTarget.value
         };
         const legendDefaults = {
           VChipGroup: {
@@ -33142,10 +33199,10 @@
             size: typeof props.tooltip === 'object' ? props.tooltip.avatarSize : 28
           }
         };
-        const avatarSlot = _ref2 => {
+        const avatarSlot = _ref4 => {
           let {
             item
-          } = _ref2;
+          } = _ref4;
           return vue.createVNode(VAvatar, {
             "color": item.color,
             "start": true
@@ -33176,18 +33233,24 @@
         }, [vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-pie__content-underlay', colorClasses.value]),
           "style": vue.normalizeStyle(colorStyles.value)
-        }, null), vue.createElementVNode("svg", {
+        }, null), vue.withDirectives(vue.createElementVNode("svg", {
           "xmlns": "http://www.w3.org/2000/svg",
-          "viewBox": "0 0 100 100"
+          "viewBox": "0 0 100 100",
+          "class": "v-pie__segments",
+          "onMousemove": onSvgMousemove,
+          "onTouchstart": onSvgTouchstart
         }, [arcs.value.map((item, index) => vue.createVNode(VPieSegment, vue.mergeProps(segmentProps, {
           "key": item.key,
+          "active": item.isActive,
           "color": item.color,
-          "value": isActive(item) ? arcSize(item.value) : 0,
+          "value": isVisible(item) ? arcSize(item.value) : 0,
           "rotate": arcOffset(index),
           "pattern": item.pattern,
-          "onMouseenter": () => onMouseenter(item),
-          "onMouseleave": () => onMouseleave()
-        }), null))]), vue.createElementVNode("div", {
+          "onUpdate:active": val => setItemActive(item, val),
+          "onTouchend": () => setItemActive(item, true)
+        }), null))]), [[ClickOutside, {
+          handler: onSvgClickOutside
+        }]]), vue.createElementVNode("div", {
           "class": "v-pie__center-content",
           "style": {
             transform: `translate(-50%, -50%)
@@ -33203,7 +33266,7 @@
           default: () => [vue.createElementVNode("div", {
             "class": "v-pie__legend"
           }, [slots.legend?.({
-            isActive,
+            isActive: isVisible,
             toggle,
             items: arcs.value,
             total: total.value
@@ -34683,11 +34746,6 @@
       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,
@@ -34723,8 +34781,14 @@
           "color": "#fff",
           "variant": "outlined",
           "iconSize": "50",
-          "class": "v-video__center-icon"
+          "class": "v-video__center-icon",
+          "onClick": onVideoClick
         }, null);
+        const activeOverlays = {
+          playIcon: props.variant === 'player' && state.value === 'loaded' && !props.hideOverlay && !playing.value,
+          poster: state.value !== 'loaded',
+          loading: props.variant === 'player' && (state.value === 'loading' || waiting.value)
+        };
         return vue.createElementVNode("div", {
           "ref": containerRef,
           "class": vue.normalizeClass(['v-video', `v-video--variant-${props.variant}`, `v-video--${state.value}`, {
@@ -34758,39 +34822,31 @@
         }), [slots.sources?.() ?? vue.createElementVNode("source", {
           "src": props.src,
           "type": props.type
-        }, null)]), props.variant === 'player' && !props.hideOverlay && vue.createVNode(VOverlay, vue.mergeProps({
-          "key": "pause-overlay",
-          "modelValue": state.value === 'loaded',
-          "opacity": "0"
-        }, overlayProps), {
-          default: () => [vue.createVNode(VSpacer, null, null), vue.createVNode(MaybeTransition, {
-            "name": "fade-transition"
-          }, {
-            default: () => [!playing.value && overlayPlayIcon]
-          }), vue.createVNode(VSpacer, null, null)]
-        }), props.variant === 'player' && !!slots.header ? vue.createElementVNode("div", {
+        }, null)]), vue.createVNode(vue.Transition, {
+          "name": "fade-transition"
+        }, {
+          default: () => [activeOverlays.playIcon && vue.createElementVNode("div", {
+            "class": "v-video__overlay-fill"
+          }, [overlayPlayIcon])]
+        }), props.variant === 'player' && !!slots.header && vue.createElementVNode("div", {
           "key": "header",
           "class": "v-video__header"
-        }, [slots.header()]) : '', vue.createVNode(VOverlay, vue.mergeProps({
-          "key": "poster-overlay",
-          "modelValue": state.value !== 'loaded',
+        }, [slots.header()]), vue.createVNode(MaybeTransition, {
           "transition": posterTransition
-        }, overlayProps), {
-          default: () => [vue.createVNode(VImg, {
+        }, {
+          default: () => [activeOverlays.poster && vue.createElementVNode("div", {
+            "class": "v-video__overlay-fill"
+          }, [vue.createVNode(VImg, {
             "cover": true,
             "src": props.image
           }, {
             default: () => [vue.createElementVNode("div", {
               "class": vue.normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
             }, [props.variant === 'player' && overlayPlayIcon])]
-          })]
-        }), props.variant === 'player' && vue.createVNode(VOverlay, vue.mergeProps({
-          "key": "loading-overlay",
-          "modelValue": state.value === 'loading' || waiting.value,
-          "opacity": ".1"
-        }, overlayProps), {
-          default: () => [loadingIndicator]
-        })]), vue.createVNode(MaybeTransition, {
+          })])]
+        }), activeOverlays.loading && vue.createElementVNode("div", {
+          "class": "v-video__overlay-fill"
+        }, [loadingIndicator])]), vue.createVNode(MaybeTransition, {
           "key": "actions",
           "transition": props.controlsTransition
         }, {
@@ -35246,7 +35302,7 @@
       };
     });
   }
-  const version$1 = "3.9.5";
+  const version$1 = "3.9.7";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -35544,7 +35600,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.5";
+  const version = "3.9.7";
 
   /* eslint-disable local-rules/sort-imports */