vuetify 3.2.4 → 3.3.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.4
+* Vuetify v3.3.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -171,6 +171,9 @@
   function keys(o) {
     return Object.keys(o);
   }
+  function has(obj, key) {
+    return key.every(k => obj.hasOwnProperty(k));
+  }
   function pick(obj, paths, exclude) {
     const found = Object.create(null);
     const rest = Object.create(null);
@@ -386,6 +389,7 @@
       if (_el) _el.focus();else focusChild(el, location === 'next' ? 'first' : 'last');
     }
   }
+  function noop() {}
 
   const block = ['top', 'bottom'];
   const inline = ['start', 'end', 'left', 'right'];
@@ -538,79 +542,16 @@
   }
 
   /* eslint-disable no-console */
-  // import Vuetify from '../framework'
-
-  function createMessage(message, vm, parent) {
-    // if (Vuetify.config.silent) return
 
-    if (parent) {
-      vm = {
-        __isVue: true,
-        $parent: parent,
-        $options: vm
-      };
-    }
-    if (vm) {
-      // Only show each message once per instance
-      vm.$_alreadyWarned = vm.$_alreadyWarned || [];
-      if (vm.$_alreadyWarned.includes(message)) return;
-      vm.$_alreadyWarned.push(message);
-    }
-    return `[Vuetify] ${message}` + (vm ? generateComponentTrace(vm) : '');
-  }
-  function consoleWarn(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.warn(newMessage);
+  function consoleWarn(message) {
+    vue.warn(`Vuetify: ${message}`);
   }
-  function consoleError(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.error(newMessage);
+  function consoleError(message) {
+    vue.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}'`;
+    vue.warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
   }
 
   // For converting XYZ to sRGB
@@ -684,7 +625,46 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function parseColor$1(color) {
+  const cssColorRe = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/;
+  const mappers = {
+    rgb: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    rgba: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    hsl: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsla: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsv: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    }),
+    hsva: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    })
+  };
+  function parseColor(color) {
     if (typeof color === 'number') {
       if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
         // int can't have opacity
@@ -695,6 +675,22 @@
         g: (color & 0xFF00) >> 8,
         b: color & 0xFF
       };
+    } else if (typeof color === 'string' && cssColorRe.test(color)) {
+      const {
+        groups
+      } = color.match(cssColorRe);
+      const {
+        fn,
+        values
+      } = groups;
+      const realValues = values.split(/,\s*/).map(v => {
+        if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) {
+          return parseFloat(v) / 100;
+        } else {
+          return parseFloat(v);
+        }
+      });
+      return mappers[fn](...realValues);
     } else if (typeof color === 'string') {
       let hex = color.startsWith('#') ? color.slice(1) : color;
       if ([3, 4].includes(hex.length)) {
@@ -707,9 +703,16 @@
         consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
       return HexToRGB(hex);
-    } else {
-      throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
+    } else if (typeof color === 'object') {
+      if (has(color, ['r', 'g', 'b'])) {
+        return color;
+      } else if (has(color, ['h', 's', 'l'])) {
+        return HSVtoRGB(HSLtoHSV(color));
+      } else if (has(color, ['h', 's', 'v'])) {
+        return HSVtoRGB(color);
+      }
     }
+    throw new TypeError(`Invalid color: ${color == null ? color : String(color) || color.constructor.name}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`);
   }
 
   /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
@@ -732,6 +735,9 @@
       a
     };
   }
