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

package/dist/vuetify-labs.cjs

@@ -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.
 */
@@ -5169,69 +5169,6 @@
     };
   }
 
-  // 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 = vue.toRef(() => !!props.chunkCount || !!props.chunkWidth);
-    const chunkWidth = vue.computed(() => {
-      const containerSize = vue.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 = vue.toRef(() => Number(props.chunkGap));
-    const chunksMaskStyles = vue.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 = vue.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: {
@@ -5266,7 +5203,6 @@
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
-    ...makeChunksProps(),
     ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
@@ -5285,7 +5221,6 @@
       let {
         slots
       } = _ref;
-      const root = vue.ref();
       const progress = useProxiedModel(props, 'modelValue');
       const {
         isRtl,
@@ -5327,24 +5262,6 @@
       const isReversed = vue.computed(() => isRtl.value !== props.reverse);
       const transition = vue.computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
       const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
-      const containerWidth = vue.shallowRef(0);
-      const {
-        hasChunks,
-        chunksMaskStyles,
-        snapValueToChunk
-      } = useChunks(props, containerWidth);
-      useToggleScope(hasChunks, () => {
-        const {
-          resizeRef
-        } = useResizeObserver(entries => containerWidth.value = entries[0].contentRect.width);
-        vue.watchEffect(() => resizeRef.value = root.value);
-      });
-      const bufferWidth = vue.computed(() => {
-        return hasChunks.value ? snapValueToChunk(normalizedBuffer.value) : normalizedBuffer.value;
-      });
-      const barWidth = vue.computed(() => {
-        return hasChunks.value ? snapValueToChunk(normalizedValue.value) : normalizedValue.value;
-      });
       function handleClick(e) {
         if (!intersectionRef.value) return;
         const {
@@ -5355,11 +5272,8 @@
         const value = isReversed.value ? width - e.clientX + (right - width) : e.clientX - left;
         progress.value = Math.round(value / width * max.value);
       }
-      vue.watchEffect(() => {
-        intersectionRef.value = root.value;
-      });
       useRender(() => vue.createVNode(props.tag, {
-        "ref": root,
+        "ref": intersectionRef,
         "class": vue.normalizeClass(['v-progress-linear', {
           'v-progress-linear--absolute': props.absolute,
           'v-progress-linear--active': props.active && isIntersecting.value,
@@ -5374,7 +5288,7 @@
           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",
@@ -5404,7 +5318,7 @@
           "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
           "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
-            width: convertToUnit(bufferWidth.value, '%')
+            width: convertToUnit(normalizedBuffer.value, '%')
           }])
         }, null), vue.createVNode(vue.Transition, {
           "name": transition.value
@@ -5412,7 +5326,7 @@
           default: () => [!props.indeterminate ? vue.createElementVNode("div", {
             "class": vue.normalizeClass(['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined]),
             "style": vue.normalizeStyle([barColorStyles.value, {
-              width: convertToUnit(barWidth.value, '%')
+              width: convertToUnit(normalizedValue.value, '%')
             }])
           }, null) : vue.createElementVNode("div", {
             "class": "v-progress-linear__indeterminate"
@@ -9630,11 +9544,6 @@
       const isLink = vue.toRef(() => props.link !== false && link.isLink.value);
       const isSelectable = vue.computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
-      const role = vue.computed(() => list ? isSelectable.value ? 'option' : 'listitem' : undefined);
-      const ariaSelected = vue.computed(() => {
-        if (!isSelectable.value) return undefined;
-        return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
-      });
       const roundedProps = vue.toRef(() => props.rounded || props.nav);
       const color = vue.toRef(() => props.color ?? props.activeColor);
       const variantProps = vue.toRef(() => ({
@@ -9738,8 +9647,7 @@
           }, 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), {
@@ -10241,7 +10149,6 @@
       const activeColor = vue.toRef(() => props.activeColor);
       const baseColor = vue.toRef(() => props.baseColor);
       const color = vue.toRef(() => props.color);
-      const isSelectable = vue.toRef(() => props.selectable || props.activatable);
       createList({
         filterable: props.filterable
       });
@@ -10313,7 +10220,7 @@
           }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
           "style": vue.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,
@@ -13383,7 +13290,6 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
-              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -14003,7 +13909,6 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
-              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -19091,7 +18996,6 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -24190,42 +24094,6 @@
     return item.isDirectory ? `${path}/${item.name}` : path;
   }
 
-  // Utilities
-  // Composables
-  const makeFileFilterProps = propsFactory({
-    filterByType: String
-  }, 'file-accept');
-  function useFileFilter(props) {
-    const fileFilter = vue.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({
@@ -24258,7 +24126,6 @@
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
     },
-    ...makeFileFilterProps(),
     ...makeVFieldProps({
       clearable: true
     })
@@ -24271,8 +24138,7 @@
       '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 {
@@ -24283,9 +24149,6 @@
       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,
@@ -24359,38 +24222,14 @@
         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);
+        }));
       }
       vue.watch(model, newValue => {
         const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -24407,8 +24246,6 @@
           ...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 vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": props.multiple ? model.value : model.value[0],
@@ -24464,7 +24301,6 @@
                 return vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("input", vue.mergeProps({
                   "ref": inputRef,
                   "type": "file",
-                  "accept": inputAccept,
                   "readonly": isReadonly.value,
                   "disabled": isDisabled.value,
                   "multiple": props.multiple,
@@ -24474,7 +24310,11 @@
                     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
@@ -30509,51 +30349,48 @@
           parentIndentLines: props.parentIndentLines,
           variant: props.indentLinesVariant
         });
-        function renderItem(itemProps) {
-          return vue.createVNode(VTreeviewItem, itemProps, {
-            prepend: slotProps => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.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 => vue.createElementVNode(vue.Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && vue.createElementVNode("div", null, [vue.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,
@@ -30567,16 +30404,21 @@
             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 vue.createVNode(VTreeviewItem, vue.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: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "items": children,
@@ -30584,8 +30426,7 @@
             "parentIndentLines": indentLines.children,
             "isLastGroup": nextItemHasChildren,
             "returnObject": props.returnObject
-          }), slots),
-          $stable: true
+          }), slots)
         }) : renderSlot(slots.item, {
           props: itemProps,
           item: item.raw,
@@ -30601,12 +30442,11 @@
               props: item.raw
             }, () => vue.createVNode(VListSubheader, item.props, null));
           }
-          return renderItem({
-            ...itemProps,
-            hideActions: props.hideActions,
-            indentLines: indentLines.leaf,
-            value: props.returnObject ? vue.toRaw(item.raw) : itemProps.value
-          });
+          return vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, {
+            "hideActions": props.hideActions,
+            "indentLines": indentLines.leaf,
+            "value": props.returnObject ? vue.toRaw(item.raw) : itemProps.value
+          }), slotsWithItem);
         });
       });
     }
@@ -30745,14 +30585,13 @@
           "selected": selected.value,
           "onUpdate:selected": $event => selected.value = $event
         }), {
-          default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
+          default: () => [vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
             "density": props.density,
             "returnObject": props.returnObject,
             "items": items.value,
             "parentIndentLines": props.indentLines ? [] : undefined,
             "indentLinesVariant": indentLinesVariant
-          }), slots),
-          $stable: true
+          }), slots)]
         });
       });
       return {};
