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

package/lib/components/VToolbar/VToolbar.css

@@ -1,145 +1,138 @@
-.v-toolbar {
-  align-items: flex-start;
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 100%;
-  position: relative;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
-  width: 100%;
-}
-.v-toolbar {
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: 0;
-}
-.v-toolbar--border {
-  border-width: thin;
-  box-shadow: none;
-}
-.v-toolbar {
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-toolbar {
-  border-radius: 0;
-}
-.v-toolbar {
-  background: rgb(var(--v-theme-surface-light));
-  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
-}
-.v-toolbar--absolute {
-  position: absolute;
-}
-.v-toolbar--collapse {
-  max-width: 112px;
-  overflow: hidden;
-  border-end-end-radius: 24px;
-}
-.v-toolbar--collapse .v-toolbar-title {
-  display: none;
-}
-.v-toolbar--flat {
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-.v-toolbar--floating {
-  display: inline-flex;
-  width: auto;
-}
-.v-toolbar--rounded {
-  border-radius: 4px;
-}
-
-.v-toolbar__content,
-.v-toolbar__extension {
-  align-items: center;
-  display: flex;
-  flex: 0 0 auto;
-  position: relative;
-  transition: inherit;
-  width: 100%;
-}
-
-.v-toolbar__content {
-  overflow: hidden;
-}
-.v-toolbar__content > .v-btn:first-child {
-  margin-inline-start: 4px;
-}
-.v-toolbar__content > .v-btn:last-child {
-  margin-inline-end: 4px;
-}
-.v-toolbar__content > .v-toolbar-title {
-  margin-inline-start: 20px;
-}
-.v-toolbar--density-prominent .v-toolbar__content {
-  align-items: flex-start;
-}
-
-.v-toolbar__image {
-  display: flex;
-  opacity: var(--v-toolbar-image-opacity, 1);
-  transition-property: opacity;
-}
-.v-toolbar__image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.v-toolbar__prepend,
-.v-toolbar__append {
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-}
-
-.v-toolbar__prepend {
-  margin-inline: 4px auto;
-}
-
-.v-toolbar__append {
-  margin-inline: auto 4px;
-}
-
-.v-toolbar-title {
-  flex: 1 1;
-  font-size: 1.25rem;
-  min-width: 0;
-}
-.v-toolbar-title {
-  font-size: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 1.75rem;
-  text-transform: none;
-}
-.v-toolbar--density-prominent .v-toolbar-title {
-  align-self: flex-end;
-  padding-bottom: 6px;
-}
-.v-toolbar--density-prominent .v-toolbar-title {
-  font-size: 1.5rem;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 2.25rem;
-  text-transform: none;
-}
-
-.v-toolbar-title__placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.v-toolbar-items {
-  display: flex;
-  height: inherit;
-  align-self: stretch;
-}
-.v-toolbar-items > .v-btn {
-  border-radius: 0;
+@layer vuetify.components {
+  .v-toolbar {
+    align-items: flex-start;
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: 100%;
+    position: relative;
+    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
+    width: 100%;
+  }
+  .v-toolbar {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    border-style: solid;
+    border-width: 0;
+  }
+  .v-toolbar--border {
+    border-width: thin;
+    box-shadow: none;
+  }
+  .v-toolbar {
+    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-toolbar {
+    border-radius: 0;
+  }
+  .v-toolbar {
+    background: rgb(var(--v-theme-surface-light));
+    color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+  }
+  .v-toolbar--absolute {
+    position: absolute;
+  }
+  .v-toolbar--collapse {
+    max-width: 112px;
+    overflow: hidden;
+    border-end-end-radius: 24px;
+  }
+  .v-toolbar--collapse .v-toolbar-title {
+    display: none;
+  }
+  .v-toolbar--flat {
+    box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+  }
+  .v-toolbar--floating {
+    display: inline-flex;
+    width: auto;
+  }
+  .v-toolbar--rounded {
+    border-radius: 4px;
+  }
+  .v-toolbar__content,
+  .v-toolbar__extension {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    position: relative;
+    transition: inherit;
+    width: 100%;
+  }
+  .v-toolbar__content {
+    overflow: hidden;
+  }
+  .v-toolbar__content > .v-btn:first-child {
+    margin-inline-start: 4px;
+  }
+  .v-toolbar__content > .v-btn:last-child {
+    margin-inline-end: 4px;
+  }
+  .v-toolbar__content > .v-toolbar-title {
+    margin-inline-start: 20px;
+  }
+  .v-toolbar--density-prominent .v-toolbar__content {
+    align-items: flex-start;
+  }
+  .v-toolbar__image {
+    display: flex;
+    opacity: var(--v-toolbar-image-opacity, 1);
+    transition-property: opacity;
+  }
+  .v-toolbar__image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .v-toolbar__prepend,
+  .v-toolbar__append {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+  }
+  .v-toolbar__prepend {
+    margin-inline: 4px auto;
+  }
+  .v-toolbar__append {
+    margin-inline: auto 4px;
+  }
+  .v-toolbar-title {
+    flex: 1 1;
+    font-size: 1.25rem;
+    min-width: 0;
+  }
+  .v-toolbar-title {
+    font-size: 1.25rem;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 1.75rem;
+    text-transform: none;
+  }
+  .v-toolbar--density-prominent .v-toolbar-title {
+    align-self: flex-end;
+    padding-bottom: 6px;
+  }
+  .v-toolbar--density-prominent .v-toolbar-title {
+    font-size: 1.5rem;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 2.25rem;
+    text-transform: none;
+  }
+  .v-toolbar-title__placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .v-toolbar-items {
+    display: flex;
+    height: inherit;
+    align-self: stretch;
+  }
+  .v-toolbar-items > .v-btn {
+    border-radius: 0;
+  }
 }

package/lib/components/VTooltip/VTooltip.css

@@ -1,25 +1,29 @@
-.v-tooltip > .v-overlay__content {
-  background: rgb(var(--v-theme-surface-variant));
-  color: rgb(var(--v-theme-on-surface-variant));
-  border-radius: 4px;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  display: inline-block;
-  padding: 5px 16px;
-  text-transform: initial;
-  width: auto;
-  opacity: 1;
-  transition-property: opacity, transform;
-  overflow-wrap: break-word;
+@layer vuetify.components {
+  .v-tooltip > .v-overlay__content {
+    background: rgb(var(--v-theme-surface-variant));
+    color: rgb(var(--v-theme-on-surface-variant));
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    display: inline-block;
+    padding: 5px 16px;
+    text-transform: initial;
+    width: auto;
+    opacity: 1;
+    transition-property: opacity, transform;
+    overflow-wrap: break-word;
+  }
 }
-.v-tooltip > .v-overlay__content[class*=enter-active] {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.v-tooltip > .v-overlay__content[class*=leave-active] {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-  transition-duration: 75ms;
-}
-.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content {
-  pointer-events: none;
+@layer vuetify.overrides {
+  .v-tooltip > .v-overlay__content[class*=enter-active] {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  .v-tooltip > .v-overlay__content[class*=leave-active] {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    transition-duration: 75ms;
+  }
+  .v-tooltip > .v-overlay__content:not(.v-tooltip--interactive) > .v-overlay__content {
+    pointer-events: none;
+  }
 }

package/lib/components/VTooltip/VTooltip.sass

@@ -18,13 +18,15 @@
       transition-property: opacity, transform
       overflow-wrap: $tooltip-overflow-wrap
 
-      &[class*="enter-active"]
-        transition-timing-function: settings.$decelerated-easing
-        transition-duration: $tooltip-transition-enter-duration
+@include tools.layer('overrides')
+  .v-tooltip > .v-overlay__content
+    &[class*="enter-active"]
+      transition-timing-function: settings.$decelerated-easing
+      transition-duration: $tooltip-transition-enter-duration
 
-      &[class*="leave-active"]
-        transition-timing-function: settings.$accelerated-easing
-        transition-duration: $tooltip-transition-leave-duration
+    &[class*="leave-active"]
+      transition-timing-function: settings.$accelerated-easing
+      transition-duration: $tooltip-transition-leave-duration
 
     &:not(.v-tooltip--interactive)
       > .v-overlay__content

package/lib/components/VTreeview/VTreeviewItem.css

@@ -1,86 +1,84 @@
-.v-treeview-item {
-  --list-indent-size: 28px;
-}
-.v-treeview-item.v-treeview-item--filtered {
-  display: none;
-}
-.v-treeview-item__level {
-  width: 28px;
-}
-.v-treeview--fluid .v-treeview-item__level {
-  width: 0;
-}
-
-.v-treeview.v-list {
-  --indent-padding: 16px;
-}
-.v-treeview.v-list--disabled .v-list-item__prepend {
-  pointer-events: auto;
-}
-.v-treeview .v-list-item--slim > .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
-  width: 10px;
-}
-.v-treeview .v-list-item--slim > .v-list-item__prepend:not(:has(.v-list-item-action)) > .v-icon {
-  margin-inline-start: -6px;
-}
-
-.v-treeview-indent-lines {
-  position: absolute;
-  left: 0;
-  height: 100%;
-  display: grid;
-  padding-left: 8px;
-  padding-block: 0;
-  grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width));
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-.v-treeview-indent-line, .v-treeview-indent-line::before {
-  border: 0px solid rgb(var(--v-theme-on-surface));
-}
-.v-treeview-indent-line--leaf, .v-treeview-indent-line--line {
-  border-left-width: 1px;
-  height: 100%;
-  width: calc(50% + 1px);
-  justify-self: end;
-}
-.v-treeview-indent-line--leaf {
-  position: relative;
-}
-.v-treeview-indent-line--leaf::before {
-  content: "";
-  position: absolute;
-  border-bottom-width: 1px;
-  height: calc(50% + 1px);
-  width: 100%;
-}
-.v-treeview-indent-line--leaf:last-child::before {
-  width: calc(100% - 4px);
-}
-.v-treeview-indent-line--leaf-link {
-  border-bottom-width: 1px;
-  height: calc(50% + 1px);
-  margin-left: 0;
-  margin-right: 6px;
-}
-.v-treeview-indent-line--last-leaf {
-  border-left-width: 1px;
-  border-bottom-width: 1px;
-  height: calc(50% + 1px);
-  margin-left: calc(50% - 1px);
-  border-bottom-left-radius: 4px;
-}
-.v-treeview-indent-line--last-leaf:last-child {
-  margin-right: 4px;
-}
-
-.v-treeview-group.v-list-group {
-  --list-indent-size: 0px;
-}
-.v-treeview-group.v-list-group > .v-treeview-item__level {
-  width: 0px;
-}
-.v-treeview-group.v-list-group .v-list-group__items .v-list-item {
-  padding-inline-start: calc(var(--indent-padding)) !important;
+@layer vuetify.components {
+  .v-treeview-item {
+    --list-indent-size: 28px;
+  }
+  .v-treeview-item.v-treeview-item--filtered {
+    display: none;
+  }
+  .v-treeview-item__level {
+    width: 28px;
+  }
+  .v-treeview--fluid .v-treeview-item__level {
+    width: 0;
+  }
+  .v-treeview.v-list {
+    --indent-padding: 16px;
+  }
+  .v-treeview.v-list--disabled .v-list-item__prepend {
+    pointer-events: auto;
+  }
+  .v-treeview .v-list-item--slim > .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
+    width: 10px;
+  }
+  .v-treeview .v-list-item--slim > .v-list-item__prepend:not(:has(.v-list-item-action)) > .v-icon {
+    margin-inline-start: -6px;
+  }
+  .v-treeview-indent-lines {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    display: grid;
+    padding-left: 8px;
+    padding-block: 0;
+    grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width));
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .v-treeview-indent-line, .v-treeview-indent-line::before {
+    border: 0px solid rgb(var(--v-theme-on-surface));
+  }
+  .v-treeview-indent-line--leaf, .v-treeview-indent-line--line {
+    border-left-width: 1px;
+    height: 100%;
+    width: calc(50% + 1px);
+    justify-self: end;
+  }
+  .v-treeview-indent-line--leaf {
+    position: relative;
+  }
+  .v-treeview-indent-line--leaf::before {
+    content: "";
+    position: absolute;
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    width: 100%;
+  }
+  .v-treeview-indent-line--leaf:last-child::before {
+    width: calc(100% - 4px);
+  }
+  .v-treeview-indent-line--leaf-link {
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    margin-left: 0;
+    margin-right: 6px;
+  }
+  .v-treeview-indent-line--last-leaf {
+    border-left-width: 1px;
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    margin-left: calc(50% - 1px);
+    border-bottom-left-radius: 4px;
+  }
+  .v-treeview-indent-line--last-leaf:last-child {
+    margin-right: 4px;
+  }
+  .v-treeview-group.v-list-group {
+    --list-indent-size: 0px;
+  }
+  .v-treeview-group.v-list-group > .v-treeview-item__level {
+    width: 0px;
+  }
+  .v-treeview-group.v-list-group .v-list-group__items .v-list-item {
+    padding-inline-start: calc(var(--indent-padding)) !important;
+  }
 }

package/lib/components/VVirtualScroll/VVirtualScroll.css

@@ -1,10 +1,12 @@
-.v-virtual-scroll {
-  display: block;
-  flex: 1 1 auto;
-  max-width: 100%;
-  overflow: auto;
-  position: relative;
-}
-.v-virtual-scroll__container {
-  display: block;
+@layer vuetify.components {
+  .v-virtual-scroll {
+    display: block;
+    flex: 1 1 auto;
+    max-width: 100%;
+    overflow: auto;
+    position: relative;
+  }
+  .v-virtual-scroll__container {
+    display: block;
+  }
 }