vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VSelectionControl/VSelectionControl.sass

@@ -4,96 +4,97 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-selection-control
-  align-items: center
-  contain: layout
-  display: flex
-  flex: 1 0
-  grid-area: control
-  position: relative
-  user-select: none
-
-  .v-label
-    white-space: normal
-    word-break: break-word
-    height: 100%
-
-  &--disabled
-    opacity: var(--v-disabled-opacity)
-    pointer-events: none
-
-  &--error,
-  &--disabled
-    .v-label
-      opacity: 1
+@include tools.layer('components')
+  .v-selection-control
+    align-items: center
+    contain: layout
+    display: flex
+    flex: 1 0
+    grid-area: control
+    position: relative
+    user-select: none
 
-  &--error:not(.v-selection-control--disabled)
     .v-label
-      color: rgb(var(--v-theme-error))
-
-  &--inline
+      white-space: normal
+      word-break: break-word
+      height: 100%
+
+    &--disabled
+      opacity: var(--v-disabled-opacity)
+      pointer-events: none
+
+    &--error,
+    &--disabled
+      .v-label
+        opacity: 1
+
+    &--error:not(.v-selection-control--disabled)
+      .v-label
+        color: rgb(var(--v-theme-error))
+
+    &--inline
+      display: inline-flex
+      flex: 0 0 auto
+      min-width: 0
+      max-width: 100%
+
+      .v-label
+        width: auto
+
+    @at-root
+      @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
+        --v-selection-control-size: #{$selection-control-size + $modifier}
+
+  .v-selection-control__wrapper
+    width: var(--v-selection-control-size)
+    height: var(--v-selection-control-size)
     display: inline-flex
-    flex: 0 0 auto
-    min-width: 0
-    max-width: 100%
+    align-items: center
+    position: relative
+    justify-content: center
+    flex: none
+
+  .v-selection-control__input
+    width: var(--v-selection-control-size)
+    height: var(--v-selection-control-size)
+    align-items: center
+    display: flex
+    flex: none
+    justify-content: center
+    position: relative
+    border-radius: 50%
+
+    input
+      cursor: pointer
+      position: absolute
+      left: 0
+      top: 0
+      width: 100%
+      height: 100%
+      opacity: 0
+
+    &::before
+      @include tools.absolute(true)
+      border-radius: 100%
+      background-color: currentColor
+      opacity: 0
+      pointer-events: none
+
+    &:hover::before
+      opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
 
-    .v-label
-      width: auto
-
-  @at-root
-    @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
-      --v-selection-control-size: #{$selection-control-size + $modifier}
-
-.v-selection-control__wrapper
-  width: var(--v-selection-control-size)
-  height: var(--v-selection-control-size)
-  display: inline-flex
-  align-items: center
-  position: relative
-  justify-content: center
-  flex: none
-
-.v-selection-control__input
-  width: var(--v-selection-control-size)
-  height: var(--v-selection-control-size)
-  align-items: center
-  display: flex
-  flex: none
-  justify-content: center
-  position: relative
-  border-radius: 50%
-
-  input
-    cursor: pointer
-    position: absolute
-    left: 0
-    top: 0
-    width: 100%
-    height: 100%
-    opacity: 0
-
-  &::before
-    @include tools.absolute(true)
-    border-radius: 100%
-    background-color: currentColor
-    opacity: 0
-    pointer-events: none
-
-  &:hover::before
-    opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
-
-  > .v-icon
-    opacity: var(--v-medium-emphasis-opacity)
-
-  .v-selection-control--disabled &,
-  .v-selection-control--dirty &,
-  .v-selection-control--error &
     > .v-icon
-      opacity: 1
+      opacity: var(--v-medium-emphasis-opacity)
 
-  .v-selection-control--error:not(.v-selection-control--disabled) &
-    > .v-icon
-      color: rgb(var(--v-theme-error))
+    .v-selection-control--disabled &,
+    .v-selection-control--dirty &,
+    .v-selection-control--error &
+      > .v-icon
+        opacity: 1
+
+    .v-selection-control--error:not(.v-selection-control--disabled) &
+      > .v-icon
+        color: rgb(var(--v-theme-error))
 
