CSS API-referanse

CSS-API-referansen dekker pantoken sitt klassebaserte komponentlag: komponenter, utilities, globale regler og deklarasjoner bygget på tokensystemet.

Komponenter

Navn	Klasse	Sammendrag
agent-shell	.instui-agent-shell	En overflatebeholder for AI-agenter.
alert	.instui-alert	En inline-melding med en statusfargebar og et maskert statusikon fra det delte ikonsettet.
avatar	.instui-avatar	En brukeravatar som viser initialer eller et bilde, som er sirkulær som standard.
badge	.instui-badge	En liten telle- eller statusprikk plassert over et hjørne av målet.
banner	.instui-banner	En avkbrbar, ikonbelagt meldingsflate for side-nivå eller kontekstuelle kunngjøringer.
billboard	.instui-billboard	En stor tom-tilstand eller call-to-action-blokk: et hero-ikon eller bilde, en overskrift og en melding.
breadcrumb	.instui-breadcrumb	Et brødsmulesti med separasjonstegn; den siste smulen er gjeldende side.
breadcrumb.link	li	En smule (InstUI Breadcrumb.Link), en <li> i forelderens <ol>; den siste er gjeldende side.
button	.instui-button	En tilgjengelig handlingskontroll, stylet fra token-paletten; primær som standard.
byline	.instui-byline	Et medieobjekt: en hero-figur ved siden av en tittel og beskrivelse.
calendar	.instui-calendar	Et statisk månedsgitter med navigasjon, ukenavnsoverskrifter og dagceller.
calendar.day	.day	En dagcelle (InstUI Calendar.Day); -today, -selected og -outside-month angir dens tilstand.
card	.instui-card	En overflatebeholder som aksepterer vilkårlig innhold.
checkbox	.instui-checkbox	En native avkrysningsboks og dens etikett, eller en bryter via -variant-toggle.
close-button	.instui-close-button	En gjennomsiktig ikonknapp som tegner sitt eget ×-ikon, i tre størrelser pluss en on-fargevariant.
context-view	.instui-context-view	En opphøyet callout med caret, plasserbar på hvilken som helst side; fungerer som en native [popover].
drawer-layout	.instui-drawer-layout	Et delt oppsett med et kollapsbart sidepanel og en primær rullbar innholdsflate.
drawer-layout.content	.content	Den primære innholdsflaten som fyller gjenværende plass ved siden av panelet.
drawer-layout.tray	.tray	Sidepanelet ved siden av hovedinnholdet, med valgfrie overlay- og tray-lignende flatemodifikatorer.
file-drop	.instui-file-drop	En fil-drag-og-slipp-sone med hover-, akseptert- og avvist-tilstander.
form-field	.instui-form-field	En form-felt-innpakning: en etikett, dens kontroller og inline-, required- eller readonly-oppsett.
form-field-group	.instui-form-field-group	En <fieldset>-gruppe med legend, et kolonne- eller inline-oppsett og konfigurerbar avstand.
form-field-messages	.instui-form-field-messages	Felthjelp og valideringsmeldinger — hint, feil, suksess og kun for skjermleser — med et ikon ved feil og suksess.
heading	.instui-heading	Overskriftstypografi fra -level-h1 til -level-h6.
img	.instui-img	En stylet <img> med display-, crop- og effektmodifikatorer som stables.
in-place-edit	.instui-in-place-edit	En [contenteditable] som leses som tekst til den får fokus, og så viser input-krom.
input-group	.instui-input-group	En fasade rundt et tekstinput med ledende og etterfølgende ikonplasser.
link	.instui-link	En stylet hyperlenke med størrelser, en invertert variant for mørke bakgrunner, og inline- eller ustylet form.
list	.instui-list	En liste med token-drevet elementavstand.
list.item	.instui-list	Et listeelement (InstUI List.Item).
mask	.instui-mask	En innflytende overlay som fyller sin posisjonerte forelder og sentrerer innholdet — f.eks. en spinner over et kort. For en modal, foretrekk en native <dialog> (dens ::backdrop er masken). Hver av disse modifikatorene er også tilgjengelige globalt (bare, eller kjedet på hvilken som helst annen komponent) — se mask global utility.
menu	.instui-menu	En dropdown-flate med elementer, grupper og separatorer.
menu.group	.group	En merket gruppeoverskrift (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	En menyoppføring (InstUI Menu.Item); legg til -disabled, -highlighted eller -active/[aria-checked].
menu.separator	.separator	En skillelinje mellom elementer (InstUI Menu.Separator).
metric	.instui-metric	En merket statistikk — en stor verdi over en bildetekst.
modal	.instui-modal	En dialogflate (fungerer på en native <dialog>); header/body/footer-deler.
modal.body	.body	Innholdsregionen (InstUI Modal.Body); en eneste <img> går full-bleed.
modal.footer	.footer	Handlingsraden (InstUI Modal.Footer).
modal.header	.header	Tittellinjen (InstUI Modal.Header).
number-input	.instui-number-input	En nummerinput-fasade med en +/- spinner-kolonne.
pagination	.instui-pagination	Side-navigasjon: nummererte sider, første, forrige, neste og siste piler, og en ellipse for gap.
pagination.page	.page	En sidelink eller knapp (InstUI Pagination.Page); gjeldende side bærer [aria-current].
pill	.instui-pill	En kompakt statusetikett; legg til et ledende ikon med den delte -icon-<name>-formen.
popover	.instui-popover	En opphøyet flate for en native [popover], posisjonert med CSS anchor-posisjonering.
progress	.instui-progress	En determinerbar fremdriftslinje med en farget meter, størrelser og en valgbar verdietikett.
progress-circle	.instui-progress-circle	En sirkulær fremdriftsring styrt av --value og --value-max egendefinerte egenskaper.
radio	.instui-radio	En native radioknapp og dens etikett.
radio-input-group	.instui-radio-input-group	En enkeltvalgs radiogruppe <fieldset>, enkel eller som en sammenkoblet segmentert bryter.
range-input	.instui-range-input	En stylet range-slider med en invers verdiboble.
rating	.instui-rating	En stjernervurdering med fylte og tomme glyphs og en valgfri numerisk etikett.
side-nav-bar	.instui-side-nav-bar	En vertikal navigasjonsrail av ikon-over-etikett-elementer, med en minimert bare-ikoner-modus.
side-nav-bar.item	.item	En navigasjonsoppføring (InstUI SideNavBar.Item); -selected markerer den aktive.
simple-select	.instui-simple-select	En stilisert native <select> med caret, som matcher tekstinndataens tilstander og størrelser.
spinner	.instui-spinner	En animert lastesirkel; gi den role="status" og en aria-label.
table	.instui-table	En stilisert datatabell for th og td pluss en valgfri bildetekst, med hover-, fast- og stablet-kort-oppsett.
table.body	tbody	Tabellens data-radgruppe (InstUI Table.Body).
table.cell	td	En datacelle (InstUI Table.Cell).
table.col-header	th	En kolonneoverskriftscelle (InstUI Table.ColHeader); standard th-styling, overskrevet av table.row-header for th[scope="row"].
table.head	thead	Tabellens header-radgruppe (InstUI Table.Head).
table.row	tr	En tabellrad (InstUI Table.Row).
table.row-header	th[scope="row"]	En radoverskriftscelle (InstUI Table.RowHeader); stylet fra radoverskrifts-tokenene, ikke kolonneoverskrifts-tokenene.
tabs	.instui-tabs	Et fanepanelsett: en faneliste, valgfrie faner og deres paneler.
tabs.panel	.panel	Innholdspanelet for en fane (InstUI Tabs.Panel).
tabs.tab	.tab	En enkelt faneknapp (InstUI Tabs.Tab, konfigurert via forelderen Tabs sin faneliste); -selected markerer den aktive.
tag	.instui-tag	En inline-chip for et nøkkelord eller filter.
text	.instui-text	Brødtekst-typografi med størrelse, vekt, farge og stilmodifikatorer.
text-area	.instui-text-area	En stilisert, endringsbar native <textarea> med samme tilstander og størrelser som tekstinndata.
text-input	.instui-text-input	En stilisert native <input> — inkludert date, time, og datetime-local, hvor nettleseren leverer velgeren — med valideringstilstander og størrelser.
toggle-details	.instui-toggle-details	En stilisert native <details>-disclosure med en roterende chevron.
toggle-group	.instui-toggle-group	En avgrenset disclosure bygget på <details>: en oppsummeringsrad med chevron og sammenleggbar innhold.
tooltip	.instui-tooltip	En CSS hover- og fokus-tooltip-boble, posisjonerbar på hvilken som helst side.
tray	.instui-tray	Et kant-festet panel som glir inn fra hvilken som helst side; en native [popover] eller <dialog>.
tree-browser	.instui-tree-browser	Et disclosure-tre av nestede samlinger og blad-elementer, med roterende chevrons.
view	.instui-view	View-primitivet: en nøytral boks med nøkkel-verdi-modifikatorer for bakgrunn, ramme, radius, skygge, display, posisjon, overflow og cursor. Hver av disse modifikatorene er også tilgjengelig globalt (bare, eller kjedet på enhver annen komponent) — se background/border/shadow/display/position/overflow/cursor-verktøyene.

Hjelpeverktøy

Navn	Klasse	Sammendrag
color	.--text-danger	Semantiske fargeverktøy: .--bg-<name>, .--text-<name> (aliasert som .--color-<name>), og .--border-<name> for den kuraterte semantiske paletten. Hver av disse har også en komponent-tilknyttet alias-modifikator (for eksempel -bg-danger på hvilken som helst .instui-<component>).
cursor	.--cursor-pointer	cursor som en komponerbar, global klasse — .--cursor-<value> — brukbar bar eller kjedet på enhver komponent (.instui-button.--cursor-pointer).
gap	.--gap-md	Flex/grid gap-verktøy på spacing-skalaen, kort (--gap-sm) eller lang (--gap-small) stavemåte. Brukbar bar eller kjedet på enhver komponent (.instui-view.--gap-sm) — komponenter som allerede setter sin egen gap fra et komponent-spesifikt token kan få den overskrevet.
icon	.instui-icon	Ikonsystemet: .instui-icon-størrelser pluss den delte -icon-<name>-painteren som masker en glyph (i currentColor) før ethvert element.
layout	.--display-flex	Display- og tekstjusteringsverktøy — .--display-<value> og .--text-align-<value> — som komponerbare, globale klasser, brukbare bar eller kjedet på enhver komponent.
maskglobal	.--mask-overlay	En global, dobbel kopi av mask-komponentens overlay-modifikatorer — --mask-overlay, --mask-fullscreen, --mask-blur — brukbare bar eller kjedet på enhver komponent, uten innpakking i et .instui-mask-element.
overflow	.--overflow-x-hidden	overflow-x/overflow-y som komponerbare, globale klasser — .--overflow-x-<value> / .--overflow-y-<value> — brukbare bar eller kjedet på enhver komponent.
position	.--position-relative	position som en komponerbar, global klasse — .--position-<value> — brukbar bar eller kjedet på enhver komponent (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Visningsport- eller container-bredde vis/skjul-klasser over en tematisk breakpoint-skala.
screen-reader-content	.instui-screen-reader-content	Skjuler visuelt innhold samtidig som det holdes tilgjengelig for hjelpemidler (standard clip-mønster).
spacing	.--p-md	Margin- og padding-utilities — .--m<side>-<step> / .--margin-<side>-<step> og .--p<side>-<step> / .--padding-<side>-<step> på spacing-skalaen (sider t/b/s/e/x/y eller ingen, skrevet kort eller fullstendig — for eksempel er --mb-sm og --margin-bottom-small samme regel; margin aksepterer også auto). Kan brukes alene eller kjedes på hvilken som helst komponent (for eksempel class="instui-view --mb-sm").
stacking	.--stack-topmost	z-index-dybde-utilities — .--stack-<level> (deepest, below, above, topmost) — kan brukes alene eller kjedes på hvilken som helst komponent, slik at lag stables forutsigbart i stedet for med håndjusterte tall.
transition	.instui-transition.-transition-fade-entering	Animertilstands-klasser for Transition-komponenten — .instui-transition og tilstandsklasser (-transition-fade-entering, -transition-scale-exited, osv.) — kan brukes alene eller kjedes på hvilken som helst komponent.
truncate	.--truncate	Ellipsis-avkorting med linjeklemming kontrollert av --lines — kan brukes alene eller kjedes på hvilken som helst komponent (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Et layout-debugging-omriss: kombiner .-with-visual-debug på hvilket som helst element for å tegne omrisset av boksen og dens umiddelbare barn, slik at layoutens struktur er synlig med et blikk.

Regler

Navn	Klasse	Sammendrag
base	*	Valgfri global reset: box-sizing, sidestruktur, grunnleggende tekstfarge og font, color-scheme, og standarder for lenker.
prose	:where(body)	Typografiske standarder for rå HTML — overskrifter, avsnitt, lister, lenker og kode — anvendes automatisk der det importeres (standard :where(body)); send options.scope for å målrette en annen innholdsrøtter (f.eks. .vp-doc).

Plugins

Navn	Klasse	Sammendrag
logos	.logos	Instructure-produktlogoer som CSS-bilde-tokens: --instui-logo-<product>-<layout>-<mode> inneholder en data-URI SVG, så en logo rendres via f.eks. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Valgfrie utility-klasser for det rå primitive palettet: .instui-bg-/fg-/border-primitive-color-<name> setter en farge fra de primitive fargene, pluss font-family/font-weight utilities for primitive font-tokens. Holdes utenfor de semantiske utilities slik at overstyringer der forblir kun semantiske.
visual-debug	.-with-visual-debug	Et layout-debugging-omriss: kombiner .-with-visual-debug på hvilket som helst element for å tegne omrisset av boksen og dens umiddelbare barn, slik at layoutens struktur er synlig med et blikk.

layout

Navn	Klasse	Sammendrag
callout	div[class~="instui-callout"]	Inline informasjonsvarsel for en kort påminnelse eller notat.
hero	div[class~="instui-hero"]	Fullbredde header-seksjon med tittel, undertittel og valgfritt bakgrunnsbilde.
page-layout	div[class~="instui-page-layout"]	Standard tre-kolonners sideoppsett med header, sidemeny og hovedinnhold.
rubric-note	div[class~="instui-rubric-note"]	Strukturert notat med rubrikkategorier og scoreindikatorer.
testimonial	div[class~="instui-testimonial"]	Sitat- eller testimonialvisning med attribusjon og valgfri illustrasjon.
two-column	div[class~="instui-two-column"]	To-kolonners layout med venstre og høyre innholdsregioner.
wrapper	body[class~="instui-display-flex"]	App-shell-rad: side-navigasjon, container med header, og valgfritt panel.