vuetify 3.2.4 → 3.3.0

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.2.4
+* Vuetify v3.3.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, onScopeDispose, effectScope, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, warn, onScopeDispose, effectScope, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -167,6 +167,9 @@ const keyValues = Object.freeze({
 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);
@@ -382,6 +385,7 @@ function focusChild(el, location) {
     if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
   }
 }
+function noop() {}
 
 const block = ['top', 'bottom'];
 const inline = ['start', 'end', 'left', 'right'];
@@ -534,79 +538,16 @@ function animate(el, keyframes, options) {
 }
 
 /* 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) {
+  warn(`Vuetify: ${message}`);
 }
-function consoleWarn(message, vm, parent) {
-  const newMessage = createMessage(message, vm, parent);
-  newMessage != null && console.warn(newMessage);
+function consoleError(message) {
+  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}'`;
+  warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
 }
 
 // For converting XYZ to sRGB
@@ -680,7 +621,46 @@ function toXYZ(lab) {
 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
@@ -691,6 +671,22 @@ function parseColor$1(color) {
       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)) {
@@ -703,9 +699,16 @@ function parseColor$1(color) {
       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 */
@@ -728,6 +731,9 @@ function HSVtoRGB(hsva) {
     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) {
@@ -866,7 +872,7 @@ function darken(value, amount) {
  * @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];
 }
 
@@ -882,6 +888,8 @@ function getContrast(first, second) {
   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
@@ -1162,6 +1170,7 @@ const deceleratedEasing = 'cubic-bezier(0.0, 0, 0.2, 1)'; // Entering
 const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
 // Utilities
+
 function getCurrentInstance(name, message) {
   const vm = getCurrentInstance$1();
   if (!vm) {
@@ -1726,7 +1735,7 @@ function createTheme(options) {
           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));
             }
           }
         }
@@ -1734,9 +1743,9 @@ function createTheme(options) {
       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)))
