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

package/lib/components/VTextField/VTextField.css

@@ -1,85 +1,77 @@
-/* region BLOCK */
-.v-text-field input {
-  color: inherit;
-  opacity: 0;
-  flex: 1;
-  transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
-  min-width: 0;
-}
-.v-text-field input:focus, .v-text-field input:active {
-  outline: none;
-}
-.v-text-field input:invalid {
-  box-shadow: none;
-}
-.v-text-field .v-field {
-  cursor: text;
-}
-.v-text-field--prefixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {
-  --v-field-padding-start: 6px;
-}
-
-.v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {
-  --v-field-padding-end: 0;
-}
-
-.v-text-field--prefixed.v-text-field .v-field.v-field--reverse .v-field__input {
-  --v-field-padding-end: 6px;
-}
-
-.v-text-field--suffixed.v-text-field .v-field.v-field--reverse .v-field__input {
-  --v-field-padding-start: 0;
-}
-
-.v-text-field .v-input__details {
-  padding-inline: 16px;
-}
-.v-input--plain-underlined.v-text-field .v-input__details {
-  padding-inline: 0;
-}
-
-.v-text-field .v-field--no-label input,
-.v-text-field .v-field--active input {
-  opacity: 1;
-}
-.v-text-field .v-field--single-line input {
-  transition: none;
-}
-
-/* endregion */
-/* region ELEMENTS */
-.v-text-field__prefix, .v-text-field__suffix {
-  align-items: center;
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  cursor: default;
-  display: flex;
-  opacity: 0;
-  transition: inherit;
-  white-space: nowrap;
-  min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
-  padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0));
-  padding-bottom: var(--v-field-padding-bottom, 6px);
-}
-.v-field--active .v-text-field__prefix, .v-field--active .v-text-field__suffix {
-  opacity: 1;
-}
-.v-field--disabled .v-text-field__prefix, .v-field--disabled .v-text-field__suffix {
-  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
-}
-.v-field:not(.v-field--reverse) .v-text-field__prefix {
-  padding-inline-start: var(--v-field-padding-start);
-}
-
-.v-field.v-field--reverse .v-text-field__prefix {
-  padding-inline-end: var(--v-field-padding-end);
-}
-
-.v-field:not(.v-field--reverse) .v-text-field__suffix {
-  padding-inline-end: var(--v-field-padding-end);
-}
-
-.v-field.v-field--reverse .v-text-field__suffix {
-  padding-inline-start: var(--v-field-padding-start);
-}
-
-/* endregion */
+@layer vuetify.components {
+  /* region BLOCK */
+  .v-text-field input {
+    color: inherit;
+    opacity: 0;
+    flex: 1;
+    transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+    min-width: 0;
+  }
+  .v-text-field input:focus, .v-text-field input:active {
+    outline: none;
+  }
+  .v-text-field input:invalid {
+    box-shadow: none;
+  }
+  .v-text-field .v-field {
+    cursor: text;
+  }
+  .v-text-field--prefixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {
+    --v-field-padding-start: 6px;
+  }
+  .v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {
+    --v-field-padding-end: 0;
+  }
+  .v-text-field--prefixed.v-text-field .v-field.v-field--reverse .v-field__input {
+    --v-field-padding-end: 6px;
+  }
+  .v-text-field--suffixed.v-text-field .v-field.v-field--reverse .v-field__input {
+    --v-field-padding-start: 0;
+  }
+  .v-text-field .v-input__details {
+    padding-inline: 16px;
+  }
+  .v-input--plain-underlined.v-text-field .v-input__details {
+    padding-inline: 0;
+  }
+  .v-text-field .v-field--no-label input,
+  .v-text-field .v-field--active input {
+    opacity: 1;
+  }
+  .v-text-field .v-field--single-line input {
+    transition: none;
+  }
+  /* endregion */
+  /* region ELEMENTS */
+  .v-text-field__prefix, .v-text-field__suffix {
+    align-items: center;
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    cursor: default;
+    display: flex;
+    opacity: 0;
+    transition: inherit;
+    white-space: nowrap;
+    min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
+    padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0));
+    padding-bottom: var(--v-field-padding-bottom, 6px);
+  }
+  .v-field--active .v-text-field__prefix, .v-field--active .v-text-field__suffix {
+    opacity: 1;
+  }
+  .v-field--disabled .v-text-field__prefix, .v-field--disabled .v-text-field__suffix {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  }
+  .v-field:not(.v-field--reverse) .v-text-field__prefix {
+    padding-inline-start: var(--v-field-padding-start);
+  }
+  .v-field.v-field--reverse .v-text-field__prefix {
+    padding-inline-end: var(--v-field-padding-end);
+  }
+  .v-field:not(.v-field--reverse) .v-text-field__suffix {
+    padding-inline-end: var(--v-field-padding-end);
+  }
+  .v-field.v-field--reverse .v-text-field__suffix {
+    padding-inline-start: var(--v-field-padding-start);
+  }
+  /* endregion */
+}

