vuetify 3.2.4 → 3.3.0

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.4
+* Vuetify v3.3.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -171,6 +171,9 @@
   function keys(o) {
     return Object.keys(o);
   }
+  function has(obj, key) {
+    return key.every(k => obj.hasOwnProperty(k));
+  }
   function pick(obj, paths, exclude) {
     const found = Object.create(null);
     const rest = Object.create(null);
@@ -386,6 +389,7 @@
       if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
     }
   }
+  function noop() {}
 
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -538,79 +542,16 @@
   }
 
   /* eslint-disable no-console */
-  // import Vuetify from '../framework'
-
-  function createMessage(message, vm, parent) {
-    // if (Vuetify.config.silent) return
 
-    if (parent) {
-      vm = {
-        __isVue: true,
-        $parent: parent,
-        $options: vm
-      };
-    }
-    if (vm) {
-      // Only show each message once per instance
-      vm.$_alreadyWarned = vm.$_alreadyWarned || [];
-      if (vm.$_alreadyWarned.includes(message)) return;
-      vm.$_alreadyWarned.push(message);
-    }
-    return `[Vuetify] ${message}` + (vm ? generateComponentTrace(vm) : '');
+  function consoleWarn(message) {
+    vue.warn(`Vuetify: ${message}`);
   }
-  function consoleWarn(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.warn(newMessage);
+  function consoleError(message) {
+    vue.warn(`Vuetify error: ${message}`);
   }
-  function consoleError(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.error(newMessage);
-  }
-
-  /**
-   * Shamelessly stolen from vuejs/vue/blob/dev/src/core/util/debug.js
-   */
-
-  const classifyRE = /(?:^|[-_])(\w)/g;
-  const classify = str => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
-  function formatComponentName(vm, includeFile) {
-    if (vm.$root === vm) {
-      return '<Root>';
-    }
-    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm.__isVue ? vm.$options || vm.constructor.options : vm || {};
-    let name = options.name || options._componentTag;
-    const file = options.__file;
-    if (!name && file) {
-      const match = file.match(/([^/\\]+)\.vue$/);
-      name = match?.[1];
-    }
-    return (name ? `<${classify(name)}>` : `<Anonymous>`) + (file && includeFile !== false ? ` at ${file}` : '');
-  }
-  function generateComponentTrace(vm) {
-    if (vm.__isVue && vm.$parent) {
-      const tree = [];
-      let currentRecursiveSequence = 0;
-      while (vm) {
-        if (tree.length > 0) {
-          const last = tree[tree.length - 1];
-          if (last.constructor === vm.constructor) {
-            currentRecursiveSequence++;
-            vm = vm.$parent;
-            continue;
-          } else if (currentRecursiveSequence > 0) {
-            tree[tree.length - 1] = [last, currentRecursiveSequence];
-            currentRecursiveSequence = 0;
-          }
-        }
-        tree.push(vm);
-        vm = vm.$parent;
-      }
-      return '\n\nfound in\n\n' + tree.map((vm, i) => `${i === 0 ? '---> ' : ' '.repeat(5 + i * 2)}${Array.isArray(vm)
-    // eslint-disable-next-line sonarjs/no-nested-template-literals
-    ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)` : formatComponentName(vm)}`).join('\n');
-    } else {
-      return `\n\n(found in ${formatComponentName(vm)})`;
-    }
+  function deprecate(original, replacement) {
+    replacement = Array.isArray(replacement) ? replacement.slice(0, -1).map(s => `'${s}'`).join(', ') + ` or '${replacement.at(-1)}'` : `'${replacement}'`;
+    vue.warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
   }
 
   // For converting XYZ to sRGB
@@ -684,7 +625,46 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function parseColor$1(color) {
+  const cssColorRe = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/;
+  const mappers = {
+    rgb: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    rgba: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    hsl: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsla: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsv: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    }),
+    hsva: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    })
+  };
+  function parseColor(color) {
     if (typeof color === 'number') {
       if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
         // int can't have opacity
@@ -695,6 +675,22 @@
         g: (color & 0xFF00) >> 8,
         b: color & 0xFF
       };
+    } else if (typeof color === 'string' && cssColorRe.test(color)) {
+      const {
+        groups
+      } = color.match(cssColorRe);
+      const {
+        fn,
+        values
+      } = groups;
+      const realValues = values.split(/,\s*/).map(v => {
+        if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) {
+          return parseFloat(v) / 100;
+        } else {
+          return parseFloat(v);
+        }
+      });
+      return mappers[fn](...realValues);
     } else if (typeof color === 'string') {
       let hex = color.startsWith('#') ? color.slice(1) : color;
       if ([3, 4].includes(hex.length)) {
@@ -707,9 +703,16 @@
         consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
       return HexToRGB(hex);
-    } else {
-      throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
+    } else if (typeof color === 'object') {
+      if (has(color, ['r', 'g', 'b'])) {
+        return color;
+      } else if (has(color, ['h', 's', 'l'])) {
+        return HSVtoRGB(HSLtoHSV(color));
+      } else if (has(color, ['h', 's', 'v'])) {
+        return HSVtoRGB(color);
+      }
     }
+    throw new TypeError(`Invalid color: ${color == null ? color : String(color) || color.constructor.name}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`);
   }
 
   /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
@@ -732,6 +735,9 @@
       a
     };
   }
+  function HSLtoRGB(hsla) {
+    return HSVtoRGB(HSLtoHSV(hsla));
+  }
 
   /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
   function RGBtoHSV(rgba) {
@@ -870,7 +876,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = parseColor$1(color);
+    const rgb = parseColor(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -886,6 +892,8 @@
     return (light + 0.05) / (dark + 0.05);
   }
 
+  // eslint-disable-line vue/prefer-import-from-vue
+
   /**
    * Creates a factory function for props definitions.
    * This is used to define props in a composable then override
@@ -1166,6 +1174,7 @@
   const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
   // Utilities
+
   function getCurrentInstance(name, message) {
     const vm = vue.getCurrentInstance();
     if (!vm) {
@@ -1730,7 +1739,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
               }
             }
           }
@@ -1738,9 +1747,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = parseColor$1(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
+          const colorVal = parseColor(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1872,14 +1881,14 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor$1(value);
+      const rgb = parseColor(value);
       variables.push(`--v-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}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+      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}`);
     }
@@ -2660,6 +2669,7 @@
   const makeVResponsiveProps = propsFactory({
     aspectRatio: [String, Number],
     contentClass: String,
+    inline: Boolean,
     ...makeComponentProps(),
     ...makeDimensionProps()
   }, 'v-responsive');
@@ -2677,7 +2687,9 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode("div", {
-        "class": ['v-responsive', props.class],
+        "class": ['v-responsive', {
+          'v-responsive--inline': props.inline
+        }, props.class],
         "style": [dimensionStyles.value, props.style]
       }, [vue.createVNode("div", {
         "class": "v-responsive__sizer",
@@ -2771,7 +2783,6 @@
   // Types
 
   const makeVImgProps = propsFactory({
-    aspectRatio: [String, Number],
     alt: String,
     cover: Boolean,
     eager: Boolean,
@@ -2793,7 +2804,7 @@
       default: ''
     },
     srcset: String,
-    width: [String, Number],
+    ...makeVResponsiveProps(),
     ...makeComponentProps(),
     ...makeTransitionProps()
   }, 'v-img');
@@ -2985,25 +2996,27 @@
           }
         });
       }
-      useRender(() => vue.withDirectives(vue.createVNode(VResponsive, {
-        "class": ['v-img', {
-          'v-img--booting': !isBooted.value
-        }, props.class],
-        "style": [{
-          width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-        }, props.style],
-        "aspectRatio": aspectRatio.value,
-        "aria-label": props.alt,
-        "role": props.alt ? 'img' : undefined
-      }, {
-        additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
-        default: slots.default
-      }), [[vue.resolveDirective("intersect"), {
-        handler: init,
-        options: props.options
-      }, null, {
-        once: true
-      }]]));
+      useRender(() => {
+        const [responsiveProps] = VResponsive.filterProps(props);
+        return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
+          "class": ['v-img', {
+            'v-img--booting': !isBooted.value
+          }, props.class],
+          "style": props.style
+        }, responsiveProps, {
+          "aspectRatio": aspectRatio.value,
+          "aria-label": props.alt,
+          "role": props.alt ? 'img' : undefined
+        }), {
+          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          default: slots.default
+        }), [[vue.resolveDirective("intersect"), {
+          handler: init,
+          options: props.options
+        }, null, {
+          once: true
+        }]]);
+      });
       return {
         currentSrc,
         image,
@@ -3398,7 +3411,7 @@
       vue.watch(() => props.scrollTarget, scrollTarget => {
         const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
         if (!newTarget) {
-          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
           return;
         }
         if (newTarget === target.value) return;
@@ -3880,26 +3893,26 @@
   }
   function getIds(items, modelValue) {
     const ids = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.value != null) {
-        if (modelValue.find(value => deepEqual(value, item.value)) != null) {
-          ids.push(item.id);
-        }
-      } else if (modelValue.includes(i)) {
+    modelValue.forEach(value => {
+      const item = items.find(item => deepEqual(value, item.value));
+      const itemByIndex = items[value];
+      if (item?.value != null) {
         ids.push(item.id);
+      } else if (itemByIndex != null) {
+        ids.push(itemByIndex.id);
       }
-    }
+    });
     return ids;
   }
   function getValues(items, ids) {
     const values = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (ids.includes(item.id)) {
-        values.push(item.value != null ? item.value : i);
+    ids.forEach(id => {
+      const itemIndex = items.findIndex(item => item.id === id);
+      if (~itemIndex) {
+        const item = items[itemIndex];
+        values.push(item.value != null ? item.value : itemIndex);
       }
-    }
+    });
     return values;
   }
 
@@ -5569,10 +5582,17 @@
       default: '$clear'
     },
     active: Boolean,
+    centerAffix: {
+      type: Boolean,
+      default: undefined
+    },
     color: String,
     baseColor: String,
     dirty: Boolean,
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
     flat: Boolean,
     label: String,
@@ -5640,6 +5660,7 @@
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       const {
         backgroundColorClasses,
         backgroundColorStyles
@@ -5705,6 +5726,7 @@
         const hasClear = !!(props.clearable || slots.clear);
         const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
         const label = slots.label ? slots.label({
+          ...slotProps.value,
           label: props.label,
           props: {
             for: id.value
@@ -5714,6 +5736,7 @@
           "class": ['v-field', {
             'v-field--active': isActive.value,
             'v-field--appended': hasAppend,
+            'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
             'v-field--disabled': props.disabled,
             'v-field--dirty': props.dirty,
             'v-field--error': props.error,
@@ -5799,7 +5822,7 @@
           default: () => [label]
         })]), vue.createVNode("div", {
           "class": "v-field__outline__end"
-        }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
+        }, null)]), isPlainOrUnderlined.value && hasLabel.value && vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
           "floating": true,
           "for": id.value
@@ -5917,12 +5940,9 @@
     }
     function reset() {
       items.value.forEach(item => item.reset());
-      model.value = null;
     }
     function resetValidation() {
       items.value.forEach(item => item.resetValidation());
-      errors.value = [];
-      model.value = null;
     }
     vue.watch(items, () => {
       let valid = 0;
@@ -5976,6 +5996,7 @@
       isDisabled,
       isReadonly,
       isValidating,
+      isValid: model,
       items,
       validateOn: vue.toRef(props, 'validateOn')
     });
@@ -5984,6 +6005,7 @@
       isDisabled,
       isReadonly,
       isValidating,
+      isValid: model,
       items,
       validate,
       reset,
@@ -5999,7 +6021,10 @@
   // Types
 
   const makeValidationProps = propsFactory({
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
     errorMessages: {
       type: [Array, String],
@@ -6011,7 +6036,10 @@
     },
     name: String,
     label: String,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
     rules: {
       type: Array,
       default: () => []
@@ -6030,15 +6058,30 @@
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-    const isDisabled = vue.computed(() => !!(props.disabled || form?.isDisabled.value));
-    const isReadonly = vue.computed(() => !!(props.readonly || form?.isReadonly.value));
+    const isDisabled = vue.computed(() => !!(props.disabled ?? form?.isDisabled.value));
+    const isReadonly = vue.computed(() => !!(props.readonly ?? form?.isReadonly.value));
     const errorMessages = vue.computed(() => {
       return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
+    const validateOn = vue.computed(() => {
+      let value = (props.validateOn ?? form?.validateOn.value) || 'input';
+      if (value === 'lazy') value = 'input lazy';
+      const set = new Set(value?.split(' ') ?? []);
+      return {
+        blur: set.has('blur') || set.has('input'),
+        input: set.has('input'),
+        submit: set.has('submit'),
+        lazy: set.has('lazy')
+      };
+    });
     const isValid = vue.computed(() => {
-      if (props.error || errorMessages.value.length) return false;
+      if (props.error || props.errorMessages.length) return false;
       if (!props.rules.length) return true;
-      return isPristine.value ? null : true;
+      if (isPristine.value) {
+        return internalErrorMessages.value.length || validateOn.value.lazy ? null : true;
+      } else {
+        return !internalErrorMessages.value.length;
+      }
     });
     const isValidating = vue.shallowRef(false);
     const validationClasses = vue.computed(() => {
@@ -6061,11 +6104,13 @@
     vue.onBeforeUnmount(() => {
       form?.unregister(uid.value);
     });
-    const validateOn = vue.computed(() => props.validateOn || form?.validateOn.value || 'input');
-
-    // Set initial valid state, for inputs that might not have rules
-    vue.onMounted(() => form?.update(uid.value, isValid.value, errorMessages.value));
-    useToggleScope(() => validateOn.value === 'input', () => {
+    vue.onMounted(async () => {
+      if (!validateOn.value.lazy) {
+        await validate(true);
+      }
+      form?.update(uid.value, isValid.value, errorMessages.value);
+    });
+    useToggleScope(() => validateOn.value.input, () => {
       vue.watch(validationModel, () => {
         if (validationModel.value != null) {
           validate();
@@ -6077,7 +6122,7 @@
         }
       });
     });
-    useToggleScope(() => validateOn.value === 'blur', () => {
+    useToggleScope(() => validateOn.value.blur, () => {
       vue.watch(() => props.focused, val => {
         if (!val) validate();
       });
@@ -6086,14 +6131,19 @@
       form?.update(uid.value, isValid.value, errorMessages.value);
     });
     function reset() {
-      resetValidation();
       model.value = null;
+      vue.nextTick(resetValidation);
     }
     function resetValidation() {
       isPristine.value = true;
-      internalErrorMessages.value = [];
+      if (!validateOn.value.lazy) {
+        validate(true);
+      } else {
+        internalErrorMessages.value = [];
+      }
     }
     async function validate() {
+      let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       const results = [];
       isValidating.value = true;
       for (const rule of props.rules) {
@@ -6112,7 +6162,7 @@
       }
       internalErrorMessages.value = results;
       isValidating.value = false;
-      isPristine.value = false;
+      isPristine.value = silent;
       return internalErrorMessages.value;
     }
     return {
@@ -6133,6 +6183,10 @@
   const makeVInputProps = propsFactory({
     id: String,
     appendIcon: IconValue,
+    centerAffix: {
+      type: Boolean,
+      default: true
+    },
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
     hint: String,
@@ -6202,7 +6256,7 @@
         validate
       }));
       const messages = vue.computed(() => {
-        if (errorMessages.value.length > 0) {
+        if (!isPristine.value && errorMessages.value.length > 0) {
           return errorMessages.value;
         } else if (props.hint && (props.persistentHint || props.focused)) {
           return props.hint;
@@ -6216,7 +6270,9 @@
         const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
         return vue.createVNode("div", {
-          "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value, props.class],
+          "class": ['v-input', `v-input--${props.direction}`, {
+            'v-input--center-affix': props.centerAffix
+          }, densityClasses.value, validationClasses.value, props.class],
           "style": props.style
         }, [hasPrepend && vue.createVNode("div", {
           "key": "prepend",
@@ -6423,6 +6479,7 @@
         if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
         return props.counter;
       });
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onIntersect(isIntersecting, entries) {
         if (!props.autofocus || !isIntersecting) return;
         entries[0].target?.focus?.();
@@ -6482,10 +6539,11 @@
           "class": ['v-text-field', {
             'v-text-field--prefixed': props.prefix,
             'v-text-field--suffixed': props.suffix,
-            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
+            'v-text-field--plain-underlined': ['plain', 'underlined'].includes(props.variant)
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
+          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -6855,10 +6913,10 @@
         }
       }
       const falseIcon = vue.computed(() => {
-        return props.indeterminate ? props.indeterminateIcon : props.falseIcon;
+        return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
       });
       const trueIcon = vue.computed(() => {
-        return props.indeterminate ? props.indeterminateIcon : props.trueIcon;
+        return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
       useRender(() => vue.createVNode(VSelectionControl, vue.mergeProps(props, {
         "modelValue": model.value,
@@ -6868,7 +6926,7 @@
         "type": "checkbox",
         "falseIcon": falseIcon.value,
         "trueIcon": trueIcon.value,
-        "aria-checked": props.indeterminate ? 'mixed' : undefined
+        "aria-checked": indeterminate.value ? 'mixed' : undefined
       }), slots));
       return {};
     }
@@ -7828,7 +7886,9 @@
     }
   });
   const makeVListGroupProps = propsFactory({
+    /* @deprecated */
     activeColor: String,
+    baseColor: String,
     color: String,
     collapseIcon: {
       type: IconValue,
@@ -7877,6 +7937,7 @@
         VListItem: {
           active: isOpen.value,
           activeColor: props.activeColor,
+          baseColor: props.baseColor,
           color: props.color,
           prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
           appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
@@ -7931,9 +7992,11 @@
       default: undefined
     },
     activeClass: String,
+    /* @deprecated */
     activeColor: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     disabled: Boolean,
     lines: String,
     link: {
@@ -7996,8 +8059,9 @@
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
+      const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
-        color: isActive.value ? props.activeColor ?? props.color : props.color,
+        color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
       vue.watch(() => link.isActive?.value, val => {
@@ -8054,7 +8118,6 @@
       }
       useRender(() => {
         const Tag = isLink.value ? 'a' : props.tag;
-        const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
         const hasSubtitle = slots.subtitle || props.subtitle;
         const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
@@ -8062,6 +8125,9 @@
         const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         list?.updateHasPrepend(hasPrepend);
+        if (props.activeColor) {
+          deprecate('active-color', ['color', 'base-color']);
+        }
         return vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-list-item', {
             'v-list-item--active': isActive.value,
@@ -8070,10 +8136,10 @@
             'v-list-item--nav': props.nav,
             'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
             [`${props.activeClass}`]: props.activeClass && isActive.value
-          }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
-          "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, props.style],
+          }, 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],
           "href": link.href.value,
-          "tabindex": isClickable.value ? 0 : undefined,
+          "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
@@ -8224,9 +8290,7 @@
         if (type === 'subheader') {
           return slots.subheader?.({
             props: itemProps
-          }) ?? vue.createVNode(VListSubheader, itemProps, {
-            default: slots.subheader
-          });
+          }) ?? vue.createVNode(VListSubheader, itemProps, null);
         }
         const slotsWithItem = {
           subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
@@ -8241,10 +8305,6 @@
             ...slotProps,
             item
           }) : undefined,
-          default: slots.default ? slotProps => slots.default?.({
-            ...slotProps,
-            item
-          }) : undefined,
           title: slots.title ? slotProps => slots.title?.({
             ...slotProps,
             item
@@ -8268,7 +8328,9 @@
           default: () => vue.createVNode(VListChildren, {
             "items": children
           }, slots)
-        }) : slots.item ? slots.item(itemProps) : vue.createVNode(VListItem, itemProps, slotsWithItem);
+        }) : slots.item ? slots.item({
+          props: itemProps
+        }) : vue.createVNode(VListItem, itemProps, slotsWithItem);
       });
     }
   });
@@ -8300,7 +8362,7 @@
       default: 'props'
     },
     returnObject: Boolean
-  }, 'item');
+  }, 'list-items');
   function transformItem$1(props, item) {
     const title = getPropertyFromItem(item, props.itemTitle, item);
     const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue, title);
@@ -8328,20 +8390,23 @@
   }
   function useItems(props) {
     const items = vue.computed(() => transformItems$1(props, props.items));
+    return useTransformItems(items, value => transformItem$1(props, value));
+  }
+  function useTransformItems(items, transform) {
     function transformIn(value) {
       return value.map(v => {
         const existingItem = items.value.find(item => deepEqual(v, item.value));
         // Nullish existingItem means value is a custom input value from combobox
-        // In this case, use transformItem to create an InternalItem based on value
-        return existingItem ?? transformItem$1(props, v);
+        // In this case, use transformItem to create an { value: unknown } based on value
+        return existingItem ?? transform(v);
       });
     }
     function transformOut(value) {
       return value.map(_ref => {
         let {
-          props
+          value
         } = _ref;
-        return props.value;
+        return value;
       });
     }
     return {
@@ -8390,6 +8455,8 @@
     };
   }
   const makeVListProps = propsFactory({
+    baseColor: String,
+    /* @deprecated */
     activeColor: String,
     activeClass: String,
     bgColor: String,
@@ -8464,16 +8531,19 @@
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
       const activeColor = vue.toRef(props, 'activeColor');
+      const baseColor = vue.toRef(props, 'baseColor');
       const color = vue.toRef(props, 'color');
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
+          baseColor,
           color
         },
         VListItem: {
           activeClass: vue.toRef(props, 'activeClass'),
           activeColor,
+          baseColor,
           color,
           density: vue.toRef(props, 'density'),
           disabled: vue.toRef(props, 'disabled'),
@@ -9498,14 +9568,14 @@
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
     return mergeDeep(defaultDisplayOptions, options);
   };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  function getClientWidth(ssr) {
+    return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === 'object' && ssr.clientWidth || 0;
   }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  function getClientHeight(ssr) {
+    return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === 'object' && ssr.clientHeight || 0;
   }
-  function getPlatform(isHydrate) {
-    const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
+  function getPlatform(ssr) {
+    const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : 'ssr';
     function match(regexp) {
       return Boolean(userAgent.match(regexp));
     }
@@ -10329,10 +10399,10 @@
             'v-select--active-menu': menu.value,
             'v-select--chips': !!props.chips,
             [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
-            'v-select--selected': model.value.length
+            'v-select--selected': model.value.length,
+            'v-select--selection-slot': !!slots.selection
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.menuIcon,
           "readonly": true,
           "placeholder": placeholder,
           "onClick:clear": onClear,
@@ -10364,25 +10434,21 @@
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
-                if (slots.item) {
-                  return slots.item?.({
-                    item,
-                    index,
-                    props: vue.mergeProps(item.props, {
-                      onClick: () => select(item)
-                    })
-                  });
-                }
-                return vue.createVNode(VListItem, vue.mergeProps({
-                  "key": index
-                }, item.props, {
-                  "onClick": () => select(item)
-                }), {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  onClick: () => select(item)
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
                   prepend: _ref2 => {
                     let {
                       isSelected
                     } = _ref2;
                     return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
@@ -10439,7 +10505,16 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-select__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-select__menu-icon",
+              "icon": props.menuIcon
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -10451,6 +10526,8 @@
   });
 
   /* eslint-disable max-statements */
+  /* eslint-disable no-labels */
+
 
   // Types
 
@@ -10520,23 +10597,24 @@
     const strQuery = vue.computed(() => typeof query?.value !== 'string' && typeof query?.value !== 'number' ? '' : String(query.value));
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
+    const transformedItems = vue.computed(() => options?.transform ? vue.unref(items).map(options?.transform) : vue.unref(items));
     vue.watchEffect(() => {
       filteredItems.value = [];
       filteredMatches.value = new Map();
-      const transformedItems = vue.unref(items);
-      const results = filterItems(transformedItems, strQuery.value, {
+      const results = filterItems(transformedItems.value, strQuery.value, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
-        filterKeys: vue.unref(options?.filterKeys) ?? props.filterKeys,
+        filterKeys: props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter
       });
+      const originalItems = vue.unref(items);
       results.forEach(_ref => {
         let {
           index,
           matches
         } = _ref;
-        const item = transformedItems[index];
+        const item = originalItems[index];
         filteredItems.value.push(item);
         filteredMatches.value.set(item.value, matches);
       });
@@ -10565,8 +10643,9 @@
     }, [text.substr(matches + length)])]) : text;
   }
   const makeVAutocompleteProps = propsFactory({
-    // TODO: implement post keyboard support
-    // autoSelectFirst: Boolean,
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
     search: String,
     ...makeFilterProps({
       filterKeys: ['title']
@@ -10598,6 +10677,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
+      const listHasFocus = vue.ref(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -10641,6 +10721,10 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
+      const highlightFirst = vue.computed(() => {
+        const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
+        return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10652,6 +10736,13 @@
         if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
         menu.value = true;
       }
+      function onMousedownMenuIcon(e) {
+        if (isFocused.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        menu.value = !menu.value;
+      }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
@@ -10666,10 +10757,16 @@
           menu.value = false;
         }
         if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+            select(filteredItems.value[0]);
+          }
           isPristine.value = true;
         }
         if (e.key === 'ArrowDown') {
           listRef.value?.focus('next');
+          if (highlightFirst.value) {
+            listRef.value?.focus('next');
+          }
         } else if (e.key === 'ArrowUp') {
           listRef.value?.focus('prev');
         }
@@ -10717,6 +10814,12 @@
       }
       function onFocusin(e) {
         isFocused.value = true;
+        setTimeout(() => {
+          listHasFocus.value = true;
+        });
+      }
+      function onFocusout(e) {
+        listHasFocus.value = false;
       }
       const isSelecting = vue.shallowRef(false);
       function select(item) {
@@ -10738,14 +10841,22 @@
           vue.nextTick(() => isSelecting.value = false);
         }
       }
-      vue.watch(isFocused, val => {
+      vue.watch(isFocused, (val, oldVal) => {
+        if (val === oldVal) return;
         if (val) {
           isSelecting.value = true;
           search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '');
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
-          if (!props.multiple && !search.value) model.value = [];
+          if (!props.multiple && !search.value) model.value = [];else if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+            let {
+              value
+            } = _ref2;
+            return value === displayItems.value[0].value;
+          })) {
+            select(displayItems.value[0]);
+          }
           menu.value = false;
           search.value = '';
           selectionIndex.value = -1;
@@ -10776,10 +10887,10 @@
           "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
+            'v-autocomplete--selection-slot': !!slots.selection,
             'v-autocomplete--selecting-index': selectionIndex.value > -1
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.menuIcon,
           "readonly": props.readonly,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
@@ -10805,36 +10916,40 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin
+              "onFocusin": onFocusin,
+              "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-                item,
-                props: vue.mergeProps(item.props, {
+              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item)
-                })
-              }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": item.value
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
-                prepend: _ref2 => {
-                  let {
-                    isSelected
-                  } = _ref2;
-                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                },
-                title: () => {
-                  return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                }
-              })), slots['append-item']?.()]
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
+                  },
+                  title: () => {
+                    return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                  }
+                });
+              }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
             function onChipClose(e) {
@@ -10883,7 +10998,18 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-autocomplete__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-autocomplete__menu-icon",
+              "icon": props.menuIcon,
+              "onMousedown": onMousedownMenuIcon,
+              "onClick": noop
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -11244,7 +11370,7 @@
   const makeVBreadcrumbsDividerProps = propsFactory({
     divider: [Number, String],
     ...makeComponentProps()
-  }, 'v-breacrumbs-divider');
+  }, 'v-breadcrumbs-divider');
   const VBreadcrumbsDivider = genericComponent()({
     name: 'VBreadcrumbsDivider',
     props: makeVBreadcrumbsDividerProps(),
@@ -11332,7 +11458,7 @@
     ...makeTagProps({
       tag: 'ul'
     })
-  }, 'v-breacrumbs');
+  }, 'v-breadcrumbs');
   const VBreadcrumbs = genericComponent()({
     name: 'VBreadcrumbs',
     props: makeVBreadcrumbsProps(),
@@ -11681,6 +11807,7 @@
   });
 
   // Types
+
   const handleGesture = wrapper => {
     const {
       touchstartX,
@@ -12461,27 +12588,6 @@
 
   // Types
 
-  function has(obj, key) {
-    return key.every(k => obj.hasOwnProperty(k));
-  }
-  function parseColor(color) {
-    if (!color) return null;
-    let hsva = null;
-    if (typeof color === 'string') {
-      const hex = parseHex(color);
-      hsva = HexToHSV(hex);
-    }
-    if (typeof color === 'object') {
-      if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBtoHSV(color);
-      } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLtoHSV(color);
-      } else if (has(color, ['h', 's', 'v'])) {
-        hsva = color;
-      }
-    }
-    return hsva;
-  }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
       const {
@@ -12730,6 +12836,7 @@
   });
 
   /* eslint-disable max-statements */
+  // Composables
 
   // Types
 
@@ -12744,9 +12851,15 @@
     if ('touches' in e && e.touches.length) return e.touches[0][position];else if ('changedTouches' in e && e.changedTouches.length) return e.changedTouches[0][position];else return e[position];
   }
   const makeSliderProps = propsFactory({
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
     max: {
       type: [Number, String],
       default: 100
@@ -13124,7 +13237,7 @@
           "aria-valuemin": props.min,
           "aria-valuemax": props.max,
           "aria-valuenow": props.modelValue,
-          "aria-readonly": readonly.value,
+          "aria-readonly": !!readonly.value,
           "aria-orientation": direction.value,
           "onKeydown": !readonly.value ? onKeydown : undefined
         }, [vue.createVNode("div", {
@@ -13376,8 +13489,8 @@
             }, [vue.createVNode("input", {
               "id": id.value,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value
             }, null), vue.createVNode(VSliderTrack, {
@@ -13832,13 +13945,15 @@
       }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
-        const hsva = parseColor(color);
+        const rgba = parseColor(color);
+        const hsva = RGBtoHSV(rgba);
+        const background = RGBtoCSS(rgba);
         return vue.createVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
         }, [vue.createVNode("div", {
           "style": {
-            background: color
+            background
           }
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
@@ -13899,8 +14014,13 @@
       const mode = useProxiedModel(props, 'mode');
       const lastPickedColor = vue.ref(null);
       const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
-        let c = parseColor(v);
-        if (!c) return null;
+        let c;
+        try {
+          c = RGBtoHSV(parseColor(v));
+        } catch (err) {
+          consoleWarn(err);
+          return null;
+        }
         if (lastPickedColor.value) {
           c = {
             ...c,
@@ -13999,8 +14119,9 @@
     }, [text.substr(matches + length)])]) : text;
   }
   const makeVComboboxProps = propsFactory({
-    // TODO: implement post keyboard support
-    // autoSelectFirst: Boolean,
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
     delimiters: Array,
     ...makeFilterProps({
       filterKeys: ['title']
@@ -14036,6 +14157,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
+      const listHasFocus = vue.ref(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14118,6 +14240,10 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
+      const highlightFirst = vue.computed(() => {
+        const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
+        return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         cleared = true;
@@ -14129,6 +14255,13 @@
         if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
         menu.value = true;
       }
+      function onMousedownMenuIcon(e) {
+        if (isFocused.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        menu.value = !menu.value;
+      }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
@@ -14143,6 +14276,9 @@
           menu.value = false;
         }
         if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+            select(filteredItems.value[0]);
+          }
           isPristine.value = true;
         }
         if (e.key === 'ArrowDown') {
@@ -14217,17 +14353,31 @@
       }
       function onFocusin(e) {
         isFocused.value = true;
+        setTimeout(() => {
+          listHasFocus.value = true;
+        });
+      }
+      function onFocusout(e) {
+        listHasFocus.value = false;
       }
       vue.watch(filteredItems, val => {
         if (!val.length && props.hideNoData) menu.value = false;
       });
-      vue.watch(isFocused, val => {
-        if (val) return;
+      vue.watch(isFocused, (val, oldVal) => {
+        if (val || val === oldVal) return;
         selectionIndex.value = -1;
         menu.value = false;
-        if (!props.multiple || !search.value) return;
-        model.value = [...model.value, transformItem$1(props, search.value)];
-        search.value = '';
+        if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return value === displayItems.value[0].value;
+        })) {
+          select(displayItems.value[0]);
+        } else if (props.multiple && search.value) {
+          model.value = [...model.value, transformItem$1(props, search.value)];
+          search.value = '';
+        }
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
@@ -14248,11 +14398,11 @@
           "class": ['v-combobox', {
             'v-combobox--active-menu': menu.value,
             'v-combobox--chips': !!props.chips,
+            'v-combobox--selection-slot': !!slots.selection,
             'v-combobox--selecting-index': selectionIndex.value > -1,
             [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
           "readonly": props.readonly,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
@@ -14278,36 +14428,40 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin
+              "onFocusin": onFocusin,
+              "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-                item,
-                props: vue.mergeProps(item.props, {
+              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item)
-                })
-              }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": item.value
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
-                prepend: _ref2 => {
-                  let {
-                    isSelected
-                  } = _ref2;
-                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                },
-                title: () => {
-                  return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                }
-              })), slots['append-item']?.()]
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
+                  },
+                  title: () => {
+                    return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                  }
+                });
+              }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
             function onChipClose(e) {
@@ -14356,7 +14510,18 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-combobox__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-combobox__menu-icon",
+              "icon": props.menuIcon,
+              "onMousedown": onMousedownMenuIcon,
+              "onClick": noop
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -14787,6 +14952,7 @@
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
       const isActive = vue.computed(() => isFocused.value || props.active);
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -14830,10 +14996,15 @@
           "ref": vInputRef,
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "class": ['v-file-input', props.class],
+          "class": ['v-file-input', {
+            'v-file-input--chips': !!props.chips,
+            'v-file-input--selection-slot': !!slots.selection,
+            'v-text-field--plain-underlined': isPlainOrUnderlined.value
+          }, props.class],
           "style": props.style,
           "onClick:prepend": onClickPrepend
         }, rootAttrs, inputProps, {
+          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -15385,9 +15556,6 @@
   });
 
   // Composables
-
-  // Types
-
   const VItem = genericComponent()({
     name: 'VItem',
     props: makeGroupItemProps(),
@@ -16804,15 +16972,15 @@
             }, [vue.createVNode("input", {
               "id": `${id.value}_start`,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[0]
             }, null), vue.createVNode("input", {
               "id": `${id.value}_stop`,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[1]
             }, null), vue.createVNode(VSliderTrack, {
@@ -18089,6 +18257,11 @@
         }
       }
       const sizerRef = vue.ref();
+      const rows = vue.ref(+props.rows);
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
+      vue.watchEffect(() => {
+        if (!props.autoGrow) rows.value = +props.rows;
+      });
       function calculateInputHeight() {
         if (!props.autoGrow) return;
         vue.nextTick(() => {
@@ -18100,7 +18273,9 @@
           const lineHeight = parseFloat(style.lineHeight);
           const minHeight = Math.max(parseFloat(props.rows) * lineHeight + padding, parseFloat(fieldStyle.getPropertyValue('--v-input-control-height')));
           const maxHeight = parseFloat(props.maxRows) * lineHeight + padding || Infinity;
-          controlHeight.value = convertToUnit(clamp(height ?? 0, minHeight, maxHeight));
+          const newHeight = clamp(height ?? 0, minHeight, maxHeight);
+          rows.value = Math.floor((newHeight - padding) / lineHeight);
+          controlHeight.value = convertToUnit(newHeight);
         });
       }
       vue.onMounted(calculateInputHeight);
@@ -18140,10 +18315,11 @@
             'v-text-field--suffixed': props.suffix,
             'v-textarea--auto-grow': props.autoGrow,
             'v-textarea--no-resize': props.noResize || props.autoGrow,
-            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
+            'v-text-field--plain-underlined': isPlainOrUnderlined.value
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
+          "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -18167,6 +18343,7 @@
               "role": "textbox"
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
+              "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
               "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -19547,7 +19724,7 @@
       date
     };
   }
-  const version$1 = "3.2.4";
+  const version$1 = "3.3.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -19567,7 +19744,7 @@
       ...options
     });
   };
-  const version = "3.2.4";
+  const version = "3.3.0";
   createVuetify.version = version;
 
   exports.components = components;