Popover alignment positions.

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">Start</Button>
      </PopoverTrigger>
      <PopoverContent align="start" class="w-auto">
        <p>Aligned to start</p>
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">Center</Button>
      </PopoverTrigger>
      <PopoverContent align="center" class="w-auto">
        <p>Aligned to center</p>
      </PopoverContent>
    </Popover>
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" size="sm">End</Button>
      </PopoverTrigger>
      <PopoverContent align="end" class="w-auto">
        <p>Aligned to end</p>
      </PopoverContent>
    </Popover>
  </div>
</template>