@vuetify/nightly 3.0.0-beta.3 → 3.0.0-beta.6

package/lib/index.d.ts

@@ -4,6 +4,7 @@ declare type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
 declare type ThemeOptions = false | {
+    cspNonce?: string;
     defaultTheme?: string;
     variations?: false | VariationsOptions;
     themes?: Record<string, ThemeDefinition>;
@@ -43,13 +44,17 @@ interface OnColors {
     'on-info': string;
 }
 interface ThemeInstance {
-    isDisabled: boolean;
-    name: Ref<string>;
-    themes: Ref<Record<string, InternalThemeDefinition>>;
+    readonly isDisabled: boolean;
+    readonly themes: Ref<Record<string, InternalThemeDefinition>>;
+    readonly name: Readonly<Ref<string>>;
     readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
     readonly computedThemes: DeepReadonly<Ref<Record<string, InternalThemeDefinition>>>;
-    themeClasses: Readonly<Ref<string | undefined>>;
-    styles: Readonly<Ref<string>>;
+    readonly themeClasses: Readonly<Ref<string | undefined>>;
+    readonly styles: Readonly<Ref<string>>;
+    readonly global: {
+        readonly name: Ref<string>;
+        readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
+    };
 }
 declare function useTheme(): ThemeInstance;
 
@@ -239,18 +244,20 @@ interface LayoutProvide {
 }
 declare function useLayout(): LayoutProvide;
 
-interface FormValidationResult {
+interface FieldValidationResult {
     id: number | string;
     errorMessages: string[];
 }
-interface SubmitEventPromise extends SubmitEvent, Promise<{
+interface FormValidationResult {
     valid: boolean;
-    errorMessages: FormValidationResult[];
-}> {
+    errors: FieldValidationResult[];
+}
+interface SubmitEventPromise extends SubmitEvent, Promise<FormValidationResult> {
 }
 
 interface VuetifyOptions {
     aliases?: Record<string, any>;
+    blueprint?: Blueprint;
     components?: Record<string, any>;
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
@@ -259,11 +266,13 @@ interface VuetifyOptions {
     icons?: IconOptions;
     locale?: (LocaleOptions & RtlOptions) | (LocaleAdapter & RtlOptions);
 }
-declare const createVuetify: (options?: VuetifyOptions) => {
+interface Blueprint extends Omit<VuetifyOptions, 'blueprint'> {
+}
+declare const createVuetify: (vuetify?: VuetifyOptions) => {
     install: (app: App) => void;
 };
 
-export { DefaultsInstance, DisplayBreakpoint, DisplayInstance, DisplayThresholds, IconAliases, IconOptions, IconProps, IconSet, LocaleAdapter, RtlInstance, SubmitEventPromise, ThemeDefinition, ThemeInstance, VuetifyOptions, createVuetify, provideRtl, useDisplay, useLayout, useRtl, useTheme };
+export { Blueprint, DefaultsInstance, DisplayBreakpoint, DisplayInstance, DisplayThresholds, IconAliases, IconOptions, IconProps, IconSet, LocaleAdapter, RtlInstance, SubmitEventPromise, ThemeDefinition, ThemeInstance, VuetifyOptions, createVuetify, provideRtl, useDisplay, useLayout, useRtl, useTheme };
 
 import type { ComponentPublicInstance, FunctionalComponent, VNodeChild } from 'vue'
 
@@ -305,9 +314,43 @@ declare module '@vue/runtime-core' {
 
   export interface GlobalComponents {
     VApp: typeof import('vuetify/components')['VApp']
+    VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
+    VContainer: typeof import('vuetify/components')['VContainer']
+    VCol: typeof import('vuetify/components')['VCol']
+    VRow: typeof import('vuetify/components')['VRow']
+    VSpacer: typeof import('vuetify/components')['VSpacer']
+    VHover: typeof import('vuetify/components')['VHover']
+    VForm: typeof import('vuetify/components')['VForm']
+    VLayout: typeof import('vuetify/components')['VLayout']
+    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
+    VLazy: typeof import('vuetify/components')['VLazy']
+    VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
+    VParallax: typeof import('vuetify/components')['VParallax']
+    VNoSsr: typeof import('vuetify/components')['VNoSsr']
+    VRadio: typeof import('vuetify/components')['VRadio']
+    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
+    VResponsive: typeof import('vuetify/components')['VResponsive']
+    VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
+    VValidation: typeof import('vuetify/components')['VValidation']
     VAppBar: typeof import('vuetify/components')['VAppBar']
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
+    VFabTransition: typeof import('vuetify/components')['VFabTransition']
+    VDialogBottomTransition: typeof import('vuetify/components')['VDialogBottomTransition']
+    VDialogTopTransition: typeof import('vuetify/components')['VDialogTopTransition']
+    VFadeTransition: typeof import('vuetify/components')['VFadeTransition']
+    VScaleTransition: typeof import('vuetify/components')['VScaleTransition']
+    VScrollXTransition: typeof import('vuetify/components')['VScrollXTransition']
+    VScrollXReverseTransition: typeof import('vuetify/components')['VScrollXReverseTransition']
+    VScrollYTransition: typeof import('vuetify/components')['VScrollYTransition']
+    VScrollYReverseTransition: typeof import('vuetify/components')['VScrollYReverseTransition']
+    VSlideXTransition: typeof import('vuetify/components')['VSlideXTransition']
+    VSlideXReverseTransition: typeof import('vuetify/components')['VSlideXReverseTransition']
+    VSlideYTransition: typeof import('vuetify/components')['VSlideYTransition']
+    VSlideYReverseTransition: typeof import('vuetify/components')['VSlideYReverseTransition']
+    VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
+    VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
+    VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
     VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
@@ -315,36 +358,30 @@ declare module '@vue/runtime-core' {
     VBadge: typeof import('vuetify/components')['VBadge']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
-    VBannerAvatar: typeof import('vuetify/components')['VBannerAvatar']
-    VBannerIcon: typeof import('vuetify/components')['VBannerIcon']
     VBannerText: typeof import('vuetify/components')['VBannerText']
     VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
-    VBtn: typeof import('vuetify/components')['VBtn']
     VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
+    VBtn: typeof import('vuetify/components')['VBtn']
     VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
-    VCardAvatar: typeof import('vuetify/components')['VCardAvatar']
-    VCardContent: typeof import('vuetify/components')['VCardContent']
-    VCardHeader: typeof import('vuetify/components')['VCardHeader']
-    VCardHeaderText: typeof import('vuetify/components')['VCardHeaderText']
-    VCardImg: typeof import('vuetify/components')['VCardImg']
+    VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
     VCheckbox: typeof import('vuetify/components')['VCheckbox']
+    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VChip: typeof import('vuetify/components')['VChip']
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCode: typeof import('vuetify/components')['VCode']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
     VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
-    VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
     VDialog: typeof import('vuetify/components')['VDialog']
     VDivider: typeof import('vuetify/components')['VDivider']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
@@ -353,14 +390,7 @@ declare module '@vue/runtime-core' {
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
-    VFileInput: typeof import('vuetify/components')['VFileInput']
     VFooter: typeof import('vuetify/components')['VFooter']
-    VForm: typeof import('vuetify/components')['VForm']
-    VContainer: typeof import('vuetify/components')['VContainer']
-    VCol: typeof import('vuetify/components')['VCol']
-    VRow: typeof import('vuetify/components')['VRow']
-    VSpacer: typeof import('vuetify/components')['VSpacer']
-    VHover: typeof import('vuetify/components')['VHover']
     VIcon: typeof import('vuetify/components')['VIcon']
     VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
@@ -368,84 +398,52 @@ declare module '@vue/runtime-core' {
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
     VImg: typeof import('vuetify/components')['VImg']
     VInput: typeof import('vuetify/components')['VInput']
+    VFileInput: typeof import('vuetify/components')['VFileInput']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
     VKbd: typeof import('vuetify/components')['VKbd']
     VLabel: typeof import('vuetify/components')['VLabel']
-    VLayout: typeof import('vuetify/components')['VLayout']
-    VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
-    VLazy: typeof import('vuetify/components')['VLazy']
     VList: typeof import('vuetify/components')['VList']
-    VListSubheader: typeof import('vuetify/components')['VListSubheader']
+    VListGroup: typeof import('vuetify/components')['VListGroup']
     VListImg: typeof import('vuetify/components')['VListImg']
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemAction: typeof import('vuetify/components')['VListItemAction']
-    VListItemAvatar: typeof import('vuetify/components')['VListItemAvatar']
-    VListItemHeader: typeof import('vuetify/components')['VListItemHeader']
-    VListItemIcon: typeof import('vuetify/components')['VListItemIcon']
     VListItemMedia: typeof import('vuetify/components')['VListItemMedia']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VListGroup: typeof import('vuetify/components')['VListGroup']
-    VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
-    VMain: typeof import('vuetify/components')['VMain']
+    VListSubheader: typeof import('vuetify/components')['VListSubheader']
     VMenu: typeof import('vuetify/components')['VMenu']
+    VMain: typeof import('vuetify/components')['VMain']
     VMessages: typeof import('vuetify/components')['VMessages']
     VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
-    VNoSsr: typeof import('vuetify/components')['VNoSsr']
     VOverlay: typeof import('vuetify/components')['VOverlay']
-    VPagination: typeof import('vuetify/components')['VPagination']
-    VParallax: typeof import('vuetify/components')['VParallax']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
-    VRadio: typeof import('vuetify/components')['VRadio']
-    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
-    VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
     VRating: typeof import('vuetify/components')['VRating']
-    VResponsive: typeof import('vuetify/components')['VResponsive']
+    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VSelect: typeof import('vuetify/components')['VSelect']
     VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSheet: typeof import('vuetify/components')['VSheet']
     VSlider: typeof import('vuetify/components')['VSlider']
+    VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
+    VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
-    VSwitch: typeof import('vuetify/components')['VSwitch']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
+    VSwitch: typeof import('vuetify/components')['VSwitch']
+    VTable: typeof import('vuetify/components')['VTable']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTab: typeof import('vuetify/components')['VTab']
-    VTable: typeof import('vuetify/components')['VTable']
     VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
-    VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VTimeline: typeof import('vuetify/components')['VTimeline']
     VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
+    VTooltip: typeof import('vuetify/components')['VTooltip']
     VToolbar: typeof import('vuetify/components')['VToolbar']
     VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
-    VTooltip: typeof import('vuetify/components')['VTooltip']
-    VValidation: typeof import('vuetify/components')['VValidation']
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
-    VCarouselTransition: typeof import('vuetify/components')['VCarouselTransition']
-    VCarouselReverseTransition: typeof import('vuetify/components')['VCarouselReverseTransition']
-    VTabTransition: typeof import('vuetify/components')['VTabTransition']
-    VTabReverseTransition: typeof import('vuetify/components')['VTabReverseTransition']
-    VMenuTransition: typeof import('vuetify/components')['VMenuTransition']
-    VFabTransition: typeof import('vuetify/components')['VFabTransition']
-    VDialogBottomTransition: typeof import('vuetify/components')['VDialogBottomTransition']
-    VDialogTopTransition: typeof import('vuetify/components')['VDialogTopTransition']
-    VFadeTransition: typeof import('vuetify/components')['VFadeTransition']
-    VScaleTransition: typeof import('vuetify/components')['VScaleTransition']
-    VScrollXTransition: typeof import('vuetify/components')['VScrollXTransition']
-    VScrollXReverseTransition: typeof import('vuetify/components')['VScrollXReverseTransition']
-    VScrollYTransition: typeof import('vuetify/components')['VScrollYTransition']
-    VScrollYReverseTransition: typeof import('vuetify/components')['VScrollYReverseTransition']
-    VSlideXTransition: typeof import('vuetify/components')['VSlideXTransition']
-    VSlideXReverseTransition: typeof import('vuetify/components')['VSlideXReverseTransition']
-    VSlideYTransition: typeof import('vuetify/components')['VSlideYTransition']
-    VSlideYReverseTransition: typeof import('vuetify/components')['VSlideYReverseTransition']
-    VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
-    VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
-    VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
+    VPagination: typeof import('vuetify/components')['VPagination']
   }
 }

package/lib/styles/generic/_transitions.scss

@@ -15,31 +15,9 @@
 }
 
 // Component specific transitions
-.carousel-transition {
-  &-enter-from {
-    transform: translate(100%, 0);
-  }
-
-  &-leave-from, &-leave-to {
-    position: absolute;
-    top: 0;
-    transform: translate(-100%, 0);
-  }
-}
-
-.carousel-reverse-transition {
-  &-enter-from {
-    transform: translate(-100%, 0);
-  }
-
-  &-leave-from, &-leave-to {
-    position: absolute;
-    top: 0;
-    transform: translate(100%, 0);
-  }
-}
-
-.dialog-transition {
+.dialog-transition,
+.dialog-bottom-transition,
+.dialog-top-transition {
   &-enter-active {
     transition: 225ms settings.$decelerated-easing
   }
@@ -53,7 +31,9 @@
     transition-property: transform, opacity;
     pointer-events: none;
   }
+}
 
+.dialog-transition {
   &-enter-from, &-leave-to {
     transform: scale(0.9);
     opacity: 0;
@@ -66,18 +46,20 @@
 
 .dialog-bottom-transition {
   &-enter-from, &-leave-to {
-    transform: translateY(100%);
+    transform: translateY(calc(50vh + 50%));
   }
 }
 
 .dialog-top-transition {
   &-enter-from, &-leave-to {
-    transform: translateY(-100%);
+    transform: translateY(calc(-50vh - 50%));
   }
 }
 
 .picker-transition,
 .picker-reverse-transition {
+  @include transition-default();
+
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -91,6 +73,8 @@
 }
 
 .picker-transition {
+  @include transition-default();
+
   &-enter-from {
     transform: translate(0, 100%);
   }
@@ -101,6 +85,8 @@
 }
 
 .picker-reverse-transition {
+  @include transition-default();
+
   &-enter-from {
     transform: translate(0, -100%);
   }
@@ -110,56 +96,6 @@
   }
 }
 
-.picker-title-transition {
-  &-enter-to,
-  &-leave-from {
-    transform: translate(0, 0);
-  }
-
-  &-enter-from {
-    transform: translate(-100%, 0);
-  }
-
-  &-leave-to {
-    opacity: 0;
-    transform: translate(100%, 0);
-  }
-
-  &-leave-from,
-  &-leave-to,
-  &-leave-active {
-    position: absolute !important;
-  }
-}
-
-.tab-transition {
-  &-enter-from {
-    transform: translate(100%, 0);
-  }
-
-  &-leave-from, &-leave-active {
-    position: absolute;
-    top: 0;
-  }
-
-  &-leave-to {
-    position: absolute;
-    transform: translate(-100%, 0);
-  }
-}
-
-.tab-reverse-transition {
-  &-enter-from {
-    transform: translate(-100%, 0);
-  }
-
-  &-leave-from, &-leave-to {
-    top: 0;
-    position: absolute;
-    transform: translate(100%, 0);
-  }
-}
-
 // Generic transitions
 .expand-transition {
   @include transition-default();

package/lib/styles/main.css

@@ -3030,34 +3030,25 @@ progress {
   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) !important;
 }
 
-.carousel-transition-enter-from {
-  transform: translate(100%, 0);
-}
-.carousel-transition-leave-from, .carousel-transition-leave-to {
-  position: absolute;
-  top: 0;
-  transform: translate(-100%, 0);
-}
-
-.carousel-reverse-transition-enter-from {
-  transform: translate(-100%, 0);
-}
-.carousel-reverse-transition-leave-from, .carousel-reverse-transition-leave-to {
-  position: absolute;
-  top: 0;
-  transform: translate(100%, 0);
-}
-
-.dialog-transition-enter-active {
+.dialog-transition-enter-active,
+.dialog-bottom-transition-enter-active,
+.dialog-top-transition-enter-active {
   transition: 225ms cubic-bezier(0, 0, 0.2, 1);
 }
-.dialog-transition-leave-active {
+.dialog-transition-leave-active,
+.dialog-bottom-transition-leave-active,
+.dialog-top-transition-leave-active {
   transition: 125ms cubic-bezier(0.4, 0, 1, 1);
 }
-.dialog-transition-enter-active, .dialog-transition-leave-active {
+.dialog-transition-enter-active, .dialog-transition-leave-active,
+.dialog-bottom-transition-enter-active,
+.dialog-bottom-transition-leave-active,
+.dialog-top-transition-enter-active,
+.dialog-top-transition-leave-active {
   transition-property: transform, opacity;
   pointer-events: none;
 }
+
 .dialog-transition-enter-from, .dialog-transition-leave-to {
   transform: scale(0.9);
   opacity: 0;
@@ -3067,13 +3058,25 @@ progress {
 }
 
 .dialog-bottom-transition-enter-from, .dialog-bottom-transition-leave-to {
-  transform: translateY(100%);
+  transform: translateY(calc(50vh + 50%));
 }
 
 .dialog-top-transition-enter-from, .dialog-top-transition-leave-to {
-  transform: translateY(-100%);
+  transform: translateY(calc(-50vh - 50%));
 }
 
+.picker-transition-enter-active,
+.picker-reverse-transition-enter-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-transition-leave-active,
+.picker-reverse-transition-leave-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-transition-move,
+.picker-reverse-transition-move {
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .picker-transition-enter-from, .picker-transition-leave-to,
 .picker-reverse-transition-enter-from,
 .picker-reverse-transition-leave-to {
@@ -3086,6 +3089,15 @@ progress {
   position: absolute !important;
 }
 
+.picker-transition-enter-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-transition-leave-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-transition-move {
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .picker-transition-enter-from {
   transform: translate(0, 100%);
 }
@@ -3093,6 +3105,15 @@ progress {
   transform: translate(0, -100%);
 }
 
+.picker-reverse-transition-enter-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-reverse-transition-leave-active {
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.picker-reverse-transition-move {
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .picker-reverse-transition-enter-from {
   transform: translate(0, -100%);
 }
@@ -3100,41 +3121,6 @@ progress {
   transform: translate(0, 100%);
 }
 
-.picker-title-transition-enter-to, .picker-title-transition-leave-from {
-  transform: translate(0, 0);
-}
-.picker-title-transition-enter-from {
-  transform: translate(-100%, 0);
-}
-.picker-title-transition-leave-to {
-  opacity: 0;
-  transform: translate(100%, 0);
-}
-.picker-title-transition-leave-from, .picker-title-transition-leave-to, .picker-title-transition-leave-active {
-  position: absolute !important;
-}
-
-.tab-transition-enter-from {
-  transform: translate(100%, 0);
-}
-.tab-transition-leave-from, .tab-transition-leave-active {
-  position: absolute;
-  top: 0;
-}
-.tab-transition-leave-to {
-  position: absolute;
-  transform: translate(-100%, 0);
-}
-
-.tab-reverse-transition-enter-from {
-  transform: translate(-100%, 0);
-}
-.tab-reverse-transition-leave-from, .tab-reverse-transition-leave-to {
-  top: 0;
-  position: absolute;
-  transform: translate(100%, 0);
-}
-
 .expand-transition-enter-active {
   transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

package/lib/styles/tools/_variant.sass

@@ -5,7 +5,7 @@
   &--variant-plain,
   &--variant-outlined,
   &--variant-text,
-  &--variant-contained-text
+  &--variant-tonal
     background: transparent
     color: inherit
 
@@ -20,16 +20,16 @@
     .#{$name}__overlay
       display: none
 
-  &--variant-contained,
-  &--variant-contained-flat
+  &--variant-elevated,
+  &--variant-flat
     background: $contained-background
     color: $contained-color
 
   @if ($contained-elevation > 0)
-    &--variant-contained
+    &--variant-elevated
       @include elevation($contained-elevation)
 
-  &--variant-contained-flat
+  &--variant-flat
     @include elevation(0)
 
   &--variant-outlined
@@ -39,7 +39,7 @@
     .#{$name}__overlay
       background: currentColor
 
-  &--variant-contained-text
+  &--variant-tonal
     .#{$name}__underlay
       background: currentColor
       opacity: var(--v-activated-opacity)