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

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-23
+* Vuetify v3.9.2-master.2025-07-24
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1660,6 +1660,10 @@
     vm.render = render;
   }
 
+  function formatTime(seconds) {
+    return [Math.floor(seconds % 60), Math.floor(seconds / 60 % 60), Math.floor(seconds / 60 / 60 % 60)].filter((x, i) => i < 2 || x > 0).reverse().map(String).map((x, i) => i > 0 ? x.padStart(2, '0') : x).join(':');
+  }
+
   // Utilities
 
   // Types
@@ -2180,6 +2184,17 @@
       option: 'Option',
       plus: 'plus',
       shortcut: 'Keyboard shortcut: {0}'
+    },
+    video: {
+      play: 'Play',
+      pause: 'Pause',
+      seek: 'Seek',
+      volume: 'Volume',
+      showVolume: 'Show volume control',
+      mute: 'Mute',
+      unmute: 'Unmute',
+      enterFullscreen: 'Full screen',
+      exitFullscreen: 'Exit full screen'
     }
   };
 
@@ -4262,7 +4277,7 @@
 
   // Types
 
-  const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
+  const allowedVariants$4 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
   function genOverlays(isClickable, name) {
     return vue.createElementVNode(vue.Fragment, null, [isClickable && vue.createElementVNode("span", {
       "key": "overlay",
@@ -4277,7 +4292,7 @@
     variant: {
       type: String,
       default: 'elevated',
-      validator: v => allowedVariants$2.includes(v)
+      validator: v => allowedVariants$4.includes(v)
     }
   }, 'variant');
   function useVariant(props) {
@@ -4701,7 +4716,15 @@
     arrowdown: 'mdi-arrow-down',
     arrowleft: 'mdi-arrow-left',
     arrowright: 'mdi-arrow-right',
-    backspace: 'mdi-backspace'
+    backspace: 'mdi-backspace',
+    play: 'mdi-play',
+    pause: 'mdi-pause',
+    fullscreen: 'mdi-fullscreen',
+    fullscreenExit: 'mdi-fullscreen-exit',
+    volumeHigh: 'mdi-volume-high',
+    volumeMedium: 'mdi-volume-medium',
+    volumeLow: 'mdi-volume-low',
+    volumeOff: 'mdi-volume-variant-off'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -10831,11 +10854,12 @@
     function onScroll(e) {
       data.isActive.value = false;
     }
-    bindScroll(data.targetEl.value ?? data.contentEl.value, onScroll);
+    bindScroll(data.target.value ?? data.contentEl.value, onScroll);
   }
   function blockScrollStrategy(data, props) {
     const offsetParent = data.root.value?.offsetParent;
-    const scrollElements = [...new Set([...getScrollParents(data.targetEl.value, props.contained ? offsetParent : undefined), ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)])].filter(el => !el.classList.contains('v-overlay-scroll-blocked'));
+    const target = Array.isArray(data.target.value) ? document.elementFromPoint(...data.target.value) : data.target.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);
     if (scrollableParent) {
@@ -10882,7 +10906,7 @@
     }
     ric = (typeof requestIdleCallback === 'undefined' ? cb => cb() : requestIdleCallback)(() => {
       scope.run(() => {
-        bindScroll(data.targetEl.value ?? data.contentEl.value, e => {
+        bindScroll(data.target.value ?? data.contentEl.value, e => {
           if (slow) {
             // If the position calculation is slow,
             // defer updates until scrolling is finished.
@@ -10907,7 +10931,8 @@
   }
 
   /** @private */
-  function bindScroll(el, onScroll) {
+  function bindScroll(target, onScroll) {
+    const el = Array.isArray(target) ? document.elementFromPoint(...target) : target;
     const scrollElements = [document, ...getScrollParents(el)];
     scrollElements.forEach(el => {
       el.addEventListener('scroll', onScroll, {
@@ -11589,6 +11614,7 @@
         root,
         contentEl,
         targetEl,
+        target,
         isActive,
         updateLocation
       });
@@ -11984,7 +12010,7 @@
 
   // Types
 
-  const allowedVariants$1 = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
+  const allowedVariants$3 = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
   const makeVFieldProps = propsFactory({
     appendInnerIcon: IconValue,
     bgColor: String,
@@ -12018,7 +12044,7 @@
     variant: {
       type: String,
       default: 'filled',
-      validator: v => allowedVariants$1.includes(v)
+      validator: v => allowedVariants$3.includes(v)
     },
     'onClick:clear': EventProp(),
     'onClick:appendInner': EventProp(),
@@ -16180,6 +16206,7 @@
       validator: v => ['vertical', 'horizontal'].includes(v)
     },
     reverse: Boolean,
+    noKeyboard: Boolean,
     ...makeRoundedProps(),
     ...makeElevationProps({
       elevation: 2
@@ -16383,6 +16410,7 @@
       min,
       max,
       mousePressed,
+      noKeyboard: vue.toRef(() => props.noKeyboard),
       numTicks,
       onSliderMousedown,
       onSliderTouchstart,
@@ -16435,6 +16463,7 @@
       default: true
     },
     name: String,
+    noKeyboard: Boolean,
     ...makeComponentProps()
   }, 'VSliderThumb');
   const VSliderThumb = genericComponent()({
@@ -16497,6 +16526,7 @@
         if (step.value) return [1, 2, 3];else return [1, 5, 10];
       });
       function parseKeydown(e, value) {
+        if (props.noKeyboard) return;
         if (!relevantKeys.includes(e.key)) return;
         e.preventDefault();
         const _step = step.value || 0.1;
@@ -16732,7 +16762,8 @@
         trackContainerRef,
         position,
         hasLabels,
-        readonly
+        readonly,
+        noKeyboard
       } = useSlider({
         props,
         steps,
@@ -16808,6 +16839,7 @@
               "ref": thumbContainerRef,
               "aria-describedby": messagesId.value,
               "focused": isFocused.value,
+              "noKeyboard": noKeyboard.value,
               "min": min.value,
               "max": max.value,
               "modelValue": model.value,
@@ -23884,7 +23916,7 @@
 
   // Types
 
-  const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+  const allowedVariants$2 = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     flat: Boolean,
     ...makeGroupProps(),
@@ -23895,7 +23927,7 @@
     variant: {
       type: String,
       default: 'default',
-      validator: v => allowedVariants.includes(v)
+      validator: v => allowedVariants$2.includes(v)
     }
   }, 'VExpansionPanels');
   const VExpansionPanels = genericComponent()({
@@ -33186,6 +33218,707 @@
     }
   });
 
+  // Types
+
+  const makeVVideoVolumeProps = propsFactory({
+    inline: Boolean,
+    label: String,
+    direction: {
+      type: String,
+      default: 'vertical'
+    },
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    menuProps: Object,
+    sliderProps: Object,
+    onClick: EventProp(),
+    ...makeComponentProps()
+  }, 'VVideoVolume');
+  const VVideoVolume = genericComponent()({
+    name: 'VVideoVolume',
+    props: makeVVideoVolumeProps(),
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const volume = useProxiedModel(props, 'modelValue');
+      const volumeIcon = vue.toRef(() => volume.value > 70 ? '$volumeHigh' : volume.value > 40 ? '$volumeMedium' : volume.value > 10 ? '$volumeLow' : '$volumeOff');
+      const containerRef = vue.ref();
+      useRender(() => {
+        const sliderDefaults = {
+          hideDetails: true,
+          step: 5,
+          thumbSize: 16
+        };
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video-volume', {
+            'v-video-volume--inline': props.inline
+          }, props.class]),
+          "style": vue.normalizeStyle(props.style),
+          "ref": containerRef
+        }, [vue.withDirectives(vue.createVNode(VIconBtn, vue.mergeProps({
+          "icon": volumeIcon.value,
+          "aria-label": props.label,
+          "onClick": props.onClick
+        }, attrs), {
+          default: () => [vue.createVNode(VIcon, null, null), !props.inline && vue.createVNode(VMenu, {
+            "offset": "8",
+            "activator": "parent",
+            "attach": containerRef.value,
+            "location": props.menuProps?.location ?? 'top center',
+            "closeOnContentClick": false
+          }, {
+            default: () => [vue.createElementVNode("div", {
+              "class": vue.normalizeClass(['v-video-volume__menu', `v-video-volume__menu--${props.direction}`])
+            }, [vue.createVNode(VSlider, vue.mergeProps({
+              "direction": props.direction,
+              "aria-label": t('$vuetify.video.volume'),
+              "modelValue": volume.value,
+              "onUpdate:modelValue": v => volume.value = v
+            }, sliderDefaults, props.sliderProps), null)])]
+          })]
+        }), [[vue.resolveDirective("tooltip"), props.label, 'top']]), props.inline && vue.createVNode(VSlider, vue.mergeProps({
+          "class": "v-video-volume-inline__slider",
+          "minWidth": "50",
+          "aria-label": t('$vuetify.video.volume'),
+          "modelValue": volume.value,
+          "onUpdate:modelValue": v => volume.value = v,
+          "onKeydown": e => {
+            e.stopPropagation();
+          }
+        }, sliderDefaults, props.sliderProps), null)]);
+      });
+    }
+  });
+
+  // Types
+
+  const allowedVariants$1 = ['hidden', 'default', 'tube', 'mini'];
+  const makeVVideoControlsProps = propsFactory({
+    color: String,
+    backgroundColor: String,
+    trackColor: String,
+    playing: Boolean,
+    hidePlay: Boolean,
+    hideVolume: Boolean,
+    hideFullscreen: Boolean,
+    fullscreen: Boolean,
+    floating: Boolean,
+    splitTime: Boolean,
+    pills: Boolean,
+    detached: Boolean,
+    progress: {
+      type: Number,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      default: 0
+    },
+    volume: [Number, String],
+    variant: {
+      type: String,
+      default: 'default',
+      validator: v => allowedVariants$1.includes(v)
+    },
+    volumeProps: Object,
+    ...makeDensityProps(),
+    ...makeElevationProps(),
+    ...makeThemeProps()
+  }, 'VVideoControls');
+  const VVideoControls = genericComponent()({
+    name: 'VVideoControls',
+    props: makeVVideoControlsProps(),
+    emits: {
+      'update:playing': val => true,
+      'update:progress': val => true,
+      'update:volume': val => true,
+      skip: val => true,
+      'click:fullscreen': () => true
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(() => {
+        const fallbackBackground = props.detached ? 'surface' : undefined;
+        return props.backgroundColor ?? fallbackBackground;
+      });
+      const playing = useProxiedModel(props, 'playing');
+      const progress = useProxiedModel(props, 'progress');
+      const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+      const lastVolume = vue.shallowRef();
+      const currentTime = vue.computed(() => {
+        const secondsElapsed = Math.round(props.progress / 100 * props.duration);
+        return {
+          elapsed: formatTime(secondsElapsed),
+          remaining: formatTime(props.duration - secondsElapsed),
+          total: formatTime(props.duration)
+        };
+      });
+      const labels = vue.computed(() => {
+        const playIconLocaleKey = playing.value ? 'pause' : 'play';
+        const volumeIconLocaleKey = props.volumeProps?.inline ? volume.value ? 'mute' : 'unmute' : 'showVolume';
+        const fullscreenIconLocaleKey = props.fullscreen ? 'exitFullscreen' : 'enterFullscreen';
+        return {
+          seek: t('$vuetify.video.seek'),
+          volume: t('$vuetify.video.volume'),
+          playAction: t(`$vuetify.video.${playIconLocaleKey}`),
+          volumeAction: t(`$vuetify.video.${volumeIconLocaleKey}`),
+          fullscreenAction: t(`$vuetify.video.${fullscreenIconLocaleKey}`)
+        };
+      });
+      function play() {
+        playing.value = true;
+      }
+      function pause() {
+        playing.value = false;
+      }
+      function skipTo(v) {
+        progress.value = v;
+      }
+      function toggleMuted() {
+        if (volume.value) {
+          lastVolume.value = volume.value;
+          volume.value = 0;
+        } else {
+          volume.value = lastVolume.value ?? 100;
+        }
+      }
+      function toggleFullscreen() {
+        emit('click:fullscreen');
+      }
+      useRender(() => {
+        const sizes = props.pills ? [42, 36, 30] : [32, 28, 24];
+        const innerDefaults = {
+          VIconBtn: {
+            size: props.density === 'compact' ? sizes[2] : props.density === 'comfortable' ? sizes[1] : sizes[0],
+            iconSize: props.density === 'compact' ? 20 : props.density === 'comfortable' ? 24 : 26,
+            variant: 'text',
+            color: props.color
+          },
+          VSlider: {
+            thumbSize: props.variant === 'tube' ? 10 : 16,
+            hideDetails: true
+          }
+        };
+        const regularBtnSize = innerDefaults.VIconBtn.size;
+        const playBtnSize = props.pills ? regularBtnSize + 8 : regularBtnSize;
+        const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : []];
+        const slotProps = {
+          play,
+          pause,
+          playing: playing.value,
+          progress: progress.value,
+          currentTime: currentTime.value,
+          skipTo,
+          volume,
+          toggleMuted,
+          fullscreen: props.fullscreen,
+          toggleFullscreen,
+          labels: labels.value
+        };
+        return vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video-controls', `v-video-controls--variant-${props.variant}`, {
+            'v-video-controls--pills': props.pills
+          }, {
+            'v-video-controls--detached': props.detached
+          }, {
+            '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, {
+            '--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'])
+          }, [vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": playing.value ? '$pause' : '$play',
+            "size": playBtnSize,
+            "aria-label": labels.value.playAction,
+            "onClick": () => playing.value = !playing.value
+          }, null), [[vue.resolveDirective("tooltip"), labels.value.playAction, 'top']])]), slots.prepend && vue.createElementVNode("div", {
+            "class": vue.normalizeClass(pillClasses)
+          }, [slots.prepend(slotProps)]), props.splitTime ? vue.createElementVNode("span", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+          }, [currentTime.value.elapsed]) : props.variant !== 'default' ? vue.createElementVNode("span", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__time'])
+          }, [currentTime.value.elapsed, vue.createTextVNode(" / "), currentTime.value.total]) : '', vue.createVNode(VSlider, {
+            "modelValue": props.progress,
+            "noKeyboard": true,
+            "color": props.trackColor ?? props.color,
+            "trackColor": props.variant === 'tube' ? 'white' : undefined,
+            "class": "v-video__track",
+            "thumbLabel": "always",
+            "aria-label": labels.value.seek,
+            "onUpdate:modelValue": skipTo
+          }, {
+            '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'])
+          }, [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)
+          }, [slots.prepend(slotProps)]), !props.hidePlay && vue.createElementVNode("div", {
+            "class": vue.normalizeClass([pillClasses, 'v-video__action-play'])
+          }, [vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": playing.value ? '$pause' : '$play',
+            "size": playBtnSize,
+            "aria-label": labels.value.playAction,
+            "onClick": () => playing.value = !playing.value
+          }, null), [[vue.resolveDirective("tooltip"), labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && vue.createElementVNode("div", {
+            "class": vue.normalizeClass(pillClasses)
+          }, [!props.hideVolume && vue.createVNode(VVideoVolume, vue.mergeProps({
+            "key": "volume-control",
+            "sliderProps": {
+              color: props.color
+            },
+            "modelValue": volume.value,
+            "label": labels.value.volumeAction,
+            "onUpdate:modelValue": v => volume.value = v,
+            "onClick": () => props.volumeProps?.inline && toggleMuted()
+          }, props.volumeProps), null), slots.append?.(slotProps), !props.hideFullscreen && vue.withDirectives(vue.createVNode(VIconBtn, {
+            "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
+            "aria-label": labels.value.fullscreenAction,
+            "onClick": toggleFullscreen
+          }, null), [[vue.resolveDirective("tooltip"), labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && vue.createVNode(VSpacer, null, null)])]
+        })]);
+      });
+      return {
+        toggleMuted
+      };
+    }
+  });
+
+  // Types
+
+  const allowedVariants = ['background', 'player'];
+  const makeVVideoProps = propsFactory({
+    autoplay: Boolean,
+    muted: Boolean,
+    eager: Boolean,
+    src: String,
+    type: String,
+    // e.g. video/mp4
+    image: String,
+    hideOverlay: Boolean,
+    noFullscreen: Boolean,
+    startAt: [Number, String],
+    variant: {
+      type: String,
+      default: 'player',
+      validator: v => allowedVariants.includes(v)
+    },
+    controlsTransition: {
+      type: [Boolean, String, Object],
+      component: VFadeTransition
+    },
+    controlsVariant: {
+      type: String,
+      default: 'default'
+    },
+    controlsProps: {
+      type: Object
+    },
+    rounded: [Boolean, Number, String, Array],
+    ...makeComponentProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeThemeProps(),
+    ...omit(makeVVideoControlsProps(), ['fullscreen', 'variant'])
+  }, 'VVideo');
+  const VVideo = genericComponent()({
+    name: 'VVideo',
+    inheritAttrs: false,
+    props: makeVVideoProps(),
+    emits: {
+      loaded: element => true,
+      'update:playing': val => true,
+      'update:progress': val => true,
+      'update:volume': val => true
+    },
+    setup(props, _ref) {
+      let {
+        attrs,
+        emit,
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        densityClasses
+      } = useDensity(props);
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      const {
+        elevationClasses
+      } = useElevation(props);
+      const {
+        ssr
+      } = useDisplay();
+      const roundedForContainer = vue.toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded);
+      const roundedForControls = vue.toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false);
+      const {
+        roundedClasses: roundedContainerClasses
+      } = useRounded(roundedForContainer);
+      const {
+        roundedClasses: roundedControlsClasses
+      } = useRounded(roundedForControls);
+      const containerRef = vue.ref();
+      const videoRef = vue.ref();
+      const controlsRef = vue.ref();
+      const playing = useProxiedModel(props, 'playing');
+      const progress = useProxiedModel(props, 'progress');
+      const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+      const fullscreen = vue.shallowRef(false);
+      const waiting = vue.shallowRef(false);
+      const triggered = vue.shallowRef(false);
+      const startAfterLoad = vue.shallowRef(false);
+      const state = vue.shallowRef(props.autoplay ? 'loading' : 'idle');
+      const duration = vue.shallowRef(0);
+      const fullscreenEnabled = vue.toRef(() => !props.noFullscreen && !String(attrs.controlsList ?? '').includes('nofullscreen'));
+      function onTimeupdate() {
+        const {
+          currentTime,
+          duration
+        } = videoRef.value;
+        progress.value = duration === 0 ? 0 : 100 * currentTime / duration;
+      }
+      async function onTriggered() {
+        await vue.nextTick();
+        if (!videoRef.value) return;
+        videoRef.value.addEventListener('timeupdate', onTimeupdate);
+        videoRef.value.volume = volume.value / 100;
+        if (state.value !== 'loaded') {
+          state.value = 'loading';
+        }
+      }
+      function onVideoLoaded() {
+        state.value = 'loaded';
+        duration.value = videoRef.value.duration;
+        const startTime = Number(props.startAt ?? 0);
+        if (startTime && startTime <= duration.value) {
+          videoRef.value.currentTime = startTime;
+          progress.value = duration.value === 0 ? 0 : 100 * startTime / duration.value;
+        }
+        if (startAfterLoad.value) {
+          setTimeout(() => playing.value = true, 100);
+        }
+        emit('loaded', videoRef.value);
+      }
+      function onClick() {
+        if (state.value !== 'loaded') {
+          triggered.value = true;
+          startAfterLoad.value = !startAfterLoad.value;
+        }
+      }
+      function onKeydown(e) {
+        if (!videoRef.value || e.ctrlKey) return;
+        if (e.key.startsWith('Arrow')) {
+          e.preventDefault();
+        }
+        switch (true) {
+          case e.key === ' ':
+            {
+              if (!['A', 'BUTTON'].includes(e.target?.tagName)) {
+                e.preventDefault();
+                playing.value = !playing.value;
+              }
+              break;
+            }
+          case e.key === 'ArrowRight':
+            {
+              const step = 10 * (e.shiftKey ? 6 : 1);
+              videoRef.value.currentTime = Math.min(videoRef.value.currentTime + step, duration.value);
+              // TODO: show skip indicator
+              break;
+            }
+          case e.key === 'ArrowLeft':
+            {
+              const step = 10 * (e.shiftKey ? 6 : 1);
+              videoRef.value.currentTime = Math.max(videoRef.value.currentTime - step, 0);
+              // TODO: show skip indicator
+              break;
+            }
+          case createRange(10).map(String).includes(e.key):
+            {
+              skipTo(Number(e.key) * 10);
+              break;
+            }
+          case e.key === 'ArrowUp':
+            {
+              volume.value = Math.min(volume.value + 10, 100);
+              // TODO: show volume change indicator
+              break;
+            }
+          case e.key === 'ArrowDown':
+            {
+              volume.value = Math.max(volume.value - 10, 0);
+              // TODO: show volume change indicator
+              break;
+            }
+          case e.key === 'm':
+            {
+              controlsRef.value?.toggleMuted();
+              break;
+            }
+          case e.key === 'f':
+            {
+              toggleFullscreen();
+              break;
+            }
+        }
+      }
+      function skipTo(v) {
+        if (!videoRef.value) return;
+        progress.value = v;
+        videoRef.value.currentTime = duration.value * v / 100;
+      }
+      vue.watch(() => props.src, v => {
+        progress.value = 0;
+      });
+      vue.watch(playing, v => {
+        if (!videoRef.value) return;
+        if (v) {
+          videoRef.value.play();
+        } else {
+          videoRef.value.pause();
+        }
+      });
+      vue.watch(volume, v => {
+        if (!videoRef.value) return;
+        videoRef.value.volume = v / 100;
+      });
+      vue.watch(triggered, () => onTriggered(), {
+        once: true
+      });
+      vue.watch(() => props.eager, v => v && (triggered.value = true), {
+        immediate: true
+      });
+      vue.onMounted(() => {
+        if (props.autoplay && !ssr) {
+          triggered.value = true;
+          startAfterLoad.value = true;
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        videoRef.value?.removeEventListener('timeupdate', onTimeupdate);
+      });
+      function focusSlider() {
+        const container = videoRef.value?.closest('.v-video');
+        const innerSlider = container?.querySelector('[role="slider"]');
+        innerSlider?.focus();
+      }
+      function fullscreenExitShortcut(e) {
+        if (['ESC', 'f'].includes(e.key)) {
+          toggleFullscreen();
+          document.body.removeEventListener('keydown', fullscreenExitShortcut);
+        }
+      }
+      async function toggleFullscreen() {
+        if (!fullscreenEnabled.value || !document.fullscreenEnabled) {
+          return;
+        }
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+          onFullscreenExit();
+        } else {
+          await containerRef.value?.requestFullscreen();
+          document.body.addEventListener('keydown', fullscreenExitShortcut);
+          document.addEventListener('fullscreenchange', onFullscreenExit);
+          fullscreen.value = true;
+        }
+      }
+      function onFullscreenExit() {
+        // event fires with a delay after requestFullscreen(), ignore first run
+        if (document.fullscreenElement) return;
+        focusSlider();
+        fullscreen.value = false;
+        document.body.removeEventListener('keydown', fullscreenExitShortcut);
+        document.removeEventListener('fullscreenchange', onFullscreenExit);
+      }
+      function onVideoClick(e) {
+        e.preventDefault();
+        if (state.value === 'loaded') {
+          playing.value = !playing.value;
+          focusSlider();
+        }
+      }
+      function onDoubleClick(e) {
+        e.preventDefault();
+        toggleFullscreen();
+      }
+      let lastTap = 0;
+      function onTouchend(e) {
+        const now = performance.now();
+        if (now - lastTap < 500) {
+          e.preventDefault();
+          toggleFullscreen();
+        } else {
+          lastTap = now;
+        }
+      }
+      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,
+          fullscreen: fullscreen.value,
+          hideVolume: props.hideVolume || props.muted,
+          hideFullscreen: props.hideFullscreen || !fullscreenEnabled.value,
+          density: props.density,
+          variant: props.controlsVariant,
+          playing: playing.value,
+          progress: progress.value,
+          duration: duration.value,
+          volume: volume.value,
+          ...props.controlsProps
+        };
+        const controlsEventHandlers = {
+          onSkip: v => skipTo(v),
+          'onClick:fullscreen': () => toggleFullscreen(),
+          'onUpdate:playing': v => playing.value = v,
+          'onUpdate:progress': v => skipTo(v),
+          'onUpdate:volume': v => volume.value = v,
+          onClick: e => e.stopPropagation()
+        };
+        const controlslist = [attrs.controlslist, props.noFullscreen ? 'nofullscreen' : ''].filter(Boolean).join(' ');
+        const loadingIndicator = vue.createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "color": props.color,
+          "width": "3",
+          "size": Math.min(100, Number(props.height) / 2 || 50)
+        }, null);
+        const overlayPlayIcon = vue.createVNode(VIconBtn, {
+          "icon": "$play",
+          "size": "80",
+          "color": "#fff",
+          "variant": "outlined",
+          "iconSize": "50",
+          "class": "v-video__center-icon"
+        }, null);
+        return vue.createElementVNode("div", {
+          "ref": containerRef,
+          "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]),
+          "onKeydown": onKeydown,
+          "onClick": onClick
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(['v-video__content', elevationClasses.value]),
+          "style": vue.normalizeStyle([props.variant === 'background' ? [] : dimensionStyles.value])
+        }, [(props.eager || triggered.value) && vue.createElementVNode("video", vue.mergeProps({
+          "key": "video-element",
+          "class": ['v-video__video', roundedContainerClasses.value]
+        }, omit(attrs, ['controlslist', 'class', 'style']), {
+          "controlslist": controlslist,
+          "autoplay": props.autoplay,
+          "muted": props.muted,
+          "playsinline": true,
+          "ref": videoRef,
+          "onLoadeddata": onVideoLoaded,
+          "onPlay": () => playing.value = true,
+          "onPause": () => playing.value = false,
+          "onWaiting": () => waiting.value = true,
+          "onPlaying": () => waiting.value = false,
+          "onClick": onVideoClick,
+          "onDblclick": onDoubleClick,
+          "onTouchend": onTouchend
+        }), [slots.sources?.() ?? vue.createElementVNode("source", {
+          "src": props.src,
+          "type": props.type
+        }, null)]), props.variant === 'player' && !props.hideOverlay && vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "pause-overlay",
+          "modelValue": state.value === 'loaded',
+          "opacity": "0"
+        }, overlayProps), {
+          default: () => [vue.createVNode(VSpacer, null, null), vue.createVNode(MaybeTransition, {
+            "name": "fade-transition"
+          }, {
+            default: () => [!playing.value && overlayPlayIcon]
+          }), vue.createVNode(VSpacer, null, null)]
+        }), props.variant === 'player' && !!slots.header ? vue.createElementVNode("div", {
+          "key": "header",
+          "class": "v-video__header"
+        }, [slots.header()]) : '', vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "poster-overlay",
+          "modelValue": state.value !== 'loaded',
+          "transition": posterTransition
+        }, overlayProps), {
+          default: () => [vue.createVNode(VImg, {
+            "cover": true,
+            "src": props.image
+          }, {
+            default: () => [vue.createElementVNode("div", {
+              "class": vue.normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
+            }, [overlayPlayIcon])]
+          })]
+        }), vue.createVNode(VOverlay, vue.mergeProps({
+          "key": "loading-overlay",
+          "modelValue": state.value === 'loading' || waiting.value,
+          "opacity": ".1"
+        }, overlayProps), {
+          default: () => [loadingIndicator]
+        })]), vue.createVNode(MaybeTransition, {
+          "key": "actions",
+          "transition": props.controlsTransition
+        }, {
+          default: () => [showControls && vue.createVNode(VVideoControls, vue.mergeProps({
+            "ref": controlsRef,
+            "class": roundedControlsClasses.value
+          }, controlsProps, controlsEventHandlers), {
+            default: slots.controls,
+            prepend: slots.prepend,
+            append: slots.append
+          })]
+        })]);
+      });
+      return {
+        video: videoRef,
+        ...forwardRefs({
+          skipTo,
+          toggleFullscreen
+        }, controlsRef)
+      };
+    }
+  });
+
   var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     VAlert: VAlert,
@@ -33376,6 +34109,9 @@
     VTreeviewGroup: VTreeviewGroup,
     VTreeviewItem: VTreeviewItem,
     VValidation: VValidation,
+    VVideo: VVideo,
+    VVideoControls: VVideoControls,
+    VVideoVolume: VVideoVolume,
     VVirtualScroll: VVirtualScroll,
     VWindow: VWindow,
     VWindowItem: VWindowItem
@@ -33698,7 +34434,7 @@
       };
     });
   }
-  const version$1 = "3.9.2-master.2025-07-23";
+  const version$1 = "3.9.2-master.2025-07-24";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -33996,7 +34732,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.2-master.2025-07-23";
+  const version = "3.9.2-master.2025-07-24";
 
   /* eslint-disable local-rules/sort-imports */