feat(VBtn): spaced prop to move icons to the edges

[J-Sek]

Description

resolves #21652

Markup:

<template>
  <v-app>
    <v-container max-width="800">
      <v-tabs :items="tabs" density="compact" slider-color="red" spaced="end" grow />
      <v-tabs :items="tabs" density="comfortable" slider-color="red" spaced="start" grow />
      <v-tabs :items="tabs" density="default" slider-color="red" spaced="center" grow />
    </v-container>
    <v-container max-width="800">
      <v-tabs :items="tabs" direction="vertical" slider-color="red">
        <v-tab append-icon="mdi-chart-line" prepend-icon="mdi-numeric-1-box" spaced="end" width="240">Charts</v-tab>
        <v-tab append-icon="mdi-grid" prepend-icon="mdi-numeric-2-box" spaced="start" width="240">Grid</v-tab>
        <v-tab append-icon="mdi-snail" prepend-icon="mdi-numeric-3-box" spaced="center" width="240">Snails</v-tab>
      </v-tabs>
    </v-container>
    <v-container class="d-flex justify-space-between" max-width="800">
      <v-tabs :items="example1" direction="vertical" slider-color="red" spaced="end" />
      <v-tabs :items="example2" direction="vertical" slider-color="red" spaced="start" />
    </v-container>
  </v-app>
</template>

<script setup>
  const tabs = [
    { text: 'Charts', appendIcon: 'mdi-chart-line' },
    { text: 'Calendar', prependIcon: 'mdi-calendar' },
    'Timeline',
    'Grid',
  ]

  const example1 = [
    { text: 'My Files', appendIcon: 'mdi-folder', width: 250 },
    { text: 'Shared with me', appendIcon: 'mdi-account-multiple', width: 250 },
    { text: 'Starred', appendIcon: 'mdi-star', width: 250 },
    { text: 'Recent', appendIcon: 'mdi-update', width: 250 },
    { text: 'Backups', appendIcon: 'mdi-cloud-upload', width: 250 },
  ]

  const example2 = [
    { text: 'My Files', prependIcon: 'mdi-numeric-1-box', width: 250 },
    { text: 'Shared with me', prependIcon: 'mdi-numeric-2-box', width: 250 },
    { text: 'Starred', prependIcon: 'mdi-numeric-3-box', width: 250 },
    { text: 'Recent', prependIcon: 'mdi-numeric-4-box', width: 250 },
    { text: 'Backups', prependIcon: 'mdi-numeric-5-box', width: 250 },
  ]
</script>