vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VProgressLinear/VProgressLinear.sass

@@ -1,197 +1,198 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-// Block
-.v-progress-linear
-  background: transparent
-  overflow: hidden
-  position: relative
-  transition: $progress-linear-transition
-  width: 100%
-
-  &--rounded
-    @include tools.rounded($progress-linear-border-radius)
-
-// Elements
-.v-progress-linear__background,
-.v-progress-linear__buffer
-  background: $progress-linear-background
-  bottom: 0
-  left: 0
-  opacity: $progress-linear-background-opacity
-  position: absolute
-  top: 0
-  width: 100%
-  transition-property: width, left, right
-  transition: inherit
-
-.v-progress-linear__content
-  align-items: center
-  display: flex
-  height: 100%
-  justify-content: center
-  left: 0
-  pointer-events: none
-  position: absolute
-  top: 0
-  width: 100%
-
-.v-progress-linear__determinate,
-.v-progress-linear__indeterminate
-  background: $progress-linear-background
-
-.v-progress-linear__determinate
-  height: inherit
-  left: 0
-  position: absolute
-  transition: inherit
-  transition-property: width, left, right
-
-.v-progress-linear__indeterminate
-  .long, .short
-    animation-play-state: paused
-    animation-duration: $progress-linear-indeterminate-animation-duration
-    animation-iteration-count: infinite
+@include tools.layer('components')
+  // Block
+  .v-progress-linear
+    background: transparent
+    overflow: hidden
+    position: relative
+    transition: $progress-linear-transition
+    width: 100%
+
+    &--rounded
+      @include tools.rounded($progress-linear-border-radius)
+
+  // Elements
+  .v-progress-linear__background,
+  .v-progress-linear__buffer
+    background: $progress-linear-background
     bottom: 0
-    height: inherit
     left: 0
+    opacity: $progress-linear-background-opacity
     position: absolute
-    right: auto
     top: 0
-    width: auto
-
-  .long
-    animation-name: indeterminate-ltr
-
-  .short
-    animation-name: indeterminate-short-ltr
-
-.v-progress-linear__stream
-  animation: $progress-linear-stream-animation
-  animation-play-state: paused
-  bottom: 0
-  left: auto
-  opacity: $progress-linear-stream-opacity
-  pointer-events: none
-  position: absolute
-  transition: inherit
-  transition-property: width, left, right
-
-// Modifiers
-.v-progress-linear--reverse
-  .v-progress-linear__background,
-  .v-progress-linear__determinate,
+    width: 100%
+    transition-property: width, left, right
+    transition: inherit
+
   .v-progress-linear__content
-    left: auto
-    right: 0
+    align-items: center
+    display: flex
+    height: 100%
+    justify-content: center
+    left: 0
+    pointer-events: none
+    position: absolute
+    top: 0
+    width: 100%
+
+  .v-progress-linear__determinate,
+  .v-progress-linear__indeterminate
+    background: $progress-linear-background
+
+  .v-progress-linear__determinate
+    height: inherit
+    left: 0
+    position: absolute
+    transition: inherit
+    transition-property: width, left, right
 
   .v-progress-linear__indeterminate
     .long, .short
-      left: auto
-      right: 0
+      animation-play-state: paused
+      animation-duration: $progress-linear-indeterminate-animation-duration
+      animation-iteration-count: infinite
+      bottom: 0
+      height: inherit
+      left: 0
+      position: absolute
+      right: auto
+      top: 0
+      width: auto
 
     .long
-      animation-name: indeterminate-rtl
+      animation-name: indeterminate-ltr
 
     .short
-      animation-name: indeterminate-short-rtl
+      animation-name: indeterminate-short-ltr
 
   .v-progress-linear__stream
-    right: auto
+    animation: $progress-linear-stream-animation
+    animation-play-state: paused
+    bottom: 0
+    left: auto
+    opacity: $progress-linear-stream-opacity
+    pointer-events: none
+    position: absolute
+    transition: inherit
+    transition-property: width, left, right
 
-.v-progress-linear--absolute,
-.v-progress-linear--fixed
-  left: 0
-  z-index: 1
+  // Modifiers
+  .v-progress-linear--reverse
+    .v-progress-linear__background,
+    .v-progress-linear__determinate,
+    .v-progress-linear__content
+      left: auto
+      right: 0
 
-.v-progress-linear--absolute
-  position: absolute
+    .v-progress-linear__indeterminate
+      .long, .short
+        left: auto
+        right: 0
 
