CSS Referência da API

A referência da API CSS cobre a camada de componentes baseada em classes do pantoken: componentes, utilities, regras globais e declarações construídas sobre o sistema de tokens.

Componentes

Nome	Classe	Resumo
agent-shell	.instui-agent-shell	Um contêiner de superfície para agentes de IA.
alert	.instui-alert	Uma mensagem inline com uma barra de cor de status e um glifo de status mascarado do conjunto de ícones compartilhado.
avatar	.instui-avatar	Um avatar de usuário mostrando iniciais ou uma imagem, circular por padrão.
badge	.instui-badge	Um pequeno ponto de contagem ou estado colocado sobre o canto de um alvo.
banner	.instui-banner	Uma superfície de mensagem descartável com ícone para anúncios em nível de página ou no contexto.
billboard	.instui-billboard	Um grande bloco de estado vazio ou call-to-action: um ícone ou imagem hero, um título e uma mensagem.
breadcrumb	.instui-breadcrumb	Uma trilha de breadcrumbs com separadores; a última migalha é a página atual.
breadcrumb.link	li	Uma migalha (InstUI Breadcrumb.Link), um <li> no <ol> do pai; a última é a página atual.
button	.instui-button	Um controle de ação acessível, estilizado a partir da paleta de tokens; primário por padrão.
byline	.instui-byline	Um objeto de mídia: uma figura hero ao lado de um título e descrição.
calendar	.instui-calendar	Uma grade de mês estática com navegação, cabeçalhos dos dias da semana e células de dia.
calendar.day	.day	Uma célula de dia (InstUI Calendar.Day); -today, -selected e -outside-month marcam seu estado.
card	.instui-card	Um contêiner de superfície que aceita conteúdo arbitrário.
checkbox	.instui-checkbox	Uma checkbox nativa e seu rótulo, ou um switch via -variant-toggle.
close-button	.instui-close-button	Um botão de ícone transparente que desenha seu próprio glifo ×, em três tamanhos mais uma variante on-color.
context-view	.instui-context-view	Um chamado elevado com um caret, posicionável em qualquer lado; funciona como um [popover] nativo.
drawer-layout	.instui-drawer-layout	Um layout dividido com uma gaveta lateral recolhível e um painel de conteúdo principal rolável.
drawer-layout.content	.content	O painel de conteúdo primário que preenche o espaço restante ao lado da gaveta.
drawer-layout.tray	.tray	O painel lateral ao lado do conteúdo principal, com overlay opcional e modificadores de superfície estilo gaveta.
file-drop	.instui-file-drop	Uma zona de drop de arquivos com estados hover, aceito e rejeitado.
form-field	.instui-form-field	Um wrapper de campo de formulário: um rótulo, seus controles e layouts inline, required ou readonly.
form-field-group	.instui-form-field-group	Um grupo <fieldset> com legend, layout em coluna ou inline, e espaçamento configurável.
form-field-messages	.instui-form-field-messages	Ajuda de campo e mensagens de validação — hint, error, success e apenas para leitor de tela — com um glifo em error e success.
heading	.instui-heading	Tipografia de heading de -level-h1 a -level-h6.
img	.instui-img	Um <img> estilizado com modificadores de display, crop e effect que se empilham.
in-place-edit	.instui-in-place-edit	Um [contenteditable] que é lido como texto até receber foco, então mostra a chrome de input.
input-group	.instui-input-group	Uma fachada ao redor de um campo de texto com slots de ícone leading e trailing.
link	.instui-link	Um hyperlink estilizado com tamanhos, uma variante inverse para fundos escuros, e formas inline ou unstyled.
list	.instui-list	Uma lista com espaçamento de itens dirigido por tokens.
list.item	.instui-list	Um item de lista (InstUI List.Item).
mask	.instui-mask	Uma sobreposição em fluxo que preenche seu pai posicionado e centraliza seu conteúdo — por exemplo, um spinner sobre um card. Para um modal, prefira um <dialog> nativo (sua ::backdrop é a máscara). Cada um desses modificadores também está disponível globalmente (puro, ou encadeado em qualquer outro componente) — veja a utility global mask.
menu	.instui-menu	Uma superfície dropdown de itens, grupos e separadores.
menu.group	.group	Um cabeçalho de grupo rotulado (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Uma entrada de menu (InstUI Menu.Item); adicione -disabled, -highlighted ou -active/[aria-checked].
menu.separator	.separator	Uma regra divider entre itens (InstUI Menu.Separator).
metric	.instui-metric	Uma estatística rotulada — um valor grande sobre uma legenda.
modal	.instui-modal	Uma superfície de dialog (funciona em um <dialog> nativo); partes header/body/footer.
modal.body	.body	A região de conteúdo (InstUI Modal.Body); um único <img> fica full-bleed.
modal.footer	.footer	A linha de ações (InstUI Modal.Footer).
modal.header	.header	A linha de título (InstUI Modal.Header).
number-input	.instui-number-input	Uma fachada de entrada numérica com uma coluna de spinner +/-.
pagination	.instui-pagination	Navegação de página: páginas numeradas, primeiro, anterior, próximo e último, e uma reticência para lacunas.
pagination.page	.page	Um link ou botão de página (InstUI Pagination.Page); a página atual carrega [aria-current].
pill	.instui-pill	Um rótulo de status compacto; adicione um glifo inicial com o formulário compartilhado -icon-<name>.
popover	.instui-popover	Uma superfície elevada para um [popover] nativo, posicionada com CSS anchor positioning.
progress	.instui-progress	Uma barra de progresso determinate com um medidor colorido, tamanhos e um rótulo de valor opcional.
progress-circle	.instui-progress-circle	Um anel de progresso circular acionado por propriedades customizadas --value e --value-max.
radio	.instui-radio	Um radio nativo e seu rótulo.
radio-input-group	.instui-radio-input-group	Um <fieldset> radio single-select, simples ou como um toggle segmentado conectado.
range-input	.instui-range-input	Um slider range estilizado com um bubble de valor inverso.
rating	.instui-rating	Uma classificação por estrelas com glifos preenchidos e vazios e um rótulo numérico opcional.
side-nav-bar	.instui-side-nav-bar	Uma régua de navegação vertical com itens ícone-sobre-rótulo, com um modo minimizado apenas de ícones.
side-nav-bar.item	.item	Uma entrada de navegação (InstUI SideNavBar.Item); -selected marca a ativa.
simple-select	.instui-simple-select	Um <select> nativo estilizado com caret, combinando com os estados e tamanhos do campo de texto.
spinner	.instui-spinner	Um anel de carregamento animado; atribua role="status" e um aria-label.
table	.instui-table	Uma tabela de dados estilizada para th e td mais uma legenda opcional, com layouts de hover, fixo e em cartão empilhado.
table.body	tbody	O grupo de linhas de dados da tabela (InstUI Table.Body).
table.cell	td	Uma célula de dados (InstUI Table.Cell).
table.col-header	th	Uma célula de cabeçalho de coluna (InstUI Table.ColHeader); o estilo padrão th é sobrescrito por table.row-header para th[scope="row"].
table.head	thead	O grupo de linhas de cabeçalho da tabela (InstUI Table.Head).
table.row	tr	Uma linha da tabela (InstUI Table.Row).
table.row-header	th[scope="row"]	Uma célula de cabeçalho de linha (InstUI Table.RowHeader); estilizada a partir dos tokens de cabeçalho de linha, não dos de cabeçalho de coluna.
tabs	.instui-tabs	Um conjunto de painéis com abas: uma lista de abas, abas selecionáveis e seus painéis.
tabs.panel	.panel	O painel de conteúdo de uma aba (InstUI Tabs.Panel).
tabs.tab	.tab	Um único botão de aba (InstUI Tabs.Tab, configurado pela lista de abas do pai Tabs); -selected marca a ativa.
tag	.instui-tag	Um chip em linha para uma palavra-chave ou filtro.
text	.instui-text	Tipografia de corpo de texto com modificadores de tamanho, peso, cor e estilo.
text-area	.instui-text-area	Um <textarea> nativo redimensionável e estilizado com os mesmos estados e tamanhos do campo de texto.
text-input	.instui-text-input	Um <input> nativo estilizado — incluindo date, time e datetime-local, onde o navegador fornece o seletor — com estados de validação e tamanhos.
toggle-details	.instui-toggle-details	Um disclosure nativo <details> estilizado com uma chevron giratória.
toggle-group	.instui-toggle-group	Um disclosure com borda construído sobre <details>: uma linha de resumo com chevron e conteúdo recolhível.
tooltip	.instui-tooltip	Um balão de tooltip com hover e foco em CSS, posicionável em qualquer lado.
tray	.instui-tray	Um painel preso à borda que desliza de qualquer lado; um [popover] ou <dialog> nativo.
tree-browser	.instui-tree-browser	Uma árvore de disclosure de coleções aninhadas e itens folha, com chevrons giratórios.
view	.instui-view	O primitivo View: uma caixa neutra com modificadores chave-valor para fundo, borda, raio, sombra, display, posição, overflow e cursor. Cada um desses modificadores também está disponível globalmente (puro ou encadeado em qualquer outro componente) — veja as utilidades background/border/shadow/display/position/overflow/cursor.

Utilitários

Nome	Classe	Resumo
color	.--text-danger	Utilitários de cor semântica: .--bg-<name>, .--text-<name> (alias como .--color-<name>) e .--border-<name> para a paleta semântica curada. Cada um também tem um modificador de alias anexado ao componente (por exemplo -bg-danger em qualquer .instui-<component>).
cursor	.--cursor-pointer	cursor como uma classe global composável — .--cursor-<value> — utilizável pura ou encadeada em qualquer componente (.instui-button.--cursor-pointer).
gap	.--gap-md	Utilitários flex/grid gap na escala de espaçamento, grafia curta (--gap-sm) ou longa (--gap-small). Utilizável puro ou encadeado em qualquer componente (.instui-view.--gap-sm) — componentes que já definem seu próprio gap a partir de um token específico de componente podem tê-lo sobrescrito.
icon	.instui-icon	O sistema de ícones: dimensionamento .instui-icon mais o pintor compartilhado -icon-<name> que mascara um glifo (em currentColor) antes de qualquer elemento.
layout	.--display-flex	Utilitários de display e alinhamento de texto — .--display-<value> e .--text-align-<value> — como classes globais composáveis, utilizáveis puras ou encadeadas em qualquer componente.
maskglobal	.--mask-overlay	Uma cópia global dupla dos modificadores de sobreposição do componente mask — --mask-overlay, --mask-fullscreen, --mask-blur — utilizáveis puros ou encadeados em qualquer componente, sem envolver em um elemento .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y como classes globais composáveis — .--overflow-x-<value> / .--overflow-y-<value> — utilizáveis puras ou encadeadas em qualquer componente.
position	.--position-relative	position como uma classe global composável — .--position-<value> — utilizável pura ou encadeada em qualquer componente (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Classes de mostrar/ocultar por largura de viewport ou container através de uma escala de breakpoints tematizada.
screen-reader-content	.instui-screen-reader-content	Oculta visualmente o conteúdo mantendo-o disponível para tecnologia assistiva (o padrão padrão clip).
spacing	.--p-md	Utilitários de margem e padding — .--m<side>-<step> / .--margin-<side>-<step> e .--p<side>-<step> / .--padding-<side>-<step> na escala de espaçamento (lados t/b/s/e/x/y ou nenhum, escrito curto ou por extenso — por exemplo --mb-sm e --margin-bottom-small são a mesma regra; margin também aceita auto). Usável isolado ou encadeado em qualquer componente (por exemplo class="instui-view --mb-sm").
stacking	.--stack-topmost	Utilitários de profundidade z-index — .--stack-<level> (deepest, below, above, topmost) — usável isolado ou encadeado em qualquer componente, para que camadas empilhem de forma previsível em vez de usar números ajustados manualmente.
transition	.instui-transition.-transition-fade-entering	Classes de estado de animação para o componente Transition — .instui-transition e classes de estado (-transition-fade-entering, -transition-scale-exited, etc.) — usáveis isoladas ou encadeadas em qualquer componente.
truncate	.--truncate	Truncamento com reticências controlado por clamp de linhas via --lines — usável isolado ou encadeado em qualquer componente (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Um contorno para depuração de layout: componha .-with-visual-debug em qualquer elemento para destacar a caixa e seus filhos imediatos, tornando a estrutura do layout visível de relance.

Regras

Nome	Classe	Resumo
base	*	Reset global opt-in: box-sizing, a superfície da página, cor e fonte base do texto, color-scheme e padrões de links.
prose	:where(body)	Padrões tipográficos para HTML bruto — títulos, parágrafos, listas, links e código — aplicados automaticamente onde for importado (padrão :where(body)); passe options.scope para direcionar a uma raiz de conteúdo diferente (por exemplo .vp-doc).

Plugins

Nome	Classe	Resumo
logos	.logos	Logotipos de produtos Instructure como tokens de imagem CSS: --instui-logo-<product>-<layout>-<mode> contém um SVG em data-URI, assim um logo é renderizado via p.ex. background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Classes utilitárias opt-in para a paleta primitiva: .instui-bg-/fg-/border-primitive-color-<name> pintam uma cor a partir dos tokens de cor primitivos, além de utilitários font-family/font-weight para os tokens de fonte primitivos. Mantidas fora das utilidades semânticas para que sobrescritas ali permaneçam apenas semânticas.
visual-debug	.-with-visual-debug	Um contorno para depuração de layout: componha .-with-visual-debug em qualquer elemento para destacar a caixa e seus filhos imediatos, tornando a estrutura do layout visível de relance.

layout

Nome	Classe	Resumo
callout	div[class~="instui-callout"]	Alerta informativo inline para um lembrete curto ou nota.
hero	div[class~="instui-hero"]	Seção de cabeçalho em largura total com título, subtítulo e imagem de fundo opcional.
page-layout	div[class~="instui-page-layout"]	Layout padrão de página em três colunas com cabeçalho, barra lateral e conteúdo principal.
rubric-note	div[class~="instui-rubric-note"]	Nota estruturada com categorias de rubrica e indicadores de pontuação.
testimonial	div[class~="instui-testimonial"]	Exibição de citação ou depoimento com atribuição e imagem opcional.
two-column	div[class~="instui-two-column"]	Layout de duas colunas com regiões de conteúdo esquerda e direita.
wrapper	body[class~="instui-display-flex"]	Linha do app-shell: navegação lateral, container com cabeçalho e painel opcional.