+  function HSLtoRGB(hsla) {
+    return HSVtoRGB(HSLtoHSV(hsla));
+  }
 
   /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
   function RGBtoHSV(rgba) {
@@ -870,7 +876,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = parseColor$1(color);
+    const rgb = parseColor(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -886,6 +892,8 @@
     return (light + 0.05) / (dark + 0.05);
   }
 
+  // eslint-disable-line vue/prefer-import-from-vue
+
   /**
    * Creates a factory function for props definitions.
    * This is used to define props in a composable then override
@@ -1170,6 +1178,7 @@
   const acceleratedEasing = 'cubic-bezier(0.4, 0, 1, 1)'; // Leaving
 
   // Utilities
+
   function getCurrentInstance(name, message) {
     const vm = vue.getCurrentInstance();
     if (!vm) {
@@ -1734,7 +1743,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
               }
             }
           }
@@ -1742,9 +1751,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = parseColor$1(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
+          const colorVal = parseColor(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1876,14 +1885,14 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor$1(value);
+      const rgb = parseColor(value);
       variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+      const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
       variables.push(`--v-${key}: ${rgb ?? value}`);
     }
@@ -2664,6 +2673,7 @@
   const makeVResponsiveProps = propsFactory({
     aspectRatio: [String, Number],
     contentClass: String,
+    inline: Boolean,
     ...makeComponentProps(),
     ...makeDimensionProps()
   }, 'v-responsive');
@@ -2681,7 +2691,9 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode("div", {
-        "class": ['v-responsive', props.class],
+        "class": ['v-responsive', {
+          'v-responsive--inline': props.inline
+        }, props.class],
         "style": [dimensionStyles.value, props.style]
       }, [vue.createVNode("div", {
         "class": "v-responsive__sizer",
@@ -2775,7 +2787,6 @@
   // Types
 
   const makeVImgProps = propsFactory({
-    aspectRatio: [String, Number],
     alt: String,
     cover: Boolean,
     eager: Boolean,
@@ -2797,7 +2808,7 @@
       default: ''
     },
     srcset: String,
-    width: [String, Number],
+    ...makeVResponsiveProps(),
     ...makeComponentProps(),
     ...makeTransitionProps()
   }, 'v-img');
@@ -2989,25 +3000,27 @@
           }
         });
       }
-      useRender(() => vue.withDirectives(vue.createVNode(VResponsive, {
-        "class": ['v-img', {
-          'v-img--booting': !isBooted.value
-        }, props.class],
-        "style": [{
-          width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-        }, props.style],
-        "aspectRatio": aspectRatio.value,
-        "aria-label": props.alt,
-        "role": props.alt ? 'img' : undefined
-      }, {
-        additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
-        default: slots.default
-      }), [[vue.resolveDirective("intersect"), {
-        handler: init,
-        options: props.options
-      }, null, {
-        once: true
-      }]]));
+      useRender(() => {
+        const [responsiveProps] = VResponsive.filterProps(props);
+        return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
+          "class": ['v-img', {
+            'v-img--booting': !isBooted.value
+          }, props.class],
+          "style": props.style
+        }, responsiveProps, {
+          "aspectRatio": aspectRatio.value,
+          "aria-label": props.alt,
+          "role": props.alt ? 'img' : undefined
+        }), {
+          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          default: slots.default
+        }), [[vue.resolveDirective("intersect"), {
+          handler: init,
+          options: props.options
+        }, null, {
+          once: true
+        }]]);
+      });
       return {
         currentSrc,
         image,
@@ -3402,7 +3415,7 @@
       vue.watch(() => props.scrollTarget, scrollTarget => {
         const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
         if (!newTarget) {
-          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
           return;
         }
         if (newTarget === target.value) return;
@@ -3884,26 +3897,26 @@
   }
   function getIds(items, modelValue) {
     const ids = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.value != null) {
-        if (modelValue.find(value => deepEqual(value, item.value)) != null) {
-          ids.push(item.id);
-        }
-      } else if (modelValue.includes(i)) {
+    modelValue.forEach(value => {
+      const item = items.find(item => deepEqual(value, item.value));
+      const itemByIndex = items[value];
+      if (item?.value != null) {
         ids.push(item.id);
+      } else if (itemByIndex != null) {
+        ids.push(itemByIndex.id);
       }
-    }
+    });
     return ids;
   }
   function getValues(items, ids) {
     const values = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (ids.includes(item.id)) {
-        values.push(item.value != null ? item.value : i);
+    ids.forEach(id => {
+      const itemIndex = items.findIndex(item => item.id === id);
+      if (~itemIndex) {
+        const item = items[itemIndex];
+        values.push(item.value != null ? item.value : itemIndex);
       }
-    }
+    });
     return values;
   }
 
@@ -5573,10 +5586,17 @@
       default: '$clear'
     },
     active: Boolean,
+    centerAffix: {
+      type: Boolean,
+      default: undefined
+    },
     color: String,
     baseColor: String,
     dirty: Boolean,
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
     flat: Boolean,
     label: String,
@@ -5644,6 +5664,7 @@
       const labelRef = vue.ref();
       const floatingLabelRef = vue.ref();
       const controlRef = vue.ref();
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       const {
         backgroundColorClasses,
         backgroundColorStyles
@@ -5709,6 +5730,7 @@
         const hasClear = !!(props.clearable || slots.clear);
         const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear);
         const label = slots.label ? slots.label({
+          ...slotProps.value,
           label: props.label,
           props: {
             for: id.value
@@ -5718,6 +5740,7 @@
           "class": ['v-field', {
             'v-field--active': isActive.value,
             'v-field--appended': hasAppend,
+            'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
             'v-field--disabled': props.disabled,
             'v-field--dirty': props.dirty,
             'v-field--error': props.error,
@@ -5803,7 +5826,7 @@
           default: () => [label]
         })]), vue.createVNode("div", {
           "class": "v-field__outline__end"
-        }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && vue.createVNode(VFieldLabel, {
+        }, null)]), isPlainOrUnderlined.value && hasLabel.value && vue.createVNode(VFieldLabel, {
           "ref": floatingLabelRef,
           "floating": true,
           "for": id.value
@@ -5921,12 +5944,9 @@
     }
     function reset() {
       items.value.forEach(item => item.reset());
-      model.value = null;
     }
     function resetValidation() {
       items.value.forEach(item => item.resetValidation());
-      errors.value = [];
-      model.value = null;
     }
     vue.watch(items, () => {
       let valid = 0;
@@ -5980,6 +6000,7 @@
       isDisabled,
       isReadonly,
       isValidating,
+      isValid: model,
       items,
       validateOn: vue.toRef(props, 'validateOn')
     });
@@ -5988,6 +6009,7 @@
       isDisabled,
       isReadonly,
       isValidating,
+      isValid: model,
       items,
       validate,
       reset,
@@ -6003,7 +6025,10 @@
   // Types
 
   const makeValidationProps = propsFactory({
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
     errorMessages: {
       type: [Array, String],
@@ -6015,7 +6040,10 @@
     },
     name: String,
     label: String,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
     rules: {
       type: Array,
       default: () => []
@@ -6034,15 +6062,30 @@
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
-    const isDisabled = vue.computed(() => !!(props.disabled || form?.isDisabled.value));
-    const isReadonly = vue.computed(() => !!(props.readonly || form?.isReadonly.value));
+    const isDisabled = vue.computed(() => !!(props.disabled ?? form?.isDisabled.value));
+    const isReadonly = vue.computed(() => !!(props.readonly ?? form?.isReadonly.value));
     const errorMessages = vue.computed(() => {
       return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
+    const validateOn = vue.computed(() => {
+      let value = (props.validateOn ?? form?.validateOn.value) || 'input';
+      if (value === 'lazy') value = 'input lazy';
+      const set = new Set(value?.split(' ') ?? []);
+      return {
+        blur: set.has('blur') || set.has('input'),
+        input: set.has('input'),
+        submit: set.has('submit'),
+        lazy: set.has('lazy')
+      };
+    });
     const isValid = vue.computed(() => {
-      if (props.error || errorMessages.value.length) return false;
+      if (props.error || props.errorMessages.length) return false;
       if (!props.rules.length) return true;
-      return isPristine.value ? null : true;
+      if (isPristine.value) {
+        return internalErrorMessages.value.length || validateOn.value.lazy ? null : true;
+      } else {
+        return !internalErrorMessages.value.length;
+      }
     });
     const isValidating = vue.shallowRef(false);
     const validationClasses = vue.computed(() => {
@@ -6065,11 +6108,13 @@
     vue.onBeforeUnmount(() => {
       form?.unregister(uid.value);
     });
-    const validateOn = vue.computed(() => props.validateOn || form?.validateOn.value || 'input');
-
-    // Set initial valid state, for inputs that might not have rules
-    vue.onMounted(() => form?.update(uid.value, isValid.value, errorMessages.value));
-    useToggleScope(() => validateOn.value === 'input', () => {
+    vue.onMounted(async () => {
+      if (!validateOn.value.lazy) {
+        await validate(true);
+      }
+      form?.update(uid.value, isValid.value, errorMessages.value);
+    });
+    useToggleScope(() => validateOn.value.input, () => {
       vue.watch(validationModel, () => {
         if (validationModel.value != null) {
           validate();
@@ -6081,7 +6126,7 @@
         }
       });
     });
-    useToggleScope(() => validateOn.value === 'blur', () => {
+    useToggleScope(() => validateOn.value.blur, () => {
       vue.watch(() => props.focused, val => {
         if (!val) validate();
       });
@@ -6090,14 +6135,19 @@
       form?.update(uid.value, isValid.value, errorMessages.value);
     });
     function reset() {
-      resetValidation();
       model.value = null;
+      vue.nextTick(resetValidation);
     }
     function resetValidation() {
       isPristine.value = true;
-      internalErrorMessages.value = [];
+      if (!validateOn.value.lazy) {
+        validate(true);
+      } else {
+        internalErrorMessages.value = [];
+      }
     }
     async function validate() {
+      let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       const results = [];
       isValidating.value = true;
       for (const rule of props.rules) {
@@ -6116,7 +6166,7 @@
       }
       internalErrorMessages.value = results;
       isValidating.value = false;
-      isPristine.value = false;
+      isPristine.value = silent;
       return internalErrorMessages.value;
     }
     return {
@@ -6137,6 +6187,10 @@
   const makeVInputProps = propsFactory({
     id: String,
     appendIcon: IconValue,
+    centerAffix: {
+      type: Boolean,
+      default: true
+    },
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
     hint: String,
@@ -6206,7 +6260,7 @@
         validate
       }));
       const messages = vue.computed(() => {
-        if (errorMessages.value.length > 0) {
+        if (!isPristine.value && errorMessages.value.length > 0) {
           return errorMessages.value;
         } else if (props.hint && (props.persistentHint || props.focused)) {
           return props.hint;
@@ -6220,7 +6274,9 @@
         const hasMessages = messages.value.length > 0;
         const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
         return vue.createVNode("div", {
-          "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value, props.class],
+          "class": ['v-input', `v-input--${props.direction}`, {
+            'v-input--center-affix': props.centerAffix
+          }, densityClasses.value, validationClasses.value, props.class],
           "style": props.style
         }, [hasPrepend && vue.createVNode("div", {
           "key": "prepend",
@@ -6427,6 +6483,7 @@
         if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
         return props.counter;
       });
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onIntersect(isIntersecting, entries) {
         if (!props.autofocus || !isIntersecting) return;
         entries[0].target?.focus?.();
@@ -6486,10 +6543,11 @@
           "class": ['v-text-field', {
             'v-text-field--prefixed': props.prefix,
             'v-text-field--suffixed': props.suffix,
-            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
+            'v-text-field--plain-underlined': ['plain', 'underlined'].includes(props.variant)
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
+          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -6859,10 +6917,10 @@
         }
       }
       const falseIcon = vue.computed(() => {
-        return props.indeterminate ? props.indeterminateIcon : props.falseIcon;
+        return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
       });
       const trueIcon = vue.computed(() => {
-        return props.indeterminate ? props.indeterminateIcon : props.trueIcon;
+        return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
       });
       useRender(() => vue.createVNode(VSelectionControl, vue.mergeProps(props, {
         "modelValue": model.value,
@@ -6872,7 +6930,7 @@
         "type": "checkbox",
         "falseIcon": falseIcon.value,
         "trueIcon": trueIcon.value,
-        "aria-checked": props.indeterminate ? 'mixed' : undefined
+        "aria-checked": indeterminate.value ? 'mixed' : undefined
       }), slots));
       return {};
     }
@@ -7832,7 +7890,9 @@
     }
   });
   const makeVListGroupProps = propsFactory({
+    /* @deprecated */
     activeColor: String,
+    baseColor: String,
     color: String,
     collapseIcon: {
       type: IconValue,
@@ -7881,6 +7941,7 @@
         VListItem: {
           active: isOpen.value,
           activeColor: props.activeColor,
+          baseColor: props.baseColor,
           color: props.color,
           prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
           appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
@@ -7935,9 +7996,11 @@
       default: undefined
     },
     activeClass: String,
+    /* @deprecated */
     activeColor: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     disabled: Boolean,
     lines: String,
     link: {
@@ -8000,8 +8063,9 @@
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
+      const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
-        color: isActive.value ? props.activeColor ?? props.color : props.color,
+        color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
       vue.watch(() => link.isActive?.value, val => {
@@ -8058,7 +8122,6 @@
       }
       useRender(() => {
         const Tag = isLink.value ? 'a' : props.tag;
-        const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
         const hasSubtitle = slots.subtitle || props.subtitle;
         const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
@@ -8066,6 +8129,9 @@
         const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         list?.updateHasPrepend(hasPrepend);
+        if (props.activeColor) {
+          deprecate('active-color', ['color', 'base-color']);
+        }
         return vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-list-item', {
             'v-list-item--active': isActive.value,
@@ -8074,10 +8140,10 @@
             'v-list-item--nav': props.nav,
             'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
             [`${props.activeClass}`]: props.activeClass && isActive.value
-          }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
-          "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, props.style],
+          }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
+          "style": [colorStyles.value, dimensionStyles.value, props.style],
           "href": link.href.value,
-          "tabindex": isClickable.value ? 0 : undefined,
+          "tabindex": isClickable.value ? list ? -2 : 0 : undefined,
           "onClick": onClick,
           "onKeydown": isClickable.value && !isLink.value && onKeyDown
         }, {
@@ -8228,9 +8294,7 @@
         if (type === 'subheader') {
           return slots.subheader?.({
             props: itemProps
-          }) ?? vue.createVNode(VListSubheader, itemProps, {
-            default: slots.subheader
-          });
+          }) ?? vue.createVNode(VListSubheader, itemProps, null);
         }
         const slotsWithItem = {
           subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
@@ -8245,10 +8309,6 @@
             ...slotProps,
             item
           }) : undefined,
-          default: slots.default ? slotProps => slots.default?.({
-            ...slotProps,
-            item
-          }) : undefined,
           title: slots.title ? slotProps => slots.title?.({
             ...slotProps,
             item
@@ -8272,7 +8332,9 @@
           default: () => vue.createVNode(VListChildren, {
             "items": children
           }, slots)
-        }) : slots.item ? slots.item(itemProps) : vue.createVNode(VListItem, itemProps, slotsWithItem);
+        }) : slots.item ? slots.item({
+          props: itemProps
+        }) : vue.createVNode(VListItem, itemProps, slotsWithItem);
       });
     }
   });
