vuetify 3.9.3 → 3.9.5

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.3
+* Vuetify v3.9.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1653,7 +1653,9 @@
   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;
@@ -2257,6 +2259,23 @@
       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'
+      }
     }
   };
 
@@ -2855,9 +2874,7 @@
 
   const makeVAppProps = propsFactory({
     ...makeComponentProps(),
-    ...makeLayoutProps({
-      fullHeight: true
-    }),
+    ...omit(makeLayoutProps(), ['fullHeight']),
     ...makeThemeProps()
   }, 'VApp');
   const VApp = genericComponent()({
@@ -2873,7 +2890,10 @@
         getLayoutItem,
         items,
         layoutRef
-      } = createLayout(props);
+      } = createLayout({
+        ...props,
+        fullHeight: true
+      });
       const {
         rtlClasses
       } = useRtl();
@@ -6246,7 +6266,7 @@
       });
       const {
         iconSize
-      } = useIconSizes(props, () => props.prominent ? 44 : 28);
+      } = useIconSizes(props, () => props.prominent ? 44 : undefined);
       const {
         themeClasses
       } = provideTheme(props);
@@ -6297,7 +6317,7 @@
         const iconProps = {
           density: props.density,
           icon: icon.value,
-          size: iconSize.value
+          size: props.iconSize || props.prominent ? iconSize.value : undefined
         };
         return isActive.value && vue.createVNode(props.tag, {
           "class": vue.normalizeClass(['v-alert', props.border && {
@@ -7080,9 +7100,14 @@
   // Utilities
   const RulesSymbol = Symbol.for('vuetify:rules');
   function useRules(fn) {
-    const resolveRules = vue.inject(RulesSymbol, null);
-    if (!resolveRules) return vue.toRef(fn);
-    return resolveRules(fn);
+    const rules = vue.inject(RulesSymbol, null);
+    if (!fn) {
+      if (!rules) {
+        throw new Error('Could not find Vuetify rules injection');
+      }
+      return rules.aliases;
+    }
+    return rules?.resolve(fn) ?? vue.toRef(fn);
   }
 
   // Composables
@@ -10908,11 +10933,11 @@
     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);
@@ -10960,7 +10985,7 @@
     }
     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.
@@ -10983,10 +11008,10 @@
       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, {
@@ -12548,6 +12573,7 @@
                   "name": props.name,
                   "placeholder": props.placeholder,
                   "size": 1,
+                  "role": props.role,
                   "type": props.type,
                   "onFocus": focus,
                   "onBlur": blur
@@ -13323,7 +13349,7 @@
         return vue.createVNode(VTextField, vue.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,
@@ -15982,7 +16008,8 @@
       getColor: (c, v) => ({
         ...c,
         r: Number(v)
-      })
+      }),
+      localeKey: 'redInput'
     }, {
       label: 'G',
       max: 255,
@@ -15991,7 +16018,8 @@
       getColor: (c, v) => ({
         ...c,
         g: Number(v)
-      })
+      }),
+      localeKey: 'greenInput'
     }, {
       label: 'B',
       max: 255,
@@ -16000,7 +16028,8 @@
       getColor: (c, v) => ({
         ...c,
         b: Number(v)
-      })
+      }),
+      localeKey: 'blueInput'
     }, {
       label: 'A',
       max: 1,
@@ -16014,7 +16043,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoRGB,
     from: RGBtoHSV
@@ -16036,7 +16066,8 @@
       getColor: (c, v) => ({
         ...c,
         h: Number(v)
-      })
+      }),
+      localeKey: 'hueInput'
     }, {
       label: 'S',
       max: 1,
@@ -16045,7 +16076,8 @@
       getColor: (c, v) => ({
         ...c,
         s: Number(v)
-      })
+      }),
+      localeKey: 'saturationInput'
     }, {
       label: 'L',
       max: 1,
@@ -16054,7 +16086,8 @@
       getColor: (c, v) => ({
         ...c,
         l: Number(v)
-      })
+      }),
+      localeKey: 'lightnessInput'
     }, {
       label: 'A',
       max: 1,
@@ -16068,7 +16101,8 @@
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
-      })
+      }),
+      localeKey: 'alphaInput'
     }],
     to: HSVtoHSL,
     from: HSLtoHSV
@@ -16084,7 +16118,8 @@
     inputs: [{
       label: 'HEXA',
       getValue: c => c,
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexaInput'
     }],
     to: HSVtoHex,
     from: HexToHSV
