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

package/lib/components/VBreadcrumbs/VBreadcrumbsItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBreadcrumbsItem.mjs","names":["makeRouterProps","useLink","makeTagProps","useTextColor","computed","defineComponent","useRender","VBreadcrumbsItem","name","props","active","Boolean","activeClass","String","activeColor","color","disabled","title","tag","setup","slots","attrs","link","isActive","isExactActive","value","textColorClasses","textColorStyles","Tag","isLink","href","undefined","navigate","default"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"sourcesContent":["// Composables\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VBreadcrumbsItem = defineComponent({\n  name: 'VBreadcrumbsItem',\n\n  props: {\n    active: Boolean,\n    activeClass: String,\n    activeColor: String,\n    color: String,\n    disabled: Boolean,\n    title: String,\n\n    ...makeRouterProps(),\n    ...makeTagProps({ tag: 'li' }),\n  },\n\n  setup (props, { slots, attrs }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => props.active || link.isExactActive?.value)\n    const color = computed(() => isActive.value ? props.activeColor : props.color)\n\n    const { textColorClasses, textColorStyles } = useTextColor(color)\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : props.tag\n\n      return (\n        <Tag\n          class={[\n            'v-breadcrumbs-item',\n            {\n              'v-breadcrumbs-item--active': isActive.value,\n              'v-breadcrumbs-item--disabled': props.disabled,\n              'v-breadcrumbs-item--link': link.isLink.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n          ]}\n          style={[\n            textColorStyles.value,\n          ]}\n          href={ link.href.value }\n          aria-current={ isActive.value ? 'page' : undefined }\n          onClick={ link.navigate }\n        >\n          { slots.default?.() ?? props.title }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"mappings":";AAAA;SACSA,e,EAAiBC,O;SACjBC,Y;SACAC,Y,uCAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,gBAAgB,GAAGF,eAAe,CAAC;EAC9CG,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,WAAW,EAAEC,MAFR;IAGLC,WAAW,EAAED,MAHR;IAILE,KAAK,EAAEF,MAJF;IAKLG,QAAQ,EAAEL,OALL;IAMLM,KAAK,EAAEJ,MANF;IAQL,GAAGb,eAAe,EARb;IASL,GAAGE,YAAY,CAAC;MAAEgB,GAAG,EAAE;IAAP,CAAD;EATV,CAHuC;;EAe9CC,KAAK,CAAEV,KAAF,QAA2B;IAAA,IAAlB;MAAEW,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,IAAI,GAAGrB,OAAO,CAACQ,KAAD,EAAQY,KAAR,CAApB;IACA,MAAME,QAAQ,GAAGnB,QAAQ,CAAC;MAAA;;MAAA,OAAMK,KAAK,CAACC,MAAN,4BAAgBY,IAAI,CAACE,aAArB,qBAAgB,oBAAoBC,KAApC,CAAN;IAAA,CAAD,CAAzB;IACA,MAAMV,KAAK,GAAGX,QAAQ,CAAC,MAAMmB,QAAQ,CAACE,KAAT,GAAiBhB,KAAK,CAACK,WAAvB,GAAqCL,KAAK,CAACM,KAAlD,CAAtB;IAEA,MAAM;MAAEW,gBAAF;MAAoBC;IAApB,IAAwCxB,YAAY,CAACY,KAAD,CAA1D;IAEAT,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMsB,GAAG,GAAGN,IAAI,CAACO,MAAL,CAAYJ,KAAZ,GAAoB,GAApB,GAA0BhB,KAAK,CAACS,GAA5C;MAEA;QAAA,SAEW,CACL,oBADK,EAEL;UACE,8BAA8BK,QAAQ,CAACE,KADzC;UAEE,gCAAgChB,KAAK,CAACO,QAFxC;UAGE,4BAA4BM,IAAI,CAACO,MAAL,CAAYJ,KAH1C;UAIE,CAAE,GAAEhB,KAAK,CAACG,WAAY,EAAtB,GAA0BW,QAAQ,CAACE,KAAT,IAAkBhB,KAAK,CAACG;QAJpD,CAFK,EAQLc,gBAAgB,CAACD,KARZ,CAFX;QAAA,SAYW,CACLE,eAAe,CAACF,KADX,CAZX;QAAA,QAeWH,IAAI,CAACQ,IAAL,CAAUL,KAfrB;QAAA,gBAgBmBF,QAAQ,CAACE,KAAT,GAAiB,MAAjB,GAA0BM,SAhB7C;QAAA,WAiBcT,IAAI,CAACU;MAjBnB;QAAA,gBAmBM,mBAAAZ,KAAK,CAACa,OAAN,yCAAAb,KAAK,MAAgBX,KAAK,CAACQ,KAnBjC;MAAA;IAsBD,CAzBQ,CAAT;IA2BA,OAAO,EAAP;EACD;;AAlD6C,CAAD,CAAxC"}
+{"version":3,"file":"VBreadcrumbsItem.mjs","names":["makeRouterProps","useLink","makeTagProps","useTextColor","computed","defineComponent","useRender","VBreadcrumbsItem","name","props","active","Boolean","activeClass","String","activeColor","color","disabled","title","tag","setup","slots","attrs","link","isActive","value","textColorClasses","textColorStyles","Tag","isLink","href","undefined","navigate","default"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsItem.tsx"],"sourcesContent":["// Composables\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VBreadcrumbsItem = defineComponent({\n  name: 'VBreadcrumbsItem',\n\n  props: {\n    active: Boolean,\n    activeClass: String,\n    activeColor: String,\n    color: String,\n    disabled: Boolean,\n    title: String,\n\n    ...makeRouterProps(),\n    ...makeTagProps({ tag: 'li' }),\n  },\n\n  setup (props, { slots, attrs }) {\n    const link = useLink(props, attrs)\n    const isActive = computed(() => props.active || link.isActive?.value)\n    const color = computed(() => isActive.value ? props.activeColor : props.color)\n\n    const { textColorClasses, textColorStyles } = useTextColor(color)\n\n    useRender(() => {\n      const Tag = link.isLink.value ? 'a' : props.tag\n\n      return (\n        <Tag\n          class={[\n            'v-breadcrumbs-item',\n            {\n              'v-breadcrumbs-item--active': isActive.value,\n              'v-breadcrumbs-item--disabled': props.disabled,\n              'v-breadcrumbs-item--link': link.isLink.value,\n              [`${props.activeClass}`]: isActive.value && props.activeClass,\n            },\n            textColorClasses.value,\n          ]}\n          style={[\n            textColorStyles.value,\n          ]}\n          href={ link.href.value }\n          aria-current={ isActive.value ? 'page' : undefined }\n          onClick={ link.navigate }\n        >\n          { slots.default?.() ?? props.title }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>\n"],"mappings":";AAAA;SACSA,e,EAAiBC,O;SACjBC,Y;SACAC,Y,uCAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,gBAAgB,GAAGF,eAAe,CAAC;EAC9CG,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,WAAW,EAAEC,MAFR;IAGLC,WAAW,EAAED,MAHR;IAILE,KAAK,EAAEF,MAJF;IAKLG,QAAQ,EAAEL,OALL;IAMLM,KAAK,EAAEJ,MANF;IAQL,GAAGb,eAAe,EARb;IASL,GAAGE,YAAY,CAAC;MAAEgB,GAAG,EAAE;IAAP,CAAD;EATV,CAHuC;;EAe9CC,KAAK,CAAEV,KAAF,QAA2B;IAAA,IAAlB;MAAEW,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,IAAI,GAAGrB,OAAO,CAACQ,KAAD,EAAQY,KAAR,CAApB;IACA,MAAME,QAAQ,GAAGnB,QAAQ,CAAC;MAAA;;MAAA,OAAMK,KAAK,CAACC,MAAN,uBAAgBY,IAAI,CAACC,QAArB,qBAAgB,eAAeC,KAA/B,CAAN;IAAA,CAAD,CAAzB;IACA,MAAMT,KAAK,GAAGX,QAAQ,CAAC,MAAMmB,QAAQ,CAACC,KAAT,GAAiBf,KAAK,CAACK,WAAvB,GAAqCL,KAAK,CAACM,KAAlD,CAAtB;IAEA,MAAM;MAAEU,gBAAF;MAAoBC;IAApB,IAAwCvB,YAAY,CAACY,KAAD,CAA1D;IAEAT,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMqB,GAAG,GAAGL,IAAI,CAACM,MAAL,CAAYJ,KAAZ,GAAoB,GAApB,GAA0Bf,KAAK,CAACS,GAA5C;MAEA;QAAA,SAEW,CACL,oBADK,EAEL;UACE,8BAA8BK,QAAQ,CAACC,KADzC;UAEE,gCAAgCf,KAAK,CAACO,QAFxC;UAGE,4BAA4BM,IAAI,CAACM,MAAL,CAAYJ,KAH1C;UAIE,CAAE,GAAEf,KAAK,CAACG,WAAY,EAAtB,GAA0BW,QAAQ,CAACC,KAAT,IAAkBf,KAAK,CAACG;QAJpD,CAFK,EAQLa,gBAAgB,CAACD,KARZ,CAFX;QAAA,SAYW,CACLE,eAAe,CAACF,KADX,CAZX;QAAA,QAeWF,IAAI,CAACO,IAAL,CAAUL,KAfrB;QAAA,gBAgBmBD,QAAQ,CAACC,KAAT,GAAiB,MAAjB,GAA0BM,SAhB7C;QAAA,WAiBcR,IAAI,CAACS;MAjBnB;QAAA,gBAmBM,mBAAAX,KAAK,CAACY,OAAN,yCAAAZ,KAAK,MAAgBX,KAAK,CAACQ,KAnBjC;MAAA;IAsBD,CAzBQ,CAAT;IA2BA,OAAO,EAAP;EACD;;AAlD6C,CAAD,CAAxC"}

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

@@ -0,0 +1,301 @@
+import * as vue from 'vue';
+import { VNodeChild, JSXComponent, PropType } from 'vue';
+import * as vue_router from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+interface LinkProps {
+    href: string | undefined;
+    replace: boolean | undefined;
+    to: RouteLocationRaw | undefined;
+    exact: boolean | undefined;
+}
+
+declare type BreadcrumbItem = string | (LinkProps & {
+    text: string;
+    disabled?: boolean;
+});
+declare const VBreadcrumbs: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            disabled: boolean;
+            tag: string;
+            rounded: string | number | boolean;
+            density: "default" | "compact" | "comfortable" | null;
+            divider: string;
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+            tag: Omit<{
+                type: StringConstructor;
+                default: string;
+            }, "type" | "default"> & {
+                type: PropType<string>;
+                default: string;
+            };
+            rounded: {
+                type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            activeClass: StringConstructor;
+            activeColor: StringConstructor;
+            bgColor: StringConstructor;
+            color: StringConstructor;
+            disabled: BooleanConstructor;
+            divider: {
+                type: StringConstructor;
+                default: string;
+            };
+            icon: PropType<IconValue>;
+            items: {
+                type: PropType<BreadcrumbItem[]>;
+                default: () => never[];
+            };
+        }, "items"> & SlotsToProps<MakeSlots<{
+            default: [];
+            item: [unknown];
+        }>>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "tag" | "rounded" | "density" | "divider">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+            tag: Omit<{
+                type: StringConstructor;
+                default: string;
+            }, "type" | "default"> & {
+                type: PropType<string>;
+                default: string;
+            };
+            rounded: {
+                type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            density: {
+                type: PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            activeClass: StringConstructor;
+            activeColor: StringConstructor;
+            bgColor: StringConstructor;
+            color: StringConstructor;
+            disabled: BooleanConstructor;
+            divider: {
+                type: StringConstructor;
+                default: string;
+            };
+            icon: PropType<IconValue>;
+            items: {
+                type: PropType<BreadcrumbItem[]>;
+                default: () => never[];
+            };
+        }, "items"> & SlotsToProps<MakeSlots<{
+            default: [];
+            item: [unknown];
+        }>>>>, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "items">, string, {
+            disabled: boolean;
+            tag: string;
+            rounded: string | number | boolean;
+            density: "default" | "compact" | "comfortable" | null;
+            divider: string;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<Omit<{
+        tag: Omit<{
+            type: StringConstructor;
+            default: string;
+        }, "type" | "default"> & {
+            type: PropType<string>;
+            default: string;
+        };
+        rounded: {
+            type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        density: {
+            type: PropType<"default" | "compact" | "comfortable" | null>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        activeClass: StringConstructor;
+        activeColor: StringConstructor;
+        bgColor: StringConstructor;
+        color: StringConstructor;
+        disabled: BooleanConstructor;
+        divider: {
+            type: StringConstructor;
+            default: string;
+        };
+        icon: PropType<IconValue>;
+        items: {
+            type: PropType<BreadcrumbItem[]>;
+            default: () => never[];
+        };
+    }, "items"> & SlotsToProps<MakeSlots<{
+        default: [];
+        item: [unknown];
+    }>>>> & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    density: {
+        type: PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    activeClass: StringConstructor;
+    activeColor: StringConstructor;
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    divider: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: PropType<IconValue>;
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        default: () => never[];
+    };
+}, "items"> & SlotsToProps<MakeSlots<{
+    default: [];
+    item: [unknown];
+}>>>>, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "items">, string, {
+    disabled: boolean;
+    tag: string;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "comfortable" | null;
+    divider: string;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $props: {
+        items?: T[] | undefined;
+    };
+    $slots: MakeSlots<{
+        default: [];
+        item: [number | T];
+    }>;
+});
+declare type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>;
+
+declare const VBreadcrumbsItem: vue.DefineComponent<{
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: vue.PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    active: BooleanConstructor;
+    activeClass: StringConstructor;
+    activeColor: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    title: StringConstructor;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    href: StringConstructor;
+    replace: BooleanConstructor;
+    to: vue.PropType<vue_router.RouteLocationRaw>;
+    exact: BooleanConstructor;
+    active: BooleanConstructor;
+    activeClass: StringConstructor;
+    activeColor: StringConstructor;
+    color: StringConstructor;
+    disabled: BooleanConstructor;
+    title: StringConstructor;
+}>>, {
+    replace: boolean;
+    exact: boolean;
+    active: boolean;
+    disabled: boolean;
+    tag: string;
+}>;
+declare type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>;
+
+declare const VBreadcrumbsDivider: 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 { VBreadcrumbs, VBreadcrumbsDivider, VBreadcrumbsItem };

package/lib/components/VBtn/VBtn.css

@@ -102,11 +102,16 @@
   opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
 }
 .v-btn--active:hover > .v-btn__overlay, .v-btn[aria-haspopup=menu][aria-expanded=true]:hover > .v-btn__overlay {
-  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
-}
-.v-btn--active:focus > .v-btn__overlay, .v-btn[aria-haspopup=menu][aria-expanded=true]:focus > .v-btn__overlay {
   opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
 }
+.v-btn--active:focus-visible > .v-btn__overlay, .v-btn[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-btn__overlay {
+  opacity: calc(0.24 * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-btn--active:focus > .v-btn__overlay, .v-btn[aria-haspopup=menu][aria-expanded=true]:focus > .v-btn__overlay {
+    opacity: calc(0.24 * var(--v-theme-overlay-multiplier));
+  }
+}
 .v-btn--variant-plain, .v-btn--variant-outlined, .v-btn--variant-text, .v-btn--variant-tonal {
   background: transparent;
   color: inherit;

package/lib/components/VBtn/VBtn.mjs

@@ -35,7 +35,10 @@ export const VBtn = defineComponent({
     Ripple
   },
   props: {
-    active: Boolean,
+    active: {
+      type: Boolean,
+      default: undefined
+    },
     symbol: {
       type: null,
       default: VBtnToggleSymbol
@@ -111,10 +114,16 @@ export const VBtn = defineComponent({
       roundedClasses
     } = useRounded(props);
     const {
-      sizeClasses
+      sizeClasses,
+      sizeStyles
     } = useSize(props);
     const group = useGroupItem(props, props.symbol, false);
     const link = useLink(props, attrs);
+    const isActive = computed(() => {
+      var _link$isActive;
+
+      return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || (group == null ? void 0 : group.isSelected.value));
+    });
     const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
     const isElevated = computed(() => {
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
@@ -127,10 +136,11 @@ export const VBtn = defineComponent({
       const hasColor = !group || group.isSelected.value;
       const hasPrepend = !!(props.prependIcon || slots.prepend);
       const hasAppend = !!(props.appendIcon || slots.append);
+      const hasIcon = !!(props.icon && props.icon !== true);
       return _withDirectives(_createVNode(Tag, {
         "type": Tag === 'a' ? undefined : 'button',
         "class": ['v-btn', group == null ? void 0 : group.selectedClass.value, {
-          'v-btn--active': props.active,
+          'v-btn--active': isActive.value,
           'v-btn--block': props.block,
           'v-btn--disabled': isDisabled.value,
           'v-btn--elevated': isElevated.value,
@@ -139,7 +149,7 @@ export const VBtn = defineComponent({
           'v-btn--loading': props.loading,
           'v-btn--stacked': props.stacked
         }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
         "onClick": e => {
@@ -168,11 +178,11 @@ export const VBtn = defineComponent({
           "key": "content",
           "defaults": {
             VIcon: {
-              icon: typeof props.icon === 'string' ? props.icon : undefined
+              icon: hasIcon ? props.icon : undefined
             }
           }
         }, {
-          default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (typeof props.icon === 'string' && _createVNode(VIcon, {
+          default: () => [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (hasIcon && _createVNode(VIcon, {
             "key": "icon"
           }, null))]
         })]), !props.icon && hasAppend && _createVNode(VDefaultsProvider, {

package/lib/components/VBtn/VBtn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtn.mjs","names":["VBtnToggleSymbol","VDefaultsProvider","VIcon","VProgressCircular","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeLoaderProps","useLoader","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useSelectLink","computed","defineComponent","useRender","VBtn","name","directives","props","active","Boolean","symbol","type","default","flat","icon","String","Function","Object","prependIcon","appendIcon","block","stacked","ripple","tag","variant","emits","val","setup","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","loaderClasses","locationStyles","positionClasses","roundedClasses","sizeClasses","group","link","isDisabled","disabled","value","isElevated","border","select","Tag","isLink","hasColor","isSelected","hasPrepend","prepend","hasAppend","append","undefined","selectedClass","loading","href","e","navigate","toggle","loader"],"sources":["../../../src/components/VBtn/VBtn.tsx"],"sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Components\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLoaderProps, useLoader } from '@/composables/loader'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useSelectLink } from '@/composables/selectLink'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VBtn = defineComponent({\n  name: 'VBtn',\n\n  directives: { Ripple },\n\n  props: {\n    active: Boolean,\n    symbol: {\n      type: null,\n      default: VBtnToggleSymbol,\n    },\n    flat: Boolean,\n    icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n    prependIcon: IconValue,\n    appendIcon: IconValue,\n\n    block: Boolean,\n    stacked: Boolean,\n\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeRoundedProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeGroupItemProps(),\n    ...makeLoaderProps(),\n    ...makeLocationProps(),\n    ...makePositionProps(),\n    ...makeRouterProps(),\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'button' }),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'elevated' } as const),\n  },\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { attrs, 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 { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { loaderClasses } = useLoader(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses } = useSize(props)\n    const group = useGroupItem(props, props.symbol, false)\n    const link = useLink(props, attrs)\n    const isDisabled = computed(() => group?.disabled.value || props.disabled)\n    const isElevated = computed(() => {\n      return props.variant === 'elevated' && !(props.disabled || props.flat || props.border)\n    })\n\n    useSelectLink(link, group?.select)\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasColor = !group || group.isSelected.value\n      const hasPrepend = !!(props.prependIcon || slots.prepend)\n      const hasAppend = !!(props.appendIcon || slots.append)\n\n      return (\n        <Tag\n          type={ Tag === 'a' ? undefined : 'button' }\n          class={[\n            'v-btn',\n            group?.selectedClass.value,\n            {\n              'v-btn--active': props.active,\n              'v-btn--block': props.block,\n              'v-btn--disabled': isDisabled.value,\n              'v-btn--elevated': isElevated.value,\n              'v-btn--flat': props.flat,\n              'v-btn--icon': !!props.icon,\n              'v-btn--loading': props.loading,\n              'v-btn--stacked': props.stacked,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            loaderClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n            locationStyles.value,\n          ]}\n          disabled={ isDisabled.value || undefined }\n          href={ link.href.value }\n          v-ripple={[\n            !isDisabled.value && props.ripple,\n            null,\n            props.icon ? ['center'] : null,\n          ]}\n          onClick={ (e: MouseEvent) => {\n            if (isDisabled.value) return\n\n            link.navigate?.(e)\n            group?.toggle()\n          } }\n        >\n          { genOverlays(true, 'v-btn') }\n\n          { !props.icon && hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VIcon: {\n                  icon: props.prependIcon,\n                },\n              }}\n            >\n              <span class=\"v-btn__prepend\">\n                { slots.prepend?.() ?? (<VIcon />) }\n              </span>\n            </VDefaultsProvider>\n          ) }\n\n          <span class=\"v-btn__content\" data-no-activator=\"\">\n            <VDefaultsProvider\n              key=\"content\"\n              defaults={{\n                VIcon: {\n                  icon: typeof props.icon === 'string'\n                    ? props.icon\n                    : undefined,\n                },\n              }}\n            >\n              { slots.default?.() ?? (\n                typeof props.icon === 'string' && (\n                  <VIcon key=\"icon\" />\n                )\n              ) }\n            </VDefaultsProvider>\n          </span>\n\n          { !props.icon && hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VIcon: {\n                  icon: props.appendIcon,\n                },\n              }}\n            >\n              <span class=\"v-btn__append\">\n                { slots.append?.() ?? (<VIcon />) }\n              </span>\n            </VDefaultsProvider>\n          ) }\n\n          { !!props.loading && (\n            <span key=\"loader\" class=\"v-btn__loader\">\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"23\"\n                  width=\"2\"\n                />\n              ) }\n            </span>\n          ) }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBtn = InstanceType<typeof VBtn>\n"],"mappings":"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"}
+{"version":3,"file":"VBtn.mjs","names":["VBtnToggleSymbol","VDefaultsProvider","VIcon","VProgressCircular","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeLoaderProps","useLoader","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useSelectLink","computed","defineComponent","useRender","VBtn","name","directives","props","active","type","Boolean","default","undefined","symbol","flat","icon","String","Function","Object","prependIcon","appendIcon","block","stacked","ripple","tag","variant","emits","val","setup","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","loaderClasses","locationStyles","positionClasses","roundedClasses","sizeClasses","sizeStyles","group","link","isActive","value","isSelected","isDisabled","disabled","isElevated","border","select","Tag","isLink","hasColor","hasPrepend","prepend","hasAppend","append","hasIcon","selectedClass","loading","href","e","navigate","toggle","loader"],"sources":["../../../src/components/VBtn/VBtn.tsx"],"sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Components\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLoaderProps, useLoader } from '@/composables/loader'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useSelectLink } from '@/composables/selectLink'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VBtn = defineComponent({\n  name: 'VBtn',\n\n  directives: { Ripple },\n\n  props: {\n    active: {\n      type: Boolean,\n      default: undefined,\n    },\n    symbol: {\n      type: null,\n      default: VBtnToggleSymbol,\n    },\n    flat: Boolean,\n    icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n    prependIcon: IconValue,\n    appendIcon: IconValue,\n\n    block: Boolean,\n    stacked: Boolean,\n\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeRoundedProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeGroupItemProps(),\n    ...makeLoaderProps(),\n    ...makeLocationProps(),\n    ...makePositionProps(),\n    ...makeRouterProps(),\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'button' }),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'elevated' } as const),\n  },\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { attrs, 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 { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { loaderClasses } = useLoader(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n    const group = useGroupItem(props, props.symbol, false)\n    const link = useLink(props, attrs)\n\n    const isActive = computed(() =>\n      props.active !== false &&\n      (props.active || link.isActive?.value || group?.isSelected.value)\n    )\n    const isDisabled = computed(() => group?.disabled.value || props.disabled)\n    const isElevated = computed(() => {\n      return props.variant === 'elevated' && !(props.disabled || props.flat || props.border)\n    })\n\n    useSelectLink(link, group?.select)\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasColor = !group || group.isSelected.value\n      const hasPrepend = !!(props.prependIcon || slots.prepend)\n      const hasAppend = !!(props.appendIcon || slots.append)\n      const hasIcon = !!(props.icon && props.icon !== true)\n\n      return (\n        <Tag\n          type={ Tag === 'a' ? undefined : 'button' }\n          class={[\n            'v-btn',\n            group?.selectedClass.value,\n            {\n              'v-btn--active': isActive.value,\n              'v-btn--block': props.block,\n              'v-btn--disabled': isDisabled.value,\n              'v-btn--elevated': isElevated.value,\n              'v-btn--flat': props.flat,\n              'v-btn--icon': !!props.icon,\n              'v-btn--loading': props.loading,\n              'v-btn--stacked': props.stacked,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            loaderClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n            locationStyles.value,\n            sizeStyles.value,\n          ]}\n          disabled={ isDisabled.value || undefined }\n          href={ link.href.value }\n          v-ripple={[\n            !isDisabled.value && props.ripple,\n            null,\n            props.icon ? ['center'] : null,\n          ]}\n          onClick={ (e: MouseEvent) => {\n            if (isDisabled.value) return\n\n            link.navigate?.(e)\n            group?.toggle()\n          } }\n        >\n          { genOverlays(true, 'v-btn') }\n\n          { !props.icon && hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VIcon: {\n                  icon: props.prependIcon,\n                },\n              }}\n            >\n              <span class=\"v-btn__prepend\">\n                { slots.prepend?.() ?? (<VIcon />) }\n              </span>\n            </VDefaultsProvider>\n          ) }\n\n          <span class=\"v-btn__content\" data-no-activator=\"\">\n            <VDefaultsProvider\n              key=\"content\"\n              defaults={{\n                VIcon: {\n                  icon: hasIcon ? props.icon : undefined,\n                },\n              }}\n            >\n              { slots.default?.() ?? (\n                hasIcon && (\n                  <VIcon key=\"icon\" />\n                )\n              ) }\n            </VDefaultsProvider>\n          </span>\n\n          { !props.icon && hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VIcon: {\n                  icon: props.appendIcon,\n                },\n              }}\n            >\n              <span class=\"v-btn__append\">\n                { slots.append?.() ?? (<VIcon />) }\n              </span>\n            </VDefaultsProvider>\n          ) }\n\n          { !!props.loading && (\n            <span key=\"loader\" class=\"v-btn__loader\">\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"23\"\n                  width=\"2\"\n                />\n              ) }\n            </span>\n          ) }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBtn = InstanceType<typeof VBtn>\n"],"mappings":"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"}