-.v-progress-linear--fixed
-  position: fixed
+      .long
+        animation-name: indeterminate-rtl
 
-.v-progress-linear--rounded
-  @include tools.rounded($progress-linear-border-radius)
+      .short
+        animation-name: indeterminate-short-rtl
 
-  &.v-progress-linear--rounded-bar
-    .v-progress-linear__determinate,
-    .v-progress-linear__indeterminate
-      border-radius: inherit
+    .v-progress-linear__stream
+      right: auto
 
-.v-progress-linear--striped
-  .v-progress-linear__determinate
-    animation: $progress-linear-striped-animation
-    background-image: $progress-linear-stripe-gradient
-    background-repeat: repeat
-    background-size: $progress-linear-striped-size
+  .v-progress-linear--absolute,
+  .v-progress-linear--fixed
+    left: 0
+    z-index: 1
 
-.v-progress-linear--active
-  .v-progress-linear__indeterminate
-    .long, .short
-      animation-play-state: running
+  .v-progress-linear--absolute
+    position: absolute
 
-  .v-progress-linear__stream
-    animation-play-state: running
+  .v-progress-linear--fixed
+    position: fixed
 
-.v-progress-linear--rounded-bar
-  .v-progress-linear__determinate,
-  .v-progress-linear__indeterminate,
-  .v-progress-linear__stream + .v-progress-linear__background
+  .v-progress-linear--rounded
     @include tools.rounded($progress-linear-border-radius)
 
-  .v-progress-linear__determinate
-    border-start-start-radius: 0
-    border-end-start-radius: 0
-
-// Keyframes
-@keyframes indeterminate-ltr
-  0%
-    left: -90%
-    right: 100%
-  60%
-    left: -90%
-    right: 100%
-  100%
-    left: 100%
-    right: -35%
-
-@keyframes indeterminate-rtl
-  0%
-    left: 100%
-    right: -90%
-  60%
-    left: 100%
-    right: -90%
-  100%
-    left: -35%
-    right: 100%
-
-@keyframes indeterminate-short-ltr
-  0%
-    left: -200%
-    right: 100%
-  60%
-    left: 107%
-    right: -8%
-  100%
-    left: 107%
-    right: -8%
-
-@keyframes indeterminate-short-rtl
-  0%
-    left: 100%
-    right: -200%
-  60%
-    left: -8%
-    right: 107%
-  100%
-    left: -8%
-    right: 107%
-
-@keyframes stream
-  to
-    transform: translateX(var(--v-progress-linear-stream-to))
-
-@keyframes progress-linear-stripes
-  0%
-    background-position-x: $progress-linear-striped-size
+    &.v-progress-linear--rounded-bar
+      .v-progress-linear__determinate,
+      .v-progress-linear__indeterminate
+        border-radius: inherit
+
+  .v-progress-linear--striped
+    .v-progress-linear__determinate
+      animation: $progress-linear-striped-animation
+      background-image: $progress-linear-stripe-gradient
+      background-repeat: repeat
+      background-size: $progress-linear-striped-size
+
+  .v-progress-linear--active
+    .v-progress-linear__indeterminate
+      .long, .short
+        animation-play-state: running
+
+    .v-progress-linear__stream
+      animation-play-state: running
+
+  .v-progress-linear--rounded-bar
+    .v-progress-linear__determinate,
+    .v-progress-linear__indeterminate,
+    .v-progress-linear__stream + .v-progress-linear__background
+      @include tools.rounded($progress-linear-border-radius)
+
+    .v-progress-linear__determinate
+      border-start-start-radius: 0
+      border-end-start-radius: 0
+
+  // Keyframes
+  @keyframes indeterminate-ltr
+    0%
+      left: -90%
+      right: 100%
+    60%
+      left: -90%
+      right: 100%
+    100%
+      left: 100%
+      right: -35%
+
+  @keyframes indeterminate-rtl
+    0%
+      left: 100%
+      right: -90%
+    60%
+      left: 100%
+      right: -90%
+    100%
+      left: -35%
+      right: 100%
+
+  @keyframes indeterminate-short-ltr
+    0%
+      left: -200%
+      right: 100%
+    60%
+      left: 107%
+      right: -8%
+    100%
+      left: 107%
+      right: -8%
+
+  @keyframes indeterminate-short-rtl
+    0%
+      left: 100%
+      right: -200%
+    60%
+      left: -8%
+      right: 107%
+    100%
+      left: -8%
+      right: 107%
+
+  @keyframes stream
+    to
+      transform: translateX(var(--v-progress-linear-stream-to))
+
+  @keyframes progress-linear-stripes
+    0%
+      background-position-x: $progress-linear-striped-size

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

