@vuetify/nightly 3.7.0-beta.1-dev.2024-07-29 → 3.7.0-beta.1-dev.2024-08-01

package/lib/components/VAlert/VAlert.css

@@ -7,7 +7,6 @@
   padding: 16px;
   overflow: hidden;
   --v-border-color: currentColor;
-  border-radius: 4px;
 }
 .v-alert--absolute {
   position: absolute;
@@ -18,6 +17,9 @@
 .v-alert--sticky {
   position: sticky;
 }
+.v-alert {
+  border-radius: 4px;
+}
 .v-alert--variant-plain, .v-alert--variant-outlined, .v-alert--variant-text, .v-alert--variant-tonal {
   background: transparent;
   color: inherit;
@@ -118,6 +120,8 @@
   right: 0;
   top: 0;
   width: 100%;
+}
+.v-alert__border {
   border-color: currentColor;
   border-style: solid;
   border-width: 0;

package/lib/components/VAutocomplete/VAutocomplete.css

@@ -23,7 +23,11 @@
 
 .v-autocomplete__content {
   overflow: hidden;
+}
+.v-autocomplete__content {
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-autocomplete__content {
   border-radius: 4px;
 }
 .v-autocomplete__mask {

package/lib/components/VAutocomplete/index.d.mts

@@ -626,7 +626,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -654,8 +654,9 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -681,6 +682,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -731,7 +733,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -757,6 +759,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -810,7 +813,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -1166,7 +1169,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1194,8 +1197,9 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1221,6 +1225,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1271,7 +1276,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1297,6 +1302,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -1350,7 +1356,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -1820,7 +1826,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         }) | undefined;
         menuProps?: (Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1848,8 +1854,9 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1875,6 +1882,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -1925,7 +1933,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -1951,6 +1959,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -2004,7 +2013,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
         itemColor?: string | undefined;
         autoSelectFirst?: boolean | "exact" | undefined;
     } & {
@@ -2409,7 +2418,7 @@ declare const VAutocomplete: {
         }) => vue.VNodeChild) | undefined;
     }) | undefined;
     menuProps?: (Partial<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2437,8 +2446,9 @@ declare const VAutocomplete: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     }> & Omit<{
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2464,6 +2474,7 @@ declare const VAutocomplete: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
         height?: string | number | undefined;
@@ -2514,7 +2525,7 @@ declare const VAutocomplete: {
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-        location: Anchor;
+        location: NonNullable<Anchor> | undefined;
         origin: "auto" | Anchor | "overlap";
         transition: NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
@@ -2540,6 +2551,7 @@ declare const VAutocomplete: {
         noClickAnimation: boolean;
         persistent: boolean;
         scrim: NonNullable<string | boolean>;
+        submenu: boolean;
     } & {
         offset?: string | number | number[] | undefined;
         id?: string | undefined;
@@ -2593,7 +2605,7 @@ declare const VAutocomplete: {
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">) | undefined;
+    }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">) | undefined;
     itemColor?: string | undefined;
     autoSelectFirst?: boolean | "exact" | undefined;
 } & {
@@ -3206,7 +3218,7 @@ declare const VAutocomplete: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3234,8 +3246,9 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3261,6 +3274,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3311,7 +3325,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3337,6 +3351,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -3390,7 +3405,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {
@@ -3850,7 +3865,7 @@ declare const VAutocomplete: {
     };
     menuProps: {
         type: PropType<Partial<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3878,8 +3893,9 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         }> & Omit<{
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3905,6 +3921,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
             height?: string | number | undefined;
@@ -3955,7 +3972,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
-            location: Anchor;
+            location: NonNullable<Anchor> | undefined;
             origin: "auto" | Anchor | "overlap";
             transition: NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
@@ -3981,6 +3998,7 @@ declare const VAutocomplete: {
             noClickAnimation: boolean;
             persistent: boolean;
             scrim: NonNullable<string | boolean>;
+            submenu: boolean;
         } & {
             offset?: string | number | number[] | undefined;
             id?: string | undefined;
@@ -4034,7 +4052,7 @@ declare const VAutocomplete: {
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim">>;
+        }, "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "modelValue" | "locationStrategy" | "scrollStrategy" | "closeDelay" | "openDelay" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "persistent" | "scrim" | "submenu">>;
     };
     multiple: BooleanConstructor;
     noDataText: {

package/lib/components/VAvatar/VAvatar.css

@@ -10,10 +10,6 @@
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: width, height;
   vertical-align: middle;
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: thin;
-  border-radius: 50%;
 }
 .v-avatar.v-avatar--size-x-small {
   --v-avatar-height: 24px;
@@ -42,10 +38,18 @@
   height: calc(var(--v-avatar-height) + -8px);
   width: calc(var(--v-avatar-height) + -8px);
 }
+.v-avatar {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: thin;
+}
 .v-avatar--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-avatar {
+  border-radius: 50%;
+}
 .v-avatar--variant-plain, .v-avatar--variant-outlined, .v-avatar--variant-text, .v-avatar--variant-tonal {
   background: transparent;
   color: inherit;

package/lib/components/VAvatar/VAvatar.mjs

@@ -81,7 +81,7 @@ export const VAvatar = genericComponent()({
         "defaults": {
           VImg: {
             cover: true,
-            image: props.image
+            src: props.image
           },
           VIcon: {
             icon: props.icon

package/lib/components/VAvatar/VAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VAvatar.mjs","names":["VDefaultsProvider","VIcon","VImg","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","genericComponent","propsFactory","useRender","makeVAvatarProps","start","Boolean","end","icon","image","String","text","variant","VAvatar","name","props","setup","_ref","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","roundedClasses","sizeClasses","sizeStyles","_createVNode","tag","value","class","style","default","cover"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVAvatarProps = propsFactory({\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n  text: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n}, 'VAvatar')\n\nexport const VAvatar = genericComponent()({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--start': props.start,\n            'v-avatar--end': props.end,\n          },\n          themeClasses.value,\n          borderClasses.value,\n          colorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n          variantClasses.value,\n          props.class,\n        ]}\n        style={[\n          colorStyles.value,\n          sizeStyles.value,\n          props.style,\n        ]}\n      >\n        { !slots.default ? (\n          props.image\n            ? (<VImg key=\"image\" src={ props.image } alt=\"\" cover />)\n            : props.icon\n              ? (<VIcon key=\"icon\" icon={ props.icon } />)\n              : props.text\n        ) : (\n          <VDefaultsProvider\n            key=\"content-defaults\"\n            defaults={{\n              VImg: {\n                cover: true,\n                image: props.image,\n              },\n              VIcon: {\n                icon: props.icon,\n              },\n            }}\n          >\n            { slots.default() }\n          </VDefaultsProvider>\n        )}\n\n        { genOverlays(false, 'v-avatar') }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VAvatar.mjs","names":["VDefaultsProvider","VIcon","VImg","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","genericComponent","propsFactory","useRender","makeVAvatarProps","start","Boolean","end","icon","image","String","text","variant","VAvatar","name","props","setup","_ref","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","roundedClasses","sizeClasses","sizeStyles","_createVNode","tag","value","class","style","default","cover","src"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVAvatarProps = propsFactory({\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n  text: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n}, 'VAvatar')\n\nexport const VAvatar = genericComponent()({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--start': props.start,\n            'v-avatar--end': props.end,\n          },\n          themeClasses.value,\n          borderClasses.value,\n          colorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n          variantClasses.value,\n          props.class,\n        ]}\n        style={[\n          colorStyles.value,\n          sizeStyles.value,\n          props.style,\n        ]}\n      >\n        { !slots.default ? (\n          props.image\n            ? (<VImg key=\"image\" src={ props.image } alt=\"\" cover />)\n            : props.icon\n              ? (<VIcon key=\"icon\" icon={ props.icon } />)\n              : props.text\n        ) : (\n          <VDefaultsProvider\n            key=\"content-defaults\"\n            defaults={{\n              VImg: {\n                cover: true,\n                src: props.image,\n              },\n              VIcon: {\n                icon: props.icon,\n              },\n            }}\n          >\n            { slots.default() }\n          </VDefaultsProvider>\n        )}\n\n        { genOverlays(false, 'v-avatar') }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VBadge/VBadge.css

@@ -19,6 +19,8 @@
   text-indent: 0;
   transition: 0.225s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
+}
+.v-badge__badge {
   background: rgb(var(--v-theme-surface-variant));
   color: rgba(var(--v-theme-on-surface-variant), var(--v-high-emphasis-opacity));
 }

package/lib/components/VBanner/VBanner.css

@@ -12,18 +12,19 @@
   padding-bottom: 16px;
   position: relative;
   width: 100%;
+}
+.v-banner {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0 0 thin 0;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  border-radius: 0;
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-banner--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-banner {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
 .v-banner--absolute {
   position: absolute;
 }
@@ -33,6 +34,13 @@
 .v-banner--sticky {
   position: sticky;
 }
+.v-banner {
+  border-radius: 0;
+}
+.v-banner {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-banner--rounded {
   border-radius: 4px;
 }

package/lib/components/VBottomNavigation/VBottomNavigation.css

@@ -4,17 +4,23 @@
   overflow: hidden;
   position: absolute;
   transition: transform, color, 0.2s, 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-bottom-navigation {
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   border-style: solid;
   border-width: 0;
-  border-radius: 0;
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
 .v-bottom-navigation--border {
   border-width: thin;
   box-shadow: none;
 }
+.v-bottom-navigation {
+  border-radius: 0;
+}
+.v-bottom-navigation {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
 .v-bottom-navigation--active {
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
@@ -35,6 +41,8 @@
   text-transform: none;
   transition: inherit;
   width: auto;
+}
+.v-bottom-navigation .v-bottom-navigation__content > .v-btn {
   border-radius: 0;
 }
 .v-bottom-navigation .v-bottom-navigation__content > .v-btn .v-btn__content,

package/lib/components/VBottomSheet/VBottomSheet.css

@@ -17,6 +17,8 @@
   width: 100%;
   max-width: 100%;
   overflow: visible;
+}
+.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
   box-shadow: 0px 7px 8px -4px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 12px 17px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 5px 22px 4px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,

package/lib/components/VBtn/VBtn.css

@@ -20,9 +20,6 @@
   user-select: none;
   vertical-align: middle;
   flex-shrink: 0;
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: 0;
 }
 .v-btn--size-x-small {
   --v-btn-size: 0.625rem;
@@ -76,6 +73,11 @@
   height: calc(var(--v-btn-height) + -12px);
 }
 
+.v-btn {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+}
 .v-btn--border {
   border-width: thin;
   box-shadow: none;
@@ -154,6 +156,13 @@
   position: absolute;
 }
 @supports selector(:focus-visible) {
+  .v-btn::after {
+    pointer-events: none;
+    border: 2px solid currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
   .v-btn::after {
     content: "";
     position: absolute;
@@ -161,11 +170,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    border: 2px solid currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
   }
   .v-btn:focus-visible::after {
     opacity: calc(0.25 * var(--v-theme-overlay-multiplier));
@@ -393,6 +397,10 @@
   transition: opacity 0.2s ease-in-out;
 }
 
+.v-btn__overlay,
+.v-btn__underlay {
+  pointer-events: none;
+}
 .v-btn__overlay,
 .v-btn__underlay {
   position: absolute;
@@ -400,7 +408,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
 }
 
 .v-card-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {

package/lib/components/VBtn/VBtn.mjs

@@ -230,7 +230,7 @@ export const VBtn = genericComponent()({
           "indeterminate": true,
           "width": "2"
         }, null)])]
-      }), [[Ripple, !isDisabled.value && !!props.ripple, '', {
+      }), [[Ripple, !isDisabled.value && props.ripple, '', {
         center: !!props.icon
       }]]);
     });