-  .v-selection-control--focus-visible &::before
-    opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
+    .v-selection-control--focus-visible &::before
+      opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.sass

@@ -1,10 +1,12 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-selection-control-group
-  grid-area: $selection-control-group-grid-area
-  display: flex
-  flex-direction: column
+@include tools.layer('components')
+  .v-selection-control-group
+    grid-area: $selection-control-group-grid-area
+    display: flex
+    flex-direction: column
 
-  &--inline
-    flex-direction: row
-    flex-wrap: wrap
+    &--inline
+      flex-direction: row
+      flex-wrap: wrap

package/lib/components/VSheet/VSheet.sass

@@ -1,14 +1,15 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-sheet
-  display: block
+@include tools.layer('components')
+  .v-sheet
+    display: block
 
-  @include tools.border($sheet-border...)
-  @include tools.elevation($sheet-elevation)
-  @include tools.position($sheet-positions)
-  @include tools.rounded($sheet-border-radius)
-  @include tools.theme($sheet-theme...)
+    @include tools.border($sheet-border...)
+    @include tools.elevation($sheet-elevation)
+    @include tools.position($sheet-positions)
+    @include tools.rounded($sheet-border-radius)
+    @include tools.theme($sheet-theme...)
 
-  &--rounded
-    @include tools.rounded($sheet-rounded-border-radius)
+    &--rounded
+      @include tools.rounded($sheet-rounded-border-radius)

package/lib/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -3,226 +3,227 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-skeleton-loader
-  align-items: center
-  background: $skeleton-loader-background
-  border-radius: $skeleton-loader-border-radius
-  display: flex
-  flex-wrap: wrap
-  position: relative
-  vertical-align: top
-
-  &__actions
-    justify-content: end
-
-  .v-skeleton-loader__ossein
-    height: 100%
-
-  .v-skeleton-loader__avatar,
-  .v-skeleton-loader__button,
-  .v-skeleton-loader__chip,
-  .v-skeleton-loader__divider,
-  .v-skeleton-loader__heading,
-  .v-skeleton-loader__image,
-  .v-skeleton-loader__ossein,
-  .v-skeleton-loader__text
-    background: $skeleton-loader-text-background
-
-  .v-skeleton-loader__list-item,
-  .v-skeleton-loader__list-item-avatar,
-  .v-skeleton-loader__list-item-text,
-  .v-skeleton-loader__list-item-two-line,
-  .v-skeleton-loader__list-item-avatar-two-line,
-  .v-skeleton-loader__list-item-three-line,
-  .v-skeleton-loader__list-item-avatar-three-line
-    border-radius: $skeleton-loader-border-radius
-
-  &__bone
+@include tools.layer('components')
+  .v-skeleton-loader
     align-items: center
-    border-radius: inherit
+    background: $skeleton-loader-background
+    border-radius: $skeleton-loader-border-radius
     display: flex
-    flex: 1 1 100%
     flex-wrap: wrap
-    overflow: hidden
     position: relative
+    vertical-align: top
 
