vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VStepper/VStepperItem.sass

@@ -1,71 +1,73 @@
 @use '../../styles/settings'
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-stepper-item
-  align-items: center
-  align-self: stretch
-  display: inline-flex
-  flex: none
-  opacity: $stepper-item-opacity
-  padding: $stepper-item-padding
-  transition-duration: $stepper-item-transition-duration
-  transition-property: $stepper-item-transition-property
-  transition-timing-function: $stepper-item-transition-timing-function
-
-  &--selected
-    opacity: 1
-
-  &--error
-    color: rgb(var(--v-theme-error))
-
-  &--disabled
-    opacity: var(--v-medium-emphasis-opacity)
-    pointer-events: none
-
-  .v-stepper--alt-labels &
-    flex-direction: column
-    justify-content: flex-start
+@include tools.layer('components')
+  .v-stepper-item
     align-items: center
-    flex-basis: $stepper-alt-labels-flex-basis
-
-.v-stepper-item__avatar.v-avatar
-  background: $stepper-item-avatar-background
-  color: $stepper-item-avatar-color
-  font-size: $stepper-item-avatar-font-size
-  margin-inline-end: $stepper-item-avatar-margin-inline-end
-
-  .v-icon
-    font-size: $stepper-item-avatar-icon-font-size
-
-  .v-stepper-item--selected &,
-  .v-stepper-item--complete &
-    background: rgb(var(--v-theme-surface-variant))
-
-  .v-stepper-item--error &
-    background: rgb(var(--v-theme-error))
-
-  .v-stepper--alt-labels &
-    margin-bottom: $stepper-item-alt-labels-margin-bottom
-    margin-inline-end: 0
-
-.v-stepper-item__content
-  .v-stepper--alt-labels &
-    // min-height: 28px
-
-.v-stepper-item__title
-  line-height: $stepper-item-title-line-height
-
-  .v-stepper--mobile &
-    display: none
-
-.v-stepper-item__subtitle
-  font-size: $stepper-item-subtitle-font-size
-  text-align: left
-  line-height: $stepper-item-subtitle-line-height
-  opacity: $stepper-item-subtitle-opacity
-
-  .v-stepper--alt-labels &
-    text-align: center
-
-  .v-stepper--mobile &
-    display: none
+    align-self: stretch
+    display: inline-flex
+    flex: none
+    opacity: $stepper-item-opacity
+    padding: $stepper-item-padding
+    transition-duration: $stepper-item-transition-duration
+    transition-property: $stepper-item-transition-property
+    transition-timing-function: $stepper-item-transition-timing-function
+
+    &--selected
+      opacity: 1
+
+    &--error
+      color: rgb(var(--v-theme-error))
+
+    &--disabled
+      opacity: var(--v-medium-emphasis-opacity)
+      pointer-events: none
+
+    .v-stepper--alt-labels &
+      flex-direction: column
+      justify-content: flex-start
+      align-items: center
+      flex-basis: $stepper-alt-labels-flex-basis
+
+  .v-stepper-item__avatar.v-avatar
+    background: $stepper-item-avatar-background
+    color: $stepper-item-avatar-color
+    font-size: $stepper-item-avatar-font-size
+    margin-inline-end: $stepper-item-avatar-margin-inline-end
+
+    .v-icon
+      font-size: $stepper-item-avatar-icon-font-size
+
+    .v-stepper-item--selected &,
+    .v-stepper-item--complete &
+      background: rgb(var(--v-theme-surface-variant))
+
+    .v-stepper-item--error &
+      background: rgb(var(--v-theme-error))
+
+    .v-stepper--alt-labels &
+      margin-bottom: $stepper-item-alt-labels-margin-bottom
+      margin-inline-end: 0
+
+  //.v-stepper-item__content
+  //  .v-stepper--alt-labels &
+  //    min-height: 28px
+
+  .v-stepper-item__title
+    line-height: $stepper-item-title-line-height
+
+    .v-stepper--mobile &
+      display: none
+
+  .v-stepper-item__subtitle
+    font-size: $stepper-item-subtitle-font-size
+    text-align: left
+    line-height: $stepper-item-subtitle-line-height
+    opacity: $stepper-item-subtitle-opacity
+
+    .v-stepper--alt-labels &
+      text-align: center
+
+    .v-stepper--mobile &
+      display: none

package/lib/components/VSwitch/VSwitch.css

@@ -98,15 +98,27 @@
 .v-switch .v-selection-control__input {
   border-radius: 50%;
   transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateX(-10px);
   position: absolute;
 }
+.v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
+  transform: translateX(-10px);
+}
+
+.v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
+  transform: translateX(10px);
+}
+
 .v-switch .v-selection-control__input .v-icon {
   position: absolute;
 }
