@vuetify/nightly 3.2.0-dev-20230214.0 → 3.2.0-dev-20230309.0

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.2.0-dev-20230214.0
+* Vuetify v3.2.0-dev-20230309.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -780,11 +780,12 @@ function RGBtoHex(_ref2) {
     b,
     a
   } = _ref2;
-  return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
+  return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : ''].join('')}`;
 }
 function HexToRGB(hex) {
+  hex = parseHex(hex);
   let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
-  a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
+  a = a === undefined ? a : a / 255;
   return {
     r,
     g,
@@ -807,9 +808,7 @@ function parseHex(hex) {
   if (hex.length === 3 || hex.length === 4) {
     hex = hex.split('').map(x => x + x).join('');
   }
-  if (hex.length === 6) {
-    hex = padEnd(hex, 8, 'F');
-  } else {
+  if (hex.length !== 6) {
     hex = padEnd(padEnd(hex, 6), 8, 'F');
   }
   return hex;
@@ -960,7 +959,9 @@ function provideDefaults(defaults, options) {
     if (reset || root) {
       const len = Number(reset || Infinity);
       for (let i = 0; i <= len; i++) {
-        if (!properties.prev) break;
+        if (!properties || !('prev' in properties)) {
+          break;
+        }
         properties = properties.prev;
       }
       return properties;
@@ -1666,17 +1667,9 @@ function createTheme(options) {
     if (current.value.dark) {
       createCssClass(lines, ':root', ['color-scheme: dark']);
     }
+    createCssClass(lines, ':root', genCssVariables(current.value));
     for (const [themeName, theme] of Object.entries(computedThemes.value)) {
-      const {
-        variables,
-        dark
-      } = 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('#') ? parseColor$1(value) : undefined;
-        const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
-        return `--v-${key}: ${rgb ?? value}`;
-      })]);
+      createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)]);
     }
     const bgLines = [];
     const fgLines = [];
@@ -1693,22 +1686,30 @@ function createTheme(options) {
     lines.push(...bgLines, ...fgLines);
     return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
   });
+  function getHead() {
+    return {
+      style: [{
+        children: styles.value,
+        id: 'vuetify-theme-stylesheet',
+        nonce: parsedOptions.cspNonce || false
+      }]
+    };
+  }
   function install(app) {
     const head = app._context.provides.usehead;
     if (head) {
-      head.addHeadObjs(computed(() => {
-        const style = {
-          children: styles.value,
-          type: 'text/css',
-          id: 'vuetify-theme-stylesheet'
-        };
-        if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
-        return {
-          style: [style]
-        };
-      }));
-      if (IN_BROWSER) {
-        watchEffect(() => head.updateDOM());
+      if (head.push) {
+        const entry = head.push(getHead);
+        watch(styles, () => {
+          entry.patch(getHead);
+        });
+      } else {
+        if (IN_BROWSER) {
+          head.addHeadObjs(computed(getHead));
+          watchEffect(() => head.updateDOM());
+        } else {
+          head.addHeadObjs(getHead());
+        }
       }
     } else {
       let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
@@ -1781,6 +1782,11 @@ function genCssVariables(theme) {
       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 rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
+    variables.push(`--v-${key}: ${rgb ?? value}`);
+  }
   return variables;
 }
 
@@ -1810,7 +1816,7 @@ function useProxiedModel(props, prop, defaultValue) {
   });
   const model = computed({
     get() {
-      return transformIn(toRaw(isControlled.value ? props[prop] : internal.value));
+      return transformIn(isControlled.value ? props[prop] : internal.value);
     },
     set(internalValue) {
       const newValue = transformOut(internalValue);
@@ -2010,7 +2016,7 @@ const defaultRtl = {
   en: false,
   es: false,
   et: false,
-  fa: false,
+  fa: true,
   fi: false,
   fr: false,
   hr: false,
@@ -2171,7 +2177,7 @@ const VDefaultsProvider = genericComponent(false)({
 // Types
 
 function createCssTransition(name) {
-  let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top center 0';
+  let origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center center';
   let mode = arguments.length > 2 ? arguments[2] : undefined;
   return genericComponent()({
     name,
@@ -3205,6 +3211,25 @@ function filterToolbarProps(props) {
   return pick(props, Object.keys(VToolbar?.props ?? {}));
 }
 
+// Utilities
+
+// Composables
+function useSsrBoot() {
+  const isBooted = ref(false);
+  onMounted(() => {
+    window.requestAnimationFrame(() => {
+      isBooted.value = true;
+    });
+  });
+  const ssrBootStyles = computed(() => !isBooted.value ? {
+    transition: 'none !important'
+  } : undefined);
+  return {
+    ssrBootStyles,
+    isBooted: readonly(isBooted)
+  };
+}
+
 // Types
 
 const VAppBar = genericComponent()({
@@ -3247,6 +3272,9 @@ const VAppBar = genericComponent()({
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
     const {
       layoutItemStyles
     } = useLayoutItem({
@@ -3267,7 +3295,8 @@ const VAppBar = genericComponent()({
         }],
         "style": {
           ...layoutItemStyles.value,
-          height: undefined
+          height: undefined,
+          ...ssrBootStyles.value
         }
       }, toolbarProps), slots);
     });
@@ -6139,6 +6168,7 @@ const VTextField = genericComponent()({
             "id": id.value,
             "active": isActive.value || isDirty.value,
             "dirty": isDirty.value || props.dirty,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -7043,7 +7073,6 @@ const listOpenStrategy = {
 };
 
 /* eslint-disable sonarjs/no-identical-functions */
-
 const independentSelectStrategy = mandatory => {
   const strategy = {
     select: _ref => {
@@ -7052,6 +7081,8 @@ const independentSelectStrategy = mandatory => {
         value,
         selected
       } = _ref;
+      id = toRaw(id);
+
       // When mandatory and we're trying to deselect when id
       // is the only currently selected item then do nothing
       if (mandatory && !value) {
@@ -7096,6 +7127,7 @@ const independentSingleSelectStrategy = mandatory => {
         id,
         ...rest
       } = _ref3;
+      id = toRaw(id);
       const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
       return parentStrategy.select({
         ...rest,
@@ -7126,6 +7158,7 @@ const leafSelectStrategy = mandatory => {
         children,
         ...rest
       } = _ref4;
+      id = toRaw(id);
       if (children.has(id)) return selected;
       return parentStrategy.select({
         id,
@@ -7149,6 +7182,7 @@ const leafSingleSelectStrategy = mandatory => {
         children,
         ...rest
       } = _ref5;
+      id = toRaw(id);
       if (children.has(id)) return selected;
       return parentStrategy.select({
         id,
@@ -7172,6 +7206,7 @@ const classicSelectStrategy = mandatory => {
         children,
         parents
       } = _ref6;
+      id = toRaw(id);
       const original = new Map(selected);
       const items = [id];
       while (items.length) {
@@ -7393,7 +7428,7 @@ const useNestedItem = (id, isGroup) => {
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
     select: (selected, e) => parent.root.select(computedId.value, selected, e),
-    isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+    isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
     isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator
@@ -8955,7 +8990,7 @@ function useScrollStrategies(props, data) {
     if (!(data.isActive.value && props.scrollStrategy)) return;
     scope = effectScope();
     await nextTick();
-    scope.run(() => {
+    scope.active && scope.run(() => {
       if (typeof props.scrollStrategy === 'function') {
         props.scrollStrategy(data, props, scope);
       } else {
@@ -9036,7 +9071,7 @@ function repositionScrollStrategy(data, props, scope) {
     });
   });
   onScopeDispose(() => {
-    cancelIdleCallback(ric);
+    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
     cancelAnimationFrame(raf);
   });
 }
@@ -9082,8 +9117,8 @@ function getClientWidth(isHydrate) {
 function getClientHeight(isHydrate) {
   return IN_BROWSER && !isHydrate ? window.innerHeight : 0;
 }
-function getPlatform() {
-  const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr';
+function getPlatform(isHydrate) {
+  const userAgent = IN_BROWSER && !isHydrate ? window.navigator.userAgent : 'ssr';
   function match(regexp) {
     return Boolean(userAgent.match(regexp));
   }
@@ -9098,7 +9133,6 @@ function getPlatform() {
   const win = match(/win/i);
   const mac = match(/mac/i);
   const linux = match(/linux/i);
-  const ssr = match(/ssr/i);
   return {
     android,
     ios,
@@ -9112,7 +9146,7 @@ function getPlatform() {
     mac,
     linux,
     touch: SUPPORTS_TOUCH,
-    ssr
+    ssr: userAgent === 'ssr'
   };
 }
 function createDisplay(options, ssr) {
@@ -9121,13 +9155,17 @@ function createDisplay(options, ssr) {
     mobileBreakpoint
   } = parseDisplayOptions(options);
   const height = ref(getClientHeight(ssr));
-  const platform = getPlatform();
+  const platform = shallowRef(getPlatform(ssr));
   const state = reactive({});
   const width = ref(getClientWidth(ssr));
-  function update() {
+  function updateSize() {
     height.value = getClientHeight();
     width.value = getClientWidth();
   }
+  function update() {
+    updateSize();
+    platform.value = getPlatform();
+  }
 
   // eslint-disable-next-line max-statements
   watchEffect(() => {
@@ -9139,7 +9177,7 @@ function createDisplay(options, ssr) {
     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;
+    const mobile = width.value < breakpointValue;
     state.xs = xs;
     state.sm = sm;
     state.md = md;
@@ -9159,11 +9197,11 @@ function createDisplay(options, ssr) {
     state.width = width.value;
     state.mobile = mobile;
     state.mobileBreakpoint = mobileBreakpoint;
-    state.platform = platform;
+    state.platform = platform.value;
     state.thresholds = thresholds;
   });
   if (IN_BROWSER) {
-    window.addEventListener('resize', update, {
+    window.addEventListener('resize', updateSize, {
       passive: true
     });
   }
@@ -9228,7 +9266,7 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     parent?.activeChildren.add(vm.uid);
     onScopeDispose(() => {
       if (createStackEntry) {
-        const idx = globalStack.findIndex(v => v[0] === vm.uid);
+        const idx = toRaw(globalStack).findIndex(v => v[0] === vm.uid);
         globalStack.splice(idx, 1);
       }
       parent?.activeChildren.delete(vm.uid);
@@ -9651,17 +9689,17 @@ const VMenu = genericComponent()({
     const id = computed(() => props.id || `v-menu-${uid}`);
     const overlay = ref();
     const parent = inject$1(VMenuSymbol, null);
-    let openChildren = 0;
+    const openChildren = ref(0);
     provide(VMenuSymbol, {
       register() {
-        ++openChildren;
+        ++openChildren.value;
       },
       unregister() {
-        --openChildren;
+        --openChildren.value;
       },
       closeParents() {
         setTimeout(() => {
-          if (!openChildren) {
+          if (!openChildren.value) {
             isActive.value = false;
             parent?.closeParents();
           }
@@ -9705,7 +9743,8 @@ const VMenu = genericComponent()({
       });
     });
     return forwardRefs({
-      id
+      id,
+      ΨopenChildren: openChildren
     }, overlay);
   }
 });
@@ -9765,7 +9804,15 @@ const VSelect = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const menu = useProxiedModel(props, 'menu');
+    const vMenuRef = ref();
+    const _menu = useProxiedModel(props, 'menu');
+    const menu = computed({
+      get: () => _menu.value,
+      set: v => {
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        _menu.value = v;
+      }
+    });
     const {
       items,
       transformIn,
@@ -9872,6 +9919,7 @@ const VSelect = genericComponent()({
       }), {
         ...slots,
         default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+          "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
@@ -10110,7 +10158,15 @@ const VAutocomplete = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = ref(false);
     const isPristine = ref(true);
-    const menu = useProxiedModel(props, 'menu');
+    const vMenuRef = ref();
+    const _menu = useProxiedModel(props, 'menu');
+    const menu = computed({
+      get: () => _menu.value,
+      set: v => {
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        _menu.value = v;
+      }
+    });
     const {
       items,
       transformIn,
@@ -10252,6 +10308,7 @@ const VAutocomplete = genericComponent()({
       }), {
         ...slots,
         default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+          "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
@@ -10628,6 +10685,9 @@ const VBottomNavigation = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
     const height = computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
     const isActive = toRef(props, 'active');
     const {
@@ -10662,7 +10722,7 @@ const VBottomNavigation = genericComponent()({
         "style": [backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value),
           transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-        }]
+        }, ssrBootStyles.value]
       }, {
         default: () => [slots.default && createVNode("div", {
           "class": "v-bottom-navigation__content"
@@ -11352,25 +11412,6 @@ const VWindow = genericComponent()({
   }
 });
 
-// Utilities
-
-// Composables
-function useSsrBoot() {
-  const isBooted = ref(false);
-  onMounted(() => {
-    window.requestAnimationFrame(() => {
-      isBooted.value = true;
-    });
-  });
-  const ssrBootStyles = computed(() => !isBooted.value ? {
-    transition: 'none !important'
-  } : undefined);
-  return {
-    ssrBootStyles,
-    isBooted: readonly(isBooted)
-  };
-}
-
 const VWindowItem = genericComponent()({
   name: 'VWindowItem',
   directives: {
@@ -11669,6 +11710,19 @@ const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
+    const canvasWidth = ref(parseFloat(props.width));
+    const canvasHeight = ref(parseFloat(props.height));
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!resizeRef.value?.offsetParent) return;
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      canvasWidth.value = width;
+      canvasHeight.value = height;
+    });
     function updateDotPosition(x, y, rect) {
       const {
         left,
@@ -11713,18 +11767,14 @@ const VColorPickerCanvas = defineComponent({
         return;
       }
       if (!canvasRef.value) return;
-      const {
-        width,
-        height
-      } = canvasRef.value.getBoundingClientRect();
       const {
         x,
         y
       } = dotPosition.value;
       emit('update:color', {
         h: props.color?.h ?? 0,
-        s: clamp(x, 0, width) / width,
-        v: 1 - clamp(y, 0, height) / height,
+        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,
+        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,
         a: props.color?.a ?? 1
       });
     });
@@ -11747,16 +11797,27 @@ const VColorPickerCanvas = defineComponent({
     watch(() => props.color?.h, updateCanvas, {
       immediate: true
     });
+    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {
+      updateCanvas();
+      dotPosition.value = {
+        x: dotPosition.value.x * newVal[0] / oldVal[0],
+        y: dotPosition.value.y * newVal[1] / oldVal[1]
+      };
+    }, {
+      flush: 'post'
+    });
     watch(() => props.color, () => {
       if (isInteracting.value) {
         isInteracting.value = false;
         return;
       }
-      if (!props.color) return;
       isOutsideUpdate.value = true;
-      dotPosition.value = {
-        x: props.color.s * parseInt(props.width, 10),
-        y: (1 - props.color.v) * parseInt(props.height, 10)
+      dotPosition.value = props.color ? {
+        x: props.color.s * canvasWidth.value,
+        y: (1 - props.color.v) * canvasHeight.value
+      } : {
+        x: 0,
+        y: 0
       };
     }, {
       deep: true,
@@ -11764,19 +11825,16 @@ const VColorPickerCanvas = defineComponent({
     });
     onMounted(() => updateCanvas());
     useRender(() => createVNode("div", {
+      "ref": resizeRef,
       "class": "v-color-picker-canvas",
-      "style": {
-        width: convertToUnit(props.width),
-        height: convertToUnit(props.height)
-      },
       "onClick": handleClick,
       "onMousedown": handleMouseDown,
       "onTouchstart": handleMouseDown
     }, [createVNode("canvas", {
       "ref": canvasRef,
-      "width": props.width,
-      "height": props.height
-    }, null), createVNode("div", {
+      "width": canvasWidth.value,
+      "height": canvasHeight.value
+    }, null), props.color && createVNode("div", {
       "class": ['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
       }],
@@ -11809,10 +11867,7 @@ function parseColor(color) {
       hsva = color;
     }
   }
-  return hsva != null ? {
-    ...hsva,
-    a: hsva.a ?? 1
-  } : null;
+  return hsva;
 }
 function stripAlpha(color, stripAlpha) {
   if (stripAlpha) {
@@ -11832,7 +11887,7 @@ function extractColor(color, input) {
   if (typeof input === 'object') {
     let converted;
     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 stripAlpha(converted, !has(input, ['a']) && color.a === 1);
   }
   return color;
 }
@@ -12023,7 +12078,7 @@ const VColorPickerEdit = defineComponent({
     const inputs = computed(() => {
       const mode = enabledModes.value.find(m => m.name === props.mode);
       if (!mode) return [];
-      const color = props.color ? mode.to(props.color) : {};
+      const color = props.color ? mode.to(props.color) : null;
       return mode.inputs?.map(_ref3 => {
         let {
           getValue,
@@ -12034,11 +12089,11 @@ const VColorPickerEdit = defineComponent({
           ...mode.inputProps,
           ...inputProps,
           disabled: props.disabled,
-          value: getValue(color),
+          value: color && getValue(color),
           onChange: e => {
             const target = e.target;
             if (!target) return;
-            emit('update:color', mode.from(getColor(color, target.value)));
+            emit('update:color', mode.from(getColor(color ?? nullColor, target.value)));
           }
         };
       });
@@ -12737,12 +12792,12 @@ const VColorPickerPreview = defineComponent({
       "hideDetails": true
     }, null), !props.hideAlpha && createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
-      "modelValue": props.color?.a,
+      "modelValue": props.color?.a ?? 1,
       "onUpdate:modelValue": a => emit('update:color', {
         ...(props.color ?? nullColor),
         a
       }),
-      "step": 0,
+      "step": 1 / 256,
       "min": 0,
       "max": 1,
       "disabled": props.disabled,
@@ -13127,18 +13182,23 @@ const VColorPickerSwatches = defineComponent({
   }
 });
 
+// Types
+
+const makeVSheetProps = propsFactory({
+  color: String,
+  ...makeBorderProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeLocationProps(),
+  ...makePositionProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'v-sheet');
 const VSheet = genericComponent()({
   name: 'VSheet',
   props: {
-    color: String,
-    ...makeBorderProps(),
-    ...makeDimensionProps(),
-    ...makeElevationProps(),
-    ...makeLocationProps(),
-    ...makePositionProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps(),
-    ...makeThemeProps()
+    ...makeVSheetProps()
   },
   setup(props, _ref) {
     let {
@@ -13169,10 +13229,11 @@ const VSheet = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
-    return () => createVNode(props.tag, {
+    useRender(() => createVNode(props.tag, {
       "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
       "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
-    }, slots);
+    }, slots));
+    return {};
   }
 });
 
@@ -13249,6 +13310,13 @@ const VColorPicker = defineComponent({
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
+    provideDefaults({
+      VSlider: {
+        color: undefined,
+        trackColor: undefined,
+        trackFillColor: undefined
+      }
+    });
     useRender(() => createVNode(VSheet, {
       "rounded": props.rounded,
       "elevation": props.elevation,
@@ -13349,7 +13417,15 @@ const VCombobox = genericComponent()({
     const vTextFieldRef = ref();
     const isFocused = ref(false);
     const isPristine = ref(true);
-    const menu = useProxiedModel(props, 'menu');
+    const vMenuRef = ref();
+    const _menu = useProxiedModel(props, 'menu');
+    const menu = computed({
+      get: () => _menu.value,
+      set: v => {
+        if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+        _menu.value = v;
+      }
+    });
     const selectionIndex = ref(-1);
     const color = computed(() => vTextFieldRef.value?.color);
     const {
@@ -13558,6 +13634,7 @@ const VCombobox = genericComponent()({
       }), {
         ...slots,
         default: () => createVNode(Fragment, null, [createVNode(VMenu, mergeProps({
+          "ref": vMenuRef,
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
@@ -14137,6 +14214,7 @@ const VFileInput = genericComponent()({
             "id": id.value,
             "active": isDirty.value || isFocused.value,
             "dirty": isDirty.value,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -16156,9 +16234,6 @@ const VRating = genericComponent()({
     const range = computed(() => createRange(Number(props.length), 1));
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
     const hoverIndex = ref(-1);
-    const focusIndex = ref(-1);
-    const firstRef = ref();
-    let isClicking = false;
     const itemState = computed(() => increments.value.map(value => {
       const isHovering = props.hover && hoverIndex.value > -1;
       const isFilled = normalizedValue.value >= value;
@@ -16181,16 +16256,6 @@ const VRating = genericComponent()({
       function onMouseleave() {
         hoverIndex.value = -1;
       }
-      function onFocus() {
-        if (value === 0 && normalizedValue.value === 0) {
-          firstRef.value?.focus();
-        } else {
-          focusIndex.value = value;
-        }
-      }
-      function onBlur() {
-        if (!isClicking) focusIndex.value = -1;
-      }
       function onClick() {
         if (props.disabled || props.readonly) return;
         rating.value = normalizedValue.value === value && props.clearable ? 0 : value;
@@ -16198,17 +16263,9 @@ const VRating = genericComponent()({
       return {
         onMouseenter: props.hover ? onMouseenter : undefined,
         onMouseleave: props.hover ? onMouseleave : undefined,
-        onFocus,
-        onBlur,
         onClick
       };
     }));
-    function onMousedown() {
-      isClicking = true;
-    }
-    function onMouseup() {
-      isClicking = false;
-    }
     const name = computed(() => props.name ?? `v-rating-${getUid()}`);
     function VRatingItem(_ref2) {
       let {
@@ -16219,8 +16276,6 @@ const VRating = genericComponent()({
       const {
         onMouseenter,
         onMouseleave,
-        onFocus,
-        onBlur,
         onClick
       } = eventState.value[index + 1];
       const id = `${name.value}-${String(value).replace('.', '-')}`;
@@ -16231,7 +16286,6 @@ const VRating = genericComponent()({
         icon: itemState.value[index]?.icon,
         ripple: props.ripple,
         size: props.size,
-        tag: 'span',
         variant: 'plain'
       };
       return createVNode(Fragment, null, [createVNode("label", {
@@ -16240,17 +16294,17 @@ const VRating = genericComponent()({
           'v-rating__item--half': props.halfIncrements && value % 1 > 0,
           'v-rating__item--full': props.halfIncrements && value % 1 === 0
         },
-        "onMousedown": onMousedown,
-        "onMouseup": onMouseup,
         "onMouseenter": onMouseenter,
-        "onMouseleave": onMouseleave
+        "onMouseleave": onMouseleave,
+        "onClick": onClick
       }, [createVNode("span", {
         "class": "v-rating__hidden"
       }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
         ...itemState.value[index],
         props: btnProps,
         value,
-        index
+        index,
+        rating: normalizedValue.value
       }) : createVNode(VBtn, btnProps, null)]), createVNode("input", {
         "class": "v-rating__hidden",
         "name": name.value,
@@ -16258,10 +16312,7 @@ const VRating = genericComponent()({
         "type": "radio",
         "value": value,
         "checked": normalizedValue.value === value,
-        "onClick": onClick,
-        "onFocus": onFocus,
-        "onBlur": onBlur,
-        "ref": index === 0 ? firstRef : undefined,
+        "tabindex": -1,
         "readonly": props.readonly,
         "disabled": props.disabled
       }, null)]);
@@ -16290,9 +16341,7 @@ const VRating = genericComponent()({
           index: i,
           label: props.itemLabels?.[i]
         }) : undefined, createVNode("div", {
-          "class": ['v-rating__item', {
-            'v-rating__item--focused': Math.ceil(focusIndex.value) === value
-          }]
+          "class": "v-rating__item"
         }, [props.halfIncrements ? createVNode(Fragment, null, [createVNode(VRatingItem, {
           "value": value - 0.5,
           "index": i * 2
@@ -16773,19 +16822,17 @@ const VSnackbar = genericComponent()({
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "contentProps": mergeProps({
-          style: locationStyles.value
+          class: ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
+          style: [locationStyles.value, colorStyles.value],
+          onPointerenter,
+          onPointerleave: startTimeout
         }, overlayProps.contentProps),
         "persistent": true,
         "noClickAnimation": true,
         "scrim": false,
         "scrollStrategy": "none"
       }, scopeId), {
-        default: () => [createVNode("div", {
-          "class": ['v-snackbar__wrapper', themeClasses.value, colorClasses.value, roundedClasses.value, variantClasses.value],
-          "style": [colorStyles.value],
-          "onPointerenter": onPointerenter,
-          "onPointerleave": startTimeout
-        }, [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), slots.default && createVNode("div", {
           "class": "v-snackbar__content",
           "role": "status",
           "aria-live": "polite"
@@ -16800,7 +16847,7 @@ const VSnackbar = genericComponent()({
           default: () => [createVNode("div", {
             "class": "v-snackbar__actions"
           }, [slots.actions()])]
-        })])],
+        })],
         activator: slots.activator
       });
     });
@@ -16959,6 +17006,9 @@ const VSystemBar = genericComponent()({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
     const height = computed(() => props.height ?? (props.window ? 32 : 24));
     const {
       layoutItemStyles
@@ -16975,7 +17025,7 @@ const VSystemBar = genericComponent()({
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
       }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value]
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
     }, slots));
     return {};
   }
@@ -17399,6 +17449,7 @@ const VTextarea = genericComponent()({
           }, fieldProps, {
             "active": isActive.value || isDirty.value,
             "dirty": isDirty.value || props.dirty,
+            "disabled": isDisabled.value,
             "focused": isFocused.value,
             "error": isValid.value === false
           }), {
@@ -17708,6 +17759,7 @@ const VTooltip = genericComponent()({
       closeOnBack: false,
       location: 'end',
       locationStrategy: 'connected',
+      eager: true,
       minWidth: 0,
       offset: 10,
       openOnClick: false,
@@ -17716,7 +17768,7 @@ const VTooltip = genericComponent()({
       scrim: false,
       scrollStrategy: 'reposition',
       transition: false
-    }), ['absolute', 'persistent', 'eager'])
+    }), ['absolute', 'persistent'])
   },
   emits: {
     'update:modelValue': value => true
@@ -17760,7 +17812,6 @@ const VTooltip = genericComponent()({
         "origin": origin.value,
         "persistent": true,
         "role": "tooltip",
-        "eager": true,
         "activatorProps": activatorProps.value,
         "_disableGlobalStack": true
       }, scopeId), {
@@ -18139,7 +18190,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.2.0-dev-20230214.0";
+const version$1 = "3.2.0-dev-20230309.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -18159,7 +18210,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.2.0-dev-20230214.0";
+const version = "3.2.0-dev-20230309.0";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDisplay, useLayout, useLocale, useRtl, useTheme, version };