vuetify 3.2.4 → 3.3.0

package/dist/vuetify-labs.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, withModifiers } 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, withModifiers } 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, vm, parent) {
-  const newMessage = createMessage(message, vm, parent);
-  newMessage != null && console.warn(newMessage);
+function consoleWarn(message) {
+  warn(`Vuetify: ${message}`);
 }
-function consoleError(message, vm, parent) {
-  const newMessage = createMessage(message, vm, parent);
-  newMessage != null && console.error(newMessage);
+function consoleError(message) {
+  warn(`Vuetify error: ${message}`);
 }
-
-/**
- * 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
@@ -1166,6 +1174,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) {
@@ -1730,7 +1739,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));
             }
           }
         }
@@ -1738,9 +1747,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)))
@@ -1872,14 +1881,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}`);
   }
@@ -2660,6 +2669,7 @@ function useAspectStyles(props) {
 const makeVResponsiveProps = propsFactory({
   aspectRatio: [String, Number],
   contentClass: String,
+  inline: Boolean,
   ...makeComponentProps(),
   ...makeDimensionProps()
 }, 'v-responsive');
@@ -2677,7 +2687,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",
@@ -2771,7 +2783,6 @@ const MaybeTransition = (props, _ref) => {
 // Types
 
 const makeVImgProps = propsFactory({
-  aspectRatio: [String, Number],
   alt: String,
   cover: Boolean,
   eager: Boolean,
@@ -2793,7 +2804,7 @@ const makeVImgProps = propsFactory({
     default: ''
   },
   srcset: String,
-  width: [String, Number],
+  ...makeVResponsiveProps(),
   ...makeComponentProps(),
   ...makeTransitionProps()
 }, 'v-img');
@@ -2985,25 +2996,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,
@@ -3398,7 +3411,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;
@@ -3880,26 +3893,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;
 }
 
@@ -5569,10 +5582,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,
@@ -5640,6 +5660,7 @@ const VField = genericComponent()({
     const labelRef = ref();
     const floatingLabelRef = ref();
     const controlRef = ref();
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     const {
       backgroundColorClasses,
       backgroundColorStyles
@@ -5705,6 +5726,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
@@ -5714,6 +5736,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,
@@ -5799,7 +5822,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
@@ -5917,12 +5940,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;
@@ -5976,6 +5996,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validateOn: toRef(props, 'validateOn')
   });
@@ -5984,6 +6005,7 @@ function createForm(props) {
     isDisabled,
     isReadonly,
     isValidating,
+    isValid: model,
     items,
     validate,
     reset,
@@ -5999,7 +6021,10 @@ function useForm() {
 // Types
 
 const makeValidationProps = propsFactory({
-  disabled: Boolean,
+  disabled: {
+    type: Boolean,
+    default: null
+  },
   error: Boolean,
   errorMessages: {
     type: [Array, String],
@@ -6011,7 +6036,10 @@ const makeValidationProps = propsFactory({
   },
   name: String,
   label: String,
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: null
+  },
   rules: {
     type: Array,
     default: () => []
@@ -6030,15 +6058,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(() => {
@@ -6061,11 +6104,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();
@@ -6077,7 +6122,7 @@ function useValidation(props) {
       }
     });
   });
-  useToggleScope(() => validateOn.value === 'blur', () => {
+  useToggleScope(() => validateOn.value.blur, () => {
     watch(() => props.focused, val => {
       if (!val) validate();
     });
@@ -6086,14 +6131,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) {
@@ -6112,7 +6162,7 @@ function useValidation(props) {
     }
     internalErrorMessages.value = results;
     isValidating.value = false;
-    isPristine.value = false;
+    isPristine.value = silent;
     return internalErrorMessages.value;
   }
   return {
@@ -6133,6 +6183,10 @@ function useValidation(props) {
 const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
+  centerAffix: {
+    type: Boolean,
+    default: true
+  },
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
   hint: String,
@@ -6202,7 +6256,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;
@@ -6216,7 +6270,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",
@@ -6423,6 +6479,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?.();
@@ -6482,10 +6539,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,
@@ -6855,10 +6913,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,
@@ -6868,7 +6926,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 {};
   }
@@ -7828,7 +7886,9 @@ const VListGroupActivator = defineComponent({
   }
 });
 const makeVListGroupProps = propsFactory({
+  /* @deprecated */
   activeColor: String,
+  baseColor: String,
   color: String,
   collapseIcon: {
     type: IconValue,
@@ -7877,6 +7937,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,
@@ -7931,9 +7992,11 @@ const makeVListItemProps = propsFactory({
     default: undefined
   },
   activeClass: String,
+  /* @deprecated */
   activeColor: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   disabled: Boolean,
   lines: String,
   link: {
@@ -7996,8 +8059,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 => {
@@ -8054,7 +8118,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);
@@ -8062,6 +8125,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,
@@ -8070,10 +8136,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
       }, {
@@ -8224,9 +8290,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?.({
@@ -8241,10 +8305,6 @@ const VListChildren = genericComponent()({
           ...slotProps,
           item
         }) : undefined,
-        default: slots.default ? slotProps => slots.default?.({
-          ...slotProps,
-          item
-        }) : undefined,
         title: slots.title ? slotProps => slots.title?.({
           ...slotProps,
           item
@@ -8268,7 +8328,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);
     });
   }
 });
@@ -8300,8 +8362,8 @@ const makeItemsProps = propsFactory({
     default: 'props'
   },
   returnObject: Boolean
-}, 'item');
-function transformItem$1(props, item) {
+}, 'list-items');
+function transformItem$3(props, item) {
   const title = getPropertyFromItem(item, props.itemTitle, item);
   const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue, title);
   const children = getPropertyFromItem(item, props.itemChildren);
@@ -8315,33 +8377,36 @@ function transformItem$1(props, item) {
     title: String(_props.title ?? ''),
     value: _props.value,
     props: _props,
-    children: Array.isArray(children) ? transformItems$1(props, children) : undefined,
+    children: Array.isArray(children) ? transformItems$3(props, children) : undefined,
     raw: item
   };
 }
