@vuetify/nightly 3.8.4-master.2025-05-13 → 3.8.5-dev.2025-05-14

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.4-master.2025-05-13
+* Vuetify v3.8.5-dev.2025-05-14
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -85,6 +85,7 @@
   const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
   const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
   const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
+  const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
 
   function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
   function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -2299,6 +2300,7 @@
   function genDefaults$2() {
     return {
       defaultTheme: 'light',
+      prefix: 'v-',
       variations: {
         colors: [],
         lighten: 0,
@@ -2380,7 +2382,10 @@
           }
         }
       },
-      stylesheetId: 'vuetify-theme-stylesheet'
+      stylesheetId: 'vuetify-theme-stylesheet',
+      scoped: false,
+      unimportant: false,
+      utilities: true
     };
   }
   function parseThemeOptions() {
@@ -2403,21 +2408,21 @@
   function createCssClass(lines, selector, content, scope) {
     lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => `  ${line};\n`), '}\n');
   }
-  function genCssVariables(theme) {
+  function genCssVariables(theme, prefix) {
     const lightOverlay = theme.dark ? 2 : 1;
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
       const rgb = parseColor(value);
-      variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
+      variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
-        variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
+        variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
       const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-      variables.push(`--v-${key}: ${rgb ?? value}`);
+      variables.push(`--${prefix}${key}: ${rgb ?? value}`);
     }
     return variables;
   }
@@ -2461,7 +2466,8 @@
     const scopeSelector = `:where(${scope})`;
     return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
   }
