vuetify 3.3.3 → 3.3.4

package/lib/components/VChip/VChip.css

@@ -17,162 +17,162 @@
 }
 .v-chip.v-chip--size-x-small {
   --v-chip-size: 0.625rem;
-  --v-chip-height: 20px;
+  --v-chip-height: 18px;
   font-size: 0.625rem;
-  padding: 0 8px;
+  padding: 0 7px;
 }
 .v-chip.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 14px;
+  --v-avatar-height: 12px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 20px;
+  --v-avatar-height: 18px;
 }
 
 .v-chip.v-chip--size-x-small .v-avatar--start {
-  margin-inline-start: -5.6px;
-  margin-inline-end: 4px;
+  margin-inline-start: -4.9px;
+  margin-inline-end: 3.5px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--start {
-  margin-inline-start: -8px;
+  margin-inline-start: -7px;
 }
 
 .v-chip.v-chip--size-x-small .v-avatar--end {
-  margin-inline-start: 4px;
-  margin-inline-end: -5.6px;
+  margin-inline-start: 3.5px;
+  margin-inline-end: -4.9px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end {
-  margin-inline-end: -8px;
+  margin-inline-end: -7px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close {
-  margin-inline-start: 12px;
+  margin-inline-start: 10.5px;
 }
 
 .v-chip.v-chip--size-x-small .v-icon--start,
 .v-chip.v-chip--size-x-small .v-chip__filter {
-  margin-inline-start: -4px;
-  margin-inline-end: 4px;
+  margin-inline-start: -3.5px;
+  margin-inline-end: 3.5px;
 }
 .v-chip.v-chip--size-x-small .v-icon--end,
 .v-chip.v-chip--size-x-small .v-chip__close {
-  margin-inline-start: 4px;
-  margin-inline-end: -4px;
+  margin-inline-start: 3.5px;
+  margin-inline-end: -3.5px;
 }
 .v-chip.v-chip--size-x-small .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-x-small .v-chip__append + .v-chip__close {
-  margin-inline-start: 8px;
+  margin-inline-start: 7px;
 }
 
 .v-chip.v-chip--size-small {
   --v-chip-size: 0.75rem;
-  --v-chip-height: 26px;
+  --v-chip-height: 24px;
   font-size: 0.75rem;
-  padding: 0 10px;
+  padding: 0 9px;
 }
 .v-chip.v-chip--size-small .v-avatar {
-  --v-avatar-height: 20px;
+  --v-avatar-height: 18px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar {
-  --v-avatar-height: 26px;
+  --v-avatar-height: 24px;
 }
 
 .v-chip.v-chip--size-small .v-avatar--start {
-  margin-inline-start: -7px;
-  margin-inline-end: 5px;
+  margin-inline-start: -6.3px;
+  margin-inline-end: 4.5px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--start {
-  margin-inline-start: -10px;
+  margin-inline-start: -9px;
 }
 
 .v-chip.v-chip--size-small .v-avatar--end {
-  margin-inline-start: 5px;
-  margin-inline-end: -7px;
+  margin-inline-start: 4.5px;
+  margin-inline-end: -6.3px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--end {
-  margin-inline-end: -10px;
+  margin-inline-end: -9px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--end + .v-chip__close {
-  margin-inline-start: 15px;
+  margin-inline-start: 13.5px;
 }
 
 .v-chip.v-chip--size-small .v-icon--start,
 .v-chip.v-chip--size-small .v-chip__filter {
-  margin-inline-start: -5px;
-  margin-inline-end: 5px;
+  margin-inline-start: -4.5px;
+  margin-inline-end: 4.5px;
 }
 .v-chip.v-chip--size-small .v-icon--end,
 .v-chip.v-chip--size-small .v-chip__close {
-  margin-inline-start: 5px;
-  margin-inline-end: -5px;
+  margin-inline-start: 4.5px;
+  margin-inline-end: -4.5px;
 }
 .v-chip.v-chip--size-small .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-small .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-small .v-chip__append + .v-chip__close {
-  margin-inline-start: 10px;
+  margin-inline-start: 9px;
 }
 
 .v-chip.v-chip--size-default {
   --v-chip-size: 0.875rem;
-  --v-chip-height: 32px;
+  --v-chip-height: 30px;
   font-size: 0.875rem;
-  padding: 0 12px;
+  padding: 0 11px;
 }
 .v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 26px;
+  --v-avatar-height: 24px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 32px;
+  --v-avatar-height: 30px;
 }
 
 .v-chip.v-chip--size-default .v-avatar--start {
-  margin-inline-start: -8.4px;
-  margin-inline-end: 6px;
+  margin-inline-start: -7.7px;
+  margin-inline-end: 5.5px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--start {
-  margin-inline-start: -12px;
+  margin-inline-start: -11px;
 }
 
 .v-chip.v-chip--size-default .v-avatar--end {
-  margin-inline-start: 6px;
-  margin-inline-end: -8.4px;
+  margin-inline-start: 5.5px;
+  margin-inline-end: -7.7px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--end {
-  margin-inline-end: -12px;
+  margin-inline-end: -11px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--end + .v-chip__close {
-  margin-inline-start: 18px;
+  margin-inline-start: 16.5px;
 }
 
 .v-chip.v-chip--size-default .v-icon--start,
 .v-chip.v-chip--size-default .v-chip__filter {
-  margin-inline-start: -6px;
-  margin-inline-end: 6px;
+  margin-inline-start: -5.5px;
+  margin-inline-end: 5.5px;
 }
 .v-chip.v-chip--size-default .v-icon--end,
 .v-chip.v-chip--size-default .v-chip__close {
-  margin-inline-start: 6px;
-  margin-inline-end: -6px;
+  margin-inline-start: 5.5px;
+  margin-inline-end: -5.5px;
 }
 .v-chip.v-chip--size-default .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-default .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-default .v-chip__append + .v-chip__close {
-  margin-inline-start: 12px;
+  margin-inline-start: 11px;
 }
 
 .v-chip.v-chip--size-large {
   --v-chip-size: 1rem;
-  --v-chip-height: 38px;
+  --v-chip-height: 36px;
   font-size: 1rem;
   padding: 0 14px;
 }
 .v-chip.v-chip--size-large .v-avatar {
-  --v-avatar-height: 32px;
+  --v-avatar-height: 30px;
 }
 .v-chip--pill.v-chip.v-chip--size-large .v-avatar {
-  --v-avatar-height: 38px;
+  --v-avatar-height: 36px;
 }
 
 .v-chip.v-chip--size-large .v-avatar--start {
@@ -213,51 +213,51 @@
 
 .v-chip.v-chip--size-x-large {
   --v-chip-size: 1.125rem;
-  --v-chip-height: 44px;
+  --v-chip-height: 42px;
   font-size: 1.125rem;
-  padding: 0 17px;
+  padding: 0 16px;
 }
 .v-chip.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 38px;
+  --v-avatar-height: 36px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 44px;
+  --v-avatar-height: 42px;
 }
 
 .v-chip.v-chip--size-x-large .v-avatar--start {
-  margin-inline-start: -11.9px;
-  margin-inline-end: 8.5px;
+  margin-inline-start: -11.2px;
+  margin-inline-end: 8px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--start {
-  margin-inline-start: -17px;
+  margin-inline-start: -16px;
 }
 
 .v-chip.v-chip--size-x-large .v-avatar--end {
-  margin-inline-start: 8.5px;
-  margin-inline-end: -11.9px;
+  margin-inline-start: 8px;
+  margin-inline-end: -11.2px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end {
-  margin-inline-end: -17px;
+  margin-inline-end: -16px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close {
-  margin-inline-start: 25.5px;
+  margin-inline-start: 24px;
 }
 
 .v-chip.v-chip--size-x-large .v-icon--start,
 .v-chip.v-chip--size-x-large .v-chip__filter {
-  margin-inline-start: -8.5px;
-  margin-inline-end: 8.5px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .v-chip.v-chip--size-x-large .v-icon--end,
 .v-chip.v-chip--size-x-large .v-chip__close {
-  margin-inline-start: 8.5px;
-  margin-inline-end: -8.5px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .v-chip.v-chip--size-x-large .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-x-large .v-chip__append + .v-chip__close {
-  margin-inline-start: 17px;
+  margin-inline-start: 16px;
 }
 
 .v-chip.v-chip--density-default {

package/lib/components/VChip/_variables.scss

@@ -17,7 +17,7 @@ $chip-disabled-opacity: 0.3 !default;
 $chip-elevation: 1 !default;
 $chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
 $chip-font-weight: 400 !default;
-$chip-height: 32px !default;
+$chip-height: 30px !default;
 $chip-icon-font-size: 1.25rem !default;
 $chip-label-border-radius: settings.$border-radius-root !default;
 $chip-max-width: 100% !default;

package/lib/components/VCombobox/VCombobox.css

@@ -1,23 +1,8 @@
-.v-input--density-default {
-  --combobox-chips-margin-bottom: 0px;
-}
-
-.v-input--density-comfortable {
-  --combobox-chips-margin-bottom: 2px;
-}
-
-.v-input--density-compact {
-  --combobox-chips-margin-bottom: 4px;
-}
-
 .v-combobox .v-field .v-text-field__prefix,
 .v-combobox .v-field .v-text-field__suffix,
 .v-combobox .v-field .v-field__input, .v-combobox .v-field.v-field {
   cursor: text;
 }
-.v-combobox .v-field--variant-outlined {
-  --combobox-chips-margin-bottom: 2px;
-}
 .v-combobox .v-field .v-field__input > input {
   align-self: flex-start;
   flex: 1 1;
@@ -48,14 +33,11 @@
   line-height: inherit;
   max-width: 100%;
 }
-.v-combobox--chips .v-field__input, .v-combobox--selection-slot .v-field__input {
-  min-height: calc(var(--v-field-input-min-height) + var(--combobox-chips-margin-bottom) + 2px);
-}
-.v-combobox--chips .v-combobox__selection, .v-combobox--selection-slot .v-combobox__selection {
-  margin-top: 2px;
-  margin-bottom: var(--combobox-chips-margin-bottom);
+.v-combobox input, .v-combobox__selection {
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-combobox--chips .v-combobox__selection:first-child, .v-combobox--selection-slot .v-combobox__selection:first-child {
+.v-combobox input:first-child, .v-combobox__selection:first-child {
   margin-inline-start: 0;
 }
 .v-combobox--selecting-index .v-combobox__selection {

package/lib/components/VCombobox/VCombobox.sass

@@ -4,10 +4,6 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-@at-root
-  @include tools.density('v-input', $combobox-chips-margin-bottom) using ($modifier)
-    --combobox-chips-margin-bottom: #{0px + math.div($modifier, 2)}
-
 .v-combobox
   .v-field
     .v-text-field__prefix,
@@ -16,9 +12,6 @@
     &.v-field
       cursor: text
 
-    &--variant-outlined
-      --combobox-chips-margin-bottom: #{$combobox-chips-margin-top}
-
   .v-field
     .v-field__input
       > input
@@ -55,17 +48,13 @@
     line-height: inherit
     max-width: 100%
 
-  &--chips,
-  &--selection-slot
-    .v-field__input
-      min-height: calc(var(--v-field-input-min-height) + var(--combobox-chips-margin-bottom) + $combobox-chips-margin-top)
-
-    .v-combobox__selection
-      margin-top: $combobox-chips-margin-top
-      margin-bottom: var(--combobox-chips-margin-bottom)
+  input,
+  &__selection
+    margin-top: var(--v-input-chips-margin-top)
+    margin-bottom: var(--v-input-chips-margin-bottom)
 
-      &:first-child
-        margin-inline-start: 0
+    &:first-child
+      margin-inline-start: 0
 
   &--selecting-index
     .v-combobox__selection

package/lib/components/VCombobox/_variables.scss

@@ -5,6 +5,6 @@ $combobox-content-border-radius: 4px !default;
 $combobox-content-elevation: 4 !default;
 $combobox-line-height: 1.75 !default;
 $combobox-transition: .2s settings.$standard-easing !default;
-$combobox-chips-control-min-height: 64px !default;
-$combobox-chips-margin-top: 2px !default;
-$combobox-chips-margin-bottom: ('default': 0, 'comfortable': 1, 'compact': 2) !default;
+$combobox-chips-control-min-height: null !default;
+$combobox-chips-margin-top: null !default;
+$combobox-chips-margin-bottom: null !default;

package/lib/components/VCounter/index.d.mts

@@ -26,9 +26,9 @@ declare const VCounter: {
             max?: string | number | undefined;
             key?: string | number | symbol | undefined;
             class?: any;
-            $children?: vue.VNodeChild | {
+            $children?: vue.VNodeChild | ((arg: VCounterSlot) => vue.VNodeChild) | {
                 default?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
-            } | ((arg: VCounterSlot) => vue.VNodeChild);
+            };
             ref?: vue.VNodeRef | undefined;
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
@@ -103,9 +103,9 @@ declare const VCounter: {
             max?: string | number | undefined;
             class?: any;
         } & {
-            $children?: vue.VNodeChild | {
+            $children?: vue.VNodeChild | ((arg: VCounterSlot) => vue.VNodeChild) | {
                 default?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
-            } | ((arg: VCounterSlot) => vue.VNodeChild);
+            };
             'v-slots'?: {
                 default?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -157,9 +157,9 @@ declare const VCounter: {
         max?: string | number | undefined;
         class?: any;
     } & {
-        $children?: vue.VNodeChild | {
+        $children?: vue.VNodeChild | ((arg: VCounterSlot) => vue.VNodeChild) | {
             default?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
-        } | ((arg: VCounterSlot) => vue.VNodeChild);
+        };
         'v-slots'?: {
             default?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
         } | undefined;
@@ -182,9 +182,9 @@ declare const VCounter: {
     max?: string | number | undefined;
     class?: any;
 } & {
-    $children?: vue.VNodeChild | {
+    $children?: vue.VNodeChild | ((arg: VCounterSlot) => vue.VNodeChild) | {
         default?: ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
-    } | ((arg: VCounterSlot) => vue.VNodeChild);
+    };
     'v-slots'?: {
         default?: false | ((arg: VCounterSlot) => vue.VNodeChild) | undefined;
     } | undefined;

package/lib/components/VField/VField.css

@@ -51,17 +51,47 @@
   border-bottom-right-radius: 0;
 }
 .v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
-  --v-input-control-height: 56px;
+  --v-input-control-height: 54px;
   --v-field-padding-bottom: 5px;
 }
 
+.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
+  --v-input-control-height: 52px;
+  --v-field-padding-bottom: 5px;
+}
+
+.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
+  --v-input-control-height: 50px;
+  --v-field-padding-bottom: 5px;
+}
+
+.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
+  --v-input-control-height: 46px;
+  --v-field-padding-bottom: 1px;
+}
+
 .v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
-  --v-input-control-height: 48px;
+  --v-input-control-height: 44px;
   --v-field-padding-bottom: 1px;
 }
 
+.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
+  --v-input-control-height: 42px;
+  --v-field-padding-bottom: 1px;
+}
+
+.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
+  --v-input-control-height: 38px;
+  --v-field-padding-bottom: 0px;
+}
+
+.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
+  --v-input-control-height: 36px;
+  --v-field-padding-bottom: 0px;
+}
+
 .v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
-  --v-input-control-height: 40px;
+  --v-input-control-height: 34px;
   --v-field-padding-bottom: 0px;
 }
 
@@ -90,20 +120,53 @@
   --v-field-padding-top: var(--v-field-padding-top--plain-underlined, 6px);
 }
 .v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
-  --v-input-control-height: 48px;
+  --v-input-control-height: 46px;
   --v-field-padding-bottom: 5px;
 }
 
+.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
+  --v-input-control-height: 44px;
+  --v-field-padding-bottom: 5px;
+}
+
+.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
+  --v-input-control-height: 42px;
+  --v-field-padding-bottom: 5px;
+}
+
+.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
+  --v-input-control-height: 38px;
+  --v-field-padding-bottom: 1px;
+}
+
+.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
+  --v-input-control-height: 36px;
+  --v-field-padding-bottom: 1px;
+}
+
 .v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
-  --v-input-control-height: 40px;
+  --v-input-control-height: 34px;
   --v-field-padding-bottom: 1px;
 }
 
 .v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
-  --v-input-control-height: 32px;
+  --v-input-control-height: 30px;
+  --v-field-padding-bottom: 0px;
+}
+
+.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
+  --v-input-control-height: 28px;
+  --v-field-padding-bottom: 0px;
+}
+
+.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
+  --v-input-control-height: 26px;
   --v-field-padding-bottom: 0px;
 }
 
+.v-field--variant-outlined {
+  --v-input-chips-margin-bottom: 2px;
+}
 .v-field--flat {
   box-shadow: none;
 }
@@ -125,14 +188,14 @@
   flex-wrap: wrap;
   letter-spacing: 0.009375em;
   opacity: var(--v-high-emphasis-opacity);
-  min-height: var(--v-field-input-min-height);
+  min-height: calc(var(--v-field-input-min-height) + var(--v-input-chips-margin-bottom) + 2px);
   padding-inline-start: var(--v-field-padding-start);
   padding-inline-end: var(--v-field-padding-end);
   padding-top: var(--v-field-input-padding-top);
   padding-bottom: var(--v-field-input-padding-bottom);
   position: relative;
   width: 100%;
-  --v-field-input-min-height: max(var(--v-input-control-height, 56px), 1.625rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
+  --v-field-input-min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
 }
 .v-field__input input {
   letter-spacing: inherit;

package/lib/components/VField/VField.sass

@@ -4,6 +4,7 @@
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
+@use './mixins' as *
 
 /* region INPUT */
 .v-field
@@ -68,9 +69,9 @@
     $root: &
 
     @at-root
-      @include tools.density('v-input', $input-density) using ($modifier)
+      @include input-density('v-input', $input-density, $input-chips-margin-bottom) using ($modifier, $chips-modifier)
         @at-root #{selector.nest(&, $root)}
-          --v-input-control-height: #{$field-control-height + $modifier}
+          --v-input-control-height: #{$field-control-height + $modifier - math.div($chips-modifier, 2) - $input-chips-margin-top}
           --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
 
   &--variant-outlined,
@@ -96,11 +97,14 @@
       --v-field-padding-top: var(--v-field-padding-top--plain-underlined, 6px)
 
     @at-root
-      @include tools.density('v-input', $input-density) using ($modifier)
+      @include input-density('v-input', $input-density, $input-chips-margin-bottom) using ($modifier, $chips-modifier)
         @at-root #{selector.nest(&, $root)}
-          --v-input-control-height: #{$field-control-underlined-height + $modifier}
+          --v-input-control-height: #{$field-control-underlined-height + $modifier - math.div($chips-modifier, 2) - $input-chips-margin-top}
           --v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
 
+  &--variant-outlined
+    --v-input-chips-margin-bottom: #{$input-chips-margin-top}
+
   &--flat
     box-shadow: none
 
@@ -123,7 +127,7 @@
   flex-wrap: wrap
   letter-spacing: $field-letter-spacing
   opacity: $field-input-opacity
-  min-height: var(--v-field-input-min-height)
+  min-height: calc(var(--v-field-input-min-height) + var(--v-input-chips-margin-bottom) + $input-chips-margin-top)
   padding-inline-start: var(--v-field-padding-start)
   padding-inline-end: var(--v-field-padding-end)
   padding-top: var(--v-field-input-padding-top)

package/lib/components/VField/_mixins.sass

@@ -0,0 +1,7 @@
+@use '../../styles/settings'
+
+@mixin input-density($name, $input-densities, $input-chips-margin-bottom)
+  @each $input-density, $input-multiplier in $input-densities
+    @each $input-chips-margin-bottom-density, $input-chips-margin-bottom-multiplier in $input-chips-margin-bottom
+      .#{$name}--density-#{$input-density}
+        @content($input-multiplier * settings.$spacer, $input-chips-margin-bottom-multiplier * settings.$spacer)

package/lib/components/VFileInput/VFileInput.css

@@ -1,15 +1,3 @@
-.v-input--density-default {
-  --file-input-chips-margin-bottom: 0px;
-}
-
-.v-input--density-comfortable {
-  --file-input-chips-margin-bottom: 2px;
-}
-
-.v-input--density-compact {
-  --file-input-chips-margin-bottom: 4px;
-}
-
 .v-file-input input[type=file] {
   height: 100%;
   left: 0;
@@ -19,10 +7,7 @@
   width: 100%;
   z-index: 1;
 }
-.v-file-input--chips .v-field__input, .v-file-input--selection-slot .v-field__input {
-  min-height: calc(var(--v-field-input-min-height) + var(--file-input-chips-margin-bottom) + 2px);
-}
 .v-file-input .v-chip {
-  margin-top: 2px;
-  margin-bottom: var(--file-input-chips-margin-bottom);
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
 }

package/lib/components/VFileInput/VFileInput.mjs

@@ -140,8 +140,6 @@ export const VFileInput = genericComponent()({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-file-input', {
-          'v-file-input--chips': !!props.chips,
-          'v-file-input--selection-slot': !!slots.selection,
           'v-text-field--plain-underlined': isPlainOrUnderlined.value
         }, props.class],
         "style": props.style,