Komponen, A sampai Z.

<Accordion bind:value items={[{ value: 'a', title: 'Pertanyaan', content: 'Jawaban.' }]} />

<Alert variant="warning" title="Jatuh tempo 3 hari lagi">INV/2026/014 belum dibayar.</Alert>

<AlertDialog
	title="Hapus INV/2026/014?"
	description="Tindakan ini tidak bisa dibatalkan."
	confirmLabel="Ya, hapus"
	onConfirm={hapus}
>
	{#snippet trigger(props)}<Button {...props} variant="danger">Hapus</Button>{/snippet}
</AlertDialog>

<AppShell>
	{#snippet brand()}<p class="display text-2xl">Studio</p>{/snippet}
	{#snippet sidebar()}<NavList label="Kerja" items={menu} active="today" />{/snippet}
	{#snippet header()}<p class="display text-2xl">Hari ini</p>{/snippet}
	Isi halaman…
</AppShell>

<AspectRatio ratio={16 / 9} class="border-2 border-border">
	<img src={gambar} alt="Tangkapan layar beranda" class="size-full object-cover" />
</AspectRatio>

<Avatar src={foto} alt="Sari Wulandari" fallback="SW" size="lg" />

<Badge variant="success">Lunas</Badge>

<Breadcrumb
	label={m.remah_roti()}
	items={[{ label: 'Studio', href: '/studio' }, { label: 'Invoice', href: '/studio/invoices' }, { label: 'INV/2026/014' }]}
/>

<Button onclick={simpan} loading={menyimpan}>Simpan</Button>
<Button variant="outline" href="/studio/invoices">Semua invoice</Button>
<Button variant="tautan" size="sm" href="/process">Lihat prosesnya <ArrowRight /></Button>
<Button variant="ghost" size="icon-sm" aria-label="Tutup"><X /></Button>
<Button type="submit" name="tema" value="dark">Gelap</Button>

<!-- Saringan Studio: keadaan di URL, jadi tetap tautan -->
<ButtonGroup label="Saringan" menempel>
	<Button href="?status=baru" size="sm" variant={aktif ? 'secondary' : 'outline'} aria-current={aktif ? 'page' : undefined}>Baru</Button>
	…
</ButtonGroup>

<!-- Tema tanpa JavaScript: form POST biasa -->
<form method="POST" action="/tema">
	<ButtonGroup label="Tema" menempel>
		<Button type="submit" name="tema" value="dark" size="sm" variant={aktif ? 'primary' : 'outline'} aria-pressed={aktif}>Gelap</Button>
	</ButtonGroup>
</form>

<Calendar bind:value={tanggal} label="Tanggal rapat" />

<Card eyebrow="Company profile · mulai 2 Okt" title="Toko Kue Bu Sari" class="shadow-pop">
	Isi kartu…
	{#snippet footer()}<Button size="sm" variant="ghost" class="ml-auto">Buka</Button>{/snippet}
</Card>

<Carousel label="Tangkapan layar proyek" slides={[{ id: 'a', label: 'Beranda' }]} bind:index>
	{#snippet children(id)}<img src={gambar[id]} alt="" />{/snippet}
</Carousel>

<Field label="Saya setuju dengan ketentuan" inline>
	<Checkbox name="setuju" bind:checked={setuju} />
</Field>

<CodeBlock bahasa="ts" kode={cuplikan} />

<Collapsible judul="Karya baru" ikon={Plus} bind:open={terbuka}>
	<form method="POST" action="?/tambah">…</form>
</Collapsible>

<Collapsible variant="ringan">
	{#snippet kepala()}Balasan <Badge>2</Badge>{/snippet}
	…
</Collapsible>

<Field label="Kota klien">
	<Combobox items={kota} bind:value name="kota" placeholder="Ketik nama kota…" />
</Field>

<CommandDialog bind:open groups={[{ heading: 'Halaman', items: [{ label: 'Invoice', keywords: ['tagihan'], onSelect: () => goto('/studio/invoices') }] }]} />
<!-- hotkey: ⌘K / Ctrl+K membuka dari mana saja — pasang SATU per halaman -->
<CommandDialog hotkey groups={…} />

<ContextMenu items={aksi} class="block">
	<BarisInvoice {invoice} />
</ContextMenu>

<DatePicker bind:value={jatuhTempo} name="due_date" label="Jatuh tempo" />

<Dialog bind:open title="Ubah data klien" description="…">
	{#snippet trigger(props)}<Button {...props} variant="outline">Ubah</Button>{/snippet}
	<Field label="Nama"><Input /></Field>
	{#snippet footer()}
		<Button variant="outline" onclick={() => (open = false)}>Batal</Button>
		<Button onclick={simpan}>Simpan</Button>
	{/snippet}
</Dialog>

<Empty icon={Inbox} title="Belum ada prospek" description="Pesan dari formulir kontak muncul di sini.">
	{#snippet action()}<Button size="sm" variant="outline">Bagikan tautan kontak</Button>{/snippet}
</Empty>
<Empty ukuran="sm" title="Tidak ada hasil" />

<Field label="Email" hint="Untuk balasan." error={galat.email} required teksWajib={m.wajib()}>
	<Input type="email" name="email" />
</Field>

<Grafik
	judul="Prospek per bulan"
	data={bulanan}
	sumbuX="b"
	seri={[{ kunci: 'prospek', label: 'Prospek', warna: 'var(--accent)' }]}
/>

<HoverCard>
	{#snippet trigger(props)}<a {...props} href="/projects/qomunal">Qomunal</a>{/snippet}
	<p class="font-bold">PT Qomunal Media Pratama</p>
</HoverCard>

<Field label="Nama">
	<Input name="nama" bind:value={nama} autocomplete="name" />
</Field>

<Field label="Anggaran">
	<InputGroup prefix="Rp" suffix=",-" inputmode="numeric" name="anggaran" />
</Field>
<InputGroup ikon={Search} type="search" aria-label="Cari prospek" />

<Item judul="Company profile" deskripsi="5 halaman · selesai 3 minggu">
	{#snippet awal()}<Globe class="size-5" aria-hidden="true" />{/snippet}
	{#snippet aksi()}<Button size="sm" variant="outline">Pilih</Button>{/snippet}
</Item>

<Kbd>⌘</Kbd><Kbd>K</Kbd>

<Kisi elemen="ol" kolom={{ sm: 2, lg: 4 }}>
	{#each tahap as t (t.id)}
		<KisiSel elemen="li">…</KisiSel>
	{/each}
</Kisi>

<KisiSel href={l('/services')}>
	<h3 class="display text-3xl">Company profile</h3>
	<p class="text-muted">…</p>
</KisiSel>

<Label for="kota" wajib>Kota</Label>
<Input id="kota" name="kota" required />

<Label for="urut" variant="eyebrow">Urutkan</Label>

<Menu items={aksi} align="end">
	{#snippet trigger(props)}
		<Button {...props} variant="outline" size="icon" aria-label="Aksi invoice"><MoreHorizontal /></Button>
	{/snippet}
</Menu>

<Menubar
	label="Editor"
	menus={[{ id: 'berkas', nama: 'Berkas', items: [{ id: 'simpan', nama: 'Simpan', aksi: simpan }] }]}
/>

<Field label="Urutkan">
	<NativeSelect name="urut" bind:value={urut}>
		<option value="baru">Terbaru</option>
		<option value="nominal">Nominal</option>
	</NativeSelect>
</Field>

<NavList
	label="Kerja"
	active={halaman}
	items={[{ key: 'leads', label: 'Prospek', href: resolve('/studio/leads'), icon: Inbox, badge: 4 }]}
/>

<NavigationMenu label="Bagian halaman" items={[{ label: 'Ringkasan', href: '#ringkasan', aktif: true }]} />

<Pagination bind:page count={total} perPage={20} />

<PinInput name="kode" label="Kode sekali pakai" bind:value={kode} onComplete={verifikasi} />

<Popover bind:open align="end">
	{#snippet trigger(props)}<Button {...props} variant="outline">Bagikan</Button>{/snippet}
	Isi interaktif…
</Popover>

<Progress value={persen} label="Unggah berkas" />
<Progress value={null} label="Memproses" />

<RadioGroup name="desain" bind:value aria-label="Tingkat desain" items={[{ value: 'rapi', label: 'Rapi', hint: 'Termasuk paket.' }]} />

<Resizable label="Lebar daftar" bind:value={lebar}>
	{#snippet awal()}Daftar…{/snippet}
	{#snippet akhir()}Pratinjau…{/snippet}
</Resizable>

<ScrollArea label="Riwayat aktivitas" tinggi="12rem">…</ScrollArea>

<Field label="Paket">
	<Select items={paket} bind:value name="paket" required />
</Field>

<Separator />
<Separator vertikal />

<Sheet side="bottom" title="Saringan" description="…">
	{#snippet trigger(props)}<Button {...props} variant="outline">Saring</Button>{/snippet}
	Isi panel…
</Sheet>

<div aria-busy="true">
	<span class="sr-only">Memuat papan…</span>
	<Skeleton class="aspect-square w-full max-w-[34rem] border-2 border-border" />
</div>

<Slider label="Jumlah halaman" bind:value={halaman} min={1} max={12} name="halaman" />

<thead><tr>
	<SortableTh label="Total" align="right" dir={kunci === 'total' ? arah : null} onSort={() => urutkan('total')} />
</tr></thead>

<Spinner label="Mengambil data proyek" />
<Button loading>Simpan</Button> <!-- Button memakai Spinner sendiri -->

<Stat label="Belum dibayar" value="9,8 jt" delta="1 terlambat" trend="down" ukuran="sm" />

<Field label="Notifikasi email" inline>
	<Switch name="notifikasi" bind:checked={notifikasi} />
</Field>

<Table caption="Invoice terakhir.">
	<thead><tr><th scope="col">Nomor</th><th scope="col" class="num">Total</th></tr></thead>
	<tbody>
		{#each baris as r (r.no)}<tr><td>{r.no}</td><td class="num">{rupiah(r.total)}</td></tr>{/each}
	</tbody>
</Table>

<Tabs bind:value items={[{ value: 'a', label: 'Ringkasan' }]}>
	{#snippet panel(v)}…{/snippet}
</Tabs>

<Field label="Ceritakan kebutuhannya">
	<Textarea name="pesan" bind:value maxlength={2000} />
</Field>

toast({ title: 'Pesan terkirim', description: 'Dibalas dalam 24 jam kerja.', variant: 'success' });
toast({ title: 'Prospek diarsipkan', action: { label: 'Urungkan', onClick: kembalikan } });

<Toggle bind:pressed={arsip}>Tampilkan arsip</Toggle>
<!-- Ikon saja: baru di sini label dipakai -->
<Toggle bind:pressed={tebal} label="Tebal"><Bold /></Toggle>

<ToggleGroup label="Mata uang" bind:value items={[{ value: 'idr', label: 'IDR' }, { value: 'usd', label: 'USD' }]} />

<Tooltip content="Salin ke papan klip">
	{#snippet children(props)}
		<Button {...props} variant="ghost" size="icon" aria-label="Salin"><Copy /></Button>
	{/snippet}
</Tooltip>

<Prompt label="Tanya tentang layanan" bind:value sibuk={memuat} onkirim={tanya} maks={500} />

<Jejak label="Status permintaan" langkah={[{ id: 'kirim', judul: 'Mengirim', status: 'selesai' }]} />