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

package/dist/vuetify-labs.esm.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.
 */
@@ -16724,6 +16724,9 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
+// Utilities
+const VPickerTitle = createSimpleFunctional('v-picker-title');
+
 const makeVSheetProps = propsFactory({
   color: String,
   ...makeBorderProps(),
@@ -16778,665 +16781,66 @@ const VSheet = genericComponent()({
 
 // 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 = 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 = 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;
-    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;
-    };
-    onBeforeMount(() => {
-      if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
-    });
-    provideDefaults({
-      VSlider: {
-        color: undefined,
-        trackColor: undefined,
-        trackFillColor: undefined
-      }
-    });
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     useRender(() => {
       const sheetProps = VSheet.filterProps(props);
-      return createVNode(VSheet, 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 createVNode(VSheet, 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 && 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) && createVNode("div", {
-          "key": "controls",
-          "class": "v-color-picker__controls"
-        }, [!props.hideSliders && createVNode(VColorPickerPreview, {
-          "key": "preview",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "hideAlpha": !mode.value.endsWith('a'),
-          "disabled": props.disabled
-        }, null), !props.hideInputs && 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 && createVNode(VColorPickerSwatches, {
-          "key": "swatches",
-          "color": currentColor.value,
-          "onUpdate:color": updateColor,
-          "maxHeight": props.swatchesMaxHeight,
-          "swatches": props.swatches,
-          "disabled": props.disabled
-        }, null)]
+        default: () => [!props.hideHeader && createVNode("div", {
+          "key": "header",
+          "class": [backgroundColorClasses.value],
+          "style": [backgroundColorStyles.value]
+        }, [hasTitle && createVNode(VPickerTitle, {
+          "key": "picker-title"
+        }, {
+          default: () => [slots.title?.() ?? props.title]
+        }), slots.header && createVNode("div", {
+          "class": "v-picker__header"
+        }, [slots.header()])]), createVNode("div", {
+          "class": "v-picker__body"
+        }, [slots.default?.()]), slots.actions && createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              slim: true,
+              variant: 'text'
+            }
+          }
+        }, {
+          default: () => [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 = ref();
-    const isFocused = shallowRef(false);
-    const isPristine = shallowRef(true);
-    const listHasFocus = shallowRef(false);
-    const vMenuRef = ref();
-    const vVirtualScrollRef = ref();
-    const _menu = useProxiedModel(props, 'menu');
-    const menu = computed({
-      get: () => _menu.value,
-      set: v => {
-        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
-        _menu.value = v;
-      }
-    });
-    const selectionIndex = shallowRef(-1);
-    let cleared = false;
-    const color = computed(() => vTextFieldRef.value?.color);
-    const label = 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 = computed(() => !!(props.chips || slots.chip));
-    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
-    const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
-    const search = 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 = computed(() => {
-      return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : props.multiple ? model.value.length : search.value.length;
-    });
-    watch(_search, value => {
-      if (cleared) {
-        // wait for clear to finish, VTextField sets _search to null
-        // then search computed triggers and updates _search to ''
-        nextTick(() => cleared = false);
-      } else if (isFocused.value && !menu.value) {
-        menu.value = true;
-      }
-      emit('update:search', value);
-    });
-    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 = computed(() => {
-      if (props.hideSelected) {
-        return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
-      }
-      return filteredItems.value;
-    });
-    const selectedValues = computed(() => model.value.map(selection => selection.value));
-    const highlightFirst = computed(() => {
-      const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
-      return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
-    });
-    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
-    const listRef = 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
-        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 = [];
-    }
-    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));
-        }
-      }
-    });
-    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);
-        });
-      }
-    });
-    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 createVNode(VTextField, 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: () => createVNode(Fragment, null, [createVNode(VMenu, 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 && createVNode(VList, 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']?.() ?? createVNode(VListItem, {
-              "key": "no-data",
-              "title": t(props.noDataText)
-            }, null)), createVNode(VVirtualScroll, {
-              "ref": vVirtualScrollRef,
-              "renderless": true,
-              "items": displayItems.value,
-              "itemKey": "value"
-            }, {
-              default: _ref4 => {
-                let {
-                  item,
-                  index,
-                  itemRef
-                } = _ref4;
-                const itemProps = 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
-                }) ?? createVNode(VListItem, mergeProps(itemProps, {
-                  "role": "option"
-                }), {
-                  prepend: _ref5 => {
-                    let {
-                      isSelected
-                    } = _ref5;
-                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
-                      "key": item.value,
-                      "modelValue": isSelected,
-                      "ripple": false,
-                      "tabindex": "-1"
-                    }, null) : undefined, item.props.prependAvatar && createVNode(VAvatar, {
-                      "image": item.props.prependAvatar
-                    }, null), item.props.prependIcon && 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 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 ? createVNode(VChip, mergeProps({
-            "key": "chip",
-            "closable": props.closableChips,
-            "size": "small",
-            "text": item.title,
-            "disabled": item.props.disabled
-          }, slotProps), null) : createVNode(VDefaultsProvider, {
-            "key": "chip-defaults",
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: item.title
-              }
-            }
-          }, {
-            default: () => [slotContent]
-          }) : slotContent ?? createVNode("span", {
-            "class": "v-combobox__selection-text"
-          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
-            "class": "v-combobox__selection-comma"
-          }, [createTextVNode(",")])])]);
-        })]),
-        'append-inner': function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          return createVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
-            "class": "v-combobox__menu-icon",
-            "icon": props.menuIcon,
-            "onMousedown": onMousedownMenuIcon,
-            "onClick": noop,
-            "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
 
