@vuetify/nightly 3.9.1-master.2025-07-17 → 3.9.2-dev.2025-07-18

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.1-master.2025-07-17
+* Vuetify v3.9.2-dev.2025-07-18
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5443,6 +5443,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: {
@@ -5477,6 +5540,7 @@ const makeVProgressLinearProps = propsFactory({
   stream: Boolean,
   striped: Boolean,
   roundedBar: Boolean,
+  ...makeChunksProps(),
   ...makeComponentProps(),
   ...makeLocationProps({
     location: 'top'
@@ -5495,6 +5559,7 @@ const VProgressLinear = genericComponent()({
     let {
       slots
     } = _ref;
+    const root = ref();
     const progress = useProxiedModel(props, 'modelValue');
     const {
       isRtl,
@@ -5536,6 +5601,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 {
@@ -5546,8 +5629,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,
@@ -5562,7 +5648,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",
@@ -5592,7 +5678,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
@@ -5600,7 +5686,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"
@@ -9818,6 +9904,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(() => ({
@@ -9921,7 +10012,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), {
@@ -10423,6 +10515,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
     });
@@ -10494,7 +10587,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,
@@ -13564,6 +13657,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
@@ -14183,6 +14277,7 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "tabindex": "-1",
+            "selectable": true,
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
@@ -19270,6 +19365,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,
@@ -24368,6 +24464,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({
@@ -24400,6 +24532,7 @@ const makeVFileInputProps = propsFactory({
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
   },
+  ...makeFileFilterProps(),
   ...makeVFieldProps({
     clearable: true
   })
@@ -24412,7 +24545,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 {
@@ -24423,6 +24557,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,
@@ -24496,14 +24633,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;
@@ -24520,6 +24681,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],
@@ -24575,6 +24738,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,
@@ -24584,11 +24748,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
@@ -30623,51 +30783,48 @@ const VTreeviewChildren = genericComponent()({
         parentIndentLines: props.parentIndentLines,
         variant: props.indentLinesVariant
       });
-      function renderItem(itemProps) {
-        return createVNode(VTreeviewItem, itemProps, {
-          prepend: slotProps => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
-            "key": item.value,
-            "modelValue": slotProps.isSelected,
-            "disabled": props.disabled,
-            "loading": loading,
-            "color": props.selectedColor,
-            "density": props.density,
-            "indeterminate": slotProps.isIndeterminate,
-            "indeterminateIcon": props.indeterminateIcon,
-            "falseIcon": props.falseIcon,
-            "trueIcon": props.trueIcon,
-            "onUpdate:modelValue": v => selectItem(slotProps.select, v),
-            "onClick": e => e.stopPropagation(),
-            "onKeydown": e => {
-              if (!['Enter', 'Space'].includes(e.key)) return;
-              e.stopPropagation();
-              selectItem(slotProps.select, slotProps.isSelected);
-            }
-          }, null)]), slots.prepend?.({
-            ...slotProps,
-            ...treeItemProps,
-            item: item.raw,
-            internalItem: item
-          })]),
-          append: slots.append ? slotProps => slots.append?.({
-            ...slotProps,
-            ...treeItemProps,
-            item: item.raw,
-            internalItem: item
-          }) : undefined,
-          title: slots.title ? slotProps => slots.title?.({
-            ...slotProps,
-            item: item.raw,
-            internalItem: item
-          }) : undefined,
-          subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
-            ...slotProps,
-            item: item.raw,
-            internalItem: item
-          }) : undefined,
-          $stable: true
-        });
-      }
+      const slotsWithItem = {
+        prepend: slotProps => createElementVNode(Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && createElementVNode("div", null, [createVNode(VCheckboxBtn, {
+          "key": item.value,
+          "modelValue": slotProps.isSelected,
+          "disabled": props.disabled,
+          "loading": loading,
+          "color": props.selectedColor,
+          "density": props.density,
+          "indeterminate": slotProps.isIndeterminate,
+          "indeterminateIcon": props.indeterminateIcon,
+          "falseIcon": props.falseIcon,
+          "trueIcon": props.trueIcon,
+          "onUpdate:modelValue": v => selectItem(slotProps.select, v),
+          "onClick": e => e.stopPropagation(),
+          "onKeydown": e => {
+            if (!['Enter', 'Space'].includes(e.key)) return;
+            e.stopPropagation();
+            selectItem(slotProps.select, slotProps.isSelected);
+          }
+        }, null)]), slots.prepend?.({
+          ...slotProps,
+          ...treeItemProps,
+          item: item.raw,
+          internalItem: item
+        })]),
+        append: slots.append ? slotProps => slots.append?.({
+          ...slotProps,
+          ...treeItemProps,
+          item: item.raw,
+          internalItem: item
+        }) : undefined,
+        title: slots.title ? slotProps => slots.title?.({
+          ...slotProps,
+          item: item.raw,
+          internalItem: item
+        }) : undefined,
+        subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
+          ...slotProps,
+          item: item.raw,
+          internalItem: item
+        }) : undefined
+      };
       const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
       const treeviewChildrenProps = VTreeviewChildren.filterProps({
         ...props,
@@ -30681,16 +30838,21 @@ const VTreeviewChildren = genericComponent()({
           let {
             props: activatorProps
           } = _ref2;
-          return renderItem({
+          const listItemProps = {
             ...itemProps,
             ...activatorProps,
-            loading,
-            hideActions: props.hideActions,
-            indentLines: indentLines.node,
-            value: props.returnObject ? item.raw : itemProps.value,
+            value: itemProps?.value,
             onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
             onClick: isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
-          });
+          };
+          return createVNode(VTreeviewItem, mergeProps({
+            "ref": el => activatorItems.value[index] = el
+          }, listItemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.node,
+            "value": props.returnObject ? item.raw : itemProps.value,
+            "loading": loading
+          }), slotsWithItem);
         },
         default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "items": children,
@@ -30698,8 +30860,7 @@ const VTreeviewChildren = genericComponent()({
           "parentIndentLines": indentLines.children,
           "isLastGroup": nextItemHasChildren,
           "returnObject": props.returnObject
-        }), slots),
-        $stable: true
+        }), slots)
       }) : renderSlot(slots.item, {
         props: itemProps,
         item: item.raw,
@@ -30715,12 +30876,11 @@ const VTreeviewChildren = genericComponent()({
             props: item.raw
           }, () => createVNode(VListSubheader, item.props, null));
         }
-        return renderItem({
-          ...itemProps,
-          hideActions: props.hideActions,
-          indentLines: indentLines.leaf,
-          value: props.returnObject ? toRaw(item.raw) : itemProps.value
-        });
+        return createVNode(VTreeviewItem, mergeProps(itemProps, {
+          "hideActions": props.hideActions,
+          "indentLines": indentLines.leaf,
+          "value": props.returnObject ? toRaw(item.raw) : itemProps.value
+        }), slotsWithItem);
       });
     });
   }
@@ -30859,14 +31019,13 @@ const VTreeview = genericComponent()({
         "selected": selected.value,
         "onUpdate:selected": $event => selected.value = $event
       }), {
-        default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
+        default: () => [createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
           "density": props.density,
           "returnObject": props.returnObject,
           "items": items.value,
           "parentIndentLines": props.indentLines ? [] : undefined,
           "indentLinesVariant": indentLinesVariant
-        }), slots),
-        $stable: true
+        }), slots)]
       });
     });
     return {};
@@ -31385,7 +31544,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.1-master.2025-07-17";
+const version$1 = "3.9.2-dev.2025-07-18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31410,7 +31569,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.1-master.2025-07-17";
+const version = "3.9.2-dev.2025-07-18";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };