vuetify 3.0.2 → 3.0.4

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.0.2
+* Vuetify v3.0.4
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -599,21 +599,29 @@
 
     // Matrix transform, then gamma adjustment
     for (let i = 0; i < 3; ++i) {
+      // Rescale back to [0, 255]
       rgb[i] = Math.round(clamp(transform(matrix[i][0] * xyz[0] + matrix[i][1] * xyz[1] + matrix[i][2] * xyz[2])) * 255);
     }
-
-    // Rescale back to [0, 255]
-    return (rgb[0] << 16) + (rgb[1] << 8) + (rgb[2] << 0);
+    return {
+      r: rgb[0],
+      g: rgb[1],
+      b: rgb[2]
+    };
   }
-  function toXYZ$1(rgb) {
+  function toXYZ$1(_ref) {
+    let {
+      r,
+      g,
+      b
+    } = _ref;
     const xyz = [0, 0, 0];
     const transform = srgbReverseTransform;
     const matrix = srgbReverseMatrix;
 
     // Rescale from [0, 255] to [0, 1] then adjust sRGB gamma to linear RGB
-    const r = transform((rgb >> 16 & 0xff) / 255);
-    const g = transform((rgb >> 8 & 0xff) / 255);
-    const b = transform((rgb >> 0 & 0xff) / 255);
+    r = transform(r / 255);
+    g = transform(g / 255);
+    b = transform(b / 255);
 
     // Matrix color space transform
     for (let i = 0; i < 3; ++i) {
@@ -644,43 +652,36 @@
   function isCssColor(color) {
     return !!color && /^(#|var\(--|(rgb|hsl)a?\()/.test(color);
   }
-  function colorToInt(color) {
-    let rgb;
+  function parseColor$1(color) {
     if (typeof color === 'number') {
-      rgb = color;
+      if (isNaN(color) || color < 0 || color > 0xFFFFFF) {
+        // int can't have opacity
+        consoleWarn(`'${color}' is not a valid hex color`);
+      }
+      return {
+        r: (color & 0xFF0000) >> 16,
+        g: (color & 0xFF00) >> 8,
+        b: color & 0xFF
+      };
     } else if (typeof color === 'string') {
-      let c = color.startsWith('#') ? color.substring(1) : color;
-      if (c.length === 3) {
-        c = c.split('').map(char => char + char).join('');
+      let hex = color.startsWith('#') ? color.slice(1) : color;
+      if ([3, 4].includes(hex.length)) {
+        hex = hex.split('').map(char => char + char).join('');
+      } else if (![6, 8].includes(hex.length)) {
+        consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
-      if (c.length !== 6 && c.length !== 8) {
-        consoleWarn(`'${color}' is not a valid rgb color`);
+      const int = parseInt(hex, 16);
+      if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) {
+        consoleWarn(`'${color}' is not a valid hex(a) color`);
       }
-      rgb = parseInt(c, 16);
+      return HexToRGB(hex);
     } else {
       throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`);
     }
-    if (rgb < 0) {
-      consoleWarn(`Colors cannot be negative: '${color}'`);
-      rgb = 0;
-    } else if (rgb > 0xffffffff || isNaN(rgb)) {
-      consoleWarn(`'${color}' is not a valid rgb color`);
-      rgb = 0xffffff;
-    }
-    return rgb;
-  }
-  function intToHex(color) {
-    let hexColor = color.toString(16);
-    if (hexColor.length < 6) hexColor = '0'.repeat(6 - hexColor.length) + hexColor;
-    return '#' + hexColor;
   }
 
-  /**
-   * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
-   *
-   * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
-   */
-  function HSVAtoRGBA(hsva) {
+  /** Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+  function HSVtoRGB(hsva) {
     const {
       h,
       s,
@@ -700,12 +701,8 @@
     };
   }
 
-  /**
-   * Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
-   *
-   * @param color RGBA color as an array [0-255, 0-255, 0-255, 0-1]
-   */
-  function RGBAtoHSVA(rgba) {
+  /** Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV */
+  function RGBtoHSV(rgba) {
     if (!rgba) return {
       h: 0,
       s: 1,
@@ -737,7 +734,7 @@
       a: rgba.a
     };
   }
-  function HSVAtoHSLA(hsva) {
+  function HSVtoHSL(hsva) {
     const {
       h,
       s,
@@ -753,7 +750,7 @@
       a
     };
   }
-  function HSLAtoHSVA(hsl) {
+  function HSLtoHSV(hsl) {
     const {
       h,
       s,
@@ -769,34 +766,47 @@
       a
     };
   }
-  function RGBAtoCSS(rgba) {
-    return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+  function RGBtoCSS(_ref) {
+    let {
+      r,
+      g,
+      b,
+      a
+    } = _ref;
+    return a === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
   }
-  function HSVAtoCSS(hsva) {
-    return RGBAtoCSS(HSVAtoRGBA(hsva));
+  function HSVtoCSS(hsva) {
+    return RGBtoCSS(HSVtoRGB(hsva));
   }
-  function RGBAtoHex(rgba) {
-    const toHex = v => {
-      const h = Math.round(v).toString(16);
-      return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
-    };
-    return `#${[toHex(rgba.r), toHex(rgba.g), toHex(rgba.b), toHex(Math.round(rgba.a * 255))].join('')}`;
+  function toHex(v) {
+    const h = Math.round(v).toString(16);
+    return ('00'.substr(0, 2 - h.length) + h).toUpperCase();
+  }
+  function RGBtoHex(_ref2) {
+    let {
+      r,
+      g,
+      b,
+      a
+    } = _ref2;
+    return `#${[toHex(r), toHex(g), toHex(b), a !== undefined ? toHex(Math.round(a * 255)) : 'FF'].join('')}`;
   }
-  function HexToRGBA(hex) {
-    const rgba = chunk(hex.slice(1), 2).map(c => parseInt(c, 16));
+  function HexToRGB(hex) {
+    let [r, g, b, a] = chunk(hex, 2).map(c => parseInt(c, 16));
+    a = a === undefined ? a : Math.round(a / 255 * 100) / 100;
     return {
-      r: rgba[0],
-      g: rgba[1],
-      b: rgba[2],
-      a: Math.round(rgba[3] / 255 * 100) / 100
+      r,
+      g,
+      b,
+      a
     };
   }
-  function HexToHSVA(hex) {
-    const rgb = HexToRGBA(hex);
-    return RGBAtoHSVA(rgb);
+  function HexToHSV(hex) {
+    const rgb = HexToRGB(hex);
+    return RGBtoHSV(rgb);
   }
-  function HSVAtoHex(hsva) {
-    return RGBAtoHex(HSVAtoRGBA(hsva));
+  function HSVtoHex(hsva) {
+    return RGBtoHex(HSVtoRGB(hsva));
   }
   function parseHex(hex) {
     if (hex.startsWith('#')) {
@@ -811,20 +821,10 @@
     } else {
       hex = padEnd(padEnd(hex, 6), 8, 'F');
     }
-    return `#${hex}`.toUpperCase().substr(0, 9);
-  }
-  function colorToRGB(color) {
-    const int = colorToInt(color);
-    return {
-      r: (int & 0xFF0000) >> 16,
-      g: (int & 0xFF00) >> 8,
-      b: int & 0xFF
-    };
+    return hex;
   }
   function lighten(value, amount) {
     const lab = fromXYZ(toXYZ$1(value));
-    // TODO: why this false positive?
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
     lab[0] = lab[0] + amount * 10;
     return fromXYZ$1(toXYZ(lab));
   }
@@ -839,7 +839,7 @@
    * @see https://www.w3.org/TR/WCAG20/#relativeluminancedef
    */
   function getLuma(color) {
-    const rgb = colorToInt(color);
+    const rgb = parseColor$1(color);
     return toXYZ$1(rgb)[1];
   }
 
@@ -1470,12 +1470,12 @@
 
   function APCAcontrast(text, background) {
     // Linearize sRGB
-    const Rtxt = ((text >> 16 & 0xff) / 255) ** mainTRC;
-    const Gtxt = ((text >> 8 & 0xff) / 255) ** mainTRC;
-    const Btxt = ((text >> 0 & 0xff) / 255) ** mainTRC;
-    const Rbg = ((background >> 16 & 0xff) / 255) ** mainTRC;
-    const Gbg = ((background >> 8 & 0xff) / 255) ** mainTRC;
-    const Bbg = ((background >> 0 & 0xff) / 255) ** mainTRC;
+    const Rtxt = (text.r / 255) ** mainTRC;
+    const Gtxt = (text.g / 255) ** mainTRC;
+    const Btxt = (text.b / 255) ** mainTRC;
+    const Rbg = (background.r / 255) ** mainTRC;
+    const Gbg = (background.g / 255) ** mainTRC;
+    const Bbg = (background.b / 255) ** mainTRC;
 
     // Apply the standard coefficients and sum to Y
     let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
@@ -1641,7 +1641,7 @@
             for (const variation of ['lighten', 'darken']) {
               const fn = variation === 'lighten' ? lighten : darken;
               for (const amount of createRange(parsedOptions.variations[variation], 1)) {
-                theme.colors[`${name}-${variation}-${amount}`] = intToHex(fn(colorToInt(color), amount));
+                theme.colors[`${name}-${variation}-${amount}`] = RGBtoHex(fn(parseColor$1(color), amount));
               }
             }
           }
@@ -1649,9 +1649,9 @@
         for (const color of Object.keys(theme.colors)) {
           if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
           const onColor = `on-${color}`;
-          const colorVal = colorToInt(theme.colors[color]);
-          const blackContrast = Math.abs(APCAcontrast(0, colorVal));
-          const whiteContrast = Math.abs(APCAcontrast(0xffffff, colorVal));
+          const colorVal = parseColor$1(theme.colors[color]);
+          const blackContrast = Math.abs(APCAcontrast(parseColor$1(0), colorVal));
+          const whiteContrast = Math.abs(APCAcontrast(parseColor$1(0xffffff), colorVal));
 
           // TODO: warn about poor color selections
           // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -1681,7 +1681,7 @@
         } = theme;
         createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${dark ? 'dark' : 'normal'}`, ...genCssVariables(theme), ...Object.keys(variables).map(key => {
           const value = variables[key];
-          const color = typeof value === 'string' && value.startsWith('#') ? colorToRGB(value) : undefined;
+          const color = typeof value === 'string' && value.startsWith('#') ? parseColor$1(value) : undefined;
           const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
           return `--v-${key}: ${rgb ?? value}`;
         })]);
@@ -1783,7 +1783,7 @@
     const darkOverlay = theme.dark ? 1 : 2;
     const variables = [];
     for (const [key, value] of Object.entries(theme.colors)) {
-      const rgb = colorToRGB(value);
+      const rgb = parseColor$1(value);
       variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
       if (!key.startsWith('on-')) {
         variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
@@ -2480,8 +2480,8 @@
     const tsx = targetBox.width / elBox.width;
     const tsy = targetBox.height / elBox.height;
     const maxs = Math.max(1, tsx, tsy);
-    const sx = tsx / maxs;
-    const sy = tsy / maxs;
+    const sx = tsx / maxs || 0;
+    const sy = tsy / maxs || 0;
 
     // Animate elements larger than 12% of the screen area up to 1.5x slower
     const asa = elBox.width * elBox.height / (window.innerWidth * window.innerHeight);
@@ -3147,11 +3147,6 @@
       const isExtended = vue.ref(!!(props.extended || (_slots$extension = slots.extension) != null && _slots$extension.call(slots)));
       const contentHeight = vue.computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
       const extensionHeight = vue.computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
-      provideDefaults({
-        VBtn: {
-          variant: 'text'
-        }
-      });
       useRender(() => {
         var _slots$extension2, _slots$image, _slots$prepend, _slots$default, _slots$append;
         const hasTitle = !!(props.title || slots.title);
@@ -3180,27 +3175,43 @@
             }
           }, {
             default: () => [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots) : vue.createVNode(VImg, null, null)]
-          })]), vue.createVNode("div", {
-            "class": "v-toolbar__content",
-            "style": {
-              height: convertToUnit(contentHeight.value)
+          })]), vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VTabs: {
+                height: convertToUnit(contentHeight.value)
+              }
             }
-          }, [slots.prepend && vue.createVNode("div", {
-            "class": "v-toolbar__prepend"
-          }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && vue.createVNode(VToolbarTitle, {
-            "key": "title",
-            "text": props.title
           }, {
-            text: slots.title
-          }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && vue.createVNode("div", {
-            "class": "v-toolbar__append"
-          }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), vue.createVNode(VExpandTransition, null, {
-            default: () => [isExtended.value && vue.createVNode("div", {
-              "class": "v-toolbar__extension",
+            default: () => [vue.createVNode("div", {
+              "class": "v-toolbar__content",
               "style": {
+                height: convertToUnit(contentHeight.value)
+              }
+            }, [slots.prepend && vue.createVNode("div", {
+              "class": "v-toolbar__prepend"
+            }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), hasTitle && vue.createVNode(VToolbarTitle, {
+              "key": "title",
+              "text": props.title
+            }, {
+              text: slots.title
+            }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && vue.createVNode("div", {
+              "class": "v-toolbar__append"
+            }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])])]
+          }), vue.createVNode(VDefaultsProvider, {
+            "defaults": {
+              VTabs: {
                 height: convertToUnit(extensionHeight.value)
               }
-            }, [extension])]
+            }
+          }, {
+            default: () => [vue.createVNode(VExpandTransition, null, {
+              default: () => [isExtended.value && vue.createVNode("div", {
+                "class": "v-toolbar__extension",
+                "style": {
+                  height: convertToUnit(extensionHeight.value)
+                }
+              }, [extension])]
+            })]
           })]
         });
       });
@@ -3216,7 +3227,7 @@
 
   // Types
 
-  const VAppBar = defineComponent({
+  const VAppBar = genericComponent()({
     name: 'VAppBar',
     props: {
       // TODO: Implement scrolling techniques
@@ -5691,7 +5702,7 @@
     const isDisabled = vue.computed(() => !!(props.disabled || form != null && form.isDisabled.value));
     const isReadonly = vue.computed(() => !!(props.readonly || form != null && form.isReadonly.value));
     const errorMessages = vue.computed(() => {
-      return props.errorMessages.length ? wrapInArray(props.errorMessages) : internalErrorMessages.value;
+      return props.errorMessages.length ? wrapInArray(props.errorMessages.slice(0, Math.max(0, +props.maxErrors))) : internalErrorMessages.value;
     });
     const isValid = vue.computed(() => {
       if (props.error || errorMessages.value.length) return false;
@@ -6729,7 +6740,8 @@
     emits: {
       'click:close': e => true,
       'update:modelValue': value => true,
-      'group:selected': val => true
+      'group:selected': val => true,
+      click: e => true
     },
     setup(props, _ref) {
       let {
@@ -6763,10 +6775,18 @@
       const isActive = useProxiedModel(props, 'modelValue');
       const group = useGroupItem(props, VChipGroupSymbol, false);
       const link = useLink(props, attrs);
+      const isClickable = vue.computed(() => !props.disabled && (!!group || link.isClickable.value || props.link));
       function onCloseClick(e) {
         isActive.value = false;
         emit('click:close', e);
       }
+      function onClick(e) {
+        var _link$navigate;
+        emit('click', e);
+        if (!isClickable.value) return;
+        (_link$navigate = link.navigate) == null ? void 0 : _link$navigate.call(link, e);
+        group == null ? void 0 : group.toggle();
+      }
       return () => {
         var _slots$default;
         const Tag = link.isLink.value ? 'a' : props.tag;
@@ -6775,8 +6795,6 @@
         const hasFilter = !!(slots.filter || props.filter) && group;
         const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar);
         const hasColor = !group || group.isSelected.value;
-        const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link);
-        const onClickFunc = props.link ? props.link : group == null ? void 0 : group.toggle;
         return isActive.value && vue.withDirectives(vue.createVNode(Tag, {
           "class": ['v-chip', {
             'v-chip--disabled': props.disabled,
@@ -6789,9 +6807,9 @@
           "disabled": props.disabled || undefined,
           "draggable": props.draggable,
           "href": link.href.value,
-          "onClick": isClickable && onClickFunc
+          "onClick": onClick
         }, {
-          default: () => [genOverlays(isClickable, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
+          default: () => [genOverlays(isClickable.value, 'v-chip'), hasFilter && vue.createVNode(VDefaultsProvider, {
             "key": "filter",
             "defaults": {
               VIcon: {
@@ -6861,7 +6879,7 @@
               "onClick": onCloseClick
             }, [slots.close ? slots.close() : vue.createVNode(VIcon, null, null)])]
           })]
-        }), [[vue.resolveDirective("ripple"), isClickable && props.ripple, null]]);
+        }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple, null]]);
       };
     }
   });
@@ -7657,7 +7675,8 @@
               "key": "prepend-icon"
             }, null), (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value)])]
           }), vue.createVNode("div", {
-            "class": "v-list-item__content"
+            "class": "v-list-item__content",
+            "data-no-activator": ""
           }, [hasTitle && vue.createVNode(VListItemTitle, {
             "key": "title"
           }, {
@@ -8540,7 +8559,9 @@
       updateLocation.value = undefined;
       if (!(IN_BROWSER && data.isActive.value && props.locationStrategy)) return;
       scope = vue.effectScope();
-      await vue.nextTick();
+      if (!(props.locationStrategy === 'connected')) {
+        await vue.nextTick();
+      }
       scope.run(() => {
         if (typeof props.locationStrategy === 'function') {
           var _props$locationStrate;
@@ -11750,13 +11771,13 @@
     let hsva = null;
     if (typeof color === 'string') {
       const hex = parseHex(color);
-      hsva = HexToHSVA(hex);
+      hsva = HexToHSV(hex);
     }
     if (typeof color === 'object') {
       if (has(color, ['r', 'g', 'b'])) {
-        hsva = RGBAtoHSVA(color);
+        hsva = RGBtoHSV(color);
       } else if (has(color, ['h', 's', 'l'])) {
-        hsva = HSLAtoHSVA(color);
+        hsva = HSLtoHSV(color);
       } else if (has(color, ['h', 's', 'v'])) {
         hsva = color;
       }
@@ -11778,12 +11799,12 @@
   }
   function extractColor(color, input) {
     if (input == null || typeof input === 'string') {
-      const hex = HSVAtoHex(color);
+      const hex = HSVtoHex(color);
       if (color.a === 1) return hex.slice(0, 7);else return hex;
     }
     if (typeof input === 'object') {
       let converted;
-      if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color);else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color);else if (has(input, ['h', 's', 'v'])) converted = color;
+      if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color);else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color);else if (has(input, ['h', 's', 'v'])) converted = color;
       return stripAlpha(converted, !has(input, ['a']));
     }
     return color;
@@ -11830,14 +11851,19 @@
       label: 'A',
       max: 1,
       step: 0.01,
-      getValue: c => Math.round(c.a * 100) / 100,
+      getValue: _ref => {
+        let {
+          a
+        } = _ref;
+        return a ? Math.round(a * 100) / 100 : 1;
+      },
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
       })
     }],
-    to: HSVAtoRGBA,
-    from: RGBAtoHSVA
+    to: HSVtoRGB,
+    from: RGBtoHSV
   };
   const rgb = {
     ...rgba,
@@ -11879,14 +11905,19 @@
       label: 'A',
       max: 1,
       step: 0.01,
-      getValue: c => Math.round(c.a * 100) / 100,
+      getValue: _ref2 => {
+        let {
+          a
+        } = _ref2;
+        return a ? Math.round(a * 100) / 100 : 1;
+      },
       getColor: (c, v) => ({
         ...c,
         a: Number(v)
       })
     }],
-    to: HSVAtoHSLA,
-    from: HSLAtoHSVA
+    to: HSVtoHSL,
+    from: HSLtoHSV
   };
   const hsl = {
     ...hsla,
@@ -11901,8 +11932,8 @@
       getValue: c => c,
       getColor: (c, v) => v
     }],
-    to: HSVAtoHex,
-    from: HexToHSVA
+    to: HSVtoHex,
+    from: HexToHSV
   };
   const hex = {
     ...hexa,
@@ -12668,7 +12699,7 @@
           "class": "v-color-picker-preview__dot"
         }, [vue.createVNode("div", {
           "style": {
-            background: HSVAtoCSS(props.color ?? nullColor)
+            background: HSVtoCSS(props.color ?? nullColor)
           }
         }, null)]), vue.createVNode("div", {
           "class": "v-color-picker-preview__sliders"
@@ -13209,7 +13240,7 @@
         "theme": props.theme,
         "class": ['v-color-picker'],
         "style": {
-          '--v-color-picker-color-hsv': HSVAtoCSS({
+          '--v-color-picker-color-hsv': HSVtoCSS({
             ...(currentColor.value ?? nullColor),
             a: 1
           })
@@ -14222,7 +14253,7 @@
       useRender(() => vue.createVNode(props.tag, {
         "ref": resizeRef,
         "class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles, props.app ? layoutItemStyles.value : undefined]
+        "style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : undefined]
       }, slots));
       return {};
     }
@@ -14784,7 +14815,8 @@
           "style": dimensionStyles.value
         }, {
           default: () => [isActive.value && vue.createVNode(MaybeTransition, {
-            "transition": props.transition
+            "transition": props.transition,
+            "appear": true
           }, {
             default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
           })]
@@ -15244,7 +15276,7 @@
       const isTemporary = vue.computed(() => !props.permanent && (mobile.value || props.temporary));
       const isSticky = vue.computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
       if (!props.disableResizeWatcher) {
-        vue.watch(isTemporary, val => !props.permanent && (isActive.value = !val));
+        vue.watch(isTemporary, val => !props.permanent && vue.nextTick(() => isActive.value = !val));
       }
       if (!props.disableRouteWatcher && router) {
         vue.watch(router.currentRoute, () => isTemporary.value && (isActive.value = false));
@@ -15872,8 +15904,7 @@
               isReadonly
             } = _ref2;
             return vue.createVNode(vue.Fragment, null, [label && vue.createVNode(VLabel, {
-              "for": id.value,
-              "clickable": true
+              "for": id.value
             }, {
               default: () => [label]
             }), vue.createVNode(VSelectionControlGroup, vue.mergeProps(controlProps, {
@@ -18167,7 +18198,7 @@
       locale
     };
   }
-  const version$1 = "3.0.2";
+  const version$1 = "3.0.4";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -18188,7 +18219,7 @@
       ...options
     });
   };
-  const version = "3.0.2";
+  const version = "3.0.4";
   createVuetify.version = version;
 
   exports.components = components;