-function transformItems$1(props, items) {
+function transformItems$3(props, items) {
   const array = [];
   for (const item of items) {
-    array.push(transformItem$1(props, item));
+    array.push(transformItem$3(props, item));
   }
   return array;
 }
 function useItems(props) {
-  const items = computed(() => transformItems$1(props, props.items));
+  const items = computed(() => transformItems$3(props, props.items));
+  return useTransformItems(items, value => transformItem$3(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 {
@@ -8356,7 +8421,7 @@ function useItems(props) {
 function isPrimitive(value) {
   return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
 }
-function transformItem(props, item) {
+function transformItem$2(props, item) {
   const type = getPropertyFromItem(item, props.itemType, 'item');
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
   const value = getPropertyFromItem(item, props.itemValue, undefined);
@@ -8372,24 +8437,26 @@ function transformItem(props, item) {
     title: _props.title,
     value: _props.value,
     props: _props,
-    children: type === 'item' && children ? transformItems(props, children) : undefined,
+    children: type === 'item' && children ? transformItems$2(props, children) : undefined,
     raw: item
   };
 }
-function transformItems(props, items) {
+function transformItems$2(props, items) {
   const array = [];
   for (const item of items) {
-    array.push(transformItem(props, item));
+    array.push(transformItem$2(props, item));
   }
   return array;
 }
 function useListItems(props) {
-  const items = computed(() => transformItems(props, props.items));
+  const items = computed(() => transformItems$2(props, props.items));
   return {
     items
   };
 }
 const makeVListProps = propsFactory({
+  baseColor: String,
+  /* @deprecated */
   activeColor: String,
   activeClass: String,
   bgColor: String,
@@ -8464,16 +8531,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'),
@@ -9498,14 +9568,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));
   }
@@ -10329,10 +10399,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,
@@ -10364,25 +10434,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"
@@ -10439,7 +10505,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({
@@ -10451,6 +10526,8 @@ const VSelect = genericComponent()({
 });
 
 /* eslint-disable max-statements */
+/* eslint-disable no-labels */
+
 
 // Types
 
@@ -10520,23 +10597,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);
     });
@@ -10565,8 +10643,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']
@@ -10598,6 +10677,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({
@@ -10641,6 +10721,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) {
@@ -10652,6 +10736,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;
@@ -10666,10 +10757,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');
       }
@@ -10717,6 +10814,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) {
@@ -10738,14 +10841,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;
@@ -10776,10 +10887,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,
@@ -10805,36 +10916,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) {
@@ -10883,7 +10998,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({
@@ -11244,7 +11370,7 @@ const VBottomNavigation = genericComponent()({
 const makeVBreadcrumbsDividerProps = propsFactory({
   divider: [Number, String],
   ...makeComponentProps()
-}, 'v-breacrumbs-divider');
+}, 'v-breadcrumbs-divider');
 const VBreadcrumbsDivider = genericComponent()({
   name: 'VBreadcrumbsDivider',
   props: makeVBreadcrumbsDividerProps(),
@@ -11332,7 +11458,7 @@ const makeVBreadcrumbsProps = propsFactory({
   ...makeTagProps({
     tag: 'ul'
   })
-}, 'v-breacrumbs');
+}, 'v-breadcrumbs');
 const VBreadcrumbs = genericComponent()({
   name: 'VBreadcrumbs',
   props: makeVBreadcrumbsProps(),
@@ -11681,6 +11807,7 @@ const VCard = genericComponent()({
 });
 
 // Types
+
 const handleGesture = wrapper => {
   const {
     touchstartX,
@@ -12461,27 +12588,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 {
@@ -12730,6 +12836,7 @@ const VColorPickerEdit = defineComponent({
 });
 
 /* eslint-disable max-statements */
+// Composables
 
 // Types
 
@@ -12744,9 +12851,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
@@ -13124,7 +13237,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", {
@@ -13376,8 +13489,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, {
@@ -13832,13 +13945,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",
@@ -13899,8 +14014,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,
@@ -13999,8 +14119,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']
@@ -14036,6 +14157,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({
@@ -14070,14 +14192,14 @@ const VCombobox = genericComponent()({
       set: val => {
         _search.value = val;
         if (!props.multiple) {
-          model.value = [transformItem$1(props, val)];
+          model.value = [transformItem$3(props, val)];
         }
         if (val && props.multiple && props.delimiters?.length) {
           const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
           if (values.length > 1) {
             values.forEach(v => {
               v = v.trim();
-              if (v) select(transformItem$1(props, v));
+              if (v) select(transformItem$3(props, v));
             });
             _search.value = '';
           }
@@ -14118,6 +14240,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;
@@ -14129,6 +14255,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;
@@ -14143,6 +14276,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') {
@@ -14183,7 +14319,7 @@ const VCombobox = genericComponent()({
         }
       }
       if (e.key === 'Enter' && search.value) {
-        select(transformItem$1(props, search.value));
+        select(transformItem$3(props, search.value));
         search.value = '';
       }
     }
@@ -14217,17 +14353,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$3(props, search.value)];
+        search.value = '';
+      }
     });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
@@ -14248,11 +14398,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,
@@ -14278,36 +14428,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) {
@@ -14356,7 +14510,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({
@@ -14787,6 +14952,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();
@@ -14830,10 +14996,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,
@@ -15385,9 +15556,6 @@ const VItemGroup = genericComponent()({
 });
 
 // Composables
-
-// Types
-
 const VItem = genericComponent()({
   name: 'VItem',
   props: makeGroupItemProps(),
@@ -16804,15 +16972,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, {
@@ -18089,6 +18257,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(() => {
@@ -18100,7 +18273,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);
@@ -18140,10 +18315,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,
@@ -18167,6 +18343,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,
@@ -18786,11 +18963,83 @@ const VVirtualScroll = genericComponent()({
   }
 });
 
-// Composables
-
 // Types
 
-const makeDataTablePaginateProps = propsFactory({
+const makeVBottomSheetProps = propsFactory({
+  inset: Boolean,
+  ...makeVDialogProps({
+    contentClass: 'v-bottom-sheet__content',
+    transition: 'bottom-sheet-transition'
+  })
+}, 'v-bottom-sheet');
+const VBottomSheet = genericComponent()({
+  name: 'VBottomSheet',
+  props: makeVBottomSheetProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    useRender(() => {
+      const [dialogProps] = VDialog.filterProps(props);
+      return createVNode(VDialog, mergeProps(dialogProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "class": ['v-bottom-sheet', {
+          'v-bottom-sheet--inset': props.inset
+        }]
+      }), slots);
+    });
+    return {};
+  }
+});
+
+// Utilities
+
+// Types
+
+// Composables
+const makeDataIteratorItemProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemValue: {
+    type: [String, Array, Function],
+    default: 'value'
+  },
+  returnObject: Boolean
+}, 'v-data-iterator-item');
+function transformItem$1(props, item) {
+  const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue);
+  return {
+    type: 'item',
+    value,
+    raw: item
+  };
+}
+function transformItems$1(props, items) {
+  const array = [];
+  for (const item of items) {
+    array.push(transformItem$1(props, item));
+  }
+  return array;
+}
+function useDataIteratorItems(props) {
+  const items = computed(() => transformItems$1(props, props.items));
+  return {
+    items
+  };
+}
+
+// Composables
+
+// Types
+
+const makeDataTablePaginateProps = propsFactory({
   page: {
     type: [Number, String],
     default: 1
@@ -18836,38 +19085,605 @@ function providePagination(options) {
     itemsPerPage.value = value;
     page.value = 1;
   }
-  const data = {
-    page,
-    itemsPerPage,
-    itemsLength,
-    startIndex,
-    stopIndex,
-    pageCount,
-    setItemsPerPage
-  };
-  provide(VDataTablePaginationSymbol, data);
-  return data;
-}
-function usePagination() {
-  const data = inject$1(VDataTablePaginationSymbol);
-  if (!data) throw new Error('Missing pagination!');
-  return data;
-}
-function usePaginatedItems(options) {
-  const {
-    items,
-    startIndex,
-    stopIndex,
-    itemsPerPage
-  } = options;
-  const paginatedItems = computed(() => {
-    if (itemsPerPage.value <= 0) return items.value;
-    return items.value.slice(startIndex.value, stopIndex.value);
-  });
-  return {
-    paginatedItems
-  };
-}
+  function nextPage() {
+    page.value = clamp(page.value + 1, 1, pageCount.value);
+  }
+  function prevPage() {
+    page.value = clamp(page.value - 1, 1, pageCount.value);
+  }
+  function setPage(value) {
+    page.value = clamp(value, 1, pageCount.value);
+  }
+  const data = {
+    page,
+    itemsPerPage,
+    startIndex,
+    stopIndex,
+    pageCount,
+    itemsLength,
+    nextPage,
+    prevPage,
+    setPage,
+    setItemsPerPage
+  };
+  provide(VDataTablePaginationSymbol, data);
+  return data;
+}
+function usePagination() {
+  const data = inject$1(VDataTablePaginationSymbol);
+  if (!data) throw new Error('Missing pagination!');
+  return data;
+}
+function usePaginatedItems(options) {
+  const {
+    items,
+    startIndex,
+    stopIndex,
+    itemsPerPage
+  } = options;
+  const paginatedItems = computed(() => {
+    if (itemsPerPage.value <= 0) return items.value;
+    return items.value.slice(startIndex.value, stopIndex.value);
+  });
+  return {
+    paginatedItems
+  };
+}
+
+// Composables
+
+// Types
+
+const makeDataTableSortProps = propsFactory({
+  sortBy: {
+    type: Array,
+    default: () => []
+  },
+  customKeySort: Object,
+  multiSort: Boolean,
+  mustSort: Boolean
+}, 'v-data-table-sort');
+const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
+function createSort(props) {
+  const sortBy = useProxiedModel(props, 'sortBy');
+  const mustSort = toRef(props, 'mustSort');
+  const multiSort = toRef(props, 'multiSort');
+  return {
+    sortBy,
+    mustSort,
+    multiSort
+  };
+}
+function provideSort(options) {
+  const {
+    sortBy,
+    mustSort,
+    multiSort,
+    page
+  } = options;
+  const toggleSort = column => {
+    let newSortBy = sortBy.value.map(x => ({
+      ...x
+    })) ?? [];
+    const item = newSortBy.find(x => x.key === column.key);
+    if (!item) {
+      if (multiSort.value) newSortBy = [...newSortBy, {
+        key: column.key,
+        order: 'asc'
+      }];else newSortBy = [{
+        key: column.key,
+        order: 'asc'
+      }];
+    } else if (item.order === 'desc') {
+      if (mustSort.value) {
+        item.order = 'asc';
+      } else {
+        newSortBy = newSortBy.filter(x => x.key !== column.key);
+      }
+    } else {
+      item.order = 'desc';
+    }
+    sortBy.value = newSortBy;
+    if (page) page.value = 1;
+  };
+  function isSorted(column) {
+    return !!sortBy.value.find(item => item.key === column.key);
+  }
+  const data = {
+    sortBy,
+    toggleSort,
+    isSorted
+  };
+  provide(VDataTableSortSymbol, data);
+  return data;
+}
+function useSort() {
+  const data = inject$1(VDataTableSortSymbol);
+  if (!data) throw new Error('Missing sort!');
+  return data;
+}
+function useSortedItems(props, items, sortBy) {
+  const locale = useLocale();
+  const sortedItems = computed(() => {
+    if (!sortBy.value.length) return items.value;
+    return sortItems(items.value, sortBy.value, locale.current.value, props.customKeySort);
+  });
+  return {
+    sortedItems
+  };
+}
+function sortItems(items, sortByItems, locale, customSorters) {
+  const stringCollator = new Intl.Collator(locale, {
+    sensitivity: 'accent',
+    usage: 'sort'
+  });
+  return [...items].sort((a, b) => {
+    for (let i = 0; i < sortByItems.length; i++) {
+      const sortKey = sortByItems[i].key;
+      const sortOrder = sortByItems[i].order ?? 'asc';
+      if (sortOrder === false) continue;
+      let sortA = getObjectValueByPath(a.raw, sortKey);
+      let sortB = getObjectValueByPath(b.raw, sortKey);
+      if (sortOrder === 'desc') {
+        [sortA, sortB] = [sortB, sortA];
+      }
+      if (customSorters?.[sortKey]) {
+        const customResult = customSorters[sortKey](sortA, sortB);
+        if (!customResult) continue;
+        return customResult;
+      }
+
+      // Check if both cannot be evaluated
+      if (sortA == null || sortB == null) {
+        continue;
+      }
+
+      // Dates should be compared numerically
+      if (sortA instanceof Date && sortB instanceof Date) {
+        return sortA.getTime() - sortB.getTime();
+      }
+      [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase());
+      if (sortA !== sortB) {
+        if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
+        return stringCollator.compare(sortA, sortB);
+      }
+    }
+    return 0;
+  });
+}
+
+// Utilities
+
+// Types
+
+const makeDataTableExpandProps = propsFactory({
+  expandOnClick: Boolean,
+  showExpand: Boolean,
+  expanded: {
+    type: Array,
+    default: () => []
+  }
+}, 'v-data-table-expand');
+const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
+function provideExpanded(props) {
+  const expandOnClick = toRef(props, 'expandOnClick');
+  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
+    return new Set(v);
+  }, v => {
+    return [...v.values()];
+  });
+  function expand(item, value) {
+    const newExpanded = new Set(expanded.value);
+    if (!value) {
+      newExpanded.delete(item.value);
+    } else {
+      newExpanded.add(item.value);
+    }
+    expanded.value = newExpanded;
+  }
+  function isExpanded(item) {
+    return expanded.value.has(item.value);
+  }
+  function toggleExpand(item) {
+    expand(item, !isExpanded(item));
+  }
+  const data = {
+    expand,
+    expanded,
+    expandOnClick,
+    isExpanded,
+    toggleExpand
+  };
+  provide(VDataTableExpandedKey, data);
+  return data;
+}
+function useExpanded() {
+  const data = inject$1(VDataTableExpandedKey);
+  if (!data) throw new Error('foo');
+  return data;
+}
+
+// Composables
+
+// Types
+
+const makeDataTableGroupProps = propsFactory({
+  groupBy: {
+    type: Array,
+    default: () => []
+  }
+}, 'data-table-group');
+const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
+function createGroupBy(props) {
+  const groupBy = useProxiedModel(props, 'groupBy');
+  return {
+    groupBy
+  };
+}
+function provideGroupBy(options) {
+  const {
+    groupBy,
+    sortBy
+  } = options;
+  const opened = ref(new Set());
+  const sortByWithGroups = computed(() => {
+    return groupBy.value.map(val => ({
+      ...val,
+      order: val.order ?? false
+    })).concat(sortBy.value);
+  });
+  function isGroupOpen(group) {
+    return opened.value.has(group.id);
+  }
+  function toggleGroup(group) {
+    const newOpened = new Set(opened.value);
+    if (!isGroupOpen(group)) newOpened.add(group.id);else newOpened.delete(group.id);
+    opened.value = newOpened;
+  }
+  function extractRows(items) {
+    function dive(group) {
+      const arr = [];
+      for (const item of group.items) {
+        if ('type' in item && item.type === 'group') {
+          arr.push(...dive(item));
+        } else {
+          arr.push(item);
+        }
+      }
+      return arr;
+    }
+    return dive({
+      type: 'group',
+      items,
+      id: 'dummy',
+      key: 'dummy',
+      value: 'dummy',
+      depth: 0
+    });
+  }
+
+  // onBeforeMount(() => {
+  //   for (const key of groupedItems.value.keys()) {
+  //     opened.value.add(key)
+  //   }
+  // })
+
+  const data = {
+    sortByWithGroups,
+    toggleGroup,
+    opened,
+    groupBy,
+    extractRows,
+    isGroupOpen
+  };
+  provide(VDataTableGroupSymbol, data);
+  return data;
+}
+function useGroupBy() {
+  const data = inject$1(VDataTableGroupSymbol);
+  if (!data) throw new Error('Missing group!');
+  return data;
+}
+function groupItemsByProperty(items, groupBy) {
+  if (!items.length) return [];
+  const groups = new Map();
+  for (const item of items) {
+    const value = getObjectValueByPath(item.raw, groupBy);
+    if (!groups.has(value)) {
+      groups.set(value, []);
+    }
+    groups.get(value).push(item);
+  }
+  return groups;
+}
+function groupItems(items, groupBy) {
+  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'root';
+  if (!groupBy.length) return [];
+  const groupedItems = groupItemsByProperty(items, groupBy[0]);
+  const groups = [];
+  const rest = groupBy.slice(1);
+  groupedItems.forEach((items, value) => {
+    const key = groupBy[0];
+    const id = `${prefix}_${key}_${value}`;
+    groups.push({
+      depth,
+      id,
+      key,
+      value,
+      items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
+      type: 'group'
+    });
+  });
+  return groups;
+}
+function flattenItems(items, opened) {
+  const flatItems = [];
+  for (const item of items) {
+    // TODO: make this better
+    if ('type' in item && item.type === 'group') {
+      if (item.value != null) {
+        flatItems.push(item);
+      }
+      if (opened.has(item.id) || item.value == null) {
+        flatItems.push(...flattenItems(item.items, opened));
+      }
+    } else {
+      flatItems.push(item);
+    }
+  }
+  return flatItems;
+}
+function useGroupedItems(items, groupBy, opened) {
+  const flatItems = computed(() => {
+    if (!groupBy.value.length) return items.value;
+    const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key));
+    return flattenItems(groupedItems, opened.value);
+  });
+  return {
+    flatItems
+  };
+}
+
+// Composables
+
+// Types
+
+const makeDataTableSelectProps = propsFactory({
+  showSelect: Boolean,
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+}, 'v-data-table-select');
+const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
+function provideSelection(props, allItems) {
+  const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
+    return new Set(v);
+  }, v => {
+    return [...v.values()];
+  });
+  function isSelected(items) {
+    return wrapInArray(items).every(item => selected.value.has(item.value));
+  }
+  function isSomeSelected(items) {
+    return wrapInArray(items).some(item => selected.value.has(item.value));
+  }
+  function select(items, value) {
+    const newSelected = new Set(selected.value);
+    for (const item of items) {
+      if (value) newSelected.add(item.value);else newSelected.delete(item.value);
+    }
+    selected.value = newSelected;
+  }
+  function toggleSelect(item) {
+    select([item], !isSelected([item]));
+  }
+  function selectAll(value) {
+    select(allItems.value, value);
+  }
+  const someSelected = computed(() => selected.value.size > 0);
+  const allSelected = computed(() => isSelected(allItems.value));
+  const data = {
+    toggleSelect,
+    select,
+    selectAll,
+    isSelected,
+    isSomeSelected,
+    someSelected,
+    allSelected
+  };
+  provide(VDataTableSelectionSymbol, data);
+  return data;
+}
+function useSelection() {
+  const data = inject$1(VDataTableSelectionSymbol);
+  if (!data) throw new Error('Missing selection!');
+  return data;
+}
+
+// Utilities
+
+// Types
+
+function useOptions(_ref) {
+  let {
+    page,
+    itemsPerPage,
+    sortBy,
+    groupBy,
+    search
+  } = _ref;
+  const vm = getCurrentInstance('VDataTable');
+  const options = computed(() => ({
+    page: page.value,
+    itemsPerPage: itemsPerPage.value,
+    sortBy: sortBy.value,
+    groupBy: groupBy.value,
+    search: search.value
+  }));
+
+  // Reset page when searching
+  watch(() => search?.value, () => {
+    page.value = 1;
+  });
+  let oldOptions = null;
+  watch(options, () => {
+    if (deepEqual(oldOptions, options.value)) return;
+    vm.emit('update:options', options.value);
+    oldOptions = options.value;
+  }, {
+    deep: true,
+    immediate: true
+  });
+}
+
+// Types
+
+const makeVDataIteratorProps = propsFactory({
+  search: String,
+  loading: Boolean,
+  ...makeComponentProps(),
+  ...makeDataIteratorItemProps(),
+  ...makeDataTableSelectProps(),
+  ...makeDataTableSortProps(),
+  ...makeDataTablePaginateProps({
+    itemsPerPage: 5
+  }),
+  ...makeDataTableExpandProps(),
+  ...makeDataTableGroupProps(),
+  ...makeFilterProps(),
+  ...makeTagProps()
+}, 'v-data-iterator');
+const VDataIterator = genericComponent()({
+  name: 'VDataIterator',
+  props: makeVDataIteratorProps(),
+  emits: {
+    'update:modelValue': value => true,
+    'update:groupBy': value => true,
+    'update:page': value => true,
+    'update:itemsPerPage': value => true,
+    'update:sortBy': value => true,
+    'update:options': value => true,
+    'update:expanded': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const groupBy = useProxiedModel(props, 'groupBy');
+    const search = toRef(props, 'search');
+    const {
+      items
+    } = useDataIteratorItems(props);
+    const {
+      filteredItems
+    } = useFilter(props, items, search, {
+      transform: item => item.raw
+    });
+    const {
+      sortBy,
+      multiSort,
+      mustSort
+    } = createSort(props);
+    const {
+      page,
+      itemsPerPage
+    } = createPagination(props);
+    const {
+      toggleSort
+    } = provideSort({
+      sortBy,
+      multiSort,
+      mustSort,
+      page
+    });
+    const {
+      sortByWithGroups,
+      opened,
+      extractRows,
+      isGroupOpen,
+      toggleGroup
+    } = provideGroupBy({
+      groupBy,
+      sortBy
+    });
+    const {
+      sortedItems
+    } = useSortedItems(props, filteredItems, sortByWithGroups);
+    const {
+      flatItems
+    } = useGroupedItems(sortedItems, groupBy, opened);
+    const itemsLength = computed(() => flatItems.value.length);
+    const {
+      startIndex,
+      stopIndex,
+      pageCount,
+      prevPage,
+      nextPage,
+      setItemsPerPage,
+      setPage
+    } = providePagination({
+      page,
+      itemsPerPage,
+      itemsLength
+    });
+    const {
+      paginatedItems
+    } = usePaginatedItems({
+      items: flatItems,
+      startIndex,
+      stopIndex,
+      itemsPerPage
+    });
+    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect
+    } = provideSelection(props, paginatedItemsWithoutGroups);
+    const {
+      isExpanded,
+      toggleExpand
+    } = provideExpanded(props);
+    useOptions({
+      page,
+      itemsPerPage,
+      sortBy,
+      groupBy,
+      search
+    });
+    const slotProps = computed(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      prevPage,
+      nextPage,
+      setPage,
+      setItemsPerPage,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: paginatedItems.value,
+      groupedItems: flatItems.value
+    }));
+    useRender(() => createVNode(props.tag, {
+      "class": ['v-data-iterator', props.class],
+      "style": props.style
+    }, {
+      default: () => [slots.header?.(slotProps.value), !paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value), slots.footer?.(slotProps.value)]
+    }));
+    return {};
+  }
+});
 
 // Types
 
@@ -19088,285 +19904,104 @@ function createHeaders(props, options) {
         row: flat[index].row
       });
     }
-    if (options?.showSelect?.value) {
-      const index = flat.findIndex(_ref2 => {
-        let {
-          column
-        } = _ref2;
-        return column.key === 'data-table-select';
-      });
-      if (index < 0) flat.unshift({
-        column: {
-          ...defaultActionHeader,
-          key: 'data-table-select',
-          rowspan: rowCount
-        },
-        row: 0
-      });else flat.splice(index, 1, {
-        column: {
-          ...defaultActionHeader,
-          ...flat[index].column
-        },
-        row: flat[index].row
-      });
-    }
-    if (options?.showExpand?.value) {
-      const index = flat.findIndex(_ref3 => {
-        let {
-          column
-        } = _ref3;
-        return column.key === 'data-table-expand';
-      });
-      if (index < 0) flat.push({
-        column: {
-          ...defaultActionHeader,
-          key: 'data-table-expand',
-          rowspan: rowCount
-        },
-        row: 0
-      });else flat.splice(index, 1, {
-        column: {
-          ...defaultActionHeader,
-          ...flat[index].column
-        },
-        row: flat[index].row
-      });
-    }
-    const fixedRows = createRange(rowCount).map(() => []);
-    const fixedOffsets = createRange(rowCount).fill(0);
-    let count = 0;
-    flat.forEach(_ref4 => {
-      let {
-        column,
-        row
-      } = _ref4;
-      const id = column.key ?? `data-table-column-${count++}`;
-      for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
-        fixedRows[i].push({
-          ...column,
-          key: id,
-          fixedOffset: fixedOffsets[i],
-          sortable: column.sortable ?? !!column.key
-        });
-        fixedOffsets[i] += column.width ?? 0;
-      }
-    });
-    fixedRows.forEach(row => {
-      for (let i = row.length; i--; i >= 0) {
-        if (row[i].fixed) {
-          row[i].lastFixed = true;
-          return;
-        }
-      }
-    });
-    const seen = new Set();
-    headers.value = fixedRows.map(row => {
-      const filtered = [];
-      for (const column of row) {
-        if (!seen.has(column.key)) {
-          seen.add(column.key);
-          filtered.push(column);
-        }
-      }
-      return filtered;
-    });
-    columns.value = fixedRows.at(-1) ?? [];
-  }, {
-    deep: true,
-    immediate: true
-  });
-  const data = {
-    headers,
-    columns
-  };
-  provide(VDataTableHeadersSymbol, data);
-  return data;
-}
-function useHeaders() {
-  const data = inject$1(VDataTableHeadersSymbol);
-  if (!data) throw new Error('Missing headers!');
-  return data;
-}
-
-// Composables
-
-// Types
-
-const makeDataTableSelectProps = propsFactory({
-  showSelect: Boolean,
-  modelValue: {
-    type: Array,
-    default: () => []
-  }
-}, 'v-data-table-select');
-const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
-function provideSelection(props, allItems) {
-  const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
-    return new Set(v);
-  }, v => {
-    return [...v.values()];
-  });
-  function isSelected(items) {
-    return items.every(item => selected.value.has(item.value));
-  }
-  function isSomeSelected(items) {
-    return items.some(item => selected.value.has(item.value));
-  }
-  function select(items, value) {
-    const newSelected = new Set(selected.value);
-    for (const item of items) {
-      if (value) newSelected.add(item.value);else newSelected.delete(item.value);
-    }
-    selected.value = newSelected;
-  }
-  function toggleSelect(item) {
-    select([item], !isSelected([item]));
-  }
-  function selectAll(value) {
-    select(allItems.value, value);
-  }
-  const someSelected = computed(() => selected.value.size > 0);
-  const allSelected = computed(() => isSelected(allItems.value));
-  const data = {
-    toggleSelect,
-    select,
-    selectAll,
-    isSelected,
-    isSomeSelected,
-    someSelected,
-    allSelected
-  };
-  provide(VDataTableSelectionSymbol, data);
-  return data;
-}
-function useSelection() {
-  const data = inject$1(VDataTableSelectionSymbol);
-  if (!data) throw new Error('Missing selection!');
-  return data;
-}
-
-// Composables
-
-// Types
-
-const makeDataTableSortProps = propsFactory({
-  sortBy: {
-    type: Array,
-    default: () => []
-  },
-  multiSort: Boolean,
-  mustSort: Boolean
-}, 'v-data-table-sort');
-const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
-function createSort(props) {
-  const sortBy = useProxiedModel(props, 'sortBy');
-  const mustSort = toRef(props, 'mustSort');
-  const multiSort = toRef(props, 'multiSort');
-  return {
-    sortBy,
-    mustSort,
-    multiSort
-  };
-}
-function provideSort(options) {
-  const {
-    sortBy,
-    mustSort,
-    multiSort,
-    page
-  } = options;
-  const toggleSort = key => {
-    let newSortBy = sortBy.value.map(x => ({
-      ...x
-    })) ?? [];
-    const item = newSortBy.find(x => x.key === key);
-    if (!item) {
-      if (multiSort.value) newSortBy = [...newSortBy, {
-        key,
-        order: 'asc'
-      }];else newSortBy = [{
-        key,
-        order: 'asc'
-      }];
-    } else if (item.order === 'desc') {
-      if (mustSort.value) {
-        item.order = 'asc';
-      } else {
-        newSortBy = newSortBy.filter(x => x.key !== key);
-      }
-    } else {
-      item.order = 'desc';
+    if (options?.showSelect?.value) {
+      const index = flat.findIndex(_ref2 => {
+        let {
+          column
+        } = _ref2;
+        return column.key === 'data-table-select';
+      });
+      if (index < 0) flat.unshift({
+        column: {
+          ...defaultActionHeader,
+          key: 'data-table-select',
+          rowspan: rowCount
+        },
+        row: 0
+      });else flat.splice(index, 1, {
+        column: {
+          ...defaultActionHeader,
+          ...flat[index].column
+        },
+        row: flat[index].row
+      });
     }
-    sortBy.value = newSortBy;
-    if (page) page.value = 1;
-  };
+    if (options?.showExpand?.value) {
+      const index = flat.findIndex(_ref3 => {
+        let {
+          column
+        } = _ref3;
+        return column.key === 'data-table-expand';
+      });
+      if (index < 0) flat.push({
+        column: {
+          ...defaultActionHeader,
+          key: 'data-table-expand',
+          rowspan: rowCount
+        },
+        row: 0
+      });else flat.splice(index, 1, {
+        column: {
+          ...defaultActionHeader,
+          ...flat[index].column
+        },
+        row: flat[index].row
+      });
+    }
+    const fixedRows = createRange(rowCount).map(() => []);
+    const fixedOffsets = createRange(rowCount).fill(0);
+    flat.forEach(_ref4 => {
+      let {
+        column,
+        row
+      } = _ref4;
+      const key = column.key;
+      for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
+        fixedRows[i].push({
+          ...column,
+          key,
+          fixedOffset: fixedOffsets[i],
+          sortable: column.sortable ?? !!column.key
+        });
+        fixedOffsets[i] += column.width ?? 0;
+      }
+    });
+    fixedRows.forEach(row => {
+      for (let i = row.length; i--; i >= 0) {
+        if (row[i].fixed) {
+          row[i].lastFixed = true;
+          return;
+        }
+      }
+    });
+    const seen = new Set();
+    headers.value = fixedRows.map(row => {
+      const filtered = [];
+      for (const column of row) {
+        if (!seen.has(column.key)) {
+          seen.add(column.key);
+          filtered.push(column);
+        }
+      }
+      return filtered;
+    });
+    columns.value = fixedRows.at(-1) ?? [];
+  }, {
+    deep: true,
+    immediate: true
+  });
   const data = {
-    sortBy,
-    toggleSort
+    headers,
+    columns
   };
