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

package/dist/vuetify.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.
 */
@@ -784,11 +784,12 @@
       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,
@@ -811,9 +812,7 @@
     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;
@@ -964,7 +963,9 @@
       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;
@@ -1670,17 +1671,9 @@
       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 = [];
@@ -1697,22 +1690,30 @@
       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(vue.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) {
-          vue.watchEffect(() => head.updateDOM());
+        if (head.push) {
+          const entry = head.push(getHead);
+          vue.watch(styles, () => {
+            entry.patch(getHead);
+          });
+        } else {
+          if (IN_BROWSER) {
+            head.addHeadObjs(vue.computed(getHead));
+            vue.watchEffect(() => head.updateDOM());
+          } else {
+            head.addHeadObjs(getHead());
+          }
         }
       } else {
         let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
@@ -1785,6 +1786,11 @@
         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;
   }
 
@@ -1814,7 +1820,7 @@
     });
     const model = vue.computed({
       get() {
-        return transformIn(vue.toRaw(isControlled.value ? props[prop] : internal.value));
+        return transformIn(isControlled.value ? props[prop] : internal.value);
       },
       set(internalValue) {
         const newValue = transformOut(internalValue);
@@ -2014,7 +2020,7 @@
     en: false,
     es: false,
     et: false,
-    fa: false,
+    fa: true,
     fi: false,
     fr: false,
     hr: false,
@@ -2175,7 +2181,7 @@
   // 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,
@@ -3209,6 +3215,25 @@
     return pick(props, Object.keys(VToolbar?.props ?? {}));
   }
 
+  // Utilities
+
+  // Composables
+  function useSsrBoot() {
+    const isBooted = vue.ref(false);
+    vue.onMounted(() => {
+      window.requestAnimationFrame(() => {
+        isBooted.value = true;
+      });
+    });
+    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
+      transition: 'none !important'
+    } : undefined);
+    return {
+      ssrBootStyles,
+      isBooted: vue.readonly(isBooted)
+    };
+  }
+
   // Types
 
   const VAppBar = genericComponent()({
@@ -3251,6 +3276,9 @@
         const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
         return height + extensionHeight;
       });
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const {
         layoutItemStyles
       } = useLayoutItem({
@@ -3271,7 +3299,8 @@
           }],
           "style": {
             ...layoutItemStyles.value,
-            height: undefined
+            height: undefined,
+            ...ssrBootStyles.value
           }
         }, toolbarProps), slots);
       });
@@ -6143,6 +6172,7 @@
               "id": id.value,
               "active": isActive.value || isDirty.value,
               "dirty": isDirty.value || props.dirty,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -7047,7 +7077,6 @@
   };
 
   /* eslint-disable sonarjs/no-identical-functions */
-
   const independentSelectStrategy = mandatory => {
     const strategy = {
       select: _ref => {
@@ -7056,6 +7085,8 @@
           value,
           selected
         } = _ref;
+        id = vue.toRaw(id);
+
         // When mandatory and we're trying to deselect when id
         // is the only currently selected item then do nothing
         if (mandatory && !value) {
@@ -7100,6 +7131,7 @@
           id,
           ...rest
         } = _ref3;
+        id = vue.toRaw(id);
         const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
         return parentStrategy.select({
           ...rest,
@@ -7130,6 +7162,7 @@
           children,
           ...rest
         } = _ref4;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7153,6 +7186,7 @@
           children,
           ...rest
         } = _ref5;
+        id = vue.toRaw(id);
         if (children.has(id)) return selected;
         return parentStrategy.select({
           id,
@@ -7176,6 +7210,7 @@
           children,
           parents
         } = _ref6;
+        id = vue.toRaw(id);
         const original = new Map(selected);
         const items = [id];
         while (items.length) {
@@ -7397,7 +7432,7 @@
       isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
-      isSelected: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+      isSelected: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'on'),
       isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
       isLeaf: vue.computed(() => !parent.root.children.value.get(computedId.value)),
       isGroupActivator: parent.isGroupActivator
@@ -8959,7 +8994,7 @@
       if (!(data.isActive.value && props.scrollStrategy)) return;
       scope = vue.effectScope();
       await vue.nextTick();
-      scope.run(() => {
+      scope.active && scope.run(() => {
         if (typeof props.scrollStrategy === 'function') {
           props.scrollStrategy(data, props, scope);
         } else {
@@ -9040,7 +9075,7 @@
       });
     });
     vue.onScopeDispose(() => {
-      cancelIdleCallback(ric);
+      typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);
       cancelAnimationFrame(raf);
     });
   }
@@ -9086,8 +9121,8 @@
   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));
     }
