// +layout.svelte (sekali)
import '@vilacation/designkit/styles.css';

// komponen
import { Button, VillaCard, TabBar } from '@vilacation/designkit';

Font (Fraunces dan Montserrat) tidak ikut dibundel; frontend sudah memuatnya lewat @fontsource-variable. Harga, tanggal, dan teks dikirim sudah diformat dari pemanggil: kit tidak mengarang atau memformat data.

Varian

Ukuran

State

Brand, Outline, dan Link adalah tiga varian Button di mobile (ui/button.tsx); Primary navy adalah tombol Sign In di web. Brand persis aslinya (teal-500 dengan teks putih), kontrasnya 2.16:1. Accent adalah pasangan aman (teal-800, 4.88:1). Outline di kit memakai teks teal-800 karena aslinya teks teal-500 di atas putih (2.16:1). Satu tombol utama per layar. Isi href untuk merender sebagai tautan.

Komponen signature. Persempit jendela di bawah 768px untuk melihat versi mobile (segmen bertumpuk, tombol Search lebar penuh). Memakai shadow float yang sama dengan nav bawah, karena sama-sama mengambang. Isi destination, dates, dan guests dengan teks yang sudah diformat; kosong menampilkan placeholder.

Tinggi 48px, font 16px (mencegah auto-zoom di iOS). Error ditandai warna dan teks bantu, tidak warna saja. Fokus memakai outline teal-600. Label, id, dan aria-describedby dihubungkan otomatis.

Chip (bisa diklik)

Badge status booking (usulan label, cocokkan dengan status backend)

Interaktif. Tombol menonaktifkan diri di batas min dan max; batas sebenarnya datang dari kapasitas villa, bukan dari kit.

Interaktif (klik awal lalu akhir). Tanggal tidak tersedia ditandai coret dan nonaktif, ilustrasi saja: kit tidak memvalidasi rentang yang melewati tanggal tidak tersedia, itu tugas logika booking. Minggu dimulai Senin. start, end, dan month bisa di-bind.

Pil mengambang, bukan bar penuh: radius 30, border tipis, shadow float, item aktif berlatar teal-50 dengan teks dan ikon teal-600 (geometri dari MobileNav.svelte dan bottom-navbar.tsx). Empat tujuan: Home, Explore, Messages, Profile; Messages dan Profile meminta login, tahan lewat onnavigate dengan event.preventDefault(). Di produk pakai prop fixed (menempel 12px dari bawah plus safe area, hilang ≥ 768px). Angka "3" pada badge hanya contoh tampilan.

Modal mengikuti AuthDialog.svelte: lebar 480 (560 untuk form panjang), radius 30, header berlatar teal-25. Drawer mengikuti SearchFilterDrawer.svelte: penuh layar di mobile, panel 448px mulai 640px. Keduanya: Escape dan klik scrim menutup, fokus pindah ke dialog (bukan ke field, supaya keyboard layar sentuh tidak langsung muncul), fokus kembali ke pemicu saat ditutup, scroll halaman dikunci. Scrim memakai warna solid, tanpa blur.

Tampilan statis

Warna dan perilaku dari ToastContainer.svelte: hilang sendiri setelah 5 detik, tumpukan di atas tengah (maks 400px), role="alert" hanya untuk error. Pasang <ToastContainer /> sekali di layout root; panggil toasts.show({ type, title }) dari mana saja.

Area sentuh 44px. Kotak centang dan switch terisi teal-800 (lulus AA dengan tanda putih). Counter memakai IconButton, dan tombol kurang/tambah nonaktif di batas min/max.

Tab terpilih: overview. Panah kiri/kanan berpindah tab. Untuk konten di dalam halaman; navigasi utama tetap TabBar.

Drawer dengan side="bottom": menempel di bawah, sudut atas radius 30, ada pegangan kecil, tinggi maksimum 88% layar. Mulai 640px dipusatkan selebar 560px. Perilaku sama dengan Drawer samping.

Semua PoolBedroomLiving room

Foto 1

Pool 1/5

Semua foto (5)

12345

Mengikuti PropertyGalleryDrawer.svelte: kategori, foto utama dengan panah dan penghitung, lalu semua foto sebagai thumbnail. Tanpa src tampil kotak bernomor (foto di sini belum ada). Biasanya dibungkus Drawer atau Modal. Panah 44px, thumbnail aria-pressed.

Kit tidak membundel peta. Frontend memakai Leaflet; MapFrame hanya bingkai dan atribusi, MapMarker penanda harga yang bisa dipasang di penyedia mana pun. Penanda memakai teal-800 (teal-600 dengan teks putih 11px hanya 2.98:1 di kode), aktif berlatar ink-900. Popup memakai kelas vc-map-popup. Penyedia dan lisensi tile perlu diputuskan dev team: frontend saat ini memuat tile dari mt1.google.com langsung.

Aturan: validasi saat submit, bukan saat mengetik. Setiap field salah mendapat pesan di bawahnya (Field error, ditandai warna, ikon, dan teks), plus ringkasan di atas form yang menerima fokus dan menaut ke tiap field. Isian tidak dihapus saat gagal.

Sign in

Prop links menampilkan navigasi horizontal mulai 768px; di mobile navigasi tetap TabBar. Tautan aktif teal-800 dengan garis bawah teal-600.