vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VChip/VChip.sass

@@ -2,85 +2,87 @@
 @use './variables' as *
 @use './mixins' as *
 
-.v-chip
-  align-items: center
-  display: inline-flex
-  font-weight: $chip-font-weight
-  max-width: $chip-max-width
-  min-width: 0
-  overflow: hidden
-  position: relative
-  text-decoration: none
-  white-space: $chip-white-space
-  vertical-align: middle
-
-  .v-icon
-    --v-icon-size-multiplier: #{$chip-icon-size-multiplier}
-
-  @at-root
-    @include chip-sizes()
-    @include chip-density('height', $chip-density)
-
-  @include tools.border($chip-border...)
-  @include tools.states('.v-chip__overlay')
-  @include tools.rounded($chip-border-radius)
-  @include tools.variant($chip-variants...)
-
-  &--border
-    border-width: $chip-border-thin-width
-
-  &--link
+@include tools.layer('components')
+  .v-chip
+    align-items: center
+    display: inline-flex
+    font-weight: $chip-font-weight
+    max-width: $chip-max-width
+    min-width: 0
+    overflow: hidden
+    position: relative
+    text-decoration: none
+    white-space: $chip-white-space
+    vertical-align: middle
+
+    .v-icon
+      --v-icon-size-multiplier: #{$chip-icon-size-multiplier}
+
+    @at-root
+      @include chip-sizes()
+      @include chip-density('height', $chip-density)
+
+    @include tools.border($chip-border...)
+    @include tools.states('.v-chip__overlay')
+    @include tools.rounded($chip-border-radius)
+    @include tools.variant($chip-variants...)
+
+    &--border
+      border-width: $chip-border-thin-width
+
+    &--link
+      cursor: pointer
+
+    &--link,
+    &--filter
+      user-select: none
+
+    &--label
+      @include tools.rounded($chip-label-border-radius)
+
+  // Elements
+  .v-chip__content
+    align-items: center
+    display: inline-flex
+
+    .v-autocomplete__selection &,
+    .v-combobox__selection &,
+    .v-select__selection &
+      overflow: hidden
+
+  .v-chip__filter,
+  .v-chip__prepend,
+  .v-chip__append,
+  .v-chip__close
+    align-items: center
+    display: inline-flex
+
+  .v-chip__close
     cursor: pointer
-
-  &--filter
+    flex: 0 1 auto
+    font-size: $chip-close-size
+    max-height: $chip-close-size
+    max-width: $chip-close-size
     user-select: none
 
-  &--label
-    @include tools.rounded($chip-label-border-radius)
+    .v-icon
+      font-size: inherit
 
-// Elements
-.v-chip__content
-  align-items: center
-  display: inline-flex
+  .v-chip__filter
+    transition: $chip-filter-transition
 
-  .v-autocomplete__selection &,
-  .v-combobox__selection &,
-  .v-select__selection &
-    overflow: hidden
+  .v-chip__overlay
+    @include tools.absolute()
+    background-color: currentColor
+    border-radius: inherit
+    pointer-events: none
+    opacity: 0
+    transition: opacity .2s ease-in-out
+
+  .v-chip--disabled
+    opacity: $chip-disabled-opacity
+    pointer-events: none
+    user-select: none
 
-.v-chip__filter,
-.v-chip__prepend,
-.v-chip__append,
-.v-chip__close
-  align-items: center
-  display: inline-flex
-
-.v-chip__close
-  cursor: pointer
-  flex: 0 1 auto
-  font-size: $chip-close-size
-  max-height: $chip-close-size
-  max-width: $chip-close-size
-  user-select: none
-
-  .v-icon
-    font-size: inherit
-
-.v-chip__filter
-  transition: $chip-filter-transition
-
-.v-chip__overlay
-  @include tools.absolute()
-  background-color: currentColor
-  border-radius: inherit
-  pointer-events: none
-  opacity: 0
-  transition: opacity .2s ease-in-out
-
-.v-chip--disabled
-  opacity: $chip-disabled-opacity
-  pointer-events: none
-  user-select: none
-
-.v-chip--label
-  border-radius: $chip-label-border-radius
+  .v-chip--label
+    border-radius: $chip-label-border-radius

