vuetify 3.9.5 → 3.9.7

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.5
+* Vuetify v3.9.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -3497,14 +3497,14 @@ function useRounded(props) {
     const rounded = isRef(props) ? props.value : props.rounded;
     const tile = 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;
   });
@@ -5364,7 +5364,6 @@ const VProgressLinear = genericComponent()({
     const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
     const isReversed = computed(() => isRtl.value !== props.reverse);
     const transition = 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 {
@@ -5413,13 +5412,13 @@ const VProgressLinear = genericComponent()({
           '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
         }
       }, null), createElementVNode("div", {
-        "class": normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
+        "class": normalizeClass(['v-progress-linear__background', backgroundColorClasses.value]),
         "style": normalizeStyle([backgroundColorStyles.value, {
           opacity: parseFloat(props.bgOpacity),
           width: props.stream ? 0 : undefined
         }])
       }, null), createElementVNode("div", {
-        "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
+        "class": normalizeClass(['v-progress-linear__buffer', bufferColorClasses.value]),
         "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
           width: convertToUnit(normalizedBuffer.value, '%')
@@ -5428,7 +5427,7 @@ const VProgressLinear = genericComponent()({
         "name": transition.value
       }, {
         default: () => [!props.indeterminate ? createElementVNode("div", {
-          "class": normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "class": normalizeClass(['v-progress-linear__determinate', barColorClasses.value]),
           "style": normalizeStyle([barColorStyles.value, {
             width: convertToUnit(normalizedValue.value, '%')
           }])
@@ -5436,7 +5435,7 @@ const VProgressLinear = genericComponent()({
           "class": "v-progress-linear__indeterminate"
         }, [['long', 'short'].map(bar => createElementVNode("div", {
           "key": bar,
-          "class": normalizeClass(['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined]),
+          "class": normalizeClass(['v-progress-linear__indeterminate', bar, barColorClasses.value]),
           "style": normalizeStyle(barColorStyles.value)
         }, null))])]
       }), slots.default && createElementVNode("div", {
@@ -8208,6 +8207,7 @@ const VSlideGroup = genericComponent()({
       select: group.select,
       isSelected: group.isSelected
     }));
+    const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0);
     const hasAffixes = computed(() => {
       switch (props.showArrows) {
         // Always show arrows on desktop & mobile
@@ -8221,17 +8221,17 @@ const VSlideGroup = genericComponent()({
         // 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 = computed(() => {
@@ -8239,7 +8239,7 @@ const VSlideGroup = genericComponent()({
       return Math.abs(scrollOffset.value) > 1;
     });
     const hasNext = 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;
@@ -9236,7 +9236,7 @@ const useNested = props => {
   function getPath(id) {
     const path = [];
     let parent = toRaw(id);
-    while (parent != null) {
+    while (parent !== undefined) {
       path.unshift(parent);
       parent = parents.value.get(parent);
     }
@@ -9382,7 +9382,10 @@ const useNested = props => {
 const useNestedItem = (id, isDisabled, isGroup) => {
   const parent = inject$1(VNestedSymbol, emptyNested);
   const uidSymbol = Symbol('nested item');
-  const computedId = computed(() => toRaw(toValue(id)) ?? uidSymbol);
+  const computedId = computed(() => {
+    const idValue = toRaw(toValue(id));
+    return idValue !== undefined ? idValue : uidSymbol;
+  });
   const item = {
     ...parent,
     id: computedId,
@@ -12542,7 +12545,7 @@ const VTextField = genericComponent()({
             "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,
@@ -13593,11 +13596,13 @@ function filterItems(items, query, options) {
     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];
@@ -13618,7 +13623,7 @@ function filterItems(items, query, options) {
       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,
@@ -15292,7 +15297,7 @@ function mounted$3(el, binding) {
   };
   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;
@@ -15303,7 +15308,7 @@ function mounted$3(el, binding) {
 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]);
@@ -23316,6 +23321,9 @@ const makeVDatePickerYearsProps = propsFactory({
 const VDatePickerYears = genericComponent()({
   name: 'VDatePickerYears',
   props: makeVDatePickerYearsProps(),
+  directives: {
+    vIntersect: Intersect
+  },
   emits: {
     'update:modelValue': year => true
   },
@@ -23352,10 +23360,12 @@ const VDatePickerYears = genericComponent()({
       model.value = model.value ?? adapter.getYear(adapter.date());
     });
     const yearRef = templateRef();
-    onMounted(async () => {
-      await 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);
@@ -23365,7 +23375,7 @@ const VDatePickerYears = genericComponent()({
       }
       return true;
     }
-    useRender(() => createElementVNode("div", {
+    useRender(() => withDirectives(createElementVNode("div", {
       "class": "v-date-picker-years",
       "style": {
         height: convertToUnit(props.height)
@@ -23396,7 +23406,11 @@ const VDatePickerYears = genericComponent()({
       }) ?? createVNode(VBtn, mergeProps({
         "key": "month"
       }, btnProps), null);
-    })])]));
+    })])]), [[Intersect, {
+      handler: focusSelectedYear
+    }, null, {
+      once: true
+    }]]));
     return {};
   }
 });
@@ -23537,6 +23551,12 @@ const VDatePicker = genericComponent()({
       }
       return targets;
     });
+    const allowedYears = computed(() => {
+      return props.allowedYears || isYearAllowed;
+    });
+    const allowedMonths = computed(() => {
+      return props.allowedMonths || isMonthAllowed;
+    });
     function isAllowedInRange(start, end) {
       const allowedDates = props.allowedDates;
       if (typeof allowedDates !== 'function') return true;
@@ -23546,7 +23566,7 @@ const VDatePicker = genericComponent()({
       }
       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));
@@ -23559,7 +23579,7 @@ const VDatePicker = genericComponent()({
       }
       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`);
@@ -23687,7 +23707,7 @@ const VDatePicker = genericComponent()({
             "min": minDate.value,
             "max": maxDate.value,
             "year": year.value,
-            "allowedMonths": allowedMonths
+            "allowedMonths": allowedMonths.value
           }), {
             month: slots.month
           }) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
@@ -23697,7 +23717,7 @@ const VDatePicker = genericComponent()({
             "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value,
-            "allowedYears": allowedYears
+            "allowedYears": allowedYears.value
           }), {
             year: slots.year
           }) : createVNode(VDatePickerMonth, mergeProps({
@@ -24432,7 +24452,10 @@ const VFileInput = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = VField.filterProps(props);
+      const fieldProps = {
+        ...VField.filterProps(props),
+        'onClick:clear': onClear
+      };
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": props.multiple ? model.value : model.value[0],
@@ -24463,7 +24486,6 @@ const VFileInput = genericComponent()({
             "prependIcon": props.prependIcon,
             "onMousedown": onControlMousedown,
             "onClick": onControlClick,
-            "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
@@ -26154,7 +26176,6 @@ const VNumberInput = genericComponent()({
           "aria-hidden": "true",
           "data-testid": "increment",
           "disabled": !canIncrease.value,
-          "flat": true,
           "height": controlNodeDefaultHeight.value,
           "icon": incrementIcon.value,
           "key": "increment-btn",
@@ -26163,16 +26184,17 @@ const VNumberInput = genericComponent()({
           "onPointerup": onControlMouseup,
           "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
+          "variant": "text",
           "tabindex": "-1"
         }, null) : 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'
             }
           }
         }, {
@@ -26184,7 +26206,6 @@ const VNumberInput = genericComponent()({
           "aria-hidden": "true",
           "data-testid": "decrement",
           "disabled": !canDecrease.value,
-          "flat": true,
           "height": controlNodeDefaultHeight.value,
           "icon": decrementIcon.value,
           "key": "decrement-btn",
@@ -26193,16 +26214,17 @@ const VNumberInput = genericComponent()({
           "onPointerup": onControlMouseup,
           "onPointercancel": onControlMouseup,
           "size": controlNodeSize.value,
+          "variant": "text",
           "tabindex": "-1"
         }, null) : 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'
             }
           }
         }, {
@@ -26338,6 +26360,7 @@ const VOtpInput = genericComponent()({
     const contentRef = ref();
     const inputRef = ref([]);
     const current = computed(() => inputRef.value[focusIndex.value]);
+    let _isComposing = false;
     useToggleScope(() => props.autofocus, () => {
       const intersectScope = effectScope();
       intersectScope.run(() => {
@@ -26362,6 +26385,7 @@ const VOtpInput = genericComponent()({
         current.value.value = '';
         return;
       }
+      if (_isComposing) return;
       const array = model.value.slice();
       const value = current.value.value;
       array[focusIndex.value] = value;
@@ -26374,6 +26398,10 @@ const VOtpInput = genericComponent()({
       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;
@@ -26408,7 +26436,7 @@ const VOtpInput = genericComponent()({
       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 = [];
@@ -26438,7 +26466,6 @@ const VOtpInput = genericComponent()({
     });
     watch(model, val => {
       if (val.length === length.value) {
-        focusIndex.value = length.value - 1;
         emit('finish', val.join(''));
       }
     }, {
@@ -26487,6 +26514,8 @@ const VOtpInput = genericComponent()({
             "onFocus": e => onFocus(e, i),
             "onBlur": onBlur,
             "onKeydown": onKeydown,
+            "onCompositionstart": () => _isComposing = true,
+            "onCompositionend": onCompositionend,
             "onPaste": event => onPaste(i, event)
           }, null);
         }
@@ -27711,7 +27740,7 @@ const VBarline = genericComponent()({
       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) => {
@@ -27742,7 +27771,7 @@ const VBarline = genericComponent()({
       return labels;
     });
     const bars = computed(() => genBars(items.value, boundary.value));
-    const offsetX = computed(() => (Math.abs(bars.value[0].x - bars.value[1].x) - lineWidth.value) / 2);
+    const offsetX = 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 = computed(() => typeof props.smooth === 'boolean' ? props.smooth ? 2 : 0 : Number(props.smooth));
     useRender(() => {
       const gradientData = !props.gradient.slice().length ? [''] : props.gradient.slice().reverse();
@@ -27893,6 +27922,9 @@ const VTrendline = genericComponent()({
         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);
@@ -29207,7 +29239,10 @@ const VTextarea = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = VField.filterProps(props);
+      const fieldProps = {
+        ...VField.filterProps(props),
+        'onClick:clear': onClear
+      };
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": model.value,
@@ -29243,7 +29278,6 @@ const VTextarea = genericComponent()({
             },
             "onClick": onControlClick,
             "onMousedown": onControlMousedown,
-            "onClick:clear": onClear,
             "onClick:prependInner": props['onClick:prependInner'],
             "onClick:appendInner": props['onClick:appendInner']
           }, fieldProps, {
@@ -31831,6 +31865,7 @@ const VDateInput = genericComponent()({
     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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
@@ -31893,6 +31928,7 @@ const VDateInput = genericComponent()({
                 "onUpdate:modelValue": value => onUpdateModel(value),
                 "onMousedown": e => e.preventDefault()
               }), {
+                ...datePickerSlots,
                 actions: !props.hideActions ? () => slots.actions?.({
                   save,
                   cancel,
@@ -32327,7 +32363,7 @@ const VIconBtn = genericComponent()({
       const iconProps = {
         icon,
         size: iconSize.value,
-        iconColor: props.iconColor,
+        color: props.iconColor,
         opacity: props.opacity
       };
       return createVNode(props.tag, {
@@ -32782,6 +32818,7 @@ function useInnerSlicePath(_ref2) {
 // Types
 
 const makeVPieSegmentProps = propsFactory({
+  active: Boolean,
   rotate: [Number, String],
   value: {
     type: Number,
@@ -32806,8 +32843,11 @@ const makeVPieSegmentProps = propsFactory({
 const VPieSegment = genericComponent()({
   name: 'VPieSegment',
   props: makeVPieSegmentProps(),
+  emits: {
+    'update:active': val => true
+  },
   setup(props) {
-    const isHovering = shallowRef(false);
+    const isActive = useProxiedModel(props, 'active');
     const {
       state: revealState,
       duration: revealDuration
@@ -32828,12 +32868,12 @@ const VPieSegment = genericComponent()({
       outerX,
       outerY,
       arcWidth
-    } = usePieArc(props, isHovering);
+    } = usePieArc(props, isActive);
     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 arcRadius = toRef(() => 50 * (isActive.value ? 1 : 1 - hoverZoomRatio.value));
     const currentArcRadius = useTransition(arcRadius, transitionConfig);
     const currentArcWidth = useTransition(arcWidth, transitionConfig);
     const outerSlicePath = useOuterSlicePath({
@@ -32872,8 +32912,8 @@ const VPieSegment = genericComponent()({
       "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)]);
   }
 });
@@ -32882,6 +32922,7 @@ const VPieSegment = genericComponent()({
 
 const makeVPieTooltipProps = propsFactory({
   modelValue: Boolean,
+  target: Object,
   item: {
     type: Object,
     default: null
@@ -32904,25 +32945,6 @@ const VPieTooltip = genericComponent()({
     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);
     });
@@ -32932,7 +32954,7 @@ const VPieTooltip = genericComponent()({
     return () => createVNode(VTooltip, {
       "offset": props.offset,
       "modelValue": props.modelValue,
-      "target": target.value,
+      "target": props.target,
       "contentClass": "v-pie__tooltip-content"
     }, {
       default: () => [!!props.item && (slots.default?.({
@@ -33000,6 +33022,9 @@ const makeVPieProps = propsFactory({
 }, 'VPie');
 const VPie = genericComponent()({
   name: 'VPie',
+  directives: {
+    vClickOutside: ClickOutside
+  },
   props: makeVPieProps(),
   setup(props, _ref) {
     let {
@@ -33051,7 +33076,7 @@ const VPie = genericComponent()({
     const visibleItems = 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
         };
@@ -33077,11 +33102,11 @@ const VPie = genericComponent()({
       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];
@@ -33089,24 +33114,55 @@ const VPie = genericComponent()({
     }
     const tooltipItem = shallowRef(null);
     const tooltipVisible = shallowRef(false);
+    const tooltipTarget = 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']);
@@ -33120,7 +33176,8 @@ const VPie = genericComponent()({
         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: {
@@ -33138,10 +33195,10 @@ const VPie = genericComponent()({
           size: typeof props.tooltip === 'object' ? props.tooltip.avatarSize : 28
         }
       };
-      const avatarSlot = _ref2 => {
+      const avatarSlot = _ref4 => {
         let {
           item
-        } = _ref2;
+        } = _ref4;
         return createVNode(VAvatar, {
           "color": item.color,
           "start": true
@@ -33172,18 +33229,24 @@ const VPie = genericComponent()({
       }, [createElementVNode("div", {
         "class": normalizeClass(['v-pie__content-underlay', colorClasses.value]),
         "style": normalizeStyle(colorStyles.value)
-      }, null), createElementVNode("svg", {
+      }, null), withDirectives(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) => createVNode(VPieSegment, 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))]), createElementVNode("div", {
+        "onUpdate:active": val => setItemActive(item, val),
+        "onTouchend": () => setItemActive(item, true)
+      }), null))]), [[ClickOutside, {
+        handler: onSvgClickOutside
+      }]]), createElementVNode("div", {
         "class": "v-pie__center-content",
         "style": {
           transform: `translate(-50%, -50%)
@@ -33199,7 +33262,7 @@ const VPie = genericComponent()({
         default: () => [createElementVNode("div", {
           "class": "v-pie__legend"
         }, [slots.legend?.({
-          isActive,
+          isActive: isVisible,
           toggle,
           items: arcs.value,
           total: total.value
@@ -34679,11 +34742,6 @@ const VVideo = genericComponent()({
     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,
@@ -34719,8 +34777,14 @@ const VVideo = genericComponent()({
         "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 createElementVNode("div", {
         "ref": containerRef,
         "class": normalizeClass(['v-video', `v-video--variant-${props.variant}`, `v-video--${state.value}`, {
@@ -34754,39 +34818,31 @@ const VVideo = genericComponent()({
       }), [slots.sources?.() ?? createElementVNode("source", {
         "src": props.src,
         "type": props.type
-      }, null)]), props.variant === 'player' && !props.hideOverlay && createVNode(VOverlay, mergeProps({
-        "key": "pause-overlay",
-        "modelValue": state.value === 'loaded',
-        "opacity": "0"
-      }, overlayProps), {
-        default: () => [createVNode(VSpacer, null, null), createVNode(MaybeTransition, {
-          "name": "fade-transition"
-        }, {
-          default: () => [!playing.value && overlayPlayIcon]
-        }), createVNode(VSpacer, null, null)]
-      }), props.variant === 'player' && !!slots.header ? createElementVNode("div", {
+      }, null)]), createVNode(Transition, {
+        "name": "fade-transition"
+      }, {
+        default: () => [activeOverlays.playIcon && createElementVNode("div", {
+          "class": "v-video__overlay-fill"
+        }, [overlayPlayIcon])]
+      }), props.variant === 'player' && !!slots.header && createElementVNode("div", {
         "key": "header",
         "class": "v-video__header"
-      }, [slots.header()]) : '', createVNode(VOverlay, mergeProps({
-        "key": "poster-overlay",
-        "modelValue": state.value !== 'loaded',
+      }, [slots.header()]), createVNode(MaybeTransition, {
         "transition": posterTransition
-      }, overlayProps), {
-        default: () => [createVNode(VImg, {
+      }, {
+        default: () => [activeOverlays.poster && createElementVNode("div", {
+          "class": "v-video__overlay-fill"
+        }, [createVNode(VImg, {
           "cover": true,
           "src": props.image
         }, {
           default: () => [createElementVNode("div", {
             "class": normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
           }, [props.variant === 'player' && overlayPlayIcon])]
-        })]
-      }), props.variant === 'player' && createVNode(VOverlay, mergeProps({
-        "key": "loading-overlay",
-        "modelValue": state.value === 'loading' || waiting.value,
-        "opacity": ".1"
-      }, overlayProps), {
-        default: () => [loadingIndicator]
-      })]), createVNode(MaybeTransition, {
+        })])]
+      }), activeOverlays.loading && createElementVNode("div", {
+        "class": "v-video__overlay-fill"
+      }, [loadingIndicator])]), createVNode(MaybeTransition, {
         "key": "actions",
         "transition": props.controlsTransition
       }, {
@@ -35242,7 +35298,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -35540,7 +35596,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.5";
+const version = "3.9.7";
 
 /* eslint-disable local-rules/sort-imports */