vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VSnackbar/VSnackbar.sass

@@ -2,86 +2,106 @@
 @use '../../styles/settings'
 @use './variables' as *
 
-.v-snackbar
-  justify-content: center
-  z-index: $snackbar-z-index
-  margin: $snackbar-wrapper-margin
-  margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
-
-  &:not(.v-snackbar--centered):not(.v-snackbar--top)
-    align-items: flex-end
-
-  &__wrapper
-    align-items: center
-    display: flex
-    max-width: $snackbar-wrapper-max-width
-    min-height: $snackbar-wrapper-min-height
-    min-width: $snackbar-wrapper-min-width
-    overflow: hidden
-    padding: $snackbar-wrapper-padding
-
-    @include tools.rounded($snackbar-border-radius)
-
-    @at-root .v-snackbar
-      @include tools.variant($snackbar-variants...)
-
-  &__content
-    flex-grow: 1
-    font-size: $snackbar-font-size
-    font-weight: $snackbar-font-weight
-    letter-spacing: $snackbar-letter-spacing
-    line-height: $snackbar-line-height
-    margin-right: auto
-    padding: $snackbar-content-padding
-    text-align: initial
-
-  &__actions
-    align-items: center
-    align-self: center
-    display: flex
-    margin-inline-end: $snackbar-action-margin
-
-    & > .v-btn
-      padding: $snackbar-btn-padding
-      min-width: auto
-
-  &__timer
-    width: 100%
-    position: absolute
-    top: 0
-
-    .v-progress-linear
-      transition: .2s linear
-
-  &--absolute
-    position: absolute
-    z-index: $snackbar-absolute-z-index
-
-  &--multi-line &__wrapper
-    min-height: $snackbar-multi-line-wrapper-min-height
-
-  &--vertical &__wrapper
-    flex-direction: column
-
-    .v-snackbar__actions
-      align-self: flex-end
-      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
-    opacity: 0
-    transform: scale($snackbar-transition-scale)
-
-  &-leave-active
-    transition-property: opacity
-
-  &-leave-to
-    opacity: 0
+@include tools.layer('components')
+  .v-snackbar
+    justify-content: center
+    z-index: $snackbar-z-index
+    margin: $snackbar-wrapper-margin
+    margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
+    padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)
+
+    &:not(.v-snackbar--centered):not(.v-snackbar--top)
+      align-items: flex-end
+
+    &__wrapper
+      align-items: center
+      display: flex
+      max-width: $snackbar-wrapper-max-width
+      min-height: $snackbar-wrapper-min-height
+      min-width: $snackbar-wrapper-min-width
+      overflow: hidden
+      padding: $snackbar-wrapper-padding
+
+      @include tools.rounded($snackbar-border-radius)
+
+      @at-root .v-snackbar
+        @include tools.variant($snackbar-variants...)
+
+    &__content
+      flex-grow: 1
+      font-size: $snackbar-font-size
+      font-weight: $snackbar-font-weight
+      letter-spacing: $snackbar-letter-spacing
+      line-height: $snackbar-line-height
+      margin-right: auto
+      padding: $snackbar-content-padding
+      text-align: initial
+
+    &__actions
+      align-items: center
+      align-self: center
+      display: flex
+      margin-inline-end: $snackbar-action-margin
+
+      & > .v-btn
+        padding: $snackbar-btn-padding
+        min-width: auto
+
+    &__timer
+      width: 100%
+      position: absolute
+      top: 0
+
+      .v-progress-linear
+        transition: .2s linear
+
+    &--absolute
+      position: absolute
+      z-index: $snackbar-absolute-z-index
+
+    &--multi-line &__wrapper
+      min-height: $snackbar-multi-line-wrapper-min-height
+
+    &--vertical &__wrapper
+      flex-direction: column
+
+      .v-snackbar__actions
+        align-self: flex-end
+        margin-bottom: $snackbar-vertical-action-margin-bottom
+
+    &--center
+      align-items: center
+      justify-content: center
+
+    &--top
+      align-items: flex-start
+
+    &--bottom
+      align-items: flex-end
+
+    &--left,
+    &--start
+      justify-content: flex-start
+
+    &--right,
+    &--end
+      justify-content: flex-end
+
+  .v-snackbar-transition
+    &-enter-active,
+    &-leave-active
+      transition-duration: .15s
+      transition-timing-function: settings.$decelerated-easing
+
+    &-enter-active
+      transition-property: opacity, transform
+
+    &-enter-from
+      opacity: 0
+      transform: scale($snackbar-transition-scale)
+
+    &-leave-active
+      transition-property: opacity
+
+    &-leave-to
+      opacity: 0

package/lib/components/VSnackbar/index.d.mts

@@ -251,6 +251,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -262,6 +263,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -270,6 +272,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
             onAfterEnter?: (() => any) | undefined;