package/lib/components/VTextarea/VTextarea.css

@@ -1,41 +1,49 @@
-.v-textarea .v-field {
-  --v-textarea-control-height: var(--v-input-control-height);
-}
-.v-textarea .v-field__field {
-  --v-input-control-height: var(--v-textarea-control-height);
-}
-.v-textarea .v-field__input {
-  flex: 1 1 auto;
-  outline: none;
-  -webkit-mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
-  mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
-}
-.v-textarea .v-field__input.v-textarea__sizer {
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 0 !important;
-  min-height: 0 !important;
-  pointer-events: none;
-}
-.v-textarea--no-resize .v-field__input {
-  resize: none;
-}
-.v-textarea .v-field--no-label textarea,
-.v-textarea .v-field--active textarea {
-  opacity: 1;
-}
-.v-textarea textarea {
-  opacity: 0;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-textarea textarea:focus, .v-textarea textarea:active {
-  outline: none;
-}
-.v-textarea textarea:invalid {
-  box-shadow: none;
+@layer vuetify.components {
+  .v-textarea .v-field {
+    --v-textarea-control-height: var(--v-input-control-height);
+  }
+  .v-textarea .v-field__field {
+    --v-input-control-height: var(--v-textarea-control-height);
+  }
+  .v-textarea .v-field__input {
+    flex: 1 1 auto;
+    outline: none;
+    -webkit-mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
+    mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) - 6px), black calc(var(--v-field-padding-top, 0) + var(--v-input-padding-top, 0) + 4px));
+  }
+  .v-textarea .v-field__input.v-textarea__sizer {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+}
+@layer vuetify.overrides {
+  .v-textarea .v-field__input.v-textarea__sizer {
+    height: 0;
+    min-height: 0;
+  }
+}
+@layer vuetify.components {
+  .v-textarea--no-resize .v-field__input {
+    resize: none;
+  }
+  .v-textarea .v-field--no-label textarea,
+  .v-textarea .v-field--active textarea {
+    opacity: 1;
+  }
+  .v-textarea textarea {
+    opacity: 0;
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .v-textarea textarea:focus, .v-textarea textarea:active {
+    outline: none;
+  }
+  .v-textarea textarea:invalid {
+    box-shadow: none;
+  }
 }

package/lib/components/VTextarea/VTextarea.sass

@@ -26,10 +26,12 @@
         position: absolute
         top: 0
         left: 0
-        height: 0 !important
-        min-height: 0 !important
         pointer-events: none
 
+        @include tools.layer('overrides')
+          height: 0
+          min-height: 0
+
     &--no-resize
       .v-field__input
         resize: none

package/lib/components/VThemeProvider/VThemeProvider.css

@@ -1,4 +1,6 @@
-.v-theme-provider {
-  background: rgb(var(--v-theme-background));
-  color: rgb(var(--v-theme-on-background));
+@layer vuetify.components {
+  .v-theme-provider {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-on-background));
+  }
 }

package/lib/components/VTimePicker/VTimePicker.css

