@vuetify/nightly 3.7.4-next.2024-11-06 → 3.7.5-dev.2024-12-16

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);
   }
 }

package/lib/components/VProgressLinear/VProgressLinear.css

@@ -1,216 +1,229 @@
-@layer vuetify.components {
+.v-progress-linear {
+  background: transparent;
+  overflow: hidden;
+  position: relative;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+}
+.v-progress-linear--rounded {
+  border-radius: 9999px;
+}
+@media (forced-colors: active) {
   .v-progress-linear {
-    background: transparent;
-    overflow: hidden;
-    position: relative;
-    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    width: 100%;
-  }
-  .v-progress-linear--rounded {
-    border-radius: 9999px;
-  }
-  @media (forced-colors: active) {
-    .v-progress-linear {
-      border: thin solid buttontext;
-    }
-  }
-  .v-progress-linear__background,
+    border: thin solid buttontext;
+  }
+}
+
+.v-progress-linear__background,
+.v-progress-linear__buffer {
+  background: currentColor;
+  bottom: 0;
+  left: 0;
+  opacity: var(--v-border-opacity);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  transition-property: width, left, right;
+  transition: inherit;
+}
+
+@media (forced-colors: active) {
   .v-progress-linear__buffer {
-    background: currentColor;
-    bottom: 0;
-    left: 0;
-    opacity: var(--v-border-opacity);
-    position: absolute;
-    top: 0;
-    width: 100%;
-    transition-property: width, left, right;
-    transition: inherit;
-  }
-  @media (forced-colors: active) {
-    .v-progress-linear__buffer {
-      background-color: highlight;
-      opacity: 0.3;
-    }
-  }
-  .v-progress-linear__content {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
+    background-color: highlight;
+    opacity: 0.3;
   }
+}
+.v-progress-linear__content {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.v-progress-linear__determinate,
+.v-progress-linear__indeterminate {
+  background: currentColor;
+}
+@media (forced-colors: active) {
   .v-progress-linear__determinate,
   .v-progress-linear__indeterminate {
-    background: currentColor;
-  }
-  @media (forced-colors: active) {
-    .v-progress-linear__determinate,
-    .v-progress-linear__indeterminate {
-      background-color: highlight;
-    }
-  }
-  .v-progress-linear__determinate {
-    height: inherit;
-    left: 0;
-    position: absolute;
-    transition: inherit;
-    transition-property: width, left, right;
-  }
-  .v-progress-linear__indeterminate .long, .v-progress-linear__indeterminate .short {
-    animation-play-state: paused;
-    animation-duration: 2.2s;
-    animation-iteration-count: infinite;
-    bottom: 0;
-    height: inherit;
-    left: 0;
-    position: absolute;
-    right: auto;
-    top: 0;
-    width: auto;
-  }
-  .v-progress-linear__indeterminate .long {
-    animation-name: indeterminate-ltr;
-  }
-  .v-progress-linear__indeterminate .short {
-    animation-name: indeterminate-short-ltr;
-  }
-  .v-progress-linear__stream {
-    animation: stream 0.25s infinite linear;
-    animation-play-state: paused;
-    bottom: 0;
-    left: auto;
-    opacity: 0.3;
-    pointer-events: none;
-    position: absolute;
-    transition: inherit;
-    transition-property: width, left, right;
-  }
-  .v-progress-linear--reverse .v-progress-linear__background,
-  .v-progress-linear--reverse .v-progress-linear__determinate,
-  .v-progress-linear--reverse .v-progress-linear__content {
-    left: auto;
-    right: 0;
-  }
-  .v-progress-linear--reverse .v-progress-linear__indeterminate .long, .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
-    left: auto;
-    right: 0;
-  }
-  .v-progress-linear--reverse .v-progress-linear__indeterminate .long {
-    animation-name: indeterminate-rtl;
-  }
-  .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
-    animation-name: indeterminate-short-rtl;
-  }
-  .v-progress-linear--reverse .v-progress-linear__stream {
-    right: auto;
-  }
-  .v-progress-linear--absolute,
-  .v-progress-linear--fixed {
-    left: 0;
-    z-index: 1;
-  }
-  .v-progress-linear--absolute {
-    position: absolute;
-  }
-  .v-progress-linear--fixed {
-    position: fixed;
-  }
-  .v-progress-linear--rounded {
-    border-radius: 9999px;
-  }
-  .v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__determinate,
-  .v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__indeterminate {
-    border-radius: inherit;
-  }
-  .v-progress-linear--striped .v-progress-linear__determinate {
-    animation: progress-linear-stripes 1s infinite linear;
-    background-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.25) 0, hsla(0, 0%, 100%, 0.25) 75%, transparent 0, transparent);
-    background-repeat: repeat;
-    background-size: var(--v-progress-linear-height);
-  }
-  .v-progress-linear--active .v-progress-linear__indeterminate .long, .v-progress-linear--active .v-progress-linear__indeterminate .short {
-    animation-play-state: running;
-  }
-  .v-progress-linear--active .v-progress-linear__stream {
-    animation-play-state: running;
-  }
-  .v-progress-linear--rounded-bar .v-progress-linear__determinate,
-  .v-progress-linear--rounded-bar .v-progress-linear__indeterminate,
-  .v-progress-linear--rounded-bar .v-progress-linear__stream + .v-progress-linear__background {
-    border-radius: 9999px;
-  }
-  .v-progress-linear--rounded-bar .v-progress-linear__determinate {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-  @keyframes indeterminate-ltr {
-    0% {
-      left: -90%;
-      right: 100%;
-    }
-    60% {
-      left: -90%;
-      right: 100%;
-    }
-    100% {
-      left: 100%;
-      right: -35%;
-    }
-  }
-  @keyframes indeterminate-rtl {
-    0% {
-      left: 100%;
-      right: -90%;
-    }
-    60% {
-      left: 100%;
-      right: -90%;
-    }
-    100% {
-      left: -35%;
-      right: 100%;
-    }
-  }
-  @keyframes indeterminate-short-ltr {
-    0% {
-      left: -200%;
-      right: 100%;
-    }
-    60% {
-      left: 107%;
-      right: -8%;
-    }
-    100% {
-      left: 107%;
-      right: -8%;
-    }
-  }
-  @keyframes indeterminate-short-rtl {
-    0% {
-      left: 100%;
-      right: -200%;
-    }
-    60% {
-      left: -8%;
-      right: 107%;
-    }
-    100% {
-      left: -8%;
-      right: 107%;
-    }
-  }
-  @keyframes stream {
-    to {
-      transform: translateX(var(--v-progress-linear-stream-to));
-    }
-  }
-  @keyframes progress-linear-stripes {
-    0% {
-      background-position-x: var(--v-progress-linear-height);
-    }
+    background-color: highlight;
+  }
+}
+
+.v-progress-linear__determinate {
+  height: inherit;
+  left: 0;
+  position: absolute;
+  transition: inherit;
+  transition-property: width, left, right;
+}
+
+.v-progress-linear__indeterminate .long, .v-progress-linear__indeterminate .short {
+  animation-play-state: paused;
+  animation-duration: 2.2s;
+  animation-iteration-count: infinite;
+  bottom: 0;
+  height: inherit;
+  left: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+  width: auto;
+}
+.v-progress-linear__indeterminate .long {
+  animation-name: indeterminate-ltr;
+}
+.v-progress-linear__indeterminate .short {
+  animation-name: indeterminate-short-ltr;
+}
+
+.v-progress-linear__stream {
+  animation: stream 0.25s infinite linear;
+  animation-play-state: paused;
+  bottom: 0;
+  left: auto;
+  opacity: 0.3;
+  pointer-events: none;
+  position: absolute;
+  transition: inherit;
+  transition-property: width, left, right;
+}
+
+.v-progress-linear--reverse .v-progress-linear__background,
+.v-progress-linear--reverse .v-progress-linear__determinate,
+.v-progress-linear--reverse .v-progress-linear__content {
+  left: auto;
+  right: 0;
+}
+.v-progress-linear--reverse .v-progress-linear__indeterminate .long, .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
+  left: auto;
+  right: 0;
+}
+.v-progress-linear--reverse .v-progress-linear__indeterminate .long {
+  animation-name: indeterminate-rtl;
+}
+.v-progress-linear--reverse .v-progress-linear__indeterminate .short {
+  animation-name: indeterminate-short-rtl;
+}
+.v-progress-linear--reverse .v-progress-linear__stream {
+  right: auto;
+}
+
+.v-progress-linear--absolute,
+.v-progress-linear--fixed {
+  left: 0;
+  z-index: 1;
+}
+
+.v-progress-linear--absolute {
+  position: absolute;
+}
+
+.v-progress-linear--fixed {
+  position: fixed;
+}
+
+.v-progress-linear--rounded {
+  border-radius: 9999px;
+}
+.v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__determinate,
+.v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__indeterminate {
+  border-radius: inherit;
+}
+
+.v-progress-linear--striped .v-progress-linear__determinate {
+  animation: progress-linear-stripes 1s infinite linear;
+  background-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.25) 0, hsla(0, 0%, 100%, 0.25) 75%, transparent 0, transparent);
+  background-repeat: repeat;
+  background-size: var(--v-progress-linear-height);
+}
+
+.v-progress-linear--active .v-progress-linear__indeterminate .long, .v-progress-linear--active .v-progress-linear__indeterminate .short {
+  animation-play-state: running;
+}
+.v-progress-linear--active .v-progress-linear__stream {
+  animation-play-state: running;
+}
+
+.v-progress-linear--rounded-bar .v-progress-linear__determinate,
+.v-progress-linear--rounded-bar .v-progress-linear__indeterminate,
+.v-progress-linear--rounded-bar .v-progress-linear__stream + .v-progress-linear__background {
+  border-radius: 9999px;
+}
+.v-progress-linear--rounded-bar .v-progress-linear__determinate {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+@keyframes indeterminate-ltr {
+  0% {
+    left: -90%;
+    right: 100%;
+  }
+  60% {
+    left: -90%;
+    right: 100%;
+  }
+  100% {
+    left: 100%;
+    right: -35%;
+  }
+}
+@keyframes indeterminate-rtl {
+  0% {
+    left: 100%;
+    right: -90%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: -35%;
+    right: 100%;
+  }
+}
+@keyframes indeterminate-short-ltr {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes indeterminate-short-rtl {
+  0% {
+    left: 100%;
+    right: -200%;
+  }
+  60% {
+    left: -8%;
+    right: 107%;
+  }
+  100% {
+    left: -8%;
+    right: 107%;
+  }
+}
+@keyframes stream {
+  to {
+    transform: translateX(var(--v-progress-linear-stream-to));
+  }
+}
+@keyframes progress-linear-stripes {
+  0% {
+    background-position-x: var(--v-progress-linear-height);
   }
 }

package/lib/components/VRadioGroup/VRadioGroup.css

@@ -1,15 +1,13 @@
-@layer vuetify.components {
-  .v-radio-group > .v-input__control {
-    flex-direction: column;
-  }
-  .v-radio-group > .v-input__control > .v-label {
-    margin-inline-start: 16px;
-  }
-  .v-radio-group > .v-input__control > .v-label + .v-selection-control-group {
-    padding-inline-start: 6px;
-    margin-top: 8px;
-  }
-  .v-radio-group .v-input__details {
-    padding-inline: 16px;
-  }
+.v-radio-group > .v-input__control {
+  flex-direction: column;
+}
+.v-radio-group > .v-input__control > .v-label {
+  margin-inline-start: 16px;
+}
+.v-radio-group > .v-input__control > .v-label + .v-selection-control-group {
+  padding-inline-start: 6px;
+  margin-top: 8px;
+}
+.v-radio-group .v-input__details {
+  padding-inline: 16px;
 }