vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VBtn/VBtn.sass

@@ -5,236 +5,240 @@
 @use './mixins' as *
 @use './variables' as *
 
-.v-btn
-  align-items: center
-  border-radius: $button-border-radius
-  display: inline-grid
-  grid-template-areas: "prepend content append"
-  grid-template-columns: max-content auto max-content
-  font-weight: $button-font-weight
-  justify-content: center
-  letter-spacing: $button-text-letter-spacing
-  line-height: $button-line-height
-  max-width: $button-max-width
-  outline: none
-  position: relative
-  text-decoration: none
-  text-indent: $button-text-letter-spacing
-  text-transform: $button-text-transform
-  transition-property: $button-transition-property
-  transition-duration: 0.28s
-  transition-timing-function: settings.$standard-easing
-  user-select: none
-  vertical-align: $button-vertical-align
-  flex-shrink: 0
-
-  @at-root
-    @include button-sizes()
-    @include button-density('height', $button-density)
-
-  @include tools.border($button-border...)
-  @include tools.position($button-positions)
-  @include tools.states('.v-btn__overlay')
-  @include tools.variant($button-variants...)
-
-  @supports selector(:focus-visible)
-    &::after
-      @include tools.absolute(true)
-      pointer-events: none
-      border: 2px solid currentColor
-      border-radius: inherit
-      opacity: 0
-      transition: opacity .2s ease-in-out
-
-    &:focus-visible::after
-      opacity: calc(.25 * var(--v-theme-overlay-multiplier))
-
-  &--icon
-    border-radius: $button-icon-border-radius
-    min-width: 0
-    padding: 0
-
-    // ensure that default
-    // v-icon size is 24px
-    &.v-btn--size-default
-      --v-btn-size: #{$button-icon-font-size}
-
-    @at-root &
-      @include button-density(('width', 'height'), $button-icon-density)
-
-  &--elevated
-    &:hover,
-    &:focus
-      +tools.elevation(map.get($button-elevation, 'hover'))
-
-    &:active
-      +tools.elevation(map.get($button-elevation, 'active'))
-
-  &--flat
-    box-shadow: none
+@include tools.layer('components')
+  .v-btn
+    align-items: center
+    border-radius: $button-border-radius
+    display: inline-grid
+    grid-template-areas: "prepend content append"
+    grid-template-columns: max-content auto max-content
+    font-weight: $button-font-weight
+    justify-content: center
+    letter-spacing: $button-text-letter-spacing
+    line-height: $button-line-height
+    max-width: $button-max-width
+    outline: none
+    position: relative
+    text-decoration: none
+    text-indent: $button-text-letter-spacing
+    text-transform: $button-text-transform
+    transition-property: $button-transition-property
+    transition-duration: 0.28s
+    transition-timing-function: settings.$standard-easing
+    user-select: none
+    vertical-align: $button-vertical-align
+    flex-shrink: 0
 
-  &--block
-    display: flex
-    flex: 1 0 auto
-    min-width: 100%
+    @at-root
+      @include button-sizes()
+      @include button-density('height', $button-density)
+
+    @include tools.border($button-border...)
+    @include tools.position($button-positions)
+    @include tools.states('.v-btn__overlay')
+    @include tools.variant($button-variants...)
+
+    @supports selector(:focus-visible)
+      &::after
+        @include tools.absolute(true)
+        pointer-events: none
+        border: 2px solid currentColor
+        border-radius: inherit
+        opacity: 0
+        transition: opacity .2s ease-in-out
+
+      &:focus-visible::after
+        opacity: calc(.25 * var(--v-theme-overlay-multiplier))
+
+    &--icon
+      border-radius: $button-icon-border-radius
+      min-width: 0
+      padding: 0
+
+      // ensure that default
+      // v-icon size is 24px
+      &.v-btn--size-default
+        --v-btn-size: #{$button-icon-font-size}
+
+      @at-root &
+        @include button-density(('width', 'height'), $button-icon-density)
+
+    &--elevated
+      &:hover,
+      &:focus
+        +tools.elevation(map.get($button-elevation, 'hover'))
+
+      &:active
+        +tools.elevation(map.get($button-elevation, 'active'))
+
+    &--flat
+      box-shadow: none
 
-  &--disabled
-    pointer-events: none
+    &--block
+      display: flex
+      flex: 1 0 auto
+      min-width: 100%
 
-    @if ($button-colored-disabled)
-      opacity: $button-disabled-opacity
-      &:hover
-        opacity: $button-disabled-opacity
-    @else
-      opacity: 1
-      &.v-btn
-        // specificity has to be higher to override theme !important
-        color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
-
-    &.v-btn--variant-elevated,
-    &.v-btn--variant-flat
-      box-shadow: none
+    &--disabled
+      pointer-events: none
 
       @if ($button-colored-disabled)
-        opacity: 1
-        color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
-        background: rgb(var(--v-theme-surface))
+        opacity: $button-disabled-opacity
+        &:hover
+          opacity: $button-disabled-opacity
       @else
-        background: rgb(var(--v-theme-surface)) !important
+        opacity: 1
+        &.v-btn
+          // specificity has to be higher to override theme !important
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important
+
+      &.v-btn--variant-elevated,
+      &.v-btn--variant-flat
+        box-shadow: none
+
+        @if ($button-colored-disabled)
+          opacity: 1
+          color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
+          background: rgb(var(--v-theme-surface))
+        @else
+          background: rgb(var(--v-theme-surface)) !important
+
+        .v-btn__overlay
+          // __overlay uses currentColor, so we need to divide
+          // by the text opacity to get the correct value
+          opacity: math.div($button-disabled-overlay, $button-disabled-opacity)
+
+    &--loading
+      pointer-events: none
 
-      .v-btn__overlay
-        // __overlay uses currentColor, so we need to divide
-        // by the text opacity to get the correct value
-        opacity: math.div($button-disabled-overlay, $button-disabled-opacity)
+      .v-btn__content,
+      .v-btn__prepend,
+      .v-btn__append
+        opacity: 0
 
-  &--loading
-    pointer-events: none
+    &--stacked
+      grid-template-areas: "prepend" "content" "append"
+      grid-template-columns: auto
+      grid-template-rows: max-content max-content max-content
+      justify-items: center
+      align-content: center
 
-    .v-btn__content,
-    .v-btn__prepend,
-    .v-btn__append
-      opacity: 0
+      .v-btn__content
+        flex-direction: column
+        line-height: $button-stacked-line-height
 
-  &--stacked
-    grid-template-areas: "prepend" "content" "append"
-    grid-template-columns: auto
-    grid-template-rows: max-content max-content max-content
-    justify-items: center
-    align-content: center
+      .v-btn__prepend,
+      .v-btn__append,
+      .v-btn__content > .v-icon--start,
+      .v-btn__content > .v-icon--end
+        margin-inline: 0
 
-    .v-btn__content
-      flex-direction: column
-      line-height: $button-stacked-line-height
+      .v-btn__prepend,
+      .v-btn__content > .v-icon--start
+        margin-bottom: $button-stacked-icon-margin
 
-    .v-btn__prepend,
-    .v-btn__append,
-    .v-btn__content > .v-icon--start,
-    .v-btn__content > .v-icon--end
-      margin-inline: 0
+      .v-btn__append,
+      .v-btn__content > .v-icon--end
+        margin-top: $button-stacked-icon-margin
 
-    .v-btn__prepend,
-    .v-btn__content > .v-icon--start
-      margin-bottom: $button-stacked-icon-margin
+      @at-root
+        @include button-sizes($button-stacked-sizes, true)
+        @include button-density('height', $button-stacked-density)
 
-    .v-btn__append,
-    .v-btn__content > .v-icon--end
-      margin-top: $button-stacked-icon-margin
+    &--slim
+      padding: $button-slim-padding
 
-    @at-root
-      @include button-sizes($button-stacked-sizes, true)
-      @include button-density('height', $button-stacked-density)
+    &--readonly
+      pointer-events: none
 
-  &--slim
-    padding: $button-slim-padding
+    &--rounded
+      @include tools.rounded($button-rounded-border-radius)
 
-  &--rounded
-    @include tools.rounded($button-rounded-border-radius)
+      &.v-btn--icon
+        @include tools.rounded($button-border-radius)
 
-    &.v-btn--icon
-      @include tools.rounded($button-border-radius)
+    .v-icon
+      --v-icon-size-multiplier: #{calc(18/21)}
 
-  .v-icon
-    --v-icon-size-multiplier: #{calc(18/21)}
+    &--icon
+      .v-icon
+        --v-icon-size-multiplier: 1
 
-  &--icon
-    .v-icon
-      --v-icon-size-multiplier: 1
+    &--stacked
+      .v-icon
+        --v-icon-size-multiplier: #{calc(24/21)}
 