@@ -8304,8 +8366,8 @@
       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);
@@ -8319,33 +8381,36 @@
       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 = vue.computed(() => transformItems$1(props, props.items));
+    const items = vue.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 {
@@ -8360,7 +8425,7 @@
   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);
@@ -8376,24 +8441,26 @@
       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 = vue.computed(() => transformItems(props, props.items));
+    const items = vue.computed(() => transformItems$2(props, props.items));
     return {
       items
     };
   }
   const makeVListProps = propsFactory({
+    baseColor: String,
+    /* @deprecated */
     activeColor: String,
     activeClass: String,
     bgColor: String,
@@ -8468,16 +8535,19 @@
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
       const activeColor = vue.toRef(props, 'activeColor');
+      const baseColor = vue.toRef(props, 'baseColor');
       const color = vue.toRef(props, 'color');
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
+          baseColor,
           color
         },
         VListItem: {
           activeClass: vue.toRef(props, 'activeClass'),
           activeColor,
+          baseColor,
           color,
           density: vue.toRef(props, 'density'),
           disabled: vue.toRef(props, 'disabled'),
@@ -9502,14 +9572,14 @@
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
     return mergeDeep(defaultDisplayOptions, options);
   };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  function getClientWidth(ssr) {
+    return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === 'object' && ssr.clientWidth || 0;
   }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  function getClientHeight(ssr) {
+    return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === 'object' && ssr.clientHeight || 0;
   }
-  function getPlatform(isHydrate) {
-    const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
+  function getPlatform(ssr) {
+    const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : 'ssr';
     function match(regexp) {
       return Boolean(userAgent.match(regexp));
     }
@@ -10333,10 +10403,10 @@
             'v-select--active-menu': menu.value,
             'v-select--chips': !!props.chips,
             [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
-            'v-select--selected': model.value.length
+            'v-select--selected': model.value.length,
+            'v-select--selection-slot': !!slots.selection
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.menuIcon,
           "readonly": true,
           "placeholder": placeholder,
           "onClick:clear": onClear,
@@ -10368,25 +10438,21 @@
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
-                if (slots.item) {
-                  return slots.item?.({
-                    item,
-                    index,
-                    props: vue.mergeProps(item.props, {
-                      onClick: () => select(item)
-                    })
-                  });
-                }
-                return vue.createVNode(VListItem, vue.mergeProps({
-                  "key": index
-                }, item.props, {
-                  "onClick": () => select(item)
-                }), {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  onClick: () => select(item)
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
                   prepend: _ref2 => {
                     let {
                       isSelected
                     } = _ref2;
                     return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
@@ -10443,7 +10509,16 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-select__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-select__menu-icon",
+              "icon": props.menuIcon
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -10455,6 +10530,8 @@
   });
 
   /* eslint-disable max-statements */
+  /* eslint-disable no-labels */
+
 
   // Types
 
@@ -10524,23 +10601,24 @@
     const strQuery = vue.computed(() => typeof query?.value !== 'string' && typeof query?.value !== 'number' ? '' : String(query.value));
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
+    const transformedItems = vue.computed(() => options?.transform ? vue.unref(items).map(options?.transform) : vue.unref(items));
     vue.watchEffect(() => {
       filteredItems.value = [];
       filteredMatches.value = new Map();
-      const transformedItems = vue.unref(items);
-      const results = filterItems(transformedItems, strQuery.value, {
+      const results = filterItems(transformedItems.value, strQuery.value, {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
-        filterKeys: vue.unref(options?.filterKeys) ?? props.filterKeys,
+        filterKeys: props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter
       });
+      const originalItems = vue.unref(items);
       results.forEach(_ref => {
         let {
           index,
           matches
         } = _ref;
-        const item = transformedItems[index];
+        const item = originalItems[index];
         filteredItems.value.push(item);
         filteredMatches.value.set(item.value, matches);
       });
@@ -10569,8 +10647,9 @@
     }, [text.substr(matches + length)])]) : text;
   }
   const makeVAutocompleteProps = propsFactory({
-    // TODO: implement post keyboard support
-    // autoSelectFirst: Boolean,
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
     search: String,
     ...makeFilterProps({
       filterKeys: ['title']
@@ -10602,6 +10681,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
+      const listHasFocus = vue.ref(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -10645,6 +10725,10 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
+      const highlightFirst = vue.computed(() => {
+        const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
+        return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         if (props.openOnClear) {
@@ -10656,6 +10740,13 @@
         if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
         menu.value = true;
       }
+      function onMousedownMenuIcon(e) {
+        if (isFocused.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        menu.value = !menu.value;
+      }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
@@ -10670,10 +10761,16 @@
           menu.value = false;
         }
         if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+            select(filteredItems.value[0]);
+          }
           isPristine.value = true;
         }
         if (e.key === 'ArrowDown') {
           listRef.value?.focus('next');
+          if (highlightFirst.value) {
+            listRef.value?.focus('next');
+          }
         } else if (e.key === 'ArrowUp') {
           listRef.value?.focus('prev');
         }
@@ -10721,6 +10818,12 @@
       }
       function onFocusin(e) {
         isFocused.value = true;
+        setTimeout(() => {
+          listHasFocus.value = true;
+        });
+      }
+      function onFocusout(e) {
+        listHasFocus.value = false;
       }
       const isSelecting = vue.shallowRef(false);
       function select(item) {
@@ -10742,14 +10845,22 @@
           vue.nextTick(() => isSelecting.value = false);
         }
       }
-      vue.watch(isFocused, val => {
+      vue.watch(isFocused, (val, oldVal) => {
+        if (val === oldVal) return;
         if (val) {
           isSelecting.value = true;
           search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '');
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
-          if (!props.multiple && !search.value) model.value = [];
+          if (!props.multiple && !search.value) model.value = [];else if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+            let {
+              value
+            } = _ref2;
+            return value === displayItems.value[0].value;
+          })) {
+            select(displayItems.value[0]);
+          }
           menu.value = false;
           search.value = '';
           selectionIndex.value = -1;
@@ -10780,10 +10891,10 @@
           "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
             'v-autocomplete--active-menu': menu.value,
             'v-autocomplete--chips': !!props.chips,
+            'v-autocomplete--selection-slot': !!slots.selection,
             'v-autocomplete--selecting-index': selectionIndex.value > -1
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.menuIcon,
           "readonly": props.readonly,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
@@ -10809,36 +10920,40 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin
+              "onFocusin": onFocusin,
+              "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-                item,
-                props: vue.mergeProps(item.props, {
+              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item)
-                })
-              }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": item.value
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
-                prepend: _ref2 => {
-                  let {
-                    isSelected
-                  } = _ref2;
-                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                },
-                title: () => {
-                  return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                }
-              })), slots['append-item']?.()]
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
+                  },
+                  title: () => {
+                    return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                  }
+                });
+              }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
             function onChipClose(e) {
@@ -10887,7 +11002,18 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-autocomplete__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-autocomplete__menu-icon",
+              "icon": props.menuIcon,
+              "onMousedown": onMousedownMenuIcon,
+              "onClick": noop
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -11248,7 +11374,7 @@
   const makeVBreadcrumbsDividerProps = propsFactory({
     divider: [Number, String],
     ...makeComponentProps()
-  }, 'v-breacrumbs-divider');
+  }, 'v-breadcrumbs-divider');
   const VBreadcrumbsDivider = genericComponent()({
     name: 'VBreadcrumbsDivider',
     props: makeVBreadcrumbsDividerProps(),
@@ -11336,7 +11462,7 @@
     ...makeTagProps({
       tag: 'ul'
     })
-  }, 'v-breacrumbs');
+  }, 'v-breadcrumbs');
   const VBreadcrumbs = genericComponent()({
     name: 'VBreadcrumbs',
     props: makeVBreadcrumbsProps(),
@@ -11685,6 +11811,7 @@
   });
 
   // Types
