@vuetify/nightly 3.8.1-master.2025-04-15 → 3.8.1-next.2025-04-15

package/lib/components/VDataTable/VDataTable.css

@@ -1,187 +1,190 @@
-.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: auto;
-  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: start;
-}
-
-.v-data-table__td-value {
-  text-align: end;
-}
-
-.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));
+@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: start;
+  }
+  .v-data-table__td-value {
+    text-align: end;
+  }
+  .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,10 +77,16 @@
   .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))
 
@@ -99,8 +105,10 @@
     .v-data-table__td
       opacity: $data-table-loading-opacity
 
-  .v-data-table-group-header-row__column
-    padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
+  @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-header__content
     display: flex
@@ -119,11 +127,12 @@
     width: $data-table-header-sort-badge-size
     height: $data-table-header-sort-badge-size
 
-  .v-data-table-progress
-    > th
-      border: none !important
-      height: auto !important
-      padding: 0 !important
+  @include tools.layer('overrides')
+    .v-data-table-progress
+      > th
+        border: none
+        height: auto
+        padding: 0
 
   .v-data-table-progress__loader
     position: relative
@@ -134,7 +143,7 @@
 
   .v-data-table__tr--mobile
     > .v-data-table__td--expanded-row
-      grid-template-columns: auto
+      grid-template-columns: 0
       justify-content: center
 
     > .v-data-table__td--select-row
@@ -148,8 +157,9 @@
       grid-template-columns: repeat(2, 1fr)
       min-height: var(--v-table-row-height)
 
-      &:not(:last-child)
-        border-bottom: 0 !important
+      @include tools.layer('overrides')
+        &:not(:last-child)
+          border-bottom: 0
 
   .v-data-table__td-title
     font-weight: VTable.$table-header-font-weight

package/lib/components/VDataTable/VDataTableFooter.css

@@ -1,32 +1,34 @@
-.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;
+@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;
+  }
 }

package/lib/components/VDatePicker/VDatePicker.css

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

package/lib/components/VDatePicker/VDatePicker.d.ts

@@ -241,10 +241,10 @@ export declare const makeVDatePickerProps: <Defaults extends {
     };
     firstDayOfWeek: unknown extends Defaults["firstDayOfWeek"] ? {
         type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+        default: number;
     } : Omit<{
         type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+        default: number;
     }, "type" | "default"> & {
         type: import("vue").PropType<unknown extends Defaults["firstDayOfWeek"] ? string | number : string | number | Defaults["firstDayOfWeek"]>;
         default: unknown extends Defaults["firstDayOfWeek"] ? string | number : NonNullable<string | number> | Defaults["firstDayOfWeek"];
@@ -378,6 +378,7 @@ export declare const VDatePicker: {
         showAdjacentMonths: boolean;
         weekdays: import("../../composables/calendar.js").CalendarWeekdays[];
         weeksInMonth: "static" | "dynamic";
+        firstDayOfWeek: string | number;
         hideWeekdays: boolean;
         showWeek: boolean;
     } & {
@@ -404,7 +405,6 @@ export declare const VDatePicker: {
         bgColor?: string | undefined;
         controlHeight?: string | number | undefined;
         headerColor?: string | undefined;
-        firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     } & {
         "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -473,6 +473,7 @@ export declare const VDatePicker: {
         showAdjacentMonths: boolean;
         weekdays: import("../../composables/calendar.js").CalendarWeekdays[];
         weeksInMonth: "static" | "dynamic";
+        firstDayOfWeek: string | number;
         hideWeekdays: boolean;
         showWeek: boolean;
     } & {
@@ -499,7 +500,6 @@ export declare const VDatePicker: {
         bgColor?: string | undefined;
         controlHeight?: string | number | undefined;
         headerColor?: string | undefined;
-        firstDayOfWeek?: string | number | undefined;
         allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
     } & {
         "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -552,6 +552,7 @@ export declare const VDatePicker: {
     showAdjacentMonths: boolean;
     weekdays: import("../../composables/calendar.js").CalendarWeekdays[];
     weeksInMonth: "static" | "dynamic";
+    firstDayOfWeek: string | number;
     hideWeekdays: boolean;
     showWeek: boolean;
 } & {
@@ -578,7 +579,6 @@ export declare const VDatePicker: {
     bgColor?: string | undefined;
     controlHeight?: string | number | undefined;
     headerColor?: string | undefined;
-    firstDayOfWeek?: string | number | undefined;
     allowedDates?: unknown[] | ((date: unknown) => boolean) | undefined;
 } & {
     "onUpdate:month"?: ((date: any) => any) | undefined;
@@ -689,7 +689,7 @@ export declare const VDatePicker: {
     };
     firstDayOfWeek: {
         type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+        default: number;
     };
     allowedDates: import("vue").PropType<unknown[] | ((date: unknown) => boolean)>;
     hideWeekdays: BooleanConstructor;
@@ -794,7 +794,7 @@ export declare const VDatePicker: {
     };
     firstDayOfWeek: {
         type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
+        default: number;
     };
     allowedDates: import("vue").PropType<unknown[] | ((date: unknown) => boolean)>;
     hideWeekdays: BooleanConstructor;