vuetify 3.3.15 → 3.3.17

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.3.15
+* Vuetify v3.3.17
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1117,6 +1117,17 @@
   function getForeground(color) {
     const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color)));
     const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color)));
+
+    // TODO: warn about poor color selections
+    // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
+    // const minContrast = Math.max(blackContrast, whiteContrast)
+    // if (minContrast < 60) {
+    //   consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`)
+    // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) {
+    //   consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`)
+    // }
+
+    // Prefer white text if both have an acceptable contrast ratio
     return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
   }
 
@@ -1714,7 +1725,7 @@
       'v-layout--full-height': props.fullHeight
     }]);
     const layoutStyles = vue.computed(() => ({
-      zIndex: rootZIndex.value,
+      zIndex: parentLayout ? rootZIndex.value : undefined,
       position: parentLayout ? 'relative' : undefined,
       overflow: parentLayout ? 'hidden' : undefined
     }));
@@ -2235,17 +2246,6 @@
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
           const colorVal = parseColor(theme.colors[color]);
-
-          // TODO: warn about poor color selections
-          // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
-          // const minContrast = Math.max(blackContrast, whiteContrast)
-          // if (minContrast < 60) {
-          //   consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`)
-          // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) {
-          //   consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`)
-          // }
-
-          // Prefer white text if both have an acceptable contrast ratio
           theme.colors[onColor] = getForeground(colorVal);
         }
       }
@@ -2405,7 +2405,6 @@
       const theme = provideTheme(props);
       const {
         layoutClasses,
-        layoutStyles,
         getLayoutItem,
         items,
         layoutRef
@@ -2416,7 +2415,7 @@
       useRender(() => vue.createVNode("div", {
         "ref": layoutRef,
         "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-        "style": [layoutStyles.value, props.style]
+        "style": [props.style]
       }, [vue.createVNode("div", {
         "class": "v-application__wrap"
       }, [slots.default?.()])]));
@@ -3278,9 +3277,12 @@
         if (isCssColor(colors.value.background)) {
           styles.backgroundColor = colors.value.background;
           if (!colors.value.text) {
-            const textColor = getForeground(styles.backgroundColor);
-            styles.color = textColor;
-            styles.caretColor = textColor;
+            const backgroundColor = parseColor(colors.value.background);
+            if (backgroundColor.a == null || backgroundColor.a === 1) {
+              const textColor = getForeground(backgroundColor);
+              styles.color = textColor;
+              styles.caretColor = textColor;
+            }
           }
         } else {
           classes.push(`bg-${colors.value.background}`);
@@ -7985,11 +7987,15 @@
       type: [Boolean, String, Array, Function],
       default: 'props'
     },
-    returnObject: Boolean
+    returnObject: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    }
   }, 'list-items');
   function transformItem$3(props, item) {
     const title = getPropertyFromItem(item, props.itemTitle, item);
-    const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue, title);
+    const value = getPropertyFromItem(item, props.itemValue, title);
     const children = getPropertyFromItem(item, props.itemChildren);
     const itemProps = props.itemProps === true ? typeof item === 'object' && item != null && !Array.isArray(item) ? 'children' in item ? pick(item, ['children'])[1] : item : undefined : getPropertyFromItem(item, props.itemProps);
     const _props = {
@@ -8014,25 +8020,32 @@
   }
   function useItems(props) {
     const items = vue.computed(() => transformItems$3(props, props.items));
-    return useTransformItems(items, value => transformItem$3(props, value));
-  }
-  function useTransformItems(items, transform) {
+    const hasNullItem = vue.computed(() => items.value.some(item => item.value === null));
     function transformIn(value) {
-      return value
-      // When the model value is null, returns an InternalItem based on null
-      // only if null is one of the items
-      .filter(v => v !== null || items.value.some(item => item.value === null)).map(v => {
-        const existingItem = items.value.find(item => deepEqual(v, item.value));
-        // Nullish existingItem means value is a custom input value from combobox
-        // In this case, use transformItem to create an InternalItem based on value
-        return existingItem ?? transform(v);
+      if (!hasNullItem.value) {
+        // When the model value is null, return an InternalItem
+        // based on null only if null is one of the items
+        value = value.filter(v => v !== null);
+      }
+      return value.map(v => {
+        if (props.returnObject && typeof v === 'string') {
+          // String model value means value is a custom input value from combobox
+          // Don't look up existing items if the model value is a string
+          return transformItem$3(props, v);
+        }
+        return items.value.find(item => props.valueComparator(v, item.value)) || transformItem$3(props, v);
       });
     }
     function transformOut(value) {
-      return value.map(_ref => {
+      return props.returnObject ? value.map(_ref => {
         let {
-          value
+          raw
         } = _ref;
+        return raw;
+      }) : value.map(_ref2 => {
+        let {
+          value
+        } = _ref2;
         return value;
       });
     }
@@ -10863,10 +10876,6 @@
       default: '$vuetify.noDataText'
     },
     openOnClear: Boolean,
-    valueComparator: {
-      type: Function,
-      default: deepEqual
-    },
     itemColor: String,
     ...makeItemsProps({
       itemChildren: false
@@ -10920,24 +10929,14 @@
         return props.multiple ? transformed : transformed[0] ?? null;
       });
       const form = useForm();
-      const selections = vue.computed(() => {
-        return model.value.map(v => {
-          return items.value.find(item => {
-            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
-            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
-            if (itemRawValue === undefined || modelRawValue === undefined) return false;
-            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
-          }) || v;
-        });
-      });
-      const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
+      const selectedValues = vue.computed(() => model.value.map(selection => selection.value));
       const isFocused = vue.shallowRef(false);
       const label = vue.computed(() => menu.value ? props.closeText : props.openText);
       let keyboardLookupPrefix = '';
       let keyboardLookupLastTime;
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
-          return items.value.filter(item => !selections.value.some(s => s === item));
+          return items.value.filter(item => !model.value.some(s => s === item));
         }
         return items.value;
       });
@@ -10995,7 +10994,7 @@
       }
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
+          const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
           } else {
@@ -11032,8 +11031,8 @@
         }
       }
       vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && selections.value.length) {
-          const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        if (!props.hideSelected && menu.value && model.value.length) {
+          const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
           IN_BROWSER && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
@@ -11088,7 +11087,7 @@
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, {
               "ref": listRef,
-              "selected": selected.value,
+              "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
               "onKeydown": onListKeydown,
@@ -11137,7 +11136,7 @@
                 }
               }), slots['append-item']?.()]
             })]