-  &--stacked
-    .v-icon
-      --v-icon-size-multiplier: #{calc(24/21)}
-
-.v-btn__loader
-  align-items: center
-  display: flex
-  height: 100%
-  justify-content: center
-  left: 0
-  position: absolute
-  top: 0
-  width: 100%
-
-  > .v-progress-circular
-    width: $button-loader-size
-    height: $button-loader-size
-
-.v-btn__content,
-.v-btn__prepend,
-.v-btn__append
-  align-items: center
-  display: flex
-  transition: $button-content-transition
-
-.v-btn__prepend
-  grid-area: prepend
-  margin-inline: $button-margin-start $button-margin-end
-
-.v-btn__append
-  grid-area: append
-  margin-inline: $button-margin-end $button-margin-start
-
-.v-btn__content
-  grid-area: content
-  justify-content: center
-  white-space: $button-white-space
-
-  > .v-icon--start
+  .v-btn__loader
+    align-items: center
+    display: flex
+    height: 100%
+    justify-content: center
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+
+    > .v-progress-circular
+      width: $button-loader-size
+      height: $button-loader-size
+
+  .v-btn__content,
+  .v-btn__prepend,
+  .v-btn__append
+    align-items: center
+    display: flex
+    transition: $button-content-transition
+
+  .v-btn__prepend
+    grid-area: prepend
     margin-inline: $button-margin-start $button-margin-end
 
-  > .v-icon--end
+  .v-btn__append
+    grid-area: append
     margin-inline: $button-margin-end $button-margin-start
 
-  .v-btn--stacked &
-    white-space: normal
+  .v-btn__content
+    grid-area: content
+    justify-content: center
+    white-space: $button-white-space
 
-.v-btn__overlay
-  background-color: currentColor
-  border-radius: inherit
-  opacity: 0
-  transition: opacity .2s ease-in-out
+    > .v-icon--start
+      margin-inline: $button-margin-start $button-margin-end
 
-.v-btn__overlay,
-.v-btn__underlay
-  @include tools.absolute()
-  pointer-events: none
+    > .v-icon--end
+      margin-inline: $button-margin-end $button-margin-start
 
-// VCard
-.v-btn
-  ~ .v-btn:not(.v-btn-toggle .v-btn)
-    .v-card-actions &
-      margin-inline-start: $button-card-actions-margin
+    .v-btn--stacked &
+      white-space: normal
 
-// VPagination
-.v-btn
-  .v-pagination &
-    @include tools.rounded($button-pagination-border-radius)
+  .v-btn__overlay
+    background-color: currentColor
+    border-radius: inherit
+    opacity: 0
+    transition: opacity .2s ease-in-out
 
-  &--rounded
+  .v-btn__overlay,
+  .v-btn__underlay
+    @include tools.absolute()
+    pointer-events: none
+
+  // VCard
+  .v-btn
+    ~ .v-btn:not(.v-btn-toggle .v-btn)
+      .v-card-actions &
+        margin-inline-start: $button-card-actions-margin
+
+  // VPagination
+  .v-btn
     .v-pagination &
-      @include tools.rounded($button-pagination-rounded-border-radius)
+      @include tools.rounded($button-pagination-border-radius)
+
+    &--rounded
+      .v-pagination &
+        @include tools.rounded($button-pagination-rounded-border-radius)
 
-  &__overlay
-    transition: none
+    &__overlay
+      transition: none
 
-    .v-pagination__item--is-active &
-      opacity: $button-pagination-active-overlay-opacity
+      .v-pagination__item--is-active &
+        opacity: $button-pagination-active-overlay-opacity

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