-  function upsertStyles(styleEl, styles) {
+  function upsertStyles(id, cspNonce, styles) {
+    const styleEl = getOrCreateStyleElement(id, cspNonce);
     if (!styleEl) return;
     styleEl.innerHTML = styles;
   }
@@ -2481,8 +2487,17 @@
   // Composables
   function createTheme(options) {
     const parsedOptions = parseThemeOptions(options);
-    const name = vue.shallowRef(parsedOptions.defaultTheme);
+    const _name = vue.shallowRef(parsedOptions.defaultTheme);
     const themes = vue.ref(parsedOptions.themes);
+    const systemName = vue.shallowRef('light');
+    const name = vue.computed({
+      get() {
+        return _name.value === 'system' ? systemName.value : _name.value;
+      },
+      set(val) {
+        _name.value = val;
+      }
+    });
     const computedThemes = vue.computed(() => {
       const acc = {};
       for (const [name, original] of Object.entries(themes.value)) {
@@ -2503,28 +2518,49 @@
     const current = vue.toRef(() => computedThemes.value[name.value]);
     const styles = vue.computed(() => {
       const lines = [];
+      const important = parsedOptions.unimportant ? '' : ' !important';
+      const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
       if (current.value?.dark) {
         createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
       }
-      createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
+      createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
       for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-        createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)], parsedOptions.scope);
-      }
-      const bgLines = [];
-      const fgLines = [];
-      const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
-      for (const key of colors) {
-        if (key.startsWith('on-')) {
-          createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-        } else {
-          createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
-          createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope);
+        createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
+      }
+      if (parsedOptions.utilities) {
+        const bgLines = [];
+        const fgLines = [];
+        const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
+        for (const key of colors) {
+          if (key.startsWith('on-')) {
+            createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+          } else {
+            createCssClass(bgLines, `.${scoped}bg-${key}`, [`--${parsedOptions.prefix}theme-overlay-multiplier: var(--${parsedOptions.prefix}theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`, `color: rgb(var(--${parsedOptions.prefix}theme-on-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
+            createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
+          }
         }
+        lines.push(...bgLines, ...fgLines);
       }
-      lines.push(...bgLines, ...fgLines);
       return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
     });
+    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
+    const themeNames = vue.toRef(() => Object.keys(computedThemes.value));
+    if (SUPPORTS_MATCH_MEDIA) {
+      const media = window.matchMedia('(prefers-color-scheme: dark)');
+      function updateSystemName() {
+        systemName.value = media.matches ? 'dark' : 'light';
+      }
+      updateSystemName();
+      media.addEventListener('change', updateSystemName, {
+        passive: true
+      });
+      if (vue.getCurrentScope()) {
+        vue.onScopeDispose(() => {
+          media.removeEventListener('change', updateSystemName);
+        });
+      }
+    }
     function install(app) {
       if (parsedOptions.isDisabled) return;
       const head = app._context.provides.usehead;
@@ -2562,22 +2598,55 @@
           updateStyles();
         }
         function updateStyles() {
-          upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
+          upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
         }
       }
     }
-    const themeClasses = vue.toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
+    function change(themeName) {
+      if (!themeNames.value.includes(themeName)) {
+        consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
+        return;
+      }
+      name.value = themeName;
+    }
+    function cycle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
+      const currentIndex = themeArray.indexOf(name.value);
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
+      change(themeArray[nextIndex]);
+    }
+    function toggle() {
+      let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
+      cycle(themeArray);
+    }
+    const globalName = new Proxy(name, {
+      get(target, prop) {
+        return target[prop];
+      },
+      set(target, prop, val) {
+        if (prop === 'value') {
+          deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
+        }
+        // @ts-expect-error
+        target[prop] = val;
+        return true;
+      }
+    });
     return {
       install,
+      change,
+      cycle,
+      toggle,
       isDisabled: parsedOptions.isDisabled,
       name,
       themes,
       current,
       computedThemes,
+      prefix: parsedOptions.prefix,
       themeClasses,
       styles,
       global: {
-        name,
+        name: globalName,
         current
       }
     };
@@ -2588,7 +2657,7 @@
     if (!theme) throw new Error('Could not find Vuetify theme injection');
     const name = vue.toRef(() => props.theme ?? theme.name.value);
     const current = vue.toRef(() => theme.themes.value[name.value]);
-    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
+    const themeClasses = vue.toRef(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
     const newTheme = {
       ...theme,
       name,
@@ -4135,9 +4204,15 @@
     };
   }
 
+  // Types
+
   const makeVBtnGroupProps = propsFactory({
     baseColor: String,
     divided: Boolean,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
@@ -4171,7 +4246,7 @@
       } = useRounded(props);
       provideDefaults({
         VBtn: {
-          height: 'auto',
+          height: vue.toRef(() => props.direction === 'horizontal' ? 'auto' : null),
           baseColor: vue.toRef(() => props.baseColor),
           color: vue.toRef(() => props.color),
           density: vue.toRef(() => props.density),
@@ -4181,7 +4256,7 @@
       });
       useRender(() => {
         return vue.createVNode(props.tag, {
-          "class": ['v-btn-group', {
+          "class": ['v-btn-group', `v-btn-group--${props.direction}`, {
             'v-btn-group--divided': props.divided
           }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
           "style": props.style
@@ -4510,7 +4585,8 @@
     treeviewCollapse: 'mdi-menu-down',
     treeviewExpand: 'mdi-menu-right',
     eyeDropper: 'mdi-eyedropper',
-    upload: 'mdi-cloud-upload'
+    upload: 'mdi-cloud-upload',
+    color: 'mdi-palette'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -5868,6 +5944,31 @@
   // Utilities
   const VAlertTitle = createSimpleFunctional('v-alert-title');
 
+  // Utilities
+
+  // Types
+
+  // Types
+
+  // Composables
+  const makeIconSizeProps = propsFactory({
+    iconSize: [Number, String],
+    iconSizes: {
+      type: Array,
+      default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
+    }
+  }, 'iconSize');
+  function useIconSizes(props, fallback) {
+    const iconSize = vue.computed(() => {
+      const iconSizeMap = new Map(props.iconSizes);
+      const _iconSize = props.iconSize ?? fallback() ?? 'default';
+      return iconSizeMap.has(_iconSize) ? iconSizeMap.get(_iconSize) : _iconSize;
+    });
+    return {
+      iconSize
+    };
+  }
+
   // Types
 
   const allowedTypes = ['success', 'info', 'warning', 'error'];
@@ -5907,6 +6008,7 @@
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeIconSizeProps(),
     ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
@@ -5934,6 +6036,9 @@
         if (!props.type) return props.icon;
         return props.icon ?? `$${props.type}`;
       });
+      const {
+        iconSize
+      } = useIconSizes(props, () => props.prominent ? 44 : 28);
       const {
         themeClasses
       } = provideTheme(props);
@@ -5981,6 +6086,11 @@
         const hasPrepend = !!(slots.prepend || icon.value);
         const hasTitle = !!(slots.title || props.title);
         const hasClose = !!(slots.close || props.closable);
+        const iconProps = {
+          density: props.density,
+          icon: icon.value,
+          size: iconSize.value
+        };
         return isActive.value && vue.createVNode(props.tag, {
           "class": ['v-alert', props.border && {
             'v-alert--border': !!props.border,
@@ -5998,19 +6108,14 @@
           }, null), hasPrepend && vue.createVNode("div", {
             "key": "prepend",
             "class": "v-alert__prepend"
-          }, [!slots.prepend ? vue.createVNode(VIcon, {
-            "key": "prepend-icon",
-            "density": props.density,
-            "icon": icon.value,
-            "size": props.prominent ? 44 : 28
-          }, null) : vue.createVNode(VDefaultsProvider, {
+          }, [!slots.prepend ? vue.createVNode(VIcon, vue.mergeProps({
+            "key": "prepend-icon"
+          }, iconProps), null) : vue.createVNode(VDefaultsProvider, {
             "key": "prepend-defaults",
             "disabled": !icon.value,
             "defaults": {
               VIcon: {
-                density: props.density,
-                icon: icon.value,
-                size: props.prominent ? 44 : 28
+                ...iconProps
               }
             }
           }, slots.prepend)]), vue.createVNode("div", {
@@ -12356,7 +12461,12 @@
     }
     function calculateOffset(index) {
       index = clamp(index, 0, items.value.length - 1);
-      return offsets[index] || 0;
+      const whole = Math.floor(index);
+      const fraction = index % 1;
+      const next = whole + 1;
+      const wholeOffset = offsets[whole] || 0;
+      const nextOffset = offsets[next] || wholeOffset;
+      return wholeOffset + (nextOffset - wholeOffset) * fraction;
     }
     function calculateIndex(scrollTop) {
       return binaryClosest(offsets, scrollTop);
@@ -29076,11 +29186,240 @@
 
   // Types
 
+  const makeVColorInputProps = propsFactory({
+    pip: Boolean,
+    pipIcon: {
+      type: String,
+      default: '$color'
+    },
+    ...makeFocusProps(),
+    ...makeVConfirmEditProps(),
+    ...makeVTextFieldProps(),
+    ...omit(makeVColorPickerProps(), ['width'])
+  }, 'VColorInput');
+  const VColorInput = genericComponent()({
+    name: 'VColorInput',
+    props: makeVColorInputProps(),
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
+      const model = useProxiedModel(props, 'modelValue');
+      const menu = vue.shallowRef(false);
+      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const display = vue.computed(() => model.value || null);
+      function onKeydown(e) {
+        if (e.key !== 'Enter') return;
+        if (!menu.value || !isFocused.value) {
+          menu.value = true;
+          return;
+        }
+        const target = e.target;
+        model.value = target.value;
+      }
+      function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        menu.value = true;
+      }
+      function onSave() {
+        menu.value = false;
+      }
+      useRender(() => {
+        const confirmEditProps = VConfirmEdit.filterProps(props);
+        const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+        const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
+        const hasPrepend = !!(slots.prepend || props.pipIcon);
+        return vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "class": ['v-color-input', props.class],
+          "style": props.style,
+          "modelValue": display.value,
+          "onKeydown": isInteractive.value ? onKeydown : undefined,
+          "focused": menu.value || isFocused.value,
+          "onFocus": focus,
+          "onBlur": blur,
+          "onClick:control": isInteractive.value ? onClick : undefined,
+          "onClick:prependInner": isInteractive.value ? onClick : undefined,
+          "onClick:appendInner": isInteractive.value ? onClick : undefined,
+          "onUpdate:modelValue": val => {
+            model.value = val;
+          }
+        }), {
+          ...slots,
+          prepend: props.pipIcon ? arg => vue.createVNode(vue.Fragment, null, [hasPrepend && vue.createVNode(VIcon, {
+            "color": props.pip ? model.value : undefined,
+            "icon": props.pipIcon
+          }, null), slots.prepend?.(arg)]) : undefined,
+          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "min-width": "0",
+            "closeOnContentClick": false,
+            "openOnClick": false
+          }, {
+            default: () => [vue.createVNode(VConfirmEdit, vue.mergeProps(confirmEditProps, {
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
+              "onSave": onSave
+            }), {
+              default: _ref2 => {
+                let {
+                  actions,
+                  model: proxyModel,
+                  save,
+                  cancel,
+                  isPristine
+                } = _ref2;
+                return vue.createVNode(VColorPicker, vue.mergeProps(colorPickerProps, {
+                  "modelValue": proxyModel.value,
+                  "onUpdate:modelValue": val => {
+                    proxyModel.value = val;
+                    model.value = val;
+                  },
+                  "onMousedown": e => e.preventDefault()
+                }), {
+                  actions: !props.hideActions ? () => slots.actions?.({
+                    save,
+                    cancel,
+                    isPristine
+                  }) ?? actions() : undefined
+                });
+              }
+            })]
+          }), slots.default?.()])
+        });
+      });
+    }
+  });
+
+  // Composables
+
+  // Types
+
+  // Types
+
+  class DateFormatSpec {
+    constructor(order,
+    // mdy | dmy | ymd
+    separator // / | - | .
+    ) {
+      this.order = order;
+      this.separator = separator;
+    }
+    get format() {
+      return this.order.split('').map(sign => `${sign}${sign}`).join(this.separator).replace('yy', 'yyyy');
+    }
+    static canBeParsed(v) {
+      if (typeof v !== 'string') return false;
+      const lowercase = v.toLowerCase();
+      return ['y', 'm', 'd'].every(sign => lowercase.includes(sign)) && ['/', '-', '.'].some(sign => v.includes(sign));
+    }
+    static parse(v) {
+      if (!DateFormatSpec.canBeParsed(v)) {
+        throw new Error(`[${v}] cannot be parsed into date format specification`);
+      }
+      const order = v.toLowerCase().split('').filter((c, i, all) => 'dmy'.includes(c) && all.indexOf(c) === i).join('');
+      const separator = ['/', '-', '.'].find(sign => v.includes(sign));
+      return new DateFormatSpec(order, separator);
+    }
+  }
+  const makeDateFormatProps = propsFactory({
+    inputFormat: {
+      type: String,
+      validator: v => !v || DateFormatSpec.canBeParsed(v)
+    }
+  }, 'date-format');
+  function useDateFormat(props, locale) {
+    const adapter = useDate();
+    function inferFromLocale() {
+      const localeForDateFormat = locale.value ?? 'en-US';
+      const formatFromLocale = Intl.DateTimeFormat(localeForDateFormat, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      }).format(adapter.toJsDate(adapter.parseISO('1999-12-07'))).replace(/(07)|(٠٧)|(٢٩)|(۱۶)|(০৭)/, 'dd').replace(/(12)|(١٢)|(٠٨)|(۰۹)|(১২)/, 'mm').replace(/(1999)|(2542)|(١٩٩٩)|(١٤٢٠)|(۱۳۷۸)|(১৯৯৯)/, 'yyyy').replace(/[^ymd\-/.]/g, '').replace(/\.$/, '');
+      if (!DateFormatSpec.canBeParsed(formatFromLocale)) {
+        consoleWarn(`Date format inferred from locale [${localeForDateFormat}] is invalid: [${formatFromLocale}]`);
+        return 'mm/dd/yyyy';
+      }
+      return formatFromLocale;
+    }
+    const currentFormat = vue.toRef(() => {
+      return DateFormatSpec.canBeParsed(props.inputFormat) ? DateFormatSpec.parse(props.inputFormat) : DateFormatSpec.parse(inferFromLocale());
+    });
+    function parseDate(dateString) {
+      function parseDateParts(text) {
+        const parts = text.trim().split(currentFormat.value.separator);
+        return {
+          y: Number(parts[currentFormat.value.order.indexOf('y')]),
+          m: Number(parts[currentFormat.value.order.indexOf('m')]),
+          d: Number(parts[currentFormat.value.order.indexOf('d')])
+        };
+      }
+      function validateDateParts(dateParts) {
+        const {
+          y: year,
+          m: month,
+          d: day
+        } = dateParts;
+        if (!year || !month || !day) return null;
+        if (month < 1 || month > 12) return null;
+        if (day < 1 || day > 31) return null;
+        return {
+          year: autoFixYear(year),
+          month,
+          day
+        };
+      }
+      function autoFixYear(year) {
+        const currentYear = adapter.getYear(adapter.date());
+        if (year > 100 || currentYear % 100 >= 50) {
+          return year;
+        }
+        const currentCentury = ~~(currentYear / 100) * 100;
+        return year < 50 ? currentCentury + year : currentCentury - 100 + year;
+      }
+      const dateParts = parseDateParts(dateString);
+      const validatedParts = validateDateParts(dateParts);
+      if (!validatedParts) return null;
+      const {
+        year,
+        month,
+        day
+      } = validatedParts;
+      const pad = v => String(v).padStart(2, '0');
+      return adapter.parseISO(`${year}-${pad(month)}-${pad(day)}`);
+    }
+    function isValid(text) {
+      return !!parseDate(text);
+    }
+    function formatDate(value) {
+      const parts = adapter.toISO(value).split('-');
+      return currentFormat.value.order.split('').map(sign => parts['ymd'.indexOf(sign)]).join(currentFormat.value.separator);
+    }
+    return {
+      isValid,
+      parseDate,
+      formatDate,
+      parserFormat: vue.toRef(() => currentFormat.value.format)
+    };
+  }
+
+  // Types
+
   // Types
 
   const makeVDateInputProps = propsFactory({
     displayFormat: [Function, String],
-    inputFormat: [Function, String],
     location: {
       type: String,
       default: 'bottom start'
@@ -29090,6 +29429,7 @@
       type: Array,
       default: () => ['blur', 'enter']
     },
+    ...makeDateFormatProps(),
     ...makeDisplayProps({
       mobile: null
     }),
@@ -29098,7 +29438,6 @@
       hideActions: true
     }),
     ...makeVTextFieldProps({
-      placeholder: 'mm/dd/yyyy',
       prependIcon: '$calendar'
     }),
     ...omit(makeVDatePickerProps({
@@ -29121,9 +29460,16 @@
         slots
       } = _ref;
       const {
-        t
+        t,
+        current: currentLocale
       } = useLocale();
       const adapter = useDate();
+      const {
+        isValid,
+        parseDate,
+        formatDate,
+        parserFormat
+      } = useDateFormat(props, currentLocale);
       const {
         mobile
       } = useDisplay(props);
@@ -29142,80 +29488,10 @@
         if (typeof props.displayFormat === 'function') {
           return props.displayFormat(date);
         }
-        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
-      }
-      function parseDateString(dateString, format) {
-        function countConsecutiveChars(str, startIndex) {
-          const char = str[startIndex];
-          let count = 0;
-          while (str[startIndex + count] === char) count++;
-          return count;
-        }
-        function parseDateParts(dateString, format) {
-          const dateParts = {};
-          let stringIndex = 0;
-          const upperFormat = format.toUpperCase();
-          for (let formatIndex = 0; formatIndex < upperFormat.length;) {
-            const formatChar = upperFormat[formatIndex];
-            const charCount = countConsecutiveChars(upperFormat, formatIndex);
-            const dateValue = dateString.slice(stringIndex, stringIndex + charCount);
-            if (['Y', 'M', 'D'].includes(formatChar)) {
-              const numValue = parseInt(dateValue);
-              if (isNaN(numValue)) return null;
-              dateParts[formatChar] = numValue;
-            }
-            formatIndex += charCount;
-            stringIndex += charCount;
-          }
-          return dateParts;
-        }
-        function validateDateParts(dateParts) {
-          const {
-            Y: year,
-            M: month,
-            D: day
-          } = dateParts;
-          if (!year || !month || !day) return null;
-          if (month < 1 || month > 12) return null;
-          if (day < 1 || day > 31) return null;
-          return {
-            year,
-            month,
-            day
-          };
+        if (props.displayFormat) {
+          return adapter.format(date, props.displayFormat ?? 'keyboardDate');
         }
-        const dateParts = parseDateParts(dateString, format);
-        if (!dateParts) return null;
-        const validatedParts = validateDateParts(dateParts);
-        if (!validatedParts) return null;
-        const {
-          year,
-          month,
-          day
-        } = validatedParts;
-        return {
-          year,
-          month,
-          day
-        };
-      }
-      function parseUserInput(value) {
-        if (typeof props.inputFormat === 'function') {
-          return props.inputFormat(value);
-        }
-        if (typeof props.inputFormat === 'string') {
-          const formattedDate = parseDateString(value, props.inputFormat);
-          if (!formattedDate) {
-            return model.value;
-          }
-          const {
-            year,
-            month,
-            day
-          } = formattedDate;
-          return adapter.parseISO(`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
-        }
-        return adapter.isValid(value) ? adapter.date(value) : model.value;
+        return formatDate(date);
       }
       const display = vue.computed(() => {
         const value = wrapInArray(model.value);
@@ -29293,12 +29569,32 @@
         let {
           value
         } = _ref2;
-        model.value = !value ? emptyModelValue() : parseUserInput(value);
+        if (!value.trim()) {
+          model.value = emptyModelValue();
+        } else if (!props.multiple) {
+          if (isValid(value)) {
+            model.value = parseDate(value);
+          }
+        } else {
+          const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
+          if (parts.every(isValid)) {
+            if (props.multiple === 'range') {
+              model.value = getRange(parts);
+            } else {
+              model.value = parts.map(parseDate);
+            }
+          }
+        }
+      }
+      function getRange(inputDates) {
+        const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+        const diff = adapter.getDiff(stop ?? start, start, 'days');
+        return [start, ...createRange(diff, 1).map(i => adapter.addDays(start, i))];
       }
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
         const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
-        const textFieldProps = VTextField.filterProps(props);
+        const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -29306,11 +29602,13 @@
           "style": props.style,
           "modelValue": display.value,
           "inputmode": inputmode.value,
+          "placeholder": props.placeholder ?? parserFormat.value,
           "readonly": isReadonly.value,
           "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
           "onFocus": focus,
           "onBlur": onBlur,
+          "validationValue": model.value,
           "onClick:control": isInteractive.value ? onClick : undefined,
           "onClick:prepend": isInteractive.value ? onClick : undefined,
           "onUpdate:modelValue": onUpdateDisplayModel
@@ -29696,11 +29994,6 @@
     hideOverlay: Boolean,
     icon: [String, Function, Object],
     iconColor: String,
-    iconSize: [Number, String],
-    iconSizes: {
-      type: Array,
-      default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
-    },
     loading: Boolean,
     opacity: [Number, String],
     readonly: Boolean,
@@ -29720,6 +30013,7 @@
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeElevationProps(),
+    ...makeIconSizeProps(),
     ...makeRoundedProps(),
     ...makeTagProps({
       tag: 'button'
@@ -29774,7 +30068,6 @@
         })()
       }));
       const btnSizeMap = new Map(props.sizes);
-      const iconSizeMap = new Map(props.iconSizes);
       function onClick() {
         if (props.disabled || props.readonly || isActive.value === undefined || props.tag === 'a' && attrs.href) return;
         isActive.value = !isActive.value;
@@ -29786,12 +30079,12 @@
         const btnSize = hasNamedSize ? btnSizeMap.get(_btnSize) : _btnSize;
         const btnHeight = props.height ?? btnSize;
         const btnWidth = props.width ?? btnSize;
-        const _iconSize = props.iconSize;
-        const hasNamedIconSize = iconSizeMap.has(_iconSize);
-        const iconSize = !_iconSize ? hasNamedSize ? iconSizeMap.get(_btnSize) : iconSizeMap.get('default') : hasNamedIconSize ? iconSizeMap.get(_iconSize) : _iconSize;
+        const {
+          iconSize
+        } = useIconSizes(props, () => new Map(props.iconSizes).get(_btnSize));
         const iconProps = {
           icon,
-          size: iconSize,
+          size: iconSize.value,
           iconColor: props.iconColor,
           opacity: props.opacity
         };
@@ -29834,7 +30127,7 @@
             "color": typeof props.loading === 'boolean' ? undefined : props.loading,
             "indeterminate": "disable-shrink",
             "width": "2",
-            "size": iconSize
+            "size": iconSize.value
           }, null)])]
         });
       });
@@ -31277,6 +31570,7 @@
     VClassIcon: VClassIcon,
     VCode: VCode,
     VCol: VCol,
+    VColorInput: VColorInput,
     VColorPicker: VColorPicker,
     VCombobox: VCombobox,
     VComponentIcon: VComponentIcon,
@@ -31743,7 +32037,7 @@
       };
     });
   }
-  const version$1 = "3.8.4-master.2025-05-13";
+  const version$1 = "3.8.5-dev.2025-05-14";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -32041,7 +32335,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.4-master.2025-05-13";
+  const version = "3.8.5-dev.2025-05-14";
 
   /* eslint-disable local-rules/sort-imports */