@vuetify/nightly 4.0.0-dev-20230427.0 → 4.0.0-dev-20230511.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230427.0
+* Vuetify v4.0.0-dev-20230511.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -171,6 +171,9 @@
   function keys(o) {
     return Object.keys(o);
   }
+  function has(obj, key) {
+    return key.every(k => obj.hasOwnProperty(k));
+  }
   function pick(obj, paths, exclude) {
     const found = Object.create(null);
     const rest = Object.create(null);
@@ -538,79 +541,15 @@
   }
 
   /* eslint-disable no-console */
-  // import Vuetify from '../framework'
-
-  function createMessage(message, vm, parent) {
-    // if (Vuetify.config.silent) return
-
-    if (parent) {
-      vm = {
-        __isVue: true,
-        $parent: parent,
-        $options: vm
-      };
-    }
-    if (vm) {
-      // Only show each message once per instance
-      vm.$_alreadyWarned = vm.$_alreadyWarned || [];
-      if (vm.$_alreadyWarned.includes(message)) return;
-      vm.$_alreadyWarned.push(message);
-    }
-    return `[Vuetify] ${message}` + (vm ? generateComponentTrace(vm) : '');
+  function consoleWarn(message) {
+    vue.warn(`Vuetify: ${message}`);
   }
-  function consoleWarn(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.warn(newMessage);
+  function consoleError(message) {
+    vue.warn(`Vuetify error: ${message}`);
   }
-  function consoleError(message, vm, parent) {
-    const newMessage = createMessage(message, vm, parent);
-    newMessage != null && console.error(newMessage);
-  }
-
-  /**
-   * Shamelessly stolen from vuejs/vue/blob/dev/src/core/util/debug.js
-   */
-
-  const classifyRE = /(?:^|[-_])(\w)/g;
-  const classify = str => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
-  function formatComponentName(vm, includeFile) {
-    if (vm.$root === vm) {
-      return '<Root>';
-    }
-    const options = typeof vm === 'function' && vm.cid != null ? vm.options : vm.__isVue ? vm.$options || vm.constructor.options : vm || {};
-    let name = options.name || options._componentTag;
-    const file = options.__file;
-    if (!name && file) {
-      const match = file.match(/([^/\\]+)\.vue$/);
-      name = match?.[1];
-    }
-    return (name ? `<${classify(name)}>` : `<Anonymous>`) + (file && includeFile !== false ? ` at ${file}` : '');
-  }
-  function generateComponentTrace(vm) {
-    if (vm.__isVue && vm.$parent) {
-      const tree = [];
-      let currentRecursiveSequence = 0;
-      while (vm) {
-        if (tree.length > 0) {
-          const last = tree[tree.length - 1];
-          if (last.constructor === vm.constructor) {
-            currentRecursiveSequence++;
-            vm = vm.$parent;
-            continue;
-          } else if (currentRecursiveSequence > 0) {
-            tree[tree.length - 1] = [last, currentRecursiveSequence];
-            currentRecursiveSequence = 0;
-          }
-        }
-        tree.push(vm);
-        vm = vm.$parent;
-      }
-      return '\n\nfound in\n\n' + tree.map((vm, i) => `${i === 0 ? '---> ' : ' '.repeat(5 + i * 2)}${Array.isArray(vm)
-    // eslint-disable-next-line sonarjs/no-nested-template-literals
-    ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)` : formatComponentName(vm)}`).join('\n');
-    } else {
-      return `\n\n(found in ${formatComponentName(vm)})`;
-    }
+  function deprecate(original, replacement) {
+    replacement = Array.isArray(replacement) ? replacement.slice(0, -1).map(s => `'${s}'`).join(', ') + ` or '${replacement.at(-1)}'` : `'${replacement}'`;
+    vue.warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
   }
 
   // For converting XYZ to sRGB
@@ -684,7 +623,46 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function parseColor$1(color) {
+  const cssColorRe = /^(?<fn>(?:rgb|hsl)a?)\((?<values>.+)\)/;
+  const mappers = {
+    rgb: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    rgba: (r, g, b, a) => ({
+      r,
+      g,
+      b,
+      a
+    }),
+    hsl: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsla: (h, s, l, a) => HSLtoRGB({
+      h,
+      s,
+      l,
+      a
+    }),
+    hsv: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    }),
+    hsva: (h, s, v, a) => HSVtoRGB({
+      h,
+      s,
+      v,
+      a
+    })
+  };
+  function parseColor(color) {
     if (typeof color === 'number') {
       if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
         // int can't have opacity
@@ -695,6 +673,22 @@
         g: (color & 0xFF00) >> 8,
         b: color & 0xFF
       };
+    } else if (typeof color === 'string' && cssColorRe.test(color)) {
+      const {
+        groups
+      } = color.match(cssColorRe);
+      const {
+        fn,
+        values
+      } = groups;
+      const realValues = values.split(/,\s*/).map(v => {
+        if (v.endsWith('%') && ['hsl', 'hsla', 'hsv', 'hsva'].includes(fn)) {
+          return parseFloat(v) / 100;
+        } else {
+          return parseFloat(v);
+        }
+      });
+      return mappers[fn](...realValues);
     } else if (typeof color === 'string') {
       let hex = color.startsWith('#') ? color.slice(1) : color;
       if ([3, 4].includes(hex.length)) {
@@ -707,9 +701,16 @@
         consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
       return HexToRGB(hex);
-    } else {
-      throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
+    } else if (typeof color === 'object') {
+      if (has(color, ['r', 'g', 'b'])) {
+        return color;
+      } else if (has(color, ['h', 's', 'l'])) {
+        return HSVtoRGB(HSLtoHSV(color));
+      } else if (has(color, ['h', 's', 'v'])) {
+        return HSVtoRGB(color);
+      }
     }
+    throw new TypeError(`Invalid color: ${color == null ? color : String(color) || color.constructor.name}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`);
   }
 
   /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
@@ -732,6 +733,9 @@
       a
     };
   }
+  function HSLtoRGB(hsla) {
+    return HSVtoRGB(HSLtoHSV(hsla));
+  }
 
   /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
   function RGBtoHSV(rgba) {
@@ -870,7 +874,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = parseColor$1(color);
+    const rgb = parseColor(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -1016,21 +1020,23 @@
   function propIsDefined(vnode, prop) {
     return typeof vnode.props?.[prop] !== 'undefined' || typeof vnode.props?.[toKebabCase(prop)] !== 'undefined';
   }
-  function useDefaults(props, name) {
+  function internalUseDefaults() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 ? arguments[1] : undefined;
     let defaults = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : injectDefaults();
     const vm = getCurrentInstance('useDefaults');
     name = name ?? vm.type.name ?? vm.type.__name;
     if (!name) {
       throw new Error('[Vuetify] Could not determine component name');
     }
-    const componentDefaults = vue.computed(() => defaults.value[props._as ?? name]);
+    const componentDefaults = vue.computed(() => defaults.value?.[props._as ?? name]);
     const _props = new Proxy(props, {
       get(target, prop) {
         const propValue = Reflect.get(target, prop);
         if (prop === 'class' || prop === 'style') {
           return [componentDefaults.value?.[prop], propValue].filter(v => v != null);
         } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {
-          return componentDefaults.value?.[prop] ?? defaults.value.global?.[prop] ?? propValue;
+          return componentDefaults.value?.[prop] ?? defaults.value?.global?.[prop] ?? propValue;
         }
         return propValue;
       }
@@ -1058,6 +1064,16 @@
       provideSubDefaults
     };
   }
+  function useDefaults() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let name = arguments.length > 1 ? arguments[1] : undefined;
+    const {
+      props: _props,
+      provideSubDefaults
+    } = internalUseDefaults(props, name);
+    provideSubDefaults();
+    return _props;
+  }
 
   // Utils
 
@@ -1085,7 +1101,7 @@
         const {
           props: _props,
           provideSubDefaults
-        } = useDefaults(props, props._as ?? options.name, defaults);
+        } = internalUseDefaults(props, props._as ?? options.name, defaults);
         const setupBindings = options._setup(_props, ctx);
         provideSubDefaults();
         return setupBindings;
@@ -1722,7 +1738,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor(color), amount));
               }
             }
           }
@@ -1730,9 +1746,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = parseColor$1(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
+          const colorVal = parseColor(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1864,14 +1880,14 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = parseColor$1(value);
+      const rgb = parseColor(value);
       variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
       }
     }
     for (const [key, value] of Object.entries(theme.variables)) {
-      const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
+      const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
       const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
       variables.push(`--v-${key}: ${rgb ?? value}`);
     }
@@ -2644,14 +2660,16 @@
       })
     };
   }
+  const makeVResponsiveProps = propsFactory({
+    aspectRatio: [String, Number],
+    contentClass: String,
+    inline: Boolean,
+    ...makeComponentProps(),
+    ...makeDimensionProps()
+  }, 'v-responsive');
   const VResponsive = genericComponent()({
     name: 'VResponsive',
-    props: {
-      aspectRatio: [String, Number],
-      contentClass: String,
-      ...makeComponentProps(),
-      ...makeDimensionProps()
-    },
+    props: makeVResponsiveProps(),
     setup(props, _ref) {
       let {
         slots
@@ -2663,7 +2681,9 @@
         dimensionStyles
       } = useDimension(props);
       useRender(() => vue.createVNode("div", {
-        "class": ['v-responsive', props.class],
+        "class": ['v-responsive', {
+          'v-responsive--inline': props.inline
+        }, props.class],
         "style": [dimensionStyles.value, props.style]
       }, [vue.createVNode("div", {
         "class": "v-responsive__sizer",
@@ -2759,7 +2779,6 @@
       intersect: Intersect
     },
     props: {
-      aspectRatio: [String, Number],
       alt: String,
       cover: Boolean,
       eager: Boolean,
@@ -2781,7 +2800,7 @@
         default: ''
       },
       srcset: String,
-      width: [String, Number],
+      ...makeVResponsiveProps(),
       ...makeComponentProps(),
       ...makeTransitionProps()
     },
@@ -2967,25 +2986,27 @@
           }
         });
       }
-      useRender(() => vue.withDirectives(vue.createVNode(VResponsive, {
-        "class": ['v-img', {
-          'v-img--booting': !isBooted.value
-        }, props.class],
-        "style": [{
-          width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
-        }, props.style],
-        "aspectRatio": aspectRatio.value,
-        "aria-label": props.alt,
-        "role": props.alt ? 'img' : undefined
-      }, {
-        additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
-        default: slots.default
-      }), [[vue.resolveDirective("intersect"), {
-        handler: init,
-        options: props.options
-      }, null, {
-        once: true
-      }]]));
+      useRender(() => {
+        const [responsiveProps] = VResponsive.filterProps(props);
+        return vue.withDirectives(vue.createVNode(VResponsive, vue.mergeProps({
+          "class": ['v-img', {
+            'v-img--booting': !isBooted.value
+          }, props.class],
+          "style": props.style
+        }, responsiveProps, {
+          "aspectRatio": aspectRatio.value,
+          "aria-label": props.alt,
+          "role": props.alt ? 'img' : undefined
+        }), {
+          additional: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(__image, null, null), vue.createVNode(__preloadImage, null, null), vue.createVNode(__gradient, null, null), vue.createVNode(__placeholder, null, null), vue.createVNode(__error, null, null)]),
+          default: slots.default
+        }), [[vue.resolveDirective("intersect"), {
+          handler: init,
+          options: props.options
+        }, null, {
+          once: true
+        }]]);
+      });
       return {
         currentSrc,
         image,
@@ -3332,14 +3353,13 @@
       type: String
     },
     scrollThreshold: {
-      type: [String, Number]
+      type: [String, Number],
+      default: 300
     }
   }, 'scroll');
   function useScroll(props) {
     let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const {
-      thresholdMetCallback,
-      scrollThreshold,
       canScroll
     } = args;
     let previousScroll = 0;
@@ -3349,8 +3369,16 @@
     const currentThreshold = vue.ref(0);
     const isScrollActive = vue.ref(false);
     const isScrollingUp = vue.ref(false);
-    const computedScrollThreshold = vue.computed(() => {
-      return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+    const scrollThreshold = vue.computed(() => {
+      return Number(props.scrollThreshold);
+    });
+
+    /**
+     * 1: at top
+     * 0: at threshold
+     */
+    const scrollRatio = vue.computed(() => {
+      return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
     });
     const onScroll = () => {
       const targetEl = target.value;
@@ -3358,7 +3386,7 @@
       previousScroll = currentScroll.value;
       currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
       isScrollingUp.value = currentScroll.value < previousScroll;
-      currentThreshold.value = Math.abs(currentScroll.value - computedScrollThreshold.value);
+      currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
     };
     vue.watch(isScrollingUp, () => {
       savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3370,7 +3398,7 @@
       vue.watch(() => props.scrollTarget, scrollTarget => {
         const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
         if (!newTarget) {
-          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, vue.getCurrentInstance());
+          consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
           return;
         }
         if (newTarget === target.value) return;
@@ -3386,15 +3414,6 @@
     vue.onBeforeUnmount(() => {
       target.value?.removeEventListener('scroll', onScroll);
     });
-    thresholdMetCallback && vue.watch(() => Math.abs(currentScroll.value - savedScroll.value) > computedScrollThreshold.value, thresholdMet => {
-      thresholdMet && thresholdMetCallback({
-        currentThreshold: currentThreshold.value,
-        isScrollingUp: isScrollingUp.value,
-        savedScroll
-      });
-    }, {
-      immediate: true
-    });
 
     // Do we need this? If yes - seems that
     // there's no need to expose onScroll
@@ -3402,10 +3421,11 @@
       immediate: true
     });
     return {
-      computedScrollThreshold,
+      scrollThreshold,
       currentScroll,
       currentThreshold,
       isScrollActive,
+      scrollRatio,
       // required only for testing
       // probably can be removed
       // later (2 chars chlng)
@@ -3488,15 +3508,14 @@
       });
       const {
         currentScroll,
-        currentThreshold,
-        computedScrollThreshold,
-        isScrollingUp
+        scrollThreshold,
+        isScrollingUp,
+        scrollRatio
       } = useScroll(props, {
         canScroll
       });
-      const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
-      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
-      const scrollRatio = vue.computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+      const isCollapsed = vue.computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+      const isFlat = vue.computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
       const opacity = vue.computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
       const height = vue.computed(() => {
         if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
@@ -3505,15 +3524,12 @@
         return height + extensionHeight;
       });
       function setActive() {
-        const val = currentScroll.value;
         if (scrollBehavior.value.hide) {
           if (scrollBehavior.value.inverted) {
-            isActive.value = val > computedScrollThreshold.value;
+            isActive.value = currentScroll.value > scrollThreshold.value;
           } else {
-            isActive.value = isScrollingUp.value || val < computedScrollThreshold.value;
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
           }
-        } else if (scrollBehavior.value.inverted) {
-          isActive.value = currentScroll.value === 0;
         } else {
           isActive.value = true;
         }
@@ -5053,7 +5069,7 @@
     ...makeVariantProps({
       variant: 'elevated'
     })
-  }, 'VBtn');
+  }, 'v-btn');
   const VBtn = genericComponent()({
     name: 'VBtn',
     directives: {
@@ -5123,6 +5139,11 @@
         if (props.value === undefined) return undefined;
         return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
       });
+      function onClick(e) {
+        if (isDisabled.value) return;
+        link.navigate?.(e);
+        group?.toggle();
+      }
       useSelectLink(link, group?.select);
       useRender(() => {
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -5145,11 +5166,7 @@
           "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
           "disabled": isDisabled.value || undefined,
           "href": link.href.value,
-          "onClick": e => {
-            if (isDisabled.value) return;
-            link.navigate?.(e);
-            group?.toggle();
-          },
+          "onClick": onClick,
           "value": valueAttr.value
         }, {
           default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && vue.createVNode("span", {
@@ -5215,22 +5232,17 @@
 
   const VAppBarNavIcon = genericComponent()({
     name: 'VAppBarNavIcon',
-    props: {
-      icon: {
-        type: IconValue,
-        default: '$menu'
-      },
-      ...makeComponentProps()
-    },
+    props: makeVBtnProps({
+      icon: '$menu',
+      variant: 'text'
+    }),
     setup(props, _ref) {
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VBtn, {
-        "class": ['v-app-bar-nav-icon', props.class],
-        "icon": props.icon,
-        "style": props.style
-      }, slots));
+      useRender(() => vue.createVNode(VBtn, vue.mergeProps(props, {
+        "class": ['v-app-bar-nav-icon']
+      }), slots));
       return {};
     }
   });
@@ -6433,7 +6445,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
-      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+      const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -6869,7 +6881,6 @@
         "class": ['v-checkbox-btn', props.class],
         "style": props.style,
         "type": "checkbox",
-        "inline": true,
         "falseIcon": falseIcon.value,
         "trueIcon": trueIcon.value,
         "aria-checked": props.indeterminate ? 'mixed' : undefined
@@ -7824,7 +7835,9 @@
     }
   });
   const makeVListGroupProps = propsFactory({
+    /* @deprecated */
     activeColor: String,
+    baseColor: String,
     color: String,
     collapseIcon: {
       type: IconValue,
@@ -7875,6 +7888,7 @@
         VListItem: {
           active: isOpen.value,
           activeColor: props.activeColor,
+          baseColor: props.baseColor,
           color: props.color,
           prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
           appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
@@ -7934,9 +7948,11 @@
         default: undefined
       },
       activeClass: String,
+      /* @deprecated */
       activeColor: String,
       appendAvatar: String,
       appendIcon: IconValue,
+      baseColor: String,
       disabled: Boolean,
       lines: String,
       link: {
@@ -7993,8 +8009,9 @@
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
+      const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
-        color: isActive.value ? props.activeColor ?? props.color : props.color,
+        color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant
       }));
       vue.watch(() => link.isActive?.value, val => {
@@ -8051,7 +8068,6 @@
       }
       useRender(() => {
         const Tag = isLink.value ? 'a' : props.tag;
-        const hasColor = !list || isSelected.value || isActive.value;
         const hasTitle = slots.title || props.title;
         const hasSubtitle = slots.subtitle || props.subtitle;
         const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
@@ -8059,6 +8075,9 @@
         const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
         const hasPrepend = !!(hasPrependMedia || slots.prepend);
         list?.updateHasPrepend(hasPrepend);
+        if (props.activeColor) {
+          deprecate('active-color', ['color', 'base-color']);
+        }
         return vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-list-item', {
             'v-list-item--active': isActive.value,
@@ -8067,8 +8086,8 @@
             'v-list-item--nav': props.nav,
             'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
             [`${props.activeClass}`]: props.activeClass && isActive.value
-          }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
-          "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, props.style],
+          }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
+          "style": [colorStyles.value, dimensionStyles.value, props.style],
           "href": link.href.value,
           "tabindex": isClickable.value ? 0 : undefined,
           "onClick": onClick,
@@ -8387,6 +8406,8 @@
   const VList = genericComponent()({
     name: 'VList',
     props: {
+      baseColor: String,
+      /* @deprecated */
       activeColor: String,
       activeClass: String,
       bgColor: String,
@@ -8458,16 +8479,19 @@
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
       const activeColor = vue.toRef(props, 'activeColor');
+      const baseColor = vue.toRef(props, 'baseColor');
       const color = vue.toRef(props, 'color');
       createList();
       provideDefaults({
         VListGroup: {
           activeColor,
+          baseColor,
           color
         },
         VListItem: {
           activeClass: vue.toRef(props, 'activeClass'),
           activeColor,
+          baseColor,
           color,
           density: vue.toRef(props, 'density'),
           disabled: vue.toRef(props, 'disabled'),
@@ -9488,14 +9512,14 @@
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultDisplayOptions;
     return mergeDeep(defaultDisplayOptions, options);
   };
-  function getClientWidth(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerWidth : 0;
+  function getClientWidth(ssr) {
+    return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === 'object' && ssr.clientWidth || 0;
   }
-  function getClientHeight(isHydrate) {
-    return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
+  function getClientHeight(ssr) {
+    return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === 'object' && ssr.clientHeight || 0;
   }
-  function getPlatform(isHydrate) {
-    const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
+  function getPlatform(ssr) {
+    const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : 'ssr';
     function match(regexp) {
       return Boolean(userAgent.match(regexp));
     }
@@ -10368,11 +10392,13 @@
                     let {
                       isSelected
                     } = _ref2;
-                    return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                    return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                       "modelValue": isSelected,
                       "ripple": false,
                       "tabindex": "-1"
-                    }, null) : undefined;
+                    }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                      "icon": item.props.prependIcon
+                    }, null)]);
                   }
                 });
               }), slots['append-item']?.()]
@@ -10385,6 +10411,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -10807,11 +10837,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10826,6 +10858,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -12426,27 +12462,6 @@
 
   // Types
 
-  function has(obj, key) {
-    return key.every(k => obj.hasOwnProperty(k));
-  }
-  function parseColor(color) {
-    if (!color) return null;
-    let hsva = null;
-    if (typeof color === 'string') {
-      const hex = parseHex(color);
-      hsva = HexToHSV(hex);
-    }
-    if (typeof color === 'object') {
-      if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBtoHSV(color);
-      } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLtoHSV(color);
-      } else if (has(color, ['h', 's', 'v'])) {
-        hsva = color;
-      }
-    }
-    return hsva;
-  }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
       const {
@@ -13788,13 +13803,15 @@
       }, [vue.createVNode("div", null, [props.swatches.map(swatch => vue.createVNode("div", {
         "class": "v-color-picker-swatches__swatch"
       }, [swatch.map(color => {
-        const hsva = parseColor(color);
+        const rgba = parseColor(color);
+        const hsva = RGBtoHSV(rgba);
+        const background = RGBtoCSS(rgba);
         return vue.createVNode("div", {
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
         }, [vue.createVNode("div", {
           "style": {
-            background: color
+            background
           }
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
@@ -13854,8 +13871,13 @@
       const mode = useProxiedModel(props, 'mode');
       const lastPickedColor = vue.ref(null);
       const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
-        let c = parseColor(v);
-        if (!c) return null;
+        let c;
+        try {
+          c = RGBtoHSV(parseColor(v));
+        } catch (err) {
+          consoleWarn(err);
+          return null;
+        }
         if (lastPickedColor.value) {
           c = {
             ...c,
@@ -14252,11 +14274,13 @@
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
+                  return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && vue.createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 },
                 title: () => {
                   return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14271,6 +14295,10 @@
             }
             const slotProps = {
               'onClick:close': onChipClose,
+              onMousedown(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               modelValue: true,
               'onUpdate:modelValue': undefined
             };
@@ -14734,6 +14762,7 @@
       const vInputRef = vue.ref();
       const vFieldRef = vue.ref();
       const inputRef = vue.ref();
+      const isActive = vue.computed(() => isFocused.value || props.active);
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -14802,7 +14831,7 @@
               "onClick:appendInner": props['onClick:appendInner']
             }, fieldProps, {
               "id": id.value,
-              "active": isDirty.value || isFocused.value,
+              "active": isActive.value || isDirty.value,
               "dirty": isDirty.value,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
@@ -15968,7 +15997,6 @@
       });
       const {
         layoutItemStyles,
-        layoutRect,
         layoutItemScrimStyles
       } = useLayoutItem({
         id: props.name,
@@ -15998,12 +16026,6 @@
           opacity: dragProgress.value * 0.2,
           transition: 'none'
         } : undefined),
-        ...(layoutRect.value ? {
-          left: convertToUnit(layoutRect.value.left),
-          right: convertToUnit(layoutRect.value.right),
-          top: convertToUnit(layoutRect.value.top),
-          bottom: convertToUnit(layoutRect.value.bottom)
-        } : undefined),
         ...layoutItemScrimStyles.value
       }));
       provideDefaults({
@@ -17967,7 +17989,7 @@
       const vFieldRef = vue.ref();
       const controlHeight = vue.ref('');
       const textareaRef = vue.ref();
-      const isActive = vue.computed(() => isFocused.value || props.persistentPlaceholder);
+      const isActive = vue.computed(() => props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
         if (textareaRef.value !== document.activeElement) {
           textareaRef.value?.focus();
@@ -19658,6 +19680,11 @@
       if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
       return Math.ceil(itemsLength.value / itemsPerPage.value);
     });
+    vue.watchEffect(() => {
+      if (page.value > pageCount.value) {
+        page.value = pageCount.value;
+      }
+    });
     function setItemsPerPage(value) {
       itemsPerPage.value = value;
       page.value = 1;
@@ -19921,6 +19948,11 @@
     width: [String, Number],
     fixedHeader: Boolean,
     fixedFooter: Boolean,
+    loading: [Boolean, String],
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText'
+    },
     'onClick:row': Function,
     search: String
   }, 'v-data-table');
@@ -20028,12 +20060,15 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
       useRender(() => vue.createVNode(VTable, {
         "class": ['v-data-table', {
-          'v-data-table--show-select': props.showSelect
+          'v-data-table--show-select': props.showSelect,
+          'v-data-table--loading': props.loading
         }],
         "fixedHeader": props.fixedHeader,
         "fixedFooter": props.fixedFooter,
@@ -20045,6 +20080,7 @@
           columns
         }), vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
+          "loading": props.loading,
           "multiSort": props.multiSort
         }, slots)]), slots.thead?.(), vue.createVNode("tbody", null, [slots.body ? slots.body() : vue.createVNode(VDataTableRows, {
           "items": paginatedItems.value,
@@ -20234,11 +20270,15 @@
       provideDefaults({
         VDataTableRows: {
           hideNoData: vue.toRef(props, 'hideNoData'),
-          noDataText: vue.toRef(props, 'noDataText')
+          noDataText: vue.toRef(props, 'noDataText'),
+          loading: vue.toRef(props, 'loading'),
+          loadingText: vue.toRef(props, 'loadingText')
         }
       });
       useRender(() => vue.createVNode(VTable, {
-        "class": "v-data-table",
+        "class": ['v-data-table', {
+          'v-data-table--loading': props.loading
+        }],
         "style": {
           '--v-table-row-height': convertToUnit(itemHeight.value)
         },
@@ -20257,6 +20297,7 @@
           }
         }, [vue.createVNode("table", null, [vue.createVNode("thead", null, [vue.createVNode(VDataTableHeaders, {
           "sticky": props.fixedHeader,
+          "loading": props.loading,
           "multiSort": props.multiSort
         }, slots)]), vue.createVNode("tbody", null, [vue.createVNode("tr", {
           "style": {
@@ -20295,11 +20336,6 @@
     name: 'VDataTableServer',
     props: {
       color: String,
-      loading: [Boolean, String],
-      loadingText: {
-        type: String,
-        default: '$vuetify.dataIterator.loadingText'
-      },
       itemsLength: {
         type: [Number, String],
         required: true
@@ -21533,7 +21569,7 @@
       date
     };
   }
-  const version$1 = "4.0.0-dev-20230427.0";
+  const version$1 = "4.0.0-dev-20230511.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21545,7 +21581,7 @@
     }
   }
 
-  const version = "4.0.0-dev-20230427.0";
+  const version = "4.0.0-dev-20230511.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};