@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-16

package/lib/components/VDataTable/VDataTable.css

@@ -1,190 +1,187 @@
-@layer vuetify.components {
-  .v-data-table {
-    width: 100%;
-  }
-  .v-data-table__table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-  .v-data-table__tr--focus {
-    border: 1px dotted black;
-  }
-  .v-data-table__tr--clickable {
-    cursor: pointer;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
-    text-align: end;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
-    flex-direction: row-reverse;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
-    text-align: center;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
-    justify-content: center;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
-    padding: 0 8px;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
-    text-overflow: ellipsis;
-    text-wrap: nowrap;
-    overflow: hidden;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
-  .v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
-    display: contents;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > th,
-  .v-data-table .v-table__wrapper > table tbody > tr > th {
-    align-items: center;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
-  .v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
-    position: sticky;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
-  .v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover {
-    cursor: pointer;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
-  .v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
-    opacity: 0;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
-  .v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon {
-    opacity: 0.5;
-  }
-  .v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
-  .v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
-    height: fit-content;
-  }
-  .v-data-table-column--fixed,
-  .v-data-table__th--sticky {
-    background: rgb(var(--v-theme-surface));
-    left: 0;
-    z-index: 1;
-  }
-}
-@layer vuetify.overrides {
-  .v-data-table-column--fixed,
-  .v-data-table__th--sticky {
-    position: sticky;
-  }
-}
-@layer vuetify.components {
-  .v-data-table-column--last-fixed {
-    border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  }
-  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed {
-    z-index: 2;
-  }
-  .v-data-table-group-header-row td {
-    background: rgba(var(--v-theme-surface));
-    color: rgba(var(--v-theme-on-surface));
-  }
-  .v-data-table-group-header-row td > span {
-    padding-left: 5px;
-  }
-  .v-data-table--loading .v-data-table__td {
-    opacity: var(--v-disabled-opacity);
-  }
-}
-@layer vuetify.overrides {
-  .v-data-table-group-header-row__column {
-    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px);
-  }
-}
-@layer vuetify.components {
-  .v-data-table-header__content {
-    display: flex;
-    align-items: center;
-  }
-  .v-data-table-header__sort-badge {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.875rem;
-    padding: 4px;
-    border-radius: 50%;
-    background: rgba(var(--v-border-color), var(--v-border-opacity));
-    min-width: 20px;
-    min-height: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-@layer vuetify.overrides {
-  .v-data-table-progress > th {
-    border: none;
-    height: auto;
-    padding: 0;
-  }
-}
-@layer vuetify.components {
-  .v-data-table-progress__loader {
-    position: relative;
-  }
-  .v-data-table-rows-loading,
-  .v-data-table-rows-no-data {
-    text-align: center;
-  }
-  .v-data-table__tr--mobile > .v-data-table__td--expanded-row {
-    grid-template-columns: 0;
-    justify-content: center;
-  }
-  .v-data-table__tr--mobile > .v-data-table__td--select-row {
-    grid-template-columns: 0;
-    justify-content: end;
-  }
-  .v-data-table__tr--mobile > td {
-    align-items: center;
-    column-gap: 4px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    min-height: var(--v-table-row-height);
-  }
-}
-@layer vuetify.overrides {
-  .v-data-table__tr--mobile > td:not(:last-child) {
-    border-bottom: 0;
-  }
-}
-@layer vuetify.components {
-  .v-data-table__td-title {
-    font-weight: 500;
-    text-align: left;
-  }
-  .v-data-table__td-value {
-    text-align: right;
-  }
-  .v-data-table__td-sort-icon {
-    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
-  }
-  .v-data-table__td-sort-icon-active {
-    color: rgba(var(--v-theme-on-surface));
-  }
+.v-data-table {
+  width: 100%;
+}
+
+.v-data-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.v-data-table__tr--focus {
+  border: 1px dotted black;
+}
+.v-data-table__tr--clickable {
+  cursor: pointer;
+}
+
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
+  text-align: end;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
+  flex-direction: row-reverse;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
+  text-align: center;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
+  justify-content: center;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
+  padding: 0 8px;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  overflow: hidden;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
+.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
+  display: contents;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > th,
+.v-data-table .v-table__wrapper > table tbody > tr > th {
+  align-items: center;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
+.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
+  position: sticky;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
+.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover {
+  cursor: pointer;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
+.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
+  opacity: 0;
+}
+.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
+.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon {
+  opacity: 0.5;
+}
+.v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
+.v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
+  height: fit-content;
+}
+
+.v-data-table-column--fixed,
+.v-data-table__th--sticky {
+  background: rgb(var(--v-theme-surface));
+  position: sticky !important;
+  left: 0;
+  z-index: 1;
+}
+
+.v-data-table-column--last-fixed {
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed {
+  z-index: 2;
+}
+
+.v-data-table-group-header-row td {
+  background: rgba(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface));
+}
+.v-data-table-group-header-row td > span {
+  padding-left: 5px;
+}
+
+.v-data-table--loading .v-data-table__td {
+  opacity: var(--v-disabled-opacity);
+}
+
+.v-data-table-group-header-row__column {
+  padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important;
+}
+
+.v-data-table-header__content {
+  display: flex;
+  align-items: center;
+}
+
+.v-data-table-header__sort-badge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.875rem;
+  padding: 4px;
+  border-radius: 50%;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+  min-width: 20px;
+  min-height: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.v-data-table-progress > th {
+  border: none !important;
+  height: auto !important;
+  padding: 0 !important;
+}
+
+.v-data-table-progress__loader {
+  position: relative;
+}
+
+.v-data-table-rows-loading,
+.v-data-table-rows-no-data {
+  text-align: center;
+}
+
+.v-data-table__tr--mobile > .v-data-table__td--expanded-row {
+  grid-template-columns: 0;
+  justify-content: center;
+}
+.v-data-table__tr--mobile > .v-data-table__td--select-row {
+  grid-template-columns: 0;
+  justify-content: end;
+}
+.v-data-table__tr--mobile > td {
+  align-items: center;
+  column-gap: 4px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  min-height: var(--v-table-row-height);
+}
+.v-data-table__tr--mobile > td:not(:last-child) {
+  border-bottom: 0 !important;
+}
+
+.v-data-table__td-title {
+  font-weight: 500;
+  text-align: left;
+}
+
+.v-data-table__td-value {
+  text-align: right;
+}
+
+.v-data-table__td-sort-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+}
+.v-data-table__td-sort-icon-active {
+  color: rgba(var(--v-theme-on-surface));
 }

package/lib/components/VDataTable/VDataTable.sass

@@ -77,16 +77,10 @@
   .v-data-table-column--fixed,
   .v-data-table__th--sticky
     background: $table-background
+    position: sticky !important
     left: 0
     z-index: 1
 
-    @include tools.layer('overrides')
-      // Beat out relative on table > tbody > tr > td
-      // TODO: Use :where() for all those child combinators
-      // @scope would probably be even better but
-      // doesn't seem to be getting here any time soon
-      position: sticky
-
   .v-data-table-column--last-fixed
     border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
 
@@ -105,10 +99,8 @@
     .v-data-table__td
       opacity: $data-table-loading-opacity
 
-  @include tools.layer('overrides')
-    // Again, needs to beat all the child combinators
-    .v-data-table-group-header-row__column
-      padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px)
+  .v-data-table-group-header-row__column
+    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
 
   .v-data-table-header__content
     display: flex
@@ -127,12 +119,11 @@
     width: $data-table-header-sort-badge-size
     height: $data-table-header-sort-badge-size
 
-  @include tools.layer('overrides')
-    .v-data-table-progress
-      > th
-        border: none
-        height: auto
-        padding: 0
+  .v-data-table-progress
+    > th
+      border: none !important
+      height: auto !important
+      padding: 0 !important
 
   .v-data-table-progress__loader
     position: relative
@@ -157,9 +148,8 @@
       grid-template-columns: repeat(2, 1fr)
       min-height: var(--v-table-row-height)
 
-      @include tools.layer('overrides')
-        &:not(:last-child)
-          border-bottom: 0
+      &:not(:last-child)
+        border-bottom: 0 !important
 
   .v-data-table__td-title
     font-weight: VTable.$table-header-font-weight

package/lib/components/VDataTable/VDataTableFooter.css

@@ -1,34 +1,32 @@
-@layer vuetify.components {
-  .v-data-table-footer {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    padding: 8px 4px;
-  }
-  .v-data-table-footer__items-per-page {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-  .v-data-table-footer__items-per-page > span {
-    padding-inline-end: 8px;
-  }
-  .v-data-table-footer__items-per-page > .v-select {
-    width: 90px;
-  }
-  .v-data-table-footer__info {
-    display: flex;
-    justify-content: flex-end;
-    min-width: 116px;
-    padding: 0 16px;
-  }
-  .v-data-table-footer__paginationz {
-    align-items: center;
-    display: flex;
-    margin-inline-start: 16px;
-  }
-  .v-data-table-footer__page {
-    padding: 0 8px;
-  }
+.v-data-table-footer {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  padding: 8px 4px;
+}
+.v-data-table-footer__items-per-page {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.v-data-table-footer__items-per-page > span {
+  padding-inline-end: 8px;
+}
+.v-data-table-footer__items-per-page > .v-select {
+  width: 90px;
+}
+.v-data-table-footer__info {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 116px;
+  padding: 0 16px;
+}
+.v-data-table-footer__paginationz {
+  align-items: center;
+  display: flex;
+  margin-inline-start: 16px;
+}
+.v-data-table-footer__page {
+  padding: 0 8px;
 }

package/lib/components/VDatePicker/VDatePicker.css

@@ -1,9 +1,7 @@
-@layer vuetify.components {
-  .v-date-picker {
-    overflow: hidden;
-    width: 328px;
-  }
-  .v-date-picker--show-week {
-    width: 368px;
-  }
+.v-date-picker {
+  overflow: hidden;
+  width: 328px;
+}
+.v-date-picker--show-week {
+  width: 368px;
 }

package/lib/components/VDatePicker/VDatePickerControls.css

@@ -1,55 +1,57 @@
-@layer vuetify.components {
-  .v-date-picker-controls {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 0.875rem;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-inline-start: 6px;
-    padding-inline-end: 12px;
-  }
-  .v-date-picker-controls > .v-btn:first-child {
-    text-transform: none;
-    font-weight: 400;
-    line-height: initial;
-    letter-spacing: initial;
-  }
-  .v-date-picker-controls--variant-classic {
-    padding-inline-start: 12px;
-  }
-  .v-date-picker-controls--variant-modern .v-date-picker__title:not(:hover) {
-    opacity: 0.7;
-  }
-  .v-date-picker--month .v-date-picker-controls--variant-modern .v-date-picker__title {
-    cursor: pointer;
-  }
-  .v-date-picker--year .v-date-picker-controls--variant-modern .v-date-picker__title {
-    opacity: 1;
-  }
-  .v-date-picker-controls .v-btn:last-child {
-    margin-inline-start: 4px;
-  }
-  .v-date-picker--year .v-date-picker-controls .v-date-picker-controls__mode-btn {
-    transform: rotate(180deg);
-  }
-  .v-date-picker-controls__date {
-    margin-inline-end: 4px;
-  }
-  .v-date-picker-controls--variant-classic .v-date-picker-controls__date {
-    margin: auto;
-    text-align: center;
-  }
-  .v-date-picker-controls__month {
-    display: flex;
-  }
-  .v-locale--is-rtl.v-date-picker-controls__month, .v-locale--is-rtl .v-date-picker-controls__month {
-    flex-direction: row-reverse;
-  }
-  .v-date-picker-controls--variant-classic .v-date-picker-controls__month {
-    flex: 1 0 auto;
-  }
-  .v-date-picker__title {
-    display: inline-block;
-  }
+.v-date-picker-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-inline-start: 6px;
+  padding-inline-end: 12px;
+}
+.v-date-picker-controls > .v-btn:first-child {
+  text-transform: none;
+  font-weight: 400;
+  line-height: initial;
+  letter-spacing: initial;
+}
+.v-date-picker-controls--variant-classic {
+  padding-inline-start: 12px;
+}
+.v-date-picker-controls--variant-modern .v-date-picker__title:not(:hover) {
+  opacity: 0.7;
+}
+.v-date-picker--month .v-date-picker-controls--variant-modern .v-date-picker__title {
+  cursor: pointer;
+}
+.v-date-picker--year .v-date-picker-controls--variant-modern .v-date-picker__title {
+  opacity: 1;
+}
+.v-date-picker-controls .v-btn:last-child {
+  margin-inline-start: 4px;
+}
+.v-date-picker--year .v-date-picker-controls .v-date-picker-controls__mode-btn {
+  transform: rotate(180deg);
+}
+
+.v-date-picker-controls__date {
+  margin-inline-end: 4px;
+}
+.v-date-picker-controls--variant-classic .v-date-picker-controls__date {
+  margin: auto;
+  text-align: center;
+}
+
+.v-date-picker-controls__month {
+  display: flex;
+}
+.v-locale--is-rtl.v-date-picker-controls__month, .v-locale--is-rtl .v-date-picker-controls__month {
+  flex-direction: row-reverse;
+}
+
+.v-date-picker-controls--variant-classic .v-date-picker-controls__month {
+  flex: 1 0 auto;
+}
+
+.v-date-picker__title {
+  display: inline-block;
 }