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

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/VBreadcrumbs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VBreadcrumbs/index.ts"],"names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider"],"mappings":"SAASA,Y;SACAC,gB;SACAC,mB","sourcesContent":["export { VBreadcrumbs } from './VBreadcrumbs'\nexport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nexport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider"],"sources":["../../../src/components/VBreadcrumbs/index.ts"],"sourcesContent":["export { VBreadcrumbs } from './VBreadcrumbs'\nexport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nexport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n"],"mappings":"SAASA,Y;SACAC,gB;SACAC,mB"}

package/lib/components/VBtn/VBtn.css

@@ -1,13 +1,16 @@
+/** if false, disabled buttons will be greyed out */
 .v-btn {
   align-items: center;
   border-radius: 4px;
-  display: inline-flex;
+  display: inline-grid;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: max-content auto max-content;
   font-weight: 500;
   justify-content: center;
   letter-spacing: 0.0892857143em;
   line-height: normal;
+  max-width: 100%;
   outline: none;
-  overflow: visible;
   position: relative;
   text-decoration: none;
   text-indent: 0.0892857143em;
@@ -78,18 +81,38 @@
   border-width: thin;
   box-shadow: none;
 }
-.v-btn:hover .v-btn__overlay {
+.v-btn--absolute {
+  position: absolute;
+}
+.v-btn--fixed {
+  position: fixed;
+}
+.v-btn:hover > .v-btn__overlay {
   opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
 }
-.v-btn:focus-visible .v-btn__overlay {
+.v-btn:focus-visible > .v-btn__overlay {
   opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
 }
 @supports not selector(:focus-visible) {
-  .v-btn:focus .v-btn__overlay {
+  .v-btn:focus > .v-btn__overlay {
     opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
   }
 }
-.v-btn--variant-plain, .v-btn--variant-outlined, .v-btn--variant-text, .v-btn--variant-contained-text {
+.v-btn--active > .v-btn__overlay, .v-btn[aria-haspopup=menu][aria-expanded=true] > .v-btn__overlay {
+  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.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;
 }
@@ -102,15 +125,15 @@
 .v-btn--variant-plain .v-btn__overlay {
   display: none;
 }
-.v-btn--variant-contained, .v-btn--variant-contained-flat {
+.v-btn--variant-elevated, .v-btn--variant-flat {
   background: rgb(var(--v-theme-surface));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
-.v-btn--variant-contained {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+.v-btn--variant-elevated {
+  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-btn--variant-contained-flat {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+.v-btn--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-btn--variant-outlined {
   border: thin solid currentColor;
@@ -118,7 +141,7 @@
 .v-btn--variant-text .v-btn__overlay {
   background: currentColor;
 }
-.v-btn--variant-contained-text .v-btn__underlay {
+.v-btn--variant-tonal .v-btn__underlay {
   background: currentColor;
   opacity: var(--v-activated-opacity);
   border-radius: inherit;
@@ -128,7 +151,6 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease-in-out;
 }
 @supports selector(:focus-visible) {
   .v-btn::after {
@@ -152,6 +174,8 @@
   border-radius: 50%;
   min-width: 0;
   padding: 0;
+}
+.v-btn--icon.v-btn--size-default {
   font-size: 1rem;
 }
 .v-btn--icon.v-btn--density-default {
@@ -168,10 +192,10 @@
 }
 
 .v-btn--elevated:hover, .v-btn--elevated:focus {
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  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-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-btn--elevated:active {
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 14px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-btn--flat {
   box-shadow: none;
@@ -183,22 +207,51 @@
 }
 .v-btn--disabled {
   pointer-events: none;
+  opacity: 0.26;
 }
-.v-btn--disabled.v-btn--disabled {
-  color: rgba(var(--v-theme-on-surface), 0.26);
+.v-btn--disabled.v-btn--variant-elevated, .v-btn--disabled.v-btn--variant-flat {
+  box-shadow: none;
   opacity: 1;
-}
-.v-btn--disabled.v-btn--variant-contained {
+  color: rgba(var(--v-theme-on-surface), 0.26);
   background: rgb(var(--v-theme-surface));
-  box-shadow: none;
 }
-.v-btn--disabled.v-btn--variant-contained .v-btn__overlay {
+.v-btn--disabled.v-btn--variant-elevated .v-btn__overlay, .v-btn--disabled.v-btn--variant-flat .v-btn__overlay {
   opacity: 0.4615384615;
 }
+.v-btn--loading {
+  pointer-events: none;
+}
+.v-btn--loading .v-btn__content,
+.v-btn--loading .v-btn__prepend,
+.v-btn--loading .v-btn__append {
+  opacity: 0;
+}
 .v-btn--stacked {
+  grid-template-areas: "prepend" "content" "append";
+  grid-template-columns: auto;
+  grid-template-rows: max-content max-content max-content;
+  justify-items: center;
+  align-content: center;
+}
+.v-btn--stacked .v-btn__content {
   flex-direction: column;
   line-height: 1.25;
 }
+.v-btn--stacked .v-btn__prepend,
+.v-btn--stacked .v-btn__append,
+.v-btn--stacked .v-btn__content > .v-icon--start,
+.v-btn--stacked .v-btn__content > .v-icon--end {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+.v-btn--stacked .v-btn__prepend,
+.v-btn--stacked .v-btn__content > .v-icon--start {
+  margin-bottom: 4px;
+}
+.v-btn--stacked .v-btn__append,
+.v-btn--stacked .v-btn__content > .v-icon--end {
+  margin-top: 4px;
+}
 .v-btn--stacked.v-btn--size-x-small {
   --v-btn-size: 0.625rem;
   --v-btn-height: 56px;
@@ -254,31 +307,88 @@
 .v-btn--rounded {
   border-radius: 24px;
 }
+.v-btn .v-icon {
+  --v-icon-size-multiplier: 0.8571428571;
+}
+.v-btn--icon .v-icon {
+  --v-icon-size-multiplier: 1;
+}
+.v-btn--stacked .v-icon {
+  --v-icon-size-multiplier: 1.1428571429;
+}
 
-.v-btn__content {
+.v-btn__loader {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.v-btn__content,
+.v-btn__prepend,
+.v-btn__append {
+  align-items: center;
+  display: flex;
   transition: transform, opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.v-btn__prepend {
+  grid-area: prepend;
+  margin-inline-start: calc(var(--v-btn-height) / -9);
+  margin-inline-end: calc(var(--v-btn-height) / 4.5);
+}
+
+.v-btn__append {
+  grid-area: append;
+  margin-inline-start: calc(var(--v-btn-height) / 4.5);
+  margin-inline-end: calc(var(--v-btn-height) / -9);
+}
+
+.v-btn__content {
+  grid-area: content;
+  justify-content: center;
+  white-space: nowrap;
+}
+.v-btn__content > .v-icon--start {
+  margin-inline-start: calc(var(--v-btn-height) / -9);
+  margin-inline-end: calc(var(--v-btn-height) / 4.5);
+}
+.v-btn__content > .v-icon--end {
+  margin-inline-start: calc(var(--v-btn-height) / 4.5);
+  margin-inline-end: calc(var(--v-btn-height) / -9);
+}
+.v-btn--stacked .v-btn__content {
+  white-space: normal;
+}
+
 .v-btn__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.v-btn__overlay,
+.v-btn__underlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: currentColor;
-  border-radius: inherit;
   pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
 }
 
 .v-app-bar .v-btn {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  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-card-actions .v-btn {
   padding: 0 8px;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  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-card-actions .v-btn ~ .v-btn {
   margin-inline-start: 0.5rem;
@@ -291,6 +401,9 @@
 .v-pagination .v-btn {
   border-radius: 4px;
 }
+.v-btn__overlay {
+  transition: none;
+}
 .v-pagination__item--is-active .v-btn__overlay {
   opacity: var(--v-border-opacity);
 }