+
   const handleGesture = wrapper => {
     const {
       touchstartX,
@@ -12465,27 +12592,6 @@
 
   // Types
 
-  function has(obj, key) {
-    return key.every(k => obj.hasOwnProperty(k));
-  }
-  function parseColor(color) {
-    if (!color) return null;
-    let hsva = null;
-    if (typeof color === 'string') {
-      const hex = parseHex(color);
-      hsva = HexToHSV(hex);
-    }
-    if (typeof color === 'object') {
-      if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBtoHSV(color);
-      } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLtoHSV(color);
-      } else if (has(color, ['h', 's', 'v'])) {
-        hsva = color;
-      }
-    }
-    return hsva;
-  }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
       const {
@@ -12734,6 +12840,7 @@
   });
 
   /* eslint-disable max-statements */
+  // Composables
 
   // Types
 
@@ -12748,9 +12855,15 @@
     if ('touches' in e && e.touches.length) return e.touches[0][position];else if ('changedTouches' in e && e.changedTouches.length) return e.changedTouches[0][position];else return e[position];
   }
   const makeSliderProps = propsFactory({
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null
+    },
     error: Boolean,
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null
+    },
     max: {
       type: [Number, String],
       default: 100
@@ -13128,7 +13241,7 @@
           "aria-valuemin": props.min,
           "aria-valuemax": props.max,
           "aria-valuenow": props.modelValue,
-          "aria-readonly": readonly.value,
+          "aria-readonly": !!readonly.value,
           "aria-orientation": direction.value,
           "onKeydown": !readonly.value ? onKeydown : undefined
         }, [vue.createVNode("div", {
@@ -13380,8 +13493,8 @@
             }, [vue.createVNode("input", {
               "id": id.value,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value
             }, null), vue.createVNode(VSliderTrack, {
@@ -13836,13 +13949,15 @@
       }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
-        const hsva = parseColor(color);
+        const rgba = parseColor(color);
+        const hsva = RGBtoHSV(rgba);
+        const background = RGBtoCSS(rgba);
         return vue.createVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
         }, [vue.createVNode("div", {
           "style": {
-            background: color
+            background
           }
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
@@ -13903,8 +14018,13 @@
       const mode = useProxiedModel(props, 'mode');
       const lastPickedColor = vue.ref(null);
       const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
-        let c = parseColor(v);
-        if (!c) return null;
+        let c;
+        try {
+          c = RGBtoHSV(parseColor(v));
+        } catch (err) {
+          consoleWarn(err);
+          return null;
+        }
         if (lastPickedColor.value) {
           c = {
             ...c,
@@ -14003,8 +14123,9 @@
     }, [text.substr(matches + length)])]) : text;
   }
   const makeVComboboxProps = propsFactory({
-    // TODO: implement post keyboard support
-    // autoSelectFirst: Boolean,
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
     delimiters: Array,
     ...makeFilterProps({
       filterKeys: ['title']
@@ -14040,6 +14161,7 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.shallowRef(false);
       const isPristine = vue.shallowRef(true);
+      const listHasFocus = vue.ref(false);
       const vMenuRef = vue.ref();
       const _menu = useProxiedModel(props, 'menu');
       const menu = vue.computed({
@@ -14074,14 +14196,14 @@
         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 = '';
             }
@@ -14122,6 +14244,10 @@
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
       const selection = vue.computed(() => selections.value[selectionIndex.value]);
+      const highlightFirst = vue.computed(() => {
+        const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
+        return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+      });
       const listRef = vue.ref();
       function onClear(e) {
         cleared = true;
@@ -14133,6 +14259,13 @@
         if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
         menu.value = true;
       }
+      function onMousedownMenuIcon(e) {
+        if (isFocused.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        menu.value = !menu.value;
+      }
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
@@ -14147,6 +14280,9 @@
           menu.value = false;
         }
         if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
+            select(filteredItems.value[0]);
+          }
           isPristine.value = true;
         }
         if (e.key === 'ArrowDown') {
@@ -14187,7 +14323,7 @@
           }
         }
         if (e.key === 'Enter' && search.value) {
-          select(transformItem$1(props, search.value));
+          select(transformItem$3(props, search.value));
           search.value = '';
         }
       }
@@ -14221,17 +14357,31 @@
       }
       function onFocusin(e) {
         isFocused.value = true;
+        setTimeout(() => {
+          listHasFocus.value = true;
+        });
+      }
+      function onFocusout(e) {
+        listHasFocus.value = false;
       }
       vue.watch(filteredItems, val => {
         if (!val.length && props.hideNoData) menu.value = false;
       });
-      vue.watch(isFocused, val => {
-        if (val) return;
+      vue.watch(isFocused, (val, oldVal) => {
+        if (val || val === oldVal) return;
         selectionIndex.value = -1;
         menu.value = false;
-        if (!props.multiple || !search.value) return;
-        model.value = [...model.value, transformItem$1(props, search.value)];
-        search.value = '';
+        if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+          let {
+            value
+          } = _ref2;
+          return value === displayItems.value[0].value;
+        })) {
+          select(displayItems.value[0]);
+        } else if (props.multiple && search.value) {
+          model.value = [...model.value, transformItem$3(props, search.value)];
+          search.value = '';
+        }
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
@@ -14252,11 +14402,11 @@
           "class": ['v-combobox', {
             'v-combobox--active-menu': menu.value,
             'v-combobox--chips': !!props.chips,
+            'v-combobox--selection-slot': !!slots.selection,
             'v-combobox--selecting-index': selectionIndex.value > -1,
             [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
           }, props.class],
           "style": props.style,
-          "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
           "readonly": props.readonly,
           "placeholder": isDirty ? undefined : props.placeholder,
           "onClick:clear": onClear,
@@ -14282,36 +14432,40 @@
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
-              "onFocusin": onFocusin
+              "onFocusin": onFocusin,
+              "onFocusout": onFocusout
             }, {
               default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
                 "title": t(props.noDataText)
-              }, null)), slots['prepend-item']?.(), displayItems.value.map(item => slots.item?.({
-                item,
-                props: vue.mergeProps(item.props, {
+              }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+                const itemProps = vue.mergeProps(item.props, {
+                  key: index,
+                  active: highlightFirst.value && index === 0 ? true : undefined,
                   onClick: () => select(item)
-                })
-              }) ?? vue.createVNode(VListItem, vue.mergeProps({
-                "key": item.value
-              }, item.props, {
-                "onClick": () => select(item)
-              }), {
-                prepend: _ref2 => {
-                  let {
-                    isSelected
-                  } = _ref2;
-                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
-                    "modelValue": isSelected,
-                    "ripple": false,
-                    "tabindex": "-1"
-                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
-                    "icon": item.props.prependIcon
-                  }, null)]);
-                },
-                title: () => {
-                  return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
-                }
-              })), slots['append-item']?.()]
+                });
+                return slots.item?.({
+                  item,
+                  index,
+                  props: itemProps
+                }) ?? vue.createVNode(VListItem, itemProps, {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
+                  },
+                  title: () => {
+                    return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
+                  }
+                });
+              }), slots['append-item']?.()]
             })]
           }), selections.value.map((item, index) => {
             function onChipClose(e) {
@@ -14360,7 +14514,18 @@
             }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
               "class": "v-combobox__selection-comma"
             }, [vue.createTextVNode(",")])])]);