@@ -18158,101 +17562,760 @@ class VuetifyDateAdapter {
   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 = 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);
+  watch(locale.current, value => {
+    instance.locale = options.locale[value] ?? value ?? instance.locale;
+  });
+  return instance;
+}
+function useDate() {
+  const options = inject$1(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 = 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 = computed(() => {
+      return model.value ? {
+        ...model.value,
+        h: hue.value ?? model.value.h
+      } : null;
+    });
+    const {
+      rtlClasses
+    } = useRtl();
+    let externalChange = true;
+    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;
+    };
+    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 createVNode(VPicker, 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: () => createVNode(Fragment, null, [!props.hideCanvas && 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) && createVNode("div", {
+          "key": "controls",
+          "class": "v-color-picker__controls"
+        }, [!props.hideSliders && createVNode(VColorPickerPreview, {
+          "key": "preview",
+          "color": currentColor.value,
+          "onUpdate:color": updateColor,
+          "hideAlpha": !mode.value.endsWith('a'),
+          "disabled": props.disabled
+        }, null), !props.hideInputs && 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 && 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 = ref();
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
+    const listHasFocus = shallowRef(false);
+    const vMenuRef = ref();
+    const vVirtualScrollRef = ref();
+    const _menu = useProxiedModel(props, 'menu');
+    const menu = computed({
+      get: () => _menu.value,
+      set: v => {
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren.size) return;
+        _menu.value = v;
+      }
+    });
+    const selectionIndex = shallowRef(-1);
+    let cleared = false;
+    const color = computed(() => vTextFieldRef.value?.color);
+    const label = 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 = computed(() => !!(props.chips || slots.chip));
+    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
+    const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
+    const search = 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 = computed(() => {
+      return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : props.multiple ? model.value.length : search.value.length;
+    });
+    watch(_search, value => {
+      if (cleared) {
+        // wait for clear to finish, VTextField sets _search to null
+        // then search computed triggers and updates _search to ''
+        nextTick(() => cleared = false);
+      } else if (isFocused.value && !menu.value) {
+        menu.value = true;
+      }
+      emit('update:search', value);
+    });
+    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 = computed(() => {
+      if (props.hideSelected) {
+        return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
+      }
+      return filteredItems.value;
+    });
+    const selectedValues = computed(() => model.value.map(selection => selection.value));
+    const highlightFirst = computed(() => {
+      const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
+      return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
+    });
+    const menuDisabled = computed(() => props.hideNoData && !displayItems.value.length || form.isReadonly.value || form.isDisabled.value);
+    const listRef = 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 = 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);
-  watch(locale.current, value => {
-    instance.locale = options.locale[value] ?? value ?? instance.locale;
-  });
-  return instance;
-}
-function useDate() {
-  const options = inject$1(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
+        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 = [];
     }
+    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));
+        }
+      }
+    });
+    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);
+        });
+      }
+    });
+    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 createVNode(VTextField, 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: () => createVNode(Fragment, null, [createVNode(VMenu, 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 && createVNode(VList, 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']?.() ?? createVNode(VListItem, {
+              "key": "no-data",
+              "title": t(props.noDataText)
+            }, null)), createVNode(VVirtualScroll, {
+              "ref": vVirtualScrollRef,
+              "renderless": true,
+              "items": displayItems.value,
+              "itemKey": "value"
+            }, {
+              default: _ref4 => {
+                let {
+                  item,
+                  index,
+                  itemRef
+                } = _ref4;
+                const itemProps = 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
+                }) ?? createVNode(VListItem, mergeProps(itemProps, {
+                  "role": "option"
+                }), {
+                  prepend: _ref5 => {
+                    let {
+                      isSelected
+                    } = _ref5;
+                    return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                      "key": item.value,
+                      "modelValue": isSelected,
+                      "ripple": false,
+                      "tabindex": "-1"
+                    }, null) : undefined, item.props.prependAvatar && createVNode(VAvatar, {
+                      "image": item.props.prependAvatar
+                    }, null), item.props.prependIcon && 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 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 ? createVNode(VChip, mergeProps({
+            "key": "chip",
+            "closable": props.closableChips,
+            "size": "small",
+            "text": item.title,
+            "disabled": item.props.disabled
+          }, slotProps), null) : createVNode(VDefaultsProvider, {
+            "key": "chip-defaults",
+            "defaults": {
+              VChip: {
+                closable: props.closableChips,
+                size: 'small',
+                text: item.title
+              }
+            }
+          }, {
+            default: () => [slotContent]
+          }) : slotContent ?? createVNode("span", {
+            "class": "v-combobox__selection-text"
+          }, [item.title, props.multiple && index < model.value.length - 1 && createVNode("span", {
+            "class": "v-combobox__selection-comma"
+          }, [createTextVNode(",")])])]);
+        })]),
+        'append-inner': function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(Fragment, null, [slots['append-inner']?.(...args), (!props.hideNoData || props.items.length) && props.menuIcon ? createVNode(VIcon, {
+            "class": "v-combobox__menu-icon",
+            "icon": props.menuIcon,
+            "onMousedown": onMousedownMenuIcon,
+            "onClick": noop,
+            "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
 
@@ -22201,70 +22264,6 @@ const VDatePickerYears = genericComponent()({
   }
 });
 
-// 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(toRef(props, 'color'));
-    useRender(() => {
-      const sheetProps = VSheet.filterProps(props);
-      const hasTitle = !!(props.title || slots.title);
-      return createVNode(VSheet, 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 && createVNode("div", {
-          "key": "header",
-          "class": [backgroundColorClasses.value],
-          "style": [backgroundColorStyles.value]
-        }, [hasTitle && createVNode(VPickerTitle, {
-          "key": "picker-title"
-        }, {
-          default: () => [slots.title?.() ?? props.title]
-        }), slots.header && createVNode("div", {
-          "class": "v-picker__header"
-        }, [slots.header()])]), createVNode("div", {
-          "class": "v-picker__body"
-        }, [slots.default?.()]), slots.actions && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              slim: true,
-              variant: 'text'
-            }
-          }
-        }, {
-          default: () => [createVNode("div", {
-            "class": "v-picker__actions"
-          }, [slots.actions()])]
-        })]
-      });
-    });
-    return {};
-  }
-});
-
 // Types
 
 // Types
@@ -22325,6 +22324,9 @@ const VDatePicker = genericComponent()({
     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')
@@ -22462,7 +22464,7 @@ const VDatePicker = genericComponent()({
       return createVNode(VPicker, 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?.() ?? createVNode("div", {
@@ -31157,7 +31159,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -31410,7 +31412,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */