Todos os componentes

Explore todos os 308 componentes Lyra UI. Filtre por família, pesquise pelo nome e experimente prévias ao vivo ou abra um exemplo documentado.

Conversação e chat

Espaço de trabalho de agente — Estrutura controlada e responsiva para uma conversa com IA que reúne a transcrição, o compositor de mensagens e um painel de detalhes opcional para a execução, as ferramentas, a recuperação, a fundamentação e o contexto.
Visualizador de áudio — Visualização de atividade de voz desenhada em canvas, refletindo o estado ocioso, ouvindo, pensando ou falando de um agente.
Seletor de variantes — Navegador controlado «‹ n / m ›» entre variantes regeneradas ou editadas de uma mesma mensagem de chat.
Compositor de chat — Campo de entrada de mensagens de chat com redimensionamento automático e controles integrados de envio e paragem.
Mensagem de chat — Estrutura de balão de chat baseada em função, com avatar, emblemas e rodapé sensível ao estado.
Área de rolagem do chat — Contêiner de rolagem da transcrição que controla a fixação no final, um botão para ir à última mensagem e um divisor de mensagens não lidas.
Ponto de restauração — Ponto de restauração da conversa integrada, com confirmação antes de restaurar, para voltar o chat a um estado anterior.
Bloco de código — Exibição de código delimitado, com destaque de sintaxe opcional de carregamento tardio e botão de cópia.
Núcleo do bloco de código — Exibição de código enxuta para build, que apenas destaca a sintaxe a partir de um mapa de gramática fornecido em tempo de compilação.
Item de conversa — Linha selecionável do histórico de chat que mostra o título, a prévia e o carimbo de data/hora de uma sessão.
Estado da geração — Mostra o tempo decorrido, os tokens e o débito durante o streaming de uma resposta de IA.
Divisor de transferência — Separador rotulado que marca a transferência de controle entre agentes numa transcrição.
Markdown — Renderização sanitizada de Markdown para HTML, com tabelas GFM, código e conexões.
Núcleo do Markdown — Renderização de Markdown enxuta para build, que destaca o código apenas a partir de um mapa de gramática fornecido em tempo de compilação.
Ações de mensagem — Barra de ações por mensagem para uma mensagem de chat, com copiar, regenerar, editar e feedback integrados.
Feedback de mensagem — Avaliação com polegar para cima/baixo para uma mensagem do assistente, com um painel de detalhe opcional de motivo e comentário.
Seleção de modelo — Seletor de fornecedor e modelo, com catálogo fixo ou entrada personalizada em texto livre.
Painel de definições do modelo — Combinação de um seletor de modelo com um cursor deslizante de temperatura, para configurar um agente.
Apertar para falar — Botão de captura de microfone que gere todo o ciclo de vida de solicitação de permissão, gravação e encerramento, para uso ao pressionar e segurar ou por alternância.
Estado do stream — Mostra a fase de uma única conexão de streaming, com deteção de interrupções baseada em heartbeats.
Texto em streaming — Renderiza de forma incremental o texto do assistente em streaming, agrupando atualizações rápidas de tokens.
Núcleo do texto em streaming — Renderizador de texto em streaming enxuto para build, cujo modo Markdown destaca os blocos de código apenas a partir de um mapa de gramática fornecido em tempo de compilação.
Chips de sugestão — Linha rolável de chips de prompts iniciais ou de continuação, que entrega o texto escolhido ao componente anfitrião.
Lista de conversas — Barra lateral de conversas agrupada e pesquisável, com ações de fixar, arquivar, excluir e renomear por linha.
Feed de transcrição — Feed de legendas ao vivo para uma sessão de voz em andamento, com atualização de texto provisório para final e rolagem com fixação no final.
Indicador de escrita — Sinal de presença puramente visual que mostra que o assistente está a compor uma resposta.
Emblema de uso — Faixa compacta de tokens/custo/latência para uma mensagem ou execução, com detalhamento em dica ao passar o cursor.
Seletor de voz — Seletor de voz de TTS sobre um catálogo fornecido, com prévia de áudio integrada e tratamento de valores obsoletos.
Renderizador de widgets — Renderiza uma árvore declarativa de widgets em JSON transmitida em streaming por um agente, através de um registro de tipo-para-componente com lista de permissões.
Partes da mensagem — Renderiza partes ordenadas e intercaláveis de mensagens de IA com primitivas de texto, raciocínio, ferramentas, citações, anexos e multimédia.
Entrada de prompts — Combina a composição de prompts com anexos, seleção de modelo, voz e fontes, menções, comandos e turnos em fila.
Fila de prompts — Gere uma fila controlada de prompts de seguimento que podem ser editados, reordenados, removidos ou enviados de imediato.
Sessão em tempo real — Fornece uma interface de sessão de voz independente do fornecedor para conexão, atividade, transcrição, captura, silêncio e interrupção.
Barra de seleção — Posiciona ações para perguntar, citar, referenciar e copiar junto ao texto selecionado, preservando a respetiva âncora documental.

Ferramentas de agentes e observabilidade

Feed de atividade — Registo de atividade contínuo (somente adição) das ações detalhadas de um agente, que se resume num total de etapas concluídas quando a execução termina.
Dashboard de avaliação de agentes — Vista geral de avaliação controlada que combina cartões de métricas com um gráfico de tendência e o histórico de estado de cada execução.
Pergunta do agente — Coleta uma resposta estruturada a uma pergunta de um agente ou servidor MCP, com ações para aceitar, recusar e cancelar.
Execuções em segundo plano — Mostra tarefas de agentes gerenciadas pelo aplicativo, em fila, em execução ou concluídas, com solicitações para abrir e cancelar.
Indicador de orçamento — Mostra o consumo informado em relação a um limite, incluindo os estados indisponível e excedido.
Revisão de alterações — Analisa alterações em arquivos fornecidas pelo aplicativo e pede uma decisão para manter ou descartar cada bloco.
Gerenciamento de conectores — Mostra o estado da conexão e pede ações para conectar, desconectar ou tentar novamente nos conectores gerenciados pelo aplicativo.
Concessão de permissão — Apresenta uma solicitação de permissão limitada a um escopo e comunica ao aplicativo a escolha do usuário de permitir ou recusar.
Regras de permissão — Mostra as regras de permissão definidas pelo aplicativo e pede alterações às decisões de permitir, perguntar ou recusar.
Execução de agente — Estrutura de nível superior para uma execução de agente, mostrando o estado, o tempo decorrido, a etapa atual e o custo, com ações de cancelamento e nova tentativa.
Trace de agente — Vista hierárquica de trace de agente/LLM, com filtros por tipo de span e atalhos rápidos para transferências de controle, sobre um único array de spans compartilhado.
Fila de aprovação — Fila acessível por teclado de chamadas de ferramentas pendentes, cada uma revista e aprovada ou recusada através de um único diálogo compartilhado.
Painel de artefato — Estrutura em torno de um artefato gerado por um agente, com alternância entre prévia e código, navegação entre versões e ações de copiar/baixar.
Moldura de navegador — Janela de visualização de apresentação do tipo "computador do agente", mostrando um fluxo de capturas de tela, uma URL só de leitura e controles para assumir o comando.
Cartão de commit — Resumo compacto de um commit com estatísticas de alterações e mudanças por arquivo, com link para uma visualização de diff.
Painel de comparação — Comparação lado a lado de duas respostas (A/B) com votação do vencedor, para avaliação de modelos no estilo arena.
Barra de confirmação — Bloco de aprovar/recusar integrada e não modal para uma ação proposta pelo agente, inserido na transcrição em vez de uma caixa de diálogo.
Inspetor de contexto — Vista de inspeção dos segmentos de contexto de uma chamada ao modelo, com estimativas de tokens, citações, marcadores de mascaramento e controles de cópia/exportação.
Conjunto de dados de avaliação — Lista de exemplos de avaliação, filtrável e com suporte a etiquetas, com controles para adicionar, remover, importar e exportar.
Resultado de avaliação — Superfície de pontuação por rubrica e revisão humana para comparar as execuções de um exemplo de avaliação.
Execução de avaliação — Vista de progresso ao vivo de um lote de avaliação, com o progresso geral e um painel expansível por exemplo, incluindo traces de fundamentação e de ferramentas.
Resumo de políticas — Lista somente leitura de decisões de guardrail, permissão, privacidade e política de ferramentas, com explicações acessíveis de permissão, recusa ou necessidade de revisão.
Cascata de spans — Linha temporal horizontal dos spans de um trace de agente, em barras com tom de estado sobre um eixo de tempo comum.
Stack trace — Analisa stack traces de JS/TS, do navegador e de Python em frames ativáveis, com retração de frames internos.
Lista de tarefas — Rastreador retrátil e em tempo real do plano de um agente, com estado de ciclo de vida por etapa e subetapas aninhadas.
Terminal — Console ANSI somente leitura que renderiza a saída em streaming de um agente ou ferramenta, com pesquisa e rolagem com fixação no final.
Resultados de testes — Resumo de sucesso/falha de um conjunto de testes, com contagens por estado, alternadores de filtro e detalhamento de falhas com expansão automática.
Painel de raciocínio — Painel retrátil para a transcrição de raciocínio, ao vivo ou revista, de um agente de IA.
Diálogo de aprovação de ferramenta — Ponto de controle human-in-the-loop para aprovar, rejeitar ou editar uma chamada de ferramenta proposta antes de ser executada.
Bloco de chamada de ferramenta — Bloco retrátil integrada para uma chamada de ferramenta do agente, que se expande para mostrar os argumentos, o erro e o resultado.
Chip de chamada de ferramenta — Chip compacto integrada que resume o nome, o estado e a duração de uma chamada de ferramenta do agente.
Formulário de parâmetros de ferramenta — Gera um formulário editável a partir do JSON Schema plano de uma ferramenta, para ajustar os argumentos da chamada.
Diálogo de resultado da ferramenta — Sobreposição modal que mostra o estado, a duração e o detalhe completo do resultado de uma chamada de ferramenta.
Vista de resultado da ferramenta — Renderiza o resultado de uma chamada de ferramenta através de um renderizador registrado, usando JSON como alternativa.
Diálogo de seleção de ferramentas — Diálogo pesquisável e agrupado por categoria, para escolher quais as ferramentas do agente que estão ativadas.
Linha temporal de ferramentas — Lista cronológica das chamadas de ferramentas de uma execução de agente, com contagens de nova tentativa, controle de aprovação humana e mascaramento de campos sensíveis.
Árvore de trace — Hierarquia retrátil de spans de um trace de agente/LLM, com barra de duração e colunas opcionais de tokens/custo.
Cartão de resultado — Estrutura de cartão com contorno que dá aos renderizadores de resultados de ferramentas personalizados um visual uniforme de cartão pequeno
Campo de resultado — Linha compacta de etiqueta/valor para cartões de resultados de ferramentas e faixas de metadados densas
Aplicativo MCP — Aloja um recurso executável de MCP App num ambiente isolado e expõe os solicitações do anfitrião como eventos tipados.
Estúdio de prompts — Oferece um espaço independente do fornecedor para editar, visualizar, versionar, salvar e executar prompts estruturados.
Visualizador de esquemas — Inspeciona árvores JSON Schema selecionáveis com restrições, campos obrigatórios, ramos de composição e problemas de validação.
Painel de subagentes — Apresenta uma hierarquia controlada de execuções de subagentes com estado, tarefa, modelo, progresso e ações de ciclo de vida.

Recuperação e grafos de conhecimento

Cartão de comunidade — Cartão-resumo de uma comunidade de um grafo de conhecimento, com chips de membros e uma ação de detalhamento.
Explorador de incorporações — Vista de dispersão 2D acessível de coordenadas de incorporação projetadas pelo componente anfitrião, com coloração opcional por agrupamento e seleção de pontos.
Cartão de entidade — Ficha de uma entidade do grafo de conhecimento, com selo de tipo, propriedades, grau e uma ação para focar no grafo.
Chip de entidade — Menção @entidade integrada para o texto do agente, com prévia em popover ao passar o mouse ou focar.
Dossiê de entidade — Superfície de detalhe de entidade com um cabeçalho, uma estatística de confiança e abas para relações, trechos de suporte e proveniência.
Grafo — Mapeia relações como um diagrama de nós e conexões com disposição dirigida por forças, navegável com panorâmica e zoom.
Legenda de grafo — Legenda de tipos de nó para um grafo associado, que também funciona como filtro de visibilidade.
Fila de ingestão — Lista controlada de documentos a avançar por um pipeline de ingestão, mostrando a etapa, o progresso, as contagens e os solicitações de nova tentativa ou cancelamento.
Base de conhecimento — Lista de fontes de uma base de conhecimento de recuperação, com estado de sincronização, saúde da indexação, permissões e solicitações de gestão por linha.
Administração da base de conhecimento — Estrutura de operações com abas que combina as fontes de uma base de conhecimento com a fila de ingestão e encaminha as ações de gestão para o componente anfitrião.
Explorador de grafo de conhecimento — Estrutura de exploração de grafo de conhecimento que combina a renderização do grafo, pesquisa de entidades, filtros de tipo, expansão de vizinhança e procura de caminhos.
Mapa mental — Árvore radial de tópicos expansível para navegar espacialmente por uma hierarquia e aprofundar num tópico.
Lista de vizinhos — Linhas de relacionamento de uma entidade, com navegação e expansão no grafo por linha.
Paleta de nós — Biblioteca de nós pesquisável e categorizada para arrastar ou posicionar nós num canvas de fluxo.
Faixa de caminho — Cadeia compacta e rolável de nó-relação-nó que representa um caminho de raciocínio GraphRAG.
Inspetor de trechos — Lista classificada de trechos RAG recuperados, com barras de relevância e um link direto para um visualizador de documentos.
Emblema de citação — Marcador de citação integrada [n], com prévia ao pairar o cursor e coloração de confiança/verificação.
Resumo de fundamentação — Painel de pontuação de fundamentação ao nível da alegação, mostrando contagens de suporte, cobertura de citações, confiança, avisos e citações de evidências.
Painel de memória — Superfície de memória de trabalho do agente para contexto de curto prazo e memórias de longo prazo, com confiança e ações sujeitas a confirmação.
Painel de proveniência — Apresenta a fundamentação de uma resposta como um detalhamento retrátil de entidades, relações, comunidades e trechos.
Resposta RAG — Superfície de resposta fundamentada que combina Markdown higienizado, selos de citação, uma avaliação da fundamentação e prévias expansíveis das fontes.
Progresso da pesquisa — Mostra as etapas de pesquisa, o número de fontes e o progresso global fornecidos pelo aplicativo.
Resultados de recuperação — Lista classificada de trechos de recuperação, com deduplicação, agrupamento por fonte, seleção e modos de apresentação compacto ou expandido.
Pesquisa de recuperação — Barra de pesquisa para uma superfície de recuperação ou RAG, com chips de filtro e escopo, um seletor de modo vetorial/por palavras-chave/híbrido e feedback de estado.
Trace de recuperação — Linha temporal das etapas de um pipeline de recuperação, com evidência expansível para cada etapa de reformulação, incorporação, recuperação, reordenação e filtragem.
Cartão de fonte — Entrada de citação que mostra o título, a página, o excerto e o texto completo expansível de uma fonte.
Lista de fontes — Painel de Fontes retrátil que agrupa os cartões de citação de uma mensagem de chat sob um único cabeçalho.
Seletor de fontes — Árvore de caixas de seleção que delimita quais fontes fundamentam a próxima resposta, com pastas de três estados, seleção total e pesquisa.
Evidências das afirmações — Audita afirmações geradas face às citações, com estado de suporte, nível de confiança e evidências.
Painel de avaliação RAG — Apresenta métricas de qualidade RAG, tendências, segmentos de avaliação e histórico de execuções calculados pelo anfitrião.
Comparação de recuperação — Compara lado a lado conjuntos classificados de recuperação e reranking, com sobreposição e discriminação das pontuações.

Formulários e campos

Botão — Botão de ação tokenizado com variantes de tom, tamanhos e um estado de carregamento.
Caixa de seleção — Controlo de formulário booleano com estados marcado, desmarcado e indeterminado.
Grupo de caixas de seleção — Agrupa caixas de seleção relacionadas num único campo de seleção múltipla, associado a formulário e validado.
Editor de código — Superfície de edição de código multilinha sem dependências, com uma faixa lateral opcional de números de linha.
Seletor de cor — Campo de cor nativo associado a formulário, com rótulo, dica e elementos visuais de erro de validação.
Combobox — Seleção simples ou múltipla e filtrável que combina um campo de texto com um popover de lista de opções.
Campo de data — Campo de data com um popover de calendário acoplado e um valor em ISO-8601.
Seletor de data — Calendário integrada em grade mensal para selecionar uma data única ou um intervalo de datas.
Seletor de emojis — Seletor de emoji pesquisável, navegável pelo teclado e associado a formulário.
Botão de ícone — Aciona uma ação com um botão compacto, acessível e somente com ícone.
Campo de texto — Campo de texto de uma linha, com rótulo, dica e elementos visuais de validação integrada opcionais.
Seletor de país — Seleciona códigos de países e territórios com nomes traduzidos, bandeiras e busca opcional.
Seletor de moeda — Seleciona códigos de moedas com nomes traduzidos, símbolos e busca opcional.
Seletor de fuso horário — Seleciona identificadores de fusos horários de uma lista ordenada, com busca opcional.
Seletor de unidade — Seleciona unidades de medida com nomes traduzidos, símbolos e busca opcional.
Seletor de localidade — Lista suspensa fechada para mudar a configuração regional ativa, a partir do registro de configurações regionais próprio da biblioteca.
Campo numérico — Campo numérico com restrições de mínimo, máximo e passo, além de validação nativa de restrições.
Opção — Opção selecionável que fornece dados de valor, rótulo, agrupamento e estado a um combobox.
Campo de telefone — Campo de telefone com reconhecimento de país, cujo valor de formulário é o E.164 canónico
Botão de rádio — Controlo de escolha única associado a formulário para selecionar uma opção num conjunto
Grupo de botões de rádio — Grupo rotulado e navegável por teclado de botões de rádio de escolha única.
Formulário de rubrica — Grade configurável de pontuação, categoria e comentário, com um fluxo de enviar e avançar para percorrer uma fila de avaliação de respostas de IA.
Lista suspensa — Lista suspensa fechada para escolher uma opção num conjunto fixo de alternativas.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Controlo deslizante — Controlo de intervalo numérico para configurações como a temperatura de um LLM ou o nível de volume.
Seletor de amostras — Seletor de opção única sobre um conjunto pequeno e fixo de amostras de cor, com um contrato de radiogroup incorporado.
Interruptor — Controlo de formulário booleano do tipo interruptor, com semântica de ligado/desligado para formulários nativos.
Área de texto — Campo de texto simples multilinha com crescimento automático, validação e elementos visuais de controle de formulário.
Campo de hora — Campo de hora segmentado e adaptado ao idioma, com um seletor de colunas associado; a experiência nativa do navegador (input[type=time]) é o lr-native-time-input.
Intervalo de tempo — Controlo de arrasto com duas alças para selecionar um intervalo de início e fim num domínio numérico.
Botão de alternância — Botão autônomo de dois estados que liga ou desliga uma opção, com semântica aria-pressed.
Grupo de botões de alternância — Agrupa botões de alternância atrás de uma única parada de tabulação, com seleção múltipla ou única que pode ser desmarcada.
Campo de hora nativo — Campo de hora nativo, envolvido pelos elementos de rótulo, dica e validação da Lyra, indicado para quando o seletor nativo do navegador é preferível ao campo segmentado lr-time-input.
Código OTP — Campo segmentado para introduzir um código de verificação de uso única, com preenchimento automático por SMS integrado.
Botão de rádio segmentado — Controlo de escolha única com aparência de botão em vez de círculo, normalmente agrupado com lr-radio-group para formar um controle segmentado.
Campo de tokens — Campo associado a formulário que reúne uma lista de tokens removíveis, como tags ou destinatários.

