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

package/lib/components/VField/VField.sass

@@ -8,16 +8,16 @@
 @include tools.layer('components')
   /* region INPUT */
   .v-field
-    align-items: center
-    display: flex
-    flex-direction: row
-    gap: $field-gap
+    display: grid
+    grid-template-areas: "prepend-inner field clear append-inner"
+    grid-template-columns: min-content minmax(0, 1fr) min-content min-content
     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,6 +163,7 @@
 
   .v-field__field
     flex: 1 0
+    grid-area: field
     position: relative
     align-items: flex-start
     display: flex
@@ -170,9 +171,14 @@
   /* 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,
@@ -220,6 +226,7 @@
     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,31 +1,29 @@
-@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%;
-  }
-  .v-file-input .v-input__details {
-    padding-inline: 16px;
-  }
-  .v-input--plain-underlined.v-file-input .v-input__details {
-    padding-inline: 0;
-  }
+.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%;
+}
+.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,39 +1,37 @@
-@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;
-  }
+.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;
 }