@@ -16094,7 +16129,8 @@
     inputs: [{
       label: 'HEX',
       getValue: c => c.slice(0, 7),
-      getColor: (c, v) => v
+      getColor: (c, v) => v,
+      localeKey: 'hexInput'
     }]
   };
   const modes = {
@@ -16143,6 +16179,9 @@
       let {
         emit
       } = _ref2;
+      const {
+        t
+      } = useLocale();
       const enabledModes = vue.computed(() => {
         return props.modes.map(key => ({
           ...modes[key],
@@ -16157,11 +16196,13 @@
           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 => {
@@ -16179,6 +16220,7 @@
         "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);
@@ -16944,6 +16986,9 @@
       let {
         emit
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const abortController = new AbortController();
       vue.onUnmounted(() => abortController.abort());
       async function openEyeDropper() {
@@ -16969,6 +17014,7 @@
         "class": "v-color-picker-preview__eye-dropper",
         "key": "eyeDropper"
       }, [vue.createVNode(VBtn, {
+        "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
         "density": "comfortable",
         "disabled": props.disabled,
         "icon": "$eyeDropper",
@@ -16984,6 +17030,7 @@
         "class": "v-color-picker-preview__sliders"
       }, [vue.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),
@@ -16999,6 +17046,7 @@
         "hideDetails": true
       }, null), !props.hideAlpha && vue.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),
@@ -20863,11 +20911,16 @@
       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') {
@@ -20882,57 +20935,63 @@
           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 = [];
@@ -21634,8 +21693,6 @@
     }
   });
 
-  // Types
-
   const makeVTableProps = propsFactory({
     fixedHeader: Boolean,
     fixedFooter: Boolean,
@@ -21665,26 +21722,37 @@
       const {
         densityClasses
       } = useDensity(props);
-      useRender(() => vue.createVNode(props.tag, {
-        "class": vue.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": vue.normalizeStyle(props.style)
-      }, {
-        default: () => [slots.top?.(), slots.default ? vue.createElementVNode("div", {
-          "class": "v-table__wrapper",
-          "style": {
-            height: convertToUnit(props.height)
+      useRender(() => {
+        const tableContentDefaults = {
+          VCheckboxBtn: {
+            density: props.density
           }
-        }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
-      }));
+        };
+        return vue.createVNode(props.tag, {
+          "class": vue.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": vue.normalizeStyle(props.style)
+        }, {
+          default: () => [slots.top?.(), vue.createVNode(VDefaultsProvider, {
+            "defaults": tableContentDefaults
+          }, {
+            default: () => [slots.default ? vue.createElementVNode("div", {
+              "class": "v-table__wrapper",
+              "style": {
+                height: convertToUnit(props.height)
+              }
+            }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.()]
+          }), slots.bottom?.()]
+        });
+      });
       return {};
     }
   });
@@ -26017,6 +26085,7 @@
         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 vue.nextTick();
@@ -31346,12 +31415,23 @@
 
   // 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(),
@@ -31395,8 +31475,15 @@
       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 => vue.createElementVNode(vue.Fragment, null, [vue.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 vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
           "class": ['v-color-input', props.class],
           "style": props.style,
@@ -31412,10 +31499,7 @@
           }
         }), {
           ...slots,
-          prepend: props.pipIcon ? arg => vue.createElementVNode(vue.Fragment, null, [hasPrepend && vue.createVNode(VIcon, {
-            "color": props.pip ? model.value : undefined,
-            "icon": props.pipIcon
-          }, null), slots.prepend?.(arg)]) : undefined,
+          ...slotWithPip,
           default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -31447,8 +31531,7 @@
                 }
                 return vue.createVNode(VColorPicker, vue.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,
@@ -34145,7 +34228,8 @@
         t
       } = useLocale();
       const {
-        themeClasses
+        themeClasses,
+        current: currentTheme
       } = provideTheme(props);
       const {
         densityClasses
@@ -34160,6 +34244,13 @@
         const fallbackBackground = props.detached ? 'surface' : undefined;
         return props.backgroundColor ?? fallbackBackground;
       });
+      const trackColor = vue.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));
@@ -34220,7 +34311,8 @@
         };
         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,
@@ -34243,30 +34335,34 @@
             '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": vue.normalizeStyle([backgroundColorStyles.value, {
+          }, !props.pills ? backgroundColorClasses.value : [], props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
+          "style": vue.normalizeStyle([!props.pills ? backgroundColorStyles.value : [], {
             '--v-video-controls-pill-height': `${regularBtnSize}px`
           }])
         }, [vue.createVNode(VDefaultsProvider, {
           "defaults": innerDefaults
         }, {
           default: () => [slots.default?.(slotProps) ?? vue.createElementVNode(vue.Fragment, null, [props.variant !== 'mini' && vue.createElementVNode(vue.Fragment, null, [!props.hidePlay && vue.createElementVNode("div", {
-            "class": vue.normalizeClass([pillClasses, 'v-video__action-play'])
+            "class": vue.normalizeClass([pillClasses, 'v-video__action-play']),
+            "style": vue.normalizeStyle(pillStyles)
           }, [vue.withDirectives(vue.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 && vue.createElementVNode("div", {
-            "class": vue.normalizeClass(pillClasses)
+            "class": vue.normalizeClass(pillClasses),
+            "style": vue.normalizeStyle(pillStyles)
           }, [slots.prepend(slotProps)]), props.splitTime ? vue.createElementVNode("span", {
-            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+            "class": vue.normalizeClass([pillClasses, 'v-video__time']),
+            "style": vue.normalizeStyle(pillStyles)
           }, [currentTime.value.elapsed]) : props.variant !== 'default' ? vue.createElementVNode("span", {
-            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+            "class": vue.normalizeClass([pillClasses, 'v-video__time']),
+            "style": vue.normalizeStyle(pillStyles)
           }, [currentTime.value.elapsed, vue.createTextVNode(" / "), currentTime.value.total]) : '', vue.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",
@@ -34275,18 +34371,22 @@
           }, {
             'thumb-label': () => currentTime.value.elapsed
           }), props.variant === 'tube' && vue.createVNode(VSpacer, null, null), props.splitTime ? vue.createElementVNode("span", {
-            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+            "class": vue.normalizeClass([pillClasses, 'v-video__time']),
+            "style": vue.normalizeStyle(pillStyles)
           }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSpacer, null, null), slots.prepend && vue.createElementVNode("div", {
-            "class": vue.normalizeClass(pillClasses)
+            "class": vue.normalizeClass(pillClasses),
+            "style": vue.normalizeStyle(pillStyles)
           }, [slots.prepend(slotProps)]), !props.hidePlay && vue.createElementVNode("div", {
-            "class": vue.normalizeClass([pillClasses, 'v-video__action-play'])
+            "class": vue.normalizeClass([pillClasses, 'v-video__action-play']),
+            "style": vue.normalizeStyle(pillStyles)
           }, [vue.withDirectives(vue.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) && vue.createElementVNode("div", {
-            "class": vue.normalizeClass(pillClasses)
+            "class": vue.normalizeClass(pillClasses),
+            "style": vue.normalizeStyle(pillStyles)
           }, [!props.hideVolume && vue.createVNode(VVideoVolume, vue.mergeProps({
             "key": "volume-control",
             "sliderProps": {
@@ -34313,6 +34413,7 @@
 
   const allowedVariants = ['background', 'player'];
   const makeVVideoProps = propsFactory({
+    aspectRatio: [String, Number],
     autoplay: Boolean,
     muted: Boolean,
     eager: Boolean,
@@ -34629,7 +34730,9 @@
           "class": vue.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": vue.normalizeStyle([props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']), props.style]),
+          "style": vue.normalizeStyle([{
+            '--v-video-aspect-ratio': props.aspectRatio
+          }, props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'minWidth', 'maxWidth']), props.style]),
           "onKeydown": onKeydown,
           "onClick": onClick
         }, [vue.createElementVNode("div", {
@@ -34679,9 +34782,9 @@
           }, {
             default: () => [vue.createElementVNode("div", {
               "class": vue.normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
-            }, [overlayPlayIcon])]
+            }, [props.variant === 'player' && overlayPlayIcon])]
           })]
-        }), vue.createVNode(VOverlay, vue.mergeProps({
+        }), props.variant === 'player' && vue.createVNode(VOverlay, vue.mergeProps({
           "key": "loading-overlay",
           "modelValue": state.value === 'loading' || waiting.value,
           "opacity": ".1"
@@ -35143,7 +35246,7 @@
       };
     });
   }
-  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
@@ -35441,7 +35544,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.3";
+  const version = "3.9.5";
 
   /* eslint-disable local-rules/sort-imports */