@@ -17,6 +17,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
@@ -60,6 +61,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -132,6 +134,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -199,6 +202,7 @@ declare const VBtn: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -238,6 +242,7 @@ declare const VBtn: {
         size: string | number;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
         exact: boolean;
@@ -307,6 +312,7 @@ declare const VBtn: {
         active: boolean;
         disabled: boolean;
         tag: string;
+        readonly: boolean;
         rounded: string | number | boolean;
         variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
         block: boolean;
@@ -330,6 +336,7 @@ declare const VBtn: {
     size: string | number;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     block: boolean;
     exact: boolean;
@@ -403,6 +410,7 @@ declare const VBtn: {
     active: boolean;
     disabled: boolean;
     tag: string;
+    readonly: boolean;
     rounded: string | number | boolean;
     variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     block: boolean;
@@ -502,6 +510,7 @@ declare const VBtn: {
     prependIcon: PropType<IconValue>;
     appendIcon: PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
@@ -586,6 +595,7 @@ declare const VBtn: {
     prependIcon: PropType<IconValue>;
     appendIcon: PropType<IconValue>;
     block: BooleanConstructor;
+    readonly: BooleanConstructor;
     slim: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {

package/lib/components/VBtnGroup/VBtnGroup.sass

@@ -3,49 +3,50 @@
 @use '../VBtn/variables' as *
 @use './variables' as *
 
-.v-btn-group
-  $root: &
-
-  display: inline-flex
-  flex-wrap: nowrap
-  max-width: 100%
-  min-width: 0
-  overflow: hidden
-  vertical-align: middle
-
-  @include tools.border($btn-group-border...)
-  @include tools.elevation($btn-group-elevation)
-  @include tools.rounded($btn-group-border-radius)
-  @include tools.theme($btn-group-theme...)
-
-  @at-root
-    @include tools.density('v-btn-group', $button-density) using ($modifier)
-      @at-root #{selector.append(&, $root)}
-        height: $btn-group-height + $modifier
-
-  .v-btn
-    border-radius: 0
-    border-color: inherit
-
-    &:not(:last-child)
-      border-inline-end: none
-
-    &:not(:first-child)
-      border-inline-start: none
-
-    &:first-child
-      border-start-start-radius: inherit
-      border-end-start-radius: inherit
-
-    &:last-child
-      border-start-end-radius: inherit
-      border-end-end-radius: inherit
-
-  &--divided
-    .v-btn:not(:last-child)
-      border-inline-end-width: $btn-group-border-thin-width
-      border-inline-end-style: $btn-group-border-style
-      border-inline-end-color: $btn-group-border-color
-
-  &--tile
-    @include tools.rounded($btn-group-tile-border-radius)
+@include tools.layer('components')
+  .v-btn-group
+    $root: &
+
+    display: inline-flex
+    flex-wrap: nowrap
+    max-width: 100%
+    min-width: 0
+    overflow: hidden
+    vertical-align: middle
+
+    @include tools.border($btn-group-border...)
+    @include tools.elevation($btn-group-elevation)
+    @include tools.rounded($btn-group-border-radius)
+    @include tools.theme($btn-group-theme...)
+
+    @at-root
+      @include tools.density('v-btn-group', $button-density) using ($modifier)
+        @at-root #{selector.append(&, $root)}
+          height: $btn-group-height + $modifier
+
+    .v-btn
+      border-radius: 0
+      border-color: inherit
+
+      &:not(:last-child)
+        border-inline-end: none
+
+      &:not(:first-child)
+        border-inline-start: none
+
+      &:first-child
+        border-start-start-radius: inherit
+        border-end-start-radius: inherit
+
+      &:last-child
+        border-start-end-radius: inherit
+        border-end-end-radius: inherit
+
+    &--divided
+      .v-btn:not(:last-child)
+        border-inline-end-width: $btn-group-border-thin-width
+        border-inline-end-style: $btn-group-border-style
+        border-inline-end-color: $btn-group-border-color
+
+    &--tile
+      @include tools.rounded($btn-group-tile-border-radius)

package/lib/components/VBtnToggle/VBtnToggle.sass

@@ -1,6 +1,7 @@
 @use './variables' as *
 @use '../../styles/tools'
 
-.v-btn-toggle
-  > .v-btn.v-btn--active:not(.v-btn--disabled)
-    @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)
+@include tools.layer('components')
+  .v-btn-toggle
+    > .v-btn.v-btn--active:not(.v-btn--disabled)
+      @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)

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

@@ -36,6 +36,7 @@ interface GroupItem {
     id: number;
     value: Ref<unknown>;
     disabled: Ref<boolean | undefined>;
+    useIndexAsValue?: boolean;
 }
 interface GroupProvide {
     register: (item: GroupItem, cmp: ComponentInternalInstance) => void;

package/lib/components/VCard/VCard.css

@@ -193,7 +193,7 @@
   word-wrap: break-word;
 }
 .v-card .v-card-title {
-  line-height: 2rem;
+  line-height: 1.6;
 }
 .v-card--density-comfortable .v-card-title {
   line-height: 1.75rem;
@@ -223,7 +223,7 @@
   white-space: nowrap;
 }
 .v-card .v-card-subtitle {
-  line-height: 1.25rem;
+  line-height: 1.425;
 }
 .v-card--density-comfortable .v-card-subtitle {
   line-height: 1.125rem;
@@ -245,7 +245,7 @@
   text-transform: none;
 }
 .v-card .v-card-text {
-  line-height: 1.25rem;
+  line-height: 1.425;
 }
 .v-card--density-comfortable .v-card-text {
   line-height: 1.2rem;