@vuetify/nightly 3.8.1-next.2025-04-18 → 3.8.2-dev.2025-04-17

package/lib/components/VOverlay/VOverlay.css

@@ -1,62 +1,65 @@
-@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: rgb(var(--v-theme-on-surface));
-    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%;
-  }
+.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);
 }

package/lib/components/VOverlay/VOverlay.sass

@@ -12,6 +12,19 @@
     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
@@ -50,17 +63,3 @@
 
   .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/VOverlay/_variables.scss

@@ -1,3 +1,3 @@
 // Defaults
 $overlay-opacity: 0.32 !default;
-$overlay-scrim-background: rgb(var(--v-theme-on-surface)) !default;
+$overlay-scrim-background: #000 !default;

package/lib/components/VPagination/VPagination.css

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

package/lib/components/VProgressCircular/VProgressCircular.css

@@ -1,97 +1,103 @@
-@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);
-    }
+.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);
   }
 }