-    &::after
-      @include tools.absolute(true)
-
-      animation: $skeleton-loader-loading-animation
-      background: $skeleton-loader-bone-background
-      transform: $skeleton-loader-loading-transform
-      z-index: 1
-
-  &__avatar
-    border-radius: 50%
-    flex: 0 1 auto
-    margin: $skeleton-loader-avatar-margin
-    max-height: $skeleton-loader-avatar-height
-    min-height: $skeleton-loader-avatar-height
-    height: $skeleton-loader-avatar-height
-    max-width: $skeleton-loader-avatar-width
-    min-width: $skeleton-loader-avatar-width
-    width: $skeleton-loader-avatar-width
-
-    + .v-skeleton-loader__bone
-      flex: 1 1 auto
-      margin-inline-start: 0
-
-    + .v-skeleton-loader__sentences,
-    + .v-skeleton-loader__paragraph
-      > .v-skeleton-loader__text
+    &__actions
+      justify-content: end
+
+    .v-skeleton-loader__ossein
+      height: 100%
+
+    .v-skeleton-loader__avatar,
+    .v-skeleton-loader__button,
+    .v-skeleton-loader__chip,
+    .v-skeleton-loader__divider,
+    .v-skeleton-loader__heading,
+    .v-skeleton-loader__image,
+    .v-skeleton-loader__ossein,
+    .v-skeleton-loader__text
+      background: $skeleton-loader-text-background
+
+    .v-skeleton-loader__list-item,
+    .v-skeleton-loader__list-item-avatar,
+    .v-skeleton-loader__list-item-text,
+    .v-skeleton-loader__list-item-two-line,
+    .v-skeleton-loader__list-item-avatar-two-line,
+    .v-skeleton-loader__list-item-three-line,
+    .v-skeleton-loader__list-item-avatar-three-line
+      border-radius: $skeleton-loader-border-radius
+
+    &__bone
+      align-items: center
+      border-radius: inherit
+      display: flex
+      flex: 1 1 100%
+      flex-wrap: wrap
+      overflow: hidden
+      position: relative
+
+      &::after
+        @include tools.absolute(true)
+
+        animation: $skeleton-loader-loading-animation
+        background: $skeleton-loader-bone-background
+        transform: $skeleton-loader-loading-transform
+        z-index: 1
+
+    &__avatar
+      border-radius: 50%
+      flex: 0 1 auto
+      margin: $skeleton-loader-avatar-margin
+      max-height: $skeleton-loader-avatar-height
+      min-height: $skeleton-loader-avatar-height
+      height: $skeleton-loader-avatar-height
+      max-width: $skeleton-loader-avatar-width
+      min-width: $skeleton-loader-avatar-width
+      width: $skeleton-loader-avatar-width
+
+      + .v-skeleton-loader__bone
+        flex: 1 1 auto
         margin-inline-start: 0
 
-  &__button
-    border-radius: $skeleton-loader-button-border-radius
-    height: $skeleton-loader-button-height
-    margin: $skeleton-loader-gutter
-    max-width: $skeleton-loader-button-width
+      + .v-skeleton-loader__sentences,
+      + .v-skeleton-loader__paragraph
+        > .v-skeleton-loader__text
+          margin-inline-start: 0
 
-    + .v-skeleton-loader__bone
-      flex: 1 1 auto
-      margin-inline-start: 0
+    &__button
+      border-radius: $skeleton-loader-button-border-radius
+      height: $skeleton-loader-button-height
+      margin: $skeleton-loader-gutter
+      max-width: $skeleton-loader-button-width
 
-    + .v-skeleton-loader__sentences,
-    + .v-skeleton-loader__paragraph
-      > .v-skeleton-loader__text
+      + .v-skeleton-loader__bone
+        flex: 1 1 auto
         margin-inline-start: 0
 
-  &__chip
-    border-radius: $skeleton-loader-chip-border-radius
-    margin: $skeleton-loader-gutter
-    height: $skeleton-loader-chip-height
-    max-width: $skeleton-loader-chip-width
+      + .v-skeleton-loader__sentences,
+      + .v-skeleton-loader__paragraph
+        > .v-skeleton-loader__text
+          margin-inline-start: 0
 
-    + .v-skeleton-loader__bone
-      flex: 1 1 auto
-      margin-inline-start: 0
+    &__chip
+      border-radius: $skeleton-loader-chip-border-radius
+      margin: $skeleton-loader-gutter
+      height: $skeleton-loader-chip-height
+      max-width: $skeleton-loader-chip-width
 
-    + .v-skeleton-loader__sentences,
-    + .v-skeleton-loader__paragraph
-      > .v-skeleton-loader__text
+      + .v-skeleton-loader__bone
+        flex: 1 1 auto
         margin-inline-start: 0
 
