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

package/lib/components/VField/VField.sass

@@ -8,16 +8,16 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
-    display: grid
-    grid-template-areas: "prepend-inner field clear append-inner"
-    grid-template-columns: min-content minmax(0, 1fr) min-content min-content
+    align-items: center
+    display: flex
+    flex-direction: row
+    gap: $field-gap
     font-size: $field-font-size
     letter-spacing: $field-letter-spacing
     max-width: $field-max-width
     border-radius: $field-border-radius
     contain: layout
     flex: 1 0
-    grid-area: control
     position: relative
 
     --v-theme-overlay-multiplier: 1
@@ -163,7 +163,6 @@
 
   .v-field__field
     flex: 1 0
-    grid-area: field
     position: relative
     align-items: flex-start
     display: flex
@@ -171,14 +170,9 @@
   /* endregion */
   /* region AFFIXES */
   .v-field__prepend-inner
-    grid-area: prepend-inner
     padding-inline-end: var(--v-field-padding-after)
 
-  .v-field__clearable
-    grid-area: clear
-
   .v-field__append-inner
-    grid-area: append-inner
     padding-inline-start: var(--v-field-padding-after)
 
   .v-field__append-inner,
@@ -226,7 +220,6 @@
     cursor: pointer
     opacity: 0
     overflow: hidden
-    margin-inline: $field-clearable-margin
     transition: $field-transition-timing
     transition-property: opacity, transform, width
 

package/lib/components/VField/_variables.scss

@@ -15,9 +15,9 @@ $field-max-width: 100% !default;
 $field-transition-timing: .15s settings.$standard-easing !default;
 $field-subtle-transition-timing: 250ms settings.$standard-easing !default;
 $field-underlined-margin-bottom: 4px !default;
-$field-clearable-margin: 4px !default;
 $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing !default;
 $field-chip-height: 24px !default;
+$field-gap: 6px !default;
 
 // CONTROL
 $field-control-solo-background: rgb(var(--v-theme-surface)) !default;

package/lib/components/VFileInput/VFileInput.css

@@ -1,33 +1,35 @@
-.v-file-input--hide.v-input .v-field,
-.v-file-input--hide.v-input .v-input__control,
-.v-file-input--hide.v-input .v-input__details {
-  display: none;
-}
-.v-file-input--hide.v-input .v-input__prepend {
-  grid-area: control;
-  margin: 0 auto;
-}
-.v-file-input--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
-.v-file-input--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
-.v-file-input--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
-.v-file-input--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
-  top: 0px;
-}
-.v-file-input input[type=file] {
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 0;
-}
-.v-file-input--dragging input[type=file] {
-  z-index: 1;
-}
-.v-file-input .v-input__details {
-  padding-inline: 16px;
-}
-.v-input--plain-underlined.v-file-input .v-input__details {
-  padding-inline: 0;
+@layer vuetify.components {
+  .v-file-input--hide.v-input .v-field,
+  .v-file-input--hide.v-input .v-input__control,
+  .v-file-input--hide.v-input .v-input__details {
+    display: none;
+  }
+  .v-file-input--hide.v-input .v-input__prepend {
+    grid-area: control;
+    margin: 0 auto;
+  }
+  .v-file-input--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
+  .v-file-input--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
+  .v-file-input--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
+  .v-file-input--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
+    top: 0px;
+  }
+  .v-file-input input[type=file] {
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+  }
+  .v-file-input--dragging input[type=file] {
+    z-index: 1;
+  }
+  .v-file-input .v-input__details {
+    padding-inline: 16px;
+  }
+  .v-input--plain-underlined.v-file-input .v-input__details {
+    padding-inline: 0;
+  }
 }

package/lib/components/VFooter/VFooter.css

@@ -1,37 +1,39 @@
-.v-footer {
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-  padding: 8px 16px;
-  position: relative;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: height, width, transform, max-width, left, right, top, bottom;
-}
-.v-footer {
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-  border-style: solid;
-  border-width: 0;
-}
-.v-footer--border {
-  border-width: thin;
-  box-shadow: none;
-}
-.v-footer {
-  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-footer--absolute {
-  position: absolute;
-}
-.v-footer--fixed {
-  position: fixed;
-}
-.v-footer {
-  border-radius: 0;
-}
-.v-footer {
-  background: rgb(var(--v-theme-surface));
-  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-}
-.v-footer--rounded {
-  border-radius: 4px;
+@layer vuetify.components {
+  .v-footer {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    padding: 8px 16px;
+    position: relative;
+    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: height, width, transform, max-width, left, right, top, bottom;
+  }
+  .v-footer {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    border-style: solid;
+    border-width: 0;
+  }
+  .v-footer--border {
+    border-width: thin;
+    box-shadow: none;
+  }
+  .v-footer {
+    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-footer--absolute {
+    position: absolute;
+  }
+  .v-footer--fixed {
+    position: fixed;
+  }
+  .v-footer {
+    border-radius: 0;
+  }
+  .v-footer {
+    background: rgb(var(--v-theme-surface));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+  .v-footer--rounded {
+    border-radius: 4px;
+  }
 }