CSS API-referenssa

CSS API-referenssa bargá pantoken class-báikeduvvan komponenttačohkkis: komponenttat, utiliidat, globála ruovttuid ja deklarasuvnnat mii leat šatnán token-systemás.

Komponenttat

Návnna	Klassa	Sammendrag
agent-shell	.instui-agent-shell	Surface-báhcci AI-agentaid illuduvdna.
alert	.instui-alert	In-line beaivviheami mii leat statusvárri bára ja maskerad status-glyf dahje jođiheaddji vuođđoheapmi shared ikon-settas.
avatar	.instui-avatar	Gebruikára avatar mii vállje initialaid dahje image, cirkulárus ovddas buohkas.
badge	.instui-badge	Lágán número dahje status-dot mii lea sullii dáhpáhusat guovssahas.
banner	.instui-banner	Ilaatket, ikonalaš beaiviheami surface page-level dahje in-context ovddasheamis.
billboard	.instui-billboard	Buorre miiha state dahje call-to-action blokka: hero-ikon dahje image, headdjit ja beaiviheapmi.
breadcrumb	.instui-breadcrumb	Breadcrumb-čállin sus leat separátora; lastta breadcrumb lea dán oaivvi.
breadcrumb.link	li	Breadcrumb (InstUI Breadcrumb.Link), <li> oidne ádnon <ol>-is; lasta lea dán oaivvi.
button	.instui-button	Accessibility-action ovddas, stailenaš token-palettas; primára buohkaš.
byline	.instui-byline	Media-objekta: hero-figura oassá title ja bessevuoda.
calendar	.instui-calendar	Static mánu grid navigasuvnnain, vahkkuvuođđu headdjit ja beaivvi cellat.
calendar.day	.day	Beaivvi cell (InstUI Calendar.Day); -today, -selected ja -outside-month markereat suhkkar.
card	.instui-card	Surface-báhcci mii ođđašit arbitrára sisältto.
checkbox	.instui-checkbox	Náttáralaš checkbox ja dáleid label, dahje switch geahččal -variant-toggle.
close-button	.instui-close-button	Transparánta ikon-buttone mii čađa ságat iežaset ×-glyf, golbma sizein ja on-color variant.
context-view	.instui-context-view	Elevatea callout gaittá caret, sáhttá positionehtit eanet siidduin; sáhttá dárbbaš native [popover].
drawer-layout	.instui-drawer-layout	Split-layout mii leat collapsible siidan tray ja primára scroll-álbmuid sisältto-pane.
drawer-layout.content	.content	Primára sisältto-pane mii čájeha ođđa galget šaddat siidan oassá.
drawer-layout.tray	.tray	Siida panel main sisältto oassá, opcional overlay ja tray-like surface-modifierat.
file-drop	.instui-file-drop	File dropzone mii leat hover, accepted ja rejected státusat.
form-field	.instui-form-field	Form-field wrapper: label, dana controls, ja inline, required dahje readonly layouts.
form-field-group	.instui-form-field-group	<fieldset>-group mii leat legend, column dahje inline layout, ja konfigurérahkos peahkkat.
form-field-messages	.instui-form-field-messages	Field-help ja validasuvnna beaivviheapmi — hint, error, success ja screen-reader-only — error ja success johtá glyfii.
heading	.instui-heading	Heading-typografi eanet -level-h1 -ta -level-h6.
img	.instui-img	Stailenaš <img> mii leat display, crop ja effect-modifierat mii stackeavat.
in-place-edit	.instui-in-place-edit	[contenteditable] mii lásah textta go fokus ii leat, de galggat čájehit input-chrome.
input-group	.instui-input-group	Facada text-inputiin mii leat leading ja trailing ikon-slottat.
link	.instui-link	Stailenaš hyperlink mii leat sizean, inverse-variant dark backgrounds ja inline dahje unstyled formmat.
list	.instui-list	Listta mii deattá token-ohcat item-spacing.
list.item	.instui-list	List-item (InstUI List.Item).
mask	.instui-mask	In-flow overlay mii čuostá positioneaddji parent ja dahká centre sisältto — d. i. spinner oassá kaartta. Modal dá leat buorre dábálaš native <dialog> (su ::backdrop lea maska). Dát modifierat leat maid globála (bare dahje chained ollu komponenttaid) — geahččat mask global utility.
menu	.instui-menu	Dropdown-surface itemaid, groupaid ja separátoraid.
menu.group	.group	Label-leama grup heading (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Menu-entry (InstUI Menu.Item); add -disabled, -highlighted dahje -active/[aria-checked].
menu.separator	.separator	Divider-rule eanet itemaid (InstUI Menu.Separator).
metric	.instui-metric	Label-leama statistika — lága vátni oassá caption.
modal	.instui-modal	Dialog-surface (geahččá native <dialog>); header/body/footer osat.
modal.body	.body	Sisältto-ruovttá (InstUI Modal.Body); eanan <img> leat full-bleed.
modal.footer	.footer	Actions-rivi (InstUI Modal.Footer).
modal.header	.header	Title-rivi (InstUI Modal.Header).
number-input	.instui-number-input	Number-input facada mii leat +/- spinner column.
pagination	.instui-pagination	Sidu-navigation: nummererdate sidad, first, previous, next ja last arrows, ja ellipsis gappaide.
pagination.page	.page	Page-link dahje buttone (InstUI Pagination.Page); dán oaivvi sidad ii leat [aria-current].
pill	.instui-pill	Kompakt status-label; add leading glyf dáhpáhus shared -icon-<name>-formmas.
popover	.instui-popover	Elevatea surface for native [popover], positionehtta CSS anchor-positioning-llat.
progress	.instui-progress	Determinate progress-bar mii leat vádjolaš meter, sizeat ja opcional value-label.
progress-circle	.instui-progress-circle	Circulár progress-ring geahččádus --value ja --value-max custom properties.
radio	.instui-radio	Náttáralaš radio-buttone ja dáleid label.
radio-input-group	.instui-radio-input-group	Single-select radio <fieldset>, plain dahje connected segmented toggle-lla.
range-input	.instui-range-input	Stailenaš range-slider mii leat inverse value-bubble.
rating	.instui-rating	Stjerne-rateearvvi gávdnojuvllain ja biktasat glyphaidin ja veahkká mii lihkkái nummaralaš label.
side-nav-bar	.instui-side-nav-bar	Vertikála navigasjona-rail ikonat-ođđa-label itemaidein, minimihuvvon ikonain-ovttas modu.
side-nav-bar.item	.item	Navigasjona-árggi (InstUI SideNavBar.Item); -selected bohtá aktiiva vuogi.
simple-select	.instui-simple-select	Stylerovnnat ovttas <select> mii leat caret, ollu girjji-input stáhtaid ja suuruid galgá gávdnat.
spinner	.instui-spinner	Animerejuvvon loada-ringi; givvege role="status" ja aria-label.
table	.instui-table	Stylerovnnat dáta-tabella th ja td main ja veahkká caption, hover-, fix- ja stacked-card-layout-ain.
table.body	tbody	Tabellas dáta-roa gruppa (InstUI Table.Body).
table.cell	td	Dáta-cellu (InstUI Table.Cell).
table.col-header	th	Kolonna-headdar cellu (InstUI Table.ColHeader); default th styling, veahkehit table.row-header dahje th[scope="row"] sátne.
table.head	thead	Tabellas headdar-row gruppa (InstUI Table.Head).
table.row	tr	Tabellaroa (InstUI Table.Row).
table.row-header	th[scope="row"]	Ro-header cellu (InstUI Table.RowHeader); stilaruvvo ro-header tokenaidin, ii kolonna-header-ain.
tabs	.instui-tabs	Tabbad panelaset: tabb-lista, valgbar tabb, ja jejich panellat.
tabs.panel	.panel	Content-panel dábálaš tabbi (InstUI Tabs.Panel).
tabs.tab	.tab	Okti tab-btn (InstUI Tabs.Tab, konfigureraiduo johtán Tabs tabb-lista); -selected bohtá aktiiva vuogi.
tag	.instui-tag	Inline chip keyword dahje filteri hálddaš.
text	.instui-text	Báddi-girji typografija siza, vággi, farga ja stili modifiserin.
text-area	.instui-text-area	Stylerovnnat, resizabel ovttas <textarea> mii leat dasa stáhtaid ja suuruid nagu girjji-input.
text-input	.instui-text-input	Stylerovnnat ovttas <input> — ja date, time, ja datetime-local gos brauzera birgege pickera — válddáhtton stáhtaid ja suuruid.
toggle-details	.instui-toggle-details	Stylerovnnat ovttas <details> disclosure čađašgáŋgá čađahuvvon chevronin.
toggle-group	.instui-toggle-group	Borderahttu disclosure baserad ávki <details>: chevron-summary roa ja collapsible content.
tooltip	.instui-tooltip	CSS hover ja focus tooltip bubbla, odda positionerbar.
tray	.instui-tray	Edge-pinneda panel mii slidda siskkan vaikko missá odda; ovttas [popover] dahje <dialog>.
tree-browser	.instui-tree-browser	Disclosure-goahti čađaškollekta ja leaivi itemaidein, roteta chevronaidin.
view	.instui-view	View primitive: neutraala box modifiserin key-value background, border, radius, shadow, display, position, overflow, ja cursor. Dát modulheap leat maid globála (bare dahje chained ovar buot komponennta) — oasse background/border/shadow/display/position/overflow/cursor utilitetaid.

Utilitijet

Návnna	Klassa	Sammendrag
color	.--text-danger	Semantihkka farga utilitetat: .--bg-<name>, .--text-<name> (aliastevuoda .--color-<name>), ja .--border-<name> čuovgga semantihkka palettas. Buot dát leat maid komponentta-attacheada alias modifiserra (dáidda -bg-danger otná buot .instui-<component>).
cursor	.--cursor-pointer	cursor komposabála, globála class — .--cursor-<value> — maid leat váldimis bare dahje chained otná buot komponentta (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap utilitetat oassástuvvon spacing skála, gaggat (--gap-sm) dahje oahpu (--gap-small) stavra. Usáldo bare dahje chained otná buot komponentta (.instui-view.--gap-sm) — komponenttat mii already sette ráhkad gap oassin tokena, sáhttet leat veahkedit.
icon	.instui-icon	Ikona systeama: .instui-icon sizing ja shared -icon-<name> painter mii maskere glyph (in currentColor) ennen buot elementta.
layout	.--display-flex	Display ja text-align utilitetat — .--display-<value> ja .--text-align-<value> — komposabála, globála classaid, usáldo bare dahje chained otná buot komponentta.
maskglobal	.--mask-overlay	Globála, dual kopi mask komponentta overlay modifiserain — --mask-overlay, --mask-fullscreen, --mask-blur — usáldo bare dahje chained otná buot komponentta, ilman .instui-mask elementta wrapping.
overflow	.--overflow-x-hidden	overflow-x/overflow-y komposabála, globála classaid — .--overflow-x-<value> / .--overflow-y-<value> — usáldo bare dahje chained otná buot komponentta.
position	.--position-relative	position komposabála, globála class — .--position-<value> — usáldo bare dahje chained otná buot komponentta (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Viewport- dahje container-width show/hide classaid čájehahtti themeda breakpoint skálas.
screen-reader-content	.instui-screen-reader-content	Vizuála veahkehit contennt hiddaiguin mii leat álggu assistive tech-ruvdnojuvvon (standard clip pattern).
spacing	.--p-md	Margu ja padding-fatnasaččat — .--m<side>-<step> / .--margin-<side>-<step> ja .--p<side>-<step> / .--padding-<side>-<step> špacing-skálas (sides t/b/s/e/x/y vai eai ollu, šoddá goikkimis dahje manná — buorre dáhpáhus: --mb-sm ja --margin-bottom-small leat sama ráidu; margu fertejuvvon maid auto). Buktet máŋggabealli dahje čohkket maid ođđa komponenta (dát ovtta class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index depth-fatnasaččat — .--stack-<level> (deepest, below, above, topmost) — buktet máŋggabealli dahje čohkket maid ođđa komponenta, go layers čohkkejuvvo várásduhttin maid dás ii leat hand-tunet nummerat.
transition	.instui-transition.-transition-fade-entering	Animášuvdna state-klassat Transition komponenttas — .instui-transition ja state-klassat (-transition-fade-entering, -transition-scale-exited, etc.) — buktet máŋggabealli dahje čohkket maid ođđa komponenta.
truncate	.--truncate	Ellipsis truncation mii fállet rievdadit line clampingin leat váldit --lines-is — buktet máŋggabealli dahje čohkket maid ođđa komponenta (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Layout-dávjastallan outline: compound .-with-visual-debug maid ođđa elementta dahje outline-boksa ja su divvut rájes, nu buorre ovttasvuohta layoutin struktuvrras leat gullat gávdnat.

Ráiddut / Rules

Návnna	Klassa	Sammendrag
base	*	Opt-in geažes reset: box-sizing, beaivvi surface, báse text fárro ja fonta, color-scheme, ja link defaultat.
prose	:where(body)	Typografála defaultat raw HTML:daga — headingat, paragráfhat, listat, linkat ja koodat — dorvvo automahtalaččat go mii importeerahuvvo (default :where(body)); ođđa content rootii muhtun add options.scope (d.b. .vp-doc).

Plugins

Návnna	Klassa	Sammendrag
logos	.logos	Instructure produkt-logoat CSS image-tokennaid: --instui-logo-<product>-<layout>-<mode> leat data-URI SVG, nu logo čájehahttá ge. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Opt-in utility-klassat raw primitive palettaí: .instui-bg-/fg-/border-primitive-color-<name> čájehit fálaldus primitívna colour-tokennaid, ja font-family/font-weight fatnasaččat primitiiva font-tokennaid. Čuovvolahtti semantic utilities: overrides dahkat sáhttit remain semantic-only.
visual-debug	.-with-visual-debug	Layout-dávjastallan outline: compound .-with-visual-debug maid ođđa elementta dahje outline-boksa ja su divvut rájes, nu buorre ovttasvuohta layoutin struktuvrras leat gullat gávdnat.

layout

Návnna	Klassa	Sammendrag
callout	div[class~="instui-callout"]	In-line informáhtta alertti króhka muhtun cuoŋomuohtuid dahje čuovggain.
hero	div[class~="instui-hero"]	Bárdu-lávvar header-sektuvdna sámis tiidda, alátiidda ja opt-in background image.
page-layout	div[class~="instui-page-layout"]	Standarda olmmoš guovllus kolmniela sivu layout: header, sidebar ja main content.
rubric-note	div[class~="instui-rubric-note"]	Struktureuva mátkkušuođa nota rubrik kategorijat ja scoring indikátoraid.
testimonial	div[class~="instui-testimonial"]	Qvóta dahje testimustra display attributionin ja opt-in imagiide.
two-column	div[class~="instui-two-column"]	Guovllus guokte-kolonn-layout mii leat luhtte ja eanan content-aluehat.
wrapper	body[class~="instui-display-flex"]	App-shell row: side nav, container headerin mielde, ja opt-in panel.