CSS Referensi API

Referensi API CSS mencakup lapisan komponen berbasis kelas pantoken: komponen, utilitas, aturan global, dan deklarasi yang dibangun di atas sistem token.

Komponen

Nama	Kelas	Ringkasan
agent-shell	.instui-agent-shell	Sebuah wadah permukaan untuk agen AI.
alert	.instui-alert	Pesan inline dengan bilah warna status dan glif status yang dimasker dari set ikon bersama.
avatar	.instui-avatar	Avatar pengguna yang menampilkan inisial atau gambar, berbentuk lingkaran secara default.
badge	.instui-badge	Titik hitung atau status kecil yang ditempatkan di sudut target.
banner	.instui-banner	Permukaan pesan yang dapat ditutup, berikon untuk pengumuman tingkat halaman atau dalam konteks.
billboard	.instui-billboard	Blok keadaan kosong besar atau seruan untuk bertindak: ikon atau gambar hero, judul, dan pesan.
breadcrumb	.instui-breadcrumb	Jejak breadcrumb dengan pemisah; remah terakhir adalah halaman saat ini.
breadcrumb.link	li	Sebuah remah (InstUI Breadcrumb.Link), sebuah <li> di <ol> induknya; yang terakhir adalah halaman saat ini.
button	.instui-button	Kontrol aksi yang dapat diakses, bergaya dari palet token; primari secara default.
byline	.instui-byline	Objek media: figur hero di samping judul dan deskripsi.
calendar	.instui-calendar	Grid bulan statis dengan navigasi, header hari dalam minggu, dan sel hari.
calendar.day	.day	Sebuah sel hari (InstUI Calendar.Day); -today, -selected, dan -outside-month menandai statusnya.
card	.instui-card	Sebuah wadah permukaan yang menerima konten arbitrer.
checkbox	.instui-checkbox	Sebuah checkbox native dan labelnya, atau sebuah switch melalui -variant-toggle.
close-button	.instui-close-button	Tombol ikon transparan yang menggambar glif × sendiri, dalam tiga ukuran plus varian on-color.
context-view	.instui-context-view	Callout yang terangkat dengan caret, dapat diposisikan di sisi mana pun; berfungsi sebagai [popover] native.
drawer-layout	.instui-drawer-layout	Tata letak terbelah dengan baki samping yang dapat dilipat dan panel konten utama yang dapat digulir.
drawer-layout.content	.content	Panel konten utama yang mengisi ruang tersisa di samping baki.
drawer-layout.tray	.tray	Panel samping di samping konten utama, dengan overlay opsional dan modifier permukaan seperti baki.
file-drop	.instui-file-drop	Zona drop file dengan keadaan hover, diterima, dan ditolak.
form-field	.instui-form-field	Pembungkus field form: label, kontrolnya, dan tata letak inline, required, atau readonly.
form-field-group	.instui-form-field-group	Sebuah grup <fieldset> dengan legend, tata letak kolom atau inline, dan spasi yang dapat dikonfigurasi.
form-field-messages	.instui-form-field-messages	Bantuan field dan pesan validasi — hint, error, success, dan hanya untuk screen-reader — dengan glif pada error dan success.
heading	.instui-heading	Tipografi heading dari -level-h1 sampai -level-h6.
img	.instui-img	Sebuah <img> bergaya dengan modifier tampilan, crop, dan efek yang bertumpuk.
in-place-edit	.instui-in-place-edit	Sebuah [contenteditable] yang terbaca sebagai teks sampai difokuskan, lalu menampilkan chrome input.
input-group	.instui-input-group	Fasad di sekitar input teks dengan slot ikon di depan dan belakang.
link	.instui-link	Hyperlink bergaya dengan ukuran, varian inverse untuk latar gelap, dan bentuk inline atau tidak bergaya.
list	.instui-list	Daftar dengan jarak item yang digerakkan oleh token.
list.item	.instui-list	Sebuah item daftar (InstUI List.Item).
mask	.instui-mask	Overlay dalam aliran yang mengisi induk yang diposisikan dan memusatkan isinya — mis. spinner di atas kartu. Untuk modal, utamakan <dialog> native ( ::backdrop-nya adalah mask). Setiap modifier ini juga tersedia secara global (kosong, atau dirangkai ke komponen lain) — lihat utilitas global mask.
menu	.instui-menu	Permukaan dropdown berisi item, grup, dan pemisah.
menu.group	.group	Judul grup berlabel (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Entri menu (InstUI Menu.Item); tambahkan -disabled, -highlighted, atau -active/[aria-checked].
menu.separator	.separator	Garis pembagi antara item (InstUI Menu.Separator).
metric	.instui-metric	Statistik berlabel — nilai besar di atas keterangan.
modal	.instui-modal	Permukaan dialog (berfungsi pada <dialog> native); bagian header/body/footer.
modal.body	.body	Wilayah konten (InstUI Modal.Body); sebuah <img> tunggal menjadi full-bleed.
modal.footer	.footer	Baris aksi (InstUI Modal.Footer).
modal.header	.header	Baris judul (InstUI Modal.Header).
number-input	.instui-number-input	Fasad input angka dengan kolom spinner +/-.
pagination	.instui-pagination	Navigasi halaman: halaman bernomor, panah pertama, sebelumnya, berikutnya, dan terakhir, serta elipsis untuk celah.
pagination.page	.page	Tautan atau tombol halaman (InstUI Pagination.Page); halaman saat ini membawa [aria-current].
pill	.instui-pill	Label status kompak; tambahkan glif di depan dengan bentuk -icon-<name> bersama.
popover	.instui-popover	Permukaan yang terangkat untuk [popover] native, diposisikan dengan CSS anchor positioning.
progress	.instui-progress	Bar progres determinate dengan meter berwarna, ukuran, dan label nilai opsional.
progress-circle	.instui-progress-circle	Cincin progres melingkar yang digerakkan oleh properti kustom --value dan --value-max.
radio	.instui-radio	Radio button native dan labelnya.
radio-input-group	.instui-radio-input-group	Sebuah <fieldset> radio single-select, polos atau sebagai toggle segment yang terhubung.
range-input	.instui-range-input	Slider range bergaya dengan gelembung nilai inverse.
rating	.instui-rating	Penilaian bintang dengan glif terisi dan kosong serta label numerik opsional.
side-nav-bar	.instui-side-nav-bar	Rel navigasi vertikal berisi item ikon-di-atas-label, dengan mode diperkecil hanya-ikon.
side-nav-bar.item	.item	Entri navigasi (InstUI SideNavBar.Item); -selected menandai yang aktif.
simple-select	.instui-simple-select	Native <select> yang diberi gaya dengan caret, menyesuaikan status dan ukuran input teks.
spinner	.instui-spinner	Cincin pemuatan animasi; beri role="status" dan aria-label.
table	.instui-table	Tabel data bergaya untuk th dan td plus keterangan opsional, dengan tata letak hover, tetap, dan kartu-tertumpuk.
table.body	tbody	Grup baris data tabel (InstUI Table.Body).
table.cell	td	Sel data (InstUI Table.Cell).
table.col-header	th	Sel header kolom (InstUI Table.ColHeader); gaya default th ditimpa oleh table.row-header untuk th[scope="row"].
table.head	thead	Grup baris header tabel (InstUI Table.Head).
table.row	tr	Baris tabel (InstUI Table.Row).
table.row-header	th[scope="row"]	Sel header baris (InstUI Table.RowHeader); bergaya dari token row-header, bukan token column-header.
tabs	.instui-tabs	Set panel bertab: daftar tab, tab yang dapat dipilih, dan panel-panelnya.
tabs.panel	.panel	Panel konten untuk sebuah tab (InstUI Tabs.Panel).
tabs.tab	.tab	Tombol tab tunggal (InstUI Tabs.Tab, dikonfigurasi melalui daftar tab induk Tabs); -selected menandai yang aktif.
tag	.instui-tag	Chip inline untuk kata kunci atau filter.
text	.instui-text	Tipografi teks badan dengan modifikator ukuran, ketebalan, warna, dan gaya.
text-area	.instui-text-area	Native <textarea> yang diberi gaya dan dapat diubah ukurannya dengan status dan ukuran sama seperti input teks.
text-input	.instui-text-input	Native <input> yang diberi gaya — termasuk date, time, dan datetime-local, di mana browser menyediakan pemilih — dengan status validasi dan ukuran.
toggle-details	.instui-toggle-details	Native <details> disclosure yang diberi gaya dengan chevron berputar.
toggle-group	.instui-toggle-group	Disclosure berpagar yang dibangun di atas <details>: baris ringkasan dengan chevron dan konten yang dapat dilipat.
tooltip	.instui-tooltip	Tooltip gelembung CSS untuk hover dan fokus, dapat diposisikan di sisi manapun.
tray	.instui-tray	Panel dipasang di tepi yang meluncur masuk dari sisi manapun; sebuah native [popover] atau <dialog>.
tree-browser	.instui-tree-browser	Pohon disclosure dari koleksi bersarang dan item daun, dengan chevron yang berputar.
view	.instui-view	Primitif View: kotak netral dengan modifikator kunci-nilai untuk latar, border, radius, bayangan, display, posisi, overflow, dan kursor. Setiap modifikator ini juga tersedia secara global (tanpa awalan, atau digabungkan ke komponen lain) — lihat utilitas background/border/shadow/display/position/overflow/cursor.

Utilitas

Nama	Kelas	Ringkasan
color	.--text-danger	Utilitas warna semantik: .--bg-<name>, .--text-<name> (alias sebagai .--color-<name>), dan .--border-<name> untuk palet semantik yang dikurasi. Masing-masing juga memiliki modifier alias terlampir-komponen (mis. -bg-danger pada setiap .instui-<component>).
cursor	.--cursor-pointer	cursor sebagai kelas global yang dapat disusun — .--cursor-<value> — dapat digunakan sendiri atau digabungkan ke komponen mana pun (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilitas flex/grid gap pada skala spasi, ejaan pendek (--gap-sm) atau panjang (--gap-small). Dapat digunakan sendiri atau digabungkan ke komponen mana pun (.instui-view.--gap-sm) — komponen yang sudah menetapkan gap mereka dari token khusus-komponen mungkin dapat ditimpa.
icon	.instui-icon	Sistem ikon: ukuran .instui-icon plus pelukis bersama -icon-<name> yang men-mask glif (dalam currentColor) sebelum elemen manapun.
layout	.--display-flex	Utilitas display dan text-align — .--display-<value> dan .--text-align-<value> — sebagai kelas global yang dapat disusun, dapat digunakan sendiri atau digabungkan ke komponen mana pun.
maskglobal	.--mask-overlay	Salinan global ganda dari modifier overlay komponen mask — --mask-overlay, --mask-fullscreen, --mask-blur — dapat digunakan sendiri atau digabungkan ke komponen mana pun, tanpa membungkus dalam elemen .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y sebagai kelas global yang dapat disusun — .--overflow-x-<value> / .--overflow-y-<value> — dapat digunakan sendiri atau digabungkan ke komponen mana pun.
position	.--position-relative	position sebagai kelas global yang dapat disusun — .--position-<value> — dapat digunakan sendiri atau digabungkan ke komponen mana pun (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Kelas tampil/sembunyi berdasarkan lebar viewport atau kontainer pada skala breakpoint bertema.
screen-reader-content	.instui-screen-reader-content	Menyembunyikan konten secara visual sambil tetap membuatnya tersedia untuk teknologi bantu (pola klip standar).
spacing	.--p-md	Utility margin dan padding — .--m<side>-<step> / .--margin-<side>-<step> dan .--p<side>-<step> / .--padding-<side>-<step> pada skala spasi (sisi t/b/s/e/x/y atau tidak ada, dieja pendek atau panjang — misalnya --mb-sm dan --margin-bottom-small adalah aturan yang sama; margin juga menerima auto). Dapat digunakan sendiri atau dirangkai ke komponen mana pun (mis. class="instui-view --mb-sm").
stacking	.--stack-topmost	Utility kedalaman z-index — .--stack-<level> (deepest, below, above, topmost) — dapat digunakan sendiri atau dirangkai ke komponen mana pun, sehingga lapisan menumpuk secara dapat diprediksi tanpa angka yang disetel manual.
transition	.instui-transition.-transition-fade-entering	Kelas status animasi untuk komponen Transition — .instui-transition dan kelas status (-transition-fade-entering, -transition-scale-exited, dst.) — dapat digunakan sendiri atau dirangkai ke komponen mana pun.
truncate	.--truncate	Pemendekan ellipsis dengan pembatasan baris yang dikontrol oleh --lines — dapat digunakan sendiri atau dirangkai ke komponen mana pun (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Garis luar untuk debug tata letak: gabungkan .-with-visual-debug ke elemen mana pun untuk menandai kotak dan anak langsungnya, sehingga struktur tata letak terlihat sekilas.

Aturan

Nama	Kelas	Ringkasan
base	*	Reset global opsional: box-sizing, permukaan halaman, warna teks dan font dasar, color-scheme, serta default tautan.
prose	:where(body)	Default tipografi untuk HTML mentah — judul, paragraf, daftar, tautan, dan kode — diterapkan otomatis di mana pun diimpor (default :where(body)); berikan options.scope untuk menargetkan root konten yang berbeda (mis. .vp-doc).

Plugins

Nama	Kelas	Ringkasan
logos	.logos	Logo produk Instructure sebagai token gambar CSS: --instui-logo-<product>-<layout>-<mode> berisi data-URI SVG, sehingga logo dapat digambar mis. dengan background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Kelas utilitas opsional untuk palet primitif mentah: .instui-bg-/fg-/border-primitive-color-<name> mewarnai dari token warna primitif, plus utilitas font-family/font-weight untuk token font primitif. Dipisahkan dari utilitas semantik agar override di sana tetap hanya bersifat semantik.
visual-debug	.-with-visual-debug	Garis luar untuk debug tata letak: gabungkan .-with-visual-debug ke elemen mana pun untuk menandai kotak dan anak langsungnya, sehingga struktur tata letak terlihat sekilas.

layout

Nama	Kelas	Ringkasan
callout	div[class~="instui-callout"]	Peringatan informasi inline untuk pengingat atau catatan singkat.
hero	div[class~="instui-hero"]	Bagian header lebar-penuh dengan judul, subjudul, dan gambar latar opsional.
page-layout	div[class~="instui-page-layout"]	Tata letak halaman standar tiga-kolom dengan header, sidebar, dan konten utama.
rubric-note	div[class~="instui-rubric-note"]	Catatan terstruktur dengan kategori rubrik dan indikator penilaian.
testimonial	div[class~="instui-testimonial"]	Tampilan kutipan atau testimoni dengan atribusi dan gambar opsional.
two-column	div[class~="instui-two-column"]	Tata letak dua-kolom dengan wilayah konten kiri dan kanan.
wrapper	body[class~="instui-display-flex"]	Baris app-shell: navigasi samping, kontainer dengan header, dan panel opsional.