Visualização de dados

Construtor de consultas de grafo — Editor associado a formulário para uma consulta tipada de relação ou caminho num grafo, com âncoras de entidade, filtros de tipo, limites de saltos e consultas guardadas.
Calendário — Calendário mensal responsivo com marcadores de eventos e uma vista de agenda acessível por teclado.
Medidor de contexto — Medidor de ocupação segmentado, em barra ou anel, para um orçamento de tokens ou uma janela de contexto.
Biblioteca de documentos — Inventário de documentos pesquisável e filtrável, com versões, etiquetas, proprietários, atualidade, ordenação e seleção em massa.
Lista de variáveis de ambiente — Lista chave/valor mascarada para variáveis de ambiente e segredos, com revelação e cópia por linha.
Árvore de arquivos — Predefinição de explorador de arquivos sobre o componente árvore, com selos de estado do Git e carregamento diferido de diretórios.
Tela de fluxo — Tela com pan e zoom para construir e executar fluxos de trabalho visuais em DAG.
Controlos de fluxo — Grupo de botões de zoom, ajuste e bloqueio para um canvas de fluxo associado.
Minimapa de fluxo — Mapa de visão geral no canto com um retângulo de área de visualização arrastável para um canvas de fluxo associado.
Nó de fluxo — Cartão de nó de fluxo de trabalho com cabeçalho, tom de estado e conectores para um canvas de fluxo.
Sobreposição de execução de fluxo — Aplica decorações de estado de execução num canvas de fluxo e exibe uma faixa-resumo compacta das etapas.
Funil — Apresenta a perda de conversão etapa a etapa como barras normalizadas pela primeira etapa.
Indicador — Apresenta um único valor como um indicador radial, em anel ou linear.
Mapa de calor — Renderiza uma matriz ou grade de calendário de valores como um mapa de calor em canvas, sensível ao redimensionamento.
Paginação — Navegação de páginas controlada, com salto de página editável e resumo do intervalo de itens
Construtor de consultas — Construtor de consultas estruturadas e composável para dados tabulares ou de dashboard, combinando linhas de condição de campo/operador/valor com um combinador E/OU.
Faixa de sequência — Faixa compacta por item que visualiza uma sequência de estados categóricos como células coloridas, com um marcador opcional.
Sparkline — Desenha uma tendência SVG compacta e integrada como linha, área preenchida ou barras para uma série de dados.
Estatística — Apresenta um único KPI com unidade, etiqueta de tendência, linhas de detalhe e uma sparkline opcional.
Tabela — Tabela de dados de apresentação, com cabeçalhos ordenáveis, seleção, filtragem e paginação.
Linha temporal — Sequência ligada de linhas de eventos passados, para registros de auditoria, históricos de agentes e changelogs.
Item da linha temporal — Uma linha de evento para uma linha temporal, com marcador codificado por cor, título, timestamp e descrição.
Árvore — Hierarquia expansível/retrátil para navegar em grafos, documentos ou árvores de arquivos
Nó de árvore — Renderizador recursivo de linhas treeitem para um nó e os seus filhos dentro de uma árvore.
Nuvem de palavras — Nuvem de tags SVG sem dependências, que dimensiona cada palavra de acordo com o seu peso
Grade de dados — Grade de dados virtualizada para grandes conjuntos de dados, no cliente ou no servidor, com ordenação, filtragem, agrupamento, paginação e seleção.

Gráficos

Gráfico de barras — Compara valores entre categorias com barras verticais ou horizontais.
Diagrama de caixa — Resume distribuições a partir de resumos estatísticos de cinco números pré-calculados.
Gráfico de bolhas — Plota três dimensões por ponto usando posição x, y e raio da bolha.
Gráfico — Wrapper principal do Chart.js que alimenta gráficos de linha, barras, pizza e outras visualizações de dados.
Gráfico de rosca — Mostra proporções parte-todo como segmentos de um anel.
Histograma — Agrupa valores numéricos em intervalos de largura igual para revelar a sua distribuição.
Gráfico de linhas — Acompanha tendências ao longo de um eixo contínuo com uma ou mais séries conectadas.
Gráfico leve — Gráfico de barras e linhas sem dependências, renderizado como SVG puro, sem necessidade do Chart.js
Gráfico de pizza — Gráfico de pizza proporcional que mostra a participação de uma série no total
Gráfico de área polar — Gráfico de área polar que plota cada categoria como uma fatia dimensionada pelo seu valor
Gráfico de radar — Gráfico de radar que compara várias métricas de uma série numa grade radial
Gráfico de dispersão — Gráfico de dispersão de pares de pontos x/y brutos em eixos lineares

Layout e navegação

Acordeão — Coordena um grupo de painéis expansíveis, permitindo opcionalmente que vários fiquem abertos ao mesmo tempo.
Item de acordeão — Painel expansível retrátil, projetado para se encaixar num grupo de acordeão.
Trilho de app — Trilho de navegação responsivo que se adapta de completo a somente ícones e, por fim, a uma sobreposição em dispositivos móveis.
Grupo do trilha de app — Secção com título, opcionalmente retrátil, que agrupa itens de navegação dentro de uma trilha de app.
Item do trilha de app — Item de navegação com ícone e rótulo para uma trilha de app, com um estado recolhido somente com ícone.
Trilha de navegação — Trilha de navegação responsiva que mostra a localização do usuário dentro da hierarquia de páginas
Item da trilha de navegação — Um link ou rótulo da página atual dentro de uma trilha de navegação
Grupo de botões — Agrupa botões de ação relacionados num único conjunto responsivo e rotulado
Cartão — Superfície de conteúdo com contorno, com slots para cabeçalho, multimédia, rodapé e ações.
Carrossel — Carrossel acessível de um slide por vez, com navegação por teclado, indicadores, repetição em loop e reprodução automática.
Item de carrossel — Contêiner semântico opcional de slide que aplica um estilo de item consistente a um filho do carrossel.
Paleta de comandos — Menu de comandos do aplicativo, pesquisável, com navegação por teclado e atalhos.
Grupo de controles — Agrupa controles de formulário variados e botões de ação numa única linha responsiva e centralizada
Grelha de dashboard — Grelha de widgets controlada, responsiva e acessível pelo teclado, que posiciona entradas de layout e emite solicitações de movimento, redimensionamento e colisão.
Detalhes — Painel expansível acessível que se expande para revelar conteúdo abaixo de um resumo.
Painel de encaixe — Painel redimensionável e retrátil, encaixado numa das bordas do seu layout existente.
Painel de detalhamento — Estrutura de navegação controlada, de um ponto de dados de um gráfico ou tabela até evidências, documentos, entidades ou execuções de agente relacionados, com um caminho de trilha de navegação.
Item de menu suspenso — Alias compatível com Web Awesome para uma única linha de ação dentro de um menu suspenso.
Barra de filtros — Linha de filtros de dashboard que compõe campos da Lyra e chips removíveis, com estados de reposição e carregamento.
Menu — Menu semântico embutido com itens de ação, navegação por teclado e submenus aninhados.
Item de menu — Linha de ação única para um menu, com ícone, caixa de seleção ou estilo destrutivo opcionais.
Elemento reordenável — Linha única dentro de uma lista reordenável, combinando botões de mover para cima/baixo com conteúdo inserido via slot.
Lista reordenável — Lista genérica de linhas reordenáveis, movidas através de botões por linha ou do atalho Ctrl/Cmd+Seta.
Rótulo de menu — Adiciona um cabeçalho não interativo para agrupar itens relacionados dentro de um menu.
Barra de menus — Barra de menus de aplicativo horizontal, com menus suspensos titulados e navegação completa por teclado.
Item da barra de menus — Título de nível superior de uma barra de menus que abre seu menu aninhado ou funciona como uma ação simples.
Menu de navegação — Navegação de cabeçalho do site com links e painéis suspensos, que se oculta atrás de um botão de menu quando falta espaço.
Item do menu de navegação — Uma entrada do menu de navegação: um link para uma página ou um botão de divulgação que abre um painel suspenso.
Página — Estrutura semântica de aplicativo cuja navegação alterna entre uma coluna fixa e uma gaveta modal no celular conforme o espaço que realmente lhe é atribuído, e não a janela.
Painel responsivo — Encaixa o conteúdo integrada no desktop ou o apresenta como uma folha de sobreposição em dispositivos móveis
Scroller — Superfície de deslocamento responsiva com controles opcionais de anterior/próximo para linhas de cartões e separadores.
Segmentado — Linha de botões de seleção única para escolher, rapidamente, uma entre várias opções rotuladas.
Divisão — Divide um dashboard em painéis redimensionáveis por arraste, com retração responsivo opcional.
Painel dividido — Divide o conteúdo em dois painéis redimensionáveis por arraste com um único divisor, uma alternativa mais simples ao lr-multi-split multipainel.
Stepper — Guia os usuários por um assistente ordenado de várias etapas, com estado individual por etapa e navegação direta com um clique.
Abas — Faixa de abas que exibe um painel do light DOM por vez, com navegação completa por teclado.
Aba — Descritor de aba compatível com Web Awesome/Shoelace, pareado com seu painel dentro de uma faixa de abas por meio dos atributos panel e name.
Painel de aba — Descritor de painel compatível com Web Awesome/Shoelace, pareado com sua aba dentro de uma faixa de abas por meio dos atributos name e panel.
Lista virtual — Contentor de lista com janelamento que renderiza apenas as linhas visíveis no tela, para coleções grandes e deslocáveis
Widget — Estrutura de painel com título e alternadores opcionais de retração e expansão em tela inteiro

Sobreposições e feedback