package/lib/components/VChipGroup/VChipGroup.sass

@@ -1,23 +1,25 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-// Block
-.v-chip-group
-  display: flex
-  max-width: 100%
-  min-width: 0
-  overflow-x: auto
-  padding: $chip-group-padding
+@include tools.layer('components')
+  // Block
+  .v-chip-group
+    display: flex
+    max-width: 100%
+    min-width: 0
+    overflow-x: auto
+    padding: $chip-group-padding
 
-  .v-chip
-    margin: $chip-group-margin
+    .v-chip
+      margin: $chip-group-margin
 
-    &.v-chip--selected:not(.v-chip--disabled)
-      .v-chip__overlay
-        opacity: $chip-group-selected-opacity
+      &.v-chip--selected:not(.v-chip--disabled)
+        .v-chip__overlay
+          opacity: $chip-group-selected-opacity
 
-// Modifiers
-.v-chip-group--column
-  .v-slide-group__content
-    white-space: normal
-    flex-wrap: wrap
-    max-width: 100%
+  // Modifiers
+  .v-chip-group--column
+    .v-slide-group__content
+      white-space: normal
+      flex-wrap: wrap
+      max-width: 100%

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

@@ -39,6 +39,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
@@ -78,6 +79,7 @@ declare const VChipGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         column: boolean;
         multiple: boolean;
@@ -103,6 +105,7 @@ declare const VChipGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         column: boolean;
         multiple: boolean;
@@ -126,6 +129,7 @@ declare const VChipGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         column: boolean;
         multiple: boolean;
@@ -158,6 +162,7 @@ declare const VChipGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         column: boolean;
         multiple: boolean;