-          })])
+          })]),
+          'append-inner': function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return vue.createVNode(vue.Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? vue.createVNode(VIcon, {
+              "class": "v-combobox__menu-icon",
+              "icon": props.menuIcon,
+              "onMousedown": onMousedownMenuIcon,
+              "onClick": noop
+            }, null) : undefined]);
+          }
         });
       });
       return forwardRefs({
@@ -14791,6 +14956,7 @@
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
       const isActive = vue.computed(() => isFocused.value || props.active);
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -14834,10 +15000,15 @@
           "ref": vInputRef,
           "modelValue": model.value,
           "onUpdate:modelValue": $event => model.value = $event,
-          "class": ['v-file-input', props.class],
+          "class": ['v-file-input', {
+            'v-file-input--chips': !!props.chips,
+            'v-file-input--selection-slot': !!slots.selection,
+            'v-text-field--plain-underlined': isPlainOrUnderlined.value
+          }, props.class],
           "style": props.style,
           "onClick:prepend": onClickPrepend
         }, rootAttrs, inputProps, {
+          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -15389,9 +15560,6 @@
   });
 
   // Composables
-
-  // Types
-
   const VItem = genericComponent()({
     name: 'VItem',
     props: makeGroupItemProps(),
@@ -16808,15 +16976,15 @@
             }, [vue.createVNode("input", {
               "id": `${id.value}_start`,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[0]
             }, null), vue.createVNode("input", {
               "id": `${id.value}_stop`,
               "name": props.name || id.value,
-              "disabled": props.disabled,
-              "readonly": props.readonly,
+              "disabled": !!props.disabled,
+              "readonly": !!props.readonly,
               "tabindex": "-1",
               "value": model.value[1]
             }, null), vue.createVNode(VSliderTrack, {
@@ -18093,6 +18261,11 @@
         }
       }
       const sizerRef = vue.ref();
+      const rows = vue.ref(+props.rows);
+      const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
+      vue.watchEffect(() => {
+        if (!props.autoGrow) rows.value = +props.rows;
+      });
       function calculateInputHeight() {
         if (!props.autoGrow) return;
         vue.nextTick(() => {
@@ -18104,7 +18277,9 @@
           const lineHeight = parseFloat(style.lineHeight);
           const minHeight = Math.max(parseFloat(props.rows) * lineHeight + padding, parseFloat(fieldStyle.getPropertyValue('--v-input-control-height')));
           const maxHeight = parseFloat(props.maxRows) * lineHeight + padding || Infinity;
-          controlHeight.value = convertToUnit(clamp(height ?? 0, minHeight, maxHeight));
+          const newHeight = clamp(height ?? 0, minHeight, maxHeight);
+          rows.value = Math.floor((newHeight - padding) / lineHeight);
+          controlHeight.value = convertToUnit(newHeight);
         });
       }
       vue.onMounted(calculateInputHeight);
@@ -18144,10 +18319,11 @@
             'v-text-field--suffixed': props.suffix,
             'v-textarea--auto-grow': props.autoGrow,
             'v-textarea--no-resize': props.noResize || props.autoGrow,
-            'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
+            'v-text-field--plain-underlined': isPlainOrUnderlined.value
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
+          "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -18171,6 +18347,7 @@
               "role": "textbox"
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
+              "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
               "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -18790,11 +18967,83 @@
     }
   });
 
