CSS Referència de l'API

La referència de l'API de CSS cobreix la capa de components basada en classes de pantoken: components, utilitats, regles globals i declaracions construïdes sobre el sistema de tokens.

Components

Nom	Classe	Resum
agent-shell	.instui-agent-shell	Un contenidor de superfície per agents d'IA.
alert	.instui-alert	Un missatge en línia amb una barra de color d'estat i un glif d'estat enmascarat del conjunt d'icones compartit.
avatar	.instui-avatar	Un avatar d'usuari que mostra inicials o una imatge, circular per defecte.
badge	.instui-badge	Un petit punt de comptatge o d'estat col·locat a la cantonada d'un objectiu.
banner	.instui-banner	Una superfície de missatge descartable amb icona per anuncis a nivell de pàgina o en context.
billboard	.instui-billboard	Un bloc gran d'estat buit o crida a l'acció: una icona o imatge heroica, un encapçalament i un missatge.
breadcrumb	.instui-breadcrumb	Un rastre de migues amb separadors; l'última molla és la pàgina actual.
breadcrumb.link	li	Una molla (InstUI Breadcrumb.Link), un <li> dins de l'<ol> del pare; l'última és la pàgina actual.
button	.instui-button	Un control d'acció accessible, estilitzat des de la paleta de tokens; primari per defecte.
byline	.instui-byline	Un objecte de mitjans: una figura heroica al costat d'un títol i una descripció.
calendar	.instui-calendar	Una quadrícula de mes estàtica amb navegació, encapçalaments dels dies de la setmana i cel·les de dia.
calendar.day	.day	Una cel·la de dia (InstUI Calendar.Day); -today, -selected i -outside-month marquen el seu estat.
card	.instui-card	Un contenidor de superfície que accepta contingut arbitrari.
checkbox	.instui-checkbox	Una casella de selecció nativa i la seva etiqueta, o un interruptor via -variant-toggle.
close-button	.instui-close-button	Un botó d'icona transparent que dibuixa el seu propi glif ×, en tres mides més una variant per sobre color.
context-view	.instui-context-view	Un ressalt elevat amb un caret, posicionable a qualsevol costat; funciona com a [popover] natiu.
drawer-layout	.instui-drawer-layout	Una disposició dividida amb una safata lateral desplegable i un panell de contingut principal desplaçable.
drawer-layout.content	.content	El panell de contingut principal que omple l'espai restant al costat de la safata.
drawer-layout.tray	.tray	El panell lateral al costat del contingut principal, amb modificadors opcionals d'overlay i superfície tipus safata.
file-drop	.instui-file-drop	Una zona d'arrossegament de fitxers amb estats de hover, acceptat i rebutjat.
form-field	.instui-form-field	Un embolcall de camp de formulari: una etiqueta, els seus controls i dissenys en línia, obligatoris o de només lectura.
form-field-group	.instui-form-field-group	Un grup <fieldset> amb una llegenda, un disseny en columna o en línia i espaiat configurable.
form-field-messages	.instui-form-field-messages	Ajuda de camp i missatges de validació: pista, error, èxit i només per lector de pantalla, amb un glif en error i en èxit.
heading	.instui-heading	Tipografia d'encapçalament des de -level-h1 fins a -level-h6.
img	.instui-img	Un <img> estilitzat amb modificadors de display, crop i effect que s'encadenen.
in-place-edit	.instui-in-place-edit	Un [contenteditable] que es llegeix com a text fins que obté el focus, moment en què mostra la chrome d'entrada.
input-group	.instui-input-group	Una façana al voltant d'una entrada de text amb ranures d'icona d'inici i de final.
link	.instui-link	Un enllaç estilitzat amb mides, una variant inversa per a fons foscos i formes en línia o sense estil.
list	.instui-list	Una llista amb espaiat d'elements governat per tokens.
list.item	.instui-list	Un element de llista (InstUI List.Item).
mask	.instui-mask	Una superposició dins del flux que omple el seu progenitor posicionat i centra el seu contingut — p. ex., un spinner sobre una targeta. Per a un modal, prefereix un <dialog> natiu (la seva ::backdrop és la màscara). Cada un d'aquests modificadors també està disponible globalment (nu, o encadenat a qualsevol altre component) — consulta la utilitat global mask.
menu	.instui-menu	Una superfície desplegable d'elements, grups i separadors.
menu.group	.group	Un encapçalament de grup etiquetat (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Una entrada de menú (InstUI Menu.Item); afegeix -disabled, -highlighted o -active/[aria-checked].
menu.separator	.separator	Una regla divisor entre elements (InstUI Menu.Separator).
metric	.instui-metric	Una estadística etiquetada — un valor gran sobre una llegenda.
modal	.instui-modal	Una superfície de diàleg (funciona amb un <dialog> natiu); parts d'encapçalament/cos/p peu.
modal.body	.body	La regió de contingut (InstUI Modal.Body); una <img> solitària ocupa tot l'ample.
modal.footer	.footer	La fila d'accions (InstUI Modal.Footer).
modal.header	.header	La fila de títol (InstUI Modal.Header).
number-input	.instui-number-input	Una façana d'entrada numèrica amb una columna de spinner +/-.
pagination	.instui-pagination	Navegació de pàgines: pàgines numerades, fletxes per primer, anterior, següent i últim, i una el·lipsi per a buits.
pagination.page	.page	Un enllaç o botó de pàgina (InstUI Pagination.Page); la pàgina actual porta [aria-current].
pill	.instui-pill	Una etiqueta d'estat compacta; afegeix un glif inicial amb la forma compartida -icon-<name>.
popover	.instui-popover	Una superfície elevada per a un [popover] natiu, posicionada amb posicionament d'ancora CSS.
progress	.instui-progress	Una barra de progrés determinista amb un medidor acolorit, mides i una etiqueta de valor opcional.
progress-circle	.instui-progress-circle	Un anell de progrés circular impulsat per propietats personalitzades --value i --value-max.
radio	.instui-radio	Un botó radio natiu i la seva etiqueta.
radio-input-group	.instui-radio-input-group	Un <fieldset> radio de selecció única, senzill o com a commutador segmentat connectat.
range-input	.instui-range-input	Un slider de rang estilitzat amb una bombolla de valor inversa.
rating	.instui-rating	Una qualificació amb estrelles amb glifs plens i buits i una etiqueta numèrica opcional.
side-nav-bar	.instui-side-nav-bar	Una barra de navegació vertical d’elements icona-sobre-etiqueta, amb un mode minimitzat només d’icones.
side-nav-bar.item	.item	Una entrada de navegació (InstUI SideNavBar.Item); -selected marca la activa.
simple-select	.instui-simple-select	Un <select> natiu estilitzat amb un caret, que fa joc amb els estats i mides de l’entrada de text.
spinner	.instui-spinner	Un anell d’espera animat; assigna-li role="status" i una aria-label.
table	.instui-table	Una taula de dades estilitzada per a th i td més una llegenda opcional, amb dissenys de hover, fix i de targetes apilades.
table.body	tbody	El grup de files de dades de la taula (InstUI Table.Body).
table.cell	td	Una cel·la de dades (InstUI Table.Cell).
table.col-header	th	Una cel·la d’encapçalament de columna (InstUI Table.ColHeader); l’estil per defecte th és sobreescrit per table.row-header per a th[scope="row"].
table.head	thead	El grup de files d’encapçalament de la taula (InstUI Table.Head).
table.row	tr	Una fila de taula (InstUI Table.Row).
table.row-header	th[scope="row"]	Una cel·la d’encapçalament de fila (InstUI Table.RowHeader); estilit des dels tokens d’encapçalament de fila, no des dels de columna.
tabs	.instui-tabs	Un conjunt de panells amb pestanyes: una llista de pestanyes, pestanyes seleccionables i els seus panells.
tabs.panel	.panel	El panell de contingut per a una pestanya (InstUI Tabs.Panel).
tabs.tab	.tab	Un sol botó de pestanya (InstUI Tabs.Tab, configurat mitjançant la llista de pestanyes del pare Tabs); -selected marca la activa.
tag	.instui-tag	Un xip en línia per a una paraula clau o filtre.
text	.instui-text	Tipografia de text de cos amb modificadors de mida, gruix, color i estil.
text-area	.instui-text-area	Un <textarea> natiu estilitzat i redimensionable amb els mateixos estats i mides que l’entrada de text.
text-input	.instui-text-input	Un <input> natiu estilitzat — incloent date, time i datetime-local, on el navegador subministra el selector — amb estats de validació i mides.
toggle-details	.instui-toggle-details	Un <details> natiu estilitzat de divulgació amb una fletxa giratòria.
toggle-group	.instui-toggle-group	Una divulgació amb vora basada en <details>: una fila resum amb fletxa i contingut col·lapsable.
tooltip	.instui-tooltip	Una bombolla tooltip de CSS per hover i focus, posicionable a qualsevol costat.
tray	.instui-tray	Un panell encastat a la vora que llisca des de qualsevol costat; un [popover] o <dialog> natiu.
tree-browser	.instui-tree-browser	Un arbre de divulgació de col·leccions anidades i elements fulla, amb fletxes giratòries.
view	.instui-view	El primitiu View: una caixa neutra amb modificadors clau-valor per background, border, radius, shadow, display, position, overflow i cursor. Cadascun d’aquests modificadors també està disponible globalment (nu, o encadenat a qualsevol altre component) — vegeu les utilitats background/border/shadow/display/position/overflow/cursor.

Utilitats

Nom	Classe	Resum
color	.--text-danger	Utilitats de color semàntic: .--bg-<name>, .--text-<name> (aliassat com .--color-<name>) i .--border-<name> per a la paleta semàntica triada. Cadascuna d’aquestes també té un modificador d’àlies adjunt al component (per exemple -bg-danger en qualsevol .instui-<component>).
cursor	.--cursor-pointer	cursor com a classe global composable — .--cursor-<value> — usable nua o encadenada a qualsevol component (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilitats de flex/grid gap a la escala d’espaiat, ortografia curta (--gap-sm) o llarga (--gap-small). Usable nua o encadenada a qualsevol component (.instui-view.--gap-sm) — els components que ja defineixen el seu propi gap des d’un token específic de component poden veure’l sobreescrit.
icon	.instui-icon	El sistema d’icones: dimensionament .instui-icon més el pintor compartit -icon-<name> que mascara un glif (en currentColor) abans de qualsevol element.
layout	.--display-flex	Utilitats de display i text-align — .--display-<value> i .--text-align-<value> — com a classes globals composables, usables nues o encadenades a qualsevol component.
maskglobal	.--mask-overlay	Una còpia global i doble dels modificadors d’overlay del component mask — --mask-overlay, --mask-fullscreen, --mask-blur — usable nua o encadenada a qualsevol component, sense embolcallar en un element .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y com a classes globals composables — .--overflow-x-<value> / .--overflow-y-<value> — usables nues o encadenades a qualsevol component.
position	.--position-relative	position com a classe global composable — .--position-<value> — usable nua o encadenada a qualsevol component (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Classes de mostrar/amagar segons l’amplada de la finestra o del contenidor a través d’una escala de punts d’interrupció temàtics.
screen-reader-content	.instui-screen-reader-content	Amaga visualment el contingut mantenint-lo disponible per a tecnologies d’accessibilitat (el patró estàndard de clip).
spacing	.--p-md	Utilitats de margin i padding — .--m<side>-<step> / .--margin-<side>-<step> i .--p<side>-<step> / .--padding-<side>-<step> a l'escala d'espaiat (costats t/b/s/e/x/y o cap, escrits curts o complets — per exemple --mb-sm i --margin-bottom-small són la mateixa regla; el margin també accepta auto). Pot usar-se sols o encadenats a qualsevol component (per exemple class="instui-view --mb-sm").
stacking	.--stack-topmost	Utilitats de profunditat z-index — .--stack-<level> (deepest, below, above, topmost) — es poden usar sols o encadenats a qualsevol component, així les capes s'apilen de manera previsible en lloc d'utilitzar números ajustats a mà.
transition	.instui-transition.-transition-fade-entering	Classes d'estat d'animació per al component Transition — .instui-transition i classes d'estat (-transition-fade-entering, -transition-scale-exited, etc.) — es poden usar sols o encadenades a qualsevol component.
truncate	.--truncate	Retallat amb punts suspensius amb limitació de línies controlada per --lines — es pot usar sol o encadenat a qualsevol component (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Un contorn per depurar el disseny: aplana el compost .-with-visual-debug a qualsevol element per dibuixar el quadre i els seus fills immediats, així l'estructura del disseny és visible d'un cop d'ull.

Regles

Nom	Classe	Resum
base	*	El reset global opt-in: box-sizing, la superfície de la pàgina, el color i la font bàsics del text, color-scheme, i els valors per defecte dels enllaços.
prose	:where(body)	Valors tipogràfics per defecte per HTML brut — encapçalaments, paràgrafs, llistes, enllaços i codi — aplicats automàticament allà on s'importen (per defecte :where(body)); passa options.scope per dirigir-ho a una arrel de contingut diferent (p. ex. .vp-doc).

Plugins

Nom	Classe	Resum
logos	.logos	Logotips de productes d'Instructure com a tokens d'imatge CSS: --instui-logo-<product>-<layout>-<mode> conté un SVG en data-URI, així un logotip es pinta via p. ex. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Classes d'utilitat opt-in per la paleta primitiva bruta: .instui-bg-/fg-/border-primitive-color-<name> pinten un color dels tokens de color primitiu, més utilitats font-family/font-weight per als tokens de font primitius. Es mantenen fora de les utilitats semàntiques perquè les sobreescriptures allà segueixin sent només semàntiques.
visual-debug	.-with-visual-debug	Un contorn per depurar el disseny: aplana el compost .-with-visual-debug a qualsevol element per dibuixar el quadre i els seus fills immediats, així l'estructura del disseny és visible d'un cop d'ull.

layout

Nom	Classe	Resum
callout	div[class~="instui-callout"]	Avís d'informació en línia per a un recordatori o nota breu.
hero	div[class~="instui-hero"]	Secció d'encapçalament d'amplada completa amb títol, subtítol i imatge de fons opcional.
page-layout	div[class~="instui-page-layout"]	Disseny de pàgina estàndard de tres columnes amb capçalera, barra lateral i contingut principal.
rubric-note	div[class~="instui-rubric-note"]	Nota estructurada amb categories de rúbrica i indicadors de puntuació.
testimonial	div[class~="instui-testimonial"]	Mostrador de cita o testimoni amb atribució i imatge opcional.
two-column	div[class~="instui-two-column"]	Disseny de dues columns amb regions de contingut esquerra i dreta.
wrapper	body[class~="instui-display-flex"]	Filera d'estructura d'aplicació: navegació lateral, contenidor amb capçalera i panell opcional.