@@ -9102,7 +9137,6 @@
     const win = match(/win/i);
     const mac = match(/mac/i);
     const linux = match(/linux/i);
-    const ssr = match(/ssr/i);
     return {
       android,
       ios,
@@ -9116,7 +9150,7 @@
       mac,
       linux,
       touch: SUPPORTS_TOUCH,
-      ssr
+      ssr: userAgent === 'ssr'
     };
   }
   function createDisplay(options, ssr) {
@@ -9125,13 +9159,17 @@
       mobileBreakpoint
     } = parseDisplayOptions(options);
     const height = vue.ref(getClientHeight(ssr));
-    const platform = getPlatform();
+    const platform = vue.shallowRef(getPlatform(ssr));
     const state = vue.reactive({});
     const width = vue.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
     vue.watchEffect(() => {
@@ -9143,7 +9181,7 @@
       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;
@@ -9163,11 +9201,11 @@
       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
       });
     }
@@ -9232,7 +9270,7 @@
       parent?.activeChildren.add(vm.uid);
       vue.onScopeDispose(() => {
         if (createStackEntry) {
-          const idx = globalStack.findIndex(v => v[0] === vm.uid);
+          const idx = vue.toRaw(globalStack).findIndex(v => v[0] === vm.uid);
           globalStack.splice(idx, 1);
         }
         parent?.activeChildren.delete(vm.uid);
@@ -9655,17 +9693,17 @@
       const id = vue.computed(() => props.id || `v-menu-${uid}`);
       const overlay = vue.ref();
       const parent = vue.inject(VMenuSymbol, null);
-      let openChildren = 0;
+      const openChildren = vue.ref(0);
       vue.provide(VMenuSymbol, {
         register() {
-          ++openChildren;
+          ++openChildren.value;
         },
         unregister() {
-          --openChildren;
+          --openChildren.value;
         },
         closeParents() {
           setTimeout(() => {
-            if (!openChildren) {
+            if (!openChildren.value) {
               isActive.value = false;
               parent?.closeParents();
             }
@@ -9709,7 +9747,8 @@
         });
       });
       return forwardRefs({
-        id
+        id,
+        ΨopenChildren: openChildren
       }, overlay);
     }
   });
@@ -9769,7 +9808,15 @@
         t
       } = useLocale();
       const vTextFieldRef = vue.ref();
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const {
         items,
         transformIn,
@@ -9876,6 +9923,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -10114,7 +10162,15 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.ref(false);
       const isPristine = vue.ref(true);
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const {
         items,
         transformIn,
@@ -10256,6 +10312,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -10632,6 +10689,9 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const height = vue.computed(() => Number(props.height) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
       const isActive = vue.toRef(props, 'active');
       const {
@@ -10666,7 +10726,7 @@
           "style": [backgroundColorStyles.value, layoutItemStyles.value, {
             height: convertToUnit(height.value),
             transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-          }]
+          }, ssrBootStyles.value]
         }, {
           default: () => [slots.default && vue.createVNode("div", {
             "class": "v-bottom-navigation__content"
@@ -11356,25 +11416,6 @@
     }
   });
 
-  // Utilities
-
-  // Composables
-  function useSsrBoot() {
-    const isBooted = vue.ref(false);
-    vue.onMounted(() => {
-      window.requestAnimationFrame(() => {
-        isBooted.value = true;
-      });
-    });
-    const ssrBootStyles = vue.computed(() => !isBooted.value ? {
-      transition: 'none !important'
-    } : undefined);
-    return {
-      ssrBootStyles,
-      isBooted: vue.readonly(isBooted)
-    };
-  }
-
   const VWindowItem = genericComponent()({
     name: 'VWindowItem',
     directives: {
@@ -11673,6 +11714,19 @@
         };
       });
       const canvasRef = vue.ref();
+      const canvasWidth = vue.ref(parseFloat(props.width));
+      const canvasHeight = vue.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,
@@ -11717,18 +11771,14 @@
           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
         });
       });
