@vuetify/nightly 3.9.2-master.2025-07-29 → 3.9.3-dev.2025-07-30

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-29
+* Vuetify v3.9.3-dev.2025-07-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2695,6 +2695,7 @@
       return acc;
     });
     const current = vue.toRef(() => computedThemes.value[name.value]);
+    const isSystem = vue.toRef(() => _name.value === 'system');
     const styles = vue.computed(() => {
       const lines = [];
       const important = parsedOptions.unimportant ? '' : ' !important';
@@ -2782,7 +2783,7 @@
       }
     }
     function change(themeName) {
-      if (!themeNames.value.includes(themeName)) {
+      if (themeName !== 'system' && !themeNames.value.includes(themeName)) {
         consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
         return;
       }
@@ -2815,6 +2816,7 @@
       cycle,
       toggle,
       isDisabled: parsedOptions.isDisabled,
+      isSystem,
       name,
       themes,
       current,
@@ -5254,6 +5256,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: {
@@ -5288,6 +5353,7 @@
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeChunksProps(),
     ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
@@ -5306,6 +5372,7 @@
       let {
         slots
       } = _ref;
+      const root = vue.ref();
       const progress = useProxiedModel(props, 'modelValue');
       const {
         isRtl,
@@ -5347,6 +5414,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 {
@@ -5357,8 +5442,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,
@@ -5374,7 +5462,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",
@@ -5404,7 +5492,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
@@ -5412,7 +5500,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"
@@ -9616,6 +9704,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(() => ({
@@ -9719,7 +9812,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), {
@@ -10219,6 +10313,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
       });
@@ -10290,7 +10385,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,
@@ -13369,6 +13464,7 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -13988,6 +14084,7 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -18801,19 +18898,23 @@
         get: () => {
           return _search.value;
         },
-        set: val => {
+        set: async val => {
           _search.value = val ?? '';
           if (!props.multiple && !hasSelectionSlot.value) {
             model.value = [transformItem$3(props, val)];
             vue.nextTick(() => vVirtualScrollRef.value?.scrollToIndex(0));
           }
           if (val && props.multiple && props.delimiters?.length) {
-            const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
+            const signsToMatch = props.delimiters.map(escapeForRegex).join('|');
+            const values = val.split(new RegExp(`(?:${signsToMatch})+`));
             if (values.length > 1) {
-              values.forEach(v => {
+              for (let v of values) {
                 v = v.trim();
-                if (v) select(transformItem$3(props, v));
-              });
+                if (v) {
+                  select(transformItem$3(props, v));
+                  await vue.nextTick();
+                }
+              }
               _search.value = '';
             }
           }
@@ -19095,6 +19196,7 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -24211,6 +24313,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({
@@ -24243,6 +24381,7 @@
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
     },
+    ...makeFileFilterProps(),
     ...makeVFieldProps({
       clearable: true
     })
@@ -24255,7 +24394,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 {
@@ -24266,6 +24406,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,
@@ -24339,14 +24482,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;
@@ -24363,6 +24530,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],
@@ -24418,6 +24587,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,
@@ -24427,11 +24597,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
@@ -31951,6 +32117,7 @@
     },
     showSize: Boolean,
     name: String,
+    ...makeFileFilterProps(),
     ...makeDelayProps(),
     ...makeDensityProps(),
     ...pick(makeVDividerProps({
@@ -31963,11 +32130,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 {
@@ -31976,6 +32145,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);
@@ -31997,14 +32169,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();
@@ -32022,17 +32218,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
@@ -35137,7 +35332,7 @@
       };
     });
   }
-  const version$1 = "3.9.2-master.2025-07-29";
+  const version$1 = "3.9.3-dev.2025-07-30";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -35435,7 +35630,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.9.2-master.2025-07-29";
+  const version = "3.9.3-dev.2025-07-30";
 
   /* eslint-disable local-rules/sort-imports */