CSS API-viite

CSS-API-viite kattaa pantokenin luokkapohjaisen komponenttikerroksen: komponentit, utiliteetit, globaalit säännöt ja deklaroinnit, jotka on rakennettu token-järjestelmän päälle.

Komponentit

Nimi	Luokka	Yhteenveto
agent-shell	.instui-agent-shell	Pinta-astia AI-agenteille.
alert	.instui-alert	Tässä rivissä oleva viesti, jossa on tilaväripalkki ja maskattu tilakuvake jaetusta ikonipaketista.
avatar	.instui-avatar	Käyttäjän avatar, joka näyttää nimikirjaimet tai kuvan; oletuksena pyöreä.
badge	.instui-badge	Pieni laskuri- tai tilapiste, joka sijoitetaan kohteen kulmaan.
banner	.instui-banner	Suljettava, ikonoitu viestipinta sivutason tai kontekstissa annettaville ilmoituksille.
billboard	.instui-billboard	Suuri tyhjän tilan tai toimintakehotuksen lohko: sankari-ikoni tai kuva, otsikko ja viesti.
breadcrumb	.instui-breadcrumb	Murupolku erottimilla; viimeinen muru on nykyinen sivu.
breadcrumb.link	li	Murupala (InstUI Breadcrumb.Link), <li> vanhemman <ol>-elementissä; viimeinen on nykyinen sivu.
button	.instui-button	Saavutettavissa oleva toimintokontrolli, tyylitelty token-palettien mukaan; oletuksena päätoiminto.
byline	.instui-byline	Mediaobjekti: sankari-kuva otsikon ja kuvauksen vieressä.
calendar	.instui-calendar	Staattinen kuukausiruudukko, jossa navigaatio, viikonpäiväotsikot ja päiväsellit.
calendar.day	.day	Päiväselli (InstUI Calendar.Day); -today, -selected ja -outside-month merkitsevät sen tilan.
card	.instui-card	Pinta-astia, joka hyväksyy mielivaltaisen sisällön.
checkbox	.instui-checkbox	Natiivivalintaruutu ja sen etiketti, tai kytkin käyttämällä -variant-toggle.
close-button	.instui-close-button	Läpinäkyvä ikoni-painike, joka piirtää oman ×-kuvakkeen, kolmessa koossa ja on-värivariaantilla.
context-view	.instui-context-view	Korotettu huomautus, jossa on huuli (caret), sijoitettavissa mille tahansa puolelle; toimii natiivina [popover]-elementtinä.
drawer-layout	.instui-drawer-layout	Jaettu asettelu, jossa on kutistettavissa oleva sivulaatikko ja pääasiallinen vieritettävä sisältöruutu.
drawer-layout.content	.content	Pääsisältöruutu, joka täyttää jäljellä olevan tilan laukun vieressä.
drawer-layout.tray	.tray	Sivupaneeli pääsisällön vieressä, valinnaisella peitteellä ja laatikkomainen pinta-muokkaus.
file-drop	.instui-file-drop	Tiedostojen pudotusalue, jossa hover-, hyväksytty- ja hylätty-tilat.
form-field	.instui-form-field	Lomakekentän kääre: etiketti, sen kontrollit ja inline-, pakollinen- tai readonly-asettelut.
form-field-group	.instui-form-field-group	<fieldset>-ryhmä, jossa legend, sarake- tai riviasettelu ja konfiguroitava väli.
form-field-messages	.instui-form-field-messages	Kenttäohjeet ja validointiviestit — vihje, virhe, onnistuminen ja vain ruudunlukijalle — virhe- ja onnistumiskuvakkeella.
heading	.instui-heading	Otsikkotyyppi -level-h1:sta -level-h6:iin.
img	.instui-img	Tyylitelty <img>, jossa on display-, crop- ja effect-modifikaattoreita, jotka pinoutuvat.
in-place-edit	.instui-in-place-edit	[contenteditable], joka lukee tekstinä kunnes fokus, jolloin se näyttää syötekehyksen.
input-group	.instui-input-group	Tekstisyötteen julkisivu, jossa on leading- ja trailing-ikonipaikat.
link	.instui-link	Tyylitelty hyperlinkki, kokoja, invertattu varianti tummille taustoille sekä inline- tai ilman tyyliä -muodot.
list	.instui-list	Lista, jossa on token-ohjattu kohteiden väli.
list.item	.instui-list	Listan kohde (InstUI List.Item).
mask	.instui-mask	Virtausmukainen peite, joka täyttää positionoidun vanhemman ja keskittää sisältönsä — esim. spinner kortin päällä. Modaalille suositaan natiivia <dialog>-elementtiä (sen ::backdrop on maski). Jokainen näistä modifikaattoreista on myös saatavilla globaalisti (paljaana tai ketjutettuna mihin tahansa komponenttiin) — katso mask-globaalinen utiliteetti.
menu	.instui-menu	Itemeistä, ryhmistä ja erotusviivoista koostuva pudotusvalikon pinta.
menu.group	.group	Etiketöity ryhmän otsikko (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Valikon merkintä (InstUI Menu.Item); lisää -disabled, -highlighted tai -active/[aria-checked].
menu.separator	.separator	Erotusviiva kohteiden välillä (InstUI Menu.Separator).
metric	.instui-metric	Etiketöity tilasto — suuri arvo ja sen alapuolella kuvateksti.
modal	.instui-modal	Dialogipinta (toimii natiivin <dialog> kanssa); header/body/footer-osat.
modal.body	.body	Sisältöalue (InstUI Modal.Body); ainoa <img> venyy täyteen leveyteen.
modal.footer	.footer	Toimintorivi (InstUI Modal.Footer).
modal.header	.header	Otsikkorivi (InstUI Modal.Header).
number-input	.instui-number-input	Numero-syötteen julkisivu, jossa +/- spinner-sarake.
pagination	.instui-pagination	Sivunavigaatio: numeroidut sivut, ensimmäinen, edellinen, seuraava ja viimeinen nuoli sekä kapeneva ellipsi väleille.
pagination.page	.page	Sivulinkki tai -painike (InstUI Pagination.Page); nykyisellä sivulla on [aria-current].
pill	.instui-pill	Kompakti tilatunniste; lisää edellä oleva kuvake käyttäen jaettua -icon-<name>-muotoa.
popover	.instui-popover	Korotettu pinta natiiville [popover]-elementille, sijoitettu CSS-anchor-asettelulla.
progress	.instui-progress	Deterministinen edistymispalkki värillisellä mittarilla, kooilla ja valinnaisella arvolabelilla.
progress-circle	.instui-progress-circle	Pyöreä edistymisrengas, jota ohjaavat --value- ja --value-max-custom-propertyt.
radio	.instui-radio	Natiiviradiopainike ja sen etiketti.
radio-input-group	.instui-radio-input-group	Yhden valinnan radio <fieldset>, yksinkertainen tai yhdistetty segmentoituna kytkimenä.
range-input	.instui-range-input	Tyylitelty liukusäädin, jossa käänteinen arvo-kupla.
rating	.instui-rating	Tähtiarvostelu, jossa on täytettyjä ja tyhjiä kuvakkeita sekä valinnainen numeerinen etiketti.
side-nav-bar	.instui-side-nav-bar	Pystysuuntainen navigointiraita, jossa kuvakkeet ovat etikettien yläpuolella, ja minimoitu pelkkien kuvakkeiden tila.
side-nav-bar.item	.item	Navigaatiokohta (InstUI SideNavBar.Item); -selected merkitsee aktiivista.
simple-select	.instui-simple-select	Tyylitelty natiivinen <select> nuolimerkillä, joka vastaa tekstikentän tiloja ja kokoja.
spinner	.instui-spinner	Animoitu latausrengas; anna sille role="status" ja aria-label.
table	.instui-table	Tyylitelty tietotaulukko th- ja td-elementeille sekä valinnaiselle kuvatekstille, joka tukee hover-, kiinteää ja pinottu-kortti-asettelua.
table.body	tbody	Taulukon tietoriviryhmä (InstUI Table.Body).
table.cell	td	Tietosolu (InstUI Table.Cell).
table.col-header	th	Sarakkeen otsikkosolu (InstUI Table.ColHeader); oletusarvoinen th-tyyli, jonka table.row-header korvaa th[scope="row"]-elementeille.
table.head	thead	Taulukon otsikkoriviryhmä (InstUI Table.Head).
table.row	tr	Taulukon rivi (InstUI Table.Row).
table.row-header	th[scope="row"]	Rivin otsikkosolu (InstUI Table.RowHeader); muotoiltu rivin otsikon tokeneista, ei sarakkeen otsikon tokeneista.
tabs	.instui-tabs	Välilehtinen paneelisarja: välilehtiluettelo, valittavat välilehdet ja niiden paneelit.
tabs.panel	.panel	Välilehden sisältöpaneeli (InstUI Tabs.Panel).
tabs.tab	.tab	Yksi välilehtipainike (InstUI Tabs.Tab, määritetty emokomponentin Tabs välilehtilistan kautta); -selected merkitsee aktiivista.
tag	.instui-tag	Rivinsisäinen chip avainsanalle tai suodattimelle.
text	.instui-text	Leipätekstin typografia, jossa on koko-, paino-, väri- ja tyylimuokkaimet.
text-area	.instui-text-area	Tyylitelty, koon muutettava natiivi <textarea>, jolla on samat tilat ja samat koot kuin tekstikentällä.
text-input	.instui-text-input	Tyylitetty natiivinen <input> — mukaan lukien date, time ja datetime-local, joiden valitsimen selain toimittaa — validointitilat ja koot.
toggle-details	.instui-toggle-details	Muotoiltu natiivi <details>-elementti, jossa on pyörivä nuoli.
toggle-group	.instui-toggle-group	Reunuksellinen paljastus, joka on rakennettu <details>-elementin päälle: chevron-yhteenvetorivi ja kutistuva sisältö.
tooltip	.instui-tooltip	CSS-pohjainen työkaluvihjekupla, joka aktivoituu hover- ja focus-tiloissa ja voidaan sijoittaa mille tahansa puolelle.
tray	.instui-tray	Reunaan kiinnitetty paneeli, joka liukuu sisään mistä tahansa sivulta; natiivi [popover] tai <dialog>.
tree-browser	.instui-tree-browser	Paljastuspuu, jossa on sisäkkäisiä kokoelmia ja lehtikohteita sekä pyörivät nuolimerkit.
view	.instui-view	View-primitivi: neutraali laatikko, jossa on avain–arvo‑muokkaimia taustalle, reunukselle, pyöristykselle, varjolle, displaylle, positionille, overflow’lle ja cursorille. Jokainen näistä muokkaimista on myös saatavilla globaalisti (tyhjänä tai ketjutettuna mihin tahansa muuhun komponenttiin) — katso background/border/shadow/display/position/overflow/cursor-utilit.

Apuohjelmat

Nimi	Luokka	Yhteenveto
color	.--text-danger	Semanttiset väriapuohjelmat: .--bg-<name>, .--text-<name> (alias .--color-<name>), ja .--border-<name> kuratoidulle semanttiselle paletille. Jokaisella näistä on myös komponenttiin kiinnitetty alias-modifikaattori (esimerkiksi -bg-danger mille tahansa .instui-<component>-luokalle).
cursor	.--cursor-pointer	cursor komponoitavana, globaalina luokkana — .--cursor-<value> — käytettävissä sellaisenaan tai ketjuttuna mihin tahansa komponenttiin (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex-/grid-gap-utilityt välistysasteikolla, lyhyt (--gap-sm) tai pitkä (--gap-small) muoto. Voidaan käyttää sellaisenaan tai ketjuttaa mihin tahansa komponenttiin (.instui-view.--gap-sm) — komponentit, jotka ovat jo asettaneet oman gap-arvonsa komponenttikohtaisesta tokenista, saattavat saada sen ylikirjoitetuksi.
icon	.instui-icon	Ikonijärjestelmä: .instui-icon-koko sekä yhteinen -icon-<name>-piirtäjä, joka käyttää maskia glyfin peittämiseen (väri currentColor) ennen mitä tahansa elementtiä.
layout	.--display-flex	Display- ja text-align-utilityt — .--display-<value> ja .--text-align-<value> — koostettavina, globaaleina luokkina, joita voi käyttää itsenäisinä tai ketjuttaa mihin tahansa komponenttiin.
maskglobal	.--mask-overlay	Globaali, kaksinkertainen kopio mask-komponentin overlay-modifikaattoreista — --mask-overlay, --mask-fullscreen, --mask-blur — käytettävissä sellaisenaan tai ketjutettuna mihin tahansa komponenttiin ilman, että niitä tarvitsee kääriä .instui-mask-elementin sisään.
overflow	.--overflow-x-hidden	overflow-x/overflow-y koostettavina, globaalina luokkina — .--overflow-x-<value> / .--overflow-y-<value> — käytettävissä sellaisenaan tai ketjutettuna mihin tahansa komponenttiin.
position	.--position-relative	position koostettavana, globaalina luokkana — .--position-<value> — käytettävissä sellaisenaan tai ketjutettuna mihin tahansa komponenttiin (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Näytön tai kontainerin leveyteen perustuvat näytä-/piilota-luokat teemallisen murtopisteasteikon mukaan.
screen-reader-content	.instui-screen-reader-content	Piilottaa sisällön visuaalisesti mutta pitää sen saatavilla avustaville teknologioille (vakio 'clip'-kuvio).
spacing	.--p-md	Marginaali- ja täyte-apuluokat — .--m<side>-<step> / .--margin-<side>-<step> ja .--p<side>-<step> / .--padding-<side>-<step> välilyöntiasteikolla (sivut t/b/s/e/x/y tai ei lainkaan, lyhyenä tai täydellisenä — esimerkiksi --mb-sm ja --margin-bottom-small ovat sama sääntö; marginaali hyväksyy myös auto). Käytettävissä suoraan tai ketjutettuna mihin tahansa komponenttiin (esim. class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index-kerrostusapuohjeet — .--stack-<level> (deepest, below, above, topmost) — käytettävissä suoraan tai ketjutettuna mihin tahansa komponenttiin, jotta kerrokset pinoutuvat ennustettavasti eivätkä käsin säädetyillä numeroilla.
transition	.instui-transition.-transition-fade-entering	Animaation tilaluokat komponentille Transition — .instui-transition ja tilaluokat (-transition-fade-entering, -transition-scale-exited, jne.) — käytettävissä suoraan tai ketjutettuna mihin tahansa komponenttiin.
truncate	.--truncate	Ellipsin katkaisu (truncation) rivitiivistyksellä, jota ohjataan --lines:lla — käytettävissä suoraan tai ketjutettuna mihin tahansa komponenttiin (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Asettelun vianmäärityksen kehys: yhdistä koostettu .-with-visual-debug mihin tahansa elementtiin korostamaan laatikkoa ja sen välittömiä lapsia, jotta asettelun rakenne näkyy yhdellä silmäyksellä.

Säännöt

Nimi	Luokka	Yhteenveto
base	*	Valinnainen globaali nollaus: box-sizing, sivun pinta, perustekstin väri ja fontti, color-scheme sekä linkkien oletusarvot.
prose	:where(body)	Typografian oletusarvot raakalle HTML:lle — otsikot, kappaleet, listat, linkit ja koodi — sovelletaan automaattisesti aina, kun se tuodaan (oletus :where(body)); lähetä options.scope kohdistamaan eri sisältöjuureen (esim. .vp-doc).

Plugins

Nimi	Luokka	Yhteenveto
logos	.logos	Instructure-tuotteiden logot CSS-kuvatokeneina: --instui-logo-<product>-<layout>-<mode> sisältää data-URI SVG:n, joten logo piirretään esim. background-image: var(--instui-logo-canvas-horizontal-color):lla.
primitives	.instui-bg-primitive-color-white	Valinnaiset apuluokat raakalle primitiivipalettiin: .instui-bg-/fg-/border-primitive-color-<name> maalaavat värin primitiiviväritokeneista, plus font-family/font-weight apuluokkia primitiivifonttitokeneille. Pidetään erillään semanttisista apuluokista, jotta niiden ylikirjoitukset pysyvät pelkästään semanttisina.
visual-debug	.-with-visual-debug	Asettelun vianmäärityksen kehys: yhdistä koostettu .-with-visual-debug mihin tahansa elementtiin korostamaan laatikkoa ja sen välittömiä lapsia, jotta asettelun rakenne näkyy yhdellä silmäyksellä.

layout

Nimi	Luokka	Yhteenveto
callout	div[class~="instui-callout"]	Rivissä näytettävä lyhyt informaatioilmoitus muistutusta tai huomautusta varten.
hero	div[class~="instui-hero"]	Koko leveydeltään ulottuva otsikkosektio, jossa on otsikko, alaotsikko ja valinnainen taustakuva.
page-layout	div[class~="instui-page-layout"]	Vakio kolmipalstainen sivuasettelu, jossa on otsikko, sivupalkki ja pääsisältö.
rubric-note	div[class~="instui-rubric-note"]	Rakenneopas-merkintä, jossa on arviointikategoriat ja pisteytyksen indikaattorit.
testimonial	div[class~="instui-testimonial"]	Lainaus- tai suositusnäyttö, jossa on lähdeilmoitus ja valinnainen kuva.
two-column	div[class~="instui-two-column"]	Kaksipalstainen asettelu, jossa vasen ja oikea sisältöalue.
wrapper	body[class~="instui-display-flex"]	Sovelluksen runkorivi: sivunavigaatio, sisältökontti otsikolla ja valinnainen paneeli.