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

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.9.2-master.2025-07-28
+* Vuetify v3.9.3-dev.2025-07-30
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2617,6 +2617,14 @@
       header: 'Enter date',
       input: {
         placeholder: 'Enter date'
+      },
+      ariaLabel: {
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        selectYear: 'Select year',
+        selectDate: '{0}',
+        // Full date format
+        currentDate: 'Today, {0}'
       }
     },
     noDataText: 'No data available',
@@ -3155,6 +3163,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';
@@ -3242,7 +3251,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;
       }
@@ -3275,6 +3284,7 @@
       cycle,
       toggle,
       isDisabled: parsedOptions.isDisabled,
+      isSystem,
       name,
       themes,
       current,
@@ -5486,6 +5496,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: {
@@ -5520,6 +5593,7 @@
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeChunksProps(),
     ...makeComponentProps(),
     ...makeLocationProps({
       location: 'top'
@@ -5538,6 +5612,7 @@
       let {
         slots
       } = _ref;
+      const root = vue.ref();
       const progress = useProxiedModel(props, 'modelValue');
       const {
         isRtl,
@@ -5579,6 +5654,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 {
@@ -5589,8 +5682,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,
@@ -5606,7 +5702,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",
@@ -5636,7 +5732,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
@@ -5644,7 +5740,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"
@@ -5927,8 +6023,8 @@
       if (!el?._ripple?.enabled) return;
       const ripples = el.getElementsByClassName('v-ripple__animation');
       if (ripples.length === 0) return;
-      const animation = ripples[ripples.length - 1];
-      if (animation.dataset.isHiding) return;else animation.dataset.isHiding = 'true';
+      const animation = Array.from(ripples).findLast(ripple => !ripple.dataset.isHiding);
+      if (!animation) return;else animation.dataset.isHiding = 'true';
       const diff = performance.now() - Number(animation.dataset.activated);
       const delay = Math.max(250 - diff, 0);
       setTimeout(() => {
@@ -9848,6 +9944,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(() => ({
@@ -9951,7 +10052,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), {
@@ -10146,11 +10248,9 @@
             let {
               props: activatorProps
             } = _ref3;
-            const listItemProps = {
-              ...itemProps,
-              ...activatorProps,
+            const listItemProps = vue.mergeProps(itemProps, activatorProps, {
               value: props.returnObject ? item : itemProps.value
-            };
+            });
             return slots.header ? slots.header({
               props: listItemProps
             }) : vue.createVNode(VListItem, listItemProps, slotsWithItem);
@@ -10453,6 +10553,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
       });
@@ -10524,7 +10625,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,
@@ -13603,6 +13704,7 @@
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "aria-label": `${props.label}-list`,
               "color": props.itemColor ?? props.color
@@ -14222,6 +14324,7 @@
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
               "tabindex": "-1",
+              "selectable": true,
               "aria-live": "polite",
               "color": props.itemColor ?? props.color
             }, listEvents, props.listProps), {
@@ -16554,6 +16657,7 @@
     const numTicks = vue.computed(() => (max.value - min.value) / step.value);
     const disabled = vue.toRef(() => props.disabled);
     const thumbColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
+    const thumbLabelColor = vue.computed(() => props.error || props.disabled ? undefined : props.thumbColor);
     const trackColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
     const trackFillColor = vue.computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
     const mousePressed = vue.shallowRef(false);
@@ -16711,6 +16815,7 @@
       step,
       thumbSize,
       thumbColor,
+      thumbLabelColor,
       thumbLabel: vue.toRef(() => props.thumbLabel),
       ticks: vue.toRef(() => props.ticks),
       tickSize,
@@ -16776,6 +16881,7 @@
         min,
         max,
         thumbColor,
+        thumbLabelColor,
         step,
         disabled,
         thumbSize,
@@ -16797,6 +16903,10 @@
         textColorClasses,
         textColorStyles
       } = useTextColor(thumbColor);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(thumbLabelColor);
       const {
         pageup,
         pagedown,
@@ -16862,9 +16972,7 @@
           "onKeydown": !readonly.value ? onKeydown : undefined
         }, [vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
-          "style": {
-            ...textColorStyles.value
-          }
+          "style": vue.normalizeStyle(textColorStyles.value)
         }, null), vue.withDirectives(vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
           "style": vue.normalizeStyle(textColorStyles.value)
@@ -16877,10 +16985,13 @@
           default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-slider-thumb__label-container"
           }, [vue.createElementVNode("div", {
-            "class": vue.normalizeClass(['v-slider-thumb__label', textColorClasses.value])
+            "class": vue.normalizeClass(['v-slider-thumb__label', backgroundColorClasses.value]),
+            "style": vue.normalizeStyle(backgroundColorStyles.value)
           }, [vue.createElementVNode("div", null, [slots['thumb-label']?.({
             modelValue: props.modelValue
-          }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+          }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)]), vue.createElementVNode("div", {
+            "class": "v-slider-thumb__label-wedge"
+          }, null)])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
         })]);
       });
       return {};