-  &__date-picker
-    border-radius: $skeleton-loader-date-picker-border-radius
+      + .v-skeleton-loader__sentences,
+      + .v-skeleton-loader__paragraph
+        > .v-skeleton-loader__text
+          margin-inline-start: 0
 
-    .v-skeleton-loader__list-item:first-child
-      .v-skeleton-loader__text
-        max-width: $skeleton-loader-date-picker-text-max-width
-        width: $skeleton-loader-date-picker-text-width
+    &__date-picker
+      border-radius: $skeleton-loader-date-picker-border-radius
 
-    .v-skeleton-loader__heading
-      max-width: $skeleton-loader-date-picker-heading-max-width
-      width: $skeleton-loader-date-picker-heading-width
+      .v-skeleton-loader__list-item:first-child
+        .v-skeleton-loader__text
+          max-width: $skeleton-loader-date-picker-text-max-width
+          width: $skeleton-loader-date-picker-text-width
 
-  &__date-picker-days
-    flex-wrap: wrap
-    margin: $skeleton-loader-gutter
+      .v-skeleton-loader__heading
+        max-width: $skeleton-loader-date-picker-heading-max-width
+        width: $skeleton-loader-date-picker-heading-width
 
-    .v-skeleton-loader__avatar
-      border-radius: $skeleton-loader-border-radius
-      margin: $skeleton-loader-date-picker-days-margin
-      max-width: 100%
+    &__date-picker-days
+      flex-wrap: wrap
+      margin: $skeleton-loader-gutter
 
-  &__date-picker-options
-    flex-wrap: nowrap
+      .v-skeleton-loader__avatar
+        border-radius: $skeleton-loader-border-radius
+        margin: $skeleton-loader-date-picker-days-margin
+        max-width: 100%
 
-    .v-skeleton-loader__text
-      flex: 1 1 auto
+    &__date-picker-options
+      flex-wrap: nowrap
 
-  &__divider
-    border-radius: $skeleton-loader-divider-border-radius
-    height: $skeleton-loader-divider-height
+      .v-skeleton-loader__text
+        flex: 1 1 auto
 
-  &__heading
-    border-radius: $skeleton-loader-heading-border-radius
-    margin: $skeleton-loader-gutter
-    height: $skeleton-loader-heading-height
+    &__divider
+      border-radius: $skeleton-loader-divider-border-radius
+      height: $skeleton-loader-divider-height
 
-    + .v-skeleton-loader__subtitle
-      margin-top: -$skeleton-loader-gutter
+    &__heading
+      border-radius: $skeleton-loader-heading-border-radius
+      margin: $skeleton-loader-gutter
+      height: $skeleton-loader-heading-height
 
-  &__image
-    height: $skeleton-loader-image-height
-    border-radius: 0
+      + .v-skeleton-loader__subtitle
+        margin-top: -$skeleton-loader-gutter
 
-  &__card
-    .v-skeleton-loader__image
+    &__image
+      height: $skeleton-loader-image-height
       border-radius: 0
 
-  &__list-item
-    margin: $skeleton-loader-gutter
+    &__card
+      .v-skeleton-loader__image
+        border-radius: 0
 
-    .v-skeleton-loader__text
-      margin: 0
+    &__list-item
+      margin: $skeleton-loader-gutter
 
-  &__table-thead
-    justify-content: space-between
+      .v-skeleton-loader__text
+        margin: 0
 
-    .v-skeleton-loader__heading
-      margin-top: $skeleton-loader-gutter
-      max-width: $skeleton-loader-gutter
+    &__table-thead
+      justify-content: space-between
 
-  &__table-tfoot
-    flex-wrap: nowrap
+      .v-skeleton-loader__heading
+        margin-top: $skeleton-loader-gutter
+        max-width: $skeleton-loader-gutter
 
-    > .v-skeleton-loader__text.v-skeleton-loader__bone
-      margin-top: $skeleton-loader-gutter
+    &__table-tfoot
+      flex-wrap: nowrap
 