@@ -1868,14 +1877,14 @@ function genCssVariables(theme) {
   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}`);
   }
@@ -2656,6 +2665,7 @@ function useAspectStyles(props) {
 const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
   contentClass: String,
+  inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
 }, 'v-responsive');
@@ -2673,7 +2683,9 @@ const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode("div", {
-      "class": ['v-responsive', props.class],
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
       "style": [dimensionStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-responsive__sizer",
@@ -2767,7 +2779,6 @@ const MaybeTransition = (props, _ref) => {
 // Types
 
 const makeVImgProps = propsFactory({
-  aspectRatio: [String, Number],
   alt: String,
   cover: Boolean,
   eager: Boolean,
@@ -2789,7 +2800,7 @@ const makeVImgProps = propsFactory({
     default: ''
   },
   srcset: String,
-  width: [String, Number],
+  ...makeVResponsiveProps(),
   ...makeComponentProps(),
   ...makeTransitionProps()
 }, 'v-img');
@@ -2981,25 +2992,27 @@ const VImg = genericComponent()({
         }
       });
     }
-    useRender(() => withDirectives(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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
-      default: slots.default
-    }), [[resolveDirective("intersect"), {
-      handler: init,
-      options: props.options
-    }, null, {
-      once: true
-    }]]));
+    useRender(() => {
+      const [responsiveProps] = VResponsive.filterProps(props);
+      return withDirectives(createVNode(VResponsive, 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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        default: slots.default
+      }), [[resolveDirective("intersect"), {
+        handler: init,
+        options: props.options
+      }, null, {
+        once: true
+      }]]);
+    });
     return {
       currentSrc,
       image,
@@ -3394,7 +3407,7 @@ function useScroll(props) {
     watch(() => props.scrollTarget, scrollTarget => {
       const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
       if (!newTarget) {
-        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, getCurrentInstance$1());
+        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
         return;
       }
       if (newTarget === target.value) return;
@@ -3876,26 +3889,26 @@ function getItemIndex(items, value) {
 }
 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;
 }
 
@@ -5565,10 +5578,17 @@ const makeVFieldProps = propsFactory({
     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,
@@ -5636,6 +5656,7 @@ const VField = genericComponent()({
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     const {
       backgroundColorClasses,
       backgroundColorStyles
@@ -5701,6 +5722,7 @@ const VField = genericComponent()({
       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
@@ -5710,6 +5732,7 @@ const VField = genericComponent()({
         "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,
@@ -5795,7 +5818,7 @@ const VField = genericComponent()({
         default: () => [label]
       })]), createVNode("div", {
         "class": "v-field__outline__end"
-      }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && createVNode(VFieldLabel, {
+      }, null)]), isPlainOrUnderlined.value && hasLabel.value && createVNode(VFieldLabel, {
         "ref": floatingLabelRef,
         "floating": true,
         "for": id.value
@@ -5913,12 +5936,9 @@ function createForm(props) {
   }
   function reset() {
     items.value.forEach(item => item.reset());
-    model.value = null;
   }
   function resetValidation() {
     items.value.forEach(item => item.resetValidation());
-    errors.value = [];
-    model.value = null;
   }
   watch(items, () => {
     let valid = 0;
@@ -5972,6 +5992,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validateOn: toRef(props, 'validateOn')
   });
@@ -5980,6 +6001,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validate,
     reset,
@@ -5995,7 +6017,10 @@ function useForm() {
 // Types
 
 const makeValidationProps = propsFactory({
-  disabled: Boolean,
+  disabled: {
+    type: Boolean,
+    default: null
+  },
   error: Boolean,
   errorMessages: {
     type: [Array, String],
@@ -6007,7 +6032,10 @@ const makeValidationProps = propsFactory({
   },
   name: String,
   label: String,
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: null
+  },
   rules: {
     type: Array,
     default: () => []
@@ -6026,15 +6054,30 @@ function useValidation(props) {
   const internalErrorMessages = ref([]);
   const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-  const isDisabled = computed(() => !!(props.disabled || form?.isDisabled.value));
-  const isReadonly = computed(() => !!(props.readonly || form?.isReadonly.value));
+  const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value));
+  const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value));
   const errorMessages = computed(() => {
     return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
   });
+  const validateOn = 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 = 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 = shallowRef(false);
   const validationClasses = computed(() => {
@@ -6057,11 +6100,13 @@ function useValidation(props) {
   onBeforeUnmount(() => {
     form?.unregister(uid.value);
   });
-  const validateOn = computed(() => props.validateOn || form?.validateOn.value || 'input');
-
-  // Set initial valid state, for inputs that might not have rules
-  onMounted(() => form?.update(uid.value, isValid.value, errorMessages.value));
-  useToggleScope(() => validateOn.value === 'input', () => {
+  onMounted(async () => {
+    if (!validateOn.value.lazy) {
+      await validate(true);
+    }
+    form?.update(uid.value, isValid.value, errorMessages.value);
+  });
+  useToggleScope(() => validateOn.value.input, () => {
     watch(validationModel, () => {
       if (validationModel.value != null) {
         validate();
@@ -6073,7 +6118,7 @@ function useValidation(props) {
       }
     });
   });
-  useToggleScope(() => validateOn.value === 'blur', () => {
+  useToggleScope(() => validateOn.value.blur, () => {
     watch(() => props.focused, val => {
       if (!val) validate();
     });
@@ -6082,14 +6127,19 @@ function useValidation(props) {
     form?.update(uid.value, isValid.value, errorMessages.value);
   });
   function reset() {
-    resetValidation();
     model.value = null;
+    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) {
@@ -6108,7 +6158,7 @@ function useValidation(props) {
     }
     internalErrorMessages.value = results;
     isValidating.value = false;
-    isPristine.value = false;
+    isPristine.value = silent;
     return internalErrorMessages.value;
   }
   return {
@@ -6129,6 +6179,10 @@ function useValidation(props) {
 const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
+  centerAffix: {
+    type: Boolean,
+    default: true
+  },
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
   hint: String,
@@ -6198,7 +6252,7 @@ const VInput = genericComponent()({
       validate
     }));
     const messages = 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;
@@ -6212,7 +6266,9 @@ const VInput = genericComponent()({
       const hasMessages = messages.value.length > 0;
       const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
       return 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 && createVNode("div", {
         "key": "prepend",
@@ -6419,6 +6475,7 @@ const VTextField = genericComponent()({
       if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
       return props.counter;
     });
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     function onIntersect(isIntersecting, entries) {
       if (!props.autofocus || !isIntersecting) return;
       entries[0].target?.focus?.();
@@ -6478,10 +6535,11 @@ const VTextField = genericComponent()({
         "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,
@@ -6851,10 +6909,10 @@ const VCheckboxBtn = genericComponent()({
       }
     }
     const falseIcon = computed(() => {
-      return props.indeterminate ? props.indeterminateIcon : props.falseIcon;
+      return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
     });
     const trueIcon = computed(() => {
-      return props.indeterminate ? props.indeterminateIcon : props.trueIcon;
+      return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
     });
     useRender(() => createVNode(VSelectionControl, mergeProps(props, {
       "modelValue": model.value,
@@ -6864,7 +6922,7 @@ const VCheckboxBtn = genericComponent()({
       "type": "checkbox",
       "falseIcon": falseIcon.value,
       "trueIcon": trueIcon.value,
-      "aria-checked": props.indeterminate ? 'mixed' : undefined
+      "aria-checked": indeterminate.value ? 'mixed' : undefined
     }), slots));
     return {};
   }
@@ -7824,7 +7882,9 @@ const VListGroupActivator = defineComponent({
   }
 });
 const makeVListGroupProps = propsFactory({
+  /* @deprecated */
   activeColor: String,
+  baseColor: String,
   color: String,
   collapseIcon: {
     type: IconValue,
@@ -7873,6 +7933,7 @@ const VListGroup = genericComponent()({
       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,
@@ -7927,9 +7988,11 @@ const makeVListItemProps = propsFactory({
     default: undefined
   },
   activeClass: String,
+  /* @deprecated */
   activeColor: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   disabled: Boolean,
   lines: String,
   link: {
@@ -7992,8 +8055,9 @@ const VListItem = genericComponent()({
     const isLink = computed(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
     const roundedProps = computed(() => props.rounded || props.nav);
+    const color = computed(() => props.color ?? props.activeColor);
     const variantProps = computed(() => ({
-      color: isActive.value ? props.activeColor ?? props.color : props.color,
+      color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
       variant: props.variant
     }));
     watch(() => link.isActive?.value, val => {
@@ -8050,7 +8114,6 @@ const VListItem = genericComponent()({
     }
     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);
@@ -8058,6 +8121,9 @@ const VListItem = genericComponent()({
       const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       list?.updateHasPrepend(hasPrepend);
+      if (props.activeColor) {
+        deprecate('active-color', ['color', 'base-color']);
+      }
       return withDirectives(createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
@@ -8066,10 +8132,10 @@ const VListItem = genericComponent()({
           '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
       }, {
@@ -8220,9 +8286,7 @@ const VListChildren = genericComponent()({
       if (type === 'subheader') {
         return slots.subheader?.({
           props: itemProps
-        }) ?? createVNode(VListSubheader, itemProps, {
-          default: slots.subheader
-        });
+        }) ?? createVNode(VListSubheader, itemProps, null);
       }
       const slotsWithItem = {
         subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
@@ -8237,10 +8301,6 @@ const VListChildren = genericComponent()({
           ...slotProps,
           item
         }) : undefined,
-        default: slots.default ? slotProps => slots.default?.({
-          ...slotProps,
-          item
-        }) : undefined,
         title: slots.title ? slotProps => slots.title?.({
           ...slotProps,
           item
@@ -8264,7 +8324,9 @@ const VListChildren = genericComponent()({
         default: () => createVNode(VListChildren, {
           "items": children
         }, slots)
-      }) : slots.item ? slots.item(itemProps) : createVNode(VListItem, itemProps, slotsWithItem);
+      }) : slots.item ? slots.item({
+        props: itemProps
+      }) : createVNode(VListItem, itemProps, slotsWithItem);
     });
   }
 });
@@ -8296,7 +8358,7 @@ const makeItemsProps = propsFactory({
     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);
@@ -8324,20 +8386,23 @@ function transformItems$1(props, items) {
 }
 function useItems(props) {
   const items = 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 {
@@ -8386,6 +8451,8 @@ function useListItems(props) {
   };
 }
 const makeVListProps = propsFactory({
+  baseColor: String,
+  /* @deprecated */
   activeColor: String,
   activeClass: String,
   bgColor: String,
@@ -8460,16 +8527,19 @@ const VList = genericComponent()({
     } = useNested(props);
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
     const activeColor = toRef(props, 'activeColor');
+    const baseColor = toRef(props, 'baseColor');
     const color = toRef(props, 'color');
     createList();
     provideDefaults({
       VListGroup: {
         activeColor,
+        baseColor,
         color
       },
       VListItem: {
         activeClass: toRef(props, 'activeClass'),
         activeColor,
+        baseColor,
         color,
         density: toRef(props, 'density'),
         disabled: toRef(props, 'disabled'),
@@ -9494,14 +9564,14 @@ const parseDisplayOptions = function () {
   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));
   }
@@ -10325,10 +10395,10 @@ const VSelect = genericComponent()({
           '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,
@@ -10360,25 +10430,21 @@ const VSelect = genericComponent()({
             default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
             }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
-              if (slots.item) {
-                return slots.item?.({
-                  item,
-                  index,
-                  props: mergeProps(item.props, {
-                    onClick: () => select(item)
-                  })
-                });
-              }
-              return createVNode(VListItem, mergeProps({
-                "key": index
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
+              const itemProps = mergeProps(item.props, {
+                key: index,
+                onClick: () => select(item)
+              });
+              return slots.item?.({
+                item,
+                index,
+                props: itemProps
+              }) ?? createVNode(VListItem, itemProps, {
                 prepend: _ref2 => {
                   let {
                     isSelected
                   } = _ref2;
                   return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    "key": item.value,
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
@@ -10435,7 +10501,16 @@ const VSelect = genericComponent()({
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-select__selection-comma"
           }, [createTextVNode(",")])])]);
-        })])
+        })]),
+        'append-inner': function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+            "class": "v-select__menu-icon",
+            "icon": props.menuIcon
+          }, null) : undefined]);
+        }
       });
     });
     return forwardRefs({
@@ -10447,6 +10522,8 @@ const VSelect = genericComponent()({
 });
 
 /* eslint-disable max-statements */
+/* eslint-disable no-labels */
+
 
 // Types
 
@@ -10516,23 +10593,24 @@ function useFilter(props, items, query, options) {
   const strQuery = computed(() => typeof query?.value !== 'string' && typeof query?.value !== 'number' ? '' : String(query.value));
   const filteredItems = ref([]);
   const filteredMatches = ref(new Map());
+  const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items));
   watchEffect(() => {
     filteredItems.value = [];
     filteredMatches.value = new Map();
-    const transformedItems = unref(items);
-    const results = filterItems(transformedItems, strQuery.value, {
+    const results = filterItems(transformedItems.value, strQuery.value, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
-      filterKeys: unref(options?.filterKeys) ?? props.filterKeys,
+      filterKeys: props.filterKeys,
       filterMode: props.filterMode,
       noFilter: props.noFilter
     });
+    const originalItems = 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);
     });
@@ -10561,8 +10639,9 @@ function highlightResult$1(text, matches, length) {
   }, [text.substr(matches + length)])]) : text;
 }
 const makeVAutocompleteProps = propsFactory({
-  // TODO: implement post keyboard support
-  // autoSelectFirst: Boolean,
+  autoSelectFirst: {
+    type: [Boolean, String]
+  },
   search: String,
   ...makeFilterProps({
     filterKeys: ['title']
@@ -10594,6 +10673,7 @@ const VAutocomplete = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = shallowRef(false);
     const isPristine = shallowRef(true);
+    const listHasFocus = ref(false);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -10637,6 +10717,10 @@ const VAutocomplete = genericComponent()({
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
     const selection = computed(() => selections.value[selectionIndex.value]);
+    const highlightFirst = 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 = ref();
     function onClear(e) {
       if (props.openOnClear) {
@@ -10648,6 +10732,13 @@ const VAutocomplete = genericComponent()({
       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;
@@ -10662,10 +10753,16 @@ const VAutocomplete = genericComponent()({
         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');
       }
@@ -10713,6 +10810,12 @@ const VAutocomplete = genericComponent()({
     }
     function onFocusin(e) {
       isFocused.value = true;
+      setTimeout(() => {
+        listHasFocus.value = true;
+      });
+    }
+    function onFocusout(e) {
+      listHasFocus.value = false;
     }
     const isSelecting = shallowRef(false);
     function select(item) {
@@ -10734,14 +10837,22 @@ const VAutocomplete = genericComponent()({
         nextTick(() => isSelecting.value = false);
       }
     }
-    watch(isFocused, val => {
+    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;
         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;
@@ -10772,10 +10883,10 @@ const VAutocomplete = genericComponent()({
         "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,
@@ -10801,36 +10912,40 @@ const VAutocomplete = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-              item,
-              props: mergeProps(item.props, {
+            }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+              const itemProps = mergeProps(item.props, {
+                key: index,
+                active: highlightFirst.value && index === 0 ? true : undefined,
                 onClick: () => select(item)
-              })
-            }) ?? createVNode(VListItem, mergeProps({
-              "key": item.value
-            }, item.props, {
-              "onClick": () => select(item)
-            }), {
-              prepend: _ref2 => {
-                let {
-                  isSelected
-                } = _ref2;
-                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                  "modelValue": isSelected,
-                  "ripple": false,
-                  "tabindex": "-1"
-                }, null) : undefined, item.props.prependIcon && 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
+              }) ?? createVNode(VListItem, itemProps, {
+                prepend: _ref3 => {
+                  let {
+                    isSelected
+                  } = _ref3;
+                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    "key": item.value,
+                    "modelValue": isSelected,
+                    "ripple": false,
+                    "tabindex": "-1"
+                  }, null) : undefined, item.props.prependIcon && 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) {
@@ -10879,7 +10994,18 @@ const VAutocomplete = genericComponent()({
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-autocomplete__selection-comma"
           }, [createTextVNode(",")])])]);
-        })])
+        })]),
+        'append-inner': function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? createVNode(VIcon, {
+            "class": "v-autocomplete__menu-icon",
+            "icon": props.menuIcon,
+            "onMousedown": onMousedownMenuIcon,
+            "onClick": noop
+          }, null) : undefined]);
+        }
       });
     });
     return forwardRefs({
@@ -11240,7 +11366,7 @@ const VBottomNavigation = genericComponent()({
 const makeVBreadcrumbsDividerProps = propsFactory({
   divider: [Number, String],
   ...makeComponentProps()
-}, 'v-breacrumbs-divider');
+}, 'v-breadcrumbs-divider');
 const VBreadcrumbsDivider = genericComponent()({
   name: 'VBreadcrumbsDivider',
   props: makeVBreadcrumbsDividerProps(),
@@ -11328,7 +11454,7 @@ const makeVBreadcrumbsProps = propsFactory({
   ...makeTagProps({
     tag: 'ul'
   })
-}, 'v-breacrumbs');
+}, 'v-breadcrumbs');
 const VBreadcrumbs = genericComponent()({
   name: 'VBreadcrumbs',
   props: makeVBreadcrumbsProps(),
@@ -11677,6 +11803,7 @@ const VCard = genericComponent()({
 });
 
 // Types
+
 const handleGesture = wrapper => {
   const {
     touchstartX,
@@ -12457,27 +12584,6 @@ const VColorPickerCanvas = defineComponent({
 
 // 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 {
@@ -12726,6 +12832,7 @@ const VColorPickerEdit = defineComponent({
 });
 
 /* eslint-disable max-statements */
+// Composables
 
 // Types
 
@@ -12740,9 +12847,15 @@ function getPosition(e, position) {
   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
@@ -13120,7 +13233,7 @@ const VSliderThumb = genericComponent()({
         "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
       }, [createVNode("div", {
@@ -13372,8 +13485,8 @@ const VSlider = genericComponent()({
           }, [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), createVNode(VSliderTrack, {
@@ -13828,13 +13941,15 @@ const VColorPickerSwatches = defineComponent({
     }, [createVNode("div", null, [props.swatches.map(swatch => 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 createVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
       }, [createVNode("div", {
         "style": {
-          background: color
+          background
         }
       }, [props.color && deepEqual(props.color, hsva) ? createVNode(VIcon, {
         "size": "x-small",
@@ -13895,8 +14010,13 @@ const VColorPicker = defineComponent({
     const mode = useProxiedModel(props, 'mode');
     const lastPickedColor = 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,
@@ -13995,8 +14115,9 @@ function highlightResult(text, matches, length) {
   }, [text.substr(matches + length)])]) : text;
 }
 const makeVComboboxProps = propsFactory({
-  // TODO: implement post keyboard support
-  // autoSelectFirst: Boolean,
+  autoSelectFirst: {
+    type: [Boolean, String]
+  },
   delimiters: Array,
   ...makeFilterProps({
     filterKeys: ['title']
@@ -14032,6 +14153,7 @@ const VCombobox = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = shallowRef(false);
     const isPristine = shallowRef(true);
+    const listHasFocus = ref(false);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -14114,6 +14236,10 @@ const VCombobox = genericComponent()({
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
     const selection = computed(() => selections.value[selectionIndex.value]);
+    const highlightFirst = 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 = ref();
     function onClear(e) {
       cleared = true;
@@ -14125,6 +14251,13 @@ const VCombobox = genericComponent()({
       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;
@@ -14139,6 +14272,9 @@ const VCombobox = genericComponent()({
         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') {
@@ -14213,17 +14349,31 @@ const VCombobox = genericComponent()({
     }
     function onFocusin(e) {
       isFocused.value = true;
+      setTimeout(() => {
+        listHasFocus.value = true;
+      });
+    }
+    function onFocusout(e) {
+      listHasFocus.value = false;
     }
     watch(filteredItems, val => {
       if (!val.length && props.hideNoData) menu.value = false;
     });
-    watch(isFocused, val => {
-      if (val) return;
+    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);
@@ -14244,11 +14394,11 @@ const VCombobox = genericComponent()({
         "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,
@@ -14274,36 +14424,40 @@ const VCombobox = genericComponent()({
             "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']?.() ?? createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-              item,
-              props: mergeProps(item.props, {
+            }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+              const itemProps = mergeProps(item.props, {
+                key: index,
+                active: highlightFirst.value && index === 0 ? true : undefined,
                 onClick: () => select(item)
-              })
-            }) ?? createVNode(VListItem, mergeProps({
-              "key": item.value
-            }, item.props, {
-              "onClick": () => select(item)
-            }), {
-              prepend: _ref2 => {
-                let {
-                  isSelected
-                } = _ref2;
-                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                  "modelValue": isSelected,
-                  "ripple": false,
-                  "tabindex": "-1"
-                }, null) : undefined, item.props.prependIcon && 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
+              }) ?? createVNode(VListItem, itemProps, {
+                prepend: _ref3 => {
+                  let {
+                    isSelected
+                  } = _ref3;
+                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                    "key": item.value,
+                    "modelValue": isSelected,
+                    "ripple": false,
+                    "tabindex": "-1"
+                  }, null) : undefined, item.props.prependIcon && 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) {
@@ -14352,7 +14506,18 @@ const VCombobox = genericComponent()({
           }, [item.title, props.multiple && index < selections.value.length - 1 && createVNode("span", {
             "class": "v-combobox__selection-comma"
           }, [createTextVNode(",")])])]);
-        })])
+        })]),
+        'append-inner': function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
+            "class": "v-combobox__menu-icon",
+            "icon": props.menuIcon,
+            "onMousedown": onMousedownMenuIcon,
+            "onClick": noop
+          }, null) : undefined]);
+        }
       });
     });
     return forwardRefs({
@@ -14783,6 +14948,7 @@ const VFileInput = genericComponent()({
     const vFieldRef = ref();
     const inputRef = ref();
     const isActive = computed(() => isFocused.value || props.active);
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -14826,10 +14992,15 @@ const VFileInput = genericComponent()({
         "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,
@@ -15381,9 +15552,6 @@ const VItemGroup = genericComponent()({
 });
 
 // Composables
-
-// Types
-
 const VItem = genericComponent()({
   name: 'VItem',
   props: makeGroupItemProps(),
@@ -16800,15 +16968,15 @@ const VRangeSlider = genericComponent()({
           }, [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), 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), createVNode(VSliderTrack, {
@@ -18085,6 +18253,11 @@ const VTextarea = genericComponent()({
       }
     }
     const sizerRef = ref();
+    const rows = ref(+props.rows);
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
+    watchEffect(() => {
+      if (!props.autoGrow) rows.value = +props.rows;
+    });
     function calculateInputHeight() {
       if (!props.autoGrow) return;
       nextTick(() => {
@@ -18096,7 +18269,9 @@ const VTextarea = genericComponent()({
         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);
       });
     }
     onMounted(calculateInputHeight);
@@ -18136,10 +18311,11 @@ const VTextarea = genericComponent()({
           '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,
@@ -18163,6 +18339,7 @@ const VTextarea = genericComponent()({
             "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,
@@ -19543,7 +19720,7 @@ function createVuetify$1() {
     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
@@ -19563,7 +19740,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.2.4";
+const version = "3.3.0";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };