@vuetify/nightly 3.7.15-dev.2025-03-07 → 3.7.15-dev.2025-03-08

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.15-dev.2025-03-07
+* Vuetify v3.7.15-dev.2025-03-08
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -16728,6 +16728,9 @@
     }
   });
 
+  // Utilities
+  const VPickerTitle = createSimpleFunctional('v-picker-title');
+
   const makeVSheetProps = propsFactory({
     color: String,
     ...makeBorderProps(),
@@ -16782,665 +16785,66 @@
 
   // Types
 
-  const makeVColorPickerProps = propsFactory({
-    canvasHeight: {
-      type: [String, Number],
-      default: 150
-    },
-    disabled: Boolean,
-    dotSize: {
-      type: [Number, String],
-      default: 10
-    },
-    hideCanvas: Boolean,
-    hideSliders: Boolean,
-    hideInputs: Boolean,
-    mode: {
-      type: String,
-      default: 'rgba',
-      validator: v => Object.keys(modes).includes(v)
-    },
-    modes: {
-      type: Array,
-      default: () => Object.keys(modes),
-      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
-    },
-    showSwatches: Boolean,
-    swatches: Array,
-    swatchesMaxHeight: {
-      type: [Number, String],
-      default: 150
-    },
-    modelValue: {
-      type: [Object, String]
-    },
-    ...omit(makeVSheetProps({
-      width: 300
-    }), ['height', 'location', 'minHeight', 'maxHeight', 'minWidth', 'maxWidth'])
-  }, 'VColorPicker');
-  const VColorPicker = defineComponent({
-    name: 'VColorPicker',
-    props: makeVColorPickerProps(),
-    emits: {
-      'update:modelValue': color => true,
-      'update:mode': mode => true
-    },
-    setup(props) {
-      const mode = useProxiedModel(props, 'mode');
-      const hue = vue.ref(null);
-      const model = useProxiedModel(props, 'modelValue', undefined, v => {
-        if (v == null || v === '') return null;
-        let c;
-        try {
-          c = RGBtoHSV(parseColor(v));
-        } catch (err) {
-          consoleWarn(err);
-          return null;
-        }
-        return c;
-      }, v => {
-        if (!v) return null;
-        return extractColor(v, props.modelValue);
-      });
-      const currentColor = vue.computed(() => {
-        return model.value ? {
-          ...model.value,
-          h: hue.value ?? model.value.h
-        } : null;
-      });
+  const makeVPickerProps = propsFactory({
+    bgColor: String,
+    landscape: Boolean,
+    title: String,
+    hideHeader: Boolean,
+    ...makeVSheetProps()
+  }, 'VPicker');
+  const VPicker = genericComponent()({
+    name: 'VPicker',
+    props: makeVPickerProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
       const {
-        rtlClasses
-      } = useRtl();
-      let externalChange = true;
-      vue.watch(model, v => {
-        if (!externalChange) {
-          // prevent hue shift from rgb conversion inaccuracy
-          externalChange = true;
-          return;
-        }
-        if (!v) return;
-        hue.value = v.h;
-      }, {
-        immediate: true
-      });
-      const updateColor = hsva => {
-        externalChange = false;
-        hue.value = hsva.h;
-        model.value = hsva;
-      };
-      vue.onBeforeMount(() => {
-        if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
-      });
-      provideDefaults({
-        VSlider: {
-          color: undefined,
-          trackColor: undefined,
-          trackFillColor: undefined
-        }
-      });
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(vue.toRef(props, 'color'));
       useRender(() => {
         const sheetProps = VSheet.filterProps(props);
-        return vue.createVNode(VSheet, vue.mergeProps({
-          "rounded": props.rounded,
-          "elevation": props.elevation,
-          "theme": props.theme,
-          "class": ['v-color-picker', rtlClasses.value, props.class],
-          "style": [{
-            '--v-color-picker-color-hsv': HSVtoCSS({
-              ...(currentColor.value ?? nullColor),
-              a: 1
-            })
-          }, props.style]
-        }, sheetProps, {
-          "maxWidth": props.width
+        const hasTitle = !!(props.title || slots.title);
+        return vue.createVNode(VSheet, vue.mergeProps(sheetProps, {
+          "color": props.bgColor,
+          "class": ['v-picker', {
+            'v-picker--landscape': props.landscape,
+            'v-picker--with-actions': !!slots.actions
+          }, props.class],
+          "style": props.style
         }), {
-          default: () => [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
-            "key": "canvas",
-            "color": currentColor.value,
-            "onUpdate:color": updateColor,
-            "disabled": props.disabled,
-            "dotSize": props.dotSize,
-            "width": props.width,
-            "height": props.canvasHeight
-          }, null), (!props.hideSliders || !props.hideInputs) && vue.createVNode("div", {
-            "key": "controls",
-            "class": "v-color-picker__controls"
-          }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
-            "key": "preview",
-            "color": currentColor.value,
-            "onUpdate:color": updateColor,
-            "hideAlpha": !mode.value.endsWith('a'),
-            "disabled": props.disabled
-          }, null), !props.hideInputs && vue.createVNode(VColorPickerEdit, {
-            "key": "edit",
-            "modes": props.modes,
-            "mode": mode.value,
-            "onUpdate:mode": m => mode.value = m,
-            "color": currentColor.value,
-            "onUpdate:color": updateColor,
-            "disabled": props.disabled
-          }, null)]), props.showSwatches && vue.createVNode(VColorPickerSwatches, {
-            "key": "swatches",
-            "color": currentColor.value,
-            "onUpdate:color": updateColor,
-            "maxHeight": props.swatchesMaxHeight,
-            "swatches": props.swatches,
-            "disabled": props.disabled
-          }, null)]
+          default: () => [!props.hideHeader && vue.createVNode("div", {
+            "key": "header",
+            "class": [backgroundColorClasses.value],
+            "style": [backgroundColorStyles.value]
+          }, [hasTitle && vue.createVNode(VPickerTitle, {
+            "key": "picker-title"
+          }, {
+            default: () => [slots.title?.() ?? props.title]
+          }), slots.header && vue.createVNode("div", {
+            "class": "v-picker__header"
+          }, [slots.header()])]), vue.createVNode("div", {
+            "class": "v-picker__body"
+          }, [slots.default?.()]), slots.actions && vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VBtn: {
+                slim: true,
+                variant: 'text'
+              }
+            }
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": "v-picker__actions"
+            }, [slots.actions()])]
+          })]
         });
       });
       return {};
     }
   });
-
-  // Types
-
-  const makeVComboboxProps = propsFactory({
-    autoSelectFirst: {
-      type: [Boolean, String]
-    },
-    clearOnSelect: {
-      type: Boolean,
-      default: true
-    },
-    delimiters: Array,
-    ...makeFilterProps({
-      filterKeys: ['title']
-    }),
-    ...makeSelectProps({
-      hideNoData: true,
-      returnObject: true
-    }),
-    ...omit(makeVTextFieldProps({
-      modelValue: null,
-      role: 'combobox'
-    }), ['validationValue', 'dirty', 'appendInnerIcon']),
-    ...makeTransitionProps({
-      transition: false
-    })
-  }, 'VCombobox');
-  const VCombobox = genericComponent()({
-    name: 'VCombobox',
-    props: makeVComboboxProps(),
-    emits: {
-      'update:focused': focused => true,
-      'update:modelValue': value => true,
-      'update:search': value => true,
-      'update:menu': value => true
-    },
-    setup(props, _ref) {
-      let {
-        emit,
-        slots
-      } = _ref;
-      const {
-        t
-      } = useLocale();
-      const vTextFieldRef = vue.ref();
-      const isFocused = vue.shallowRef(false);
-      const isPristine = vue.shallowRef(true);
-      const listHasFocus = vue.shallowRef(false);
-      const vMenuRef = vue.ref();
-      const vVirtualScrollRef = vue.ref();
-      const _menu = useProxiedModel(props, 'menu');
-      const menu = vue.computed({
-        get: () => _menu.value,
-        set: v => {
-          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
-          _menu.value = v;
-        }
-      });
-      const selectionIndex = vue.shallowRef(-1);
-      let cleared = false;
-      const color = vue.computed(() => vTextFieldRef.value?.color);
-      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
-      const {
-        items,
-        transformIn,
-        transformOut
-      } = useItems(props);
-      const {
-        textColorClasses,
-        textColorStyles
-      } = useTextColor(color);
-      const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
-        const transformed = transformOut(v);
-        return props.multiple ? transformed : transformed[0] ?? null;
-      });
-      const form = useForm(props);
-      const hasChips = vue.computed(() => !!(props.chips || slots.chip));
-      const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
-      const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
-      const search = vue.computed({
-        get: () => {
-          return _search.value;
-        },
-        set: val => {
-          _search.value = val ?? '';
-          if (!props.multiple && !hasSelectionSlot.value) {
-            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$3(props, v));
-              });
-              _search.value = '';
-            }
-          }
-          if (!val) selectionIndex.value = -1;
-          isPristine.value = !val;
-        }
-      });
-      const counterValue = vue.computed(() => {
-        return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : props.multiple ? model.value.length : search.value.length;
-      });
-      vue.watch(_search, value => {
-        if (cleared) {
-          // wait for clear to finish, VTextField sets _search to null
-          // then search computed triggers and updates _search to ''
-          vue.nextTick(() => cleared = false);
-        } else if (isFocused.value && !menu.value) {
-          menu.value = true;
-        }
-        emit('update:search', value);
-      });
-      vue.watch(model, value => {
-        if (!props.multiple && !hasSelectionSlot.value) {
-          _search.value = value[0]?.title ?? '';
-        }
-      });
-      const {
-        filteredItems,
-        getMatches
-      } = useFilter(props, items, () => isPristine.value ? '' : search.value);
-      const displayItems = vue.computed(() => {
-        if (props.hideSelected) {
-          return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
-        }
-        return filteredItems.value;
-      });
-      const selectedValues = vue.computed(() => model.value.map(selection => selection.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 menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
-      const listRef = vue.ref();
-      const listEvents = useScrolling(listRef, vTextFieldRef);
-      function onClear(e) {
-        cleared = true;
-        if (props.openOnClear) {
-          menu.value = true;
-        }
-      }
-      function onMousedownControl() {
-        if (menuDisabled.value) return;
-        menu.value = true;
-      }
-      function onMousedownMenuIcon(e) {
-        if (menuDisabled.value) return;
-        if (isFocused.value) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-        menu.value = !menu.value;
-      }
-      function onListKeydown(e) {
-        if (e.key !== ' ' && checkPrintable(e)) {
-          vTextFieldRef.value?.focus();
-        }
-      }
-      // eslint-disable-next-line complexity
-      function onKeydown(e) {
-        if (isComposingIgnoreKey(e) || form.isReadonly.value) return;
-        const selectionStart = vTextFieldRef.value.selectionStart;
-        const length = model.value.length;
-        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
-          e.preventDefault();
-        }
-        if (['Enter', 'ArrowDown'].includes(e.key)) {
-          menu.value = true;
-        }
-        if (['Escape'].includes(e.key)) {
-          menu.value = false;
-        }
-        if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
-          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key) && !model.value.some(_ref2 => {
-            let {
-              value
-            } = _ref2;
-            return value === displayItems.value[0].value;
-          })) {
-            select(filteredItems.value[0]);
-          }
-          isPristine.value = true;
-        }
-        if (e.key === 'ArrowDown' && highlightFirst.value) {
-          listRef.value?.focus('next');
-        }
-        if (e.key === 'Enter' && search.value) {
-          select(transformItem$3(props, search.value));
-          if (hasSelectionSlot.value) _search.value = '';
-        }
-        if (['Backspace', 'Delete'].includes(e.key)) {
-          if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
-          if (~selectionIndex.value) {
-            e.preventDefault();
-            const originalSelectionIndex = selectionIndex.value;
-            select(model.value[selectionIndex.value], false);
-            selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
-          } else if (e.key === 'Backspace' && !search.value) {
-            selectionIndex.value = length - 1;
-          }
-          return;
-        }
-        if (!props.multiple) return;
-        if (e.key === 'ArrowLeft') {
-          if (selectionIndex.value < 0 && selectionStart > 0) return;
-          const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
-          if (model.value[prev]) {
-            selectionIndex.value = prev;
-          } else {
-            selectionIndex.value = -1;
-            vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length);
-          }
-        } else if (e.key === 'ArrowRight') {
-          if (selectionIndex.value < 0) return;
-          const next = selectionIndex.value + 1;
-          if (model.value[next]) {
-            selectionIndex.value = next;
-          } else {
-            selectionIndex.value = -1;
-            vTextFieldRef.value.setSelectionRange(0, 0);
-          }
-        } else if (~selectionIndex.value && checkPrintable(e)) {
-          selectionIndex.value = -1;
-        }
-      }
-      function onAfterEnter() {
-        if (props.eager) {
-          vVirtualScrollRef.value?.calculateVisibleItems();
-        }
-      }
-      function onAfterLeave() {
-        if (isFocused.value) {
-          isPristine.value = true;
-          vTextFieldRef.value?.focus();
-        }
-      }
-      /** @param set - null means toggle */
-      function select(item) {
-        let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        if (!item || item.props.disabled) return;
-        if (props.multiple) {
-          const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
-          const add = set == null ? !~index : set;
-          if (~index) {
-            const value = add ? [...model.value, item] : [...model.value];
-            value.splice(index, 1);
-            model.value = value;
-          } else if (add) {
-            model.value = [...model.value, item];
-          }
-          if (props.clearOnSelect) {
-            search.value = '';
-          }
-        } else {
-          const add = set !== false;
-          model.value = add ? [item] : [];
-          _search.value = add && !hasSelectionSlot.value ? item.title : '';
-
-          // watch for search watcher to trigger
-          vue.nextTick(() => {
-            menu.value = false;
-            isPristine.value = true;
-          });
-        }
-      }
-      function onFocusin(e) {
-        isFocused.value = true;
-        setTimeout(() => {
-          listHasFocus.value = true;
-        });
-      }
-      function onFocusout(e) {
-        listHasFocus.value = false;
-      }
-      function onUpdateModelValue(v) {
-        if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
-      }
-      vue.watch(isFocused, (val, oldVal) => {
-        if (val || val === oldVal) return;
-        selectionIndex.value = -1;
-        menu.value = false;
-        if (search.value) {
-          if (props.multiple) {
-            select(transformItem$3(props, search.value));
-            return;
-          }
-          if (!hasSelectionSlot.value) return;
-          if (model.value.some(_ref3 => {
-            let {
-              title
-            } = _ref3;
-            return title === search.value;
-          })) {
-            _search.value = '';
-          } else {
-            select(transformItem$3(props, search.value));
-          }
-        }
-      });
-      vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && model.value.length) {
-          const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
-          IN_BROWSER && window.requestAnimationFrame(() => {
-            index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
-          });
-        }
-      });
-      vue.watch(() => props.items, (newVal, oldVal) => {
-        if (menu.value) return;
-        if (isFocused.value && !oldVal.length && newVal.length) {
-          menu.value = true;
-        }
-      });
-      useRender(() => {
-        const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
-        const isDirty = model.value.length > 0;
-        const textFieldProps = VTextField.filterProps(props);
-        return vue.createVNode(VTextField, vue.mergeProps({
-          "ref": vTextFieldRef
-        }, textFieldProps, {
-          "modelValue": search.value,
-          "onUpdate:modelValue": [$event => search.value = $event, onUpdateModelValue],
-          "focused": isFocused.value,
-          "onUpdate:focused": $event => isFocused.value = $event,
-          "validationValue": model.externalValue,
-          "counterValue": counterValue.value,
-          "dirty": isDirty,
-          "class": ['v-combobox', {
-            'v-combobox--active-menu': menu.value,
-            'v-combobox--chips': !!props.chips,
-            'v-combobox--selection-slot': !!hasSelectionSlot.value,
-            'v-combobox--selecting-index': selectionIndex.value > -1,
-            [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
-          }, props.class],
-          "style": props.style,
-          "readonly": form.isReadonly.value,
-          "placeholder": isDirty ? undefined : props.placeholder,
-          "onClick:clear": onClear,
-          "onMousedown:control": onMousedownControl,
-          "onKeydown": onKeydown
-        }), {
-          ...slots,
-          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
-            "ref": vMenuRef,
-            "modelValue": menu.value,
-            "onUpdate:modelValue": $event => menu.value = $event,
-            "activator": "parent",
-            "contentClass": "v-combobox__content",
-            "disabled": menuDisabled.value,
-            "eager": props.eager,
-            "maxHeight": 310,
-            "openOnClick": false,
-            "closeOnContentClick": false,
-            "transition": props.transition,
-            "onAfterEnter": onAfterEnter,
-            "onAfterLeave": onAfterLeave
-          }, props.menuProps), {
-            default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
-              "ref": listRef,
-              "selected": selectedValues.value,
-              "selectStrategy": props.multiple ? 'independent' : 'single-independent',
-              "onMousedown": e => e.preventDefault(),
-              "onKeydown": onListKeydown,
-              "onFocusin": onFocusin,
-              "onFocusout": onFocusout,
-              "tabindex": "-1",
-              "aria-live": "polite",
-              "color": props.itemColor ?? props.color
-            }, listEvents, props.listProps), {
-              default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
-                "key": "no-data",
-                "title": t(props.noDataText)
-              }, null)), vue.createVNode(VVirtualScroll, {
-                "ref": vVirtualScrollRef,
-                "renderless": true,
-                "items": displayItems.value,
-                "itemKey": "value"
-              }, {
-                default: _ref4 => {
-                  let {
-                    item,
-                    index,
-                    itemRef
-                  } = _ref4;
-                  const itemProps = vue.mergeProps(item.props, {
-                    ref: itemRef,
-                    key: item.value,
-                    active: highlightFirst.value && index === 0 ? true : undefined,
-                    onClick: () => select(item, null)
-                  });
-                  return slots.item?.({
-                    item,
-                    index,
-                    props: itemProps
-                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
-                    "role": "option"
-                  }), {
-                    prepend: _ref5 => {
-                      let {
-                        isSelected
-                      } = _ref5;
-                      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.prependAvatar && vue.createVNode(VAvatar, {
-                        "image": item.props.prependAvatar
-                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
-                        "icon": item.props.prependIcon
-                      }, null)]);
-                    },
-                    title: () => {
-                      return isPristine.value ? item.title : highlightResult('v-combobox', item.title, getMatches(item)?.title);
-                    }
-                  });
-                }
-              }), slots['append-item']?.()]
-            })]
-          }), model.value.map((item, index) => {
-            function onChipClose(e) {
-              e.stopPropagation();
-              e.preventDefault();
-              select(item, false);
-            }
-            const slotProps = {
-              'onClick:close': onChipClose,
-              onKeydown(e) {
-                if (e.key !== 'Enter' && e.key !== ' ') return;
-                e.preventDefault();
-                e.stopPropagation();
-                onChipClose(e);
-              },
-              onMousedown(e) {
-                e.preventDefault();
-                e.stopPropagation();
-              },
-              modelValue: true,
-              'onUpdate:modelValue': undefined
-            };
-            const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
-            const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
-              item,
-              index,
-              props: slotProps
-            }) : slots.selection({
-              item,
-              index
-            })) : undefined;
-            if (hasSlot && !slotContent) return undefined;
-            return vue.createVNode("div", {
-              "key": item.value,
-              "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
-              "style": index === selectionIndex.value ? textColorStyles.value : {}
-            }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
-              "key": "chip",
-              "closable": props.closableChips,
-              "size": "small",
-              "text": item.title,
-              "disabled": item.props.disabled
-            }, slotProps), null) : vue.createVNode(VDefaultsProvider, {
-              "key": "chip-defaults",
-              "defaults": {
-                VChip: {
-                  closable: props.closableChips,
-                  size: 'small',
-                  text: item.title
-                }
-              }
-            }, {
-              default: () => [slotContent]
-            }) : slotContent ?? vue.createVNode("span", {
-              "class": "v-combobox__selection-text"
-            }, [item.title, props.multiple && index < model.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,
-              "aria-label": t(label.value),
-              "title": t(label.value),
-              "tabindex": "-1"
-            }, null) : undefined]);
-          }
-        });
-      });
-      return forwardRefs({
-        isFocused,
-        isPristine,
-        menu,
-        search,
-        selectionIndex,
-        filteredItems,
-        select
-      }, vTextFieldRef);
-    }
-  });
-
-  // Utilities
+
+  // Utilities
 
   // Types
 
@@ -18162,101 +17566,760 @@
     endOfYear(date) {
       return endOfYear(date);
     }
-  }
+  }
+
+  // Composables
+  const DateOptionsSymbol = Symbol.for('vuetify:date-options');
+  const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
+  function createDate(options, locale) {
+    const _options = mergeDeep({
+      adapter: VuetifyDateAdapter,
+      locale: {
+        af: 'af-ZA',
+        // ar: '', # not the same value for all variants
+        bg: 'bg-BG',
+        ca: 'ca-ES',
+        ckb: '',
+        cs: 'cs-CZ',
+        de: 'de-DE',
+        el: 'el-GR',
+        en: 'en-US',
+        // es: '', # not the same value for all variants
+        et: 'et-EE',
+        fa: 'fa-IR',
+        fi: 'fi-FI',
+        // fr: '', #not the same value for all variants
+        hr: 'hr-HR',
+        hu: 'hu-HU',
+        he: 'he-IL',
+        id: 'id-ID',
+        it: 'it-IT',
+        ja: 'ja-JP',
+        ko: 'ko-KR',
+        lv: 'lv-LV',
+        lt: 'lt-LT',
+        nl: 'nl-NL',
+        no: 'no-NO',
+        pl: 'pl-PL',
+        pt: 'pt-PT',
+        ro: 'ro-RO',
+        ru: 'ru-RU',
+        sk: 'sk-SK',
+        sl: 'sl-SI',
+        srCyrl: 'sr-SP',
+        srLatn: 'sr-SP',
+        sv: 'sv-SE',
+        th: 'th-TH',
+        tr: 'tr-TR',
+        az: 'az-AZ',
+        uk: 'uk-UA',
+        vi: 'vi-VN',
+        zhHans: 'zh-CN',
+        zhHant: 'zh-TW'
+      }
+    }, options);
+    return {
+      options: _options,
+      instance: createInstance(_options, locale)
+    };
+  }
+  function createInstance(options, locale) {
+    const instance = vue.reactive(typeof options.adapter === 'function'
+    // eslint-disable-next-line new-cap
+    ? new options.adapter({
+      locale: options.locale[locale.current.value] ?? locale.current.value,
+      formats: options.formats
+    }) : options.adapter);
+    vue.watch(locale.current, value => {
+      instance.locale = options.locale[value] ?? value ?? instance.locale;
+    });
+    return instance;
+  }
+  function useDate() {
+    const options = vue.inject(DateOptionsSymbol);
+    if (!options) throw new Error('[Vuetify] Could not find injected date options');
+    const locale = useLocale();
+    return createInstance(options, locale);
+  }
+
+  // https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
+  function getWeek(adapter, value) {
+    const date = adapter.toJsDate(value);
+    let year = date.getFullYear();
+    let d1w1 = new Date(year, 0, 1);
+    if (date < d1w1) {
+      year = year - 1;
+      d1w1 = new Date(year, 0, 1);
+    } else {
+      const tv = new Date(year + 1, 0, 1);
+      if (date >= tv) {
+        year = year + 1;
+        d1w1 = tv;
+      }
+    }
+    const diffTime = Math.abs(date.getTime() - d1w1.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return Math.floor(diffDays / 7) + 1;
+  }
+
+  // Types
+
+  const makeVColorPickerProps = propsFactory({
+    canvasHeight: {
+      type: [String, Number],
+      default: 150
+    },
+    disabled: Boolean,
+    dotSize: {
+      type: [Number, String],
+      default: 10
+    },
+    hideCanvas: Boolean,
+    hideSliders: Boolean,
+    hideInputs: Boolean,
+    mode: {
+      type: String,
+      default: 'rgba',
+      validator: v => Object.keys(modes).includes(v)
+    },
+    modes: {
+      type: Array,
+      default: () => Object.keys(modes),
+      validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
+    },
+    showSwatches: Boolean,
+    swatches: Array,
+    swatchesMaxHeight: {
+      type: [Number, String],
+      default: 150
+    },
+    modelValue: {
+      type: [Object, String]
+    },
+    ...makeVPickerProps({
+      hideHeader: true
+    })
+  }, 'VColorPicker');
+  const VColorPicker = defineComponent({
+    name: 'VColorPicker',
+    props: makeVColorPickerProps(),
+    emits: {
+      'update:modelValue': color => true,
+      'update:mode': mode => true
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const mode = useProxiedModel(props, 'mode');
+      const hue = vue.ref(null);
+      const model = useProxiedModel(props, 'modelValue', undefined, v => {
+        if (v == null || v === '') return null;
+        let c;
+        try {
+          c = RGBtoHSV(parseColor(v));
+        } catch (err) {
+          consoleWarn(err);
+          return null;
+        }
+        return c;
+      }, v => {
+        if (!v) return null;
+        return extractColor(v, props.modelValue);
+      });
+      const currentColor = vue.computed(() => {
+        return model.value ? {
+          ...model.value,
+          h: hue.value ?? model.value.h
+        } : null;
+      });
+      const {
+        rtlClasses
+      } = useRtl();
+      let externalChange = true;
+      vue.watch(model, v => {
+        if (!externalChange) {
+          // prevent hue shift from rgb conversion inaccuracy
+          externalChange = true;
+          return;
+        }
+        if (!v) return;
+        hue.value = v.h;
+      }, {
+        immediate: true
+      });
+      const updateColor = hsva => {
+        externalChange = false;
+        hue.value = hsva.h;
+        model.value = hsva;
+      };
+      vue.onBeforeMount(() => {
+        if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
+      });
+      provideDefaults({
+        VSlider: {
+          color: undefined,
+          trackColor: undefined,
+          trackFillColor: undefined
+        }
+      });
+      useRender(() => {
+        const pickerProps = VPicker.filterProps(props);
+        return vue.createVNode(VPicker, vue.mergeProps(pickerProps, {
+          "class": ['v-color-picker', rtlClasses.value, props.class],
+          "style": [{
+            '--v-color-picker-color-hsv': HSVtoCSS({
+              ...(currentColor.value ?? nullColor),
+              a: 1
+            })
+          }, props.style]
+        }), {
+          ...slots,
+          default: () => vue.createVNode(vue.Fragment, null, [!props.hideCanvas && vue.createVNode(VColorPickerCanvas, {
+            "key": "canvas",
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "disabled": props.disabled,
+            "dotSize": props.dotSize,
+            "width": props.width,
+            "height": props.canvasHeight
+          }, null), (!props.hideSliders || !props.hideInputs) && vue.createVNode("div", {
+            "key": "controls",
+            "class": "v-color-picker__controls"
+          }, [!props.hideSliders && vue.createVNode(VColorPickerPreview, {
+            "key": "preview",
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "hideAlpha": !mode.value.endsWith('a'),
+            "disabled": props.disabled
+          }, null), !props.hideInputs && vue.createVNode(VColorPickerEdit, {
+            "key": "edit",
+            "modes": props.modes,
+            "mode": mode.value,
+            "onUpdate:mode": m => mode.value = m,
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "disabled": props.disabled
+          }, null)]), props.showSwatches && vue.createVNode(VColorPickerSwatches, {
+            "key": "swatches",
+            "color": currentColor.value,
+            "onUpdate:color": updateColor,
+            "maxHeight": props.swatchesMaxHeight,
+            "swatches": props.swatches,
+            "disabled": props.disabled
+          }, null)])
+        });
+      });
+      return {};
+    }
+  });
 
-  // Composables
-  const DateOptionsSymbol = Symbol.for('vuetify:date-options');
-  const DateAdapterSymbol = Symbol.for('vuetify:date-adapter');
-  function createDate(options, locale) {
-    const _options = mergeDeep({
-      adapter: VuetifyDateAdapter,
-      locale: {
-        af: 'af-ZA',
-        // ar: '', # not the same value for all variants
-        bg: 'bg-BG',
-        ca: 'ca-ES',
-        ckb: '',
-        cs: 'cs-CZ',
-        de: 'de-DE',
-        el: 'el-GR',
-        en: 'en-US',
-        // es: '', # not the same value for all variants
-        et: 'et-EE',
-        fa: 'fa-IR',
-        fi: 'fi-FI',
-        // fr: '', #not the same value for all variants
-        hr: 'hr-HR',
-        hu: 'hu-HU',
-        he: 'he-IL',
-        id: 'id-ID',
-        it: 'it-IT',
-        ja: 'ja-JP',
-        ko: 'ko-KR',
-        lv: 'lv-LV',
-        lt: 'lt-LT',
-        nl: 'nl-NL',
-        no: 'no-NO',
-        pl: 'pl-PL',
-        pt: 'pt-PT',
-        ro: 'ro-RO',
-        ru: 'ru-RU',
-        sk: 'sk-SK',
-        sl: 'sl-SI',
-        srCyrl: 'sr-SP',
-        srLatn: 'sr-SP',
-        sv: 'sv-SE',
-        th: 'th-TH',
-        tr: 'tr-TR',
-        az: 'az-AZ',
-        uk: 'uk-UA',
-        vi: 'vi-VN',
-        zhHans: 'zh-CN',
-        zhHant: 'zh-TW'
+  // Types
+
+  const makeVComboboxProps = propsFactory({
+    autoSelectFirst: {
+      type: [Boolean, String]
+    },
+    clearOnSelect: {
+      type: Boolean,
+      default: true
+    },
+    delimiters: Array,
+    ...makeFilterProps({
+      filterKeys: ['title']
+    }),
+    ...makeSelectProps({
+      hideNoData: true,
+      returnObject: true
+    }),
+    ...omit(makeVTextFieldProps({
+      modelValue: null,
+      role: 'combobox'
+    }), ['validationValue', 'dirty', 'appendInnerIcon']),
+    ...makeTransitionProps({
+      transition: false
+    })
+  }, 'VCombobox');
+  const VCombobox = genericComponent()({
+    name: 'VCombobox',
+    props: makeVComboboxProps(),
+    emits: {
+      'update:focused': focused => true,
+      'update:modelValue': value => true,
+      'update:search': value => true,
+      'update:menu': value => true
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        t
+      } = useLocale();
+      const vTextFieldRef = vue.ref();
+      const isFocused = vue.shallowRef(false);
+      const isPristine = vue.shallowRef(true);
+      const listHasFocus = vue.shallowRef(false);
+      const vMenuRef = vue.ref();
+      const vVirtualScrollRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
+          _menu.value = v;
+        }
+      });
+      const selectionIndex = vue.shallowRef(-1);
+      let cleared = false;
+      const color = vue.computed(() => vTextFieldRef.value?.color);
+      const label = vue.computed(() => menu.value ? props.closeText : props.openText);
+      const {
+        items,
+        transformIn,
+        transformOut
+      } = useItems(props);
+      const {
+        textColorClasses,
+        textColorStyles
+      } = useTextColor(color);
+      const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
+        const transformed = transformOut(v);
+        return props.multiple ? transformed : transformed[0] ?? null;
+      });
+      const form = useForm(props);
+      const hasChips = vue.computed(() => !!(props.chips || slots.chip));
+      const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
+      const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
+      const search = vue.computed({
+        get: () => {
+          return _search.value;
+        },
+        set: val => {
+          _search.value = val ?? '';
+          if (!props.multiple && !hasSelectionSlot.value) {
+            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$3(props, v));
+              });
+              _search.value = '';
+            }
+          }
+          if (!val) selectionIndex.value = -1;
+          isPristine.value = !val;
+        }
+      });
+      const counterValue = vue.computed(() => {
+        return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : props.multiple ? model.value.length : search.value.length;
+      });
+      vue.watch(_search, value => {
+        if (cleared) {
+          // wait for clear to finish, VTextField sets _search to null
+          // then search computed triggers and updates _search to ''
+          vue.nextTick(() => cleared = false);
+        } else if (isFocused.value && !menu.value) {
+          menu.value = true;
+        }
+        emit('update:search', value);
+      });
+      vue.watch(model, value => {
+        if (!props.multiple && !hasSelectionSlot.value) {
+          _search.value = value[0]?.title ?? '';
+        }
+      });
+      const {
+        filteredItems,
+        getMatches
+      } = useFilter(props, items, () => isPristine.value ? '' : search.value);
+      const displayItems = vue.computed(() => {
+        if (props.hideSelected) {
+          return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
+        }
+        return filteredItems.value;
+      });
+      const selectedValues = vue.computed(() => model.value.map(selection => selection.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 menuDisabled = vue.computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
+      const listRef = vue.ref();
+      const listEvents = useScrolling(listRef, vTextFieldRef);
+      function onClear(e) {
+        cleared = true;
+        if (props.openOnClear) {
+          menu.value = true;
+        }
       }
-    }, options);
-    return {
-      options: _options,
-      instance: createInstance(_options, locale)
-    };
-  }
-  function createInstance(options, locale) {
-    const instance = vue.reactive(typeof options.adapter === 'function'
-    // eslint-disable-next-line new-cap
-    ? new options.adapter({
-      locale: options.locale[locale.current.value] ?? locale.current.value,
-      formats: options.formats
-    }) : options.adapter);
-    vue.watch(locale.current, value => {
-      instance.locale = options.locale[value] ?? value ?? instance.locale;
-    });
-    return instance;
-  }
-  function useDate() {
-    const options = vue.inject(DateOptionsSymbol);
-    if (!options) throw new Error('[Vuetify] Could not find injected date options');
-    const locale = useLocale();
-    return createInstance(options, locale);
-  }
+      function onMousedownControl() {
+        if (menuDisabled.value) return;
+        menu.value = true;
+      }
+      function onMousedownMenuIcon(e) {
+        if (menuDisabled.value) return;
+        if (isFocused.value) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        menu.value = !menu.value;
+      }
+      function onListKeydown(e) {
+        if (e.key !== ' ' && checkPrintable(e)) {
+          vTextFieldRef.value?.focus();
+        }
+      }
+      // eslint-disable-next-line complexity
+      function onKeydown(e) {
+        if (isComposingIgnoreKey(e) || form.isReadonly.value) return;
+        const selectionStart = vTextFieldRef.value.selectionStart;
+        const length = model.value.length;
+        if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+          e.preventDefault();
+        }
+        if (['Enter', 'ArrowDown'].includes(e.key)) {
+          menu.value = true;
+        }
+        if (['Escape'].includes(e.key)) {
+          menu.value = false;
+        }
+        if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+          if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key) && !model.value.some(_ref2 => {
+            let {
+              value
+            } = _ref2;
+            return value === displayItems.value[0].value;
+          })) {
+            select(filteredItems.value[0]);
+          }
+          isPristine.value = true;
+        }
+        if (e.key === 'ArrowDown' && highlightFirst.value) {
+          listRef.value?.focus('next');
+        }
+        if (e.key === 'Enter' && search.value) {
+          select(transformItem$3(props, search.value));
+          if (hasSelectionSlot.value) _search.value = '';
+        }
+        if (['Backspace', 'Delete'].includes(e.key)) {
+          if (!props.multiple && hasSelectionSlot.value && model.value.length > 0 && !search.value) return select(model.value[0], false);
+          if (~selectionIndex.value) {
+            e.preventDefault();
+            const originalSelectionIndex = selectionIndex.value;
+            select(model.value[selectionIndex.value], false);
+            selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
+          } else if (e.key === 'Backspace' && !search.value) {
+            selectionIndex.value = length - 1;
+          }
+          return;
+        }
+        if (!props.multiple) return;
+        if (e.key === 'ArrowLeft') {
+          if (selectionIndex.value < 0 && selectionStart > 0) return;
+          const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
+          if (model.value[prev]) {
+            selectionIndex.value = prev;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length);
+          }
+        } else if (e.key === 'ArrowRight') {
+          if (selectionIndex.value < 0) return;
+          const next = selectionIndex.value + 1;
+          if (model.value[next]) {
+            selectionIndex.value = next;
+          } else {
+            selectionIndex.value = -1;
+            vTextFieldRef.value.setSelectionRange(0, 0);
+          }
+        } else if (~selectionIndex.value && checkPrintable(e)) {
+          selectionIndex.value = -1;
+        }
+      }
+      function onAfterEnter() {
+        if (props.eager) {
+          vVirtualScrollRef.value?.calculateVisibleItems();
+        }
+      }
+      function onAfterLeave() {
+        if (isFocused.value) {
+          isPristine.value = true;
+          vTextFieldRef.value?.focus();
+        }
+      }
+      /** @param set - null means toggle */
+      function select(item) {
+        let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        if (!item || item.props.disabled) return;
+        if (props.multiple) {
+          const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
+          const add = set == null ? !~index : set;
+          if (~index) {
+            const value = add ? [...model.value, item] : [...model.value];
+            value.splice(index, 1);
+            model.value = value;
+          } else if (add) {
+            model.value = [...model.value, item];
+          }
+          if (props.clearOnSelect) {
+            search.value = '';
+          }
+        } else {
+          const add = set !== false;
+          model.value = add ? [item] : [];
+          _search.value = add && !hasSelectionSlot.value ? item.title : '';
 
-  // https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
-  function getWeek(adapter, value) {
-    const date = adapter.toJsDate(value);
-    let year = date.getFullYear();
-    let d1w1 = new Date(year, 0, 1);
-    if (date < d1w1) {
-      year = year - 1;
-      d1w1 = new Date(year, 0, 1);
-    } else {
-      const tv = new Date(year + 1, 0, 1);
-      if (date >= tv) {
-        year = year + 1;
-        d1w1 = tv;
+          // watch for search watcher to trigger
+          vue.nextTick(() => {
+            menu.value = false;
+            isPristine.value = true;
+          });
+        }
+      }
+      function onFocusin(e) {
+        isFocused.value = true;
+        setTimeout(() => {
+          listHasFocus.value = true;
+        });
+      }
+      function onFocusout(e) {
+        listHasFocus.value = false;
+      }
+      function onUpdateModelValue(v) {
+        if (v == null || v === '' && !props.multiple && !hasSelectionSlot.value) model.value = [];
       }
+      vue.watch(isFocused, (val, oldVal) => {
+        if (val || val === oldVal) return;
+        selectionIndex.value = -1;
+        menu.value = false;
+        if (search.value) {
+          if (props.multiple) {
+            select(transformItem$3(props, search.value));
+            return;
+          }
+          if (!hasSelectionSlot.value) return;
+          if (model.value.some(_ref3 => {
+            let {
+              title
+            } = _ref3;
+            return title === search.value;
+          })) {
+            _search.value = '';
+          } else {
+            select(transformItem$3(props, search.value));
+          }
+        }
+      });
+      vue.watch(menu, () => {
+        if (!props.hideSelected && menu.value && model.value.length) {
+          const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
+          IN_BROWSER && window.requestAnimationFrame(() => {
+            index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
+          });
+        }
+      });
+      vue.watch(() => props.items, (newVal, oldVal) => {
+        if (menu.value) return;
+        if (isFocused.value && !oldVal.length && newVal.length) {
+          menu.value = true;
+        }
+      });
+      useRender(() => {
+        const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
+        const isDirty = model.value.length > 0;
+        const textFieldProps = VTextField.filterProps(props);
+        return vue.createVNode(VTextField, vue.mergeProps({
+          "ref": vTextFieldRef
+        }, textFieldProps, {
+          "modelValue": search.value,
+          "onUpdate:modelValue": [$event => search.value = $event, onUpdateModelValue],
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
+          "validationValue": model.externalValue,
+          "counterValue": counterValue.value,
+          "dirty": isDirty,
+          "class": ['v-combobox', {
+            'v-combobox--active-menu': menu.value,
+            'v-combobox--chips': !!props.chips,
+            'v-combobox--selection-slot': !!hasSelectionSlot.value,
+            'v-combobox--selecting-index': selectionIndex.value > -1,
+            [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
+          }, props.class],
+          "style": props.style,
+          "readonly": form.isReadonly.value,
+          "placeholder": isDirty ? undefined : props.placeholder,
+          "onClick:clear": onClear,
+          "onMousedown:control": onMousedownControl,
+          "onKeydown": onKeydown
+        }), {
+          ...slots,
+          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "contentClass": "v-combobox__content",
+            "disabled": menuDisabled.value,
+            "eager": props.eager,
+            "maxHeight": 310,
+            "openOnClick": false,
+            "closeOnContentClick": false,
+            "transition": props.transition,
+            "onAfterEnter": onAfterEnter,
+            "onAfterLeave": onAfterLeave
+          }, props.menuProps), {
+            default: () => [hasList && vue.createVNode(VList, vue.mergeProps({
+              "ref": listRef,
+              "selected": selectedValues.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent',
+              "onMousedown": e => e.preventDefault(),
+              "onKeydown": onListKeydown,
+              "onFocusin": onFocusin,
+              "onFocusout": onFocusout,
+              "tabindex": "-1",
+              "aria-live": "polite",
+              "color": props.itemColor ?? props.color
+            }, listEvents, props.listProps), {
+              default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? vue.createVNode(VListItem, {
+                "key": "no-data",
+                "title": t(props.noDataText)
+              }, null)), vue.createVNode(VVirtualScroll, {
+                "ref": vVirtualScrollRef,
+                "renderless": true,
+                "items": displayItems.value,
+                "itemKey": "value"
+              }, {
+                default: _ref4 => {
+                  let {
+                    item,
+                    index,
+                    itemRef
+                  } = _ref4;
+                  const itemProps = vue.mergeProps(item.props, {
+                    ref: itemRef,
+                    key: item.value,
+                    active: highlightFirst.value && index === 0 ? true : undefined,
+                    onClick: () => select(item, null)
+                  });
+                  return slots.item?.({
+                    item,
+                    index,
+                    props: itemProps
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
+                    prepend: _ref5 => {
+                      let {
+                        isSelected
+                      } = _ref5;
+                      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.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": item.props.prependAvatar
+                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
+                        "icon": item.props.prependIcon
+                      }, null)]);
+                    },
+                    title: () => {
+                      return isPristine.value ? item.title : highlightResult('v-combobox', item.title, getMatches(item)?.title);
+                    }
+                  });
+                }
+              }), slots['append-item']?.()]
+            })]
+          }), model.value.map((item, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(item, false);
+            }
+            const slotProps = {
+              'onClick:close': onChipClose,
+              onKeydown(e) {
+                if (e.key !== 'Enter' && e.key !== ' ') return;
+                e.preventDefault();
+                e.stopPropagation();
+                onChipClose(e);
+              },
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              modelValue: true,
+              'onUpdate:modelValue': undefined
+            };
+            const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
+            const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
+              item,
+              index,
+              props: slotProps
+            }) : slots.selection({
+              item,
+              index
+            })) : undefined;
+            if (hasSlot && !slotContent) return undefined;
+            return vue.createVNode("div", {
+              "key": item.value,
+              "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
+              "style": index === selectionIndex.value ? textColorStyles.value : {}
+            }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
+              "key": "chip",
+              "closable": props.closableChips,
+              "size": "small",
+              "text": item.title,
+              "disabled": item.props.disabled
+            }, slotProps), null) : vue.createVNode(VDefaultsProvider, {
+              "key": "chip-defaults",
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: item.title
+                }
+              }
+            }, {
+              default: () => [slotContent]
+            }) : slotContent ?? vue.createVNode("span", {
+              "class": "v-combobox__selection-text"
+            }, [item.title, props.multiple && index < model.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,
+              "aria-label": t(label.value),
+              "title": t(label.value),
+              "tabindex": "-1"
+            }, null) : undefined]);
+          }
+        });
+      });
+      return forwardRefs({
+        isFocused,
+        isPristine,
+        menu,
+        search,
+        selectionIndex,
+        filteredItems,
+        select
+      }, vTextFieldRef);
     }