@@ -181,6 +186,7 @@ declare const VChipGroup: {
         style: vue.StyleValue;
         disabled: boolean;
         tag: string;
+        mobile: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         column: boolean;
         multiple: boolean;
@@ -200,6 +206,7 @@ declare const VChipGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
+    mobile: boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     column: boolean;
     multiple: boolean;
@@ -225,6 +232,7 @@ declare const VChipGroup: {
     style: vue.StyleValue;
     disabled: boolean;
     tag: string;
+    mobile: boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     column: boolean;
     multiple: boolean;
@@ -282,6 +290,10 @@ declare const VChipGroup: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     centerActive: BooleanConstructor;
     direction: {
@@ -342,6 +354,10 @@ declare const VChipGroup: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
+    mobile: {
+        type: BooleanConstructor;
+        default: null;
+    };
     mobileBreakpoint: PropType<number | DisplayBreakpoint>;
     centerActive: BooleanConstructor;
     direction: {

package/lib/components/VCode/VCode.sass

@@ -1,10 +1,12 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-code
-  background-color: $code-background-color
-  color: $code-color
-  border-radius: $code-border-radius
-  line-height: $code-line-height
-  font-size: $code-font-size
-  font-weight: $code-font-weight
-  padding: $code-padding
+@include tools.layer('components')
+  .v-code
+    background-color: $code-background-color
+    color: $code-color
+    border-radius: $code-border-radius
+    line-height: $code-line-height
+    font-size: $code-font-size
+    font-weight: $code-font-weight
+    padding: $code-padding

package/lib/components/VColorPicker/VColorPicker.sass

@@ -1,24 +1,25 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-// Block
-.v-color-picker
-  align-self: flex-start
-  contain: content
+@include tools.layer('components')
+  // Block
+  .v-color-picker
+    align-self: flex-start
+    contain: content
 
-  &.v-sheet
-    +tools.elevation($color-picker-elevation)
-    +tools.rounded($color-picker-border-radius)
+    &.v-sheet
+      +tools.elevation($color-picker-elevation)
+      +tools.rounded($color-picker-border-radius)
 
-// Element
-.v-color-picker__controls
-  display: flex
-  flex-direction: column
-  padding: $color-picker-controls-padding
+  // Element
+  .v-color-picker__controls
+    display: flex
+    flex-direction: column
+    padding: $color-picker-controls-padding
 
-// Modifier
-.v-color-picker--flat
-  +tools.elevation(0)
-
-  .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
+  // Modifier
+  .v-color-picker--flat
     +tools.elevation(0)
+
+    .v-color-picker__track:not(.v-input--is-disabled) .v-slider__thumb // High specificity
+      +tools.elevation(0)

package/lib/components/VColorPicker/VColorPickerCanvas.sass

@@ -1,26 +1,27 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-color-picker-canvas
-  $root: &
-  display: flex
-  position: relative
-  overflow: hidden
-  contain: content
-  touch-action: none
+@include tools.layer('components')
+  .v-color-picker-canvas
+    $root: &
+    display: flex
+    position: relative
+    overflow: hidden
+    contain: content
+    touch-action: none
 
-  &__dot
-    position: absolute
-    top: 0
-    left: 0
-    width: $color-picker-canvas-dot-size
-    height: $color-picker-canvas-dot-size
-    background: transparent
-    border-radius: 50%
-    box-shadow: $color-picker-canvas-dot-box-shadow
+    &__dot
+      position: absolute
+      top: 0
+      left: 0
+      width: $color-picker-canvas-dot-size
+      height: $color-picker-canvas-dot-size
+      background: transparent
+      border-radius: 50%
+      box-shadow: $color-picker-canvas-dot-box-shadow
 
-    &--disabled
-      box-shadow: $color-picker-canvas-dot-disabled-box-shadow
+      &--disabled
+        box-shadow: $color-picker-canvas-dot-disabled-box-shadow
 
-    #{$root}:hover &
-      will-change: transform
+      #{$root}:hover &
+        will-change: transform

package/lib/components/VColorPicker/VColorPickerEdit.sass

@@ -1,30 +1,31 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-color-picker-edit
-  display: flex
-  margin-top: $color-picker-input-margin-top
+@include tools.layer('components')
+  .v-color-picker-edit
+    display: flex
+    margin-top: $color-picker-input-margin-top
 
-.v-color-picker-edit__input
-  width: 100%
-  display: flex
-  flex-wrap: wrap
-  justify-content: center
-  text-align: center
+  .v-color-picker-edit__input
+    width: 100%
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    text-align: center
 
-  &:not(:last-child)
-    margin-inline-end: $color-picker-input-margin
+    &:not(:last-child)
+      margin-inline-end: $color-picker-input-margin
 
-  input
-    border-radius: $color-picker-border-radius
-    margin-bottom: $color-picker-input-margin-bottom
-    min-width: 0
-    outline: none
-    text-align: center
-    width: 100%
-    height: $color-picker-input-height
-    background: rgba(var(--v-theme-surface-variant), .2)
-    color: rgba(var(--v-theme-on-surface))
+    input
+      border-radius: $color-picker-border-radius
+      margin-bottom: $color-picker-input-margin-bottom
+      min-width: 0
+      outline: none
+      text-align: center
+      width: 100%
+      height: $color-picker-input-height
+      background: rgba(var(--v-theme-surface-variant), .2)
+      color: rgba(var(--v-theme-on-surface))
 
-  span
-    font-size: $color-picker-input-font-size
+    span
+      font-size: $color-picker-input-font-size

package/lib/components/VColorPicker/VColorPickerPreview.sass

@@ -1,68 +1,69 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-color-picker-preview__alpha
-  .v-slider-track__background
-    background-color: transparent !important
+@include tools.layer('components')
+  .v-color-picker-preview__alpha
+    .v-slider-track__background
+      background-color: transparent !important
 
-    +tools.ltr()
-      background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
-    +tools.rtl()
-      background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
+      +tools.ltr()
+        background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv))
+      +tools.rtl()
+        background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv))
 
-    &::after
-      content: ''
-      z-index: -1
-      left: 0
-      top: 0
-      width: 100%
-      height: 100%
-      position: absolute
-      background: $color-picker-checkerboard
-      border-radius: inherit
+      &::after
+        content: ''
+        z-index: -1
+        left: 0
+        top: 0
+        width: 100%
+        height: 100%
+        position: absolute
+        background: $color-picker-checkerboard
+        border-radius: inherit
 
