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

package/lib/components/VOverlay/VOverlay.css

@@ -1,65 +1,62 @@
-.v-overlay-container {
-  contain: layout;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  display: contents;
-}
-
-.v-overlay-scroll-blocked {
-  padding-inline-end: var(--v-scrollbar-offset);
-}
-.v-overlay-scroll-blocked:not(html) {
-  overflow-y: hidden !important;
-}
-html.v-overlay-scroll-blocked {
-  position: fixed;
-  top: var(--v-body-scroll-y);
-  left: var(--v-body-scroll-x);
-  width: 100%;
-  height: 100%;
-}
-
-.v-overlay {
-  --v-overlay-opacity: 0.32;
-  border-radius: inherit;
-  display: flex;
-  left: 0;
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.v-overlay__content {
-  outline: none;
-  position: absolute;
-  pointer-events: auto;
-  contain: layout;
-}
-
-.v-overlay__scrim {
-  pointer-events: auto;
-  background: #000;
-  border-radius: inherit;
-  bottom: 0;
-  left: 0;
-  opacity: var(--v-overlay-opacity);
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-
-.v-overlay--absolute {
-  position: absolute;
-}
-
-.v-overlay--contained .v-overlay__scrim {
-  position: absolute;
-}
-
-.v-overlay--scroll-blocked {
-  padding-inline-end: var(--v-scrollbar-offset);
+@layer vuetify.components {
+  .v-overlay-container {
+    contain: layout;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    display: contents;
+  }
+  .v-overlay {
+    --v-overlay-opacity: 0.32;
+    border-radius: inherit;
+    display: flex;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .v-overlay__content {
+    outline: none;
+    position: absolute;
+    pointer-events: auto;
+    contain: layout;
+  }
+  .v-overlay__scrim {
+    pointer-events: auto;
+    background: #000;
+    border-radius: inherit;
+    bottom: 0;
+    left: 0;
+    opacity: var(--v-overlay-opacity);
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+  .v-overlay--absolute {
+    position: absolute;
+  }
+  .v-overlay--contained .v-overlay__scrim {
+    position: absolute;
+  }
+  .v-overlay--scroll-blocked {
+    padding-inline-end: var(--v-scrollbar-offset);
+  }
+}
+@layer vuetify.trumps {
+  .v-overlay-scroll-blocked {
+    padding-inline-end: var(--v-scrollbar-offset);
+  }
+  .v-overlay-scroll-blocked:not(html) {
+    overflow-y: hidden;
+  }
+  html.v-overlay-scroll-blocked {
+    position: fixed;
+    top: var(--v-body-scroll-y);
+    left: var(--v-body-scroll-x);
+    width: 100%;
+    height: 100%;
+  }
 }

package/lib/components/VOverlay/VOverlay.sass

@@ -12,19 +12,6 @@
     top: 0
     display: contents
 
-  .v-overlay-scroll-blocked
-    padding-inline-end: var(--v-scrollbar-offset)
-
-    &:not(html)
-      overflow-y: hidden !important
-
-    @at-root #{selector.append(html, &)}
-      position: fixed
-      top: var(--v-body-scroll-y)
-      left: var(--v-body-scroll-x)
-      width: 100%
-      height: 100%
-
   .v-overlay
     --v-overlay-opacity: #{$overlay-opacity}
     border-radius: inherit
@@ -63,3 +50,17 @@
 
   .v-overlay--scroll-blocked
     padding-inline-end: var(--v-scrollbar-offset)
+
+@include tools.layer('trumps')
+  .v-overlay-scroll-blocked
+    padding-inline-end: var(--v-scrollbar-offset)
+
+    &:not(html)
+      overflow-y: hidden
+
+    @at-root #{selector.append(html, &)}
+      position: fixed
+      top: var(--v-body-scroll-y)
+      left: var(--v-body-scroll-x)
+      width: 100%
+      height: 100%

package/lib/components/VPagination/VPagination.css

@@ -1,9 +1,11 @@
-.v-pagination__list {
-  display: inline-flex;
-  list-style-type: none;
-  justify-content: center;
-  width: 100%;
-}
-.v-pagination__item, .v-pagination__first, .v-pagination__prev, .v-pagination__next, .v-pagination__last {
-  margin: 0.3rem;
+@layer vuetify.components {
+  .v-pagination__list {
+    display: inline-flex;
+    list-style-type: none;
+    justify-content: center;
+    width: 100%;
+  }
+  .v-pagination__item, .v-pagination__first, .v-pagination__prev, .v-pagination__next, .v-pagination__last {
+    margin: 0.3rem;
+  }
 }

package/lib/components/VParallax/VParallax.css

@@ -1,7 +1,9 @@
-.v-parallax {
-  position: relative;
-  overflow: hidden;
-}
-.v-parallax--active > .v-img__img {
-  will-change: transform;
+@layer vuetify.components {
+  .v-parallax {
+    position: relative;
+    overflow: hidden;
+  }
+  .v-parallax--active > .v-img__img {
+    will-change: transform;
+  }
 }

package/lib/components/VProgressCircular/VProgressCircular.css

@@ -1,103 +1,97 @@
-.v-progress-circular {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  position: relative;
-  vertical-align: middle;
-}
-.v-progress-circular > svg {
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 0;
-}
-
-.v-progress-circular__content {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.v-progress-circular__underlay {
-  color: rgba(var(--v-border-color), var(--v-border-opacity));
-  stroke: currentColor;
-  z-index: 1;
-}
-
-.v-progress-circular__overlay {
-  stroke: currentColor;
-  transition: all 0.2s ease-in-out, stroke-width 0s;
-  z-index: 2;
-}
-
-.v-progress-circular--size-x-small {
-  height: 16px;
-  width: 16px;
-}
-.v-progress-circular--size-small {
-  height: 24px;
-  width: 24px;
-}
-.v-progress-circular--size-default {
-  height: 32px;
-  width: 32px;
-}
-.v-progress-circular--size-large {
-  height: 48px;
-  width: 48px;
-}
-.v-progress-circular--size-x-large {
-  height: 64px;
-  width: 64px;
-}
-
-.v-progress-circular--indeterminate > svg {
-  animation: progress-circular-rotate 1.4s linear infinite;
-  transform-origin: center center;
-  transition: all 0.2s ease-in-out;
-}
-.v-progress-circular--indeterminate .v-progress-circular__overlay {
-  animation: progress-circular-dash 1.4s ease-in-out infinite, progress-circular-rotate 1.4s linear infinite;
-  stroke-dasharray: 25, 200;
-  stroke-dashoffset: 0;
-  stroke-linecap: round;
-  transform-origin: center center;
-  transform: rotate(-90deg);
-}
-
-.v-progress-circular--disable-shrink > svg {
-  animation-duration: 0.7s;
-}
-.v-progress-circular--disable-shrink .v-progress-circular__overlay {
-  animation: none;
-}
-
-.v-progress-circular--indeterminate:not(.v-progress-circular--visible) > svg,
-.v-progress-circular--indeterminate:not(.v-progress-circular--visible) .v-progress-circular__overlay {
-  animation-play-state: paused !important;
-}
-
-@keyframes progress-circular-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0px;
-  }
-  50% {
-    stroke-dasharray: 100, 200;
-    stroke-dashoffset: -15px;
-  }
-  100% {
-    stroke-dasharray: 100, 200;
-    stroke-dashoffset: -124px;
-  }
-}
-@keyframes progress-circular-rotate {
-  100% {
-    transform: rotate(270deg);
+@layer vuetify.components {
+  .v-progress-circular {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    position: relative;
+    vertical-align: middle;
+  }
+  .v-progress-circular > svg {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+  }
+  .v-progress-circular__content {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .v-progress-circular__underlay {
+    color: rgba(var(--v-border-color), var(--v-border-opacity));
+    stroke: currentColor;
+    z-index: 1;
+  }
+  .v-progress-circular__overlay {
+    stroke: currentColor;
+    transition: all 0.2s ease-in-out, stroke-width 0s;
+    z-index: 2;
+  }
+  .v-progress-circular--size-x-small {
+    height: 16px;
+    width: 16px;
+  }
+  .v-progress-circular--size-small {
+    height: 24px;
+    width: 24px;
+  }
+  .v-progress-circular--size-default {
+    height: 32px;
+    width: 32px;
+  }
+  .v-progress-circular--size-large {
+    height: 48px;
+    width: 48px;
+  }
+  .v-progress-circular--size-x-large {
+    height: 64px;
+    width: 64px;
+  }
+  .v-progress-circular--indeterminate > svg {
+    animation: progress-circular-rotate 1.4s linear infinite;
+    transform-origin: center center;
+    transition: all 0.2s ease-in-out;
+  }
+  .v-progress-circular--indeterminate .v-progress-circular__overlay {
+    animation: progress-circular-dash 1.4s ease-in-out infinite, progress-circular-rotate 1.4s linear infinite;
+    stroke-dasharray: 25, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    transform-origin: center center;
+    transform: rotate(-90deg);
+  }
+  .v-progress-circular--disable-shrink > svg {
+    animation-duration: 0.7s;
+  }
+  .v-progress-circular--disable-shrink .v-progress-circular__overlay {
+    animation: none;
+  }
+  .v-progress-circular--indeterminate:not(.v-progress-circular--visible) > svg,
+  .v-progress-circular--indeterminate:not(.v-progress-circular--visible) .v-progress-circular__overlay {
+    animation-play-state: paused !important;
+  }
+  @keyframes progress-circular-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0px;
+    }
+    50% {
+      stroke-dasharray: 100, 200;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+  @keyframes progress-circular-rotate {
+    100% {
+      transform: rotate(270deg);
+    }
   }
 }