@@ -19027,19 +19138,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 = '';
             }
           }
@@ -19321,6 +19436,7 @@
               "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
+              "selectable": true,
               "onKeydown": onListKeydown,
               "onFocusin": onFocusin,
               "onFocusout": onFocusout,
@@ -22894,6 +23010,9 @@
       let {
         emit
       } = _ref;
+      const {
+        t
+      } = useLocale();
       const disableMonth = vue.computed(() => {
         return Array.isArray(props.disabled) ? props.disabled.includes('text') : !!props.disabled;
       });
@@ -22940,6 +23059,7 @@
           "density": "comfortable",
           "icon": props.modeIcon,
           "variant": "text",
+          "aria-label": t('$vuetify.datePicker.ariaLabel.selectYear'),
           "onClick": onClickYear
         }, null), vue.createVNode(VSpacer, null, null), vue.createElementVNode("div", {
           "class": "v-date-picker-controls__month"
@@ -22949,6 +23069,7 @@
           "density": "comfortable",
           "icon": props.prevIcon,
           "variant": "text",
+          "aria-label": t('$vuetify.datePicker.ariaLabel.previousMonth'),
           "onClick": onClickPrev
         }, null), vue.createVNode(VBtn, {
           "data-testid": "next-month",
@@ -22956,6 +23077,7 @@
           "icon": props.nextIcon,
           "density": "comfortable",
           "variant": "text",
+          "aria-label": t('$vuetify.datePicker.ariaLabel.nextMonth'),
           "onClick": onClickNext
         }, null)])]);
       });
@@ -23220,6 +23342,9 @@
         slots
       } = _ref;
       const daysRef = vue.ref();
+      const {
+        t
+      } = useLocale();
       const {
         daysInMonth,
         model,
@@ -23276,6 +23401,11 @@
           model.value = [rangeStart.value];
         }
       }
+      function getDateAriaLabel(item) {
+        const fullDate = adapter.format(item.date, 'fullDateWithWeekday');
+        const localeKey = item.isToday ? 'currentDate' : 'selectDate';
+        return t(`$vuetify.datePicker.ariaLabel.${localeKey}`, fullDate);
+      }
       function onMultipleClick(value) {
         const index = model.value.findIndex(selection => adapter.isSameDay(selection, value));
         if (index === -1) {
@@ -23327,6 +23457,8 @@
               ripple: false,
               text: item.localized,
               variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',
+              'aria-label': getDateAriaLabel(item),
+              'aria-current': item.isToday ? 'date' : undefined,
               onClick: () => onClick(item.date)
             },
             item,
@@ -23381,11 +23513,13 @@
         }
         return createRange(12).map(i => {
           const text = adapter.format(date, 'monthShort');
+          const label = adapter.format(date, 'month');
           const isDisabled = !!(!isMonthAllowed(i) || props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date) || props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))));
           date = adapter.getNextMonth(date);
           return {
             isDisabled,
             text,
+            label,
             value: i
           };
         });
@@ -23412,6 +23546,7 @@
       }, [months.value.map((month, i) => {
         const btnProps = {
           active: model.value === i,
+          ariaLabel: month.label,
           color: model.value === i ? props.color : undefined,
           disabled: month.isDisabled,
           rounded: true,
@@ -24418,6 +24553,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({
@@ -24450,6 +24621,7 @@
         return wrapInArray(val).every(v => v != null && typeof v === 'object');
       }
     },
+    ...makeFileFilterProps(),
     ...makeVFieldProps({
       clearable: true
     })
@@ -24462,7 +24634,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 {
@@ -24473,6 +24646,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,
@@ -24546,14 +24722,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;
@@ -24570,6 +24770,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],
@@ -24625,6 +24827,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,
@@ -24634,11 +24837,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
@@ -31436,7 +31635,7 @@
       };
     });
   }
-  const version$1 = "3.9.2-master.2025-07-28";
+  const version$1 = "3.9.3-dev.2025-07-30";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31461,7 +31660,7 @@
       ...options
     });
   };
-  const version = "3.9.2-master.2025-07-28";
+  const version = "3.9.3-dev.2025-07-30";
   createVuetify.version = version;
 
   exports.blueprints = index;