vuetify 3.6.0-alpha.2 → 3.6.0

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

@@ -710,6 +710,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -721,6 +722,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -729,6 +731,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -785,6 +788,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -796,6 +800,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -805,6 +810,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1284,6 +1290,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1295,6 +1302,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -1303,6 +1311,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -1359,6 +1368,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1370,6 +1380,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -1379,6 +1390,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -1972,6 +1984,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -1983,6 +1996,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -1991,6 +2005,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -2047,6 +2062,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -2058,6 +2074,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -2067,6 +2084,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -2595,6 +2613,7 @@ declare const VAutocomplete: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -2606,6 +2625,7 @@ declare const VAutocomplete: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
         "v-slot:default"?: false | ((arg: {
@@ -2614,6 +2634,7 @@ declare const VAutocomplete: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -2670,6 +2691,7 @@ declare const VAutocomplete: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -2681,6 +2703,7 @@ declare const VAutocomplete: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -2690,6 +2713,7 @@ declare const VAutocomplete: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -3426,6 +3450,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -3437,6 +3462,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -3445,6 +3471,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -3501,6 +3528,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -3512,6 +3540,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -3521,6 +3550,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -4104,6 +4134,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -4115,6 +4146,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
             "v-slot:default"?: false | ((arg: {
@@ -4123,6 +4155,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
@@ -4179,6 +4212,7 @@ declare const VAutocomplete: {
                 activator?: ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | ((arg: {
                 isActive: vue.Ref<boolean>;
@@ -4190,6 +4224,7 @@ declare const VAutocomplete: {
                 activator?: false | ((arg: {
                     isActive: boolean;
                     props: Record<string, any>;
+                    targetRef: vue.Ref<any>;
                 }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
@@ -4199,6 +4234,7 @@ declare const VAutocomplete: {
             "v-slot:activator"?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;

package/lib/components/VAvatar/VAvatar.sass

@@ -3,33 +3,34 @@
 @use './mixins' as *
 @use './variables' as *
 
-.v-avatar
-  flex: none
-  align-items: center
-  display: inline-flex
-  justify-content: center
-  line-height: $avatar-line-height
-  overflow: hidden
-  position: relative
-  text-align: center
-  transition: 0.2s settings.$standard-easing
-  transition-property: width, height
-  vertical-align: $avatar-vertical-align
+@include tools.layer('components')
+  .v-avatar
+    flex: none
+    align-items: center
+    display: inline-flex
+    justify-content: center
+    line-height: $avatar-line-height
+    overflow: hidden
+    position: relative
+    text-align: center
+    transition: 0.2s settings.$standard-easing
+    transition-property: width, height
+    vertical-align: $avatar-vertical-align
 
-  @include avatar-sizes($avatar-sizes)
-  @include avatar-density(('height', 'width'), $avatar-density)
-  @include tools.rounded($avatar-border-radius)
-  @include tools.variant($avatar-variants...)
+    @include avatar-sizes($avatar-sizes)
+    @include avatar-density(('height', 'width'), $avatar-density)
+    @include tools.rounded($avatar-border-radius)
+    @include tools.variant($avatar-variants...)
 
-  &--rounded
-    @include tools.rounded($avatar-rounded-border-radius)
+    &--rounded
+      @include tools.rounded($avatar-rounded-border-radius)
 
-  &--start
-    margin-inline-end: $avatar-margin-start
+    &--start
+      margin-inline-end: $avatar-margin-start
 
-  &--end  
-    margin-inline-start: $avatar-margin-end
+    &--end
+      margin-inline-start: $avatar-margin-end
 
-  .v-img
-    height: 100%
-    width: 100%
+    .v-img
+      height: 100%
+      width: 100%

package/lib/components/VBadge/VBadge.sass

@@ -1,73 +1,74 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-badge
-  display: inline-block
-  line-height: $badge-line-height
+@include tools.layer('components')
+  .v-badge
+    display: inline-block
+    line-height: $badge-line-height
 
-.v-badge__badge
-  align-items: center
-  display: inline-flex
-  border-radius: $badge-border-radius
-  font-size: $badge-font-size
-  font-weight: $badge-font-weight
-  height: $badge-height
-  justify-content: center
-  min-width: $badge-min-width
-  padding: $badge-padding
-  pointer-events: auto
-  position: absolute
-  text-align: center
-  text-indent: 0
-  transition: $badge-transition
-  white-space: nowrap
+  .v-badge__badge
+    align-items: center
+    display: inline-flex
+    border-radius: $badge-border-radius
+    font-size: $badge-font-size
+    font-weight: $badge-font-weight
+    height: $badge-height
+    justify-content: center
+    min-width: $badge-min-width
+    padding: $badge-padding
+    pointer-events: auto
+    position: absolute
+    text-align: center
+    text-indent: 0
+    transition: $badge-transition
+    white-space: nowrap
 
-  @include tools.theme($badge-theme...)
+    @include tools.theme($badge-theme...)
 
-  .v-badge--bordered &
-    &::after
-      border-radius: inherit
-      border-style: $badge-border-style
-      border-width: $badge-border-width
-      bottom: 0
-      color: $badge-border-color
-      content: ''
-      left: 0
-      position: absolute
-      right: 0
-      top: 0
-      transform: $badge-border-transform
+    .v-badge--bordered &
+      &::after
+        border-radius: inherit
+        border-style: $badge-border-style
+        border-width: $badge-border-width
+        bottom: 0
+        color: $badge-border-color
+        content: ''
+        left: 0
+        position: absolute
+        right: 0
+        top: 0
+        transform: $badge-border-transform
 
-  .v-badge--dot &
-    border-radius: $badge-dot-border-radius
-    height: $badge-dot-height
-    min-width: 0
-    padding: 0
-    width: $badge-dot-width
+    .v-badge--dot &
+      border-radius: $badge-dot-border-radius
+      height: $badge-dot-height
+      min-width: 0
+      padding: 0
+      width: $badge-dot-width
 
-    &::after
-      border-width: $badge-dot-border-width
+      &::after
+        border-width: $badge-dot-border-width
 
-  .v-badge--inline &
-    position: relative
-    vertical-align: $badge-inline-vertical-align
+    .v-badge--inline &
+      position: relative
+      vertical-align: $badge-inline-vertical-align
 
-  .v-icon
-    color: inherit
-    font-size: $badge-font-size
-    margin: $badge-icon-margin
+    .v-icon
+      color: inherit
+      font-size: $badge-font-size
+      margin: $badge-icon-margin
 
-  img,
-  .v-img
-    height: 100%
-    width: 100%
+    img,
+    .v-img
+      height: 100%
+      width: 100%
 
-.v-badge__wrapper
-  display: flex
-  position: relative
+  .v-badge__wrapper
+    display: flex
+    position: relative
 
-  .v-badge--inline &
-    align-items: center
-    display: inline-flex
-    justify-content: center
-    margin: $badge-wrapper-margin
+    .v-badge--inline &
+      align-items: center
+      display: inline-flex
+      justify-content: center
+      margin: $badge-wrapper-margin

package/lib/components/VBanner/VBanner.css

@@ -5,7 +5,7 @@
   grid-template-areas: "prepend content actions";
   grid-template-columns: max-content auto max-content;
   grid-template-rows: max-content max-content;
-  line-height: 1.375rem;
+  line-height: 1.6;
   overflow: hidden;
   padding-inline: 16px 8px;
   padding-top: 16px;

package/lib/components/VBanner/VBanner.sass

@@ -2,106 +2,107 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-banner
-  display: grid
-  flex: 1 1
-  font-size: $banner-font-size
-  grid-template-areas: "prepend content actions"
-  grid-template-columns: max-content auto max-content
-  grid-template-rows: max-content max-content
-  line-height: $banner-line-height
-  overflow: hidden
-  padding-inline: $banner-padding-inline-start $banner-padding-inline-end
-  padding-top: $banner-padding * 2
-  padding-bottom: $banner-padding * 2
-  position: relative
-  width: $banner-width
-
-  @include tools.border($banner-border...)
-  @include tools.elevation($banner-elevation)
-  @include tools.position($banner-positions)
-  @include tools.rounded($banner-border-radius)
-  @include tools.theme($banner-theme...)
-
-  &--rounded
-    @include tools.rounded($banner-rounded-border-radius)
-
-  &--stacked
-    &:not(.v-banner--one-line)
-      grid-template-areas: "prepend content" ". actions"
-
-    .v-banner-text
-      padding-inline-end: $banner-stacked-padding-inline-end
-
-  @at-root
-    @include tools.density('v-banner', $banner-density) using ($modifier)
-      .v-banner-actions
-        margin-bottom: -($banner-padding + $modifier)
-
-      &.v-banner--one-line
-        padding-top: $banner-padding + $modifier
-        padding-bottom: $banner-padding + $modifier
-
+@include tools.layer('components')
+  .v-banner
+    display: grid
+    flex: 1 1
+    font-size: $banner-font-size
+    grid-template-areas: "prepend content actions"
+    grid-template-columns: max-content auto max-content
+    grid-template-rows: max-content max-content
+    line-height: $banner-line-height
+    overflow: hidden
+    padding-inline: $banner-padding-inline-start $banner-padding-inline-end
+    padding-top: $banner-padding * 2
+    padding-bottom: $banner-padding * 2
+    position: relative
+    width: $banner-width
+
+    @include tools.border($banner-border...)
+    @include tools.elevation($banner-elevation)
+    @include tools.position($banner-positions)
+    @include tools.rounded($banner-border-radius)
+    @include tools.theme($banner-theme...)
+
+    &--rounded
+      @include tools.rounded($banner-rounded-border-radius)
+
+    &--stacked
+      &:not(.v-banner--one-line)
+        grid-template-areas: "prepend content" ". actions"
+
+      .v-banner-text
+        padding-inline-end: $banner-stacked-padding-inline-end
+
+    @at-root
+      @include tools.density('v-banner', $banner-density) using ($modifier)
         .v-banner-actions
-          margin-bottom: 0
+          margin-bottom: -($banner-padding + $modifier)
 
-      @if ($modifier == 0px)
         &.v-banner--one-line
-          padding-top: $banner-padding + $modifier + 2
-
-      &.v-banner--two-line
-        padding-top: $banner-padding * 2 + $modifier
-        padding-bottom: $banner-padding * 2 + $modifier
-
-      &.v-banner--three-line
-        padding-top: $banner-padding * 3 + $modifier
-        padding-bottom: $banner-padding * 2 + $modifier
-
-      &:not(.v-banner--one-line),
-      &.v-banner--two-line,
-      &.v-banner--three-line
-        .v-banner-actions
-          margin-top: $banner-action-margin + $modifier
-
-  &--sticky
-    top: $banner-sticky-top
-
-.v-banner__content
-  align-items: center
-  display: flex
-  grid-area: content
+          padding-top: $banner-padding + $modifier
+          padding-bottom: $banner-padding + $modifier
 
-.v-banner__prepend
-  align-self: flex-start
-  grid-area: prepend
-  margin-inline-end: $banner-prepend-margin-end
+          .v-banner-actions
+            margin-bottom: 0
 
-.v-banner-actions
-  align-self: flex-end
-  display: flex
-  flex: 0 1
-  grid-area: actions
-  justify-content: flex-end
+        @if ($modifier == 0px)
+          &.v-banner--one-line
+            padding-top: $banner-padding + $modifier + 2
 
-  .v-banner--two-line &,
-  .v-banner--three-line &
-    margin-top: $banner-actions-line-margin-top
+        &.v-banner--two-line
+          padding-top: $banner-padding * 2 + $modifier
+          padding-bottom: $banner-padding * 2 + $modifier
 
-.v-banner-text
-  -webkit-box-orient: vertical
-  display: -webkit-box
-  padding-inline-end: $banner-text-padding-end
-  overflow: hidden
+        &.v-banner--three-line
+          padding-top: $banner-padding * 3 + $modifier
+          padding-bottom: $banner-padding * 2 + $modifier
 
-  .v-banner--one-line &
-    -webkit-line-clamp: 1
+        &:not(.v-banner--one-line),
+        &.v-banner--two-line,
+        &.v-banner--three-line
+          .v-banner-actions
+            margin-top: $banner-action-margin + $modifier
 
-  .v-banner--two-line &
-    -webkit-line-clamp: 2
+    &--sticky
+      top: $banner-sticky-top
 
-  .v-banner--three-line &
-    -webkit-line-clamp: 3
+  .v-banner__content
+    align-items: center
+    display: flex
+    grid-area: content
 
-  .v-banner--two-line &,
-  .v-banner--three-line &
+  .v-banner__prepend
     align-self: flex-start
+    grid-area: prepend
+    margin-inline-end: $banner-prepend-margin-end
+
+  .v-banner-actions
+    align-self: flex-end
+    display: flex
+    flex: 0 1
+    grid-area: actions
+    justify-content: flex-end
+
+    .v-banner--two-line &,
+    .v-banner--three-line &
+      margin-top: $banner-actions-line-margin-top
+
+  .v-banner-text
+    -webkit-box-orient: vertical
+    display: -webkit-box
+    padding-inline-end: $banner-text-padding-end
+    overflow: hidden
+
+    .v-banner--one-line &
+      -webkit-line-clamp: 1
+
+    .v-banner--two-line &
+      -webkit-line-clamp: 2
+
+    .v-banner--three-line &
+      -webkit-line-clamp: 3
+
+    .v-banner--two-line &,
+    .v-banner--three-line &
+      align-self: flex-start