-  provide(VDataTableSortSymbol, data);
+  provide(VDataTableHeadersSymbol, data);
   return data;
 }
-function useSort() {
-  const data = inject$1(VDataTableSortSymbol);
-  if (!data) throw new Error('Missing sort!');
+function useHeaders() {
+  const data = inject$1(VDataTableHeadersSymbol);
+  if (!data) throw new Error('Missing headers!');
   return data;
 }
-function useSortedItems(items, sortBy, columns) {
-  // TODO: Put this in separate prop customKeySort to match filter composable?
-  const customSorters = computed(() => {
-    return columns.value.reduce((obj, item) => {
-      if (item.sort) obj[item.key] = item.sort;
-      return obj;
-    }, {});
-  });
-  const sortedItems = computed(() => {
-    if (!sortBy.value.length) return items.value;
-    return sortItems(items.value, sortBy.value, 'en', customSorters.value);
-  });
-  return {
-    sortedItems
-  };
-}
-function sortItems(items, sortByItems, locale, customSorters) {
-  const stringCollator = new Intl.Collator(locale, {
-    sensitivity: 'accent',
-    usage: 'sort'
-  });
-  return [...items].sort((a, b) => {
-    for (let i = 0; i < sortByItems.length; i++) {
-      const sortKey = sortByItems[i].key;
-      const sortOrder = sortByItems[i].order;
-      if (sortOrder === false) continue;
-      let sortA = getObjectValueByPath(a.raw, sortKey);
-      let sortB = getObjectValueByPath(b.raw, sortKey);
-      if (sortOrder === 'desc') {
-        [sortA, sortB] = [sortB, sortA];
-      }
-      if (customSorters?.[sortKey]) {
-        const customResult = customSorters[sortKey](sortA, sortB);
-        if (!customResult) continue;
-        return customResult;
-      }
-
-      // Check if both cannot be evaluated
-      if (sortA == null || sortB == null) {
-        continue;
-      }
-
-      // Dates should be compared numerically
-      if (sortA instanceof Date && sortB instanceof Date) {
-        return sortA.getTime() - sortB.getTime();
-      }
-      [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase());
-      if (sortA !== sortB) {
-        if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
-        return stringCollator.compare(sortA, sortB);
-      }
-    }
-    return 0;
-  });
-}
 
 // Types
 
@@ -19394,7 +20029,8 @@ const VDataTableHeaders = genericComponent()({
     } = _ref;
     const {
       toggleSort,
-      sortBy
+      sortBy,
+      isSorted
     } = useSort();
     const {
       someSelected,
@@ -19409,7 +20045,7 @@ const VDataTableHeaders = genericComponent()({
       loaderClasses
     } = useLoader(props);
     const getFixedStyles = (column, y) => {
-      if (!props.sticky && !column.fixed) return null;
+      if (!props.sticky && !column.fixed) return undefined;
       return {
         position: 'sticky',
         zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined,
@@ -19419,8 +20055,8 @@ const VDataTableHeaders = genericComponent()({
         top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined
       };
     };
-    function getSortIcon(id) {
-      const item = sortBy.value.find(item => item.key === id);
+    function getSortIcon(column) {
+      const item = sortBy.value.find(item => item.key === column.key);
       if (!item) return props.sortAscIcon;
       return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon;
     }
@@ -19432,6 +20068,7 @@ const VDataTableHeaders = genericComponent()({
       headers: headers.value,
       columns: columns.value,
       toggleSort,
+      isSorted,
       sortBy: sortBy.value,
       someSelected: someSelected.value,
       allSelected: allSelected.value,
@@ -19445,14 +20082,13 @@ const VDataTableHeaders = genericComponent()({
         x,
         y
       } = _ref2;
-      const isSorted = !!sortBy.value.find(x => x.key === column.key);
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
       return createVNode(VDataTableColumn, {
         "tag": "th",
         "align": column.align,
         "class": ['v-data-table__th', {
           'v-data-table__th--sortable': column.sortable,
-          'v-data-table__th--sorted': isSorted
+          'v-data-table__th--sorted': isSorted(column)
         }, loaderClasses.value],
         "style": {
           width: convertToUnit(column.width),
@@ -19461,7 +20097,7 @@ const VDataTableHeaders = genericComponent()({
         },
         "colspan": column.colspan,
         "rowspan": column.rowspan,
-        "onClick": column.sortable ? () => toggleSort(column.key) : undefined,
+        "onClick": column.sortable ? () => toggleSort(column) : undefined,
         "lastFixed": column.lastFixed,
         "noPadding": noPadding
       }, {
@@ -19469,7 +20105,13 @@ const VDataTableHeaders = genericComponent()({
           const columnSlotName = `column.${column.key}`;
           const columnSlotProps = {
             column,
-            selectAll
+            selectAll,
+            isSorted,
+            toggleSort,
+            sortBy: sortBy.value,
+            someSelected: someSelected.value,
+            allSelected: allSelected.value,
+            getSortIcon
           };
           if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
           if (column.key === 'data-table-select') {
@@ -19484,8 +20126,8 @@ const VDataTableHeaders = genericComponent()({
           }, [createVNode("span", null, [column.title]), column.sortable && createVNode(VIcon, {
             "key": "icon",
             "class": "v-data-table-header__sort-icon",
-            "icon": getSortIcon(column.key)
-          }, null), props.multiSort && isSorted && createVNode("div", {
+            "icon": getSortIcon(column)
+          }, null), props.multiSort && isSorted(column) && createVNode("div", {
             "key": "badge",
             "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
             "style": backgroundColorStyles.value
@@ -19507,149 +20149,12 @@ const VDataTableHeaders = genericComponent()({
         "active": true,
         "color": typeof props.loading === 'boolean' ? undefined : props.loading,
         "indeterminate": true
-      }, {
-        default: slots.loader
-      })])])]);
-    });
-  }
-});
-
-// Utilities
-const makeDataTableGroupProps = propsFactory({
-  groupBy: {
-    type: Array,
-    default: () => []
-  }
-}, 'data-table-group');
-const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
-function createGroupBy(props) {
-  const groupBy = useProxiedModel(props, 'groupBy');
-  return {
-    groupBy
-  };
-}
-function provideGroupBy(options) {
-  const {
-    groupBy,
-    sortBy
-  } = options;
-  const opened = ref(new Set());
-  const sortByWithGroups = computed(() => {
-    return groupBy.value.map(val => ({
-      ...val,
-      order: val.order ?? false
-    })).concat(sortBy.value);
-  });
-  function isGroupOpen(group) {
-    return opened.value.has(group.id);
-  }
-  function toggleGroup(group) {
-    const newOpened = new Set(opened.value);
-    if (!isGroupOpen(group)) newOpened.add(group.id);else newOpened.delete(group.id);
-    opened.value = newOpened;
-  }
-  function extractRows(items) {
-    function dive(group) {
-      const arr = [];
-      for (const item of group.items) {
-        if (item.type === 'item') arr.push(item);else {
-          arr.push(...dive(item));
-        }
-      }
-      return arr;
-    }
-    return dive({
-      type: 'group-header',
-      items,
-      id: 'dummy',
-      key: 'dummy',
-      value: 'dummy',
-      depth: 0
-    });
-  }
-
-  // onBeforeMount(() => {
-  //   for (const key of groupedItems.value.keys()) {
-  //     opened.value.add(key)
-  //   }
-  // })
-
-  const data = {
-    sortByWithGroups,
-    toggleGroup,
-    opened,
-    groupBy,
-    extractRows,
-    isGroupOpen
-  };
-  provide(VDataTableGroupSymbol, data);
-  return data;
-}
-function useGroupBy() {
-  const data = inject$1(VDataTableGroupSymbol);
-  if (!data) throw new Error('Missing group!');
-  return data;
-}
-function groupItemsByProperty(items, groupBy) {
-  if (!items.length) return [];
-  const groups = new Map();
-  for (const item of items) {
-    const value = getObjectValueByPath(item.raw, groupBy);
-    if (!groups.has(value)) {
-      groups.set(value, []);
-    }
-    groups.get(value).push(item);
-  }
-  return groups;
-}
-function groupItems(items, groupBy) {
-  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'root';
-  if (!groupBy.length) return [];
-  const groupedItems = groupItemsByProperty(items, groupBy[0]);
-  const groups = [];
-  const rest = groupBy.slice(1);
-  groupedItems.forEach((items, value) => {
-    const key = groupBy[0];
-    const id = `${prefix}_${key}_${value}`;
-    groups.push({
-      depth,
-      id,
-      key,
-      value,
-      items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
-      type: 'group-header'
+      }, {
+        default: slots.loader
+      })])])]);
     });
-  });
-  return groups;
-}
-function flattenItems(items, opened) {
-  const flatItems = [];
-  for (const item of items) {
-    // TODO: make this better
-    if (item.type === 'group-header') {
-      if (item.value != null) {
-        flatItems.push(item);
-      }
-      if (opened.has(item.id) || item.value == null) {
-        flatItems.push(...flattenItems(item.items, opened));
-      }
-    } else {
-      flatItems.push(item);
-    }
   }
-  return flatItems;
-}
-function useGroupedItems(items, groupBy, opened) {
-  const flatItems = computed(() => {
-    if (!groupBy.value.length) return items.value;
-    const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key));
-    return flattenItems(groupedItems, opened.value);
-  });
-  return {
-    flatItems
-  };
-}
+});
 
 // Types
 