-  // 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 vue.createVNode(VDialog, vue.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 = vue.computed(() => transformItems$1(props, props.items));
+    return {
+      items
+    };
+  }
+
+  // Composables
+
+  // Types
+
+  const makeDataTablePaginateProps = propsFactory({
     page: {
       type: [Number, String],
       default: 1
@@ -18840,38 +19089,605 @@
       itemsPerPage.value = value;
       page.value = 1;
     }
-    const data = {
-      page,
-      itemsPerPage,
-      itemsLength,
-      startIndex,
-      stopIndex,
-      pageCount,
-      setItemsPerPage
-    };
-    vue.provide(VDataTablePaginationSymbol, data);
-    return data;
-  }
-  function usePagination() {
-    const data = vue.inject(VDataTablePaginationSymbol);
-    if (!data) throw new Error('Missing pagination!');
-    return data;
-  }
-  function usePaginatedItems(options) {
-    const {
-      items,
-      startIndex,
-      stopIndex,
-      itemsPerPage
-    } = options;
-    const paginatedItems = vue.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
+    };
+    vue.provide(VDataTablePaginationSymbol, data);
+    return data;
+  }
+  function usePagination() {
+    const data = vue.inject(VDataTablePaginationSymbol);
+    if (!data) throw new Error('Missing pagination!');
+    return data;
+  }
+  function usePaginatedItems(options) {
+    const {
+      items,
+      startIndex,
+      stopIndex,
+      itemsPerPage
+    } = options;
+    const paginatedItems = vue.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 = vue.toRef(props, 'mustSort');
+    const multiSort = vue.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
+    };
+    vue.provide(VDataTableSortSymbol, data);
+    return data;
+  }
+  function useSort() {
+    const data = vue.inject(VDataTableSortSymbol);
+    if (!data) throw new Error('Missing sort!');
+    return data;
+  }
+  function useSortedItems(props, items, sortBy) {
+    const locale = useLocale();
+    const sortedItems = vue.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 = vue.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
+    };
+    vue.provide(VDataTableExpandedKey, data);
+    return data;
+  }
+  function useExpanded() {
+    const data = vue.inject(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 = vue.ref(new Set());
+    const sortByWithGroups = vue.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
+    };
+    vue.provide(VDataTableGroupSymbol, data);
+    return data;
+  }
+  function useGroupBy() {
+    const data = vue.inject(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 = vue.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 = vue.computed(() => selected.value.size > 0);
+    const allSelected = vue.computed(() => isSelected(allItems.value));
+    const data = {
+      toggleSelect,
+      select,
+      selectAll,
+      isSelected,
+      isSomeSelected,
+      someSelected,
+      allSelected
+    };
+    vue.provide(VDataTableSelectionSymbol, data);
+    return data;
+  }
+  function useSelection() {
+    const data = vue.inject(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 = vue.computed(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      groupBy: groupBy.value,
+      search: search.value
+    }));
+
+    // Reset page when searching
+    vue.watch(() => search?.value, () => {
+      page.value = 1;
+    });
+    let oldOptions = null;
+    vue.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 = vue.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 = vue.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 = vue.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 = vue.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(() => vue.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
 
@@ -19092,285 +19908,104 @@
           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
-    };
-    vue.provide(VDataTableHeadersSymbol, data);
-    return data;
-  }
-  function useHeaders() {
-    const data = vue.inject(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 = vue.computed(() => selected.value.size > 0);
-    const allSelected = vue.computed(() => isSelected(allItems.value));
-    const data = {
-      toggleSelect,
-      select,
-      selectAll,
-      isSelected,
-      isSomeSelected,
-      someSelected,
-      allSelected
-    };
-    vue.provide(VDataTableSelectionSymbol, data);
-    return data;
-  }
-  function useSelection() {
-    const data = vue.inject(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 = vue.toRef(props, 'mustSort');
-    const multiSort = vue.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
     };
-    vue.provide(VDataTableSortSymbol, data);
+    vue.provide(VDataTableHeadersSymbol, data);
     return data;
   }
-  function useSort() {
-    const data = vue.inject(VDataTableSortSymbol);
-    if (!data) throw new Error('Missing sort!');
+  function useHeaders() {
+    const data = vue.inject(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 = vue.computed(() => {
-      return columns.value.reduce((obj, item) => {
-        if (item.sort) obj[item.key] = item.sort;
-        return obj;
-      }, {});
-    });
-    const sortedItems = vue.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
 
@@ -19398,7 +20033,8 @@
       } = _ref;
       const {
         toggleSort,
-        sortBy
+        sortBy,
+        isSorted
       } = useSort();
       const {
         someSelected,
@@ -19413,7 +20049,7 @@
         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,
@@ -19423,8 +20059,8 @@
           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;
       }
@@ -19436,6 +20072,7 @@
         headers: headers.value,
         columns: columns.value,
         toggleSort,
+        isSorted,
         sortBy: sortBy.value,
         someSelected: someSelected.value,
         allSelected: allSelected.value,
@@ -19449,14 +20086,13 @@
           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 vue.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),
@@ -19465,7 +20101,7 @@
           },
           "colspan": column.colspan,
           "rowspan": column.rowspan,
-          "onClick": column.sortable ? () => toggleSort(column.key) : undefined,
+          "onClick": column.sortable ? () => toggleSort(column) : undefined,
           "lastFixed": column.lastFixed,
           "noPadding": noPadding
         }, {
@@ -19473,7 +20109,13 @@
             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') {
@@ -19488,8 +20130,8 @@
             }, [vue.createVNode("span", null, [column.title]), column.sortable && vue.createVNode(VIcon, {
               "key": "icon",
               "class": "v-data-table-header__sort-icon",
-              "icon": getSortIcon(column.key)
-            }, null), props.multiSort && isSorted && vue.createVNode("div", {
+              "icon": getSortIcon(column)
+            }, null), props.multiSort && isSorted(column) && vue.createVNode("div", {
               "key": "badge",
               "class": ['v-data-table-header__sort-badge', ...backgroundColorClasses.value],
               "style": backgroundColorStyles.value
@@ -19511,149 +20153,12 @@
           "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 = vue.ref(new Set());
-    const sortByWithGroups = vue.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
-    };
-    vue.provide(VDataTableGroupSymbol, data);
-    return data;
-  }
-  function useGroupBy() {
-    const data = vue.inject(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 = vue.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
 
@@ -19734,57 +20239,6 @@
     }
   });
 
