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

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v4.0.0-dev-20230427.0
+* Vuetify v4.0.0-dev-20230511.0
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, onScopeDispose, effectScope, shallowRef, inject as inject$1, unref, provide, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, warn, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
+import { ref, onBeforeUnmount, watch, readonly, reactive, computed, watchEffect, toRefs, capitalize, warn, onScopeDispose, effectScope, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, Fragment, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, cloneVNode, toHandlers, Teleport, createTextVNode, onBeforeUpdate, vModelText, onUpdated, withModifiers } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -167,6 +167,9 @@ const keyValues = Object.freeze({
 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);
@@ -534,79 +537,15 @@ function animate(el, keyframes, options) {
 }
 
 /* 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) {
+  warn(`Vuetify: ${message}`);
 }
-function consoleWarn(message, vm, parent) {
-  const newMessage = createMessage(message, vm, parent);
-  newMessage != null && console.warn(newMessage);
+function consoleError(message) {
+  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}'`;
+  warn(`[Vuetify UPGRADE] '${original}' is deprecated, use ${replacement} instead.`);
 }
 
 // For converting XYZ to sRGB
@@ -680,7 +619,46 @@ function toXYZ(lab) {
 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
@@ -691,6 +669,22 @@ function parseColor$1(color) {
       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)) {
@@ -703,9 +697,16 @@ function parseColor$1(color) {
       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 */
@@ -728,6 +729,9 @@ function HSVtoRGB(hsva) {
     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) {
@@ -866,7 +870,7 @@ function darken(value, amount) {
  * @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];
 }
 
@@ -1012,21 +1016,23 @@ function provideDefaults(defaults, options) {
 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 = computed(() => defaults.value[props._as ?? name]);
+  const componentDefaults = 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;
     }
@@ -1054,6 +1060,16 @@ function useDefaults(props, name) {
     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
 
@@ -1081,7 +1097,7 @@ function defineComponent(options) {
       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;
@@ -1718,7 +1734,7 @@ function createTheme(options) {
           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));
             }
           }
         }
@@ -1726,9 +1742,9 @@ function createTheme(options) {
       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)))
@@ -1860,14 +1876,14 @@ function genCssVariables(theme) {
   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}`);
   }
@@ -2640,14 +2656,16 @@ function useAspectStyles(props) {
     })
   };
 }
+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
@@ -2659,7 +2677,9 @@ const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => createVNode("div", {
-      "class": ['v-responsive', props.class],
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
       "style": [dimensionStyles.value, props.style]
     }, [createVNode("div", {
       "class": "v-responsive__sizer",
@@ -2755,7 +2775,6 @@ const VImg = genericComponent()({
     intersect: Intersect
   },
   props: {
-    aspectRatio: [String, Number],
     alt: String,
     cover: Boolean,
     eager: Boolean,
@@ -2777,7 +2796,7 @@ const VImg = genericComponent()({
       default: ''
     },
     srcset: String,
-    width: [String, Number],
+    ...makeVResponsiveProps(),
     ...makeComponentProps(),
     ...makeTransitionProps()
   },
@@ -2963,25 +2982,27 @@ const VImg = genericComponent()({
         }
       });
     }
-    useRender(() => withDirectives(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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
-      default: slots.default
-    }), [[resolveDirective("intersect"), {
-      handler: init,
-      options: props.options
-    }, null, {
-      once: true
-    }]]));
+    useRender(() => {
+      const [responsiveProps] = VResponsive.filterProps(props);
+      return withDirectives(createVNode(VResponsive, 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: () => createVNode(Fragment, null, [createVNode(__image, null, null), createVNode(__preloadImage, null, null), createVNode(__gradient, null, null), createVNode(__placeholder, null, null), createVNode(__error, null, null)]),
+        default: slots.default
+      }), [[resolveDirective("intersect"), {
+        handler: init,
+        options: props.options
+      }, null, {
+        once: true
+      }]]);
+    });
     return {
       currentSrc,
       image,
@@ -3328,14 +3349,13 @@ const makeScrollProps = propsFactory({
     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;
@@ -3345,8 +3365,16 @@ function useScroll(props) {
   const currentThreshold = ref(0);
   const isScrollActive = ref(false);
   const isScrollingUp = ref(false);
-  const computedScrollThreshold = computed(() => {
-    return Number(props.scrollThreshold ?? scrollThreshold ?? 300);
+  const scrollThreshold = computed(() => {
+    return Number(props.scrollThreshold);
+  });
+
+  /**
+   * 1: at top
+   * 0: at threshold
+   */
+  const scrollRatio = computed(() => {
+    return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
   });
   const onScroll = () => {
     const targetEl = target.value;
@@ -3354,7 +3382,7 @@ function useScroll(props) {
     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);
   };
   watch(isScrollingUp, () => {
     savedScroll.value = savedScroll.value || currentScroll.value;
@@ -3366,7 +3394,7 @@ function useScroll(props) {
     watch(() => props.scrollTarget, scrollTarget => {
       const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
       if (!newTarget) {
-        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`, getCurrentInstance$1());
+        consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
         return;
       }
       if (newTarget === target.value) return;
@@ -3382,15 +3410,6 @@ function useScroll(props) {
   onBeforeUnmount(() => {
     target.value?.removeEventListener('scroll', onScroll);
   });
-  thresholdMetCallback && 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
@@ -3398,10 +3417,11 @@ function useScroll(props) {
     immediate: true
   });
   return {
-    computedScrollThreshold,
+    scrollThreshold,
     currentScroll,
     currentThreshold,
     isScrollActive,
+    scrollRatio,
     // required only for testing
     // probably can be removed
     // later (2 chars chlng)
@@ -3484,15 +3504,14 @@ const VAppBar = genericComponent()({
     });
     const {
       currentScroll,
-      currentThreshold,
-      computedScrollThreshold,
-      isScrollingUp
+      scrollThreshold,
+      isScrollingUp,
+      scrollRatio
     } = useScroll(props, {
       canScroll
     });
-    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0));
-    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0));
-    const scrollRatio = computed(() => Math.min((currentThreshold.value - currentScroll.value) / currentThreshold.value || 1, 1));
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
     const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
     const height = computed(() => {
       if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
@@ -3501,15 +3520,12 @@ const VAppBar = genericComponent()({
       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;
       }
@@ -5049,7 +5065,7 @@ const makeVBtnProps = propsFactory({
   ...makeVariantProps({
     variant: 'elevated'
   })
-}, 'VBtn');
+}, 'v-btn');
 const VBtn = genericComponent()({
   name: 'VBtn',
   directives: {
@@ -5119,6 +5135,11 @@ const VBtn = genericComponent()({
       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;
@@ -5141,11 +5162,7 @@ const VBtn = genericComponent()({
         "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 && createVNode("span", {
@@ -5211,22 +5228,17 @@ const VBtn = genericComponent()({
 
 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(() => createVNode(VBtn, {
-      "class": ['v-app-bar-nav-icon', props.class],
-      "icon": props.icon,
-      "style": props.style
-    }, slots));
+    useRender(() => createVNode(VBtn, mergeProps(props, {
+      "class": ['v-app-bar-nav-icon']
+    }), slots));
     return {};
   }
 });
@@ -6429,7 +6441,7 @@ const VTextField = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
-    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value);
+    const isActive = computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -6865,7 +6877,6 @@ const VCheckboxBtn = genericComponent()({
       "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
@@ -7820,7 +7831,9 @@ const VListGroupActivator = defineComponent({
   }
 });
 const makeVListGroupProps = propsFactory({
+  /* @deprecated */
   activeColor: String,
+  baseColor: String,
   color: String,
   collapseIcon: {
     type: IconValue,
@@ -7871,6 +7884,7 @@ const VListGroup = genericComponent()({
       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,
@@ -7930,9 +7944,11 @@ const VListItem = genericComponent()({
       default: undefined
     },
     activeClass: String,
+    /* @deprecated */
     activeColor: String,
     appendAvatar: String,
     appendIcon: IconValue,
+    baseColor: String,
     disabled: Boolean,
     lines: String,
     link: {
@@ -7989,8 +8005,9 @@ const VListItem = genericComponent()({
     const isLink = computed(() => props.link !== false && link.isLink.value);
     const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
     const roundedProps = computed(() => props.rounded || props.nav);
+    const color = computed(() => props.color ?? props.activeColor);
     const variantProps = computed(() => ({
-      color: isActive.value ? props.activeColor ?? props.color : props.color,
+      color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
       variant: props.variant
     }));
     watch(() => link.isActive?.value, val => {
@@ -8047,7 +8064,6 @@ const VListItem = genericComponent()({
     }
     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);
@@ -8055,6 +8071,9 @@ const VListItem = genericComponent()({
       const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
       const hasPrepend = !!(hasPrependMedia || slots.prepend);
       list?.updateHasPrepend(hasPrepend);
+      if (props.activeColor) {
+        deprecate('active-color', ['color', 'base-color']);
+      }
       return withDirectives(createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
@@ -8063,8 +8082,8 @@ const VListItem = genericComponent()({
           '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,
@@ -8383,6 +8402,8 @@ function useListItems(props) {
 const VList = genericComponent()({
   name: 'VList',
   props: {
+    baseColor: String,
+    /* @deprecated */
     activeColor: String,
     activeClass: String,
     bgColor: String,
@@ -8454,16 +8475,19 @@ const VList = genericComponent()({
     } = useNested(props);
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
     const activeColor = toRef(props, 'activeColor');
+    const baseColor = toRef(props, 'baseColor');
     const color = toRef(props, 'color');
     createList();
     provideDefaults({
       VListGroup: {
         activeColor,
+        baseColor,
         color
       },
       VListItem: {
         activeClass: toRef(props, 'activeClass'),
         activeColor,
+        baseColor,
         color,
         density: toRef(props, 'density'),
         disabled: toRef(props, 'disabled'),
@@ -9484,14 +9508,14 @@ 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 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));
   }
@@ -10364,11 +10388,13 @@ const VSelect = genericComponent()({
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                  return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 }
               });
             }), slots['append-item']?.()]
@@ -10381,6 +10407,10 @@ const VSelect = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -10803,11 +10833,13 @@ const VAutocomplete = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult$1(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -10822,6 +10854,10 @@ const VAutocomplete = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -12422,27 +12458,6 @@ const VColorPickerCanvas = defineComponent({
 
 // 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 {
@@ -13784,13 +13799,15 @@ const VColorPickerSwatches = defineComponent({
     }, [createVNode("div", null, [props.swatches.map(swatch => 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 createVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
       }, [createVNode("div", {
         "style": {
-          background: color
+          background
         }
       }, [props.color && deepEqual(props.color, hsva) ? createVNode(VIcon, {
         "size": "x-small",
@@ -13850,8 +13867,13 @@ const VColorPicker = defineComponent({
     const mode = useProxiedModel(props, 'mode');
     const lastPickedColor = 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,
@@ -14248,11 +14270,13 @@ const VCombobox = genericComponent()({
                 let {
                   isSelected
                 } = _ref2;
-                return props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
+                return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                   "modelValue": isSelected,
                   "ripple": false,
                   "tabindex": "-1"
-                }, null) : undefined;
+                }, null) : undefined, item.props.prependIcon && createVNode(VIcon, {
+                  "icon": item.props.prependIcon
+                }, null)]);
               },
               title: () => {
                 return isPristine.value ? item.title : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0);
@@ -14267,6 +14291,10 @@ const VCombobox = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
@@ -14730,6 +14758,7 @@ const VFileInput = genericComponent()({
     const vInputRef = ref();
     const vFieldRef = ref();
     const inputRef = ref();
+    const isActive = computed(() => isFocused.value || props.active);
     function onFocus() {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus();
@@ -14798,7 +14827,7 @@ const VFileInput = genericComponent()({
             "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,
@@ -15964,7 +15993,6 @@ const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -15994,12 +16022,6 @@ const VNavigationDrawer = genericComponent()({
         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({
@@ -17963,7 +17985,7 @@ const VTextarea = genericComponent()({
     const vFieldRef = ref();
     const controlHeight = ref('');
     const textareaRef = ref();
-    const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
+    const isActive = computed(() => props.persistentPlaceholder || isFocused.value || props.active);
     function onFocus() {
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus();
@@ -19654,6 +19676,11 @@ function providePagination(options) {
     if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
     return Math.ceil(itemsLength.value / itemsPerPage.value);
   });
+  watchEffect(() => {
+    if (page.value > pageCount.value) {
+      page.value = pageCount.value;
+    }
+  });
   function setItemsPerPage(value) {
     itemsPerPage.value = value;
     page.value = 1;
@@ -19917,6 +19944,11 @@ const makeVDataTableProps = propsFactory({
   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');
@@ -20024,12 +20056,15 @@ const VDataTable = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
     useRender(() => 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,
@@ -20041,6 +20076,7 @@ const VDataTable = genericComponent()({
         columns
       }), createVNode("thead", null, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
+        "loading": props.loading,
         "multiSort": props.multiSort
       }, slots)]), slots.thead?.(), createVNode("tbody", null, [slots.body ? slots.body() : createVNode(VDataTableRows, {
         "items": paginatedItems.value,
@@ -20230,11 +20266,15 @@ const VDataTableVirtual = genericComponent()({
     provideDefaults({
       VDataTableRows: {
         hideNoData: toRef(props, 'hideNoData'),
-        noDataText: toRef(props, 'noDataText')
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText')
       }
     });
     useRender(() => createVNode(VTable, {
-      "class": "v-data-table",
+      "class": ['v-data-table', {
+        'v-data-table--loading': props.loading
+      }],
       "style": {
         '--v-table-row-height': convertToUnit(itemHeight.value)
       },
@@ -20253,6 +20293,7 @@ const VDataTableVirtual = genericComponent()({
         }
       }, [createVNode("table", null, [createVNode("thead", null, [createVNode(VDataTableHeaders, {
         "sticky": props.fixedHeader,
+        "loading": props.loading,
         "multiSort": props.multiSort
       }, slots)]), createVNode("tbody", null, [createVNode("tr", {
         "style": {
@@ -20291,11 +20332,6 @@ const VDataTableServer = genericComponent()({
   name: 'VDataTableServer',
   props: {
     color: String,
-    loading: [Boolean, String],
-    loadingText: {
-      type: String,
-      default: '$vuetify.dataIterator.loadingText'
-    },
     itemsLength: {
       type: [Number, String],
       required: true
@@ -21529,7 +21565,7 @@ function createVuetify$1() {
     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
@@ -21541,7 +21577,7 @@ function inject(key) {
   }
 }
 
-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] : {};