@vuetify/nightly 3.9.0-dev.2025-07-08 → 3.9.0-dev.2025-07-16

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.0-dev.2025-07-08
+* Vuetify v3.9.0-dev.2025-07-16
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5464,6 +5464,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: {
@@ -5498,6 +5561,7 @@ const makeVProgressLinearProps = propsFactory({
   stream: Boolean,
   striped: Boolean,
   roundedBar: Boolean,
+  ...makeChunksProps(),
   ...makeComponentProps(),
   ...makeLocationProps({
     location: 'top'
@@ -5516,6 +5580,7 @@ const VProgressLinear = genericComponent()({
     let {
       slots
     } = _ref;
+    const root = ref();
     const progress = useProxiedModel(props, 'modelValue');
     const {
       isRtl,
@@ -5557,6 +5622,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 {
@@ -5567,8 +5650,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,
@@ -5583,7 +5669,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",
@@ -5613,7 +5699,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
@@ -5621,7 +5707,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"
@@ -9836,6 +9922,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(() => ({
@@ -9939,7 +10030,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), {
@@ -10431,6 +10523,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
     });
@@ -10500,7 +10593,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,
@@ -13565,6 +13658,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
@@ -14184,6 +14278,7 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
@@ -19271,6 +19366,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,
@@ -24369,6 +24465,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({
@@ -24401,6 +24533,7 @@ const makeVFileInputProps = propsFactory({
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
   },
+  ...makeFileFilterProps(),
   ...makeVFieldProps({
     clearable: true
   })
@@ -24413,7 +24546,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 {
@@ -24424,6 +24558,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,
@@ -24497,14 +24634,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;
@@ -24521,6 +24682,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],
@@ -24574,6 +24737,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,
@@ -24583,11 +24747,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
@@ -31382,7 +31542,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.0-dev.2025-07-08";
+const version$1 = "3.9.0-dev.2025-07-16";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31407,7 +31567,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.0-dev.2025-07-08";
+const version = "3.9.0-dev.2025-07-16";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };