Popover

<armada:popover>
    <x-slot:trigger><armada:button icon="info">Plan detayları</armada:button></x-slot:trigger>
    <div class="sc-col" style="gap:8px">
        <armada:text variant="strong">Pro plan</armada:text>
        <armada:text size="sm" variant="muted">Sınırsız proje, 100 GB depolama ve öncelikli destek.</armada:text>
        <armada:progress :value="62" label="Depolama" show-value />
    </div>
</armada:popover>

<armada:popover width="300px">
    <x-slot:trigger><armada:button icon="user-plus" variant="solid" tone="primary">Davet et</armada:button></x-slot:trigger>
    <form class="sc-col" style="gap:12px" onsubmit="event.preventDefault(); Armada.toast({ title: 'Davet gönderildi', tone: 'success' })">
        <armada:input label="E-posta" type="email" icon="mail" placeholder="ekip@site.com" />
        <armada:select label="Rol" :options="['member' => 'Üye', 'admin' => 'Yönetici']" />
        <armada:button type="submit" variant="solid" tone="primary" block>Gönder</armada:button>
    </form>
</armada:popover>