[Feature Request] Support Adjacent Labels on VField through label-variant

Problem to solve

The Material 3 design guidance allows for adjacent labels.

Currently there is no way to allow this on the existing inputs without some hacky css overrides and defaults.

There is the ability to specify the label separately and not pass the label to the input, but this makes the label reacting to the input focus and other usability concerns. (not as convenient as a label prop) Also has the drawback of requiring a refactor if you decide to switch between the layout variants.

Proposed solution

Create a new VField prop called label-variant, which supports the following:

• default - (float)
• float
• single-line or inline
• adjacent or above
• fixed - permanently puts in the floating state, like persistent-placeholder

This would likely also mean deprecating the single-line prop, which isn't very descriptive of it's function anyway.

Adding this prop would then allow the developer to set the preference in the global defaults and override easily without having to implement two template systems for labels.

Code like this:

<script setup>
  import { ref } from 'vue'

  const text = defineModel()
  const isLabelActive = ref(false)
</script>

<template>
  <div>
    <v-label
      text="Label"
      :class="{'active-label': isLabelActive}"
    />
    <v-text-field
      v-model="text"
      color="primary"
      @focus="isLabelActive = true"
      @blur="isLabelActive = false"
    />
  </div>
</template>

<style scoped>
  .active-label {
    color: rgb(var(--v-theme-primary));
    opacity: 1;
    font-weight: 500;
  }
</style>

would become:

<v-text-field
  v-model="text"
  color="primary"
  label="Label"
  label-variant="adjacent"
/>