-.v-switch .v-selection-control--dirty .v-selection-control__input {
+.v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
   transform: translateX(10px);
 }
+
+.v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
+  transform: translateX(-10px);
+}
+
 .v-switch.v-switch--indeterminate .v-selection-control__input {
   transform: scale(0.8);
 }

package/lib/components/VSwitch/VSwitch.sass

@@ -3,127 +3,134 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-switch
-  .v-label
-    padding-inline-start: $switch-label-margin-inline-start
-
-.v-switch__loader
-  display: flex
-
-  .v-progress-circular
-    color: $switch-loader-color
-
-.v-switch__track,
-.v-switch__thumb
-  transition: none
-
-  .v-selection-control--error:not(.v-selection-control--disabled) &
-    background-color: $switch-error-background-color
-    color: $switch-error-color
-
-.v-switch__track-true
-  margin-inline-end: auto
-
-  .v-selection-control:not(.v-selection-control--dirty) &
-    opacity: 0
-
-.v-switch__track-false
-  margin-inline-start: auto
-
-  .v-selection-control--dirty &
-    opacity: 0
-
-.v-switch__track
-  display: inline-flex
-  align-items: center
-  font-size: .5rem
-  padding: 0 5px
-  background-color: $switch-track-background
-  border-radius: $switch-track-radius
-  height: $switch-track-height
-  opacity: $switch-track-opacity
-  min-width: $switch-track-width
-  cursor: pointer
-  transition: $switch-track-transition
-
-  .v-switch--inset &
-    border-radius: $switch-inset-track-border-radius
+@include tools.layer('components')
+  .v-switch
+    .v-label
+      padding-inline-start: $switch-label-margin-inline-start
+
+  .v-switch__loader
+    display: flex
+
+    .v-progress-circular
+      color: $switch-loader-color
+
+  .v-switch__track,
+  .v-switch__thumb
+    transition: none
+
+    .v-selection-control--error:not(.v-selection-control--disabled) &
+      background-color: $switch-error-background-color
+      color: $switch-error-color
+
+  .v-switch__track-true
+    margin-inline-end: auto
+
+    .v-selection-control:not(.v-selection-control--dirty) &
+      opacity: 0
+
+  .v-switch__track-false
+    margin-inline-start: auto
+
+    .v-selection-control--dirty &
+      opacity: 0
+
+  .v-switch__track
+    display: inline-flex
+    align-items: center
+    font-size: .5rem
+    padding: 0 5px
+    background-color: $switch-track-background
+    border-radius: $switch-track-radius
+    height: $switch-track-height
+    opacity: $switch-track-opacity
+    min-width: $switch-track-width
+    cursor: pointer
+    transition: $switch-track-transition
+
+    .v-switch--inset &
+      border-radius: $switch-inset-track-border-radius
+      font-size: .75rem
+      height: $switch-inset-track-height
+      min-width: $switch-inset-track-width
+
+  .v-switch__thumb
+    align-items: center
+    background-color: $switch-thumb-background
+    color: $switch-thumb-color
+    border-radius: $switch-thumb-radius
+    display: flex
     font-size: .75rem
-    height: $switch-inset-track-height
-    min-width: $switch-inset-track-width
-
-.v-switch__thumb
-  align-items: center
-  background-color: $switch-thumb-background
-  color: $switch-thumb-color
-  border-radius: $switch-thumb-radius
-  display: flex
-  font-size: .75rem
-  height: $switch-thumb-height
-  justify-content: center
-  width: $switch-thumb-width
-  pointer-events: none
-  transition: $switch-thumb-transition
-  position: relative
-  overflow: hidden
-
-  .v-switch:not(.v-switch--inset) &
-    @include tools.elevation($switch-thumb-elevation)
-
-  .v-switch.v-switch--flat:not(.v-switch--inset) &
-    background: $switch-thumb-flat-background
-    color: $switch-thumb-flat-color
-
-    @include tools.elevation(0)
-
-  .v-switch--inset &
-    height: $switch-inset-thumb-height
-    width: $switch-inset-thumb-width
-    transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
-
-    &--filled
-      transform: none
+    height: $switch-thumb-height
+    justify-content: center
+    width: $switch-thumb-width
+    pointer-events: none
+    transition: $switch-thumb-transition
+    position: relative
+    overflow: hidden
 
-  .v-switch--inset .v-selection-control--dirty &
-    transform: none
-    transition: .15s .05s transform settings.$decelerated-easing
+    .v-switch:not(.v-switch--inset) &
+      @include tools.elevation($switch-thumb-elevation)
 
