vuetify 3.0.3 → 3.0.5

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.3
+* Vuetify v3.0.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -513,7 +513,7 @@
 
     if (parent) {
       vm = {
-        _isVue: true,
+        __isVue: true,
         $parent: parent,
         $options: vm
       };
@@ -545,7 +545,7 @@
     if (vm.$root === vm) {
       return '<Root>';
     }
-    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm._isVue ? vm.$options || vm.constructor.options : vm || {};
+    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm.__isVue ? vm.$options || vm.constructor.options : vm || {};
     let name = options.name || options._componentTag;
     const file = options.__file;
     if (!name && file) {
@@ -555,7 +555,7 @@
     return (name ? `<${classify(name)}>` : `<Anonymous>`) + (file && includeFile !== false ? ` at ${file}` : '');
   }
   function generateComponentTrace(vm) {
-    if (vm._isVue && vm.$parent) {
+    if (vm.__isVue && vm.$parent) {
       const tree = [];
       let currentRecursiveSequence = 0;
       while (vm) {
@@ -599,21 +599,29 @@
 
     // Matrix transform, then gamma adjustment
     for (let i = 0; i < 3; ++i) {
+      // Rescale back to [0, 255]
       rgb[i] = Math.round(clamp(transform(matrix[i][0] * xyz[0] + matrix[i][1] * xyz[1] + matrix[i][2] * xyz[2])) * 255);
     }
-
-    // Rescale back to [0, 255]
-    return (rgb[0] << 16) + (rgb[1] << 8) + (rgb[2] << 0);
+    return {
+      r: rgb[0],
+      g: rgb[1],
+      b: rgb[2]
+    };
   }
-  function toXYZ$1(rgb) {
+  function toXYZ$1(_ref) {
+    let {
+      r,
+      g,
+      b
+    } = _ref;
     const xyz = [0, 0, 0];
     const transform = srgbReverseTransform;
     const matrix = srgbReverseMatrix;
 
     // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB
-    const r = transform((rgb >> 16 & 0xff) / 255);
-    const g = transform((rgb >> 8 & 0xff) / 255);
-    const b = transform((rgb >> 0 & 0xff) / 255);
+    r = transform(r / 255);
+    g = transform(g / 255);
+    b = transform(b / 255);
 
     // Matrix color space transform
     for (let i = 0; i < 3; ++i) {
@@ -644,43 +652,36 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function colorToInt(color) {
-    let rgb;
+  function parseColor$1(color) {
     if (typeof color === 'number') {
-      rgb = color;
+      if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
+        // int can't have opacity
+        consoleWarn(`'${color}' is not a valid hex color`);
+      }
+      return {
+        r: (color & 0xFF0000) >> 16,
+        g: (color & 0xFF00) >> 8,
+        b: color & 0xFF
+      };
     } else if (typeof color === 'string') {
-      let c = color.startsWith('#') ? color.substring(1) : color;
-      if (c.length === 3) {
-        c = c.split('').map(char => char + char).join('');
+      let hex = color.startsWith('#') ? color.slice(1) : color;
+      if ([3, 4].includes(hex.length)) {
+        hex = hex.split('').map(char => char + char).join('');
+      } else if (![6, 8].includes(hex.length)) {
+        consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
-      if (c.length !== 6 && c.length !== 8) {
-        consoleWarn(`'${color}' is not a valid rgb color`);
+      const int = parseInt(hex, 16);
+      if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) {
+        consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
-      rgb = parseInt(c, 16);
+      return HexToRGB(hex);
     } else {
       throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
     }
-    if (rgb < 0) {
-      consoleWarn(`Colors cannot be negative: '${color}'`);
-      rgb = 0;
-    } else if (rgb > 0xffffffff || isNaN(rgb)) {
-      consoleWarn(`'${color}' is not a valid rgb color`);
-      rgb = 0xffffff;
-    }
-    return rgb;
-  }
-  function intToHex(color) {
-    let hexColor = color.toString(16);
-    if (hexColor.length < 6) hexColor = '0'.repeat(6 - hexColor.length) + hexColor;
-    return '#' + hexColor;
   }
 
-  /**
-   * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
-   *
-   * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
-   */
-  function HSVAtoRGBA(hsva) {
+  /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+  function HSVtoRGB(hsva) {
     const {
       h,
       s,
@@ -700,12 +701,8 @@
     };
   }
 
-  /**
-   * Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
-   *
-   * @param color RGBA color as an array [0-255, 0-255, 0-255, 0-1]
-   */
-  function RGBAtoHSVA(rgba) {
+  /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+  function RGBtoHSV(rgba) {
     if (!rgba) return {
       h: 0,
       s: 1,
@@ -737,7 +734,7 @@
       a: rgba.a
     };
   }
-  function HSVAtoHSLA(hsva) {
+  function HSVtoHSL(hsva) {
     const {
       h,
       s,
@@ -753,7 +750,7 @@
       a
     };
   }
-  function HSLAtoHSVA(hsl) {
+  function HSLtoHSV(hsl) {
     const {
       h,
       s,
@@ -769,34 +766,47 @@
       a
     };
   }
-  function RGBAtoCSS(rgba) {
-    return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+  function RGBtoCSS(_ref) {
+    let {
+      r,
+      g,
+      b,
+      a
+    } = _ref;
+    return a === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
   }
-  function HSVAtoCSS(hsva) {
-    return RGBAtoCSS(HSVAtoRGBA(hsva));
+  function HSVtoCSS(hsva) {
+    return RGBtoCSS(HSVtoRGB(hsva));
   }
-  function RGBAtoHex(rgba) {
-    const toHex = v => {
-      const h = Math.round(v).toString(16);
-      return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
-    };
-    return `#${[toHex(rgba.r), toHex(rgba.g), toHex(rgba.b), toHex(Math.round(rgba.a * 255))].join('')}`;
+  function toHex(v) {
+    const h = Math.round(v).toString(16);
+    return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
   }
-  function HexToRGBA(hex) {
-    const rgba = chunk(hex.slice(1), 2).map(c => parseInt(c, 16));
+  function RGBtoHex(_ref2) {
+    let {
+      r,
+      g,
+      b,
+      a
+    } = _ref2;
+    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
+  }
+  function HexToRGB(hex) {
+    let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
+    a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
     return {
-      r: rgba[0],
-      g: rgba[1],
-      b: rgba[2],
-      a: Math.round(rgba[3] / 255 * 100) / 100
+      r,
+      g,
+      b,
+      a
     };
   }
-  function HexToHSVA(hex) {
-    const rgb = HexToRGBA(hex);
-    return RGBAtoHSVA(rgb);
+  function HexToHSV(hex) {
+    const rgb = HexToRGB(hex);
+    return RGBtoHSV(rgb);
   }
-  function HSVAtoHex(hsva) {
-    return RGBAtoHex(HSVAtoRGBA(hsva));
+  function HSVtoHex(hsva) {
+    return RGBtoHex(HSVtoRGB(hsva));
   }
   function parseHex(hex) {
     if (hex.startsWith('#')) {
@@ -811,20 +821,10 @@
     } else {
       hex = padEnd(padEnd(hex, 6), 8, 'F');
     }
-    return `#${hex}`.toUpperCase().substr(0, 9);
-  }
-  function colorToRGB(color) {
-    const int = colorToInt(color);
-    return {
-      r: (int & 0xFF0000) >> 16,
-      g: (int & 0xFF00) >> 8,
-      b: int & 0xFF
-    };
+    return hex;
   }
   function lighten(value, amount) {
     const lab = fromXYZ(toXYZ$1(value));
-    // TODO: why this false positive?
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
     lab[0] = lab[0] + amount * 10;
     return fromXYZ$1(toXYZ(lab));
   }
@@ -839,7 +839,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = colorToInt(color);
+    const rgb = parseColor$1(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -1470,12 +1470,12 @@
 
   function APCAcontrast(text, background) {
     // Linearize sRGB
-    const Rtxt = ((text >> 16 & 0xff) / 255) ** mainTRC;
-    const Gtxt = ((text >> 8 & 0xff) / 255) ** mainTRC;
-    const Btxt = ((text >> 0 & 0xff) / 255) ** mainTRC;
-    const Rbg = ((background >> 16 & 0xff) / 255) ** mainTRC;
-    const Gbg = ((background >> 8 & 0xff) / 255) ** mainTRC;
-    const Bbg = ((background >> 0 & 0xff) / 255) ** mainTRC;
+    const Rtxt = (text.r / 255) ** mainTRC;
+    const Gtxt = (text.g / 255) ** mainTRC;
+    const Btxt = (text.b / 255) ** mainTRC;
+    const Rbg = (background.r / 255) ** mainTRC;
+    const Gbg = (background.g / 255) ** mainTRC;
+    const Bbg = (background.b / 255) ** mainTRC;
 
     // Apply the standard coefficients and sum to Y
     let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
@@ -1641,7 +1641,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = intToHex(fn(colorToInt(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
               }
             }
           }
@@ -1649,9 +1649,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = colorToInt(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(0, colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(0xffffff, colorVal));
+          const colorVal = parseColor$1(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1681,7 +1681,7 @@
         } = theme;
         createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${dark ? 'dark' : 'normal'}`, ...genCssVariables(theme), ...Object.keys(variables).map(key => {
           const value = variables[key];
-          const color = typeof value === 'string' && value.startsWith('#') ? colorToRGB(value) : undefined;
+          const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
           const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
           return `--v-${key}: ${rgb ?? value}`;
         })]);
@@ -1783,7 +1783,7 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = colorToRGB(value);
+      const rgb = parseColor$1(value);
       variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
@@ -3180,27 +3180,43 @@
             }
           }, {
             default: () => [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots) : vue.createVNode(VImg, null, null)]
-          })]), vue.createVNode("div", {
-            "class": "v-toolbar__content",
-            "style": {
-              height: convertToUnit(contentHeight.value)
+          })]), vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VTabs: {
+                height: convertToUnit(contentHeight.value)
+              }
             }
-          }, [slots.prepend && vue.createVNode("div", {
-            "class": "v-toolbar__prepend"
-          }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && vue.createVNode(VToolbarTitle, {
-            "key": "title",
-            "text": props.title
           }, {
-            text: slots.title
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && vue.createVNode("div", {
-            "class": "v-toolbar__append"
-          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), vue.createVNode(VExpandTransition, null, {
-            default: () => [isExtended.value && vue.createVNode("div", {
-              "class": "v-toolbar__extension",
+            default: () => [vue.createVNode("div", {
+              "class": "v-toolbar__content",
               "style": {
+                height: convertToUnit(contentHeight.value)
+              }
+            }, [slots.prepend && vue.createVNode("div", {
+              "class": "v-toolbar__prepend"
+            }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && vue.createVNode(VToolbarTitle, {
+              "key": "title",
+              "text": props.title
+            }, {
+              text: slots.title
+            }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && vue.createVNode("div", {
+              "class": "v-toolbar__append"
+            }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])])]
+          }), vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VTabs: {
                 height: convertToUnit(extensionHeight.value)
               }
-            }, [extension])]
+            }
+          }, {
+            default: () => [vue.createVNode(VExpandTransition, null, {
+              default: () => [isExtended.value && vue.createVNode("div", {
+                "class": "v-toolbar__extension",
+                "style": {
+                  height: convertToUnit(extensionHeight.value)
+                }
+              }, [extension])]
+            })]
           })]
         });
       });
@@ -4520,7 +4536,7 @@
 
   // Composables
   const makeLoaderProps = propsFactory({
-    loading: Boolean
+    loading: [Boolean, String]
   }, 'loader');
   function useLoader(props) {
     let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
@@ -5398,7 +5414,7 @@
           "class": "v-field__overlay"
         }, null), vue.createVNode(LoaderSlot, {
           "name": "v-field",
-          "active": props.loading,
+          "active": !!props.loading,
           "color": props.error ? 'error' : props.color
         }, {
           default: slots.loader
@@ -5691,7 +5707,7 @@
     const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
     const errorMessages = vue.computed(() => {
-      return props.errorMessages.length ? wrapInArray(props.errorMessages) : internalErrorMessages.value;
+      return props.errorMessages.length ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
     });
     const isValid = vue.computed(() => {
       if (props.error || errorMessages.value.length) return false;
@@ -5755,7 +5771,7 @@
       const results = [];
       isValidating.value = true;
       for (const rule of props.rules) {
-        if (results.length >= (props.maxErrors || 1)) {
+        if (results.length >= (props.maxErrors ?? 1)) {
           break;
         }
         const handler = typeof rule === 'function' ? rule : () => rule;
@@ -6729,7 +6745,8 @@
     emits: {
       'click:close': e => true,
       'update:modelValue': value => true,
-      'group:selected': val => true
+      'group:selected': val => true,
+      click: e => true
     },
     setup(props, _ref) {
       let {
@@ -6763,10 +6780,18 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const group = useGroupItem(props, VChipGroupSymbol, false);
       const link = useLink(props, attrs);
+      const isClickable = vue.computed(() => !props.disabled && (!!group || link.isClickable.value || props.link));
       function onCloseClick(e) {
         isActive.value = false;
         emit('click:close', e);
       }
+      function onClick(e) {
+        var _link$navigate;
+        emit('click', e);
+        if (!isClickable.value) return;
+        (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+        group == null ? void 0 : group.toggle();
+      }
       return () => {
         var _slots$default;
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -6775,13 +6800,11 @@
         const hasFilter = !!(slots.filter || props.filter) && group;
         const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
         const hasColor = !group || group.isSelected.value;
-        const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link);
-        const onClickFunc = props.link ? props.link : group == null ? void 0 : group.toggle;
         return isActive.value && vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-chip', {
             'v-chip--disabled': props.disabled,
             'v-chip--label': props.label,
-            'v-chip--link': isClickable,
+            'v-chip--link': isClickable.value,
             'v-chip--filter': hasFilter,
             'v-chip--pill': props.pill
           }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, group == null ? void 0 : group.selectedClass.value],
@@ -6789,9 +6812,9 @@
           "disabled": props.disabled || undefined,
           "draggable": props.draggable,
           "href": link.href.value,
-          "onClick": isClickable && onClickFunc
+          "onClick": onClick
         }, {
-          default: () => [genOverlays(isClickable, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
+          default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
             "key": "filter",
             "defaults": {
               VIcon: {
@@ -6861,7 +6884,7 @@
               "onClick": onCloseClick
             }, [slots.close ? slots.close() : vue.createVNode(VIcon, null, null)])]
           })]
-        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple, null]]);
+        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
       };
     }
   });
@@ -7657,7 +7680,8 @@
               "key": "prepend-icon"
             }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
           }), vue.createVNode("div", {
-            "class": "v-list-item__content"
+            "class": "v-list-item__content",
+            "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
             "key": "title"
           }, {
@@ -9023,25 +9047,163 @@
     });
   }
 
+  // Utilities
+
+  // Types
+
+  const DisplaySymbol = Symbol.for('vuetify:display');
+  const defaultDisplayOptions = {
+    mobileBreakpoint: 'lg',
+    thresholds: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+      xxl: 2560
+    }
+  };
+  const parseDisplayOptions = function () {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
+    return mergeDeep(defaultDisplayOptions, options);
+  };
+  function getClientWidth(isHydrate) {
+    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  }
+  function getClientHeight(isHydrate) {
+    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  }
+  function getPlatform() {
+    const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
+    function match(regexp) {
+      return Boolean(userAgent.match(regexp));
+    }
+    const android = match(/android/i);
+    const ios = match(/iphone|ipad|ipod/i);
+    const cordova = match(/cordova/i);
+    const electron = match(/electron/i);
+    const chrome = match(/chrome/i);
+    const edge = match(/edge/i);
+    const firefox = match(/firefox/i);
+    const opera = match(/opera/i);
+    const win = match(/win/i);
+    const mac = match(/mac/i);
+    const linux = match(/linux/i);
+    const ssr = match(/ssr/i);
+    return {
+      android,
+      ios,
+      cordova,
+      electron,
+      chrome,
+      edge,
+      firefox,
+      opera,
+      win,
+      mac,
+      linux,
+      touch: SUPPORTS_TOUCH,
+      ssr
+    };
+  }
+  function createDisplay(options, ssr) {
+    const {
+      thresholds,
+      mobileBreakpoint
+    } = parseDisplayOptions(options);
+    const height = vue.ref(getClientHeight(ssr));
+    const platform = getPlatform();
+    const state = vue.reactive({});
+    const width = vue.ref(getClientWidth(ssr));
+    function update() {
+      height.value = getClientHeight();
+      width.value = getClientWidth();
+    }
+
+    // eslint-disable-next-line max-statements
+    vue.watchEffect(() => {
+      const xs = width.value < thresholds.sm;
+      const sm = width.value < thresholds.md && !xs;
+      const md = width.value < thresholds.lg && !(sm || xs);
+      const lg = width.value < thresholds.xl && !(md || sm || xs);
+      const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
+      const xxl = width.value >= thresholds.xxl;
+      const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : xl ? 'xl' : 'xxl';
+      const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];
+      const mobile = !platform.ssr ? width.value < breakpointValue : platform.android || platform.ios || platform.opera;
+      state.xs = xs;
+      state.sm = sm;
+      state.md = md;
+      state.lg = lg;
+      state.xl = xl;
+      state.xxl = xxl;
+      state.smAndUp = !xs;
+      state.mdAndUp = !(xs || sm);
+      state.lgAndUp = !(xs || sm || md);
+      state.xlAndUp = !(xs || sm || md || lg);
+      state.smAndDown = !(md || lg || xl || xxl);
+      state.mdAndDown = !(lg || xl || xxl);
+      state.lgAndDown = !(xl || xxl);
+      state.xlAndDown = !xxl;
+      state.name = name;
+      state.height = height.value;
+      state.width = width.value;
+      state.mobile = mobile;
+      state.mobileBreakpoint = mobileBreakpoint;
+      state.platform = platform;
+      state.thresholds = thresholds;
+    });
+    if (IN_BROWSER) {
+      window.addEventListener('resize', update, {
+        passive: true
+      });
+    }
+    return {
+      ...vue.toRefs(state),
+      update,
+      ssr: !!ssr
+    };
+  }
+  function useDisplay() {
+    const display = vue.inject(DisplaySymbol);
+    if (!display) throw new Error('Could not find Vuetify display injection');
+    return display;
+  }
+
   // Utilities
   function useHydration() {
-    var _vm$root, _vm$root$appContext, _vm$root$appContext$a;
     if (!IN_BROWSER) return vue.ref(false);
-    const vm = getCurrentInstance('useHydration');
-    const rootEl = vm == null ? void 0 : (_vm$root = vm.root) == null ? void 0 : (_vm$root$appContext = _vm$root.appContext) == null ? void 0 : (_vm$root$appContext$a = _vm$root$appContext.app) == null ? void 0 : _vm$root$appContext$a._container;
-    const isMounted = vue.ref(!!(rootEl != null && rootEl.__vue_app__));
-    if (!isMounted.value) {
-      vue.onMounted(() => isMounted.value = true);
+    const {
+      ssr
+    } = useDisplay();
+    if (ssr) {
+      const isMounted = vue.ref(false);
+      vue.onMounted(() => {
+        isMounted.value = true;
+      });
+      return isMounted;
+    } else {
+      return vue.ref(true);
     }
-    return isMounted;
+  }
+
+  function useScopeId() {
+    const vm = getCurrentInstance('useScopeId');
+    const scopeId = vm.vnode.scopeId;
+    return {
+      scopeId: scopeId ? {
+        [scopeId]: ''
+      } : undefined
+    };
   }
 
   // Types
 
   const StackSymbol = Symbol.for('vuetify:stack');
   const globalStack = vue.reactive([]);
-  function useStack(isActive, zIndex) {
+  function useStack(isActive, zIndex, disableGlobalStack) {
     const vm = getCurrentInstance('useStack');
+    const createStackEntry = !disableGlobalStack;
     const parent = vue.inject(StackSymbol, undefined);
     const stack = vue.reactive({
       activeChildren: new Set()
@@ -9052,20 +9214,26 @@
       var _globalStack$at;
       const lastZIndex = (_globalStack$at = globalStack.at(-1)) == null ? void 0 : _globalStack$at[1];
       _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
-      globalStack.push([vm.uid, _zIndex.value]);
+      if (createStackEntry) {
+        globalStack.push([vm.uid, _zIndex.value]);
+      }
       parent == null ? void 0 : parent.activeChildren.add(vm.uid);
       vue.onScopeDispose(() => {
-        const idx = globalStack.findIndex(v => v[0] === vm.uid);
-        globalStack.splice(idx, 1);
+        if (createStackEntry) {
+          const idx = globalStack.findIndex(v => v[0] === vm.uid);
+          globalStack.splice(idx, 1);
+        }
         parent == null ? void 0 : parent.activeChildren.delete(vm.uid);
       });
     });
     const globalTop = vue.ref(true);
-    vue.watchEffect(() => {
-      var _globalStack$at2;
-      const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
-      setTimeout(() => globalTop.value = _isTop);
-    });
+    if (createStackEntry) {
+      vue.watchEffect(() => {
+        var _globalStack$at2;
+        const _isTop = ((_globalStack$at2 = globalStack.at(-1)) == null ? void 0 : _globalStack$at2[0]) === vm.uid;
+        setTimeout(() => globalTop.value = _isTop);
+      });
+    }
     const localTop = vue.computed(() => !stack.activeChildren.size);
     return {
       globalTop: vue.readonly(globalTop),
@@ -9244,7 +9412,10 @@
       ClickOutside
     },
     inheritAttrs: false,
-    props: makeVOverlayProps(),
+    props: {
+      _disableGlobalStack: Boolean,
+      ...makeVOverlayProps()
+    },
     emits: {
       'click:outside': e => true,
       'update:modelValue': value => true,
@@ -9284,7 +9455,7 @@
         globalTop,
         localTop,
         stackStyles
-      } = useStack(isActive, vue.toRef(props, 'zIndex'));
+      } = useStack(isActive, vue.toRef(props, 'zIndex'), props._disableGlobalStack);
       const {
         activatorEl,
         activatorRef,
@@ -9299,6 +9470,9 @@
         dimensionStyles
       } = useDimension(props);
       const isMounted = useHydration();
+      const {
+        scopeId
+      } = useScopeId();
       vue.watch(() => props.disabled, v => {
         if (v) isActive.value = false;
       });
@@ -9399,7 +9573,7 @@
               top: convertToUnit(top.value)
             }],
             "ref": root
-          }, attrs), [vue.createVNode(Scrim, vue.mergeProps({
+          }, scopeId, attrs), [vue.createVNode(Scrim, vue.mergeProps({
             "color": scrimColor,
             "modelValue": isActive.value && !!props.scrim
           }, vue.toHandlers(scrimEvents.value)), null), vue.createVNode(MaybeTransition, {
@@ -9440,16 +9614,6 @@
     return pick(props, Object.keys(VOverlay.props));
   }
 
-  function useScopeId() {
-    const vm = getCurrentInstance('useScopeId');
-    const scopeId = vm.vnode.scopeId;
-    return {
-      scopeId: scopeId ? {
-        [scopeId]: ''
-      } : undefined
-    };
-  }
-
   // Types
 
   const VMenu = genericComponent()({
@@ -9566,6 +9730,10 @@
       default: '$vuetify.noDataText'
     },
     openOnClear: Boolean,
+    valueComparator: {
+      type: Function,
+      default: deepEqual
+    },
     ...makeItemsProps({
       itemChildren: false
     })
@@ -9607,7 +9775,7 @@
       });
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -9948,7 +10116,7 @@
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -10297,128 +10465,6 @@
 
   const VBannerText = createSimpleFunctional('v-banner-text');
 
-  // Utilities
-
-  // Types
-
-  const DisplaySymbol = Symbol.for('vuetify:display');
-  const defaultDisplayOptions = {
-    mobileBreakpoint: 'lg',
-    thresholds: {
-      xs: 0,
-      sm: 600,
-      md: 960,
-      lg: 1280,
-      xl: 1920,
-      xxl: 2560
-    }
-  };
-  const parseDisplayOptions = function () {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
-    return mergeDeep(defaultDisplayOptions, options);
-  };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
-  }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
-  }
-  function getPlatform() {
-    const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
-    function match(regexp) {
-      return Boolean(userAgent.match(regexp));
-    }
-    const android = match(/android/i);
-    const ios = match(/iphone|ipad|ipod/i);
-    const cordova = match(/cordova/i);
-    const electron = match(/electron/i);
-    const chrome = match(/chrome/i);
-    const edge = match(/edge/i);
-    const firefox = match(/firefox/i);
-    const opera = match(/opera/i);
-    const win = match(/win/i);
-    const mac = match(/mac/i);
-    const linux = match(/linux/i);
-    const ssr = match(/ssr/i);
-    return {
-      android,
-      ios,
-      cordova,
-      electron,
-      chrome,
-      edge,
-      firefox,
-      opera,
-      win,
-      mac,
-      linux,
-      touch: SUPPORTS_TOUCH,
-      ssr
-    };
-  }
-  function createDisplay(options, isHydrate) {
-    const {
-      thresholds,
-      mobileBreakpoint
-    } = parseDisplayOptions(options);
-    const height = vue.ref(getClientHeight(isHydrate));
-    const platform = getPlatform();
-    const state = vue.reactive({});
-    const width = vue.ref(getClientWidth(isHydrate));
-    function update() {
-      height.value = getClientHeight();
-      width.value = getClientWidth();
-    }
-
-    // eslint-disable-next-line max-statements
-    vue.watchEffect(() => {
-      const xs = width.value < thresholds.sm;
-      const sm = width.value < thresholds.md && !xs;
-      const md = width.value < thresholds.lg && !(sm || xs);
-      const lg = width.value < thresholds.xl && !(md || sm || xs);
-      const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
-      const xxl = width.value >= thresholds.xxl;
-      const name = xs ? 'xs' : sm ? 'sm' : md ? 'md' : lg ? 'lg' : xl ? 'xl' : 'xxl';
-      const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint];
-      const mobile = !platform.ssr ? width.value < breakpointValue : platform.android || platform.ios || platform.opera;
-      state.xs = xs;
-      state.sm = sm;
-      state.md = md;
-      state.lg = lg;
-      state.xl = xl;
-      state.xxl = xxl;
-      state.smAndUp = !xs;
-      state.mdAndUp = !(xs || sm);
-      state.lgAndUp = !(xs || sm || md);
-      state.xlAndUp = !(xs || sm || md || lg);
-      state.smAndDown = !(md || lg || xl || xxl);
-      state.mdAndDown = !(lg || xl || xxl);
-      state.lgAndDown = !(xl || xxl);
-      state.xlAndDown = !xxl;
-      state.name = name;
-      state.height = height.value;
-      state.width = width.value;
-      state.mobile = mobile;
-      state.mobileBreakpoint = mobileBreakpoint;
-      state.platform = platform;
-      state.thresholds = thresholds;
-    });
-    if (IN_BROWSER) {
-      window.addEventListener('resize', update, {
-        passive: true
-      });
-    }
-    return {
-      ...vue.toRefs(state),
-      update
-    };
-  }
-  function useDisplay() {
-    const display = vue.inject(DisplaySymbol);
-    if (!display) throw new Error('Could not find Vuetify display injection');
-    return display;
-  }
-
   // Types
 
   const VBanner = defineComponent({
@@ -10535,6 +10581,10 @@
         type: [Number, String],
         default: 56
       },
+      active: {
+        type: Boolean,
+        default: true
+      },
       ...makeBorderProps(),
       ...makeDensityProps(),
       ...makeElevationProps(),
@@ -10578,7 +10628,7 @@
         roundedClasses
       } = useRounded(props);
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
-      const isActive = useProxiedModel(props, 'modelValue');
+      const isActive = vue.toRef(props, 'active');
       const {
         layoutItemStyles
       } = useLayoutItem({
@@ -11752,13 +11802,13 @@
     let hsva = null;
     if (typeof color === 'string') {
       const hex = parseHex(color);
-      hsva = HexToHSVA(hex);
+      hsva = HexToHSV(hex);
     }
     if (typeof color === 'object') {
       if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBAtoHSVA(color);
+        hsva = RGBtoHSV(color);
       } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLAtoHSVA(color);
+        hsva = HSLtoHSV(color);
       } else if (has(color, ['h', 's', 'v'])) {
         hsva = color;
       }
@@ -11780,12 +11830,12 @@
   }
   function extractColor(color, input) {
     if (input == null || typeof input === 'string') {
-      const hex = HSVAtoHex(color);
+      const hex = HSVtoHex(color);
       if (color.a === 1) return hex.slice(0, 7);else return hex;
     }
     if (typeof input === 'object') {
       let converted;
-      if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color);else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color);else if (has(input, ['h', 's', 'v'])) converted = color;
+      if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color);else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color);else if (has(input, ['h', 's', 'v'])) converted = color;
       return stripAlpha(converted, !has(input, ['a']));
     }
     return color;
@@ -11832,14 +11882,19 @@
       label: 'A',
       max: 1,
       step: 0.01,
-      getValue: c => Math.round(c.a * 100) / 100,
+      getValue: _ref => {
+        let {
+          a
+        } = _ref;
+        return a ? Math.round(a * 100) / 100 : 1;
+      },
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
       })
     }],
-    to: HSVAtoRGBA,
-    from: RGBAtoHSVA
+    to: HSVtoRGB,
+    from: RGBtoHSV
   };
   const rgb = {
     ...rgba,
@@ -11881,14 +11936,19 @@
       label: 'A',
       max: 1,
       step: 0.01,
-      getValue: c => Math.round(c.a * 100) / 100,
+      getValue: _ref2 => {
+        let {
+          a
+        } = _ref2;
+        return a ? Math.round(a * 100) / 100 : 1;
+      },
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
       })
     }],
-    to: HSVAtoHSLA,
-    from: HSLAtoHSVA
+    to: HSVtoHSL,
+    from: HSLtoHSV
   };
   const hsl = {
     ...hsla,
@@ -11903,8 +11963,8 @@
       getValue: c => c,
       getColor: (c, v) => v
     }],
-    to: HSVAtoHex,
-    from: HexToHSVA
+    to: HSVtoHex,
+    from: HexToHSV
   };
   const hex = {
     ...hexa,
@@ -12670,7 +12730,7 @@
           "class": "v-color-picker-preview__dot"
         }, [vue.createVNode("div", {
           "style": {
-            background: HSVAtoCSS(props.color ?? nullColor)
+            background: HSVtoCSS(props.color ?? nullColor)
           }
         }, null)]), vue.createVNode("div", {
           "class": "v-color-picker-preview__sliders"
@@ -13211,7 +13271,7 @@
         "theme": props.theme,
         "class": ['v-color-picker'],
         "style": {
-          '--v-color-picker-color-hsv': HSVAtoCSS({
+          '--v-color-picker-color-hsv': HSVtoCSS({
             ...(currentColor.value ?? nullColor),
             a: 1
           })
@@ -13364,7 +13424,7 @@
       } = useFilter(props, items, vue.computed(() => isPristine.value ? undefined : search.value));
       const selections = vue.computed(() => {
         return model.value.map(v => {
-          return items.value.find(item => item.value === v.value) || v;
+          return items.value.find(item => props.valueComparator(item.value, v.value)) || v;
         });
       });
       const selected = vue.computed(() => selections.value.map(selection => selection.props.value));
@@ -15875,8 +15935,7 @@
               isReadonly
             } = _ref2;
             return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
-              "for": id.value,
-              "clickable": true
+              "for": id.value
             }, {
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
@@ -17787,7 +17846,8 @@
           "eager": true,
           "activatorProps": vue.mergeProps({
             'aria-describedby': id.value
-          }, props.activatorProps)
+          }, props.activatorProps),
+          "_disableGlobalStack": true
         }, scopeId), {
           activator: slots.activator,
           default: function () {
@@ -18170,7 +18230,7 @@
       locale
     };
   }
-  const version$1 = "3.0.3";
+  const version$1 = "3.0.5";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18191,7 +18251,7 @@
       ...options
     });
   };
-  const version = "3.0.3";
+  const version = "3.0.5";
   createVuetify.version = version;
 
   exports.components = components;