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

package/dist/vuetify-labs.cjs

@@ -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.
 */
@@ -5190,6 +5190,69 @@
     };
   }
 
+  // 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: {
@@ -5224,6 +5287,7 @@
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeChunksProps(),
     ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
@@ -5242,6 +5306,7 @@
       let {
         slots
       } = _ref;
+      const root = vue.ref();
       const progress = useProxiedModel(props, 'modelValue');
       const {
         isRtl,
@@ -5283,6 +5348,24 @@
       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 {
@@ -5293,8 +5376,11 @@
         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": intersectionRef,
+        "ref": root,
         "class": vue.normalizeClass(['v-progress-linear', {
           'v-progress-linear--absolute': props.absolute,
           'v-progress-linear--active': props.active && isIntersecting.value,
@@ -5309,7 +5395,7 @@
           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",
@@ -5339,7 +5425,7 @@
           "class": vue.normalizeClass(['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined]),
           "style": vue.normalizeStyle([bufferColorStyles.value, {
             opacity: parseFloat(props.bufferOpacity),
-            width: convertToUnit(normalizedBuffer.value, '%')
+            width: convertToUnit(bufferWidth.value, '%')
           }])
         }, null), vue.createVNode(vue.Transition, {
           "name": transition.value
@@ -5347,7 +5433,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(normalizedValue.value, '%')
+              width: convertToUnit(barWidth.value, '%')
             }])
           }, null) : vue.createElementVNode("div", {
             "class": "v-progress-linear__indeterminate"
@@ -9562,6 +9648,11 @@
       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(() => ({
@@ -9665,7 +9756,8 @@
           }, 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), {
@@ -10157,6 +10249,7 @@
       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
       });
@@ -10226,7 +10319,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": "listbox",
+          "role": isSelectable.value ? 'listbox' : 'list',
           "aria-activedescendant": undefined,
           "onFocusin": onFocusin,
           "onFocusout": onFocusout,
@@ -13291,6 +13384,7 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -13910,6 +14004,7 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -18997,6 +19092,7 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -24095,6 +24191,42 @@
     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({
@@ -24127,6 +24259,7 @@
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
     },
+    ...makeFileFilterProps(),
     ...makeVFieldProps({
       clearable: true
     })
@@ -24139,7 +24272,8 @@
       '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 {
@@ -24150,6 +24284,9 @@
       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,
@@ -24223,14 +24360,38 @@
         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);
       }
       vue.watch(model, newValue => {
         const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -24247,6 +24408,8 @@
           ...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],
@@ -24300,6 +24463,7 @@
                 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,
@@ -24309,11 +24473,7 @@
                     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
@@ -31818,6 +31978,7 @@
     },
     showSize: Boolean,
     name: String,
+    ...makeFileFilterProps(),
     ...makeDelayProps(),
     ...makeDensityProps(),
     ...pick(makeVDividerProps({
@@ -31830,11 +31991,13 @@
     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 {
@@ -31843,6 +32006,9 @@
       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);
@@ -31864,14 +32030,38 @@
         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();
@@ -31889,17 +32079,16 @@
         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": e => {
-            if (!e.target) return;
-            const target = e.target;
-            model.value = [...(target.files ?? [])];
-          }
+          "onChange": onFileSelection
         }, inputAttrs), null);
         return vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VSheet, vue.mergeProps({
           "ref": vSheetRef
@@ -33676,7 +33865,7 @@
       };
     });
   }
-  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
@@ -33974,7 +34163,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.0-dev.2025-07-08";
+  const version = "3.9.0-dev.2025-07-16";
 
   /* eslint-disable local-rules/sort-imports */