-.v-switch
-  $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
+    .v-switch.v-switch--flat:not(.v-switch--inset) &
+      background: $switch-thumb-flat-background
+      color: $switch-thumb-flat-color
 
-  &.v-input
-    flex: $switch-flex
+      @include tools.elevation(0)
 
-  .v-selection-control
-    min-height: var(--v-input-control-height)
+    .v-switch--inset &
+      height: $switch-inset-thumb-height
+      width: $switch-inset-thumb-width
+      transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
 
-  .v-selection-control__input
-    border-radius: 50%
-    transition: $switch-control-input-transition
-    transform: translateX(-$switch-thumb-transform)
-    position: absolute
+      &--filled
+        transform: none
 
-    .v-icon
-      position: absolute
+    .v-switch--inset .v-selection-control--dirty &
+      transform: none
+      transition: .15s .05s transform settings.$decelerated-easing
 
-  .v-selection-control--dirty
-    .v-selection-control__input
-      transform: translateX($switch-thumb-transform)
+  .v-switch
+    $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
 
-  &.v-switch--indeterminate
-    .v-selection-control__input
-      transform: scale(.8)
-    .v-switch__thumb
-      transform: scale(.75)
-      box-shadow: none
+    &.v-input
+      flex: $switch-flex
 
-  &.v-switch--inset
-    .v-selection-control__wrapper
-      width: auto
+    .v-selection-control
+      min-height: var(--v-input-control-height)
 
-  &.v-input--vertical
-    .v-label
-      min-width: max-content
+    .v-selection-control__input
+      border-radius: 50%
+      transition: $switch-control-input-transition
+      +tools.ltr()
+        transform: translateX(-$switch-thumb-transform)
+      +tools.rtl()
+        transform: translateX($switch-thumb-transform)
+      position: absolute
 
-    .v-selection-control__wrapper
-      transform: $switch-thumb-vertical-transform
+      .v-icon
+        position: absolute
+
+    .v-selection-control--dirty
+      .v-selection-control__input
+        +tools.ltr()
+          transform: translateX($switch-thumb-transform)
+        +tools.rtl()
+          transform: translateX(-$switch-thumb-transform)
+
+    &.v-switch--indeterminate
+      .v-selection-control__input
+        transform: scale(.8)
+      .v-switch__thumb
+        transform: scale(.75)
+        box-shadow: none
+
+    &.v-switch--inset
+      .v-selection-control__wrapper
+        width: auto
+
+    &.v-input--vertical
+      .v-label
+        min-width: max-content
+
+      .v-selection-control__wrapper
+        transform: $switch-thumb-vertical-transform

package/lib/components/VSystemBar/VSystemBar.css

@@ -15,7 +15,7 @@
   font-size: 0.75rem;
   font-weight: 400;
   letter-spacing: 0.0333333333em;
-  line-height: 1.25rem;
+  line-height: 1.667;
   text-transform: none;
 }
 .v-system-bar .v-icon {

package/lib/components/VSystemBar/VSystemBar.sass

@@ -1,31 +1,32 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-system-bar
-  align-items: center
-  display: flex
-  flex: $system-bar-flex
-  height: $system-bar-height
-  justify-content: $system-bar-justify-content
-  max-width: 100%
-  padding-inline: $system-bar-padding-x
-  position: relative
-  text-align: $system-bar-text-align
-  width: 100%
+@include tools.layer('components')
+  .v-system-bar
+    align-items: center
+    display: flex
+    flex: $system-bar-flex
+    height: $system-bar-height
+    justify-content: $system-bar-justify-content
+    max-width: 100%
+    padding-inline: $system-bar-padding-x
+    position: relative
+    text-align: $system-bar-text-align
+    width: 100%
 
-  .v-icon
-    opacity: $system-bar-icon-opacity
+    .v-icon
+      opacity: $system-bar-icon-opacity
 
-  @include tools.elevation($system-bar-elevation)
-  @include tools.position($system-bar-positions)
-  @include tools.theme($system-bar-theme...)
-  @include tools.typography($system-bar-typography...)
+    @include tools.elevation($system-bar-elevation)
+    @include tools.position($system-bar-positions)
+    @include tools.theme($system-bar-theme...)
+    @include tools.typography($system-bar-typography...)
 
-  &--rounded
-    @include tools.rounded($system-bar-border-radius)
+    &--rounded
+      @include tools.rounded($system-bar-border-radius)
 
-  &--window
-    height: $system-bar-window-height
+    &--window
+      height: $system-bar-window-height
 
-  &:not(.v-system-bar--absolute)
-    padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})
+    &:not(.v-system-bar--absolute)
+      padding-inline-end: calc(var(--v-scrollbar-offset) + #{$system-bar-padding-x})