@vuetify/nightly 3.4.0-alpha.1-dev.2023-10-19 → 3.4.0-alpha.1-dev.2023-10-21

package/CHANGELOG.md

@@ -1,8 +1,13 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1-dev.2023-10-19...v) (2023-10-19)
+# [](https://github.com/vuetifyjs/vuetify/compare/v3.4.0-alpha.1-dev.2023-10-21...v) (2023-10-21)
 
 
 
-# [3.4.0-alpha.1-dev.2023-10-19](https://github.com/vuetifyjs/vuetify/compare/v3.3.22...v3.4.0-alpha.1-dev.2023-10-19) (2023-10-19)
+# [3.4.0-alpha.1-dev.2023-10-21](https://github.com/vuetifyjs/vuetify/compare/v3.3.22...v3.4.0-alpha.1-dev.2023-10-21) (2023-10-21)
+
+
+### Bug Fixes
+
+* **VField:** correct height for compact/comfortable densities ([#18025](https://github.com/vuetifyjs/vuetify/issues/18025)) ([7a24848](https://github.com/vuetifyjs/vuetify/commit/7a248489c6eb46e754c22b982ae047a4ca1bbd98)), closes [#17898](https://github.com/vuetifyjs/vuetify/issues/17898) [#17837](https://github.com/vuetifyjs/vuetify/issues/17837)
 
 
 ### Features

package/dist/json/importMap-labs.json

@@ -4,28 +4,8 @@
       "from": "labs/VBottomSheet/index.mjs",
       "styles": []
     },
-    "VDataTable": {
-      "from": "labs/VDataTable/index.mjs",
-      "styles": []
-    },
-    "VDataTableFooter": {
-      "from": "labs/VDataTable/index.mjs",
-      "styles": []
-    },
-    "VDataTableRows": {
-      "from": "labs/VDataTable/index.mjs",
-      "styles": []
-    },
-    "VDataTableRow": {
-      "from": "labs/VDataTable/index.mjs",
-      "styles": []
-    },
-    "VDataTableVirtual": {
-      "from": "labs/VDataTable/index.mjs",
-      "styles": []
-    },
-    "VDataTableServer": {
-      "from": "labs/VDataTable/index.mjs",
+    "VInfiniteScroll": {
+      "from": "labs/VInfiniteScroll/index.mjs",
       "styles": []
     },
     "VDateCard": {
@@ -52,8 +32,28 @@
       "from": "labs/VDatePicker/index.mjs",
       "styles": []
     },
-    "VInfiniteScroll": {
-      "from": "labs/VInfiniteScroll/index.mjs",
+    "VDataTable": {
+      "from": "labs/VDataTable/index.mjs",
+      "styles": []
+    },
+    "VDataTableFooter": {
+      "from": "labs/VDataTable/index.mjs",
+      "styles": []
+    },
+    "VDataTableRows": {
+      "from": "labs/VDataTable/index.mjs",
+      "styles": []
+    },
+    "VDataTableRow": {
+      "from": "labs/VDataTable/index.mjs",
+      "styles": []
+    },
+    "VDataTableVirtual": {
+      "from": "labs/VDataTable/index.mjs",
+      "styles": []
+    },
+    "VDataTableServer": {
+      "from": "labs/VDataTable/index.mjs",
       "styles": []
     },
     "VOtpInput": {

package/dist/json/importMap.json

@@ -300,14 +300,14 @@
       "from": "components/VRating/index.mjs",
       "styles": []
     },
-    "VSelect": {
-      "from": "components/VSelect/index.mjs",
-      "styles": []
-    },
     "VSelectionControl": {
       "from": "components/VSelectionControl/index.mjs",
       "styles": []
     },
+    "VSelect": {
+      "from": "components/VSelect/index.mjs",
+      "styles": []
+    },
     "VSelectionControlGroup": {
       "from": "components/VSelectionControlGroup/index.mjs",
       "styles": []
@@ -340,6 +340,14 @@
       "from": "components/VSystemBar/index.mjs",
       "styles": []
     },
+    "VTabs": {
+      "from": "components/VTabs/index.mjs",
+      "styles": []
+    },
+    "VTab": {
+      "from": "components/VTabs/index.mjs",
+      "styles": []
+    },
     "VTable": {
       "from": "components/VTable/index.mjs",
       "styles": []
@@ -384,14 +392,6 @@
       "from": "components/VWindow/index.mjs",
       "styles": []
     },
-    "VTabs": {
-      "from": "components/VTabs/index.mjs",
-      "styles": []
-    },
-    "VTab": {
-      "from": "components/VTabs/index.mjs",
-      "styles": []
-    },
     "VDefaultsProvider": {
       "from": "components/VDefaultsProvider/index.mjs",
       "styles": []

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "3.4.0-alpha.1-dev.2023-10-19",
+  "version": "3.4.0-alpha.1-dev.2023-10-21",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/dist/vuetify-labs.css

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0-alpha.1-dev.2023-10-19
+* Vuetify v3.4.0-alpha.1-dev.2023-10-21
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -18126,7 +18126,6 @@ html.overflow-y-hidden {
   cursor: text;
 }
 .v-autocomplete .v-field .v-field__input > input {
-  align-self: flex-start;
   flex: 1 1;
 }
 .v-autocomplete .v-field input {
@@ -18155,17 +18154,20 @@ html.overflow-y-hidden {
 .v-autocomplete__selection {
   display: inline-flex;
   align-items: center;
+  height: 1.5rem;
   letter-spacing: inherit;
   line-height: inherit;
   max-width: calc(100% - 2px);
 }
-.v-autocomplete__selection {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
 .v-autocomplete__selection:first-child {
   margin-inline-start: 0;
 }
+.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
+.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
+.v-autocomplete--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
+.v-autocomplete--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
+  top: 0px;
+}
 .v-autocomplete--selecting-index .v-autocomplete__selection {
   opacity: var(--v-medium-emphasis-opacity);
 }
@@ -18183,10 +18185,6 @@ html.overflow-y-hidden {
   width: 100%;
   padding-inline: inherit;
 }
-.v-autocomplete--single .v-field--variant-outlined input {
-  top: 50%;
-  transform: translateY(calc(-50% - (var(--v-input-chips-margin-top) + var(--v-input-chips-margin-bottom)) / 2));
-}
 .v-autocomplete--single .v-field--active input {
   transition: none;
 }
@@ -19909,7 +19907,6 @@ html.overflow-y-hidden {
   cursor: text;
 }
 .v-combobox .v-field .v-field__input > input {
-  align-self: flex-start;
   flex: 1 1;
 }
 .v-combobox .v-field input {
@@ -19938,17 +19935,20 @@ html.overflow-y-hidden {
 .v-combobox__selection {
   display: inline-flex;
   align-items: center;
+  height: 1.5rem;
   letter-spacing: inherit;
   line-height: inherit;
   max-width: 90%;
 }
-.v-combobox__selection {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
 .v-combobox__selection:first-child {
   margin-inline-start: 0;
 }
+.v-combobox--chips.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating,
+.v-combobox--chips.v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating,
+.v-combobox--chips.v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating,
+.v-combobox--chips.v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
+  top: 0px;
+}
 .v-combobox--selecting-index .v-combobox__selection {
   opacity: var(--v-medium-emphasis-opacity);
 }
@@ -19966,10 +19966,6 @@ html.overflow-y-hidden {
   width: 100%;
   padding-inline: inherit;
 }
-.v-combobox--single .v-field--variant-outlined input {
-  top: 50%;
-  transform: translateY(calc(-50% - (var(--v-input-chips-margin-top) + var(--v-input-chips-margin-bottom)) / 2));
-}
 .v-combobox--single .v-field--active input {
   transition: none;
 }
@@ -20991,10 +20987,10 @@ html.overflow-y-hidden {
   position: relative;
   --v-field-padding-start: 16px;
   --v-field-padding-end: 16px;
-  --v-field-padding-top: 10px;
-  --v-field-padding-bottom: 5px;
-  --v-field-input-padding-top: calc(var(--v-field-padding-top, 10px) + var(--v-input-padding-top, 0));
-  --v-field-input-padding-bottom: var(--v-field-padding-bottom, 5px);
+  --v-field-padding-top: 8px;
+  --v-field-padding-bottom: 4px;
+  --v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
+  --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
 }
 .v-field--disabled {
   opacity: var(--v-disabled-opacity);
@@ -21033,12 +21029,12 @@ html.overflow-y-hidden {
 }
 .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-field-padding-bottom: 5px;
+  --v-field-padding-bottom: 4px;
 }
 
 .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-field-padding-bottom: 1px;
+  --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 {
@@ -21050,15 +21046,15 @@ html.overflow-y-hidden {
   --v-field-padding-top: 0px;
 }
 .v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
-  --v-field-padding-bottom: 15px;
+  --v-field-padding-bottom: 16px;
 }
 
 .v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
-  --v-field-padding-bottom: 11px;
+  --v-field-padding-bottom: 12px;
 }
 
 .v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
-  --v-field-padding-bottom: 7px;
+  --v-field-padding-bottom: 8px;
 }
 
 .v-field--variant-plain, .v-field--variant-underlined {
@@ -21068,20 +21064,22 @@ html.overflow-y-hidden {
 .v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
   --v-field-padding-start: 0px;
   --v-field-padding-end: 0px;
-  --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-field-padding-bottom: 5px;
+  --v-field-padding-top: 4px;
+  --v-field-padding-bottom: 4px;
 }
 
 .v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
   --v-input-control-height: 40px;
-  --v-field-padding-bottom: 1px;
+  --v-field-padding-top: 2px;
+  --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: 32px;
+  --v-field-padding-top: 0px;
   --v-field-padding-bottom: 0px;
 }
 
@@ -21101,12 +21099,14 @@ html.overflow-y-hidden {
 /* endregion */
 /* region ELEMENTS */
 .v-field__input {
+  align-items: center;
   color: inherit;
+  column-gap: 2px;
   display: flex;
   flex-wrap: wrap;
   letter-spacing: 0.009375em;
   opacity: var(--v-high-emphasis-opacity);
-  min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom) + var(--v-input-chips-margin-bottom) + 2px);
+  min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
   min-width: 0;
   padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
   padding-top: var(--v-field-input-padding-top);
@@ -21114,6 +21114,18 @@ html.overflow-y-hidden {
   position: relative;
   width: 100%;
 }
+.v-input--density-default .v-field__input {
+  row-gap: 8px;
+}
+
+.v-input--density-comfortable .v-field__input {
+  row-gap: 6px;
+}
+
+.v-input--density-compact .v-field__input {
+  row-gap: 4px;
+}
+
 .v-field__input input {
   letter-spacing: inherit;
 }
@@ -21160,7 +21172,7 @@ textarea.v-field__input::placeholder {
 .v-field__prepend-inner {
   display: flex;
   align-items: flex-start;
-  padding-top: var(--v-input-padding-top, 10px);
+  padding-top: var(--v-input-padding-top, 8px);
 }
 .v-field--center-affix .v-field__append-inner,
 .v-field--center-affix .v-field__clearable,
@@ -21176,8 +21188,8 @@ textarea.v-field__input::placeholder {
 .v-field.v-field--variant-plain .v-field__clearable,
 .v-field.v-field--variant-plain .v-field__prepend-inner {
   align-items: flex-start;
-  padding-top: calc(var(--v-field-padding-top, 10px) + var(--v-input-padding-top, 0));
-  padding-bottom: var(--v-field-padding-bottom, 5px);
+  padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0));
+  padding-bottom: var(--v-field-padding-bottom, 4px);
 }
 
 .v-field--focused .v-field__prepend-inner,
@@ -21502,7 +21514,13 @@ textarea.v-field__input::placeholder {
   opacity: 0;
 }
 
-/* endregion */.v-file-input input[type=file] {
+/* endregion */.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;
@@ -21513,10 +21531,6 @@ textarea.v-field__input::placeholder {
 }
 .v-file-input .v-input__details {
   padding-inline: 16px;
-}
-.v-file-input .v-chip {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
 }.v-footer {
   align-items: center;
   display: flex;
@@ -21633,36 +21647,23 @@ textarea.v-field__input::placeholder {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  --v-input-chips-margin-top: 2px;
 }
 .v-input--disabled {
   pointer-events: none;
 }
 .v-input--density-default {
   --v-input-control-height: 56px;
-  --v-input-padding-top: 15px;
+  --v-input-padding-top: 16px;
 }
 
 .v-input--density-comfortable {
   --v-input-control-height: 48px;
-  --v-input-padding-top: 11px;
+  --v-input-padding-top: 12px;
 }
 
 .v-input--density-compact {
   --v-input-control-height: 40px;
-  --v-input-padding-top: 7px;
-}
-
-.v-input--density-default {
-  --v-input-chips-margin-bottom: 0px;
-}
-
-.v-input--density-comfortable {
-  --v-input-chips-margin-bottom: 2px;
-}
-
-.v-input--density-compact {
-  --v-input-chips-margin-bottom: 4px;
+  --v-input-padding-top: 8px;
 }
 
 .v-input--vertical {
@@ -21758,6 +21759,25 @@ textarea.v-field__input::placeholder {
 .v-input__control {
   display: flex;
   grid-area: control;
+}
+
+.v-input--plain-underlined .v-input__details {
+  padding: 0;
+}
+.v-input--plain-underlined .v-input__prepend,
+.v-input--plain-underlined .v-input__append {
+  align-items: flex-start;
+}
+.v-input--density-default.v-input--plain-underlined .v-input__prepend, .v-input--density-default.v-input--plain-underlined .v-input__append {
+  padding-top: calc(var(--v-input-padding-top) + 4px);
+}
+
+.v-input--density-comfortable.v-input--plain-underlined .v-input__prepend, .v-input--density-comfortable.v-input--plain-underlined .v-input__append {
+  padding-top: calc(var(--v-input-padding-top) + 2px);
+}
+
+.v-input--density-compact.v-input--plain-underlined .v-input__prepend, .v-input--density-compact.v-input--plain-underlined .v-input__append {
+  padding-top: calc(var(--v-input-padding-top) + 0px);
 }.v-item-group {
   flex: 0 1 auto;
   max-width: 100%;
@@ -23056,10 +23076,6 @@ html.v-overlay-scroll-blocked {
   line-height: inherit;
   max-width: 100%;
 }
-.v-select .v-select__selection {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
 .v-select .v-select__selection:first-child {
   margin-inline-start: 0;
 }
@@ -23799,15 +23815,6 @@ html.v-overlay-scroll-blocked {
   --v-field-padding-end: 0;
 }
 
-.v-text-field .v-field__input input {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
-.v-text-field input.v-field__input {
-  min-height: calc(max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom) + var(--v-input-chips-margin-bottom) + 2px) - var(--v-input-chips-margin-top) - var(--v-input-chips-margin-bottom));
-  padding-top: calc(var(--v-input-chips-margin-top) + var(--v-field-input-padding-top));
-  padding-bottom: calc(var(--v-input-chips-margin-bottom) + var(--v-field-input-padding-bottom));
-}
 .v-text-field .v-input__details {
   padding-inline: 16px;
 }
@@ -23829,14 +23836,10 @@ html.v-overlay-scroll-blocked {
   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) + var(--v-input-chips-margin-bottom) + 2px);
+  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-text-field__prefix__text, .v-text-field__suffix__text {
-  margin-top: var(--v-input-chips-margin-top);
-  margin-bottom: var(--v-input-chips-margin-bottom);
-}
 .v-field--active .v-text-field__prefix, .v-field--active .v-text-field__suffix {
   opacity: 1;
 }
@@ -23850,20 +23853,6 @@ html.v-overlay-scroll-blocked {
   padding-inline-end: var(--v-field-padding-end);
 }
 
-/* endregion */
-/* region MODIFIERS */
-.v-text-field--plain-underlined {
-  --v-field-padding-top--plain-underlined: 6px;
-}
-.v-text-field--plain-underlined .v-input__details {
-  padding: 0;
-}
-.v-text-field--plain-underlined .v-input__prepend,
-.v-text-field--plain-underlined .v-input__append {
-  align-items: flex-start;
-  padding-top: calc(var(--v-field-padding-top--plain-underlined) + var(--v-input-padding-top));
-}
-
 /* endregion */.v-theme-provider {
   background: rgb(var(--v-theme-background));
   color: rgb(var(--v-theme-on-background));

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.0-alpha.1-dev.2023-10-19
+* Vuetify v3.4.0-alpha.1-dev.2023-10-21
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -10575,7 +10575,7 @@ const VTextField = genericComponent()({
         "class": ['v-text-field', {
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
-          'v-text-field--plain-underlined': ['plain', 'underlined'].includes(props.variant)
+          'v-input--plain-underlined': isPlainOrUnderlined.value
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
@@ -15917,7 +15917,8 @@ const VFileInput = genericComponent()({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-file-input', {
-          'v-text-field--plain-underlined': isPlainOrUnderlined.value
+          'v-file-input--chips': !!props.chips,
+          'v-input--plain-underlined': isPlainOrUnderlined.value
         }, props.class],
         "style": props.style,
         "onClick:prepend": onClickPrepend
@@ -19335,7 +19336,7 @@ const VTextarea = genericComponent()({
           'v-text-field--suffixed': props.suffix,
           'v-textarea--auto-grow': props.autoGrow,
           'v-textarea--no-resize': props.noResize || props.autoGrow,
-          'v-text-field--plain-underlined': isPlainOrUnderlined.value
+          'v-input--plain-underlined': isPlainOrUnderlined.value
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
@@ -24897,7 +24898,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.4.0-alpha.1-dev.2023-10-19";
+const version$1 = "3.4.0-alpha.1-dev.2023-10-21";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -24911,7 +24912,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.4.0-alpha.1-dev.2023-10-19";
+const version = "3.4.0-alpha.1-dev.2023-10-21";
 
 /* eslint-disable local-rules/sort-imports */