-  // 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 = vue.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
-    };
-    vue.provide(VDataTableExpandedKey, data);
-    return data;
-  }
-  function useExpanded() {
-    const data = vue.inject(VDataTableExpandedKey);
-    if (!data) throw new Error('foo');
-    return data;
-  }
-
   // Types
 
   const makeVDataTableRowProps = propsFactory({
@@ -19921,7 +20375,7 @@
           }, [slots['no-data']?.() ?? t(props.noDataText)])]);
         }
         return vue.createVNode(vue.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,
@@ -19965,85 +20419,49 @@
     }
   });
 
-  // 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 = vue.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 = vue.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 = vue.computed(() => ({
-      page: page.value,
-      itemsPerPage: itemsPerPage.value,
-      sortBy: sortBy.value,
-      groupBy: groupBy.value,
-      search: search.value
-    }));
-
-    // Reset page when searching
-    vue.watch(() => search?.value, () => {
-      page.value = 1;
-    });
-    let oldOptions = null;
-    vue.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({
@@ -20095,7 +20513,8 @@
         itemsPerPage
       } = createPagination(props);
       const {
-        columns
+        columns,
+        headers
       } = createHeaders(props, {
         groupBy,
         showSelect: vue.toRef(props, 'showSelect'),
@@ -20104,14 +20523,15 @@
       const {
         items
       } = useDataTableItems(props, columns);
-      const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
       const search = vue.toRef(props, 'search');
       const {
         filteredItems
       } = useFilter(props, items, search, {
-        filterKeys
+        transform: item => item.columns
       });
-      provideSort({
+      const {
+        toggleSort
+      } = provideSort({
         sortBy,
         multiSort,
         mustSort,
@@ -20120,21 +20540,25 @@
       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 = vue.computed(() => flatItems.value.length);
       const {
         startIndex,
-        stopIndex
+        stopIndex,
+        pageCount,
+        setItemsPerPage
       } = providePagination({
         page,
         itemsPerPage,
@@ -20149,8 +20573,18 @@
         itemsPerPage
       });
       const paginatedItemsWithoutGroups = vue.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,
@@ -20161,9 +20595,33 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
+      const slotProps = vue.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);
@@ -20171,19 +20629,18 @@
         const [tableProps] = VTable.filterProps(props);
         return vue.createVNode(VTable, vue.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 ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
-            columns
-          }), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, vue.mergeProps(dataTableRowsProps, {
+          top: () => slots.top?.(slotProps.value),
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", null, [slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(dataTableRowsProps, {
             "items": paginatedItems.value
-          }), slots)]), slots.tbody?.(), slots.tfoot?.()])),
-          bottom: slots.bottom ?? (() => vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(vue.Fragment, null, [vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
-          }))
+          })])
         });
       });
       return {};
