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

package/lib/components/VSnackbar/VSnackbar.mjs

@@ -1,21 +1,25 @@
-import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
 import "./VSnackbar.css"; // Components
 
-import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { makeTransitionProps } from "../../composables/transition.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
-import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities
+import { useScopeId } from "../../composables/scopeId.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs"; // Utilities
 
-import { onMounted, watch } from 'vue';
-import { defineComponent, useRender } from "../../util/index.mjs";
-export const VSnackbar = defineComponent({
+import { onMounted, ref, watch } from 'vue';
+import { genericComponent, useRender } from "../../util/index.mjs"; // Types
+
+export const VSnackbar = genericComponent()({
   name: 'VSnackbar',
   props: {
-    app: Boolean,
-    centered: Boolean,
     contentClass: {
       type: String,
       default: ''
@@ -27,7 +31,11 @@ export const VSnackbar = defineComponent({
     },
     vertical: Boolean,
     modelValue: Boolean,
+    ...makeLocationProps({
+      location: 'bottom'
+    }),
     ...makePositionProps(),
+    ...makeRoundedProps(),
     ...makeVariantProps(),
     ...makeTransitionProps({
       transition: 'v-snackbar-transition'
@@ -43,14 +51,23 @@ export const VSnackbar = defineComponent({
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
     const {
-      positionClasses,
-      positionStyles
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
     } = usePosition(props);
+    const {
+      scopeId
+    } = useScopeId();
     const {
       colorClasses,
       colorStyles,
       variantClasses
     } = useVariant(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const overlay = ref();
     watch(isActive, startTimeout);
     watch(() => props.timeout, startTimeout);
     onMounted(() => {
@@ -71,46 +88,49 @@ export const VSnackbar = defineComponent({
       window.clearTimeout(activeTimeout);
     }
 
-    useRender(() => {
-      var _slots$default, _slots$actions;
-
-      return _createVNode("div", {
-        "class": ['v-snackbar', {
-          'v-snackbar--active': isActive.value,
-          'v-snackbar--bottom': props.bottom || !props.top,
-          'v-snackbar--centered': props.centered,
-          'v-snackbar--end': props.right,
-          'v-snackbar--multi-line': props.multiLine && !props.vertical,
-          'v-snackbar--start': props.left,
-          'v-snackbar--top': props.top,
-          'v-snackbar--vertical': props.vertical
-        }, positionClasses.value],
-        "style": [colorStyles.value, positionStyles.value]
-      }, [_createVNode(MaybeTransition, {
-        "transition": props.transition
-      }, {
-        default: () => [_withDirectives(_createVNode("div", {
-          "class": ['v-snackbar__wrapper', colorClasses.value, variantClasses.value],
-          "onPointerenter": onPointerenter,
-          "onPointerleave": startTimeout
-        }, [genOverlays(false, 'v-snackbar'), slots.default && _createVNode("div", {
-          "class": ['v-snackbar__content', props.contentClass],
-          "role": "status",
-          "aria-live": "polite"
-        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.actions && _createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              variant: 'text',
-              ripple: false
-            }
+    useRender(() => _createVNode(VOverlay, _mergeProps({
+      "modelValue": isActive.value,
+      "onUpdate:modelValue": $event => isActive.value = $event,
+      "ref": overlay,
+      "class": ['v-snackbar', {
+        'v-snackbar--active': isActive.value,
+        'v-snackbar--multi-line': props.multiLine && !props.vertical,
+        'v-snackbar--vertical': props.vertical
+      }, positionClasses.value],
+      "style": [colorStyles.value],
+      "contentProps": {
+        style: locationStyles.value
+      },
+      "contentClass": props.contentClass,
+      "persistent": true,
+      "noClickAnimation": true,
+      "scrim": false,
+      "scrollStrategy": "none",
+      "transition": props.transition
+    }, scopeId), {
+      default: () => [_createVNode("div", {
+        "class": ['v-snackbar__wrapper', colorClasses.value, roundedClasses.value, variantClasses.value],
+        "onPointerenter": onPointerenter,
+        "onPointerleave": startTimeout
+      }, [genOverlays(false, 'v-snackbar'), slots.default && _createVNode("div", {
+        "class": "v-snackbar__content",
+        "role": "status",
+        "aria-live": "polite"
+      }, [slots.default()]), slots.actions && _createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            variant: 'text',
+            ripple: false
           }
-        }, {
-          default: () => [_createVNode("div", {
-            "class": "v-snackbar__actions"
-          }, [(_slots$actions = slots.actions) == null ? void 0 : _slots$actions.call(slots)])]
-        })]), [[_vShow, isActive.value]])]
-      })]);
-    });
+        }
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-snackbar__actions"
+        }, [slots.actions()])]
+      })])],
+      activator: slots.activator
+    }));
+    return forwardRefs({}, overlay);
   }
 
 });

package/lib/components/VSnackbar/VSnackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSnackbar/VSnackbar.tsx"],"names":["VDefaultsProvider","makePositionProps","usePosition","useProxiedModel","makeTransitionProps","MaybeTransition","genOverlays","makeVariantProps","useVariant","onMounted","watch","defineComponent","useRender","VSnackbar","name","props","app","Boolean","centered","contentClass","type","String","default","multiLine","timeout","Number","vertical","modelValue","transition","emits","v","setup","slots","isActive","positionClasses","positionStyles","colorClasses","colorStyles","variantClasses","startTimeout","value","activeTimeout","window","clearTimeout","setTimeout","onPointerenter","bottom","top","right","left","actions","VBtn","variant","ripple"],"mappings":"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","sourcesContent":["// Styles\nimport './VSnackbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { onMounted, watch } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSnackbar = defineComponent({\n  name: 'VSnackbar',\n\n  props: {\n    app: Boolean,\n    centered: Boolean,\n    contentClass: {\n      type: String,\n      default: '',\n    },\n    multiLine: Boolean,\n    timeout: {\n      type: [Number, String],\n      default: 5000,\n    },\n    vertical: Boolean,\n\n    modelValue: Boolean,\n\n    ...makePositionProps(),\n    ...makeVariantProps(),\n    ...makeTransitionProps({ transition: 'v-snackbar-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (v: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { positionClasses, positionStyles } = usePosition(props)\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n\n    watch(isActive, startTimeout)\n    watch(() => props.timeout, startTimeout)\n\n    onMounted(() => {\n      if (isActive.value) startTimeout()\n    })\n\n    let activeTimeout = -1\n    function startTimeout () {\n      window.clearTimeout(activeTimeout)\n      const timeout = Number(props.timeout)\n\n      if (!isActive.value || timeout === -1) return\n\n      activeTimeout = window.setTimeout(() => {\n        isActive.value = false\n      }, timeout)\n    }\n\n    function onPointerenter () {\n      window.clearTimeout(activeTimeout)\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-snackbar',\n          {\n            'v-snackbar--active': isActive.value,\n            'v-snackbar--bottom': props.bottom || !props.top,\n            'v-snackbar--centered': props.centered,\n            'v-snackbar--end': props.right,\n            'v-snackbar--multi-line': props.multiLine && !props.vertical,\n            'v-snackbar--start': props.left,\n            'v-snackbar--top': props.top,\n            'v-snackbar--vertical': props.vertical,\n          },\n          positionClasses.value,\n        ]}\n        style={[\n          colorStyles.value,\n          positionStyles.value,\n        ]}\n      >\n        <MaybeTransition transition={ props.transition }>\n          <div\n            class={[\n              'v-snackbar__wrapper',\n              colorClasses.value,\n              variantClasses.value,\n            ]}\n            v-show={ isActive.value }\n            onPointerenter={ onPointerenter }\n            onPointerleave={ startTimeout }\n          >\n            { genOverlays(false, 'v-snackbar') }\n\n            { slots.default && (\n              <div\n                class={[\n                  'v-snackbar__content',\n                  props.contentClass,\n                ]}\n                role=\"status\"\n                aria-live=\"polite\"\n              >\n                { slots.default?.() }\n              </div>\n            ) }\n\n            { slots.actions && (\n              <VDefaultsProvider\n                defaults={{\n                  VBtn: {\n                    variant: 'text',\n                    ripple: false,\n                  },\n                }}\n              >\n                <div class=\"v-snackbar__actions\">\n                  { slots.actions?.() }\n                </div>\n              </VDefaultsProvider>\n            ) }\n          </div>\n        </MaybeTransition>\n      </div>\n    ))\n  },\n})\n\nexport type VSnackbar = InstanceType<typeof VSnackbar>\n"],"file":"VSnackbar.mjs"}
+{"version":3,"file":"VSnackbar.mjs","names":["VDefaultsProvider","VOverlay","genOverlays","makeVariantProps","useVariant","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTransitionProps","useProxiedModel","useScopeId","forwardRefs","onMounted","ref","watch","genericComponent","useRender","VSnackbar","name","props","contentClass","type","String","default","multiLine","Boolean","timeout","Number","vertical","modelValue","location","transition","emits","v","setup","slots","isActive","locationStyles","positionClasses","scopeId","colorClasses","colorStyles","variantClasses","roundedClasses","overlay","startTimeout","value","activeTimeout","window","clearTimeout","setTimeout","onPointerenter","style","actions","VBtn","variant","ripple","activator"],"sources":["../../../src/components/VSnackbar/VSnackbar.tsx"],"sourcesContent":["// Styles\nimport './VSnackbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { onMounted, ref, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\n\nexport const VSnackbar = genericComponent<new () => {\n  $slots: MakeSlots<{\n    activator: [{ isActive: boolean, props: Record<string, any> }]\n    default: []\n    actions: []\n  }>\n  $props: VOverlay['$props']\n}>()({\n  name: 'VSnackbar',\n\n  props: {\n    contentClass: {\n      type: String,\n      default: '',\n    },\n    multiLine: Boolean,\n    timeout: {\n      type: [Number, String],\n      default: 5000,\n    },\n    vertical: Boolean,\n\n    modelValue: Boolean,\n\n    ...makeLocationProps({ location: 'bottom' } as const),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeVariantProps(),\n    ...makeTransitionProps({ transition: 'v-snackbar-transition' }),\n  },\n\n  emits: {\n    'update:modelValue': (v: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { scopeId } = useScopeId()\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { roundedClasses } = useRounded(props)\n\n    const overlay = ref<VOverlay>()\n\n    watch(isActive, startTimeout)\n    watch(() => props.timeout, startTimeout)\n\n    onMounted(() => {\n      if (isActive.value) startTimeout()\n    })\n\n    let activeTimeout = -1\n    function startTimeout () {\n      window.clearTimeout(activeTimeout)\n      const timeout = Number(props.timeout)\n\n      if (!isActive.value || timeout === -1) return\n\n      activeTimeout = window.setTimeout(() => {\n        isActive.value = false\n      }, timeout)\n    }\n\n    function onPointerenter () {\n      window.clearTimeout(activeTimeout)\n    }\n\n    useRender(() => (\n      <VOverlay\n        v-model={ isActive.value }\n        ref={ overlay }\n        class={[\n          'v-snackbar',\n          {\n            'v-snackbar--active': isActive.value,\n            'v-snackbar--multi-line': props.multiLine && !props.vertical,\n            'v-snackbar--vertical': props.vertical,\n          },\n          positionClasses.value,\n        ]}\n        style={[colorStyles.value]}\n        contentProps={{\n          style: locationStyles.value,\n        }}\n        contentClass={ props.contentClass }\n        persistent\n        noClickAnimation\n        scrim={ false }\n        scrollStrategy=\"none\"\n        transition={ props.transition }\n        { ...scopeId }\n        v-slots={{ activator: slots.activator }}\n      >\n        <div\n          class={[\n            'v-snackbar__wrapper',\n            colorClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          onPointerenter={ onPointerenter }\n          onPointerleave={ startTimeout }\n        >\n          { genOverlays(false, 'v-snackbar') }\n\n          { slots.default && (\n            <div\n              class=\"v-snackbar__content\"\n              role=\"status\"\n              aria-live=\"polite\"\n            >\n              { slots.default() }\n            </div>\n          ) }\n\n          { slots.actions && (\n            <VDefaultsProvider\n              defaults={{\n                VBtn: {\n                  variant: 'text',\n                  ripple: false,\n                },\n              }}\n            >\n              <div class=\"v-snackbar__actions\">\n                { slots.actions() }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </div>\n      </VOverlay>\n    ))\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VSnackbar = InstanceType<typeof VSnackbar>\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,iB;SACAC,Q,iCAET;;SACSC,W,EAAaC,gB,EAAkBC,U;SAC/BC,iB,EAAmBC,W;SACnBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,mB;SACAC,e;SACAC,U;SACAC,W,6CAET;;AACA,SAASC,SAAT,EAAoBC,GAApB,EAAyBC,KAAzB,QAAsC,KAAtC;SACSC,gB,EAAkBC,S,gCAE3B;;AAGA,OAAO,MAAMC,SAAS,GAAGF,gBAAgB,GAOpC;EACHG,IAAI,EAAE,WADH;EAGHC,KAAK,EAAE;IACLC,YAAY,EAAE;MACZC,IAAI,EAAEC,MADM;MAEZC,OAAO,EAAE;IAFG,CADT;IAKLC,SAAS,EAAEC,OALN;IAMLC,OAAO,EAAE;MACPL,IAAI,EAAE,CAACM,MAAD,EAASL,MAAT,CADC;MAEPC,OAAO,EAAE;IAFF,CANJ;IAULK,QAAQ,EAAEH,OAVL;IAYLI,UAAU,EAAEJ,OAZP;IAcL,GAAGvB,iBAAiB,CAAC;MAAE4B,QAAQ,EAAE;IAAZ,CAAD,CAdf;IAeL,GAAG1B,iBAAiB,EAff;IAgBL,GAAGE,gBAAgB,EAhBd;IAiBL,GAAGN,gBAAgB,EAjBd;IAkBL,GAAGQ,mBAAmB,CAAC;MAAEuB,UAAU,EAAE;IAAd,CAAD;EAlBjB,CAHJ;EAwBHC,KAAK,EAAE;IACL,qBAAsBC,CAAD,IAAgB;EADhC,CAxBJ;;EA4BHC,KAAK,CAAEf,KAAF,QAAoB;IAAA,IAAX;MAAEgB;IAAF,CAAW;IACvB,MAAMC,QAAQ,GAAG3B,eAAe,CAACU,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAM;MAAEkB;IAAF,IAAqBlC,WAAW,CAACgB,KAAD,CAAtC;IACA,MAAM;MAAEmB;IAAF,IAAsBjC,WAAW,CAACc,KAAD,CAAvC;IACA,MAAM;MAAEoB;IAAF,IAAc7B,UAAU,EAA9B;IAEA,MAAM;MAAE8B,YAAF;MAAgBC,WAAhB;MAA6BC;IAA7B,IAAgDzC,UAAU,CAACkB,KAAD,CAAhE;IACA,MAAM;MAAEwB;IAAF,IAAqBpC,UAAU,CAACY,KAAD,CAArC;IAEA,MAAMyB,OAAO,GAAG/B,GAAG,EAAnB;IAEAC,KAAK,CAACsB,QAAD,EAAWS,YAAX,CAAL;IACA/B,KAAK,CAAC,MAAMK,KAAK,CAACO,OAAb,EAAsBmB,YAAtB,CAAL;IAEAjC,SAAS,CAAC,MAAM;MACd,IAAIwB,QAAQ,CAACU,KAAb,EAAoBD,YAAY;IACjC,CAFQ,CAAT;IAIA,IAAIE,aAAa,GAAG,CAAC,CAArB;;IACA,SAASF,YAAT,GAAyB;MACvBG,MAAM,CAACC,YAAP,CAAoBF,aAApB;MACA,MAAMrB,OAAO,GAAGC,MAAM,CAACR,KAAK,CAACO,OAAP,CAAtB;MAEA,IAAI,CAACU,QAAQ,CAACU,KAAV,IAAmBpB,OAAO,KAAK,CAAC,CAApC,EAAuC;MAEvCqB,aAAa,GAAGC,MAAM,CAACE,UAAP,CAAkB,MAAM;QACtCd,QAAQ,CAACU,KAAT,GAAiB,KAAjB;MACD,CAFe,EAEbpB,OAFa,CAAhB;IAGD;;IAED,SAASyB,cAAT,GAA2B;MACzBH,MAAM,CAACC,YAAP,CAAoBF,aAApB;IACD;;IAED/B,SAAS,CAAC;MAAA,cAEIoB,QAAQ,CAACU,KAFb;MAAA,iCAEIV,QAAQ,CAACU,KAFb;MAAA,OAGAF,OAHA;MAAA,SAIC,CACL,YADK,EAEL;QACE,sBAAsBR,QAAQ,CAACU,KADjC;QAEE,0BAA0B3B,KAAK,CAACK,SAAN,IAAmB,CAACL,KAAK,CAACS,QAFtD;QAGE,wBAAwBT,KAAK,CAACS;MAHhC,CAFK,EAOLU,eAAe,CAACQ,KAPX,CAJD;MAAA,SAaC,CAACL,WAAW,CAACK,KAAb,CAbD;MAAA,gBAcQ;QACZM,KAAK,EAAEf,cAAc,CAACS;MADV,CAdR;MAAA,gBAiBS3B,KAAK,CAACC,YAjBf;MAAA;MAAA;MAAA,SAoBE,KApBF;MAAA,kBAqBS,MArBT;MAAA,cAsBOD,KAAK,CAACY;IAtBb,GAuBDQ,OAvBC;MAAA;QAAA,SA2BG,CACL,qBADK,EAELC,YAAY,CAACM,KAFR,EAGLH,cAAc,CAACG,KAHV,EAILJ,cAAc,CAACI,KAJV,CA3BH;QAAA,kBAiCaK,cAjCb;QAAA,kBAkCaN;MAlCb,IAoCF9C,WAAW,CAAC,KAAD,EAAQ,YAAR,CApCT,EAsCFoC,KAAK,CAACZ,OAAN;QAAA,SAEQ,qBAFR;QAAA,QAGO,QAHP;QAAA,aAIY;MAJZ,IAMIY,KAAK,CAACZ,OAAN,EANJ,EAtCE,EAgDFY,KAAK,CAACkB,OAAN;QAAA,YAEY;UACRC,IAAI,EAAE;YACJC,OAAO,EAAE,MADL;YAEJC,MAAM,EAAE;UAFJ;QADE;MAFZ;QAAA;UAAA,SASa;QATb,IAUMrB,KAAK,CAACkB,OAAN,EAVN;MAAA,EAhDE;MAwBKI,SAAS,EAAEtB,KAAK,CAACsB;IAxBtB,EAAD,CAAT;IAkEA,OAAO9C,WAAW,CAAC,EAAD,EAAKiC,OAAL,CAAlB;EACD;;AAjIE,CAPoC,CAAlC"}

package/lib/components/VSnackbar/VSnackbar.sass

@@ -1,17 +1,10 @@
-@forward './variables'
 @use '../../styles/tools'
 @use '../../styles/settings'
 @use './variables' as *
 
 .v-snackbar
-  bottom: $snackbar-bottom
-  display: flex
   justify-content: center
-  left: $snackbar-left
-  pointer-events: none
-  right: $snackbar-right
-  top: $snackbar-top
-  width: 100%
+  padding-inline-end: var(--v-scrollbar-offset)
 
   &:not(.v-snackbar--absolute)
     height: 100vh
@@ -31,10 +24,6 @@
     padding: $snackbar-wrapper-padding
     pointer-events: auto
     position: relative
-    transition-duration: .15s
-    transition-property: opacity, transform
-    transition-timing-function: settings.$decelerated-easing
-    z-index: 1
 
     @include tools.rounded($snackbar-border-radius)
 
@@ -69,24 +58,6 @@
   &--multi-line &__wrapper
     min-height: $snackbar-multi-line-wrapper-min-height
 
-  &--centered
-    align-items: center
-
-  &--start
-    justify-content: flex-start
-    right: auto
-
-  &--end
-    justify-content: flex-end
-    left: auto
-
-  &--bottom
-    top: auto
-
-  &--top
-    align-items: flex-start
-    bottom: auto
-
   &--vertical &__wrapper
     flex-direction: column
 
@@ -95,11 +66,20 @@
       margin-bottom: $snackbar-vertical-action-margin-bottom
 
 .v-snackbar-transition
+  &-enter-active,
+  &-leave-active
+    transition-duration: .15s
+    transition-timing-function: settings.$decelerated-easing
+
+  &-enter-active
+    transition-property: opacity, transform
+
   &-enter-from
-    &.v-snackbar__wrapper
-      transform: scale($snackbar-transition-scale)
+    opacity: 0
+    transform: scale($snackbar-transition-scale)
+
+  &-leave-active
+    transition-property: opacity
 
-  &-enter-from,
   &-leave-to
-    &.v-snackbar__wrapper
-      opacity: 0
+    opacity: 0

package/lib/components/VSnackbar/_variables.scss

@@ -1,14 +1,13 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
+// VSnackbar
 $snackbar-absolute-z-index: 1 !default;
 $snackbar-action-margin: 8px !default;
-$snackbar-background-color: #333333 !default;
 $snackbar-border-radius: settings.$border-radius-root !default;
 $snackbar-plain-opacity: .62 !default;
-$snackbar-bottom: 0 !default;
 $snackbar-btn-padding: 0 8px !default;
-$snackbar-background: #333333 !default;
+$snackbar-background: rgb(var(--v-theme-surface-variant)) !default;
 $snackbar-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $snackbar-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $snackbar-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
@@ -16,11 +15,7 @@ $snackbar-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'le
 $snackbar-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
 $snackbar-content-padding: 14px 16px !default;
 $snackbar-elevation: 6 !default;
-$snackbar-left: 0 !default;
 $snackbar-multi-line-wrapper-min-height: 68px !default;
-$snackbar-right: 0 !default;
-$snackbar-shaped-border-radius: map-get(settings.$rounded, 'xl') $snackbar-border-radius !default;
-$snackbar-top: 0 !default;
 $snackbar-transition-scale: .8 !default;
 $snackbar-vertical-action-margin-bottom: 8px !default;
 $snackbar-wrapper-margin: 8px !default;
@@ -30,6 +25,7 @@ $snackbar-wrapper-min-width: 344px !default;
 $snackbar-wrapper-padding: 0 !default;
 $snackbar-z-index: 10000 !default;
 
+// List
 $snackbar-variants: (
   $snackbar-background,
   $snackbar-color,