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

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.1-dev.2025-07-17
+* Vuetify v3.9.2-master.2025-07-18
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5443,69 +5443,6 @@ 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: {
@@ -5540,7 +5477,6 @@ const makeVProgressLinearProps = propsFactory({
   stream: Boolean,
   striped: Boolean,
   roundedBar: Boolean,
-  ...makeChunksProps(),
   ...makeComponentProps(),
   ...makeLocationProps({
     location: 'top'
@@ -5559,7 +5495,6 @@ const VProgressLinear = genericComponent()({
     let {
       slots
     } = _ref;
-    const root = ref();
     const progress = useProxiedModel(props, 'modelValue');
     const {
       isRtl,
@@ -5601,24 +5536,6 @@ 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 {
@@ -5629,11 +5546,8 @@ 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": root,
+      "ref": intersectionRef,
       "class": normalizeClass(['v-progress-linear', {
         'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
@@ -5648,7 +5562,7 @@ const VProgressLinear = genericComponent()({
         height: props.active ? convertToUnit(height.value) : 0,
         '--v-progress-linear-height': convertToUnit(height.value),
         ...(props.absolute ? locationStyles.value : {})
-      }, chunksMaskStyles.value, props.style]),
+      }, props.style]),
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
       "aria-valuemin": "0",
@@ -5678,7 +5592,7 @@ const VProgressLinear = genericComponent()({
         "class": normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
         "style": normalizeStyle([bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
-          width: convertToUnit(bufferWidth.value, '%')
+          width: convertToUnit(normalizedBuffer.value, '%')
         }])
       }, null), createVNode(Transition, {
         "name": transition.value
@@ -5686,7 +5600,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(barWidth.value, '%')
+            width: convertToUnit(normalizedValue.value, '%')
           }])
         }, null) : createElementVNode("div", {
           "class": "v-progress-linear__indeterminate"
@@ -9904,11 +9818,6 @@ 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(() => ({
@@ -10012,8 +9921,7 @@ 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": ariaSelected.value,
-        "role": role.value,
+        "aria-selected": isSelectable.value ? root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value : undefined,
         "onClick": onClick,
         "onKeydown": isClickable.value && !isLink.value && onKeyDown
       }, link.linkProps), {
@@ -10515,7 +10423,6 @@ 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
     });
@@ -10587,7 +10494,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": isSelectable.value ? 'listbox' : 'list',
+        "role": "listbox",
         "aria-activedescendant": undefined,
         "onFocusin": onFocusin,
         "onFocusout": onFocusout,
@@ -13657,7 +13564,6 @@ const VSelect = genericComponent()({
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "tabindex": "-1",
-            "selectable": true,
             "aria-live": "polite",
             "aria-label": `${props.label}-list`,
             "color": props.itemColor ?? props.color
@@ -14277,7 +14183,6 @@ const VAutocomplete = genericComponent()({
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
             "tabindex": "-1",
-            "selectable": true,
             "aria-live": "polite",
             "color": props.itemColor ?? props.color
           }, listEvents, props.listProps), {
@@ -19365,7 +19270,6 @@ const VCombobox = genericComponent()({
             "selected": selectedValues.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
-            "selectable": true,
             "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
             "onFocusout": onFocusout,
@@ -24464,42 +24368,6 @@ 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({
@@ -24532,7 +24400,6 @@ const makeVFileInputProps = propsFactory({
       return wrapInArray(val).every(v => v != null && typeof v === 'object');
     }
   },
-  ...makeFileFilterProps(),
   ...makeVFieldProps({
     clearable: true
   })
@@ -24545,8 +24412,7 @@ const VFileInput = genericComponent()({
     'click:control': e => true,
     'mousedown:control': e => true,
     'update:focused': focused => true,
-    'update:modelValue': files => true,
-    rejected: files => true
+    'update:modelValue': files => true
   },
   setup(props, _ref) {
     let {
@@ -24557,9 +24423,6 @@ 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,
@@ -24633,38 +24496,14 @@ 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();
-      const {
-        accepted,
-        rejected
-      } = filterAccepted(files);
-      if (rejected.length) {
-        emit('rejected', rejected);
-      }
-      for (const file of accepted) {
+      for (const file of await handleDrop(e)) {
         dataTransfer.items.add(file);
       }
       inputRef.value.files = dataTransfer.files;
-      model.value = [...dataTransfer.files];
-      const event = new Event('change', {
+      inputRef.value.dispatchEvent(new Event('change', {
         bubbles: true
-      });
-      event.repack = true;
-      inputRef.value.dispatchEvent(event);
+      }));
     }
     watch(model, newValue => {
       const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -24681,8 +24520,6 @@ 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],
@@ -24738,7 +24575,6 @@ 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,
@@ -24748,7 +24584,11 @@ const VFileInput = genericComponent()({
                   if (isReadonly.value) e.preventDefault();
                   onFocus();
                 },
-                "onChange": onFileSelection,
+                "onChange": e => {
+                  if (!e.target) return;
+                  const target = e.target;
+                  model.value = [...(target.files ?? [])];
+                },
                 "onDragleave": onDragleave,
                 "onFocus": onFocus,
                 "onBlur": blur
@@ -30783,51 +30623,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,
@@ -30841,16 +30678,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,
@@ -30858,8 +30700,7 @@ const VTreeviewChildren = genericComponent()({
           "parentIndentLines": indentLines.children,
           "isLastGroup": nextItemHasChildren,
           "returnObject": props.returnObject
-        }), slots),
-        $stable: true
+        }), slots)
       }) : renderSlot(slots.item, {
         props: itemProps,
         item: item.raw,
@@ -30875,12 +30716,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);
       });
     });
   }
@@ -31019,14 +30859,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 {};
@@ -31545,7 +31384,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.9.1-dev.2025-07-17";
+const version$1 = "3.9.2-master.2025-07-18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31570,7 +31409,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.9.1-dev.2025-07-17";
+const version = "3.9.2-master.2025-07-18";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useHotkey, useLayout, useLocale, useRtl, useTheme, version };