CSS Referencia de API

La referencia de la API de CSS cubre la capa de componentes basada en clases de pantoken: componentes, utilidades, reglas globales y declaraciones construidas sobre el sistema de tokens.

Componentes

Nombre	Clase	Resumen
agent-shell	.instui-agent-shell	Un contenedor de superficie para agentes de IA.
alert	.instui-alert	Un mensaje en línea con una barra de color de estado y un glifo de estado enmascarado del conjunto de iconos compartido.
avatar	.instui-avatar	Un avatar de usuario que muestra iniciales o una imagen, circular por defecto.
badge	.instui-badge	Un pequeño punto de recuento o de estado colocado sobre la esquina de un objetivo.
banner	.instui-banner	Una superficie de mensaje descartable con icono para anuncios a nivel de página o en contexto.
billboard	.instui-billboard	Un gran bloque de estado vacío o llamado a la acción: un icono o imagen principal, un encabezado y un mensaje.
breadcrumb	.instui-breadcrumb	Una ruta de migas de pan con separadores; la última miga es la página actual.
breadcrumb.link	li	Una miga (InstUI Breadcrumb.Link), un <li> en el <ol> del padre; la última es la página actual.
button	.instui-button	Un control de acción accesible, estilizado desde la paleta de tokens; primario por defecto.
byline	.instui-byline	Un objeto multimedia: una figura principal junto a un título y una descripción.
calendar	.instui-calendar	Una cuadrícula de mes estática con navegación, encabezados de día de la semana y celdas de día.
calendar.day	.day	Una celda de día (InstUI Calendar.Day); -today, -selected y -outside-month marcan su estado.
card	.instui-card	Un contenedor de superficie que acepta contenido arbitrario.
checkbox	.instui-checkbox	Una casilla de verificación nativa y su etiqueta, o un interruptor vía -variant-toggle.
close-button	.instui-close-button	Un botón de icono transparente que dibuja su propio glifo ×, en tres tamaños más una variante sobre color.
context-view	.instui-context-view	Un aviso elevado con una punta, posicionable en cualquier lado; funciona como un [popover] nativo.
drawer-layout	.instui-drawer-layout	Un diseño dividido con una bandeja lateral colapsable y un panel de contenido principal desplazable.
drawer-layout.content	.content	El panel de contenido principal que llena el espacio restante junto a la bandeja.
drawer-layout.tray	.tray	El panel lateral junto al contenido principal, con modificadores opcionales de superposición y superficie tipo bandeja.
file-drop	.instui-file-drop	Una zona de soltado de archivos con estados de enfoque, aceptado y rechazado.
form-field	.instui-form-field	Un envoltorio de campo de formulario: una etiqueta, sus controles y diseños en línea, obligatorios o de solo lectura.
form-field-group	.instui-form-field-group	Un grupo <fieldset> con una leyenda, un diseño en columnas o en línea y espaciado configurable.
form-field-messages	.instui-form-field-messages	Ayudas de campo y mensajes de validación: pista, error, éxito y solo lector de pantalla, con un glifo en error y en éxito.
heading	.instui-heading	Tipografía de encabezados desde -level-h1 hasta -level-h6.
img	.instui-img	Un <img> estilizado con modificadores de presentación, recorte y efecto que se apilan.
in-place-edit	.instui-in-place-edit	Un [contenteditable] que se lee como texto hasta que recibe el foco, luego muestra la interfaz de entrada.
input-group	.instui-input-group	Una fachada alrededor de un input de texto con ranuras de icono líder y final.
link	.instui-link	Un hipervínculo estilizado con tamaños, una variante inversa para fondos oscuros y formas en línea o sin estilo.
list	.instui-list	Una lista con espaciado de elementos impulsado por tokens.
list.item	.instui-list	Un elemento de lista (InstUI List.Item).
mask	.instui-mask	Una superposición en flujo que llena su padre posicionado y centra su contenido — p. ej., un spinner sobre una tarjeta. Para un modal, prefiera un <dialog> nativo (su ::backdrop es la máscara). Cada uno de estos modificadores también está disponible globalmente (desnudo, o encadenado a cualquier otro componente) — vea la utilidad global mask.
menu	.instui-menu	Una superficie desplegable de elementos, grupos y separadores.
menu.group	.group	Un encabezado de grupo etiquetado (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Una entrada de menú (InstUI Menu.Item); añadir -disabled, -highlighted, o -active/[aria-checked].
menu.separator	.separator	Una regla divisoria entre elementos (InstUI Menu.Separator).
metric	.instui-metric	Una estadística etiquetada: un valor grande sobre un subtítulo.
modal	.instui-modal	Una superficie de diálogo (funciona sobre un <dialog> nativo); partes de encabezado/cuerpo/pie.
modal.body	.body	La región de contenido (InstUI Modal.Body); un único <img> ocupa todo el ancho.
modal.footer	.footer	La fila de acciones (InstUI Modal.Footer).
modal.header	.header	La fila de título (InstUI Modal.Header).
number-input	.instui-number-input	Una fachada de entrada numérica con una columna de spinner +/-.
pagination	.instui-pagination	Navegación de página: páginas numeradas, primeros, anterior, siguiente y últimos flechas, y una elipsis para huecos.
pagination.page	.page	Un enlace o botón de página (InstUI Pagination.Page); la página actual lleva [aria-current].
pill	.instui-pill	Una etiqueta de estado compacta; añada un glifo inicial con la forma compartida -icon-<name>.
popover	.instui-popover	Una superficie elevada para un [popover] nativo, posicionada con posicionamiento de anclaje CSS.
progress	.instui-progress	Una barra de progreso determinada con un medidor de color, tamaños y una etiqueta de valor opcional.
progress-circle	.instui-progress-circle	Un anillo de progreso circular controlado por propiedades personalizadas --value y --value-max.
radio	.instui-radio	Un botón de radio nativo y su etiqueta.
radio-input-group	.instui-radio-input-group	Un <fieldset> de selección única, simple o como un conmutador segmentado conectado.
range-input	.instui-range-input	Un control deslizante de rango estilizado con una burbuja de valor inversa.
rating	.instui-rating	Una calificación con estrellas con glifos rellenos y vacíos y una etiqueta numérica opcional.
side-nav-bar	.instui-side-nav-bar	Una barra de navegación vertical de elementos con icono sobre la etiqueta, con un modo minimizado solo de iconos.
side-nav-bar.item	.item	Una entrada de navegación (InstUI SideNavBar.Item); -selected marca la activa.
simple-select	.instui-simple-select	Un <select> nativo estilizado con un caret, que coincide con los estados y tamaños del campo de texto.
spinner	.instui-spinner	Un anillo de carga animado; asígnale role="status" y un aria-label.
table	.instui-table	Una tabla de datos estilizada para th y td más una leyenda opcional, con diseños hover, fijo y en tarjetas apiladas.
table.body	tbody	El grupo de filas de datos de la tabla (InstUI Table.Body).
table.cell	td	Una celda de datos (InstUI Table.Cell).
table.col-header	th	Una celda de encabezado de columna (InstUI Table.ColHeader); el estilo predeterminado th se anula mediante table.row-header para th[scope="row"].
table.head	thead	El grupo de filas de encabezado de la tabla (InstUI Table.Head).
table.row	tr	Una fila de tabla (InstUI Table.Row).
table.row-header	th[scope="row"]	Una celda de encabezado de fila (InstUI Table.RowHeader); estilizada a partir de los tokens de encabezado de fila, no de los de encabezado de columna.
tabs	.instui-tabs	Un conjunto de paneles con pestañas: una lista de pestañas, pestañas seleccionables y sus paneles.
tabs.panel	.panel	El panel de contenido para una pestaña (InstUI Tabs.Panel).
tabs.tab	.tab	Un solo botón de pestaña (InstUI Tabs.Tab, configurado mediante la lista de pestañas del padre Tabs); -selected marca la activa.
tag	.instui-tag	Un chip en línea para una palabra clave o filtro.
text	.instui-text	Tipografía de texto de cuerpo con modificadores de tamaño, peso, color y estilo.
text-area	.instui-text-area	Un <textarea> nativo redimensionable y estilizado con los mismos estados y tamaños que el campo de texto.
text-input	.instui-text-input	Un <input> nativo estilizado — incluyendo date, time y datetime-local, donde el navegador suministra el selector — con estados de validación y tamaños.
toggle-details	.instui-toggle-details	Un <details> nativo estilizado tipo disclosure con una chevrón giratoria.
toggle-group	.instui-toggle-group	Un disclosure con borde construido sobre <details>: una fila resumen con chevrón y contenido colapsable.
tooltip	.instui-tooltip	Una burbuja de tooltip con hover y focus por CSS, posicionable en cualquier lado.
tray	.instui-tray	Un panel fijado al borde que se desliza desde cualquier lado; un [popover] o <dialog> nativo.
tree-browser	.instui-tree-browser	Un árbol disclosure de colecciones anidadas y elementos hoja, con chevrons giratorios.
view	.instui-view	El primitivo View: una caja neutra con modificadores clave-valor para fondo, borde, radio, sombra, display, posición, overflow y cursor. Cada uno de estos modificadores también está disponible globalmente (sin prefijo, o encadenado a cualquier otro componente) — ver las utilidades background/border/shadow/display/position/overflow/cursor.

Utilidades

Nombre	Clase	Resumen
color	.--text-danger	Utilidades de color semántico: .--bg-<name>, .--text-<name> (alias como .--color-<name>) y .--border-<name> para la paleta semántica curada. Cada una de ellas también tiene un modificador alias adjunto al componente (por ejemplo -bg-danger en cualquier .instui-<component>).
cursor	.--cursor-pointer	cursor como una clase global y componible — .--cursor-<value> — usable sin prefijo o encadenada a cualquier componente (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilidades de gap flex/grid en la escala de espaciado, ortografía corta (--gap-sm) u ortografía larga (--gap-small). Usable sin prefijo o encadenado a cualquier componente (.instui-view.--gap-sm) — los componentes que ya establecen su propio gap desde un token específico de componente pueden verlo anulado.
icon	.instui-icon	El sistema de iconos: dimensionado .instui-icon más el pintor compartido -icon-<name> que enmascara un glifo (en currentColor) antes de cualquier elemento.
layout	.--display-flex	Utilidades de display y alineación de texto — .--display-<value> y .--text-align-<value> — como clases globales y componibles, usables sin prefijo o encadenadas a cualquier componente.
maskglobal	.--mask-overlay	Una copia global y dual de los modificadores de overlay del componente mask — --mask-overlay, --mask-fullscreen, --mask-blur — usables sin prefijo o encadenados a cualquier componente, sin envolver en un elemento .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y como clases globales y componibles — .--overflow-x-<value> / .--overflow-y-<value> — usables sin prefijo o encadenadas a cualquier componente.
position	.--position-relative	position como una clase global y componible — .--position-<value> — usable sin prefijo o encadenada a cualquier componente (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Clases para mostrar/ocultar según el ancho de la ventana gráfica o del contenedor a través de una escala de puntos de quiebre tematizada.
screen-reader-content	.instui-screen-reader-content	Oculta visualmente contenido manteniéndolo disponible para tecnologías de asistencia (el patrón estándar de recorte).
spacing	.--p-md	Utilidades de margen y padding — .--m<side>-<step> / .--margin-<side>-<step> y .--p<side>-<step> / .--padding-<side>-<step> en la escala de espaciado (lados t/b/s/e/x/y o ninguno, escritas cortas o completas — por ejemplo --mb-sm y --margin-bottom-small son la misma regla; margin también acepta auto). Usables sueltas o encadenadas a cualquier componente (por ejemplo class="instui-view --mb-sm").
stacking	.--stack-topmost	Utilidades de profundidad z-index — .--stack-<level> (deepest, below, above, topmost) — usables sueltas o encadenadas a cualquier componente, para que las capas se apilen de forma predecible en lugar de usar números ajustados a mano.
transition	.instui-transition.-transition-fade-entering	Clases de estado de animación para el componente Transition — .instui-transition y clases de estado (-transition-fade-entering, -transition-scale-exited, etc.) — usables sueltas o encadenadas a cualquier componente.
truncate	.--truncate	Truncamiento con puntos suspensivos con limitación de líneas controlada por --lines — usable suelto o encadenado a cualquier componente (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Un contorno para depurar layout: compón .-with-visual-debug en cualquier elemento para delinear la caja y sus hijos inmediatos, de modo que la estructura del diseño sea visible de un vistazo.

Reglas

Nombre	Clase	Resumen
base	*	El reset global opt-in: box-sizing, la superficie de la página, color de texto base y fuente, color-scheme, y los valores por defecto de enlaces.
prose	:where(body)	Valores tipográficos predeterminados para HTML sin procesar — encabezados, párrafos, listas, enlaces y código — aplicados automáticamente donde se importa (por defecto :where(body)); pase options.scope para apuntar a una raíz de contenido distinta (p. ej. .vp-doc).

Plugins

Nombre	Clase	Resumen
logos	.logos	Logotipos de productos Instructure como tokens de imagen CSS: --instui-logo-<product>-<layout>-<mode> contiene un SVG en data-URI, por lo que un logo se pinta por ejemplo con background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Clases utilitarias opt-in para la paleta primitiva cruda: .instui-bg-/fg-/border-primitive-color-<name> pintan un color desde los tokens de color primitivo, además de utilidades font-family/font-weight para los tokens de fuente primitivos. Se mantienen fuera de las utilidades semánticas para que las sobreescrituras allí sigan siendo solo semánticas.
visual-debug	.-with-visual-debug	Un contorno para depurar layout: compón .-with-visual-debug en cualquier elemento para delinear la caja y sus hijos inmediatos, de modo que la estructura del diseño sea visible de un vistazo.

layout

Nombre	Clase	Resumen
callout	div[class~="instui-callout"]	Alerta informativa en línea para un recordatorio breve o nota.
hero	div[class~="instui-hero"]	Sección de encabezado de ancho completo con título, subtítulo y imagen de fondo opcional.
page-layout	div[class~="instui-page-layout"]	Diseño de página estándar de tres columnas con encabezado, barra lateral y contenido principal.
rubric-note	div[class~="instui-rubric-note"]	Nota estructurada con categorías de rúbrica e indicadores de puntuación.
testimonial	div[class~="instui-testimonial"]	Visualización de cita o testimonio con atribución e imagen opcional.
two-column	div[class~="instui-two-column"]	Diseño de dos columnas con regiones de contenido izquierda y derecha.
wrapper	body[class~="instui-display-flex"]	Fila de app-shell: navegación lateral, contenedor con encabezado y panel opcional.