@@ -1,3 +1,5 @@
-.v-time-picker.v-picker {
-  min-width: 328px;
+@layer vuetify.components {
+  .v-time-picker.v-picker {
+    min-width: 328px;
+  }
 }

package/lib/components/VTimePicker/VTimePickerClock.css

@@ -1,131 +1,128 @@
-.v-time-picker-clock {
-  background: rgb(var(--v-theme-background));
-  color: rgb(var(--v-theme-on-background));
-}
-.v-time-picker-clock:after {
-  color: rgb(var(--v-theme-primary));
-}
-.v-time-picker-clock .v-time-picker-clock__item--active {
-  background-color: rgb(var(--v-theme-surface-variant));
-  color: rgb(var(--v-theme-on-surface-variant));
-}
-
-.v-time-picker-clock {
-  margin: 24px;
-  margin-top: 18px;
-  background: rgb(var(--v-theme-surface-light));
-  border-radius: 50%;
-  position: relative;
-  transition: none;
-  user-select: none;
-  max-width: 256px;
-  aspect-ratio: 1;
-  flex: 100%;
-}
-.v-time-picker-clock__container {
-  display: flex;
-  flex-direction: column;
-  flex-basis: 290px;
-  justify-content: center;
-  padding: 10px;
-}
-.v-time-picker-clock__hand {
-  background-color: currentColor;
-  height: calc(50% - 4px);
-  width: 2px;
-  bottom: 50%;
-  left: calc(50% - 1px);
-  transform-origin: center bottom;
-  position: absolute;
-  will-change: transform;
-  z-index: 1;
-}
-.v-time-picker-clock__hand:before {
-  background: transparent;
-  border-width: 2px;
-  border-style: solid;
-  border-color: currentColor;
-  border-radius: 100%;
-  width: 10px;
-  height: 10px;
-  content: "";
-  position: absolute;
-  top: -4px;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.v-time-picker-clock__hand:after {
-  content: "";
-  position: absolute;
-  height: 8px;
-  width: 8px;
-  top: 100%;
-  left: 50%;
-  border-radius: 100%;
-  background-color: currentColor;
-  transform: translate(-50%, -50%);
-}
-.v-time-picker-clock__hand--inner:after {
-  height: 14px;
-}
-.v-time-picker-clock--readonly {
-  pointer-events: none;
-}
-.v-time-picker-clock .v-time-picker-clock__item--disabled {
-  opacity: var(--v-disabled-opacity);
-}
-
-.v-picker--full-width .v-time-picker-clock__container {
-  max-width: 290px;
-}
-
-.v-time-picker-clock__inner {
-  position: absolute;
-  bottom: 27px;
-  left: 27px;
-  right: 27px;
-  top: 27px;
-}
-
-.v-time-picker-clock__item {
-  align-items: center;
-  border-radius: 100%;
-  cursor: default;
-  display: flex;
-  font-size: 16px;
-  justify-content: center;
-  height: 40px;
-  position: absolute;
-  text-align: center;
-  width: 40px;
-  user-select: none;
-  transform: translate(-50%, -50%);
-}
-.v-time-picker-clock__item > span {
-  z-index: 1;
-}
-.v-time-picker-clock__item:before, .v-time-picker-clock__item:after {
-  content: "";
-  border-radius: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 14px;
-  width: 14px;
-  transform: translate(-50%, -50%);
-}
-.v-time-picker-clock__item:after, .v-time-picker-clock__item:before {
-  height: 40px;
-  width: 40px;
-}
-.v-time-picker-clock__item--active {
-  cursor: default;
-  z-index: 2;
-}
-.v-time-picker-clock__item--disabled {
-  pointer-events: none;
-}
-
-.v-picker--landscape .v-time-picker-clock__container {
-  flex-direction: row;
+@layer vuetify.components {
+  .v-time-picker-clock {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-on-background));
+  }
+  .v-time-picker-clock:after {
+    color: rgb(var(--v-theme-primary));
+  }
+  .v-time-picker-clock .v-time-picker-clock__item--active {
+    background-color: rgb(var(--v-theme-surface-variant));
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  .v-time-picker-clock {
+    margin: 24px;
+    margin-top: 18px;
+    background: rgb(var(--v-theme-surface-light));
+    border-radius: 50%;
+    position: relative;
+    transition: none;
+    user-select: none;
+    max-width: 256px;
+    aspect-ratio: 1;
+    flex: 100%;
+  }
+  .v-time-picker-clock__container {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 290px;
+    justify-content: center;
+    padding: 10px;
+  }
+  .v-time-picker-clock__hand {
+    background-color: currentColor;
+    height: calc(50% - 4px);
+    width: 2px;
+    bottom: 50%;
+    left: calc(50% - 1px);
+    transform-origin: center bottom;
+    position: absolute;
+    will-change: transform;
+    z-index: 1;
+  }
+  .v-time-picker-clock__hand:before {
+    background: transparent;
+    border-width: 2px;
+    border-style: solid;
+    border-color: currentColor;
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    content: "";
+    position: absolute;
+    top: -4px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .v-time-picker-clock__hand:after {
+    content: "";
+    position: absolute;
+    height: 8px;
+    width: 8px;
+    top: 100%;
+    left: 50%;
+    border-radius: 100%;
+    background-color: currentColor;
+    transform: translate(-50%, -50%);
+  }
+  .v-time-picker-clock__hand--inner:after {
+    height: 14px;
+  }
+  .v-time-picker-clock--readonly {
+    pointer-events: none;
+  }
+  .v-time-picker-clock .v-time-picker-clock__item--disabled {
+    opacity: var(--v-disabled-opacity);
+  }
+  .v-picker--full-width .v-time-picker-clock__container {
+    max-width: 290px;
+  }
+  .v-time-picker-clock__inner {
+    position: absolute;
+    bottom: 27px;
+    left: 27px;
+    right: 27px;
+    top: 27px;
+  }
+  .v-time-picker-clock__item {
+    align-items: center;
+    border-radius: 100%;
+    cursor: default;
+    display: flex;
+    font-size: 16px;
+    justify-content: center;
+    height: 40px;
+    position: absolute;
+    text-align: center;
+    width: 40px;
+    user-select: none;
+    transform: translate(-50%, -50%);
+  }
+  .v-time-picker-clock__item > span {
+    z-index: 1;
+  }
+  .v-time-picker-clock__item:before, .v-time-picker-clock__item:after {
+    content: "";
+    border-radius: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 14px;
+    width: 14px;
+    transform: translate(-50%, -50%);
+  }
+  .v-time-picker-clock__item:after, .v-time-picker-clock__item:before {
+    height: 40px;
+    width: 40px;
+  }
+  .v-time-picker-clock__item--active {
+    cursor: default;
+    z-index: 2;
+  }
+  .v-time-picker-clock__item--disabled {
+    pointer-events: none;
+  }
+  .v-picker--landscape .v-time-picker-clock__container {
+    flex-direction: row;
+  }
 }