@@ -20272,6 +20729,7 @@
 
   const makeVDataTableVirtualProps = propsFactory({
     ...makeDataTableProps(),
+    ...makeDataTableGroupProps(),
     ...makeDataTableVirtualProps(),
     ...makeFilterProps()
   }, 'v-data-table-virtual');
@@ -20300,7 +20758,8 @@
         mustSort
       } = createSort(props);
       const {
-        columns
+        columns,
+        headers
       } = createHeaders(props, {
         groupBy,
         showSelect: vue.toRef(props, 'showSelect'),
@@ -20309,14 +20768,15 @@
       const {
         items
       } = useDataTableItems(props, columns);
-      const filterKeys = vue.computed(() => columns.value.map(c => 'columns.' + c.key));
       const search = vue.toRef(props, 'search');
       const {
         filteredItems
       } = useFilter(props, items, search, {
-        filterKeys
+        transform: item => item.columns
       });
-      provideSort({
+      const {
+        toggleSort
+      } = provideSort({
         sortBy,
         multiSort,
         mustSort
@@ -20324,20 +20784,32 @@
       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 = vue.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,
@@ -20360,20 +20832,42 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
+      const slotProps = vue.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 vue.createVNode(VTable, vue.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: () => vue.createVNode("div", {
             "ref": containerRef,
             "onScroll": handleScroll,
@@ -20408,7 +20902,7 @@
               border: 0
             }
           }, null)])])])]),
-          bottom: slots.bottom
+          bottom: () => slots.bottom?.(slotProps.value)
         });
       });
     }
@@ -20456,9 +20950,9 @@
         itemsPerPage
       } = createPagination(props);
       const itemsLength = vue.computed(() => parseInt(props.itemsLength, 10));
-      provideExpanded(props);
       const {
-        columns
+        columns,
+        headers
       } = createHeaders(props, {
         groupBy,
         showSelect: vue.toRef(props, 'showSelect'),
@@ -20476,12 +20970,17 @@
         page
       });
       const {
-        opened
+        opened,
+        isGroupOpen,
+        toggleGroup
       } = provideGroupBy({
         groupBy,
         sortBy
       });
-      providePagination({
+      const {
+        pageCount,
+        setItemsPerPage
+      } = providePagination({
         page,
         itemsPerPage,
         itemsLength
@@ -20489,7 +20988,18 @@
       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,
@@ -20509,6 +21019,28 @@
           loadingText: vue.toRef(props, 'loadingText')
         }
       });
+      const slotProps = vue.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);
@@ -20520,23 +21052,21 @@
           }, props.class],
           "style": props.style
         }, tableProps), {
-          top: slots.top,
-          default: slots.default ?? (() => vue.createVNode(vue.Fragment, null, [slots.colgroup?.({
-            columns
-          }), vue.createVNode("thead", {
+          top: () => slots.top?.(slotProps.value),
+          default: () => slots.default ? slots.default(slotProps.value) : vue.createVNode(vue.Fragment, null, [slots.colgroup?.(slotProps.value), vue.createVNode("thead", {
             "class": "v-data-table__thead",
             "role": "rowgroup"
           }, [vue.createVNode(VDataTableHeaders, vue.mergeProps(dataTableHeadersProps, {
             "sticky": props.fixedHeader
-          }), slots)]), slots.thead?.(), vue.createVNode("tbody", {
+          }), slots)]), slots.thead?.(slotProps.value), vue.createVNode("tbody", {
             "class": "v-data-table__tbody",
             "role": "rowgroup"
-          }, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, vue.mergeProps(dataTableRowsProps, {
+          }, [slots.body ? slots.body(slotProps.value) : vue.createVNode(VDataTableRows, vue.mergeProps(dataTableRowsProps, {
             "items": flatItems.value
-          }), slots)]), slots.tbody?.(), slots.tfoot?.()])),
-          bottom: slots.bottom ?? (() => vue.createVNode(VDataTableFooter, dataTableFooterProps, {
+          }), slots)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
+          bottom: () => slots.bottom ? slots.bottom(slotProps.value) : vue.createVNode(VDataTableFooter, dataTableFooterProps, {
             prepend: slots['footer.prepend']
-          }))
+          })
         });
       });
     }
@@ -20900,6 +21430,7 @@
     VBannerActions: VBannerActions,
     VBannerText: VBannerText,
     VBottomNavigation: VBottomNavigation,
+    VBottomSheet: VBottomSheet,
     VBreadcrumbs: VBreadcrumbs,
     VBreadcrumbsDivider: VBreadcrumbsDivider,
     VBreadcrumbsItem: VBreadcrumbsItem,
@@ -20926,6 +21457,7 @@
     VComponentIcon: VComponentIcon,
     VContainer: VContainer,
     VCounter: VCounter,
+    VDataIterator: VDataIterator,
     VDataTable: VDataTable,
     VDataTableFooter: VDataTableFooter,
     VDataTableRow: VDataTableRow,
@@ -21654,7 +22186,7 @@
       date
     };
   }
-  const version$1 = "3.2.4";
+  const version$1 = "3.3.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21666,7 +22198,7 @@
     }
   }
 
-  const version = "3.2.4";
+  const version = "3.3.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};