fix(variant): clip underlay and overlay with overflow

[J-Sek]

fixes #22868

• covers VChip, VAlert, VCard, VAvatar, VBtn, VIconBtn
• adds overflow: hidden to VBtn, VIconBtn, VStepperItem
• cleanup unused classes .v-list__overlay and .v-card__content
• avoids further changes in VField

Markup:

<template>
  <v-app>
    <v-container>
      <v-avatar
        border="lg"
        color="primary"
        rounded="lg"
        style="zoom: 3"
        variant="tonal"
      >
        <v-icon icon="mdi-bug-outline" />
      </v-avatar>
      <v-card
        border="lg"
        color="primary"
        rounded="0"
        style="zoom: 3"
        variant="tonal"
        link
      >
        <v-icon icon="mdi-bug-outline" />
      </v-card>
      <v-chip
        border="lg"
        color="primary"
        rounded="lg"
        style="zoom: 3"
        variant="tonal"
      >
        <v-icon icon="mdi-bug-outline" />
      </v-chip>
      <v-alert
        border="lg"
        color="primary"
        rounded="lg"
        style="zoom: 3"
        variant="tonal"
      >
        <v-icon icon="mdi-bug-outline" />
      </v-alert>
      <v-btn
        border="lg"
        color="primary"
        rounded="lg"
        style="zoom: 3"
        variant="tonal"
      >
        <v-icon icon="mdi-bug-outline" />
      </v-btn>
      <v-pagination
        :length="4"
        rounded="circle"
      />

      <v-pagination
        :length="4"
        rounded="0"
      />

      <v-sheet
        class="d-inline-flex ga-1 pa-4 align-center justify-center mx-auto"
        color="surface-light"
        rounded="pill"
      >
        <v-sheet
          :rounded="!mic ? 'lg' : 'xl'"
          class="overflow-visible d-flex align-center"
          color="surface"
          height="48"
          width="88"
          flat
        >
          <v-icon-btn
            v-model:active="micOptions"
            :active-variant="!mic ? 'flat' : 'text'"
            :base-variant="!mic ? 'flat' : 'text'"
            :color="!mic ? 'error' : ''"
            :rotate="micOptions ? 180 : 0"
            :rounded="!mic ? 'lg' : 'circle'"
            icon="mdi-chevron-up"
            size="48"
            hide-overlay
          />

          <v-icon-btn
            v-model:active="mic"
            :rounded="!mic ? 'lg' : 'circle'"
            active-color=""
            active-icon="mdi-microphone"
            active-variant="tonal"
            base-variant="flat"
            class="ms-n2"
            color="#f9dedc"
            icon="mdi-microphone-off"
            size="48"
            v-ripple
          />
        </v-sheet>

        <v-sheet
          :rounded="!video ? 'lg' : 'xl'"
          class="overflow-visible d-flex align-center"
          color="surface"
          height="48"
          width="88"
          flat
        >
          <v-icon-btn
            v-model:active="videoOptions"
            :active-variant="!video ? 'flat' : 'text'"
            :base-variant="!video ? 'flat' : 'text'"
            :color="!video ? 'error' : ''"
            :rotate="videoOptions ? 180 : 0"
            :rounded="!video ? 'lg' : 'circle'"
            icon="mdi-chevron-up"
            size="48"
            hide-overlay
          />

          <v-icon-btn
            v-model:active="video"
            :rounded="!video ? 'lg' : 'circle'"
            active-color=""
            active-icon="mdi-video-outline"
            active-variant="tonal"
            base-variant="flat"
            class="ms-n2"
            color="#f9dedc"
            icon="mdi-video-off"
            size="48"
          />
        </v-sheet>
      </v-sheet>
    </v-container>
  </v-app>
</template>

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

  const mic = shallowRef(true)
  const micOptions = shallowRef(false)
  const video = shallowRef(true)
  const videoOptions = shallowRef(false)
</script>