fix(VField): floating label respect paddings to avoid overflow

[J-Sek]

Description

• check all examples in the docs
• fix for outlined variant (test on text field with icons)

fixes #20734

Markup:

<template>
  <v-form>
    <v-container max-width="600">
      <v-text-field
        density="compact"
        variant="solo"
        v-model="label"
      />
      <div class="d-flex ga-3 align-center">
        rounded:
        <v-chip-group filter color="primary" v-model="rounded">
          <v-chip value="sm" text="sm" />
          <v-chip value="lg" text="lg" />
          <v-chip value="xl" text="xl" />
          <v-chip :value="true" text="true" />
          <v-chip value="pill" text="pill" />
        </v-chip-group>
      </div>
      <v-row>
        <v-col cols="12" sm="6">
          <v-text-field :label="label" model-value="asd" prepend-icon="mdi-map-marker" :rounded="rounded" />
          <v-text-field :label="label" model-value="asd" prepend-inner-icon="mdi-map-marker" :rounded="rounded" />
          <v-text-field append-icon="mdi-map-marker" :label="label" model-value="asd" :rounded="rounded" />
          <v-text-field append-inner-icon="mdi-map-marker" :label="label" model-value="asd" :rounded="rounded" />
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field :label="label" model-value="asd" prepend-icon="mdi-map-marker" variant="solo" :rounded="rounded" />
          <v-text-field :label="label" model-value="asd" prepend-inner-icon="mdi-map-marker" variant="solo" :rounded="rounded" />
          <v-text-field append-icon="mdi-map-marker" :label="label" model-value="asd" variant="solo" :rounded="rounded" />
          <v-text-field append-inner-icon="mdi-map-marker" :label="label" model-value="asd" variant="solo" :rounded="rounded" />
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field :label="label" model-value="asd" prepend-icon="mdi-map-marker" variant="outlined" :rounded="rounded" />
          <v-text-field :label="label" model-value="asd" prepend-inner-icon="mdi-map-marker" variant="outlined" :rounded="rounded" />
          <v-text-field append-icon="mdi-map-marker" :label="label" model-value="asd" variant="outlined" :rounded="rounded" />
          <v-text-field append-inner-icon="mdi-map-marker" :label="label" model-value="asd" variant="outlined" :rounded="rounded" />
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field :label="label" model-value="asd" prepend-icon="mdi-map-marker" variant="outlined" :rounded="rounded" />
          <v-text-field :label="label" model-value="asd" prepend-inner-icon="mdi-map-marker" variant="outlined" :rounded="rounded" />
          <v-text-field append-icon="mdi-map-marker" :label="label" model-value="asd" variant="outlined" :rounded="rounded" />
          <v-text-field append-inner-icon="mdi-map-marker" :label="label" model-value="asd" variant="outlined" :rounded="rounded" />
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

<script setup>
  import { ref } from 'vue'
  const rounded = ref(undefined)
  const label = ref('test test test test test test test test test test test test test test')
</script>

[J-Sek]

Outlined version needs some additional treatment

• avoid cutting short labels
• show the missing part of outline
• (existing issue) keep right borders rounded

screenshot

[J-Sek]

A small regression was introduced in recently merged #20349, so I decided to patch it as well.

As as side-note: I don't like that rule because floating label shifts too much. It would be nice to have a new --v-field-border-radius variable so we can calculate flex-basis and max-width from the exact rounding. example