@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VAvatar/VAvatar.css

@@ -11,8 +11,6 @@
   transition-property: width, height;
   vertical-align: middle;
   border-radius: 50%;
-  background: transparent;
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
 }
 .v-avatar.v-avatar--size-x-small {
   --v-avatar-height: 24px;
@@ -41,6 +39,50 @@
   height: calc(var(--v-avatar-height) + -8px);
   width: calc(var(--v-avatar-height) + -8px);
 }
+.v-avatar--variant-plain, .v-avatar--variant-outlined, .v-avatar--variant-text, .v-avatar--variant-tonal {
+  background: transparent;
+  color: inherit;
+}
+.v-avatar--variant-plain {
+  opacity: 0.62;
+}
+.v-avatar--variant-plain:focus, .v-avatar--variant-plain:hover {
+  opacity: 1;
+}
+.v-avatar--variant-plain .v-avatar__overlay {
+  display: none;
+}
+.v-avatar--variant-elevated, .v-avatar--variant-flat {
+  background: var(--v-theme-surface);
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+.v-avatar--variant-elevated {
+  box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-avatar--variant-flat {
+  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-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-avatar--variant-outlined {
+  border: thin solid currentColor;
+}
+.v-avatar--variant-text .v-avatar__overlay {
+  background: currentColor;
+}
+.v-avatar--variant-tonal .v-avatar__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+}
 .v-avatar--rounded {
   border-radius: 4px;
+}
+.v-avatar .v-img {
+  height: 100%;
+  width: 100%;
 }

package/lib/components/VAvatar/VAvatar.mjs

@@ -5,17 +5,15 @@ import "./VAvatar.css"; // Components
 import { VIcon } from "../VIcon/index.mjs";
 import { VImg } from "../VImg/index.mjs"; // Composables
 
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
-import { makeTagProps } from "../../composables/tag.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs";
-import { IconValue } from "../../composables/icons.mjs"; // Utilities
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
 import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
-import { toRef } from 'vue';
 export const makeVAvatarProps = propsFactory({
-  color: String,
   start: Boolean,
   end: Boolean,
   icon: IconValue,
@@ -23,7 +21,10 @@ export const makeVAvatarProps = propsFactory({
   ...makeDensityProps(),
   ...makeRoundedProps(),
   ...makeSizeProps(),
-  ...makeTagProps()
+  ...makeTagProps(),
+  ...makeVariantProps({
+    variant: 'flat'
+  })
 });
 export const VAvatar = defineComponent({
   name: 'VAvatar',
@@ -34,9 +35,10 @@ export const VAvatar = defineComponent({
       slots
     } = _ref;
     const {
-      backgroundColorClasses,
-      backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(props);
     const {
       densityClasses
     } = useDensity(props);
@@ -54,15 +56,17 @@ export const VAvatar = defineComponent({
         "class": ['v-avatar', {
           'v-avatar--start': props.start,
           'v-avatar--end': props.end
-        }, backgroundColorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value],
-        "style": [backgroundColorStyles.value, sizeStyles.value]
+        }, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
+        "style": [colorStyles.value, sizeStyles.value]
       }, {
         default: () => [props.image ? _createVNode(VImg, {
+          "key": "image",
           "src": props.image,
           "alt": ""
         }, null) : props.icon ? _createVNode(VIcon, {
+          "key": "icon",
           "icon": props.icon
-        }, null) : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+        }, null) : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), genOverlays(false, 'v-avatar')]
       });
     });
     return {};

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

@@ -1 +1 @@
-{"version":3,"file":"VAvatar.mjs","names":["VIcon","VImg","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","useBackgroundColor","IconValue","defineComponent","propsFactory","useRender","toRef","makeVAvatarProps","color","String","start","Boolean","end","icon","image","VAvatar","name","props","setup","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","sizeClasses","sizeStyles","value","default"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { defineComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVAvatarProps = propsFactory({\n  color: String,\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n})\n\nexport const VAvatar = defineComponent({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\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          backgroundColorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          sizeStyles.value,\n        ]}\n      >\n        { props.image\n          ? (<VImg src={ props.image } alt=\"\" />)\n          : props.icon\n            ? (<VIcon icon={ props.icon } />)\n            : slots.default?.()\n        }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,K;SACAC,I,6BAET;;SACSC,gB,EAAkBC,U;SAClBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,Y;SACAC,kB;SACAC,S,uCAET;;SACSC,e,EAAiBC,Y,EAAcC,S;AACxC,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,YAAY,CAAC;EAC3CI,KAAK,EAAEC,MADoC;EAE3CC,KAAK,EAAEC,OAFoC;EAG3CC,GAAG,EAAED,OAHsC;EAI3CE,IAAI,EAAEX,SAJqC;EAK3CY,KAAK,EAAEL,MALoC;EAO3C,GAAGf,gBAAgB,EAPwB;EAQ3C,GAAGE,gBAAgB,EARwB;EAS3C,GAAGE,aAAa,EAT2B;EAU3C,GAAGE,YAAY;AAV4B,CAAD,CAArC;AAaP,OAAO,MAAMe,OAAO,GAAGZ,eAAe,CAAC;EACrCa,IAAI,EAAE,SAD+B;EAGrCC,KAAK,EAAEV,gBAAgB,EAHc;;EAKrCW,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,MAAM;MAAEC,sBAAF;MAA0BC;IAA1B,IAAoDpB,kBAAkB,CAACK,KAAK,CAACW,KAAD,EAAQ,OAAR,CAAN,CAA5E;IACA,MAAM;MAAEK;IAAF,IAAqB3B,UAAU,CAACsB,KAAD,CAArC;IACA,MAAM;MAAEM;IAAF,IAAqB1B,UAAU,CAACoB,KAAD,CAArC;IACA,MAAM;MAAEO,WAAF;MAAeC;IAAf,IAA8B1B,OAAO,CAACkB,KAAD,CAA3C;IAEAZ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,UADK,EAEL;UACE,mBAAmBY,KAAK,CAACP,KAD3B;UAEE,iBAAiBO,KAAK,CAACL;QAFzB,CAFK,EAMLQ,sBAAsB,CAACM,KANlB,EAOLJ,cAAc,CAACI,KAPV,EAQLH,cAAc,CAACG,KARV,EASLF,WAAW,CAACE,KATP,CAFD;QAAA,SAaC,CACLL,qBAAqB,CAACK,KADjB,EAELD,UAAU,CAACC,KAFN;MAbD;QAAA,gBAkBJT,KAAK,CAACH,KAAN;UAAA,OACeG,KAAK,CAACH,KADrB;UAAA,OACiC;QADjC,WAEEG,KAAK,CAACJ,IAAN;UAAA,QACiBI,KAAK,CAACJ;QADvB,6BAEEM,KAAK,CAACQ,OAFR,qBAEE,oBAAAR,KAAK,CAtBL;MAAA;IAAA,CAAD,CAAT;IA2BA,OAAO,EAAP;EACD;;AAvCoC,CAAD,CAA/B"}
+{"version":3,"file":"VAvatar.mjs","names":["VIcon","VImg","genOverlays","makeVariantProps","useVariant","IconValue","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","defineComponent","propsFactory","useRender","makeVAvatarProps","start","Boolean","end","icon","image","String","variant","VAvatar","name","props","setup","slots","colorClasses","colorStyles","variantClasses","densityClasses","roundedClasses","sizeClasses","sizeStyles","value","default"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVAvatarProps = propsFactory({\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n})\n\nexport const VAvatar = defineComponent({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\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          colorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n          variantClasses.value,\n        ]}\n        style={[\n          colorStyles.value,\n          sizeStyles.value,\n        ]}\n      >\n        { props.image\n          ? (<VImg key=\"image\" src={ props.image } alt=\"\" />)\n          : props.icon\n            ? (<VIcon key=\"icon\" icon={ props.icon } />)\n            : slots.default?.()\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":";AAAA;AACA,uB,CAEA;;SACSA,K;SACAC,I,6BAET;;SACSC,W,EAAaC,gB,EAAkBC,U;SAC/BC,S;SACAC,gB,EAAkBC,U;SAClBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,Y,qCAET;;SACSC,e,EAAiBC,Y,EAAcC,S;AAExC,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3CG,KAAK,EAAEC,OADoC;EAE3CC,GAAG,EAAED,OAFsC;EAG3CE,IAAI,EAAEf,SAHqC;EAI3CgB,KAAK,EAAEC,MAJoC;EAM3C,GAAGhB,gBAAgB,EANwB;EAO3C,GAAGE,gBAAgB,EAPwB;EAQ3C,GAAGE,aAAa,EAR2B;EAS3C,GAAGE,YAAY,EAT4B;EAU3C,GAAGT,gBAAgB,CAAC;IAAEoB,OAAO,EAAE;EAAX,CAAD;AAVwB,CAAD,CAArC;AAaP,OAAO,MAAMC,OAAO,GAAGX,eAAe,CAAC;EACrCY,IAAI,EAAE,SAD+B;EAGrCC,KAAK,EAAEV,gBAAgB,EAHc;;EAKrCW,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,MAAM;MAAEC,YAAF;MAAgBC,WAAhB;MAA6BC;IAA7B,IAAgD3B,UAAU,CAACsB,KAAD,CAAhE;IACA,MAAM;MAAEM;IAAF,IAAqBzB,UAAU,CAACmB,KAAD,CAArC;IACA,MAAM;MAAEO;IAAF,IAAqBxB,UAAU,CAACiB,KAAD,CAArC;IACA,MAAM;MAAEQ,WAAF;MAAeC;IAAf,IAA8BxB,OAAO,CAACe,KAAD,CAA3C;IAEAX,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,UADK,EAEL;UACE,mBAAmBW,KAAK,CAACT,KAD3B;UAEE,iBAAiBS,KAAK,CAACP;QAFzB,CAFK,EAMLU,YAAY,CAACO,KANR,EAOLJ,cAAc,CAACI,KAPV,EAQLH,cAAc,CAACG,KARV,EASLF,WAAW,CAACE,KATP,EAULL,cAAc,CAACK,KAVV,CAFD;QAAA,SAcC,CACLN,WAAW,CAACM,KADP,EAELD,UAAU,CAACC,KAFN;MAdD;QAAA,gBAmBJV,KAAK,CAACL,KAAN;UAAA,OACa,OADb;UAAA,OAC2BK,KAAK,CAACL,KADjC;UAAA,OAC6C;QAD7C,WAEEK,KAAK,CAACN,IAAN;UAAA,OACc,MADd;UAAA,QAC4BM,KAAK,CAACN;QADlC,6BAEEQ,KAAK,CAACS,OAFR,qBAEE,oBAAAT,KAAK,CAvBL,EA0BJ1B,WAAW,CAAC,KAAD,EAAQ,UAAR,CA1BP;MAAA;IAAA,CAAD,CAAT;IA8BA,OAAO,EAAP;EACD;;AA1CoC,CAAD,CAA/B"}

package/lib/components/VAvatar/VAvatar.sass

@@ -19,7 +19,11 @@
   @include avatar-sizes($avatar-sizes)
   @include avatar-density(('height', 'width'), $avatar-density)
   @include tools.rounded($avatar-border-radius)
-  @include tools.theme($avatar-theme...)
+  @include tools.variant($avatar-variants...)
 
   &--rounded
     @include tools.rounded($avatar-rounded-border-radius)
+
+  .v-img
+    height: 100%
+    width: 100%

package/lib/components/VAvatar/_variables.scss

@@ -3,12 +3,14 @@
 @use "../../styles/tools/functions";
 
 // Defaults
-$avatar-background: transparent !default;
+$avatar-background: var(--v-theme-surface) !default;
 $avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
 $avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$avatar-elevation: 1 !default;
 $avatar-height: 40px !default;
 $avatar-line-height: normal !default;
+$avatar-plain-opacity: .62 !default;
 $avatar-rounded-border-radius: variables.$border-radius-root !default;
 $avatar-vertical-align: middle !default;
 $avatar-width: 40px !default;
@@ -22,7 +24,10 @@ $avatar-sizes: functions.map-deep-merge(
   $avatar-sizes
 );
 
-$avatar-theme: (
+$avatar-variants: (
   $avatar-background,
-  $avatar-color
-) !default;
+  $avatar-color,
+  $avatar-elevation,
+  $avatar-plain-opacity,
+  'v-avatar'
+);

package/lib/components/VAvatar/index.d.ts

@@ -0,0 +1,80 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VAvatar: vue.DefineComponent<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    start: BooleanConstructor;
+    end: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    image: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    start: BooleanConstructor;
+    end: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    image: StringConstructor;
+}>>, {
+    end: boolean;
+    start: boolean;
+    size: string | number;
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+}>;
+declare type VAvatar = InstanceType<typeof VAvatar>;
+
+export { VAvatar };

package/lib/components/VBadge/index.d.ts

@@ -0,0 +1,123 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VBadge: vue.DefineComponent<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        });
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    location: {
+        type: vue.PropType<Anchor | (Anchor & {})>;
+        default: Anchor | (Anchor & {});
+    };
+    bordered: BooleanConstructor;
+    color: StringConstructor;
+    content: (StringConstructor | NumberConstructor)[];
+    dot: BooleanConstructor;
+    floating: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    inline: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    textColor: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        });
+    };
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    location: {
+        type: vue.PropType<Anchor | (Anchor & {})>;
+        default: Anchor | (Anchor & {});
+    };
+    bordered: BooleanConstructor;
+    color: StringConstructor;
+    content: (StringConstructor | NumberConstructor)[];
+    dot: BooleanConstructor;
+    floating: BooleanConstructor;
+    icon: vue.PropType<IconValue>;
+    inline: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    textColor: StringConstructor;
+}>>, {
+    inline: boolean;
+    location: Anchor | (Anchor & {});
+    transition: string | boolean | (vue.TransitionProps & {
+        component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+    });
+    label: string;
+    tag: string;
+    dot: boolean;
+    rounded: string | number | boolean;
+    floating: boolean;
+    modelValue: boolean;
+    bordered: boolean;
+}>;
+declare type VBadge = InstanceType<typeof VBadge>;
+
+export { VBadge };

package/lib/components/VBanner/index.d.ts

@@ -0,0 +1,122 @@
+import * as vue from 'vue';
+import { JSXComponent, PropType } from 'vue';
+
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+declare type Tblock = typeof block[number];
+declare type Tinline = typeof inline[number];
+declare type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VBanner: vue.DefineComponent<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    avatar: StringConstructor;
+    color: StringConstructor;
+    icon: PropType<IconValue>;
+    lines: PropType<"one" | "two" | "three">;
+    stacked: BooleanConstructor;
+    sticky: BooleanConstructor;
+    text: StringConstructor;
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    position: {
+        type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
+        validator: (v: any) => boolean;
+    };
+    location: PropType<Anchor>;
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    avatar: StringConstructor;
+    color: StringConstructor;
+    icon: PropType<IconValue>;
+    lines: PropType<"one" | "two" | "three">;
+    stacked: BooleanConstructor;
+    sticky: BooleanConstructor;
+    text: StringConstructor;
+}>>, {
+    tag: string;
+    sticky: boolean;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    stacked: boolean;
+}>;
+declare type VBanner = InstanceType<typeof VBanner>;
+
+declare const VBannerActions: vue.DefineComponent<{
+    color: StringConstructor;
+    density: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    color: StringConstructor;
+    density: StringConstructor;
+}>>, {}>;
+
+declare const VBannerText: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+
+export { VBanner, VBannerActions, VBannerText };

package/lib/components/VBottomNavigation/index.d.ts

@@ -0,0 +1,143 @@
+import * as vue from 'vue';
+
+declare const VBottomNavigation: vue.DefineComponent<{
+    theme: StringConstructor;
+    modelValue: Omit<{
+        type: null;
+        default: undefined;
+    }, "type" | "default"> & {
+        type: vue.PropType<any>;
+        default: any;
+    };
+    multiple: BooleanConstructor;
+    mandatory: vue.PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    name: Omit<{
+        type: StringConstructor;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    grow: BooleanConstructor;
+    mode: {
+        type: StringConstructor;
+        validator: (v: any) => boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    modelValue: Omit<{
+        type: null;
+        default: undefined;
+    }, "type" | "default"> & {
+        type: vue.PropType<any>;
+        default: any;
+    };
+    multiple: BooleanConstructor;
+    mandatory: vue.PropType<boolean | "force">;
+    max: NumberConstructor;
+    selectedClass: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    name: Omit<{
+        type: StringConstructor;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    grow: BooleanConstructor;
+    mode: {
+        type: StringConstructor;
+        validator: (v: any) => boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}, {
+    absolute: boolean;
+    height: string | number;
+    name: string;
+    order: string | number;
+    disabled: boolean;
+    multiple: boolean;
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    modelValue: any;
+    selectedClass: string;
+    grow: boolean;
+}>;
+declare type VBottomNavigation = InstanceType<typeof VBottomNavigation>;
+
+export { VBottomNavigation };

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs

@@ -28,9 +28,9 @@ export const VBreadcrumbsItem = defineComponent({
     } = _ref;
     const link = useLink(props, attrs);
     const isActive = computed(() => {
-      var _link$isExactActive;
+      var _link$isActive;
 
-      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value);
+      return props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value);
     });
     const color = computed(() => isActive.value ? props.activeColor : props.color);
     const {