-    const diffTime = Math.abs(date.getTime() - d1w1.getTime());
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-    return Math.floor(diffDays / 7) + 1;
-  }
+  });
 
   // Types
 
@@ -22205,70 +22268,6 @@
     }
   });
 
-  // Utilities
-  const VPickerTitle = createSimpleFunctional('v-picker-title');
-
-  // Types
-
-  const makeVPickerProps = propsFactory({
-    bgColor: String,
-    landscape: Boolean,
-    title: String,
-    hideHeader: Boolean,
-    ...makeVSheetProps()
-  }, 'VPicker');
-  const VPicker = genericComponent()({
-    name: 'VPicker',
-    props: makeVPickerProps(),
-    setup(props, _ref) {
-      let {
-        slots
-      } = _ref;
-      const {
-        backgroundColorClasses,
-        backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'color'));
-      useRender(() => {
-        const sheetProps = VSheet.filterProps(props);
-        const hasTitle = !!(props.title || slots.title);
-        return vue.createVNode(VSheet, vue.mergeProps(sheetProps, {
-          "color": props.bgColor,
-          "class": ['v-picker', {
-            'v-picker--landscape': props.landscape,
-            'v-picker--with-actions': !!slots.actions
-          }, props.class],
-          "style": props.style
-        }), {
-          default: () => [!props.hideHeader && vue.createVNode("div", {
-            "key": "header",
-            "class": [backgroundColorClasses.value],
-            "style": [backgroundColorStyles.value]
-          }, [hasTitle && vue.createVNode(VPickerTitle, {
-            "key": "picker-title"
-          }, {
-            default: () => [slots.title?.() ?? props.title]
-          }), slots.header && vue.createVNode("div", {
-            "class": "v-picker__header"
-          }, [slots.header()])]), vue.createVNode("div", {
-            "class": "v-picker__body"
-          }, [slots.default?.()]), slots.actions && vue.createVNode(VDefaultsProvider, {
-            "defaults": {
-              VBtn: {
-                slim: true,
-                variant: 'text'
-              }
-            }
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": "v-picker__actions"
-            }, [slots.actions()])]
-          })]
-        });
-      });
-      return {};
-    }
-  });
-
   // Types
 
   // Types
@@ -22329,6 +22328,9 @@
       const {
         t
       } = useLocale();
+      const {
+        rtlClasses
+      } = useRtl();
       const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v), v => props.multiple ? v : v[0]);
       const viewMode = useProxiedModel(props, 'viewMode');
       // const inputMode = useProxiedModel(props, 'inputMode')
@@ -22466,7 +22468,7 @@
         return vue.createVNode(VPicker, vue.mergeProps(pickerProps, {
           "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, {
             'v-date-picker--show-week': props.showWeek
-          }, props.class],
+          }, rtlClasses.value, props.class],
           "style": props.style
         }), {
           title: () => slots.title?.() ?? vue.createVNode("div", {
@@ -31161,7 +31163,7 @@
       };
     });
   }
-  const version$1 = "3.7.15-dev.2025-03-07";
+  const version$1 = "3.7.15-dev.2025-03-08";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31414,7 +31416,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.7.15-dev.2025-03-07";
+  const version = "3.7.15-dev.2025-03-08";
 
   /* eslint-disable local-rules/sort-imports */