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

package/lib/components/VField/VField.css

@@ -1,546 +1,594 @@
-@layer vuetify.components {
-  /* region INPUT */
-  .v-field {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: 6px;
-    font-size: 16px;
-    letter-spacing: 0.009375em;
-    max-width: 100%;
-    border-radius: 4px;
-    contain: layout;
-    flex: 1 0;
-    position: relative;
-    --v-theme-overlay-multiplier: 1;
-    --v-field-padding-start: 16px;
-    --v-field-padding-end: 16px;
-    --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, 0px));
-    --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
-  }
-  .v-field--disabled {
-    opacity: var(--v-disabled-opacity);
-    pointer-events: none;
-  }
-  .v-field .v-chip {
-    --v-chip-height: 24px;
-  }
-  /* endregion */
-  /* region MODIFIERS */
-  .v-field--prepended {
-    padding-inline-start: 12px;
-  }
-  .v-field--appended {
-    padding-inline-end: 12px;
-  }
-  .v-field--variant-solo, .v-field--variant-solo-filled {
-    background: rgb(var(--v-theme-surface));
-    border-color: transparent;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-field--variant-solo, .v-field--variant-solo-filled {
-    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-field--variant-solo-inverted {
-    background: rgb(var(--v-theme-surface));
-    border-color: transparent;
-    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-  }
-  .v-field--variant-solo-inverted {
-    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-  }
-  .v-field--variant-solo-inverted.v-field--focused {
-    color: rgb(var(--v-theme-on-surface-variant));
-  }
-  .v-field--variant-filled {
-    border-bottom-left-radius: 0;
-    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-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: 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-field-padding-bottom: 0px;
-  }
-  .v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
-    --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: 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: 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: 8px;
-  }
-  .v-field--variant-plain, .v-field--variant-underlined {
-    border-radius: 0;
-    padding: 0;
-  }
-  .v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
-    --v-field-padding-start: 0px;
-    --v-field-padding-end: 0px;
-  }
-  .v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
-    --v-input-control-height: 48px;
-    --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-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;
-  }
-  .v-field--flat {
-    box-shadow: none;
-  }
-  .v-field--rounded {
-    border-radius: 24px;
-  }
-  .v-field.v-field--prepended {
-    --v-field-padding-start: 6px;
-  }
-  .v-field.v-field--appended {
-    --v-field-padding-end: 6px;
-  }
-  /* 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));
-    min-width: 0;
-    padding-inline: var(--v-field-padding-start) 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-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;
-  }
-  .v-field__input input::placeholder,
-  input.v-field__input::placeholder,
-  textarea.v-field__input::placeholder {
-    color: currentColor;
-    opacity: var(--v-disabled-opacity);
-  }
-  .v-field__input:focus, .v-field__input:active {
-    outline: none;
-  }
-  .v-field__input:invalid {
-    box-shadow: none;
-  }
-  .v-field__field {
-    flex: 1 0;
-    position: relative;
-    align-items: flex-start;
-    display: flex;
-  }
-  /* endregion */
-  /* region AFFIXES */
-  .v-field__prepend-inner {
-    padding-inline-end: var(--v-field-padding-after);
-  }
-  .v-field__append-inner {
-    padding-inline-start: var(--v-field-padding-after);
-  }
-  .v-field__append-inner,
-  .v-field__clearable,
-  .v-field__prepend-inner {
-    display: flex;
-    align-items: flex-start;
-    padding-top: var(--v-input-padding-top, 8px);
-  }
-  .v-field--center-affix .v-field__append-inner,
-  .v-field--center-affix .v-field__clearable,
-  .v-field--center-affix .v-field__prepend-inner {
-    align-items: center;
-    padding-top: 0;
-  }
-  .v-field.v-field--variant-underlined .v-field__append-inner,
-  .v-field.v-field--variant-underlined .v-field__clearable,
-  .v-field.v-field--variant-underlined .v-field__prepend-inner,
-  .v-field.v-field--variant-plain .v-field__append-inner,
-  .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, 8px) + var(--v-input-padding-top, 0px));
-    padding-bottom: var(--v-field-padding-bottom, 4px);
-  }
-  .v-field--focused .v-field__prepend-inner,
-  .v-field--focused .v-field__append-inner {
+/* 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;
+  font-size: 16px;
+  letter-spacing: 0.009375em;
+  max-width: 100%;
+  border-radius: 4px;
+  contain: layout;
+  flex: 1 0;
+  grid-area: control;
+  position: relative;
+  --v-theme-overlay-multiplier: 1;
+  --v-field-padding-start: 16px;
+  --v-field-padding-end: 16px;
+  --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, 0px));
+  --v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
+}
+.v-field--disabled {
+  opacity: var(--v-disabled-opacity);
+  pointer-events: none;
+}
+.v-field .v-chip {
+  --v-chip-height: 24px;
+}
+
+/* endregion */
+/* region MODIFIERS */
+.v-field--prepended {
+  padding-inline-start: 12px;
+}
+.v-field--appended {
+  padding-inline-end: 12px;
+}
+.v-field--variant-solo, .v-field--variant-solo-filled {
+  background: rgb(var(--v-theme-surface));
+  border-color: transparent;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-field--variant-solo, .v-field--variant-solo-filled {
+  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-field--variant-solo-inverted {
+  background: rgb(var(--v-theme-surface));
+  border-color: transparent;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-field--variant-solo-inverted {
+  box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-field--variant-solo-inverted.v-field--focused {
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.v-field--variant-filled {
+  border-bottom-left-radius: 0;
+  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-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: 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-field-padding-bottom: 0px;
+}
+
+.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
+  --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: 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: 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: 8px;
+}
+
+.v-field--variant-plain, .v-field--variant-underlined {
+  border-radius: 0;
+  padding: 0;
+}
+.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
+  --v-field-padding-start: 0px;
+  --v-field-padding-end: 0px;
+}
+.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
+  --v-input-control-height: 48px;
+  --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-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;
+}
+
+.v-field--flat {
+  box-shadow: none;
+}
+.v-field--rounded {
+  border-radius: 24px;
+}
+.v-field.v-field--prepended {
+  --v-field-padding-start: 6px;
+}
+.v-field.v-field--appended {
+  --v-field-padding-end: 6px;
+}
+
+/* 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));
+  min-width: 0;
+  padding-inline: var(--v-field-padding-start) 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-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;
+}
+.v-field__input input::placeholder,
+input.v-field__input::placeholder,
+textarea.v-field__input::placeholder {
+  color: currentColor;
+  opacity: var(--v-disabled-opacity);
+}
+
+.v-field__input:focus, .v-field__input:active {
+  outline: none;
+}
+.v-field__input:invalid {
+  box-shadow: none;
+}
+
+.v-field__field {
+  flex: 1 0;
+  grid-area: field;
+  position: relative;
+  align-items: flex-start;
+  display: flex;
+}
+
+/* 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,
+.v-field__clearable,
+.v-field__prepend-inner {
+  display: flex;
+  align-items: flex-start;
+  padding-top: var(--v-input-padding-top, 8px);
+}
+.v-field--center-affix .v-field__append-inner,
+.v-field--center-affix .v-field__clearable,
+.v-field--center-affix .v-field__prepend-inner {
+  align-items: center;
+  padding-top: 0;
+}
+
+.v-field.v-field--variant-underlined .v-field__append-inner,
+.v-field.v-field--variant-underlined .v-field__clearable,
+.v-field.v-field--variant-underlined .v-field__prepend-inner,
+.v-field.v-field--variant-plain .v-field__append-inner,
+.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, 8px) + var(--v-input-padding-top, 0px));
+  padding-bottom: var(--v-field-padding-bottom, 4px);
+}
+
+.v-field--focused .v-field__prepend-inner,
+.v-field--focused .v-field__append-inner {
+  opacity: 1;
+}
+
+.v-field__prepend-inner > .v-icon,
+.v-field__append-inner > .v-icon,
+.v-field__clearable > .v-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon, .v-field--glow.v-field--focused .v-field__prepend-inner > .v-icon,
+.v-field--disabled .v-field__append-inner > .v-icon,
+.v-field--error .v-field__append-inner > .v-icon,
+.v-field--glow.v-field--focused .v-field__append-inner > .v-icon,
+.v-field--disabled .v-field__clearable > .v-icon,
+.v-field--error .v-field__clearable > .v-icon,
+.v-field--glow.v-field--focused .v-field__clearable > .v-icon {
+  opacity: 1;
+}
+.v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
+.v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
+.v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
+  color: rgb(var(--v-theme-error));
+}
+
+.v-field__clearable {
+  cursor: pointer;
+  opacity: 0;
+  overflow: hidden;
+  margin-inline: 4px;
+  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: opacity, transform, width;
+}
+.v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
+  opacity: 1;
+}
+@media (hover: hover) {
+  .v-field:hover .v-field__clearable {
     opacity: 1;
   }
-  .v-field__prepend-inner > .v-icon,
-  .v-field__append-inner > .v-icon,
-  .v-field__clearable > .v-icon {
-    opacity: var(--v-medium-emphasis-opacity);
-  }
-  .v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon, .v-field--glow.v-field--focused .v-field__prepend-inner > .v-icon,
-  .v-field--disabled .v-field__append-inner > .v-icon,
-  .v-field--error .v-field__append-inner > .v-icon,
-  .v-field--glow.v-field--focused .v-field__append-inner > .v-icon,
-  .v-field--disabled .v-field__clearable > .v-icon,
-  .v-field--error .v-field__clearable > .v-icon,
-  .v-field--glow.v-field--focused .v-field__clearable > .v-icon {
-    opacity: 1;
-  }
-  .v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
-  .v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
-  .v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
-    color: rgb(var(--v-theme-error));
-  }
+}
+@media (hover: none) {
   .v-field__clearable {
-    cursor: pointer;
-    opacity: 0;
-    overflow: hidden;
-    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: opacity, transform, width;
-  }
-  .v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
-    opacity: 1;
-  }
-  @media (hover: hover) {
-    .v-field:hover .v-field__clearable {
-      opacity: 1;
-    }
-  }
-  @media (hover: none) {
-    .v-field__clearable {
-      opacity: 1;
-    }
-  }
-  /* endregion */
-  /* region LABEL */
-  .v-label.v-field-label {
-    contain: layout paint;
-    display: block;
-    margin-inline-start: var(--v-field-padding-start);
-    margin-inline-end: var(--v-field-padding-end);
-    max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
-    pointer-events: none;
-    position: absolute;
-    top: var(--v-input-padding-top);
-    transform-origin: left center;
-    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: opacity, transform;
-    z-index: 1;
-  }
-  .v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
-    top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
-  }
-  .v-field--center-affix .v-label.v-field-label {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .v-field--active .v-label.v-field-label {
-    visibility: hidden;
-  }
-  .v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
     opacity: 1;
   }
-  .v-field--error:not(.v-field--disabled) .v-label.v-field-label {
-    color: rgb(var(--v-theme-error));
-  }
-  .v-label.v-field-label--floating {
-    --v-field-label-scale: 0.75em;
-    font-size: var(--v-field-label-scale);
-    visibility: hidden;
-  }
-  .v-field--variant-outlined .v-label.v-field-label--floating {
-    max-width: 100%;
-  }
-  .v-field--center-affix .v-label.v-field-label--floating {
-    transform: none;
-  }
-  .v-field.v-field--active .v-label.v-field-label--floating {
-    visibility: unset;
-  }
-  .v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
-    top: 7px;
-  }
-  .v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
-    top: 5px;
-  }
-  .v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
-    top: 3px;
-  }
-  .v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
-    transform: translateY(-16px);
-    margin: 0;
-    top: var(--v-input-padding-top);
-  }
-  .v-field--variant-outlined .v-label.v-field-label--floating {
-    transform: translateY(-50%);
-    transform-origin: center;
-    position: static;
-    margin: 0 4px;
-  }
-  /* endregion */
-  /* region OUTLINE */
-  .v-field__outline {
-    --v-field-border-width: 1px;
-    --v-field-border-opacity: 0.38;
-    align-items: stretch;
-    contain: layout;
-    display: flex;
-    height: 100%;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    width: 100%;
-  }
-  @media (hover: hover) {
-    .v-field:hover .v-field__outline {
-      --v-field-border-opacity: var(--v-high-emphasis-opacity);
-    }
-  }
-  .v-field--error:not(.v-field--disabled) .v-field__outline {
-    color: rgb(var(--v-theme-error));
-  }
-  .v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
-    --v-field-border-opacity: 1;
-  }
-  .v-field--variant-outlined.v-field--focused .v-field__outline {
-    --v-field-border-width: 2px;
-  }
-  .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 0 0 var(--v-field-border-width);
-    opacity: var(--v-field-border-opacity);
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
-    border-color: currentColor;
-    border-style: solid;
-    border-width: 0 0 2px;
-    transform: scaleX(0);
-    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
-    transform: scaleX(1);
-  }
-  .v-field--variant-outlined .v-field__outline {
-    border-radius: inherit;
-  }
-  .v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
-    border: 0 solid currentColor;
-    opacity: var(--v-field-border-opacity);
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-outlined .v-field__outline__start {
-    flex: 0 0 12px;
-    border-top-width: var(--v-field-border-width);
-    border-bottom-width: var(--v-field-border-width);
-    border-inline-start-width: var(--v-field-border-width);
-    border-start-start-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: inherit;
-  }
-  .v-field--rounded.v-field--variant-outlined .v-field__outline__start,
-  [class^=rounded-].v-field--variant-outlined .v-field__outline__start,
-  [class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
-    flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
-  }
-  .v-field--reverse.v-field--variant-outlined .v-field__outline__start {
-    border-start-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-    border-end-start-radius: 0;
-    border-inline-end-width: var(--v-field-border-width);
-    border-inline-start-width: 0;
-  }
-  .v-field--variant-outlined .v-field__outline__notch {
-    flex: none;
-    position: relative;
-    max-width: calc(100% - 24px);
-  }
-  .v-field--rounded.v-field--variant-outlined .v-field__outline__notch,
-  [class^=rounded-].v-field--variant-outlined .v-field__outline__notch,
-  [class*=" rounded-"].v-field--variant-outlined .v-field__outline__notch {
-    max-width: calc(100% - var(--v-input-control-height));
-  }
-  .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
-    opacity: var(--v-field-border-opacity);
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-field--variant-outlined .v-field__outline__notch::before {
-    border-width: var(--v-field-border-width) 0 0;
-  }
-  .v-field--variant-outlined .v-field__outline__notch::after {
-    bottom: 0;
-    border-width: 0 0 var(--v-field-border-width);
-  }
-  .v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
-    opacity: 0;
-  }
-  .v-field--variant-outlined .v-field__outline__end {
-    flex: 1;
-    border-top-width: var(--v-field-border-width);
-    border-bottom-width: var(--v-field-border-width);
-    border-inline-end-width: var(--v-field-border-width);
-    border-start-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-end-radius: inherit;
-    border-end-start-radius: 0;
-  }
-  .v-field--reverse.v-field--variant-outlined .v-field__outline__end {
-    border-start-start-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-end-start-radius: inherit;
-    border-inline-end-width: 0;
-    border-inline-start-width: var(--v-field-border-width);
-  }
-  /* endregion */
-  /* region LOADER */
-  .v-field__loader {
-    top: calc(100% - 2px);
-    left: 0;
-    position: absolute;
-    right: 0;
-    width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    overflow: hidden;
-  }
-  .v-field--variant-outlined .v-field__loader {
-    top: calc(100% - 3px);
-    width: calc(100% - 1px * 2);
-    left: 1px;
-  }
-  /* endregion */
-  /* region OVERLAY */
-  .v-field__overlay {
-    border-radius: inherit;
-    pointer-events: none;
-  }
-  .v-field__overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .v-field--variant-filled .v-field__overlay {
-    background-color: currentColor;
-    opacity: 0.04;
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-filled.v-field--has-background .v-field__overlay {
-    opacity: 0;
-  }
-  @media (hover: hover) {
-    .v-field--variant-filled:hover .v-field__overlay {
-      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-    }
-  }
-  .v-field--variant-filled.v-field--focused .v-field__overlay {
-    opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-  .v-field--variant-solo-filled .v-field__overlay {
-    background-color: currentColor;
-    opacity: 0.04;
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  @media (hover: hover) {
-    .v-field--variant-solo-filled:hover .v-field__overlay {
-      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-    }
-  }
-  .v-field--variant-solo-filled.v-field--focused .v-field__overlay {
-    opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
-  }
-  .v-field--variant-solo-inverted .v-field__overlay {
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
-    opacity: 0;
-  }
-  @media (hover: hover) {
-    .v-field--variant-solo-inverted:hover .v-field__overlay {
-      opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
-    }
-  }
-  .v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
-    background-color: rgb(var(--v-theme-surface-variant));
-    opacity: 1;
-  }
-  /* endregion */
-  /* region MODIFIERS */
-  .v-field--reverse .v-field__field,
-  .v-field--reverse .v-field__input,
-  .v-field--reverse .v-field__outline {
-    flex-direction: row-reverse;
-  }
-  .v-field--reverse .v-field__input, .v-field--reverse input {
-    text-align: end;
-  }
-  .v-input--disabled .v-field--variant-filled .v-field__outline::before,
-  .v-input--disabled .v-field--variant-underlined .v-field__outline::before {
-    border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
-  }
-  .v-field--loading .v-field__outline::after,
-  .v-field--loading .v-field__outline::before {
-    opacity: 0;
-  }
-  /* endregion */
-}
+}
+
+/* endregion */
+/* region LABEL */
+.v-label.v-field-label {
+  contain: layout paint;
+  display: block;
+  margin-inline-start: var(--v-field-padding-start);
+  margin-inline-end: var(--v-field-padding-end);
+  max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
+  pointer-events: none;
+  position: absolute;
+  top: var(--v-input-padding-top);
+  transform-origin: left center;
+  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: opacity, transform;
+  z-index: 1;
+}
+.v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
+  top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
+}
+.v-field--center-affix .v-label.v-field-label {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.v-field--active .v-label.v-field-label {
+  visibility: hidden;
+}
+.v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
+  opacity: 1;
+}
+.v-field--error:not(.v-field--disabled) .v-label.v-field-label {
+  color: rgb(var(--v-theme-error));
+}
+.v-label.v-field-label--floating {
+  --v-field-label-scale: 0.75em;
+  font-size: var(--v-field-label-scale);
+  visibility: hidden;
+}
+.v-field--variant-outlined .v-label.v-field-label--floating {
+  max-width: 100%;
+}
+.v-field--center-affix .v-label.v-field-label--floating {
+  transform: none;
+}
+.v-field.v-field--active .v-label.v-field-label--floating {
+  visibility: unset;
+}
+.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
+  top: 7px;
+}
+
+.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
+  top: 5px;
+}
+
+.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
+  top: 3px;
+}
+
+.v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
+  transform: translateY(-16px);
+  margin: 0;
+  top: var(--v-input-padding-top);
+}
+.v-field--variant-outlined .v-label.v-field-label--floating {
+  transform: translateY(-50%);
+  transform-origin: center;
+  position: static;
+  margin: 0 4px;
+}
+
+/* endregion */
+/* region OUTLINE */
+.v-field__outline {
+  --v-field-border-width: 1px;
+  --v-field-border-opacity: 0.38;
+  align-items: stretch;
+  contain: layout;
+  display: flex;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+@media (hover: hover) {
+  .v-field:hover .v-field__outline {
+    --v-field-border-opacity: var(--v-high-emphasis-opacity);
+  }
+}
+.v-field--error:not(.v-field--disabled) .v-field__outline {
+  color: rgb(var(--v-theme-error));
+}
+.v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
+  --v-field-border-opacity: 1;
+}
+.v-field--variant-outlined.v-field--focused .v-field__outline {
+  --v-field-border-width: 2px;
+}
+.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0 0 var(--v-field-border-width);
+  opacity: var(--v-field-border-opacity);
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0 0 2px;
+  transform: scaleX(0);
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
+  transform: scaleX(1);
+}
+
+.v-field--variant-outlined .v-field__outline {
+  border-radius: inherit;
+}
+.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
+  border: 0 solid currentColor;
+  opacity: var(--v-field-border-opacity);
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-outlined .v-field__outline__start {
+  flex: 0 0 12px;
+  border-top-width: var(--v-field-border-width);
+  border-bottom-width: var(--v-field-border-width);
+  border-inline-start-width: var(--v-field-border-width);
+  border-start-start-radius: inherit;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: inherit;
+}
+.v-field--rounded.v-field--variant-outlined .v-field__outline__start,
+[class^=rounded-].v-field--variant-outlined .v-field__outline__start,
+[class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
+  flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
+}
+
+.v-field--reverse.v-field--variant-outlined .v-field__outline__start {
+  border-start-start-radius: 0;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  border-end-start-radius: 0;
+  border-inline-end-width: var(--v-field-border-width);
+  border-inline-start-width: 0;
+}
+
+.v-field--variant-outlined .v-field__outline__notch {
+  flex: none;
+  position: relative;
+  max-width: calc(100% - 24px);
+}
+.v-field--rounded.v-field--variant-outlined .v-field__outline__notch,
+[class^=rounded-].v-field--variant-outlined .v-field__outline__notch,
+[class*=" rounded-"].v-field--variant-outlined .v-field__outline__notch {
+  max-width: calc(100% - var(--v-input-control-height));
+}
+
+.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
+  opacity: var(--v-field-border-opacity);
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-field--variant-outlined .v-field__outline__notch::before {
+  border-width: var(--v-field-border-width) 0 0;
+}
+.v-field--variant-outlined .v-field__outline__notch::after {
+  bottom: 0;
+  border-width: 0 0 var(--v-field-border-width);
+}
+.v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
+  opacity: 0;
+}
+
+.v-field--variant-outlined .v-field__outline__end {
+  flex: 1;
+  border-top-width: var(--v-field-border-width);
+  border-bottom-width: var(--v-field-border-width);
+  border-inline-end-width: var(--v-field-border-width);
+  border-start-start-radius: 0;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  border-end-start-radius: 0;
+}
+.v-field--reverse.v-field--variant-outlined .v-field__outline__end {
+  border-start-start-radius: inherit;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-inline-end-width: 0;
+  border-inline-start-width: var(--v-field-border-width);
+}
+
+/* endregion */
+/* region LOADER */
+.v-field__loader {
+  top: calc(100% - 2px);
+  left: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
+}
+.v-field--variant-outlined .v-field__loader {
+  top: calc(100% - 3px);
+  width: calc(100% - 1px * 2);
+  left: 1px;
+}
+
+/* endregion */
+/* region OVERLAY */
+.v-field__overlay {
+  border-radius: inherit;
+  pointer-events: none;
+}
+.v-field__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.v-field--variant-filled .v-field__overlay {
+  background-color: currentColor;
+  opacity: 0.04;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-filled.v-field--has-background .v-field__overlay {
+  opacity: 0;
+}
+@media (hover: hover) {
+  .v-field--variant-filled:hover .v-field__overlay {
+    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-field--variant-filled.v-field--focused .v-field__overlay {
+  opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+}
+
+.v-field--variant-solo-filled .v-field__overlay {
+  background-color: currentColor;
+  opacity: 0.04;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@media (hover: hover) {
+  .v-field--variant-solo-filled:hover .v-field__overlay {
+    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-field--variant-solo-filled.v-field--focused .v-field__overlay {
+  opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
+}
+
+.v-field--variant-solo-inverted .v-field__overlay {
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
+  opacity: 0;
+}
+@media (hover: hover) {
+  .v-field--variant-solo-inverted:hover .v-field__overlay {
+    opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
+  background-color: rgb(var(--v-theme-surface-variant));
+  opacity: 1;
+}
+
+/* endregion */
+/* region MODIFIERS */
+.v-field--reverse .v-field__field,
+.v-field--reverse .v-field__input,
+.v-field--reverse .v-field__outline {
+  flex-direction: row-reverse;
+}
+.v-field--reverse .v-field__input, .v-field--reverse input {
+  text-align: end;
+}
+
+.v-input--disabled .v-field--variant-filled .v-field__outline::before,
+.v-input--disabled .v-field--variant-underlined .v-field__outline::before {
+  border-image: repeating-linear-gradient(to right, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
+}
+
+.v-field--loading .v-field__outline::after,
+.v-field--loading .v-field__outline::before {
+  opacity: 0;
+}
+
+/* endregion */