-          }), selections.value.map((item, index) => {
+          }), model.value.map((item, index) => {
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
@@ -11180,7 +11179,7 @@
               index
             }) ?? vue.createVNode("span", {
               "class": "v-select__selection-text"
-            }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-select__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -11232,15 +11231,15 @@
     const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length;
     if (!items?.length) return array;
     loop: for (let i = 0; i < items.length; i++) {
-      const item = items[i];
+      const [item, transformed = item] = wrapInArray(items[i]);
       const customMatches = {};
       const defaultMatches = {};
       let match = -1;
       if (query && !options?.noFilter) {
         if (typeof item === 'object') {
-          const filterKeys = keys || Object.keys(item);
+          const filterKeys = keys || Object.keys(transformed);
           for (const key of filterKeys) {
-            const value = getPropertyFromItem(item, key, item);
+            const value = getPropertyFromItem(transformed, key, transformed);
             const keyFilter = options?.customKeyFilter?.[key];
             match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);
             if (match !== -1 && match !== false) {
@@ -11274,7 +11273,7 @@
   function useFilter(props, items, query, options) {
     const filteredItems = vue.ref([]);
     const filteredMatches = vue.ref(new Map());
-    const transformedItems = vue.computed(() => options?.transform ? vue.unref(items).map(options?.transform) : vue.unref(items));
+    const transformedItems = vue.computed(() => options?.transform ? vue.unref(items).map(item => [item, options.transform(item)]) : vue.unref(items));
     vue.watchEffect(() => {
       const _query = typeof query === 'function' ? query() : vue.unref(query);
       const strQuery = typeof _query !== 'string' && typeof _query !== 'number' ? '' : String(_query);
@@ -11392,24 +11391,13 @@
         filteredItems,
         getMatches
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
-      const selections = vue.computed(() => {
-        return model.value.map(v => {
-          return items.value.find(item => {
-            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
-            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
-            if (itemRawValue === undefined || modelRawValue === undefined) return false;
-            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
-          }) || v;
-        });
-      });
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
-          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+          return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
         }
         return filteredItems.value;
       });
-      const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
-      const selection = vue.computed(() => selections.value[selectionIndex.value]);
+      const selectedValues = vue.computed(() => model.value.map(selection => selection.props.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;
@@ -11441,7 +11429,7 @@
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
-        const length = selected.value.length;
+        const length = model.value.length;
         if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
           e.preventDefault();
         }
@@ -11466,13 +11454,14 @@
             return;
           }
           const originalSelectionIndex = selectionIndex.value;
-          if (selection.value) select(selection.value);
+          const selectedItem = model.value[selectionIndex.value];
+          if (selectedItem) select(selectedItem);
           selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         }
         if (e.key === 'ArrowLeft') {
           if (selectionIndex.value < 0 && selectionStart > 0) return;
           const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
-          if (selections.value[prev]) {
+          if (model.value[prev]) {
             selectionIndex.value = prev;
           } else {
             selectionIndex.value = -1;
@@ -11482,7 +11471,7 @@
         if (e.key === 'ArrowRight') {
           if (selectionIndex.value < 0) return;
           const next = selectionIndex.value + 1;
-          if (selections.value[next]) {
+          if (model.value[next]) {
             selectionIndex.value = next;
           } else {
             selectionIndex.value = -1;
@@ -11522,7 +11511,7 @@
       const isSelecting = vue.shallowRef(false);
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
+          const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
           } else {
@@ -11543,11 +11532,11 @@
         if (val === oldVal) return;
         if (val) {
           isSelecting.value = true;
-          search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '');
+          search.value = props.multiple ? '' : String(model.value.at(-1)?.props.title ?? '');
           isPristine.value = true;
           vue.nextTick(() => isSelecting.value = false);
         } else {
-          if (!props.multiple && !search.value) model.value = [];else if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+          if (!props.multiple && !search.value) model.value = [];else if (highlightFirst.value && !listHasFocus.value && !model.value.some(_ref2 => {
             let {
               value
             } = _ref2;
@@ -11566,8 +11555,8 @@
         isPristine.value = !val;
       });
       vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && selections.value.length) {
-          const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        if (!props.hideSelected && menu.value && model.value.length) {
+          const index = displayItems.value.findIndex(item => model.value.some(s => item.value === s.value));
           IN_BROWSER && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
@@ -11619,7 +11608,7 @@
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, {
               "ref": listRef,
-              "selected": selected.value,
+              "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
               "onKeydown": onListKeydown,
@@ -11673,7 +11662,7 @@
                 }
               }), slots['append-item']?.()]
             })]
-          }), selections.value.map((item, index) => {
+          }), model.value.map((item, index) => {
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
@@ -11717,7 +11706,7 @@
               index
             }) ?? vue.createVNode("span", {
               "class": "v-autocomplete__selection-text"
-            }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-autocomplete__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -13115,11 +13104,29 @@
         emit
       } = _ref;
       const isInteracting = vue.shallowRef(false);
-      const isOutsideUpdate = vue.shallowRef(false);
-      const dotPosition = vue.ref({
+      const canvasRef = vue.ref();
+      const canvasWidth = vue.shallowRef(parseFloat(props.width));
+      const canvasHeight = vue.shallowRef(parseFloat(props.height));
+      const _dotPosition = vue.ref({
         x: 0,
         y: 0
       });
+      const dotPosition = vue.computed({
+        get: () => _dotPosition.value,
+        set(val) {
+          if (!canvasRef.value) return;
+          const {
+            x,
+            y
+          } = val;
+          emit('update:color', {
+            h: props.color?.h ?? 0,
+            s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
+            v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
+            a: props.color?.a ?? 1
+          });
+        }
+      });
       const dotStyles = vue.computed(() => {
         const {
           x,
@@ -13132,9 +13139,6 @@
           transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`
         };
       });
-      const canvasRef = vue.ref();
-      const canvasWidth = vue.shallowRef(parseFloat(props.width));
-      const canvasHeight = vue.shallowRef(parseFloat(props.height));
       const {
         resizeRef
       } = useResizeObserver(entries => {
@@ -13158,15 +13162,13 @@
           y: clamp(y - top, 0, height)
         };
       }
-      function handleClick(e) {
-        if (props.disabled || !canvasRef.value) return;
-        updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect());
-      }
       function handleMouseDown(e) {
-        // To prevent selection while moving cursor
-        e.preventDefault();
+        if (e.type === 'mousedown') {
+          // Prevent text selection while dragging
+          e.preventDefault();
+        }
         if (props.disabled) return;
-        isInteracting.value = true;
+        handleMouseMove(e);
         window.addEventListener('mousemove', handleMouseMove);
         window.addEventListener('mouseup', handleMouseUp);
         window.addEventListener('touchmove', handleMouseMove);
@@ -13184,23 +13186,6 @@
         window.removeEventListener('touchmove', handleMouseMove);
         window.removeEventListener('touchend', handleMouseUp);
       }
-      vue.watch(dotPosition, () => {
-        if (isOutsideUpdate.value) {
-          isOutsideUpdate.value = false;
-          return;
-        }
-        if (!canvasRef.value) return;
-        const {
-          x,
-          y
-        } = dotPosition.value;
-        emit('update:color', {
-          h: props.color?.h ?? 0,
-          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
-          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
-          a: props.color?.a ?? 1
-        });
-      });
       function updateCanvas() {
         if (!canvasRef.value) return;
         const canvas = canvasRef.value;
@@ -13222,7 +13207,7 @@
       });
       vue.watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {
         updateCanvas();
-        dotPosition.value = {
+        _dotPosition.value = {
           x: dotPosition.value.x * newVal[0] / oldVal[0],
           y: dotPosition.value.y * newVal[1] / oldVal[1]
         };
@@ -13234,8 +13219,7 @@
           isInteracting.value = false;
           return;
         }
-        isOutsideUpdate.value = true;
-        dotPosition.value = props.color ? {
+        _dotPosition.value = props.color ? {
           x: props.color.s * canvasWidth.value,
           y: (1 - props.color.v) * canvasHeight.value
         } : {
@@ -13251,9 +13235,8 @@
         "ref": resizeRef,
         "class": ['v-color-picker-canvas', props.class],
         "style": props.style,
-        "onClick": handleClick,
         "onMousedown": handleMouseDown,
-        "onTouchstart": handleMouseDown
+        "onTouchstartPassive": handleMouseDown
       }, [vue.createVNode("canvas", {
         "ref": canvasRef,
         "width": canvasWidth.value,
@@ -14163,11 +14146,11 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "id": slotProps.id.value,
             "class": "v-slider__label",
             "text": props.label
-          }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
+          }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
           default: _ref4 => {
             let {
               id,
@@ -14974,24 +14957,13 @@
         filteredItems,
         getMatches
       } = useFilter(props, items, () => isPristine.value ? '' : search.value);
-      const selections = vue.computed(() => {
-        return model.value.map(v => {
-          return items.value.find(item => {
-            const itemRawValue = getPropertyFromItem(item.raw, props.itemValue);
-            const modelRawValue = getPropertyFromItem(v.raw, props.itemValue);
-            if (itemRawValue === undefined || modelRawValue === undefined) return false;
-            return props.returnObject ? props.valueComparator(itemRawValue, modelRawValue) : props.valueComparator(item.value, v.value);
-          }) || v;
-        });
-      });
       const displayItems = vue.computed(() => {
         if (props.hideSelected) {
-          return filteredItems.value.filter(filteredItem => !selections.value.some(s => s.value === filteredItem.value));
+          return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value));
         }
         return filteredItems.value;
       });
-      const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
-      const selection = vue.computed(() => selections.value[selectionIndex.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;
@@ -15023,7 +14995,7 @@
       function onKeydown(e) {
         if (props.readonly || form?.isReadonly.value) return;
         const selectionStart = vTextFieldRef.value.selectionStart;
-        const length = selected.value.length;
+        const length = model.value.length;
         if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
           e.preventDefault();
         }
@@ -15051,13 +15023,14 @@
             return;
           }
           const originalSelectionIndex = selectionIndex.value;
-          if (selection.value) select(selection.value);
+          const selectedItem = model.value[selectionIndex.value];
+          if (selectedItem) select(selectedItem);
           selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
         }
         if (e.key === 'ArrowLeft') {
           if (selectionIndex.value < 0 && selectionStart > 0) return;
           const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
-          if (selections.value[prev]) {
+          if (model.value[prev]) {
             selectionIndex.value = prev;
           } else {
             selectionIndex.value = -1;
@@ -15067,7 +15040,7 @@
         if (e.key === 'ArrowRight') {
           if (selectionIndex.value < 0) return;
           const next = selectionIndex.value + 1;
-          if (selections.value[next]) {
+          if (model.value[next]) {
             selectionIndex.value = next;
           } else {
             selectionIndex.value = -1;
@@ -15087,7 +15060,7 @@
       }
       function select(item) {
         if (props.multiple) {
-          const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value));
+          const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
           if (index === -1) {
             model.value = [...model.value, item];
           } else {
@@ -15126,7 +15099,7 @@
         if (val || val === oldVal) return;
         selectionIndex.value = -1;
         menu.value = false;
-        if (highlightFirst.value && !listHasFocus.value && !selections.value.some(_ref2 => {
+        if (highlightFirst.value && !listHasFocus.value && !model.value.some(_ref2 => {
           let {
             value
           } = _ref2;
@@ -15139,8 +15112,8 @@
         }
       });
       vue.watch(menu, () => {
-        if (!props.hideSelected && menu.value && selections.value.length) {
-          const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
+        if (!props.hideSelected && menu.value && model.value.length) {
+          const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
           IN_BROWSER && window.requestAnimationFrame(() => {
             index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
           });
@@ -15191,7 +15164,7 @@
           }, props.menuProps), {
             default: () => [hasList && vue.createVNode(VList, {
               "ref": listRef,
-              "selected": selected.value,
+              "selected": selectedValues.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
               "onMousedown": e => e.preventDefault(),
               "onKeydown": onListKeydown,
@@ -15245,7 +15218,7 @@
                 }
               }), slots['append-item']?.()]
             })]
-          }), selections.value.map((item, index) => {
+          }), model.value.map((item, index) => {
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
@@ -15289,7 +15262,7 @@
               index
             }) ?? vue.createVNode("span", {
               "class": "v-combobox__selection-text"
-            }, [item.title, props.multiple && index < selections.value.length - 1 && vue.createVNode("span", {
+            }, [item.title, props.multiple && index < model.value.length - 1 && vue.createVNode("span", {
               "class": "v-combobox__selection-comma"
             }, [vue.createTextVNode(",")])])]);
           })]),
@@ -17758,10 +17731,10 @@
           "focused": isFocused.value
         }), {
           ...slots,
-          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? props.label ? vue.createVNode(VLabel, {
+          prepend: hasPrepend ? slotProps => vue.createVNode(vue.Fragment, null, [slots.label?.(slotProps) ?? (props.label ? vue.createVNode(VLabel, {
             "class": "v-slider__label",
             "text": props.label
-          }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
+          }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
           default: _ref4 => {
             let {
               id,
@@ -18826,11 +18799,10 @@
           "tabindex": isSelected.value ? 0 : -1,
           "role": "tab",
           "aria-selected": String(isSelected.value),
-          "active": false,
+          "active": false
+        }, btnProps, attrs, {
           "block": props.fixed,
           "maxWidth": props.fixed ? 300 : undefined,
-          "rounded": 0
-        }, btnProps, attrs, {
           "onGroup:selected": updateSlider
         }), {
           default: () => [slots.default?.() ?? props.text, !props.hideSlider && vue.createVNode("div", {
@@ -18847,8 +18819,8 @@
   function parseItems(items) {
     if (!items) return [];
     return items.map(item => {
-      if (typeof item === 'string') return {
-        title: item,
+      if (!isObject(item)) return {
+        text: item,
         value: item
       };
       return item;
@@ -18926,7 +18898,7 @@
           "symbol": VTabsSymbol
         }), {
           default: () => [slots.default ? slots.default() : parsedItems.value.map(item => vue.createVNode(VTab, vue.mergeProps(item, {
-            "key": item.title
+            "key": item.text
           }), null))]
         });
       });
@@ -19619,7 +19591,6 @@
   const makeVBottomSheetProps = propsFactory({
     inset: Boolean,
     ...makeVDialogProps({
-      contentClass: 'v-bottom-sheet__content',
       transition: 'bottom-sheet-transition'
     })
   }, 'VBottomSheet');
@@ -19637,6 +19608,7 @@
       useRender(() => {
         const [dialogProps] = VDialog.filterProps(props);
         return vue.createVNode(VDialog, vue.mergeProps(dialogProps, {
+          "contentClass": ['v-bottom-sheet__content', props.contentClass],
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
           "class": ['v-bottom-sheet', {
@@ -20169,7 +20141,7 @@
         allItems: allSelectable.value,
         currentPage: currentPageSelectable.value
       });
-      return isSelected(items);
+      return !!items.length && isSelected(items);
     });
     const data = {
       toggleSelect,
@@ -21810,7 +21782,7 @@
   const makeVDatePickerControlsProps = propsFactory({
     displayDate: String,
     disabled: {
-      type: [Boolean, String],
+      type: [Boolean, String, Array],
       default: false
     },
     nextIcon: {
@@ -21821,13 +21793,13 @@
       type: [String],
       default: '$prev'
     },
-    expandIcon: {
+    modeIcon: {
       type: [String],
-      default: '$expand'
+      default: '$subgroup'
     },
-    collapseIcon: {
-      type: [String],
-      default: '$collapse'
+    variant: {
+      type: String,
+      default: 'modern'
     },
     viewMode: {
       type: String,
@@ -21846,17 +21818,14 @@
       let {
         emit
       } = _ref;
-      const modeIcon = vue.computed(() => {
-        return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon;
-      });
       const disableMode = vue.computed(() => {
-        return Array.isArray(props.disabled) ? props.disabled.includes('mode') : props.disabled;
+        return Array.isArray(props.disabled) ? props.disabled.includes('mode') : !!props.disabled;
       });
       const disablePrev = vue.computed(() => {
-        return Array.isArray(props.disabled) ? props.disabled.includes('prev') : props.disabled;
+        return Array.isArray(props.disabled) ? props.disabled.includes('prev') : !!props.disabled;
       });
       const disableNext = vue.computed(() => {
-        return Array.isArray(props.disabled) ? props.disabled.includes('next') : props.disabled;
+        return Array.isArray(props.disabled) ? props.disabled.includes('next') : !!props.disabled;
       });
       function onClickPrev() {
         emit('click:prev');
@@ -21868,17 +21837,21 @@
         emit('click:mode');
       }
       useRender(() => {
-        return vue.createVNode("div", {
-          "class": "v-date-picker-controls"
-        }, [vue.createVNode("div", {
+        const displayDate = vue.createVNode("div", {
           "class": "v-date-picker-controls__date"
-        }, [props.displayDate]), vue.createVNode(VBtn, {
+        }, [props.displayDate]);
+        return vue.createVNode("div", {
+          "class": ['v-date-picker-controls', `v-date-picker-controls--variant-${props.variant}`]
+        }, [props.variant === 'modern' && vue.createVNode(vue.Fragment, null, [displayDate, vue.createVNode(VBtn, {
+          "key": "mode-btn",
           "disabled": disableMode.value,
-          "key": "expand-btn",
-          "icon": modeIcon.value,
+          "density": "comfortable",
+          "icon": props.modeIcon,
           "variant": "text",
           "onClick": onClickMode
-        }, null), vue.createVNode(VSpacer, null, null), vue.createVNode("div", {
+        }, null), vue.createVNode(VSpacer, {
+          "key": "mode-spacer"
+        }, null)]), vue.createVNode("div", {
           "key": "month-buttons",
           "class": "v-date-picker-controls__month"
         }, [vue.createVNode(VBtn, {
@@ -21886,7 +21859,7 @@
           "icon": props.prevIcon,
           "variant": "text",
           "onClick": onClickPrev
-        }, null), vue.createVNode(VBtn, {
+        }, null), props.variant === 'classic' && displayDate, vue.createVNode(VBtn, {
           "disabled": disableNext.value,
           "icon": props.nextIcon,
           "variant": "text",
@@ -22163,6 +22136,11 @@
           day: 'numeric'
         };
         break;
+      case 'shortDate':
+        options = {
+          year: 'numeric'
+        };
+        break;
       default:
         options = {
           timeZone: 'UTC',
@@ -22197,6 +22175,7 @@
     return isAfter(date, range[0]) && isBefore(date, range[1]);
   }
   function isValid(date) {
+    if (!date || date == null) return false;
     const d = new Date(date);
     return d instanceof Date && !isNaN(d.getTime());
   }
@@ -22228,6 +22207,12 @@
     d.setFullYear(year);
     return d;
   }
+  function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+  function endOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+  }
   class VuetifyDateAdapter {
     constructor(options) {
       this.locale = options.locale;
@@ -22292,6 +22277,12 @@
     getMonth(date) {
       return getMonth(date);
     }
+    startOfDay(date) {
+      return startOfDay(date);
+    }
+    endOfDay(date) {
+      return endOfDay(date);
+    }
     startOfYear(date) {
       return startOfYear(date);
     }
@@ -22775,8 +22766,7 @@
           "key": "in-hover",
           "class": "v-date-picker-month__day--hover"
         }, null), (props.showAdjacentMonths || !item.isAdjacent) && vue.createVNode(VBtn, {
-          "active": item.isSelected,
-          "color": color,
+          "color": !item.isToday || item.isSelected ? color : undefined,
           "disabled": item.isDisabled,
           "icon": true,
           "ripple": false,
@@ -22811,7 +22801,7 @@
       const years = vue.computed(() => {
         const min = props.min ? adapter.date(props.min).getFullYear() : displayYear.value - 100;
         const max = props.max ? adapter.date(props.max).getFullYear() : displayYear.value + 50;
-        return createRange(max - min, min);
+        return createRange(max - min + 1, min);
       });
       const yearRef = vue.ref();
       vue.onMounted(() => {
@@ -22949,12 +22939,14 @@
     appendIcon: String,
     color: String,
     header: String,
-    transition: String
+    transition: String,
+    onClick: EventProp()
   }, 'VDatePickerHeader');
   const VDatePickerHeader = genericComponent()({
     name: 'VDatePickerHeader',
     props: makeVDatePickerHeaderProps(),
     emits: {
+      click: () => true,
       'click:append': () => true
     },
     setup(props, _ref) {
@@ -22966,6 +22958,9 @@
         backgroundColorClasses,
         backgroundColorStyles
       } = useBackgroundColor(props, 'color');
+      function onClick() {
+        emit('click');
+      }
       function onClickAppend() {
         emit('click:append');
       }
@@ -22973,8 +22968,11 @@
         const hasContent = !!(slots.default || props.header);
         const hasAppend = !!(slots.append || props.appendIcon);
         return vue.createVNode("div", {
-          "class": ['v-date-picker-header', backgroundColorClasses.value],
-          "style": backgroundColorStyles.value
+          "class": ['v-date-picker-header', {
+            'v-date-picker-header--clickable': !!props.onClick
+          }, backgroundColorClasses.value],
+          "style": backgroundColorStyles.value,
+          "onClick": onClick
         }, [slots.prepend && vue.createVNode("div", {
           "key": "prepend",
           "class": "v-date-picker-header__prepend"
@@ -23016,9 +23014,10 @@
   // Types
 
   const makeVPickerProps = propsFactory({
+    bgColor: String,
     landscape: Boolean,
     title: String,
-    ...omit(makeVSheetProps(), ['color'])
+    ...makeVSheetProps()
   }, 'VPicker');
   const VPicker = genericComponent()({
     name: 'VPicker',
@@ -23027,23 +23026,31 @@
       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: () => [hasTitle && vue.createVNode(VPickerTitle, {
+          default: () => [vue.createVNode("div", {
+            "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", {
+          }, [slots.header()])]), vue.createVNode("div", {
             "class": "v-picker__body"
           }, [slots.default?.()]), slots.actions?.()[0]?.children && vue.createVNode("div", {
             "class": "v-picker__actions"
@@ -23121,7 +23128,9 @@
       const isReversing = vue.shallowRef(false);
       const inputModel = vue.ref(model.value.map(date => adapter.format(date, 'keyboardDate')));
       const temporaryModel = vue.ref(model.value);
-      const title = vue.computed(() => t(props.title));
+      const title = vue.computed(() => {
+        return props.variant === 'modern' ? t(props.title) : adapter.format(displayDate.value, 'shortDate');
+      });
       const header = vue.computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
       const headerIcon = vue.computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
       const headerTransition = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -23160,9 +23169,11 @@
       function updateFromInput(input, index) {
         const {
           isValid,
-          date
+          date,
+          isAfter
         } = adapter;
-        if (isValid(input)) {
+        const inputDate = date(input);
+        if (isValid(input) && (!minDate.value || !isAfter(minDate.value, inputDate)) && (!maxDate.value || !isAfter(inputDate, maxDate.value))) {
           const newModel = model.value.slice();
           newModel[index] = date(input);
           if (props.hideActions) {
@@ -23191,6 +23202,9 @@
       function onClickMode() {
         viewMode.value = viewMode.value === 'month' ? 'year' : 'month';
       }
+      function onClickHeader() {
+        viewMode.value = 'month';
+      }
       const headerSlotProps = vue.computed(() => ({
         header: header.value,
         appendIcon: headerIcon.value,
@@ -23203,15 +23217,20 @@
         const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
         const [datePickerYearsProps] = VDatePickerYears.filterProps(props);
         return vue.createVNode(VPicker, vue.mergeProps(pickerProps, {
-          "class": ['v-date-picker', props.class],
+          "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, props.class],
           "style": props.style,
-          "title": title.value,
           "width": props.showWeek ? 408 : 360
         }), {
+          title: () => slots.title?.() ?? vue.createVNode("div", {
+            "class": "v-date-picker__title",
+            "onClick": props.variant === 'classic' ? onClickMode : undefined
+          }, [title.value]),
           header: () => slots.header?.(headerSlotProps.value) ?? vue.createVNode(VDatePickerHeader, vue.mergeProps({
             "key": "header"
-          }, headerSlotProps.value), null),
-          default: () => inputMode.value === 'calendar' ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
+          }, headerSlotProps.value, {
+            "onClick": viewMode.value === 'year' ? onClickHeader : undefined
+          }), null),
+          default: () => inputMode.value === 'calendar' ? vue.createVNode(vue.Fragment, null, [(props.variant !== 'classic' || viewMode.value !== 'year') && vue.createVNode(VDatePickerControls, vue.mergeProps(datePickerControlsProps, {
             "disabled": disabled.value,
             "displayDate": adapter.format(displayDate.value, 'monthAndYear'),
             "onClick:next": onClickNext,
@@ -24578,7 +24597,7 @@
       date
     };
   }
-  const version$1 = "3.3.15";
+  const version$1 = "3.3.17";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -24592,7 +24611,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.3.15";
+  const version = "3.3.17";
 
   /* eslint-disable local-rules/sort-imports */