@@ -11751,16 +11801,27 @@
       vue.watch(() => props.color?.h, updateCanvas, {
         immediate: true
       });
+      vue.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'
+      });
       vue.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,
@@ -11768,19 +11829,16 @@
       });
       vue.onMounted(() => updateCanvas());
       useRender(() => vue.createVNode("div", {
+        "ref": resizeRef,
         "class": "v-color-picker-canvas",
-        "style": {
-          width: convertToUnit(props.width),
-          height: convertToUnit(props.height)
-        },
         "onClick": handleClick,
         "onMousedown": handleMouseDown,
         "onTouchstart": handleMouseDown
       }, [vue.createVNode("canvas", {
         "ref": canvasRef,
-        "width": props.width,
-        "height": props.height
-      }, null), vue.createVNode("div", {
+        "width": canvasWidth.value,
+        "height": canvasHeight.value
+      }, null), props.color && vue.createVNode("div", {
         "class": ['v-color-picker-canvas__dot', {
           'v-color-picker-canvas__dot--disabled': props.disabled
         }],
@@ -11813,10 +11871,7 @@
         hsva = color;
       }
     }
-    return hsva != null ? {
-      ...hsva,
-      a: hsva.a ?? 1
-    } : null;
+    return hsva;
   }
   function stripAlpha(color, stripAlpha) {
     if (stripAlpha) {
@@ -11836,7 +11891,7 @@
     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;
   }
@@ -12027,7 +12082,7 @@
       const inputs = vue.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,
@@ -12038,11 +12093,11 @@
             ...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)));
             }
           };
         });
@@ -12741,12 +12796,12 @@
         "hideDetails": true
       }, null), !props.hideAlpha && vue.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,
@@ -13131,18 +13186,23 @@
     }
   });
 
+  // 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 {
@@ -13173,10 +13233,11 @@
       const {
         roundedClasses
       } = useRounded(props);
-      return () => vue.createVNode(props.tag, {
+      useRender(() => vue.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 {};
     }
   });
 
@@ -13253,6 +13314,13 @@
       vue.onMounted(() => {
         if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
       });