-.v-color-picker-preview__sliders
-  display: flex
-  flex: 1 0 auto
-  flex-direction: column
-  padding-inline-end: $color-picker-preview-sliders-padding
+  .v-color-picker-preview__sliders
+    display: flex
+    flex: 1 0 auto
+    flex-direction: column
+    padding-inline-end: $color-picker-preview-sliders-padding
 
-.v-color-picker-preview__dot
-  position: relative
-  height: $color-picker-preview-dot-size
-  width: $color-picker-preview-dot-size
-  background: $color-picker-checkerboard
-  border-radius: 50%
-  overflow: hidden
-  margin-inline-end: $color-picker-preview-dot-margin
+  .v-color-picker-preview__dot
+    position: relative
+    height: $color-picker-preview-dot-size
+    width: $color-picker-preview-dot-size
+    background: $color-picker-checkerboard
+    border-radius: 50%
+    overflow: hidden
+    margin-inline-end: $color-picker-preview-dot-margin
 
-  > div
-    width: 100%
-    height: 100%
+    > div
+      width: 100%
+      height: 100%
 
-.v-color-picker-preview__hue
-  &:not(.v-input--is-disabled)
-    .v-slider-track__background
-      +tools.ltr()
-        background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+  .v-color-picker-preview__hue
+    &:not(.v-input--is-disabled)
+      .v-slider-track__background
+        +tools.ltr()
+          background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-      +tools.rtl()
-        background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
+        +tools.rtl()
+          background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%)
 
-.v-color-picker-preview__track
-  position: relative
-  width: 100%
+  .v-color-picker-preview__track
+    position: relative
+    width: 100%
 
-  margin: 0 !important
+    margin: 0 !important
 
-  .v-slider-track__fill
-    display: none
+    .v-slider-track__fill
+      display: none
 
-.v-color-picker-preview
-  align-items: center
-  display: flex
-  margin-bottom: $color-picker-preview-margin-bottom
+  .v-color-picker-preview
+    align-items: center
+    display: flex
+    margin-bottom: $color-picker-preview-margin-bottom
 
-.v-color-picker-preview__eye-dropper
-  position: relative
-  margin-right: $color-picker-preview-dropper-margin
+  .v-color-picker-preview__eye-dropper
+    position: relative
+    margin-right: $color-picker-preview-dropper-margin

package/lib/components/VColorPicker/VColorPickerSwatches.sass

@@ -1,35 +1,36 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-color-picker-swatches
-  overflow-y: auto
+@include tools.layer('components')
+  .v-color-picker-swatches
+    overflow-y: auto
 
-  > div
-    display: flex
-    flex-wrap: wrap
-    justify-content: center
-    padding: $color-picker-swatches-border-radius
+    > div
+      display: flex
+      flex-wrap: wrap
+      justify-content: center
+      padding: $color-picker-swatches-border-radius
 
-.v-color-picker-swatches__swatch
-  display: flex
-  flex-direction: column
-  margin-bottom: $color-picker-swatch-margin-bottom
+  .v-color-picker-swatches__swatch
+    display: flex
+    flex-direction: column
+    margin-bottom: $color-picker-swatch-margin-bottom
 
-.v-color-picker-swatches__color
-  position: relative
-  height: $color-picker-swatch-color-height
-  max-height: $color-picker-swatch-color-height
-  width: $color-picker-swatch-color-width
-  margin: $color-picker-swatch-color-margin
-  border-radius: $color-picker-swatch-color-border-radius
-  user-select: none
-  overflow: hidden
-  background: $color-picker-checkerboard
-  cursor: pointer
+  .v-color-picker-swatches__color
+    position: relative
+    height: $color-picker-swatch-color-height
+    max-height: $color-picker-swatch-color-height
+    width: $color-picker-swatch-color-width
+    margin: $color-picker-swatch-color-margin
+    border-radius: $color-picker-swatch-color-border-radius
+    user-select: none
+    overflow: hidden
+    background: $color-picker-checkerboard
+    cursor: pointer
 
-  > div
-    display: flex
-    align-items: center
-    justify-content: center
-    width: 100%
-    height: 100%
+    > div
+      display: flex
+      align-items: center
+      justify-content: center
+      width: 100%
+      height: 100%