@vuetify/nightly 3.9.0-master.2025-07-08 → 3.9.0-next.2025-07-09

package/lib/components/VTable/VTable.css

@@ -1,144 +1,143 @@
-.v-table {
-  font-size: 0.875rem;
-  transition-duration: 0.28s;
-  transition-property: box-shadow, opacity, background, height;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-table {
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-table .v-table-divider {
-  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.v-table .v-table__wrapper > table > thead > tr > th {
-  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
-.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
-  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.v-table .v-table__wrapper > table > tfoot > tr > td,
-.v-table .v-table__wrapper > table > tfoot > tr > th {
-  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
-}
-.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
-  position: relative;
-}
-.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
-  background: rgba(var(--v-border-color), var(--v-hover-opacity));
-  pointer-events: none;
-}
-.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.v-table.v-table--striped-even > .v-table__wrapper > table > tbody > tr:nth-child(even) {
-  background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
-}
-.v-table.v-table--striped-odd > .v-table__wrapper > table > tbody > tr:nth-child(odd) {
-  background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
-}
-.v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
-  background: rgb(var(--v-theme-surface));
-  box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
-  z-index: 1;
-}
-.v-table.v-table--fixed-footer > tfoot > tr > th,
-.v-table.v-table--fixed-footer > tfoot > tr > td {
-  background: rgb(var(--v-theme-surface));
-  box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.v-table {
-  border-radius: inherit;
-  line-height: 1.5;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.v-table > .v-table__wrapper > table {
-  width: 100%;
-  border-spacing: 0;
-}
-.v-table > .v-table__wrapper > table > tbody > tr > td,
-.v-table > .v-table__wrapper > table > tbody > tr > th,
-.v-table > .v-table__wrapper > table > thead > tr > td,
-.v-table > .v-table__wrapper > table > thead > tr > th,
-.v-table > .v-table__wrapper > table > tfoot > tr > td,
-.v-table > .v-table__wrapper > table > tfoot > tr > th {
-  padding: 0 16px;
-  transition-duration: 0.28s;
-  transition-property: box-shadow, opacity, background, height;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-table > .v-table__wrapper > table > tbody > tr > td,
-.v-table > .v-table__wrapper > table > thead > tr > td,
-.v-table > .v-table__wrapper > table > tfoot > tr > td {
-  height: var(--v-table-row-height);
-}
-.v-table > .v-table__wrapper > table > tbody > tr > th,
-.v-table > .v-table__wrapper > table > thead > tr > th,
-.v-table > .v-table__wrapper > table > tfoot > tr > th {
-  height: var(--v-table-header-height);
-  font-weight: 500;
-  user-select: none;
-  text-align: start;
-}
-.v-table--density-default {
-  --v-table-header-height: 56px;
-  --v-table-row-height: 52px;
-}
-
-.v-table--density-comfortable {
-  --v-table-header-height: 48px;
-  --v-table-row-height: 44px;
-}
-
-.v-table--density-compact {
-  --v-table-header-height: 40px;
-  --v-table-row-height: 36px;
-}
-
-.v-table__wrapper {
-  border-radius: inherit;
-  overflow: auto;
-  flex: 1 1 auto;
-}
-
-.v-table--has-top > .v-table__wrapper {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.v-table--has-bottom > .v-table__wrapper {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.v-table--fixed-height > .v-table__wrapper {
-  overflow-y: auto;
-}
-
-.v-table--fixed-header > .v-table__wrapper > table > thead {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
-  border-bottom: 0px !important;
-}
-
-.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}
-.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
-.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
-  border-top: 0px !important;
+@layer vuetify.components {
+  .v-table {
+    font-size: 0.875rem;
+    transition-duration: 0.28s;
+    transition-property: box-shadow, opacity, background, height;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-table {
+    background: rgb(var(--v-theme-surface));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-table .v-table-divider {
+    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-table .v-table__wrapper > table > thead > tr > th {
+    border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
+  .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
+    border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-table .v-table__wrapper > table > tfoot > tr > td,
+  .v-table .v-table__wrapper > table > tfoot > tr > th {
+    border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
+    position: relative;
+  }
+  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
+    background: rgba(var(--v-border-color), var(--v-hover-opacity));
+    pointer-events: none;
+  }
+  .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-table.v-table--striped-even > .v-table__wrapper > table > tbody > tr:nth-child(even) {
+    background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
+  }
+  .v-table.v-table--striped-odd > .v-table__wrapper > table > tbody > tr:nth-child(odd) {
+    background-color: rgba(var(--v-border-color), var(--v-hover-opacity));
+  }
+  .v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
+    background: rgb(var(--v-theme-surface));
+    box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+    z-index: 1;
+  }
+  .v-table.v-table--fixed-footer > tfoot > tr > th,
+  .v-table.v-table--fixed-footer > tfoot > tr > td {
+    background: rgb(var(--v-theme-surface));
+    box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  .v-table {
+    border-radius: inherit;
+    line-height: 1.5;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .v-table > .v-table__wrapper > table {
+    width: 100%;
+    border-spacing: 0;
+  }
+  .v-table > .v-table__wrapper > table > tbody > tr > td,
+  .v-table > .v-table__wrapper > table > tbody > tr > th,
+  .v-table > .v-table__wrapper > table > thead > tr > td,
+  .v-table > .v-table__wrapper > table > thead > tr > th,
+  .v-table > .v-table__wrapper > table > tfoot > tr > td,
+  .v-table > .v-table__wrapper > table > tfoot > tr > th {
+    padding: 0 16px;
+    transition-duration: 0.28s;
+    transition-property: box-shadow, opacity, background, height;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-table > .v-table__wrapper > table > tbody > tr > td,
+  .v-table > .v-table__wrapper > table > thead > tr > td,
+  .v-table > .v-table__wrapper > table > tfoot > tr > td {
+    height: var(--v-table-row-height);
+  }
+  .v-table > .v-table__wrapper > table > tbody > tr > th,
+  .v-table > .v-table__wrapper > table > thead > tr > th,
+  .v-table > .v-table__wrapper > table > tfoot > tr > th {
+    height: var(--v-table-header-height);
+    font-weight: 500;
+    user-select: none;
+    text-align: start;
+  }
+  .v-table--density-default {
+    --v-table-header-height: 56px;
+    --v-table-row-height: 52px;
+  }
+  .v-table--density-comfortable {
+    --v-table-header-height: 48px;
+    --v-table-row-height: 44px;
+  }
+  .v-table--density-compact {
+    --v-table-header-height: 40px;
+    --v-table-row-height: 36px;
+  }
+  .v-table__wrapper {
+    border-radius: inherit;
+    overflow: auto;
+    flex: 1 1 auto;
+  }
+  .v-table--has-top > .v-table__wrapper {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .v-table--has-bottom > .v-table__wrapper {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .v-table--fixed-height > .v-table__wrapper {
+    overflow-y: auto;
+  }
+  .v-table--fixed-header > .v-table__wrapper > table > thead {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+}
+@layer vuetify.overrides {
+  .v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
+    border-bottom: 0px;
+  }
+}
+@layer vuetify.components {
+  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+}
+@layer vuetify.overrides {
+  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
+  .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
+    border-top: 0px;
+  }
 }

package/lib/components/VTable/VTable.sass

@@ -150,7 +150,8 @@
           z-index: 2
           > tr
             > th
-              border-bottom: 0px !important
+              @include tools.layer('overrides')
+                border-bottom: 0px
 
   .v-table--fixed-footer
     > .v-table__wrapper
@@ -162,4 +163,5 @@
             z-index: 1
             > td,
             > th
-                border-top: 0px !important
+              @include tools.layer('overrides')
+                border-top: 0px

package/lib/components/VTabs/VTab.css

@@ -1,30 +1,31 @@
-.v-tab.v-tab.v-btn {
-  height: var(--v-tabs-height);
-  border-radius: 0;
-  min-width: 90px;
-}
-.v-slide-group--horizontal .v-tab {
-  max-width: 360px;
-}
-.v-slide-group--vertical .v-tab {
-  justify-content: start;
-}
-
-.v-tab__slider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  background: currentColor;
-  pointer-events: none;
-  opacity: 0;
-}
-.v-tab--selected .v-tab__slider {
-  opacity: 1;
-}
-.v-slide-group--vertical .v-tab__slider {
-  top: 0;
-  height: 100%;
-  width: 2px;
+@layer vuetify.components {
+  .v-tab.v-tab.v-btn {
+    height: var(--v-tabs-height);
+    border-radius: 0;
+    min-width: 90px;
+  }
+  .v-slide-group--horizontal .v-tab {
+    max-width: 360px;
+  }
+  .v-slide-group--vertical .v-tab {
+    justify-content: start;
+  }
+  .v-tab__slider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    background: currentColor;
+    pointer-events: none;
+    opacity: 0;
+  }
+  .v-tab--selected .v-tab__slider {
+    opacity: 1;
+  }
+  .v-slide-group--vertical .v-tab__slider {
+    top: 0;
+    height: 100%;
+    width: 2px;
+  }
 }

package/lib/components/VTabs/VTabs.css

@@ -1,67 +1,61 @@
-.v-tabs {
-  display: flex;
-  height: var(--v-tabs-height);
-}
-.v-tabs--density-default {
-  --v-tabs-height: 48px;
-}
-.v-tabs--density-default.v-tabs--stacked {
-  --v-tabs-height: 72px;
-}
-
-.v-tabs--density-comfortable {
-  --v-tabs-height: 44px;
-}
-.v-tabs--density-comfortable.v-tabs--stacked {
-  --v-tabs-height: 68px;
-}
-
-.v-tabs--density-compact {
-  --v-tabs-height: 36px;
-}
-.v-tabs--density-compact.v-tabs--stacked {
-  --v-tabs-height: 60px;
-}
-
-.v-tabs.v-slide-group--vertical {
-  height: auto;
-  flex: none;
-  --v-tabs-height: 48px;
-}
-
-.v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
-  margin-inline-start: 42px;
-}
-
-.v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
-.v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
-  margin-inline-end: auto;
-}
-.v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
-.v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
-  margin-inline-start: auto;
-}
-
-.v-tabs--grow {
-  flex-grow: 1;
-}
-.v-tabs--grow .v-tab {
-  flex: 1 0 auto;
-  max-width: none;
-}
-
-.v-tabs--align-tabs-end .v-tab:first-child {
-  margin-inline-start: auto;
-}
-.v-tabs--align-tabs-end .v-tab:last-child {
-  margin-inline-end: 0;
-}
-
-@media (max-width: 1279.98px) {
-  .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
-    margin-inline-start: 52px;
-  }
-  .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
-    margin-inline-end: 52px;
+@layer vuetify.components {
+  .v-tabs {
+    display: flex;
+    height: var(--v-tabs-height);
+  }
+  .v-tabs--density-default {
+    --v-tabs-height: 48px;
+  }
+  .v-tabs--density-default.v-tabs--stacked {
+    --v-tabs-height: 72px;
+  }
+  .v-tabs--density-comfortable {
+    --v-tabs-height: 44px;
+  }
+  .v-tabs--density-comfortable.v-tabs--stacked {
+    --v-tabs-height: 68px;
+  }
+  .v-tabs--density-compact {
+    --v-tabs-height: 36px;
+  }
+  .v-tabs--density-compact.v-tabs--stacked {
+    --v-tabs-height: 60px;
+  }
+  .v-tabs.v-slide-group--vertical {
+    height: auto;
+    flex: none;
+    --v-tabs-height: 48px;
+  }
+  .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
+    margin-inline-start: 42px;
+  }
+  .v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
+  .v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
+    margin-inline-end: auto;
+  }
+  .v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
+  .v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
+    margin-inline-start: auto;
+  }
+  .v-tabs--grow {
+    flex-grow: 1;
+  }
+  .v-tabs--grow .v-tab {
+    flex: 1 0 auto;
+    max-width: none;
+  }
+  .v-tabs--align-tabs-end .v-tab:first-child {
+    margin-inline-start: auto;
+  }
+  .v-tabs--align-tabs-end .v-tab:last-child {
+    margin-inline-end: 0;
+  }
+  @media (max-width: 1279.98px) {
+    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
+      margin-inline-start: 52px;
+    }
+    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
+      margin-inline-end: 52px;
+    }
   }
 }