+      provideDefaults({
+        VSlider: {
+          color: undefined,
+          trackColor: undefined,
+          trackFillColor: undefined
+        }
+      });
       useRender(() => vue.createVNode(VSheet, {
         "rounded": props.rounded,
         "elevation": props.elevation,
@@ -13353,7 +13421,15 @@
       const vTextFieldRef = vue.ref();
       const isFocused = vue.ref(false);
       const isPristine = vue.ref(true);
-      const menu = useProxiedModel(props, 'menu');
+      const vMenuRef = vue.ref();
+      const _menu = useProxiedModel(props, 'menu');
+      const menu = vue.computed({
+        get: () => _menu.value,
+        set: v => {
+          if (_menu.value && !v && vMenuRef.value?.ΨopenChildren) return;
+          _menu.value = v;
+        }
+      });
       const selectionIndex = vue.ref(-1);
       const color = vue.computed(() => vTextFieldRef.value?.color);
       const {
@@ -13562,6 +13638,7 @@
         }), {
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, vue.mergeProps({
+            "ref": vMenuRef,
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
@@ -14141,6 +14218,7 @@
               "id": id.value,
               "active": isDirty.value || isFocused.value,
               "dirty": isDirty.value,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -16160,9 +16238,6 @@
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
       const hoverIndex = vue.ref(-1);
-      const focusIndex = vue.ref(-1);
-      const firstRef = vue.ref();
-      let isClicking = false;
       const itemState = vue.computed(() => increments.value.map(value => {
         const isHovering = props.hover && hoverIndex.value > -1;
         const isFilled = normalizedValue.value >= value;
@@ -16185,16 +16260,6 @@
         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;
@@ -16202,17 +16267,9 @@
         return {
           onMouseenter: props.hover ? onMouseenter : undefined,
           onMouseleave: props.hover ? onMouseleave : undefined,
-          onFocus,
-          onBlur,
           onClick
         };
       }));
-      function onMousedown() {
-        isClicking = true;
-      }
-      function onMouseup() {
-        isClicking = false;
-      }
       const name = vue.computed(() => props.name ?? `v-rating-${getUid()}`);
       function VRatingItem(_ref2) {
         let {
@@ -16223,8 +16280,6 @@
         const {
           onMouseenter,
           onMouseleave,
-          onFocus,
-          onBlur,
           onClick
         } = eventState.value[index + 1];
         const id = `${name.value}-${String(value).replace('.', '-')}`;
@@ -16235,7 +16290,6 @@
           icon: itemState.value[index]?.icon,
           ripple: props.ripple,
           size: props.size,
-          tag: 'span',
           variant: 'plain'
         };
         return vue.createVNode(vue.Fragment, null, [vue.createVNode("label", {
@@ -16244,17 +16298,17 @@
             '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
         }, [vue.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
         }) : vue.createVNode(VBtn, btnProps, null)]), vue.createVNode("input", {
           "class": "v-rating__hidden",
           "name": name.value,
@@ -16262,10 +16316,7 @@
           "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)]);
@@ -16294,9 +16345,7 @@
             index: i,
             label: props.itemLabels?.[i]
           }) : undefined, vue.createVNode("div", {
-            "class": ['v-rating__item', {
-              'v-rating__item--focused': Math.ceil(focusIndex.value) === value
-            }]
+            "class": "v-rating__item"
           }, [props.halfIncrements ? vue.createVNode(vue.Fragment, null, [vue.createVNode(VRatingItem, {
             "value": value - 0.5,
             "index": i * 2
@@ -16777,19 +16826,17 @@
           "modelValue": isActive.value,
           "onUpdate:modelValue": $event => isActive.value = $event,
           "contentProps": vue.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: () => [vue.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 && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), slots.default && vue.createVNode("div", {
             "class": "v-snackbar__content",
             "role": "status",
             "aria-live": "polite"
@@ -16804,7 +16851,7 @@
             default: () => [vue.createVNode("div", {
               "class": "v-snackbar__actions"
             }, [slots.actions()])]
-          })])],
+          })],
           activator: slots.activator
         });
       });
@@ -16963,6 +17010,9 @@
       const {
         roundedClasses
       } = useRounded(props);
+      const {
+        ssrBootStyles
+      } = useSsrBoot();
       const height = vue.computed(() => props.height ?? (props.window ? 32 : 24));
       const {
         layoutItemStyles
@@ -16979,7 +17029,7 @@
         "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 {};
     }
@@ -17403,6 +17453,7 @@
             }, fieldProps, {
               "active": isActive.value || isDirty.value,
               "dirty": isDirty.value || props.dirty,
+              "disabled": isDisabled.value,
               "focused": isFocused.value,
               "error": isValid.value === false
             }), {
@@ -17712,6 +17763,7 @@
         closeOnBack: false,
         location: 'end',
         locationStrategy: 'connected',
+        eager: true,
         minWidth: 0,
         offset: 10,
         openOnClick: false,
@@ -17720,7 +17772,7 @@
         scrim: false,
         scrollStrategy: 'reposition',
         transition: false
-      }), ['absolute', 'persistent', 'eager'])
+      }), ['absolute', 'persistent'])
     },
     emits: {
       'update:modelValue': value => true
@@ -17764,7 +17816,6 @@
           "origin": origin.value,
           "persistent": true,
           "role": "tooltip",
-          "eager": true,
           "activatorProps": activatorProps.value,
           "_disableGlobalStack": true
         }, scopeId), {
@@ -18143,7 +18194,7 @@
       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
@@ -18163,7 +18214,7 @@
       ...options
     });
   };
-  const version = "3.2.0-dev-20230214.0";
+  const version = "3.2.0-dev-20230309.0";
   createVuetify.version = version;
 
   exports.components = components;