@@ -19730,57 +20235,6 @@ const VDataTableGroupHeaderRow = genericComponent()({
   }
 });
 
-// Utilities
-
-// Types
-
-const makeDataTableExpandProps = propsFactory({
-  expandOnClick: Boolean,
-  showExpand: Boolean,
-  expanded: {
-    type: Array,
-    default: () => []
-  }
-}, 'v-data-table-expand');
-const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
-function provideExpanded(props) {
-  const expandOnClick = toRef(props, 'expandOnClick');
-  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
-    return new Set(v);
-  }, v => {
-    return [...v.values()];
-  });
-  function expand(item, value) {
-    const newExpanded = new Set(expanded.value);
-    if (!value) {
-      newExpanded.delete(item.value);
-    } else {
-      newExpanded.add(item.value);
-    }
-    expanded.value = newExpanded;
-  }
-  function isExpanded(item) {
-    return expanded.value.has(item.value);
-  }
-  function toggleExpand(item) {
-    expand(item, !isExpanded(item));
-  }
-  const data = {
-    expand,
-    expanded,
-    expandOnClick,
-    isExpanded,
-    toggleExpand
-  };
-  provide(VDataTableExpandedKey, data);
-  return data;
-}
-function useExpanded() {
-  const data = inject$1(VDataTableExpandedKey);
-  if (!data) throw new Error('foo');
-  return data;
-}
-
 // Types
 
 const makeVDataTableRowProps = propsFactory({
@@ -19917,7 +20371,7 @@ const VDataTableRows = genericComponent()({
         }, [slots['no-data']?.() ?? t(props.noDataText)])]);
       }
       return createVNode(Fragment, null, [props.items.map((item, index) => {
-        if (item.type === 'group-header') {
+        if (item.type === 'group') {
           return slots['group-header'] ? slots['group-header']({
             index,
             item,
@@ -19961,85 +20415,49 @@ const VDataTableRows = genericComponent()({
   }
 });
 
-// Composables
+// Utilities
 
 // Types
 
+// Composables
 const makeDataTableItemProps = propsFactory({
-  // TODO: Worth it to make specific datatable implementation
-  // without title, children?
-  ...makeItemsProps({
-    itemValue: 'id'
-  })
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemValue: {
+    type: [String, Array, Function],
+    default: 'value'
+  },
+  returnObject: Boolean
 }, 'v-data-table-item');
-function add(obj, key, value) {
-  const path = key.split('.');
-  while (path.length > 1) {
-    const part = path.shift();
-    if (obj[part] == null) {
-      obj[part] = {};
-    }
-    if (typeof obj[part] === 'object') {
-      obj = obj[part];
-    }
+function transformItem(props, item, columns) {
+  const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue);
+  const itemColumns = columns.reduce((obj, column) => {
+    obj[column.key] = getPropertyFromItem(item, column.value ?? column.key);
+    return obj;
+  }, {});
+  return {
+    type: 'item',
+    value,
+    columns: itemColumns,
+    raw: item
+  };
+}
+function transformItems(props, items, columns) {
+  const array = [];
+  for (const item of items) {
+    array.push(transformItem(props, item, columns));
   }
-  obj[path[0]] = value;
+  return array;
 }
 function useDataTableItems(props, columns) {
-  const {
-    items
-  } = useItems(props);
-  const dataTableItems = computed(() => items.value.map(item => {
-    return {
-      ...item,
-      type: 'item',
-      columns: columns.value.reduce((obj, column) => {
-        add(obj, column.key, getPropertyFromItem(item.raw, column.value ?? column.key));
-        return obj;
-      }, {})
-    };
-  }));
+  const items = computed(() => transformItems(props, props.items, columns.value));
   return {
-    items: dataTableItems
+    items
   };
 }
 
-// Utilities
-
-// Types
-
-function useOptions(_ref) {
-  let {
-    page,
-    itemsPerPage,
-    sortBy,
-    groupBy,
-    search
-  } = _ref;
-  const vm = getCurrentInstance('VDataTable');
-  const options = computed(() => ({
-    page: page.value,
-    itemsPerPage: itemsPerPage.value,
-    sortBy: sortBy.value,
-    groupBy: groupBy.value,
-    search: search.value
-  }));
-
-  // Reset page when searching
-  watch(() => search?.value, () => {
-    page.value = 1;
-  });
-  let oldOptions = null;
-  watch(options, () => {
-    if (deepEqual(oldOptions, options.value)) return;
-    vm.emit('update:options', options.value);
-    oldOptions = options.value;
-  }, {
-    deep: true,
-    immediate: true
-  });
-}
-
 // Types
 
 const makeDataTableProps = propsFactory({
@@ -20091,7 +20509,8 @@ const VDataTable = genericComponent()({
       itemsPerPage
     } = createPagination(props);
     const {
-      columns
+      columns,
+      headers
     } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
@@ -20100,14 +20519,15 @@ const VDataTable = genericComponent()({
     const {
       items
     } = useDataTableItems(props, columns);
-    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const search = toRef(props, 'search');
     const {
       filteredItems
     } = useFilter(props, items, search, {
-      filterKeys
+      transform: item => item.columns
     });
-    provideSort({
+    const {
+      toggleSort
+    } = provideSort({
       sortBy,
       multiSort,
       mustSort,
@@ -20116,21 +20536,25 @@ const VDataTable = genericComponent()({
     const {
       sortByWithGroups,
       opened,
-      extractRows
+      extractRows,
+      isGroupOpen,
+      toggleGroup
     } = provideGroupBy({
       groupBy,
       sortBy
     });
     const {
       sortedItems
-    } = useSortedItems(filteredItems, sortByWithGroups, columns);
+    } = useSortedItems(props, filteredItems, sortByWithGroups);
     const {
       flatItems
     } = useGroupedItems(sortedItems, groupBy, opened);
     const itemsLength = computed(() => flatItems.value.length);
     const {
       startIndex,
-      stopIndex
+      stopIndex,
+      pageCount,
+      setItemsPerPage
     } = providePagination({
       page,
       itemsPerPage,
@@ -20145,8 +20569,18 @@ const VDataTable = genericComponent()({
       itemsPerPage
     });
     const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
-    provideSelection(props, paginatedItemsWithoutGroups);
-    provideExpanded(props);
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      someSelected,
+      allSelected
+    } = provideSelection(props, paginatedItemsWithoutGroups);
+    const {
+      isExpanded,
+      toggleExpand
+    } = provideExpanded(props);
     useOptions({
       page,
       itemsPerPage,
@@ -20157,9 +20591,33 @@ const VDataTable = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
+    const slotProps = computed(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      setItemsPerPage,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: paginatedItems.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value
+    }));
     useRender(() => {
       const [dataTableFooterProps] = VDataTableFooter.filterProps(props);
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props);
@@ -20167,19 +20625,18 @@ const VDataTable = genericComponent()({
       const [tableProps] = VTable.filterProps(props);
       return createVNode(VTable, mergeProps({
         "class": ['v-data-table', {
-          'v-data-table--show-select': props.showSelect
+          'v-data-table--show-select': props.showSelect,
+          'v-data-table--loading': props.loading
         }, props.class],
         "style": props.style
       }, tableProps), {
-        top: slots.top,
-        default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
-          columns
-        }), createVNode("thead", null, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, mergeProps(dataTableRowsProps, {
+        top: () => slots.top?.(slotProps.value),
+        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), createVNode("thead", null, [createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), createVNode("tbody", null, [slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(dataTableRowsProps, {
           "items": paginatedItems.value
-        }), slots)]), slots.tbody?.(), slots.tfoot?.()])),
-        bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, dataTableFooterProps, {
+        }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : createVNode(Fragment, null, [createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
-        }))
+        })])
       });
     });
     return {};
@@ -20268,6 +20725,7 @@ function useVirtual(props, items) {
 
 const makeVDataTableVirtualProps = propsFactory({
   ...makeDataTableProps(),
+  ...makeDataTableGroupProps(),
   ...makeDataTableVirtualProps(),
   ...makeFilterProps()
 }, 'v-data-table-virtual');
@@ -20296,7 +20754,8 @@ const VDataTableVirtual = genericComponent()({
       mustSort
     } = createSort(props);
     const {
-      columns
+      columns,
+      headers
     } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
@@ -20305,14 +20764,15 @@ const VDataTableVirtual = genericComponent()({
     const {
       items
     } = useDataTableItems(props, columns);
-    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const search = toRef(props, 'search');
     const {
       filteredItems
     } = useFilter(props, items, search, {
-      filterKeys
+      transform: item => item.columns
     });
-    provideSort({
+    const {
+      toggleSort
+    } = provideSort({
       sortBy,
       multiSort,
       mustSort
@@ -20320,20 +20780,32 @@ const VDataTableVirtual = genericComponent()({
     const {
       sortByWithGroups,
       opened,
-      extractRows
+      extractRows,
+      isGroupOpen,
+      toggleGroup
     } = provideGroupBy({
       groupBy,
       sortBy
     });
     const {
       sortedItems
-    } = useSortedItems(filteredItems, sortByWithGroups, columns);
+    } = useSortedItems(props, filteredItems, sortByWithGroups);
     const {
       flatItems
     } = useGroupedItems(sortedItems, groupBy, opened);
     const allRows = computed(() => extractRows(flatItems.value));
-    provideSelection(props, allRows);
-    provideExpanded(props);
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      someSelected,
+      allSelected
+    } = provideSelection(props, allRows);
+    const {
+      isExpanded,
+      toggleExpand
+    } = provideExpanded(props);
     const {
       containerRef,
       paddingTop,
@@ -20356,20 +20828,42 @@ const VDataTableVirtual = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
+    const slotProps = computed(() => ({
+      sortBy: sortBy.value,
+      toggleSort,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: items.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value
+    }));
     useRender(() => {
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props);
       const [dataTableRowsProps] = VDataTableRows.filterProps(props);
       const [tableProps] = VTable.filterProps(props);
       return createVNode(VTable, mergeProps({
-        "class": ['v-data-table', props.class],
+        "class": ['v-data-table', {
+          'v-data-table--loading': props.loading
+        }, props.class],
         "style": [{
           '--v-table-row-height': convertToUnit(itemHeight.value)
         }, props.style]
       }, tableProps), {
-        top: slots.top,
+        top: () => slots.top?.(slotProps.value),
         wrapper: () => createVNode("div", {
           "ref": containerRef,
           "onScroll": handleScroll,
@@ -20404,7 +20898,7 @@ const VDataTableVirtual = genericComponent()({
             border: 0
           }
         }, null)])])])]),
-        bottom: slots.bottom
+        bottom: () => slots.bottom?.(slotProps.value)
       });
     });
   }
@@ -20452,9 +20946,9 @@ const VDataTableServer = genericComponent()({
       itemsPerPage
     } = createPagination(props);
     const itemsLength = computed(() => parseInt(props.itemsLength, 10));
-    provideExpanded(props);
     const {
-      columns
+      columns,
+      headers
     } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
@@ -20472,12 +20966,17 @@ const VDataTableServer = genericComponent()({
       page
     });
     const {
-      opened
+      opened,
+      isGroupOpen,
+      toggleGroup
     } = provideGroupBy({
       groupBy,
       sortBy
     });
-    providePagination({
+    const {
+      pageCount,
+      setItemsPerPage
+    } = providePagination({
       page,
       itemsPerPage,
       itemsLength
@@ -20485,7 +20984,18 @@ const VDataTableServer = genericComponent()({
     const {
       flatItems
     } = useGroupedItems(items, groupBy, opened);
-    provideSelection(props, items);
+    const {
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      someSelected,
+      allSelected
+    } = provideSelection(props, items);
+    const {
+      isExpanded,
+      toggleExpand
+    } = provideExpanded(props);
     useOptions({
       page,
       itemsPerPage,
@@ -20505,6 +21015,28 @@ const VDataTableServer = genericComponent()({
         loadingText: toRef(props, 'loadingText')
       }
     });
+    const slotProps = computed(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      setItemsPerPage,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: items.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value
+    }));
     useRender(() => {
       const [dataTableFooterProps] = VDataTableFooter.filterProps(props);
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props);
@@ -20516,23 +21048,21 @@ const VDataTableServer = genericComponent()({
         }, props.class],
         "style": props.style
       }, tableProps), {
-        top: slots.top,
-        default: slots.default ?? (() => createVNode(Fragment, null, [slots.colgroup?.({
-          columns
-        }), createVNode("thead", {
+        top: () => slots.top?.(slotProps.value),
+        default: () => slots.default ? slots.default(slotProps.value) : createVNode(Fragment, null, [slots.colgroup?.(slotProps.value), createVNode("thead", {
           "class": "v-data-table__thead",
           "role": "rowgroup"
         }, [createVNode(VDataTableHeaders, mergeProps(dataTableHeadersProps, {
           "sticky": props.fixedHeader
-        }), slots)]), slots.thead?.(), createVNode("tbody", {
+        }), slots)]), slots.thead?.(slotProps.value), createVNode("tbody", {
           "class": "v-data-table__tbody",
           "role": "rowgroup"
-        }, [slots.body ? slots.body() : createVNode(VDataTableRows, mergeProps(dataTableRowsProps, {
+        }, [slots.body ? slots.body(slotProps.value) : createVNode(VDataTableRows, mergeProps(dataTableRowsProps, {
           "items": flatItems.value
-        }), slots)]), slots.tbody?.(), slots.tfoot?.()])),
-        bottom: slots.bottom ?? (() => createVNode(VDataTableFooter, dataTableFooterProps, {
+        }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+        bottom: () => slots.bottom ? slots.bottom(slotProps.value) : createVNode(VDataTableFooter, dataTableFooterProps, {
           prepend: slots['footer.prepend']
-        }))
+        })
       });
     });
   }
@@ -20896,6 +21426,7 @@ var components = /*#__PURE__*/Object.freeze({
   VBannerActions: VBannerActions,
   VBannerText: VBannerText,
   VBottomNavigation: VBottomNavigation,
+  VBottomSheet: VBottomSheet,
   VBreadcrumbs: VBreadcrumbs,
   VBreadcrumbsDivider: VBreadcrumbsDivider,
   VBreadcrumbsItem: VBreadcrumbsItem,
@@ -20922,6 +21453,7 @@ var components = /*#__PURE__*/Object.freeze({
   VComponentIcon: VComponentIcon,
   VContainer: VContainer,
   VCounter: VCounter,
+  VDataIterator: VDataIterator,
   VDataTable: VDataTable,
   VDataTableFooter: VDataTableFooter,
   VDataTableRow: VDataTableRow,
@@ -21650,7 +22182,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
@@ -21662,7 +22194,7 @@ function inject(key) {
   }
 }
 
-const version = "3.2.4";
+const version = "3.3.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};