vuetify 3.9.3 → 3.9.5

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3
+* Vuetify v3.9.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1649,7 +1649,9 @@ function getScrollParents(el, stopAt) {
 function hasScrollbar(el) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
   const style = window.getComputedStyle(el);
-  return style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
+  const hasVerticalScrollbar = style.overflowY === 'scroll' || style.overflowY === 'auto' && el.scrollHeight > el.clientHeight;
+  const hasHorizontalScrollbar = style.overflowX === 'scroll' || style.overflowX === 'auto' && el.scrollWidth > el.clientWidth;
+  return hasVerticalScrollbar || hasHorizontalScrollbar;
 }
 function isPotentiallyScrollable(el) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
@@ -2253,6 +2255,23 @@ var en = {
     unmute: 'Unmute',
     enterFullscreen: 'Full screen',
     exitFullscreen: 'Exit full screen'
+  },
+  colorPicker: {
+    ariaLabel: {
+      eyedropper: 'Select color with eyedropper',
+      hueSlider: 'Hue',
+      alphaSlider: 'Alpha',
+      redInput: 'Red value',
+      greenInput: 'Green value',
+      blueInput: 'Blue value',
+      alphaInput: 'Alpha value',
+      hueInput: 'Hue value',
+      saturationInput: 'Saturation value',
+      lightnessInput: 'Lightness value',
+      hexInput: 'HEX value',
+      hexaInput: 'HEX with alpha value',
+      changeFormat: 'Change color format'
+    }
   }
 };
 
@@ -2851,9 +2870,7 @@ function useTheme() {
 
 const makeVAppProps = propsFactory({
   ...makeComponentProps(),
-  ...makeLayoutProps({
-    fullHeight: true
-  }),
+  ...omit(makeLayoutProps(), ['fullHeight']),
   ...makeThemeProps()
 }, 'VApp');
 const VApp = genericComponent()({
@@ -2869,7 +2886,10 @@ const VApp = genericComponent()({
       getLayoutItem,
       items,
       layoutRef
-    } = createLayout(props);
+    } = createLayout({
+      ...props,
+      fullHeight: true
+    });
     const {
       rtlClasses
     } = useRtl();
@@ -6242,7 +6262,7 @@ const VAlert = genericComponent()({
     });
     const {
       iconSize
-    } = useIconSizes(props, () => props.prominent ? 44 : 28);
+    } = useIconSizes(props, () => props.prominent ? 44 : undefined);
     const {
       themeClasses
     } = provideTheme(props);
@@ -6293,7 +6313,7 @@ const VAlert = genericComponent()({
       const iconProps = {
         density: props.density,
         icon: icon.value,
-        size: iconSize.value
+        size: props.iconSize || props.prominent ? iconSize.value : undefined
       };
       return isActive.value && createVNode(props.tag, {
         "class": normalizeClass(['v-alert', props.border && {
@@ -7076,9 +7096,14 @@ function useForm(props) {
 // Utilities
 const RulesSymbol = Symbol.for('vuetify:rules');
 function useRules(fn) {
-  const resolveRules = inject$1(RulesSymbol, null);
-  if (!resolveRules) return toRef(fn);
-  return resolveRules(fn);
+  const rules = inject$1(RulesSymbol, null);
+  if (!fn) {
+    if (!rules) {
+      throw new Error('Could not find Vuetify rules injection');
+    }
+    return rules.aliases;
+  }
+  return rules?.resolve(fn) ?? toRef(fn);
 }
 
 // Composables
@@ -10904,11 +10929,11 @@ function closeScrollStrategy(data) {
   function onScroll(e) {
     data.isActive.value = false;
   }
-  bindScroll(data.target.value ?? data.contentEl.value, onScroll);
+  bindScroll(getTargetEl(data.target.value, data.contentEl.value), onScroll);
 }
 function blockScrollStrategy(data, props) {
   const offsetParent = data.root.value?.offsetParent;
-  const target = Array.isArray(data.target.value) ? document.elementFromPoint(...data.target.value) : data.target.value;
+  const target = getTargetEl(data.target.value, data.contentEl.value);
   const scrollElements = [...new Set([...getScrollParents(target, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
   const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
   const scrollableParent = (el => hasScrollbar(el) && el)(offsetParent || document.documentElement);
@@ -10956,7 +10981,7 @@ function repositionScrollStrategy(data, props, scope) {
   }
   ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
     scope.run(() => {
-      bindScroll(data.target.value ?? data.contentEl.value, e => {
+      bindScroll(getTargetEl(data.target.value, data.contentEl.value), e => {
         if (slow) {
           // If the position calculation is slow,
           // defer updates until scrolling is finished.
@@ -10979,10 +11004,10 @@ function repositionScrollStrategy(data, props, scope) {
     cancelAnimationFrame(raf);
   });
 }
-
-/** @private */
-function bindScroll(target, onScroll) {
-  const el = Array.isArray(target) ? document.elementFromPoint(...target) : target;
+function getTargetEl(target, contentEl) {
+  return Array.isArray(target) ? document.elementsFromPoint(...target).find(el => !contentEl?.contains(el)) : target ?? contentEl;
+}
+function bindScroll(el, onScroll) {
   const scrollElements = [document, ...getScrollParents(el)];
   scrollElements.forEach(el => {
     el.addEventListener('scroll', onScroll, {
@@ -12544,6 +12569,7 @@ const VTextField = genericComponent()({
                 "name": props.name,
                 "placeholder": props.placeholder,
                 "size": 1,
+                "role": props.role,
                 "type": props.type,
                 "onFocus": focus,
                 "onBlur": blur
@@ -13319,7 +13345,7 @@ const VSelect = genericComponent()({
       return createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
-        "modelValue": model.value.map(v => v.props.value).join(', '),
+        "modelValue": model.value.map(v => v.props.title).join(', '),
         "onUpdate:modelValue": onModelUpdate,
         "focused": isFocused.value,
         "onUpdate:focused": $event => isFocused.value = $event,
@@ -15978,7 +16004,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       r: Number(v)
-    })
+    }),
+    localeKey: 'redInput'
   }, {
     label: 'G',
     max: 255,
@@ -15987,7 +16014,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       g: Number(v)
-    })
+    }),
+    localeKey: 'greenInput'
   }, {
     label: 'B',
     max: 255,
@@ -15996,7 +16024,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       b: Number(v)
-    })
+    }),
+    localeKey: 'blueInput'
   }, {
     label: 'A',
     max: 1,
@@ -16010,7 +16039,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoRGB,
   from: RGBtoHSV
@@ -16032,7 +16062,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       h: Number(v)
-    })
+    }),
+    localeKey: 'hueInput'
   }, {
     label: 'S',
     max: 1,
@@ -16041,7 +16072,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       s: Number(v)
-    })
+    }),
+    localeKey: 'saturationInput'
   }, {
     label: 'L',
     max: 1,
@@ -16050,7 +16082,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       l: Number(v)
-    })
+    }),
+    localeKey: 'lightnessInput'
   }, {
     label: 'A',
     max: 1,
@@ -16064,7 +16097,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoHSL,
   from: HSLtoHSV
@@ -16080,7 +16114,8 @@ const hexa = {
   inputs: [{
     label: 'HEXA',
     getValue: c => c,
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexaInput'
   }],
   to: HSVtoHex,
   from: HexToHSV
@@ -16090,7 +16125,8 @@ const hex = {
   inputs: [{
     label: 'HEX',
     getValue: c => c.slice(0, 7),
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexInput'
   }]
 };
 const modes = {
@@ -16139,6 +16175,9 @@ const VColorPickerEdit = defineComponent({
     let {
       emit
     } = _ref2;
+    const {
+      t
+    } = useLocale();
     const enabledModes = computed(() => {
       return props.modes.map(key => ({
         ...modes[key],
@@ -16153,11 +16192,13 @@ const VColorPickerEdit = defineComponent({
         let {
           getValue,
           getColor,
+          localeKey,
           ...inputProps
         } = _ref3;
         return {
           ...mode.inputProps,
           ...inputProps,
+          ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
           disabled: props.disabled,
           value: color && getValue(color),
           onChange: e => {
@@ -16175,6 +16216,7 @@ const VColorPickerEdit = defineComponent({
       "icon": "$unfold",
       "size": "x-small",
       "variant": "plain",
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.changeFormat'),
       "onClick": () => {
         const mi = enabledModes.value.findIndex(m => m.name === props.mode);
         emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);
@@ -16940,6 +16982,9 @@ const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const abortController = new AbortController();
     onUnmounted(() => abortController.abort());
     async function openEyeDropper() {
@@ -16965,6 +17010,7 @@ const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [createVNode(VBtn, {
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
       "density": "comfortable",
       "disabled": props.disabled,
       "icon": "$eyeDropper",
@@ -16980,6 +17026,7 @@ const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__sliders"
     }, [createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",
+      "name": t('$vuetify.colorPicker.ariaLabel.hueSlider'),
       "modelValue": props.color?.h,
       "onUpdate:modelValue": h => emit('update:color', {
         ...(props.color ?? nullColor),
@@ -16995,6 +17042,7 @@ const VColorPickerPreview = defineComponent({
       "hideDetails": true
     }, null), !props.hideAlpha && createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
+      "name": t('$vuetify.colorPicker.ariaLabel.alphaSlider'),
       "modelValue": props.color?.a ?? 1,
       "onUpdate:modelValue": a => emit('update:color', {
         ...(props.color ?? nullColor),
@@ -20859,11 +20907,16 @@ function parseFixedColumns(items) {
     if (item.fixed === true) {
       item.fixed = 'start';
     }
-    const orderedChildren = side === 'start' ? item.children?.toReversed() : item.children;
     if (item.fixed === side) {
-      if (orderedChildren) {
-        for (const child of orderedChildren) {
-          setFixed(child, side, side);
+      if (item.children) {
+        if (side === 'start') {
+          for (let i = item.children.length - 1; i >= 0; i--) {
+            setFixed(item.children[i], side, side);
+          }
+        } else {
+          for (let i = 0; i < item.children.length; i++) {
+            setFixed(item.children[i], side, side);
+          }
         }
       } else {
         if (!seenFixed && side === 'start') {
@@ -20878,57 +20931,63 @@ function parseFixedColumns(items) {
         seenFixed = true;
       }
     } else {
-      if (orderedChildren) {
-        for (const child of orderedChildren) {
-          setFixed(child, side);
+      if (item.children) {
+        if (side === 'start') {
+          for (let i = item.children.length - 1; i >= 0; i--) {
+            setFixed(item.children[i], side);
+          }
+        } else {
+          for (let i = 0; i < item.children.length; i++) {
+            setFixed(item.children[i], side);
+          }
         }
       } else {
         seenFixed = false;
       }
     }
   }
-  for (const item of items.toReversed()) {
-    setFixed(item, 'start');
+  for (let i = items.length - 1; i >= 0; i--) {
+    setFixed(items[i], 'start');
   }
-  for (const item of items) {
-    setFixed(item, 'end');
-  }
-  function setFixedOffset(item) {
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (!item) return offset;
-    if (item.children) {
-      item.fixedOffset = offset;
-      for (const child of item.children) {
-        offset = setFixedOffset(child, offset);
-      }
-    } else if (item.fixed && item.fixed !== 'end') {
-      item.fixedOffset = offset;
-      offset += parseFloat(item.width || '0') || 0;
-    }
-    return offset;
+  for (let i = 0; i < items.length; i++) {
+    setFixed(items[i], 'end');
   }
   let fixedOffset = 0;
-  for (const item of items) {
-    fixedOffset = setFixedOffset(item, fixedOffset);
+  for (let i = 0; i < items.length; i++) {
+    fixedOffset = setFixedOffset(items[i], fixedOffset);
   }
-  function setFixedEndOffset(item) {
-    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    if (!item) return offset;
-    if (item.children) {
-      item.fixedEndOffset = offset;
-      for (const child of item.children) {
-        offset = setFixedEndOffset(child, offset);
-      }
-    } else if (item.fixed === 'end') {
-      item.fixedEndOffset = offset;
-      offset += parseFloat(item.width || '0') || 0;
+  let fixedEndOffset = 0;
+  for (let i = items.length - 1; i >= 0; i--) {
+    fixedEndOffset = setFixedEndOffset(items[i], fixedEndOffset);
+  }
+}
+function setFixedOffset(item) {
+  let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!item) return offset;
+  if (item.children) {
+    item.fixedOffset = offset;
+    for (const child of item.children) {
+      offset = setFixedOffset(child, offset);
     }
-    return offset;
+  } else if (item.fixed && item.fixed !== 'end') {
+    item.fixedOffset = offset;
+    offset += parseFloat(item.width || '0') || 0;
   }
-  let fixedEndOffset = 0;
-  for (const item of items.toReversed()) {
-    fixedEndOffset = setFixedEndOffset(item, fixedEndOffset);
+  return offset;
+}
+function setFixedEndOffset(item) {
+  let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!item) return offset;
+  if (item.children) {
+    item.fixedEndOffset = offset;
+    for (const child of item.children) {
+      offset = setFixedEndOffset(child, offset);
+    }
+  } else if (item.fixed === 'end') {
+    item.fixedEndOffset = offset;
+    offset += parseFloat(item.width || '0') || 0;
   }
+  return offset;
 }
 function parse(items, maxDepth) {
   const headers = [];
@@ -21630,8 +21689,6 @@ const VDataTableRows = genericComponent()({
   }
 });
 
-// Types
-
 const makeVTableProps = propsFactory({
   fixedHeader: Boolean,
   fixedFooter: Boolean,
@@ -21661,26 +21718,37 @@ const VTable = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
-    useRender(() => createVNode(props.tag, {
-      "class": normalizeClass(['v-table', {
-        'v-table--fixed-height': !!props.height,
-        'v-table--fixed-header': props.fixedHeader,
-        'v-table--fixed-footer': props.fixedFooter,
-        'v-table--has-top': !!slots.top,
-        'v-table--has-bottom': !!slots.bottom,
-        'v-table--hover': props.hover,
-        'v-table--striped-even': props.striped === 'even',
-        'v-table--striped-odd': props.striped === 'odd'
-      }, themeClasses.value, densityClasses.value, props.class]),
-      "style": normalizeStyle(props.style)
-    }, {
-      default: () => [slots.top?.(), slots.default ? createElementVNode("div", {
-        "class": "v-table__wrapper",
-        "style": {
-          height: convertToUnit(props.height)
+    useRender(() => {
+      const tableContentDefaults = {
+        VCheckboxBtn: {
+          density: props.density
         }
-      }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
-    }));
+      };
+      return createVNode(props.tag, {
+        "class": normalizeClass(['v-table', {
+          'v-table--fixed-height': !!props.height,
+          'v-table--fixed-header': props.fixedHeader,
+          'v-table--fixed-footer': props.fixedFooter,
+          'v-table--has-top': !!slots.top,
+          'v-table--has-bottom': !!slots.bottom,
+          'v-table--hover': props.hover,
+          'v-table--striped-even': props.striped === 'even',
+          'v-table--striped-odd': props.striped === 'odd'
+        }, themeClasses.value, densityClasses.value, props.class]),
+        "style": normalizeStyle(props.style)
+      }, {
+        default: () => [slots.top?.(), createVNode(VDefaultsProvider, {
+          "defaults": tableContentDefaults
+        }, {
+          default: () => [slots.default ? createElementVNode("div", {
+            "class": "v-table__wrapper",
+            "style": {
+              height: convertToUnit(props.height)
+            }
+          }, [createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.()]
+        }), slots.bottom?.()]
+      });
+    });
     return {};
   }
 });
@@ -26013,6 +26081,7 @@ const VNumberInput = genericComponent()({
       if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
       if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault();
+        e.stopPropagation();
         clampModel();
         // _model is controlled, so need to wait until props['modelValue'] is updated
         await nextTick();
@@ -31342,12 +31411,23 @@ const VCalendar = genericComponent()({
 
 // Types
 
+const availablePipLocations = ['prepend', 'prepend-inner', 'append', 'append-inner'];
 const makeVColorInputProps = propsFactory({
-  pip: Boolean,
+  hidePip: Boolean,
+  colorPip: Boolean,
   pipIcon: {
     type: String,
     default: '$color'
   },
+  pipLocation: {
+    type: String,
+    default: 'prepend',
+    validator: v => availablePipLocations.includes(v)
+  },
+  pipVariant: {
+    type: String,
+    default: 'text'
+  },
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps(),
@@ -31391,8 +31471,15 @@ const VColorInput = genericComponent()({
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
-      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
-      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      const textFieldProps = VTextField.filterProps(props);
+      const slotWithPip = props.hidePip ? undefined : {
+        [props.pipLocation]: arg => createElementVNode(Fragment, null, [createVNode(VAvatar, {
+          "class": "v-color-input__pip",
+          "color": props.colorPip ? model.value : undefined,
+          "variant": props.pipVariant,
+          "icon": props.pipIcon
+        }, null), slots[props.pipLocation]?.(arg)])
+      };
       return createVNode(VTextField, mergeProps(textFieldProps, {
         "class": ['v-color-input', props.class],
         "style": props.style,
@@ -31408,10 +31495,7 @@ const VColorInput = genericComponent()({
         }
       }), {
         ...slots,
-        prepend: props.pipIcon ? arg => createElementVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
-          "color": props.pip ? model.value : undefined,
-          "icon": props.pipIcon
-        }, null), slots.prepend?.(arg)]) : undefined,
+        ...slotWithPip,
         default: () => createElementVNode(Fragment, null, [createVNode(VMenu, {
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
@@ -31443,8 +31527,7 @@ const VColorInput = genericComponent()({
               }
               return createVNode(VColorPicker, mergeProps(colorPickerProps, {
                 "modelValue": props.hideActions ? model.value : proxyModel.value,
-                "onUpdate:modelValue": value => onUpdateModel(value),
-                "onMousedown": e => e.preventDefault()
+                "onUpdate:modelValue": value => onUpdateModel(value)
               }), {
                 actions: !props.hideActions ? () => slots.actions?.({
                   save,
@@ -34141,7 +34224,8 @@ const VVideoControls = genericComponent()({
       t
     } = useLocale();
     const {
-      themeClasses
+      themeClasses,
+      current: currentTheme
     } = provideTheme(props);
     const {
       densityClasses
@@ -34156,6 +34240,13 @@ const VVideoControls = genericComponent()({
       const fallbackBackground = props.detached ? 'surface' : undefined;
       return props.backgroundColor ?? fallbackBackground;
     });
+    const trackColor = toRef(() => {
+      if (props.trackColor) {
+        return props.trackColor;
+      }
+      const fallback = currentTheme.value.dark || !props.pills ? undefined : 'surface';
+      return (props.pills ? props.backgroundColor : props.color) ?? fallback;
+    });
     const playing = useProxiedModel(props, 'playing');
     const progress = useProxiedModel(props, 'progress');
     const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
@@ -34216,7 +34307,8 @@ const VVideoControls = genericComponent()({
       };
       const regularBtnSize = innerDefaults.VIconBtn.size;
       const playBtnSize = props.pills ? regularBtnSize + 8 : regularBtnSize;
-      const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : []];
+      const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : [], props.pills ? backgroundColorClasses.value : []];
+      const pillStyles = props.pills ? backgroundColorStyles.value : [];
       const slotProps = {
         play,
         pause,
@@ -34239,30 +34331,34 @@ const VVideoControls = genericComponent()({
           'v-video-controls--floating': props.floating
         }, {
           'v-video-controls--split-time': props.splitTime
-        }, backgroundColorClasses.value, props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
-        "style": normalizeStyle([backgroundColorStyles.value, {
+        }, !props.pills ? backgroundColorClasses.value : [], props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
+        "style": normalizeStyle([!props.pills ? backgroundColorStyles.value : [], {
           '--v-video-controls-pill-height': `${regularBtnSize}px`
         }])
       }, [createVNode(VDefaultsProvider, {
         "defaults": innerDefaults
       }, {
         default: () => [slots.default?.(slotProps) ?? createElementVNode(Fragment, null, [props.variant !== 'mini' && createElementVNode(Fragment, null, [!props.hidePlay && createElementVNode("div", {
-          "class": normalizeClass([pillClasses, 'v-video__action-play'])
+          "class": normalizeClass([pillClasses, 'v-video__action-play']),
+          "style": normalizeStyle(pillStyles)
         }, [withDirectives(createVNode(VIconBtn, {
           "icon": playing.value ? '$pause' : '$play',
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
         }, null), [[Tooltip, labels.value.playAction, 'top']])]), slots.prepend && createElementVNode("div", {
-          "class": normalizeClass(pillClasses)
+          "class": normalizeClass(pillClasses),
+          "style": normalizeStyle(pillStyles)
         }, [slots.prepend(slotProps)]), props.splitTime ? createElementVNode("span", {
-          "class": normalizeClass([pillClasses, 'v-video__time'])
+          "class": normalizeClass([pillClasses, 'v-video__time']),
+          "style": normalizeStyle(pillStyles)
         }, [currentTime.value.elapsed]) : props.variant !== 'default' ? createElementVNode("span", {
-          "class": normalizeClass([pillClasses, 'v-video__time'])
+          "class": normalizeClass([pillClasses, 'v-video__time']),
+          "style": normalizeStyle(pillStyles)
         }, [currentTime.value.elapsed, createTextVNode(" / "), currentTime.value.total]) : '', createVNode(VSlider, {
           "modelValue": props.progress,
           "noKeyboard": true,
-          "color": props.trackColor ?? props.color,
+          "color": trackColor.value ?? 'surface-variant',
           "trackColor": props.variant === 'tube' ? 'white' : undefined,
           "class": "v-video__track",
           "thumbLabel": "always",
@@ -34271,18 +34367,22 @@ const VVideoControls = genericComponent()({
         }, {
           'thumb-label': () => currentTime.value.elapsed
         }), props.variant === 'tube' && createVNode(VSpacer, null, null), props.splitTime ? createElementVNode("span", {
-          "class": normalizeClass([pillClasses, 'v-video__time'])
+          "class": normalizeClass([pillClasses, 'v-video__time']),
+          "style": normalizeStyle(pillStyles)
         }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && createElementVNode(Fragment, null, [createVNode(VSpacer, null, null), slots.prepend && createElementVNode("div", {
-          "class": normalizeClass(pillClasses)
+          "class": normalizeClass(pillClasses),
+          "style": normalizeStyle(pillStyles)
         }, [slots.prepend(slotProps)]), !props.hidePlay && createElementVNode("div", {
-          "class": normalizeClass([pillClasses, 'v-video__action-play'])
+          "class": normalizeClass([pillClasses, 'v-video__action-play']),
+          "style": normalizeStyle(pillStyles)
         }, [withDirectives(createVNode(VIconBtn, {
           "icon": playing.value ? '$pause' : '$play',
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
         }, null), [[Tooltip, labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && createElementVNode("div", {
-          "class": normalizeClass(pillClasses)
+          "class": normalizeClass(pillClasses),
+          "style": normalizeStyle(pillStyles)
         }, [!props.hideVolume && createVNode(VVideoVolume, mergeProps({
           "key": "volume-control",
           "sliderProps": {
@@ -34309,6 +34409,7 @@ const VVideoControls = genericComponent()({
 
 const allowedVariants = ['background', 'player'];
 const makeVVideoProps = propsFactory({
+  aspectRatio: [String, Number],
   autoplay: Boolean,
   muted: Boolean,
   eager: Boolean,
@@ -34625,7 +34726,9 @@ const VVideo = genericComponent()({
         "class": normalizeClass(['v-video', `v-video--variant-${props.variant}`, `v-video--${state.value}`, {
           'v-video--playing': playing.value
         }, themeClasses.value, densityClasses.value, roundedContainerClasses.value, props.class]),
-        "style": normalizeStyle([props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']), props.style]),
+        "style": normalizeStyle([{
+          '--v-video-aspect-ratio': props.aspectRatio
+        }, props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'minWidth', 'maxWidth']), props.style]),
         "onKeydown": onKeydown,
         "onClick": onClick
       }, [createElementVNode("div", {
@@ -34675,9 +34778,9 @@ const VVideo = genericComponent()({
         }, {
           default: () => [createElementVNode("div", {
             "class": normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
-          }, [overlayPlayIcon])]
+          }, [props.variant === 'player' && overlayPlayIcon])]
         })]
-      }), createVNode(VOverlay, mergeProps({
+      }), props.variant === 'player' && createVNode(VOverlay, mergeProps({
         "key": "loading-overlay",
         "modelValue": state.value === 'loading' || waiting.value,
         "opacity": ".1"
@@ -35139,7 +35242,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.3";
+const version$1 = "3.9.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35437,7 +35540,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.3";
+const version = "3.9.5";
 
 /* eslint-disable local-rules/sort-imports */