@vuetify/nightly 3.9.2-master.2025-07-28 → 3.9.3-dev.2025-07-30

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-28
+* Vuetify v3.9.3-dev.2025-07-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2145,6 +2145,14 @@ var en = {
     header: 'Enter date',
     input: {
       placeholder: 'Enter date'
+    },
+    ariaLabel: {
+      previousMonth: 'Previous month',
+      nextMonth: 'Next month',
+      selectYear: 'Select year',
+      selectDate: '{0}',
+      // Full date format
+      currentDate: 'Today, {0}'
     }
   },
   noDataText: 'No data available',
@@ -2683,6 +2691,7 @@ function createTheme(options) {
     return acc;
   });
   const current = toRef(() => computedThemes.value[name.value]);
+  const isSystem = toRef(() => _name.value === 'system');
   const styles = computed(() => {
     const lines = [];
     const important = parsedOptions.unimportant ? '' : ' !important';
@@ -2770,7 +2779,7 @@ function createTheme(options) {
     }
   }
   function change(themeName) {
-    if (!themeNames.value.includes(themeName)) {
+    if (themeName !== 'system' && !themeNames.value.includes(themeName)) {
       consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
       return;
     }
@@ -2803,6 +2812,7 @@ function createTheme(options) {
     cycle,
     toggle,
     isDisabled: parsedOptions.isDisabled,
+    isSystem,
     name,
     themes,
     current,
@@ -5242,6 +5252,69 @@ function useLocation(props) {
   };
 }
 
+// Utilities
+
+// Types
+
+// Composables
+const makeChunksProps = propsFactory({
+  chunkCount: {
+    type: [Number, String],
+    default: null
+  },
+  chunkWidth: {
+    type: [Number, String],
+    default: null
+  },
+  chunkGap: {
+    type: [Number, String],
+    default: 4
+  }
+}, 'chunks');
+function useChunks(props, containerWidth) {
+  const hasChunks = toRef(() => !!props.chunkCount || !!props.chunkWidth);
+  const chunkWidth = computed(() => {
+    const containerSize = toValue(containerWidth);
+    if (!containerSize) {
+      return 0;
+    }
+    if (!props.chunkCount) {
+      return Number(props.chunkWidth);
+    }
+    const count = Number(props.chunkCount);
+    const availableWidth = containerSize - Number(props.chunkGap) * (count - 1);
+    return availableWidth / count;
+  });
+  const chunkGap = toRef(() => Number(props.chunkGap));
+  const chunksMaskStyles = computed(() => {
+    if (!hasChunks.value) {
+      return {};
+    }
+    const chunkGapPx = convertToUnit(chunkGap.value);
+    const chunkWidthPx = convertToUnit(chunkWidth.value);
+    return {
+      maskRepeat: 'repeat-x',
+      maskImage: `linear-gradient(90deg, #000, #000 ${chunkWidthPx}, transparent ${chunkWidthPx}, transparent)`,
+      maskSize: `calc(${chunkWidthPx} + ${chunkGapPx}) 100%`
+    };
+  });
+  function snapValueToChunk(val) {
+    const containerSize = toValue(containerWidth);
+    if (!containerSize) {
+      return val;
+    }
+    const gapRelativeSize = 100 * chunkGap.value / containerSize;
+    const chunkRelativeSize = 100 * (chunkWidth.value + chunkGap.value) / containerSize;
+    const filledChunks = Math.floor((val + gapRelativeSize) / chunkRelativeSize);
+    return clamp(0, filledChunks * chunkRelativeSize - gapRelativeSize / 2, 100);
+  }
+  return {
+    hasChunks,
+    chunksMaskStyles,
+    snapValueToChunk
+  };
+}
+
 const makeVProgressLinearProps = propsFactory({
   absolute: Boolean,
   active: {
@@ -5276,6 +5349,7 @@ const makeVProgressLinearProps = propsFactory({
   stream: Boolean,
   striped: Boolean,
   roundedBar: Boolean,
+  ...makeChunksProps(),
   ...makeComponentProps(),
   ...makeLocationProps({
     location: 'top'
@@ -5294,6 +5368,7 @@ const VProgressLinear = genericComponent()({
     let {
       slots
     } = _ref;
+    const root = ref();
     const progress = useProxiedModel(props, 'modelValue');
     const {
       isRtl,
@@ -5335,6 +5410,24 @@ const VProgressLinear = genericComponent()({
     const isReversed = computed(() => isRtl.value !== props.reverse);
     const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
     const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
+    const containerWidth = shallowRef(0);
+    const {
+      hasChunks,
+      chunksMaskStyles,
+      snapValueToChunk
+    } = useChunks(props, containerWidth);
+    useToggleScope(hasChunks, () => {
+      const {
+        resizeRef
+      } = useResizeObserver(entries => containerWidth.value = entries[0].contentRect.width);
+      watchEffect(() => resizeRef.value = root.value);
+    });
+    const bufferWidth = computed(() => {
+      return hasChunks.value ? snapValueToChunk(normalizedBuffer.value) : normalizedBuffer.value;
+    });
+    const barWidth = computed(() => {
+      return hasChunks.value ? snapValueToChunk(normalizedValue.value) : normalizedValue.value;
+    });
     function handleClick(e) {
       if (!intersectionRef.value) return;
       const {
@@ -5345,8 +5438,11 @@ const VProgressLinear = genericComponent()({
       const value = isReversed.value ? width - e.clientX + (right - width) : e.clientX - left;
       progress.value = Math.round(value / width * max.value);
     }
+    watchEffect(() => {
+      intersectionRef.value = root.value;
+    });
     useRender(() => createVNode(props.tag, {
-      "ref": intersectionRef,
+      "ref": root,
       "class": normalizeClass(['v-progress-linear', {
         'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
@@ -5362,7 +5458,7 @@ const VProgressLinear = genericComponent()({
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...(props.absolute ? locationStyles.value : {})
-      }, props.style]),
+      }, chunksMaskStyles.value, props.style]),
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -5392,7 +5488,7 @@ const VProgressLinear = genericComponent()({
         "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
         "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
-          width: convertToUnit(normalizedBuffer.value, '%')
+          width: convertToUnit(bufferWidth.value, '%')
         }])
       }, null), createVNode(Transition, {
         "name": transition.value
@@ -5400,7 +5496,7 @@ const VProgressLinear = genericComponent()({
         default: () => [!props.indeterminate ? createElementVNode("div", {
           "class": normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
           "style": normalizeStyle([barColorStyles.value, {
-            width: convertToUnit(normalizedValue.value, '%')
+            width: convertToUnit(barWidth.value, '%')
           }])
         }, null) : createElementVNode("div", {
           "class": "v-progress-linear__indeterminate"
@@ -5683,8 +5779,8 @@ const ripples = {
     if (!el?._ripple?.enabled) return;
     const ripples = el.getElementsByClassName('v-ripple__animation');
     if (ripples.length === 0) return;
-    const animation = ripples[ripples.length - 1];
-    if (animation.dataset.isHiding) return;else animation.dataset.isHiding = 'true';
+    const animation = Array.from(ripples).findLast(ripple => !ripple.dataset.isHiding);
+    if (!animation) return;else animation.dataset.isHiding = 'true';
     const diff = performance.now() - Number(animation.dataset.activated);
     const delay = Math.max(250 - diff, 0);
     setTimeout(() => {
@@ -9604,6 +9700,11 @@ const VListItem = genericComponent()({
     const isLink = toRef(() => props.link !== false && link.isLink.value);
     const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
+    const role = computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
+    const ariaSelected = computed(() => {
+      if (!isSelectable.value) return undefined;
+      return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
+    });
     const roundedProps = toRef(() => props.rounded || props.nav);
     const color = toRef(() => props.color ?? props.activeColor);
     const variantProps = toRef(() => ({
@@ -9707,7 +9808,8 @@ const VListItem = genericComponent()({
         }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
         "style": [colorStyles.value, dimensionStyles.value, props.style],
         "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
-        "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
+        "aria-selected": ariaSelected.value,
+        "role": role.value,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
@@ -9902,11 +10004,9 @@ const VListChildren = genericComponent()({
           let {
             props: activatorProps
           } = _ref3;
-          const listItemProps = {
-            ...itemProps,
-            ...activatorProps,
+          const listItemProps = mergeProps(itemProps, activatorProps, {
             value: props.returnObject ? item : itemProps.value
-          };
+          });
           return slots.header ? slots.header({
             props: listItemProps
           }) : createVNode(VListItem, listItemProps, slotsWithItem);
@@ -10209,6 +10309,7 @@ const VList = genericComponent()({
     const activeColor = toRef(() => props.activeColor);
     const baseColor = toRef(() => props.baseColor);
     const color = toRef(() => props.color);
+    const isSelectable = toRef(() => props.selectable || props.activatable);
     createList({
       filterable: props.filterable
     });
@@ -10280,7 +10381,7 @@ const VList = genericComponent()({
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
         "style": normalizeStyle([backgroundColorStyles.value, dimensionStyles.value, props.style]),
         "tabindex": props.disabled ? -1 : 0,
-        "role": "listbox",
+        "role": isSelectable.value ? 'listbox' : 'list',
         "aria-activedescendant": undefined,
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
@@ -13359,6 +13460,7 @@ const VSelect = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "aria-label": `${props.label}-list`,
             "color": props.itemColor ?? props.color
@@ -13978,6 +14080,7 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
@@ -16310,6 +16413,7 @@ const useSlider = _ref => {
   const numTicks = computed(() => (max.value - min.value) / step.value);
   const disabled = toRef(() => props.disabled);
   const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
+  const thumbLabelColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor);
   const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
   const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
   const mousePressed = shallowRef(false);
@@ -16467,6 +16571,7 @@ const useSlider = _ref => {
     step,
     thumbSize,
     thumbColor,
+    thumbLabelColor,
     thumbLabel: toRef(() => props.thumbLabel),
     ticks: toRef(() => props.ticks),
     tickSize,
@@ -16532,6 +16637,7 @@ const VSliderThumb = genericComponent()({
       min,
       max,
       thumbColor,
+      thumbLabelColor,
       step,
       disabled,
       thumbSize,
@@ -16553,6 +16659,10 @@ const VSliderThumb = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(thumbColor);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(thumbLabelColor);
     const {
       pageup,
       pagedown,
@@ -16618,9 +16728,7 @@ const VSliderThumb = genericComponent()({
         "onKeydown": !readonly.value ? onKeydown : undefined
       }, [createElementVNode("div", {
         "class": normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
-        "style": {
-          ...textColorStyles.value
-        }
+        "style": normalizeStyle(textColorStyles.value)
       }, null), withDirectives(createElementVNode("div", {
         "class": normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
         "style": normalizeStyle(textColorStyles.value)
@@ -16633,10 +16741,13 @@ const VSliderThumb = genericComponent()({
         default: () => [withDirectives(createElementVNode("div", {
           "class": "v-slider-thumb__label-container"
         }, [createElementVNode("div", {
-          "class": normalizeClass(['v-slider-thumb__label', textColorClasses.value])
+          "class": normalizeClass(['v-slider-thumb__label', backgroundColorClasses.value]),
+          "style": normalizeStyle(backgroundColorStyles.value)
         }, [createElementVNode("div", null, [slots['thumb-label']?.({
           modelValue: props.modelValue
-        }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+        }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)]), createElementVNode("div", {
+          "class": "v-slider-thumb__label-wedge"
+        }, null)])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
       })]);
     });
     return {};
@@ -18783,19 +18894,23 @@ const VCombobox = genericComponent()({
       get: () => {
         return _search.value;
       },
-      set: val => {
+      set: async val => {
         _search.value = val ?? '';
         if (!props.multiple && !hasSelectionSlot.value) {
           model.value = [transformItem$3(props, val)];
           nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
         }
         if (val && props.multiple && props.delimiters?.length) {
-          const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
+          const signsToMatch = props.delimiters.map(escapeForRegex).join('|');
+          const values = val.split(new RegExp(`(?:${signsToMatch})+`));
           if (values.length > 1) {
-            values.forEach(v => {
+            for (let v of values) {
               v = v.trim();
-              if (v) select(transformItem$3(props, v));
-            });
+              if (v) {
+                select(transformItem$3(props, v));
+                await nextTick();
+              }
+            }
             _search.value = '';
           }
         }
@@ -19077,6 +19192,7 @@ const VCombobox = genericComponent()({
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
+            "selectable": true,
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
@@ -22650,6 +22766,9 @@ const VDatePickerControls = genericComponent()({
     let {
       emit
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const disableMonth = computed(() => {
       return Array.isArray(props.disabled) ? props.disabled.includes('text') : !!props.disabled;
     });
@@ -22696,6 +22815,7 @@ const VDatePickerControls = genericComponent()({
         "density": "comfortable",
         "icon": props.modeIcon,
         "variant": "text",
+        "aria-label": t('$vuetify.datePicker.ariaLabel.selectYear'),
         "onClick": onClickYear
       }, null), createVNode(VSpacer, null, null), createElementVNode("div", {
         "class": "v-date-picker-controls__month"
@@ -22705,6 +22825,7 @@ const VDatePickerControls = genericComponent()({
         "density": "comfortable",
         "icon": props.prevIcon,
         "variant": "text",
+        "aria-label": t('$vuetify.datePicker.ariaLabel.previousMonth'),
         "onClick": onClickPrev
       }, null), createVNode(VBtn, {
         "data-testid": "next-month",
@@ -22712,6 +22833,7 @@ const VDatePickerControls = genericComponent()({
         "icon": props.nextIcon,
         "density": "comfortable",
         "variant": "text",
+        "aria-label": t('$vuetify.datePicker.ariaLabel.nextMonth'),
         "onClick": onClickNext
       }, null)])]);
     });
@@ -22976,6 +23098,9 @@ const VDatePickerMonth = genericComponent()({
       slots
     } = _ref;
     const daysRef = ref();
+    const {
+      t
+    } = useLocale();
     const {
       daysInMonth,
       model,
@@ -23032,6 +23157,11 @@ const VDatePickerMonth = genericComponent()({
         model.value = [rangeStart.value];
       }
     }
+    function getDateAriaLabel(item) {
+      const fullDate = adapter.format(item.date, 'fullDateWithWeekday');
+      const localeKey = item.isToday ? 'currentDate' : 'selectDate';
+      return t(`$vuetify.datePicker.ariaLabel.${localeKey}`, fullDate);
+    }
     function onMultipleClick(value) {
       const index = model.value.findIndex(selection => adapter.isSameDay(selection, value));
       if (index === -1) {
@@ -23083,6 +23213,8 @@ const VDatePickerMonth = genericComponent()({
             ripple: false,
             text: item.localized,
             variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',
+            'aria-label': getDateAriaLabel(item),
+            'aria-current': item.isToday ? 'date' : undefined,
             onClick: () => onClick(item.date)
           },
           item,
@@ -23137,11 +23269,13 @@ const VDatePickerMonths = genericComponent()({
       }
       return createRange(12).map(i => {
         const text = adapter.format(date, 'monthShort');
+        const label = adapter.format(date, 'month');
         const isDisabled = !!(!isMonthAllowed(i) || props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date) || props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))));
         date = adapter.getNextMonth(date);
         return {
           isDisabled,
           text,
+          label,
           value: i
         };
       });
@@ -23168,6 +23302,7 @@ const VDatePickerMonths = genericComponent()({
     }, [months.value.map((month, i) => {
       const btnProps = {
         active: model.value === i,
+        ariaLabel: month.label,
         color: model.value === i ? props.color : undefined,
         disabled: month.isDisabled,
         rounded: true,
@@ -24174,6 +24309,42 @@ function appendIfDirectory(path, item) {
   return item.isDirectory ? `${path}/${item.name}` : path;
 }
 
+// Utilities
+// Composables
+const makeFileFilterProps = propsFactory({
+  filterByType: String
+}, 'file-accept');
+function useFileFilter(props) {
+  const fileFilter = computed(() => props.filterByType ? createFilter(props.filterByType) : null);
+  function filterAccepted(files) {
+    if (fileFilter.value) {
+      const accepted = files.filter(fileFilter.value);
+      return {
+        accepted,
+        rejected: files.filter(f => !accepted.includes(f))
+      };
+    }
+    return {
+      accepted: files,
+      rejected: []
+    };
+  }
+  return {
+    filterAccepted
+  };
+}
+function createFilter(v) {
+  const types = v.split(',').map(x => x.trim().toLowerCase());
+  const extensionsToMatch = types.filter(x => x.startsWith('.'));
+  const wildcards = types.filter(x => x.endsWith('/*'));
+  const typesToMatch = types.filter(x => !extensionsToMatch.includes(x) && !wildcards.includes(x));
+  return file => {
+    const extension = file.name.split('.').at(-1)?.toLowerCase() ?? '';
+    const typeGroup = file.type.split('/').at(0)?.toLowerCase() ?? '';
+    return typesToMatch.includes(file.type) || extensionsToMatch.includes(`.${extension}`) || wildcards.includes(`${typeGroup}/*`);
+  };
+}
+
 // Types
 
 const makeVFileInputProps = propsFactory({
@@ -24206,6 +24377,7 @@ const makeVFileInputProps = propsFactory({
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
   },
+  ...makeFileFilterProps(),
   ...makeVFieldProps({
     clearable: true
   })
@@ -24218,7 +24390,8 @@ const VFileInput = genericComponent()({
     'click:control': e => true,
     'mousedown:control': e => true,
     'update:focused': focused => true,
-    'update:modelValue': files => true
+    'update:modelValue': files => true,
+    rejected: files => true
   },
   setup(props, _ref) {
     let {
@@ -24229,6 +24402,9 @@ const VFileInput = genericComponent()({
     const {
       t
     } = useLocale();
+    const {
+      filterAccepted
+    } = useFileFilter(props);
     const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => !props.multiple && Array.isArray(val) ? val[0] : val);
     const {
       isFocused,
@@ -24302,14 +24478,38 @@ const VFileInput = genericComponent()({
       e.stopImmediatePropagation();
       isDragging.value = false;
       if (!inputRef.value || !hasFilesOrFolders(e)) return;
+      const allDroppedFiles = await handleDrop(e);
+      selectAccepted(allDroppedFiles);
+    }
+    function onFileSelection(e) {
+      if (!e.target || e.repack) return; // prevent loop
+
+      if (!props.filterByType) {
+        const target = e.target;
+        model.value = [...(target.files ?? [])];
+      } else {
+        selectAccepted([...e.target.files]);
+      }
+    }
+    function selectAccepted(files) {
       const dataTransfer = new DataTransfer();
-      for (const file of await handleDrop(e)) {
+      const {
+        accepted,
+        rejected
+      } = filterAccepted(files);
+      if (rejected.length) {
+        emit('rejected', rejected);
+      }
+      for (const file of accepted) {
         dataTransfer.items.add(file);
       }
       inputRef.value.files = dataTransfer.files;
-      inputRef.value.dispatchEvent(new Event('change', {
+      model.value = [...dataTransfer.files];
+      const event = new Event('change', {
         bubbles: true
-      }));
+      });
+      event.repack = true;
+      inputRef.value.dispatchEvent(event);
     }
     watch(model, newValue => {
       const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -24326,6 +24526,8 @@ const VFileInput = genericComponent()({
         ...inputProps
       } = VInput.filterProps(props);
       const fieldProps = VField.filterProps(props);
+      const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
+      const inputAccept = expectsDirectory ? undefined : props.filterByType ?? String(attrs.accept);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": props.multiple ? model.value : model.value[0],
@@ -24381,6 +24583,7 @@ const VFileInput = genericComponent()({
               return createElementVNode(Fragment, null, [createElementVNode("input", mergeProps({
                 "ref": inputRef,
                 "type": "file",
+                "accept": inputAccept,
                 "readonly": isReadonly.value,
                 "disabled": isDisabled.value,
                 "multiple": props.multiple,
@@ -24390,11 +24593,7 @@ const VFileInput = genericComponent()({
                   if (isReadonly.value) e.preventDefault();
                   onFocus();
                 },
-                "onChange": e => {
-                  if (!e.target) return;
-                  const target = e.target;
-                  model.value = [...(target.files ?? [])];
-                },
+                "onChange": onFileSelection,
                 "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
@@ -31914,6 +32113,7 @@ const makeVFileUploadProps = propsFactory({
   },
   showSize: Boolean,
   name: String,
+  ...makeFileFilterProps(),
   ...makeDelayProps(),
   ...makeDensityProps(),
   ...pick(makeVDividerProps({
@@ -31926,11 +32126,13 @@ const VFileUpload = genericComponent()({
   inheritAttrs: false,
   props: makeVFileUploadProps(),
   emits: {
-    'update:modelValue': files => true
+    'update:modelValue': files => true,
+    rejected: files => true
   },
   setup(props, _ref) {
     let {
       attrs,
+      emit,
       slots
     } = _ref;
     const {
@@ -31939,6 +32141,9 @@ const VFileUpload = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
+    const {
+      filterAccepted
+    } = useFileFilter(props);
     const model = useProxiedModel(props, 'modelValue', props.modelValue, val => wrapInArray(val), val => props.multiple || Array.isArray(props.modelValue) ? val : val[0]);
     const isDragging = shallowRef(false);
     const vSheetRef = ref(null);
@@ -31960,14 +32165,38 @@ const VFileUpload = genericComponent()({
       e.stopImmediatePropagation();
       isDragging.value = false;
       if (!inputRef.value) return;
+      const allDroppedFiles = await handleDrop(e);
+      selectAccepted(allDroppedFiles);
+    }
+    function onFileSelection(e) {
+      if (!e.target || e.repack) return; // prevent loop
+
+      if (!props.filterByType) {
+        const target = e.target;
+        model.value = [...(target.files ?? [])];
+      } else {
+        selectAccepted([...e.target.files]);
+      }
+    }
+    function selectAccepted(files) {
       const dataTransfer = new DataTransfer();
-      for (const file of await handleDrop(e)) {
+      const {
+        accepted,
+        rejected
+      } = filterAccepted(files);
+      if (rejected.length) {
+        emit('rejected', rejected);
+      }
+      for (const file of accepted) {
         dataTransfer.items.add(file);
       }
       inputRef.value.files = dataTransfer.files;
-      inputRef.value.dispatchEvent(new Event('change', {
+      model.value = [...dataTransfer.files];
+      const event = new Event('change', {
         bubbles: true
-      }));
+      });
+      event.repack = true;
+      inputRef.value.dispatchEvent(event);
     }
     function onClick() {
       inputRef.value?.click();
@@ -31985,17 +32214,16 @@ const VFileUpload = genericComponent()({
       const cardProps = VSheet.filterProps(props);
       const dividerProps = VDivider.filterProps(props);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const expectsDirectory = attrs.webkitdirectory !== undefined && attrs.webkitdirectory !== false;
+      const inputAccept = expectsDirectory ? undefined : props.filterByType ?? String(attrs.accept);
       const inputNode = createElementVNode("input", mergeProps({
         "ref": inputRef,
         "type": "file",
+        "accept": inputAccept,
         "disabled": props.disabled,
         "multiple": props.multiple,
         "name": props.name,
-        "onChange": e => {
-          if (!e.target) return;
-          const target = e.target;
-          model.value = [...(target.files ?? [])];
-        }
+        "onChange": onFileSelection
       }, inputAttrs), null);
       return createElementVNode(Fragment, null, [createVNode(VSheet, mergeProps({
         "ref": vSheetRef
@@ -35100,7 +35328,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.2-master.2025-07-28";
+const version$1 = "3.9.3-dev.2025-07-30";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -35398,7 +35626,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.9.2-master.2025-07-28";
+const version = "3.9.3-dev.2025-07-30";
 
 /* eslint-disable local-rules/sort-imports */