@@ -328,6 +331,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -339,6 +343,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -348,6 +353,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -370,6 +376,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
@@ -431,6 +438,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -442,6 +450,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -451,6 +460,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -507,6 +517,7 @@ declare const VSnackbar: {
             activator: (arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
@@ -583,6 +594,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: Ref<boolean>;
@@ -594,6 +606,7 @@ declare const VSnackbar: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -603,6 +616,7 @@ declare const VSnackbar: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -924,6 +938,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -935,6 +950,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -943,6 +959,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
             onAfterEnter?: (() => any) | undefined;
@@ -1001,6 +1018,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -1012,6 +1030,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -1021,6 +1040,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1043,6 +1063,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
@@ -1104,6 +1125,7 @@ declare const VSnackbar: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: Ref<boolean>;
@@ -1115,6 +1137,7 @@ declare const VSnackbar: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -1124,6 +1147,7 @@ declare const VSnackbar: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1180,6 +1204,7 @@ declare const VSnackbar: {
             activator: (arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
@@ -1256,6 +1281,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: Ref<boolean>;
@@ -1267,6 +1293,7 @@ declare const VSnackbar: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1276,6 +1303,7 @@ declare const VSnackbar: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1489,6 +1517,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: Ref<boolean>;
@@ -1500,6 +1529,7 @@ declare const VSnackbar: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
         "v-slot:default"?: false | ((arg: {
@@ -1508,6 +1538,7 @@ declare const VSnackbar: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         onAfterEnter?: (() => any) | undefined;
@@ -1566,6 +1597,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: Ref<boolean>;
@@ -1577,6 +1609,7 @@ declare const VSnackbar: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1586,6 +1619,7 @@ declare const VSnackbar: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1608,6 +1642,7 @@ declare const VSnackbar: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[]) | undefined;
@@ -1669,6 +1704,7 @@ declare const VSnackbar: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: Ref<boolean>;
@@ -1680,6 +1716,7 @@ declare const VSnackbar: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -1689,6 +1726,7 @@ declare const VSnackbar: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1745,6 +1783,7 @@ declare const VSnackbar: {
         activator: (arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -1821,6 +1860,7 @@ declare const VSnackbar: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | ((arg: {
         isActive: Ref<boolean>;
@@ -1832,6 +1872,7 @@ declare const VSnackbar: {
         activator?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
@@ -1841,6 +1882,7 @@ declare const VSnackbar: {
     "v-slot:activator"?: false | ((arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: Ref<any>;
     }) => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;

package/lib/components/VStepper/VStepper.sass

@@ -2,52 +2,53 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-stepper.v-sheet
-  @include tools.elevation($stepper-elevation)
-  @include tools.rounded($stepper-border-radius)
+@include tools.layer('components')
+  .v-stepper.v-sheet
+    @include tools.elevation($stepper-elevation)
+    @include tools.rounded($stepper-border-radius)
 
-  overflow: hidden
+    overflow: hidden
 
-  &.v-stepper--flat
-    @include tools.elevation(0)
+    &.v-stepper--flat
+      @include tools.elevation(0)
 
-.v-stepper-header
-  @include tools.elevation($stepper-header-elevation)
+  .v-stepper-header
+    @include tools.elevation($stepper-header-elevation)
 
-  align-items: center
-  display: flex
-  position: relative
-  overflow-x: auto
-  justify-content: space-between
-  z-index: 1
+    align-items: center
+    display: flex
+    position: relative
+    overflow-x: auto
+    justify-content: space-between
+    z-index: 1
 
-  .v-divider
-    margin: $stepper-header-divider-margin
+    .v-divider
+      margin: $stepper-header-divider-margin
 
-    &:last-child
-      margin-inline-end: 0
+      &:last-child
+        margin-inline-end: 0
 
-    &:first-child
-      margin-inline-start: 0
+      &:first-child
+        margin-inline-start: 0
 
-  .v-stepper--alt-labels &
-    height: auto
+    .v-stepper--alt-labels &
+      height: auto
 
-    .v-divider
-      align-self: flex-start
-      margin: $stepper-alt-labels-header-divider
+      .v-divider
+        align-self: flex-start
+        margin: $stepper-alt-labels-header-divider
 
-.v-stepper-window
-  margin: $stepper-window-margin
+  .v-stepper-window
+    margin: $stepper-window-margin
 
-.v-stepper-actions
-  display: flex
-  align-items: center
-  justify-content: space-between
-  padding: $stepper-actions-padding
+  .v-stepper-actions
+    display: flex
+    align-items: center
+    justify-content: space-between
+    padding: $stepper-actions-padding
 
-  .v-stepper &
-    padding: $stepper-actions-stepper-padding
+    .v-stepper &
+      padding: $stepper-actions-stepper-padding
 
-  .v-stepper-window-item &
-    padding: $stepper-actions-stepper-window-item-padding
+    .v-stepper-window-item &
+      padding: $stepper-actions-stepper-window-item-padding