@@ -31993,7 +31832,6 @@
     },
     showSize: Boolean,
     name: String,
-    ...makeFileFilterProps(),
     ...makeDelayProps(),
     ...makeDensityProps(),
     ...pick(makeVDividerProps({
@@ -32006,13 +31844,11 @@
     inheritAttrs: false,
     props: makeVFileUploadProps(),
     emits: {
-      'update:modelValue': files => true,
-      rejected: files => true
+      'update:modelValue': files => true
     },
     setup(props, _ref) {
       let {
         attrs,
-        emit,
         slots
       } = _ref;
       const {
@@ -32021,9 +31857,6 @@
       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 = vue.shallowRef(false);
       const vSheetRef = vue.ref(null);
@@ -32045,38 +31878,14 @@
         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();
-        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);
+        }));
       }
       function onClick() {
         inputRef.value?.click();
@@ -32094,16 +31903,17 @@
         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 = vue.createElementVNode("input", vue.mergeProps({
           "ref": inputRef,
           "type": "file",
-          "accept": inputAccept,
           "disabled": props.disabled,
           "multiple": props.multiple,
           "name": props.name,
-          "onChange": onFileSelection
+          "onChange": e => {
+            if (!e.target) return;
+            const target = e.target;
+            model.value = [...(target.files ?? [])];
+          }
         }, inputAttrs), null);
         return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSheet, vue.mergeProps({
           "ref": vSheetRef
@@ -33882,7 +33692,7 @@
       };
     });
   }
-  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
@@ -34180,7 +33990,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.1-dev.2025-07-17";
+  const version = "3.9.2-master.2025-07-18";
 
   /* eslint-disable local-rules/sort-imports */