-  &__table-row
-    align-items: baseline
-    margin: $skeleton-loader-table-row-margin
-    justify-content: space-evenly
-    flex-wrap: nowrap
+      > .v-skeleton-loader__text.v-skeleton-loader__bone
+        margin-top: $skeleton-loader-gutter
 
-    > .v-skeleton-loader__text.v-skeleton-loader__bone
-      margin-inline: $skeleton-loader-table-row-text-margin
+    &__table-row
+      align-items: baseline
+      margin: $skeleton-loader-table-row-margin
+      justify-content: space-evenly
+      flex-wrap: nowrap
 
-    + .v-skeleton-loader__divider
-      margin: 0 $skeleton-loader-gutter
+      > .v-skeleton-loader__text.v-skeleton-loader__bone
+        margin-inline: $skeleton-loader-table-row-text-margin
 
-  &__table-cell
-    align-items: center
-    display: flex
-    height: $skeleton-loader-table-cell-height
-    width: $skeleton-loader-table-cell-width
+      + .v-skeleton-loader__divider
+        margin: 0 $skeleton-loader-gutter
 
-    .v-skeleton-loader__text
-      margin-bottom: 0
+    &__table-cell
+      align-items: center
+      display: flex
+      height: $skeleton-loader-table-cell-height
+      width: $skeleton-loader-table-cell-width
 
-  &__subtitle
-    max-width: $skeleton-loader-subtitle-max-width
+      .v-skeleton-loader__text
+        margin-bottom: 0
 
-    > .v-skeleton-loader__text
-      height: $skeleton-loader-subtitle-text-height
-      border-radius: $skeleton-loader-subtitle-text-border-radius
+    &__subtitle
+      max-width: $skeleton-loader-subtitle-max-width
 
-  &__text
-    border-radius: $skeleton-loader-text-border-radius
-    margin: $skeleton-loader-gutter
-    height: $skeleton-loader-text-height
+      > .v-skeleton-loader__text
+        height: $skeleton-loader-subtitle-text-height
+        border-radius: $skeleton-loader-subtitle-text-border-radius
 
-    + .v-skeleton-loader__text
-      margin-top: $skeleton-loader-text-two-text-margin-top
-      max-width: $skeleton-loader-text-two-text-max-width
+    &__text
+      border-radius: $skeleton-loader-text-border-radius
+      margin: $skeleton-loader-gutter
+      height: $skeleton-loader-text-height
 
       + .v-skeleton-loader__text
-        max-width: $skeleton-loader-text-three-text-max-width
+        margin-top: $skeleton-loader-text-two-text-margin-top
+        max-width: $skeleton-loader-text-two-text-max-width
 
-  &--boilerplate
-    .v-skeleton-loader__bone:after
-      display: none
+        + .v-skeleton-loader__text
+          max-width: $skeleton-loader-text-three-text-max-width
 
-  &--is-loading
-    overflow: hidden
+    &--boilerplate
+      .v-skeleton-loader__bone:after
+        display: none
 
-  &--tile
-    border-radius: 0
+    &--is-loading
+      overflow: hidden
 
-    .v-skeleton-loader__bone
+    &--tile
       border-radius: 0
 
-@keyframes loading
-  100%
-    transform: translateX(100%)
+      .v-skeleton-loader__bone
+        border-radius: 0
+
+  @keyframes loading
+    100%
+      transform: translateX(100%)

package/lib/components/VSlideGroup/VSlideGroup.css

@@ -33,11 +33,24 @@
   contain: content;
   display: flex;
   flex: 1 1 auto;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  scrollbar-color: rgba(0, 0, 0, 0);
+}
+.v-slide-group__container::-webkit-scrollbar {
+  display: none;
 }
 
+.v-slide-group--vertical {
+  max-height: inherit;
+}
 .v-slide-group--vertical,
 .v-slide-group--vertical .v-slide-group__container,
 .v-slide-group--vertical .v-slide-group__content {
   flex-direction: column;
+}
+.v-slide-group--vertical .v-slide-group__container {
+  overflow-x: hidden;
+  overflow-y: auto;
 }