Toast — Região de empilhamento que ancora notificações toast a um canto do tela.
Item de toast — Notificação toast única e descartável, com destaque de severidade, ícone opcional e temporizador de descarte automático.
Chip — Pequeno elemento em formato de pílula para uma tag, filtro ou escopo, opcionalmente removível ou alternável.
Grupo de chips — Envolve um conjunto de chips com um alternador opcional de excedente +N quando eles ultrapassam um limite.
Alerta — Mensagem de alerta fechada por padrão, com fechamento automático programável e transferência opcional para a pilha de notificações toast compartilhada.
Emblema — Rótulo compacto de estado para sinalizar estados, contagens ou categorias integrada
Destaque — Superfície de mensagem integrada para conteúdo de estado, aviso e erro, com opção de dispensar.
Menu de contexto — Transforma qualquer região em um alvo de clique direito, toque longo ou Shift+F10 que abre um menu de ações.
Diálogo — Sobreposição modal com retenção de foco para confirmações, formulários e outras tarefas interruptivas.
Gaveta — Desliza um painel modal a partir de qualquer borda da área de visualização para filtros ou controles contextuais.
Menu suspenso — Janela flutuante com papel de menu que ancora uma lista de ações a um gatilho fornecido pelo consumidor
Estado vazio — Comunica um estado vazio ou sem dados com um ícone, mensagem e ações opcionais.
Kbd — Chip sensível à plataforma que renderiza um atalho de teclado como teclas
Janela flutuante — Superfície flutuante acionada por clique, com fechamento automático ao clicar fora, para conteúdo e controles contextuais
Pop-up — Primitiva de posicionamento de baixo nível que mantém um painel flutuante alinhado à sua âncora, o mesmo mecanismo usado pela janela flutuante e pela dica.
Barra de progresso — Indicador de progresso horizontal, determinado ou indeterminado, com valor opcional.
Anel de progresso — Indicador de progresso circular, determinado ou indeterminado, com rótulo central.
Avaliação — Avaliação por estrelas acessível via teclado, com preenchimento parcial de precisão fracionária
Esqueleto — Espaço reservado animado que substitui o conteúdo enquanto ele carrega.
Indicador de atividade — Sinaliza uma tarefa em segundo plano em andamento com um indicador de atividade animado e indeterminado.
Etiqueta — Alias semântico do tratamento de emblema para rotular palavras-chave ou categorias
Dica — Dica exibida ao passar o cursor ou ao focar, que descreve um gatilho fornecido pelo consumidor

Visualizadores de documentos e arquivos

Visualizador de arquivo compactado — Lista nomes de arquivos e tamanhos descompactados dentro de um arquivo ZIP sem extrair o conteúdo.
Visualizador de calendário — Analisa e renderiza os eventos de um arquivo de calendário .ics como resumos, horários e locais.
Visualizador de contacto — Busca um documento vCard e renderiza um cartão acessível para cada contacto.
Visualizador de CSV — Busca um arquivo CSV e renderiza as suas linhas numa planilha virtualizada e deslocável.
Visualizador de conjunto de dados — Busca texto delimitado e o renderiza como uma tabela de dados tipada e acessível.
Comparação de documentos — Comparação lado a lado ou integrada de duas versões de um documento, combinando uma vista de diff textual com prévias renderizadas do documento.
Prévia de documento — Exibe uma prévia integrada de um documento ou anexo com base no tipo MIME, com alternativa de transferência.
Visualizador de documento — Apresenta um documento em uma caixa de diálogo com um registro plugável de renderizadores por tipo MIME.
Visualizador de DOCX — Renderiza um arquivo DOCX como HTML semântico higienizado usando o conversor mammoth.
Visualizador de e-book — Renderiza um EPUB com navegação por capítulos usando a dependência peer opcional epub.js.
Visualizador de e-mail — Analisa e renderiza uma mensagem .eml com cabeçalhos, corpo higienizado e anexos.
Visualizador de GeoJSON — Busca, valida e renderiza num mapa as feições de um arquivo GeoJSON.
Camada de destaque — Sobreposição que desenha retângulos de destaque ativáveis sobre conteúdo de documento posicionado.
Visualizador de HTML — Busca uma URL e renderiza o seu HTML com segurança após higienizá-lo.
Inclusão — Busca um fragmento HTML e o transclui como conteúdo de página em light DOM, devidamente higienizado.
Visualizador de notebook — Renderizador de notebooks Jupyter somente leitura que compõe markdown, código e saídas de célula enriquecidas.
Trilho de páginas — Trilho de miniaturas vertical virtualizado para folhear um documento paginado.
Visualizador de PDF — Busca e renderiza páginas de PDF com zoom, paginação e uma camada de texto selecionável
Visualizador de PPTX — Visualizador no lado do cliente, de melhor esforço, para apresentações do PowerPoint em PPTX.
Visualizador de planilha — Busca e renderiza livros .xlsx e .xls legados, com separadores de planilhas e linhas virtualizadas.
Visualizador de SVG — Busca e renderiza com segurança um documento SVG integrada e higienizado a partir de uma URL.
Visualizador de XML — Vista em árvore retrátil e copiável para inspecionar documentos XML.

Mídia e arquivos

Chip de anexo — Chip compacto para um arquivo anexado a uma mensagem, com estado de carregamento, progresso e opção de nova tentativa.
Avatar — Pequeno marcador de identidade que exibe um ícone, imagem ou iniciais como alternativa para representar uma pessoa ou entidade
Imagem animada — Reproduz um GIF/APNG/WebP animado com um controle de reprodução/pausa que respeita a preferência por movimento reduzido.
Animação — Anima de forma declarativa um elemento filho inserido via slot, usando predefinições nomeadas ou keyframes personalizados.
Acionador de anexo — Controlo compacto para anexar arquivos que abre um seletor de arquivos ou menu de funcionalidades num compositor de chat.
Reprodutor de áudio/vídeo — Reprodutor de áudio/vídeo com transcrição sincronizada, forma de onda e controle de velocidade de reprodução.
Grupo de avatares — Empilha avatares sobrepostos numa fila compacta que condensa os excedentes num emblema +N
Zona de arrastar e soltar — Invólucro de arrastar e soltar que transforma qualquer região num destino para soltar arquivos, sem seletor de arquivos próprio.
Ícone de arquivo — Selo de tipo de arquivo localizado, determinado a partir de um tipo MIME ou nome de arquivo.
Entrada de arquivo — Área de arrastar e soltar, ou clique para procurar, que emite os arquivos selecionados.
Bandeira — Bandeira de país ou idioma renderizada numa moldura personalizável por tema, opcionalmente circular.
Comparador de imagens — Desliza um divisor acessível por teclado para comparar superfícies de antes e depois lado a lado.
Visualizador de imagem — Visualizador de imagem raster completo com pan/zoom, destaques de região rotulados e anotação opcional.
Lightbox — Visualizador de imagens em tela inteiro, num modal, com navegação anterior/próximo e zoom
Mapa — Encapsula o MapLibre GL num componente de mapa com legenda declarativa, mapa coroplético e marcadores
Cartão multimédia — Prévia integrada de uma imagem, vídeo ou anexo de arquivo dentro de uma mensagem de chat.
Pan e zoom — Área rolável para inspecionar com zoom um conteúdo em slot ou uma imagem, com um nível de zoom limitado.
Reprodução — Avança um índice ao longo de um intervalo num temporizador fixo, com controle de reprodução/pausa.
Código QR — Codifica qualquer valor como um símbolo de código QR escaneável, renderizado em canvas.
Vídeo — Reprodutor de vídeo integrada com controles personalizados, legendas selecionáveis e prévia em miniaturas.
Lista de reprodução de vídeo — Reproduz uma sequência de vídeos numa lista de reprodução navegável, avançando automaticamente para o seguinte.
Quadro com zoom — Prévia em iframe isolada (sandbox) com controles de zoom discretos; a antiga superfície de inspeção de conteúdo em slot ou de imagem agora é o lr-pan-zoom.

Utilitários

Intersection Observer — Emite entradas nativas de interseção conforme os alvos inseridos via slot entram ou saem da viewport.
Observador de mutações — Observa o DOM inserido via slot em busca de alterações de elementos e atributos, repassando os registros nativos de mutação
Observador de redimensionamento — Observa elementos inseridos via slot e emite entradas tipadas de redimensionamento, sem qualquer elemento visual de interface
Botão de cópia — Botão só com ícone que copia um valor de texto para a área de transferência, com confirmação visual (marca de verificação).
Visualização de diff — Renderiza um diff real, linha a linha, entre duas strings, como saída unified-diff colorida.
Divisor — Separador semântico com suporte a temas, para dividir conteúdo na horizontal ou na vertical.
Botão de exportação — Transfere dados de tabela como CSV ou JSON, num único formato ou através de um menu de formatos.
Formatar bytes — Formatação de tamanho em bytes sensível à localidade, com passo de unidade e precisão ajustáveis.
Formatar data — Formatação de data e hora sensível à localidade, via Intl.DateTimeFormat.
Formatar número — Formatação de números, moeda e formato compacto sensível à localidade, via Intl.NumberFormat.
Ícone — Renderiza glifos SVG integrada nítidos a partir de um conjunto de caminhos nomeados incorporado, sem dependências.
Visualizador de JSON — Vista em árvore retrátil e copiável para inspecionar qualquer payload JSON
Data conhecida — Campo de três partes (dia/mês/ano) para uma data que o usuário já conhece
Região dinâmica — Região dinâmica ARIA oculta visualmente que limita a frequência dos anúncios do leitor de tela
Popover de menções — Autocompletar ancorado à posição do cursor de texto, para menções com @ e comandos de barra, num campo de texto.
Estado de polling — Contagem decrescente até à próxima atualização agendada, com controle integrado de pausa e retomada.
Conteúdo aleatório — Alterna entre os filhos inseridos via slot, aleatoriamente ou em sequência, para textos A/B e depoimentos
Tempo relativo — Mostra um carimbo de tempo relativo, sensível à localidade, que se atualiza automaticamente.
Visita guiada — Percurso guiado passo a passo com destaque visual, para a integração de novos usuários logo na primeira uso do produto.
Oculto visualmente — Oculta conteúdo no tela mantendo-o acessível aos leitores de tela, tornando-o visível novamente ao focar.