@@ -1,6 +1,12 @@
 import * as vue from 'vue';
 import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
 
+declare const block: readonly ["top", "bottom"];
+declare const inline: readonly ["start", "end", "left", "right"];
+type Tblock = typeof block[number];
+type Tinline = typeof inline[number];
+type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
+
 interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>;
 }
@@ -15,6 +21,7 @@ declare const VProgressLinear: {
         absolute: boolean;
         modelValue: string | number;
         tile: boolean;
+        location: NonNullable<Anchor>;
         max: string | number;
         indeterminate: boolean;
         bufferValue: string | number;
@@ -66,6 +73,7 @@ declare const VProgressLinear: {
         absolute: boolean;
         modelValue: string | number;
         tile: boolean;
+        location: NonNullable<Anchor>;
         max: string | number;
         indeterminate: boolean;
         bufferValue: string | number;
@@ -116,6 +124,7 @@ declare const VProgressLinear: {
         modelValue: string | number;
         rounded: string | number | boolean;
         tile: boolean;
+        location: NonNullable<Anchor>;
         max: string | number;
         indeterminate: boolean;
         bufferValue: string | number;
@@ -146,6 +155,7 @@ declare const VProgressLinear: {
         absolute: boolean;
         modelValue: string | number;
         tile: boolean;
+        location: NonNullable<Anchor>;
         max: string | number;
         indeterminate: boolean;
         bufferValue: string | number;
@@ -196,6 +206,7 @@ declare const VProgressLinear: {
         modelValue: string | number;
         rounded: string | number | boolean;
         tile: boolean;
+        location: NonNullable<Anchor>;
         max: string | number;
         indeterminate: boolean;
         bufferValue: string | number;
@@ -216,6 +227,7 @@ declare const VProgressLinear: {
     absolute: boolean;
     modelValue: string | number;
     tile: boolean;
+    location: NonNullable<Anchor>;
     max: string | number;
     indeterminate: boolean;
     bufferValue: string | number;
@@ -268,6 +280,7 @@ declare const VProgressLinear: {
     modelValue: string | number;
     rounded: string | number | boolean;
     tile: boolean;
+    location: NonNullable<Anchor>;
     max: string | number;
     indeterminate: boolean;
     bufferValue: string | number;
@@ -293,6 +306,10 @@ declare const VProgressLinear: {
         default: undefined;
     };
     tile: BooleanConstructor;
+    location: {
+        type: vue.PropType<NonNullable<Anchor>>;
+        default: NonNullable<Anchor>;
+    };
     class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
@@ -342,6 +359,10 @@ declare const VProgressLinear: {
         default: undefined;
     };
     tile: BooleanConstructor;
+    location: {
+        type: vue.PropType<NonNullable<Anchor>>;
+        default: NonNullable<Anchor>;
+    };
     class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;

package/lib/components/VRadioGroup/VRadioGroup.sass

@@ -1,15 +1,17 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-radio-group
-  > .v-input__control
-    flex-direction: column
+@include tools.layer('components')
+  .v-radio-group
+    > .v-input__control
+      flex-direction: column
 
-    > .v-label
-      margin-inline-start: $radio-group-label-margin-inline-start
+      > .v-label
+        margin-inline-start: $radio-group-label-margin-inline-start
 
-      + .v-selection-control-group
-        padding-inline-start: $radio-group-label-selection-group-padding-inline
-        margin-top: $radio-group-label-selection-group-margin-top
+        + .v-selection-control-group
+          padding-inline-start: $radio-group-label-selection-group-padding-inline
+          margin-top: $radio-group-label-selection-group-margin-top
 
-  .v-input__details
-    padding-inline: $radio-group-details-padding-inline
+    .v-input__details
+      padding-inline: $radio-group-details-padding-inline

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

@@ -71,6 +71,7 @@ declare const VRangeSlider: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         color?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
@@ -178,6 +179,7 @@ declare const VRangeSlider: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         color?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
@@ -347,6 +349,7 @@ declare const VRangeSlider: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         color?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
@@ -483,6 +486,7 @@ declare const VRangeSlider: {
     id?: string | undefined;
     label?: string | undefined;
     width?: string | number | undefined;
+    theme?: string | undefined;
     color?: string | undefined;
     name?: string | undefined;
     'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
@@ -713,6 +717,7 @@ declare const VRangeSlider: {
     };
     validateOn: PropType<("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined>;
     validationValue: null;
+    theme: StringConstructor;
     width: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
@@ -839,6 +844,7 @@ declare const VRangeSlider: {
     };
     validateOn: PropType<("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined>;
     validationValue: null;
+    theme: StringConstructor;
     width: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];

package/lib/components/VRating/VRating.sass

@@ -1,57 +1,59 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-// Block
-.v-rating
-  max-width: 100%
-  display: inline-flex
-  white-space: $rating-white-space
+@include tools.layer('components')
+  // Block
+  .v-rating
+    max-width: 100%
+    display: inline-flex
+    white-space: $rating-white-space
 
-  &--readonly
-    pointer-events: none
+    &--readonly
+      pointer-events: none
 
-// Element
-.v-rating__wrapper
-  align-items: $rating-item-align-items
-  display: inline-flex
-  flex-direction: column
+  // Element
+  .v-rating__wrapper
+    align-items: $rating-item-align-items
+    display: inline-flex
+    flex-direction: column
 
-  &--bottom
-    flex-direction: column-reverse
+    &--bottom
+      flex-direction: column-reverse
 
-.v-rating__item
-  display: inline-flex
-  position: relative
+  .v-rating__item
+    display: inline-flex
+    position: relative
 
-  label
-    cursor: pointer
+    label
+      cursor: pointer
 
-  .v-btn--variant-plain
-    opacity: $rating-item-button-opacity
+    .v-btn--variant-plain
+      opacity: $rating-item-button-opacity
 
-  .v-btn
-    transition-property: $rating-item-button-transition-property
+    .v-btn
+      transition-property: $rating-item-button-transition-property
 
-    .v-icon
-      transition: inherit
-      transition-timing-function: $rating-item-transition-timing-function
+      .v-icon
+        transition: inherit
+        transition-timing-function: $rating-item-transition-timing-function
 
-  &:hover:not(.v-rating__item--focused)
-    .v-rating--hover &
-      .v-btn
-        transform: $rating-item-icon-transform
+    &:hover:not(.v-rating__item--focused)
+      .v-rating--hover &
+        .v-btn
+          transform: $rating-item-icon-transform
 
-  &--half
-    overflow: hidden
+    &--half
+      overflow: hidden
+      position: absolute
+      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
+      z-index: 1
+
+      .v-btn__overlay,
+      &:hover .v-btn__overlay
+        opacity: 0
+
+  .v-rating__hidden
+    height: 0
+    opacity: 0
     position: absolute
-    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
-    z-index: 1
-
-    .v-btn__overlay,
-    &:hover .v-btn__overlay
-      opacity: 0
-
-.v-rating__hidden
-  height: 0
-  opacity: 0
-  position: absolute
-  width: 0
+    width: 0

package/lib/components/VResponsive/VResponsive.sass

@@ -1,25 +1,27 @@
 @use '../../styles/settings'
+@use '../../styles/tools'
 
-.v-responsive
-  display: flex
-  flex: 1 0 auto
-  max-height: 100%
-  max-width: 100%
-  overflow: hidden
-  position: relative
+@include tools.layer('components')
+  .v-responsive
+    display: flex
+    flex: 1 0 auto
+    max-height: 100%
+    max-width: 100%
+    overflow: hidden
+    position: relative
 
-  &--inline
-    display: inline-flex
-    flex: 0 0 auto
+    &--inline
+      display: inline-flex
+      flex: 0 0 auto
 
-.v-responsive__content
-  flex: 1 0 0px
-  max-width: 100%
+  .v-responsive__content
+    flex: 1 0 0px
+    max-width: 100%
 
-.v-responsive__sizer ~ .v-responsive__content
-  margin-inline-start: -100%
+  .v-responsive__sizer ~ .v-responsive__content
+    margin-inline-start: -100%
 
-.v-responsive__sizer
-  flex: 1 0 0px
-  transition: padding-bottom 0.2s settings.$standard-easing
-  pointer-events: none
+  .v-responsive__sizer
+    flex: 1 0 0px
+    transition: padding-bottom 0.2s settings.$standard-easing
+    pointer-events: none