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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* 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.
 */
 
-import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, camelize, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createElementVNode, normalizeStyle, normalizeClass, createVNode, TransitionGroup, Transition, mergeProps, toRefs, toValue, isRef, onBeforeMount, nextTick, withDirectives, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveDirective, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -1656,6 +1656,10 @@ function useRender(render) {
   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
@@ -2176,6 +2180,17 @@ var en = {
     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'
   }
 };
 
@@ -4258,7 +4273,7 @@ function useDensity(props) {
 
 // Types
 
-const allowedVariants$2 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
+const allowedVariants$4 = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
 function genOverlays(isClickable, name) {
   return createElementVNode(Fragment, null, [isClickable && createElementVNode("span", {
     "key": "overlay",
@@ -4273,7 +4288,7 @@ const makeVariantProps = propsFactory({
   variant: {
     type: String,
     default: 'elevated',
-    validator: v => allowedVariants$2.includes(v)
+    validator: v => allowedVariants$4.includes(v)
   }
 }, 'variant');
 function useVariant(props) {
@@ -4697,7 +4712,15 @@ const aliases = {
   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 (?)
@@ -10827,11 +10850,12 @@ function closeScrollStrategy(data) {
   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) {
@@ -10878,7 +10902,7 @@ function repositionScrollStrategy(data, props, scope) {
   }
   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.
@@ -10903,7 +10927,8 @@ function repositionScrollStrategy(data, props, scope) {
 }
 
 /** @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, {
@@ -11585,6 +11610,7 @@ const VOverlay = genericComponent()({
       root,
       contentEl,
       targetEl,
+      target,
       isActive,
       updateLocation
     });
@@ -11980,7 +12006,7 @@ const VFieldLabel = genericComponent()({
 
 // 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,
@@ -12014,7 +12040,7 @@ const makeVFieldProps = propsFactory({
   variant: {
     type: String,
     default: 'filled',
-    validator: v => allowedVariants$1.includes(v)
+    validator: v => allowedVariants$3.includes(v)
   },
   'onClick:clear': EventProp(),
   'onClick:appendInner': EventProp(),
@@ -16176,6 +16202,7 @@ const makeSliderProps = propsFactory({
     validator: v => ['vertical', 'horizontal'].includes(v)
   },
   reverse: Boolean,
+  noKeyboard: Boolean,
   ...makeRoundedProps(),
   ...makeElevationProps({
     elevation: 2
@@ -16379,6 +16406,7 @@ const useSlider = _ref => {
     min,
     max,
     mousePressed,
+    noKeyboard: toRef(() => props.noKeyboard),
     numTicks,
     onSliderMousedown,
     onSliderTouchstart,
@@ -16431,6 +16459,7 @@ const makeVSliderThumbProps = propsFactory({
     default: true
   },
   name: String,
+  noKeyboard: Boolean,
   ...makeComponentProps()
 }, 'VSliderThumb');
 const VSliderThumb = genericComponent()({
@@ -16493,6 +16522,7 @@ const VSliderThumb = genericComponent()({
       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;
@@ -16728,7 +16758,8 @@ const VSlider = genericComponent()({
       trackContainerRef,
       position,
       hasLabels,
-      readonly
+      readonly,
+      noKeyboard
     } = useSlider({
       props,
       steps,
@@ -16804,6 +16835,7 @@ const VSlider = genericComponent()({
             "ref": thumbContainerRef,
             "aria-describedby": messagesId.value,
             "focused": isFocused.value,
+            "noKeyboard": noKeyboard.value,
             "min": min.value,
             "max": max.value,
             "modelValue": model.value,
@@ -23880,7 +23912,7 @@ const VExpansionPanel = genericComponent()({
 
 // Types
 
-const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
+const allowedVariants$2 = ['default', 'accordion', 'inset', 'popout'];
 const makeVExpansionPanelsProps = propsFactory({
   flat: Boolean,
   ...makeGroupProps(),
@@ -23891,7 +23923,7 @@ const makeVExpansionPanelsProps = propsFactory({
   variant: {
     type: String,
     default: 'default',
-    validator: v => allowedVariants.includes(v)
+    validator: v => allowedVariants$2.includes(v)
   }
 }, 'VExpansionPanels');
 const VExpansionPanels = genericComponent()({
@@ -33182,6 +33214,707 @@ const VHotkey = genericComponent()({
   }
 });
 
+// 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 = toRef(() => volume.value > 70 ? '$volumeHigh' : volume.value > 40 ? '$volumeMedium' : volume.value > 10 ? '$volumeLow' : '$volumeOff');
+    const containerRef = ref();
+    useRender(() => {
+      const sliderDefaults = {
+        hideDetails: true,
+        step: 5,
+        thumbSize: 16
+      };
+      return createElementVNode("div", {
+        "class": normalizeClass(['v-video-volume', {
+          'v-video-volume--inline': props.inline
+        }, props.class]),
+        "style": normalizeStyle(props.style),
+        "ref": containerRef
+      }, [withDirectives(createVNode(VIconBtn, mergeProps({
+        "icon": volumeIcon.value,
+        "aria-label": props.label,
+        "onClick": props.onClick
+      }, attrs), {
+        default: () => [createVNode(VIcon, null, null), !props.inline && createVNode(VMenu, {
+          "offset": "8",
+          "activator": "parent",
+          "attach": containerRef.value,
+          "location": props.menuProps?.location ?? 'top center',
+          "closeOnContentClick": false
+        }, {
+          default: () => [createElementVNode("div", {
+            "class": normalizeClass(['v-video-volume__menu', `v-video-volume__menu--${props.direction}`])
+          }, [createVNode(VSlider, mergeProps({
+            "direction": props.direction,
+            "aria-label": t('$vuetify.video.volume'),
+            "modelValue": volume.value,
+            "onUpdate:modelValue": v => volume.value = v
+          }, sliderDefaults, props.sliderProps), null)])]
+        })]
+      }), [[resolveDirective("tooltip"), props.label, 'top']]), props.inline && createVNode(VSlider, 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 = shallowRef();
+    const currentTime = 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 = 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 createElementVNode("div", {
+        "class": 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": normalizeStyle([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'])
+        }, [withDirectives(createVNode(VIconBtn, {
+          "icon": playing.value ? '$pause' : '$play',
+          "size": playBtnSize,
+          "aria-label": labels.value.playAction,
+          "onClick": () => playing.value = !playing.value
+        }, null), [[resolveDirective("tooltip"), labels.value.playAction, 'top']])]), slots.prepend && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [slots.prepend(slotProps)]), props.splitTime ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.elapsed]) : props.variant !== 'default' ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.elapsed, createTextVNode(" / "), currentTime.value.total]) : '', 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' && createVNode(VSpacer, null, null), props.splitTime ? createElementVNode("span", {
+          "class": normalizeClass([pillClasses, 'v-video__time'])
+        }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && createElementVNode(Fragment, null, [createVNode(VSpacer, null, null), slots.prepend && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [slots.prepend(slotProps)]), !props.hidePlay && createElementVNode("div", {
+          "class": normalizeClass([pillClasses, 'v-video__action-play'])
+        }, [withDirectives(createVNode(VIconBtn, {
+          "icon": playing.value ? '$pause' : '$play',
+          "size": playBtnSize,
+          "aria-label": labels.value.playAction,
+          "onClick": () => playing.value = !playing.value
+        }, null), [[resolveDirective("tooltip"), labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && createElementVNode("div", {
+          "class": normalizeClass(pillClasses)
+        }, [!props.hideVolume && createVNode(VVideoVolume, 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 && withDirectives(createVNode(VIconBtn, {
+          "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
+          "aria-label": labels.value.fullscreenAction,
+          "onClick": toggleFullscreen
+        }, null), [[resolveDirective("tooltip"), labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && 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 = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded);
+    const roundedForControls = toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false);
+    const {
+      roundedClasses: roundedContainerClasses
+    } = useRounded(roundedForContainer);
+    const {
+      roundedClasses: roundedControlsClasses
+    } = useRounded(roundedForControls);
+    const containerRef = ref();
+    const videoRef = ref();
+    const controlsRef = ref();
+    const playing = useProxiedModel(props, 'playing');
+    const progress = useProxiedModel(props, 'progress');
+    const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
+    const fullscreen = shallowRef(false);
+    const waiting = shallowRef(false);
+    const triggered = shallowRef(false);
+    const startAfterLoad = shallowRef(false);
+    const state = shallowRef(props.autoplay ? 'loading' : 'idle');
+    const duration = shallowRef(0);
+    const fullscreenEnabled = 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 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;
+    }
+    watch(() => props.src, v => {
+      progress.value = 0;
+    });
+    watch(playing, v => {
+      if (!videoRef.value) return;
+      if (v) {
+        videoRef.value.play();
+      } else {
+        videoRef.value.pause();
+      }
+    });
+    watch(volume, v => {
+      if (!videoRef.value) return;
+      videoRef.value.volume = v / 100;
+    });
+    watch(triggered, () => onTriggered(), {
+      once: true
+    });
+    watch(() => props.eager, v => v && (triggered.value = true), {
+      immediate: true
+    });
+    onMounted(() => {
+      if (props.autoplay && !ssr) {
+        triggered.value = true;
+        startAfterLoad.value = true;
+      }
+    });
+    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 = createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "color": props.color,
+        "width": "3",
+        "size": Math.min(100, Number(props.height) / 2 || 50)
+      }, null);
+      const overlayPlayIcon = createVNode(VIconBtn, {
+        "icon": "$play",
+        "size": "80",
+        "color": "#fff",
+        "variant": "outlined",
+        "iconSize": "50",
+        "class": "v-video__center-icon"
+      }, null);
+      return createElementVNode("div", {
+        "ref": containerRef,
+        "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]),
+        "onKeydown": onKeydown,
+        "onClick": onClick
+      }, [createElementVNode("div", {
+        "class": normalizeClass(['v-video__content', elevationClasses.value]),
+        "style": normalizeStyle([props.variant === 'background' ? [] : dimensionStyles.value])
+      }, [(props.eager || triggered.value) && createElementVNode("video", 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?.() ?? createElementVNode("source", {
+        "src": props.src,
+        "type": props.type
+      }, null)]), props.variant === 'player' && !props.hideOverlay && createVNode(VOverlay, mergeProps({
+        "key": "pause-overlay",
+        "modelValue": state.value === 'loaded',
+        "opacity": "0"
+      }, overlayProps), {
+        default: () => [createVNode(VSpacer, null, null), createVNode(MaybeTransition, {
+          "name": "fade-transition"
+        }, {
+          default: () => [!playing.value && overlayPlayIcon]
+        }), createVNode(VSpacer, null, null)]
+      }), props.variant === 'player' && !!slots.header ? createElementVNode("div", {
+        "key": "header",
+        "class": "v-video__header"
+      }, [slots.header()]) : '', createVNode(VOverlay, mergeProps({
+        "key": "poster-overlay",
+        "modelValue": state.value !== 'loaded',
+        "transition": posterTransition
+      }, overlayProps), {
+        default: () => [createVNode(VImg, {
+          "cover": true,
+          "src": props.image
+        }, {
+          default: () => [createElementVNode("div", {
+            "class": normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
+          }, [overlayPlayIcon])]
+        })]
+      }), createVNode(VOverlay, mergeProps({
+        "key": "loading-overlay",
+        "modelValue": state.value === 'loading' || waiting.value,
+        "opacity": ".1"
+      }, overlayProps), {
+        default: () => [loadingIndicator]
+      })]), createVNode(MaybeTransition, {
+        "key": "actions",
+        "transition": props.controlsTransition
+      }, {
+        default: () => [showControls && createVNode(VVideoControls, 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,
@@ -33372,6 +34105,9 @@ var components = /*#__PURE__*/Object.freeze({
   VTreeviewGroup: VTreeviewGroup,
   VTreeviewItem: VTreeviewItem,
   VValidation: VValidation,
+  VVideo: VVideo,
+  VVideoControls: VVideoControls,
+  VVideoVolume: VVideoVolume,
   VVirtualScroll: VVirtualScroll,
   VWindow: VWindow,
   VWindowItem: VWindowItem
@@ -33694,7 +34430,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -33992,7 +34728,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */