Todos los componentes

Explora los 308 componentes de Lyra UI. Filtra por familia, busca por nombre, prueba las vistas previas disponibles o abre un ejemplo documentado.

Conversación y chat

Espacio de trabajo de agente — Estructura controlada y responsiva para una conversación con IA que integra la transcripción, el compositor de mensajes y un panel de detalles opcional para la ejecución, las herramientas, la recuperación, el fundamento y el contexto.
Visualizador de audio — Visualización de actividad de voz dibujada en canvas, que refleja el estado inactivo, escuchando, pensando o hablando de un agente.
Selector de variantes — Navegador controlado «‹ n / m ›» entre variantes regeneradas o editadas de un mismo mensaje de chat.
Compositor de chat — Campo de entrada de mensajes de chat que se autoajusta de tamaño, con controles integrados de envío y detención
Mensaje de chat — Contenedor de burbuja de chat basado en roles, con avatar, insignias y un pie que refleja el estado
Área de desplazamiento del chat — Contenedor de desplazamiento de la transcripción que gestiona el anclaje al final, una píldora para ir al último mensaje y un separador de no leídos.
Punto de control — Punto de restauración de la conversación en línea, con confirmación antes de restaurar, para devolver el chat a un estado anterior.
Bloque de código — Visualización de código en bloques delimitados, con resaltado de sintaxis diferido opcional y un botón de copiar.
Núcleo de bloque de código — Visualización de código con compilación ligera, que resalta la sintaxis solo mediante un mapa de gramática proporcionado en tiempo de compilación.
Elemento de conversación — Fila seleccionable del historial de chat que muestra el título, la vista previa y la marca de tiempo de una sesión.
Estado de generación — Muestra el tiempo transcurrido, los tokens y el rendimiento mientras se transmite una respuesta de la IA.
Separador de traspaso — Separador etiquetado que marca el traspaso de control entre agentes en una transcripción.
Markdown — Renderizado saneado de Markdown a HTML, con tablas GFM, código y enlaces
Núcleo de Markdown — Renderizado de Markdown con compilación ligera, que resalta el código solo mediante un mapa de gramática proporcionado en tiempo de compilación.
Acciones de mensaje — Barra de acciones por mensaje para un mensaje de chat, con copiar, regenerar, editar y comentarios integrados.
Comentarios de mensaje — Valoración con pulgar arriba/abajo para un mensaje del asistente, con un panel de detalle opcional de motivo y comentario.
Selector de modelo — Selector de proveedor y modelo con catálogo fijo o entrada personalizada de texto libre.
Panel de configuración del modelo — Selector de modelo combinado con control deslizante de temperatura para configurar un agente.
Presionar para hablar — Botón de captura de micrófono que gestiona la solicitud de permisos, la grabación y el cierre completos, apto para mantener presionado o para alternar.
Estado de transmisión — Muestra la fase de una única conexión de streaming, con detección de interrupciones basada en heartbeat.
Texto en streaming — Renderiza de forma incremental el texto del asistente en streaming, fusionando las actualizaciones rápidas de tokens.
Núcleo de texto en streaming — Renderizador de texto en streaming con compilación ligera, cuyo modo Markdown resalta los bloques de código solo mediante un mapa de gramática proporcionado en tiempo de compilación.
Chips de sugerencia — Fila desplazable de chips de instrucciones iniciales o de seguimiento que entrega el texto elegido al host.
Lista de hilos — Barra lateral de conversaciones agrupada y con búsqueda, con acciones de fijar, archivar, eliminar y renombrar por fila.
Feed de transcripción — Feed de subtítulos en vivo para una sesión de voz en curso, con actualización de resultados provisionales a definitivos y anclaje al final.
Indicador de escritura — Señal visual de presencia que indica que el asistente está redactando una respuesta
Insignia de uso — Franja compacta de tokens, costo y latencia para un mensaje o una ejecución, con un desglose en una descripción emergente al pasar el cursor.
Selector de voz — Selector de voces TTS sobre un catálogo proporcionado, con vista previa de audio en línea y gestión de valores obsoletos.
Renderizador de widgets — Renderiza un árbol de widgets JSON declarativo transmitido por un agente, mediante un registro de tipo a componente con lista de permitidos.
Partes del mensaje — Renderiza partes ordenadas e intercalables de mensajes de IA con primitivas de texto, razonamiento, herramientas, citas, adjuntos y contenido multimedia.
Entrada de prompts — Combina la redacción de prompts con adjuntos, selección de modelo, voz y fuentes, menciones, comandos y turnos en cola.
Cola de prompts — Gestiona una cola controlada de prompts de seguimiento que se pueden editar, reordenar, eliminar o enviar al instante.
Sesión en tiempo real — Proporciona una interfaz de sesión de voz independiente del proveedor para conexión, actividad, transcripción, captura, silencio e interrupción.
Barra de selección — Sitúa acciones para preguntar, citar, referenciar y copiar junto al texto seleccionado conservando su ancla documental.

Herramientas de agentes y observabilidad

Feed de actividad — Registro de actividad en flujo continuo (solo agregar) de las acciones detalladas de un agente, que se resume en un recuento de pasos completados al finalizar la ejecución.
Panel de evaluación de agentes — Vista general de evaluación controlada que combina tarjetas de métricas con un gráfico de tendencia y el historial de estado de cada ejecución.
Pregunta del agente — Recoge una respuesta estructurada a una pregunta de un agente o servidor MCP, con acciones para aceptar, rechazar y cancelar.
Ejecuciones en segundo plano — Muestra trabajos de agentes en cola, en curso y terminados gestionados por la aplicación, con solicitudes para abrirlos o cancelarlos.
Indicador de presupuesto — Muestra el uso proporcionado frente a un límite, incluidos los estados de dato no disponible y límite superado.
Revisión de cambios — Revisa los cambios de archivos proporcionados por la aplicación y solicita conservar o descartar cada fragmento.
Gestor de conectores — Muestra el estado de conexión y solicita conectar, desconectar o reintentar acciones para los conectores gestionados por la aplicación.
Concesión de permisos — Presenta una solicitud de permiso limitada y comunica a la aplicación si se ha permitido o denegado.
Reglas de permisos — Muestra las reglas de permisos definidas por la aplicación y solicita cambiar sus decisiones de permitir, preguntar o denegar.
Ejecución de agente — Estructura de nivel superior para una ejecución de agente, que muestra el estado, el tiempo transcurrido, el paso actual y el costo, con acciones de cancelar y reintentar.
Traza de agente — Vista jerárquica de traza de agente o LLM con filtros por tipo de span y saltos rápidos a traspasos, sobre una única matriz de spans compartida.
Cola de aprobación — Cola de llamadas a herramienta pendientes, accesible por teclado, en la que cada una se revisa y se aprueba o deniega mediante un único diálogo compartido.
Panel de artefacto — Estructura alrededor de un artefacto generado por un agente, con alternancia entre vista previa y código, navegación de versiones y acciones de copiar/descargar.
Marco de navegador — Vista presentacional tipo «computadora del agente», que muestra un flujo de capturas de pantalla, una URL de solo lectura y controles para tomar el control.
Tarjeta de commit — Resumen compacto de un commit con estadísticas de cambios y modificaciones por archivo, enlazado a una vista de diferencias.
Panel de comparación — Comparación lado a lado de dos respuestas (A/B) con voto del ganador, para evaluación de modelos al estilo arena.
Barra de confirmación — Bloque de aprobar/rechazar en línea y no modal para una acción propuesta por el agente, integrado en la transcripción en lugar de un diálogo.
Inspector de contexto — Vista de inspección de los segmentos de contexto de una llamada al modelo, con estimaciones de tokens, citas, marcadores de ocultación y controles de copiar/exportar.
Conjunto de datos de evaluación — Lista filtrable y etiquetable de ejemplos de evaluación, con acciones de agregar, eliminar, importar y exportar.
Resultado de evaluación — Superficie de puntuación por rúbrica y revisión humana para comparar las ejecuciones de un mismo ejemplo de evaluación.
Ejecución de evaluación — Vista en vivo del progreso de un lote de evaluación, con el progreso general y un desplegable por ejemplo que incluye trazas de fundamento y de herramientas.
Resumen de políticas — Lista de solo lectura de decisiones de salvaguarda, permisos, privacidad y política de herramientas, con explicaciones accesibles de permitir, denegar o revisión pendiente.
Cascada de spans — Línea de tiempo horizontal de los spans de una traza de agente, como barras con tono según su estado sobre un eje temporal compartido.
Traza de pila — Analiza trazas de pila de JS/TS, del navegador y de Python, convirtiéndolas en marcos activables con plegado de marcos internos.
Lista de tareas — Seguimiento en vivo y colapsable del plan de un agente, con estado de ciclo de vida por paso y subpasos anidados.
Terminal — Consola ANSI de solo lectura que renderiza en streaming la salida de un agente o herramienta, con búsqueda y anclaje al final.
Resultados de pruebas — Resumen de una batería de pruebas con aprobados y fallidos, recuentos por estado, filtros de alternancia y detalle de fallos que se expande automáticamente.
Panel de razonamiento — Panel colapsable para la transcripción de razonamiento en vivo o revisada de un agente de IA.
Diálogo de aprobación de herramienta — Punto de control con intervención humana para aprobar, denegar o editar una llamada a herramienta propuesta antes de que se ejecute.
Bloque de llamada a herramienta — Bloque plegable en línea para una llamada a herramienta de un agente que se despliega para mostrar sus argumentos, su error y su resultado.
Chip de llamada a herramienta — Píldora compacta en línea que resume el nombre, el estado y la duración de una llamada a herramienta de un agente.
Formulario de parámetros de herramienta — Genera un formulario editable a partir del JSON Schema plano de una herramienta para ajustar los argumentos de la llamada.
Diálogo de resultado de herramienta — Superposición modal que muestra el estado, la duración y el detalle completo del resultado de una llamada a herramienta.
Vista de resultado de herramienta — Renderiza el resultado de una llamada a herramienta mediante un renderizador registrado, recurriendo a JSON como alternativa.
Diálogo de selección de herramientas — Diálogo con búsqueda y agrupación por categorías para elegir qué herramientas del agente están habilitadas.
Línea de tiempo de herramientas — Lista cronológica de las llamadas a herramienta de una ejecución de agente, con recuentos de reintentos, control de aprobación humana y enmascaramiento de campos sensibles.
Árbol de traza — Jerarquía colapsable de spans para una traza de agente o LLM, con una barra de duración y columnas opcionales de tokens y costo.
Tarjeta de resultado — Contenedor de tarjeta con borde que ofrece a los renderizadores personalizados de resultados de herramientas un aspecto uniforme de tarjeta pequeña
Campo de resultado — Fila compacta de etiqueta/valor para tarjetas de resultados de herramientas y franjas densas de metadatos
Aplicación MCP — Aloja un recurso ejecutable de MCP App en un entorno aislado y expone las solicitudes del host como eventos tipados.
Estudio de prompts — Ofrece un espacio independiente del proveedor para editar, previsualizar, versionar, guardar y ejecutar prompts estructurados.
Visor de esquemas — Inspecciona árboles JSON Schema seleccionables con restricciones, campos obligatorios, ramas de composición y problemas de validación.
Panel de subagentes — Muestra una jerarquía controlada de ejecuciones de subagentes con estado, tarea, modelo, progreso y acciones de ciclo de vida.

Recuperación y grafos de conocimiento

Tarjeta de comunidad — Tarjeta resumen de una comunidad de un grafo de conocimiento, con chips de miembros y una acción para profundizar.
Explorador de incrustaciones — Vista de dispersión 2D accesible de coordenadas de incrustación proyectadas por el host, con coloreado opcional por clúster y selección de puntos.
Tarjeta de entidad — Ficha de una entidad del grafo de conocimiento, con insignia de tipo, propiedades, grado y una acción para centrar en el grafo.
Chip de entidad — Mención @entidad en línea para el texto del agente, con previsualización emergente al pasar el mouse o al enfocar.
Dosier de entidad — Superficie de detalle de una entidad con encabezado, estadística de confianza y pestañas para relaciones, fragmentos de respaldo y procedencia.
Grafo — Representa relaciones mediante un diagrama de nodos y enlaces basado en fuerzas, con desplazamiento y zoom.
Leyenda de grafo — Leyenda de tipos de nodo para un grafo asociado, que también actúa como filtro de visibilidad.
Cola de ingesta — Lista controlada de documentos que avanzan por una canalización de ingesta, con etapa, progreso, recuentos y solicitudes de reintento o cancelación.
Base de conocimiento — Lista de fuentes de una base de conocimiento de recuperación, con estado de sincronización, salud de indexación, permisos y solicitudes de gestión por fila.
Administración de base de conocimiento — Estructura de operaciones con pestañas que combina las fuentes de una base de conocimiento con la cola de ingesta y delega las acciones de gestión en el host.
Explorador de grafo de conocimiento — Estructura de exploración de un grafo de conocimiento que combina renderizado del grafo, búsqueda de entidades, filtros por tipo, expansión de vecindario y búsqueda de rutas.
Mapa mental — Árbol radial de temas desplegable para explorar espacialmente una jerarquía y profundizar en un tema.
Lista de vecinos — Filas de relación de una entidad, con navegación y expansión en el grafo por fila.
Paleta de nodos — Biblioteca de nodos buscable y categorizada para arrastrar o colocar nodos en un lienzo de flujo.
Franja de ruta — Cadena compacta y desplazable de nodo-relación-nodo que representa una ruta de razonamiento GraphRAG.
Inspector de fragmentos — Lista clasificada de fragmentos RAG recuperados, con barras de relevancia y un enlace directo a un visor de documentos.
Insignia de cita — Marcador de cita [n] en línea con vista previa al pasar el cursor y color según confianza/verificación.
Resumen de fundamento — Cuadro de puntuación de fundamento a nivel de afirmación, que muestra recuentos de respaldo, cobertura de citas, confianza, advertencias y citas de evidencia.
Panel de memoria — Superficie de memoria de trabajo de un agente para contexto a corto plazo y memorias a largo plazo, con confianza y acciones que requieren confirmación.
Panel de procedencia — Presenta el fundamento de una respuesta en un desglose colapsable de entidades, relaciones, comunidades y fragmentos.
Respuesta RAG — Superficie de respuesta fundamentada que combina Markdown saneado, insignias de cita, una valoración del fundamento y vistas previas expandibles de las fuentes.
Progreso de la investigación — Muestra los pasos de investigación, el número de fuentes y el progreso total proporcionados por la aplicación.
Resultados de recuperación — Lista clasificada de fragmentos recuperados, con deduplicación, agrupación por fuente, selección y modos de presentación compacto o expandido.
Búsqueda de recuperación — Barra de consulta para una superficie de recuperación o RAG, con chips de filtro y ámbito, un selector de modo vectorial, por palabras clave o híbrido, e información de estado.
Traza de recuperación — Línea de tiempo de las etapas de una canalización de recuperación, con evidencia desplegable para cada etapa de reformulación, incrustación, recuperación, reordenamiento y filtrado.
Tarjeta de fuente — Entrada de cita que muestra el título, la página, el extracto y el texto completo expandible de una fuente.
Lista de fuentes — Panel de fuentes colapsable que agrupa las tarjetas de citas de un mensaje de chat bajo un único encabezado.
Selector de fuentes — Árbol de casillas de verificación para acotar qué fuentes fundamentan la próxima respuesta, con carpetas de tres estados, selección total y búsqueda.
Evidencia de afirmaciones — Audita afirmaciones generadas frente a citas con estado de respaldo, nivel de confianza y evidencias.
Panel de evaluación RAG — Presenta métricas de calidad RAG, tendencias, segmentos de evaluación e historial de ejecuciones calculados por el host.
Comparación de recuperación — Compara en paralelo conjuntos clasificados de recuperación y reranking con solapamiento y desglose de puntuaciones.

Formularios y entradas

Botón — Botón de acción tokenizado con variantes de tono, tamaños y un estado de carga.
Casilla de verificación — Control de formulario booleano con estados marcado, no marcado e indeterminado.
Grupo de casillas de verificación — Agrupa casillas de verificación relacionadas en un único campo de selección múltiple asociado a un formulario y validado.
Editor de código — Superficie de edición de código multilínea sin dependencias, con una columna de números de línea opcional.
Selector de color — Campo de color nativo asociado a un formulario, con etiqueta, texto de ayuda y elementos de interfaz para errores de validación.
Cuadro combinado — Selección simple o múltiple filtrable que combina un campo de texto con una lista emergente (listbox).
Campo de fecha — Campo de fecha con un calendario emergente adjunto y un valor en formato ISO-8601.
Selector de fecha — Calendario en cuadrícula mensual integrado para elegir una fecha única o un rango de fechas.
Selector de emojis — Selector de emojis buscable, navegable por teclado y asociado a formularios.
Botón de icono — Activa una acción mediante un botón compacto y accesible que muestra solo un icono.
Campo de texto — Campo de texto de una sola línea con etiqueta, texto de ayuda y elementos de validación en línea opcionales.
Selector de país — Selecciona códigos de países y territorios con nombres traducidos, banderas y búsqueda opcional.
Selector de moneda — Selecciona códigos de monedas con nombres traducidos, símbolos y búsqueda opcional.
Selector de zona horaria — Selecciona identificadores de zonas horarias de una lista ordenada, con búsqueda opcional.
Selector de unidad — Selecciona unidades de medida con nombres traducidos, símbolos y búsqueda opcional.
Selector de configuración regional — Menú desplegable de lista cerrada para cambiar la configuración regional activa, a partir del registro de configuraciones regionales propio de la biblioteca.
Campo numérico — Campo numérico con restricciones de mínimo, máximo y paso, además de validación nativa de restricciones.
Opción — Opción seleccionable que proporciona valor, etiqueta, agrupación y datos de estado a un cuadro combinado.
Campo de teléfono — Campo telefónico sensible al país cuyo valor de formulario es un E.164 canónico
Botón de radio — Control de opción única asociado a un formulario para elegir una opción dentro de un conjunto
Grupo de botones de radio — Grupo etiquetado y navegable por teclado de botones de radio de opción única.
Formulario de rúbrica — Rúbrica configurable de puntuación, categoría y comentarios con un flujo de enviar y siguiente para recorrer una cola de evaluación de resultados de IA.
Lista desplegable — Menú desplegable de lista cerrada para elegir una opción dentro de un conjunto fijo de alternativas.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Control deslizante — Control de rango numérico para ajustes como la temperatura de un LLM o el nivel de volumen.
Selector de muestras — Selector de opción única sobre un conjunto pequeño y fijo de muestras de color, con un contrato de radiogroup integrado.
Interruptor — Control de formulario de tipo interruptor booleano, con semántica de encendido/apagado para formularios nativos.
Área de texto — Campo de texto plano multilínea con crecimiento automático, validación y elementos de interfaz de control de formulario.
Campo de hora — Campo de hora segmentado y adaptado al idioma, con un selector de columnas adjunto; la experiencia nativa del navegador (input[type=time]) es lr-native-time-input.
Rango de tiempo — Selector de tipo brush con dos controladores para elegir un inicio y un fin dentro de un dominio numérico.
Botón de alternancia — Botón autónomo de dos estados que activa o desactiva una opción, con semántica aria-pressed.
Grupo de botones de alternancia — Agrupa botones de alternancia tras una sola parada de tabulación, con selección múltiple o única que se puede anular.
Campo de hora nativo — Campo de hora nativo, integrado con la etiqueta, el texto de ayuda y la validación de Lyra, pensado para cuando se prefiere el selector nativo del navegador en lugar del campo segmentado lr-time-input.
Código OTP — Campo segmentado para ingresar un código de verificación de un solo uso, con autocompletado por SMS integrado.
Botón de radio segmentado — Control de opción única con apariencia de botón en lugar de círculo, normalmente agrupado con lr-radio-group para formar un control segmentado.
Campo de tokens — Campo asociado a un formulario que recopila una lista de tokens eliminables, como etiquetas o destinatarios.

Presentación de datos

Constructor de consultas de grafo — Editor asociado a un formulario para una consulta tipada de relación o ruta en un grafo, con anclas de entidad, filtros por tipo, límites de saltos y consultas guardadas.
Calendario — Calendario mensual responsivo con marcadores de eventos y una vista de agenda accesible por teclado.
Medidor de contexto — Medidor de ocupación segmentado, en barra o en anillo, para un presupuesto de tokens o una ventana de contexto.
Biblioteca de documentos — Inventario de documentos buscable y filtrable, con versiones, etiquetas, propietarios, vigencia, ordenación y selección masiva.
Lista de variables de entorno — Lista clave/valor enmascarada para variables de entorno y secretos, con opción de revelar y copiar por fila.
Árbol de archivos — Preajuste de explorador de archivos sobre el componente árbol, con insignias de estado Git y carga diferida de directorios.
Lienzo de flujo — Lienzo desplazable y con zoom para construir y ejecutar flujos de trabajo visuales en DAG.
Controles de flujo — Grupo de botones de zoom, ajuste y bloqueo para un lienzo de flujo asociado.
Minimapa de flujo — Mapa de vista general en la esquina con un rectángulo de vista desplazable para un lienzo de flujo asociado.
Nodo de flujo — Tarjeta de nodo de flujo de trabajo con encabezado, tono de estado y conectores para un lienzo de flujo.
Superposición de ejecución de flujo — Aplica decoraciones de estado de ejecución sobre un lienzo de flujo y muestra una franja resumen compacta de los pasos.
Embudo — Muestra la caída de conversión etapa por etapa como barras normalizadas respecto a la primera etapa.
Medidor — Muestra un valor único como medidor radial, de anillo o lineal.
Mapa de calor — Renderiza una matriz o una cuadrícula de calendario de valores como un mapa de calor en canvas que se adapta al tamaño.
Paginación — Navegación de páginas controlada con salto de página editable y resumen del rango de elementos.
Constructor de consultas — Constructor componible de consultas estructuradas para datos tabulares o de panel de control, que combina filas de condición de campo, operador y valor con un combinador Y/O.
Franja de secuencia — Franja compacta por elemento que visualiza una secuencia de estados categóricos como celdas coloreadas, con un marcador opcional.
Sparkline — Traza una tendencia SVG compacta en línea como gráfico de líneas, área rellena o barras para una serie de datos.
Estadística — Presenta un único KPI con unidad, insignia de tendencia, filas de desglose y un sparkline opcional.
Tabla — Tabla de datos presentacional con encabezados ordenables, selección, filtrado y paginación.
Línea de tiempo — Secuencia conectada de filas de eventos pasados para registros de auditoría, historiales de agentes y registros de cambios.
Elemento de línea de tiempo — Una fila de evento para una línea de tiempo, con un marcador codificado por color, título, marca de tiempo y descripción.
Árbol — Jerarquía expandible/colapsable para navegar por grafos, documentos o árboles de archivos.
Nodo de árbol — Renderizador recursivo de filas treeitem para un nodo y sus hijos dentro de un árbol.
Nube de palabras — Nube de etiquetas SVG sin dependencias que escala cada palabra según su peso.
Cuadrícula de datos — Cuadrícula de datos virtualizada para grandes conjuntos de datos, del lado cliente o servidor, con ordenación, filtrado, agrupación, paginación y selección.

Gráficos

Gráfico de barras — Compara valores entre categorías con barras verticales u horizontales.
Diagrama de caja — Resume distribuciones a partir de resúmenes estadísticos de cinco números precalculados.
Gráfico de burbujas — Representa tres dimensiones por punto usando la posición en los ejes x e y, y el radio de la burbuja.
Gráfico — Envoltorio base de Chart.js que impulsa visualizaciones de líneas, barras, circulares y otros tipos de datos.
Gráfico de anillo — Muestra proporciones de parte a todo como segmentos de un anillo.
Histograma — Agrupa valores numéricos en intervalos de igual ancho para revelar su distribución.
Gráfico de líneas — Sigue tendencias a lo largo de un eje continuo con una o más series conectadas.
Gráfico ligero — Gráfico de barras y líneas sin dependencias, renderizado como SVG plano, sin necesidad de Chart.js
Gráfico circular — Gráfico circular proporcional que muestra la proporción de una serie sobre el total
Gráfico de área polar — Gráfico de área polar que representa cada categoría como una cuña escalada según su valor
Gráfico de radar — Gráfico de radar que compara varias métricas de una serie en una cuadrícula radial
Gráfico de dispersión — Diagrama de dispersión de pares de puntos x/y sin procesar en ejes lineales

Diseño y navegación

Acordeón — Coordina un grupo de paneles desplegables, permitiendo opcionalmente que varios estén abiertos a la vez.
Elemento de acordeón — Panel desplegable y colapsable diseñado para insertarse en un grupo de acordeón.
Riel de navegación — Riel de navegación responsivo que pasa de completo a solo iconos y luego a una superposición en móvil.
Grupo de riel de navegación — Sección con título, opcionalmente plegable, que agrupa elementos de navegación dentro de un riel de navegación.
Elemento de riel de navegación — Elemento de navegación con icono y etiqueta para un riel de navegación, con un estado colapsado de solo icono.
Ruta de navegación — Ruta de navegación responsiva que muestra la ubicación del usuario dentro de la jerarquía de una página
Elemento de ruta de navegación — Un enlace o etiqueta de la página actual dentro de una ruta de navegación
Grupo de botones — Agrupa botones de acción relacionados en un solo conjunto responsivo y etiquetado
Tarjeta — Superficie de contenido con borde, con ranuras para encabezado, contenido multimedia, pie y acciones.
Carrusel — Carrusel accesible de una diapositiva a la vez, con navegación por teclado, indicadores, bucle y reproducción automática.
Elemento de carrusel — Contenedor semántico opcional para una diapositiva que aplica un estilo de elemento coherente a un hijo del carrusel.
Paleta de comandos — Menú de comandos de la aplicación con búsqueda, navegación por teclado y atajos.
Grupo de controles — Agrupa controles de formulario variados y botones de acción en una sola fila responsiva y centrada
Cuadrícula del panel de control — Cuadrícula de widgets controlada, responsiva y accesible por teclado, que posiciona las entradas del diseño y emite solicitudes de movimiento, redimensionamiento y colisión.
Detalles — Panel desplegable accesible que se expande para mostrar contenido debajo de un resumen.
Panel acoplable — Panel redimensionable y colapsable, acoplado a un borde de tu diseño existente.
Panel de profundización — Estructura de navegación controlada desde un dato de un gráfico o tabla hacia evidencia, documentos, entidades o ejecuciones de agente relacionados, con una ruta de navegación.
Elemento desplegable — Alias compatible con Web Awesome para una fila de acción individual dentro de un menú desplegable.
Barra de filtros — Fila de filtros de panel de control que combina entradas de Lyra y chips eliminables, con estados de restablecimiento y carga.
Menú — Menú semántico en línea con elementos de acción, navegación por teclado y submenús anidados.
Elemento de menú — Fila de acción individual para un menú, con icono, casilla de verificación o estilo destructivo opcionales.
Elemento reordenable — Fila única dentro de una lista reordenable, que combina botones de mover arriba/abajo con contenido insertado mediante slot.
Lista reordenable — Lista genérica de filas reordenables, movidas mediante botones por fila o el atajo Ctrl/Cmd+Flecha.
Etiqueta de menú — Agrega un encabezado no interactivo para agrupar elementos relacionados dentro de un menú.
Barra de menús — Barra de menús de aplicación horizontal con menús desplegables titulados y navegación completa por teclado.
Elemento de barra de menús — Título de primer nivel de una barra de menús que abre su menú anidado o actúa como una acción simple.
Menú de navegación — Navegación de cabecera de sitio con enlaces y paneles desplegables que se contrae tras un botón de menú cuando falta espacio.
Elemento de menú de navegación — Una entrada de un menú de navegación: un enlace a una página o un botón de divulgación que abre un panel desplegable.
Página — Estructura semántica de aplicación cuya navegación pasa de una columna fija a un cajón modal en el celular según el espacio que realmente se le asigna, y no según la ventana.
Panel responsivo — Acopla el contenido en línea en escritorio o lo presenta como una hoja superpuesta en móvil
Desplazador — Superficie de desbordamiento responsiva con controles opcionales de anterior/siguiente para filas de tarjetas y pestañas.
Segmentado — Fila de botones de selección única para elegir de un vistazo una entre varias opciones etiquetadas.
División — Divide un panel de control en paneles redimensionables mediante arrastre, con colapso responsivo opcional.
Panel dividido — Divide el contenido en dos paneles redimensionables mediante arrastre con un único divisor, una alternativa más simple al lr-multi-split multipanel.
Indicador de pasos — Guía a los usuarios a través de un asistente de varios pasos ordenados, con estado por paso y salto directo mediante clic.
Pestañas — Franja de pestañas que muestra un panel de light DOM a la vez, con navegación completa por teclado.
Pestaña — Descriptor de pestaña compatible con Web Awesome/Shoelace, emparejado con su panel dentro de una franja de pestañas mediante los atributos panel y name.
Panel de pestaña — Descriptor de panel compatible con Web Awesome/Shoelace, emparejado con su pestaña dentro de una franja de pestañas mediante los atributos name y panel.
Lista virtual — Host de lista virtualizado que renderiza solo las filas visibles en pantalla, apto para colecciones desplazables enormes
Widget — Estructura de panel con título, con alternancia opcional de colapso y expansión a pantalla completa

Superposiciones y retroalimentación

Notificación — Región apilable que ancla las notificaciones tipo toast a una esquina de la pantalla.
Elemento de notificación — Notificación individual descartable con un acento de color según su gravedad, icono opcional y temporizador de descarte automático.
Chip — Píldora pequeña para una etiqueta, filtro o ámbito, opcionalmente eliminable o activable.
Grupo de chips — Envuelve un conjunto de chips con un interruptor opcional de desbordamiento +N cuando superan un límite.
Alerta — Mensaje de alerta cerrado por defecto, con cierre automático programable y traspaso opcional a la pila de notificaciones toast compartida.
Insignia — Etiqueta de estado compacta para indicar estado, recuentos o categorías en línea
Aviso — Superficie de mensaje en línea para contenido de estado, advertencia y error, que se puede cerrar.
Menú contextual — Convierte cualquier zona en un objetivo de clic derecho, presión prolongada o Mayús+F10 que abre un menú de acciones.
Diálogo — Superposición modal con captura de foco para confirmaciones, formularios y otras tareas interruptivas.
Panel deslizante — Desliza un panel modal desde cualquier borde del viewport para filtros o controles contextuales.
Menú desplegable — Ventana emergente con rol de menú que ancla una lista de acciones a un disparador proporcionado por el consumidor
Estado vacío — Comunica un estado vacío o sin datos mediante un icono, un mensaje y acciones opcionales.
Kbd — Chip adaptado a la plataforma que representa un atajo de teclado en forma de teclas
Ventana emergente — Superficie flotante activada por clic, que se cierra al interactuar fuera de ella, para contenido y controles contextuales
Popup — Primitiva de posicionamiento de bajo nivel que mantiene un panel flotante alineado con su ancla, el mismo motor que usan la ventana emergente y la descripción emergente.
Barra de progreso — Indicador de progreso horizontal, determinado o indeterminado, con un valor opcional.
Anillo de progreso — Indicador de progreso circular, determinado o indeterminado, con una etiqueta central.
Valoración — Valoración por estrellas accesible por teclado, con rellenos parciales de precisión fraccionaria
Esqueleto — Marcador de posición animado que sustituye al contenido mientras se carga.
Indicador de carga — Indica una tarea en segundo plano en curso mediante un indicador de actividad animado e indeterminado.
Etiqueta — Alias semántico del tratamiento de insignia para etiquetar palabras clave o categorías
Descripción emergente — Descripción emergente activada al pasar el cursor o al enfocar, que describe un disparador proporcionado por el consumidor

Visores de documentos y archivos

Visor de archivos comprimidos — Muestra los nombres de archivo y los tamaños sin comprimir dentro de un archivo ZIP sin extraer su contenido.
Visor de calendario — Analiza y renderiza los eventos de un archivo de calendario .ics como resúmenes, horarios y ubicaciones.
Visor de contactos — Obtiene un documento vCard y renderiza una tarjeta accesible por cada contacto.
Visor de CSV — Obtiene un archivo CSV y renderiza sus filas en una hoja virtualizada y desplazable.
Visor de conjuntos de datos — Obtiene texto delimitado y lo renderiza como una tabla de datos tipada y accesible.
Comparación de documentos — Comparación lado a lado o en línea de dos versiones de un documento, que combina una vista de diferencias textuales con vistas previas renderizadas del documento.
Vista previa de documento — Muestra una vista previa en línea de un documento o adjunto según su tipo MIME, con descarga como opción alternativa.
Visor de documentos — Muestra un documento en un diálogo con un registro de renderizadores por tipo MIME conectable.
Visor de DOCX — Renderiza un archivo DOCX como HTML semántico depurado mediante el conversor mammoth.
Visor de libros electrónicos — Renderiza un EPUB con navegación por capítulos usando la dependencia opcional epub.js.
Visor de correo electrónico — Analiza y renderiza un mensaje .eml con cabeceras, cuerpo depurado y adjuntos.
Visor de GeoJSON — Obtiene, valida y muestra en un mapa las entidades de un archivo GeoJSON.
Capa de resaltado — Superposición que dibuja rectángulos de resaltado activables sobre contenido de documento posicionado.
Visor de HTML — Obtiene una URL y renderiza su HTML de forma segura tras depurarlo.
Inclusión — Obtiene un fragmento HTML y lo transcluye como contenido de página en el DOM ligero, depurado.
Visor de notebook — Renderizador de notebooks Jupyter de solo lectura que compone markdown, código y salidas de celda enriquecidas.
Riel de páginas — Riel de miniaturas vertical virtualizado para pasar páginas de un documento paginado.
Visor de PDF — Obtiene y renderiza páginas PDF con zoom, paginación y una capa de texto seleccionable
Visor de PPTX — Visor del lado del cliente, de mejor esfuerzo, para presentaciones PPTX de PowerPoint.
Visor de hojas de cálculo — Obtiene y renderiza libros .xlsx y .xls heredados con pestañas de hojas y filas virtualizadas.
Visor de SVG — Obtiene y renderiza de forma segura un documento SVG en línea y depurado desde una URL.
Visor de XML — Vista de árbol colapsable y copiable para inspeccionar documentos XML.

Multimedia y archivos

Chip de adjunto — Chip compacto para un archivo adjunto a un mensaje, con estado de carga, progreso y reintento.
Avatar — Marcador de identidad pequeño que muestra un icono, una imagen o iniciales como alternativa para una persona o entidad
Imagen animada — Reproduce un GIF/APNG/WebP animado con un control de reproducción/pausa que respeta la preferencia de movimiento reducido.
Animación — Anima de forma declarativa un hijo insertado mediante slot con ajustes predefinidos con nombre o fotogramas clave personalizados.
Disparador de adjuntos — Control compacto para adjuntar que abre un selector de archivos o un menú de capacidades en un compositor de chat.
Reproductor audio/vídeo — Reproductor de audio/vídeo con transcripción sincronizada, forma de onda y control de velocidad de reproducción.
Grupo de avatares — Apila avatares superpuestos en una fila compacta que colapsa los adicionales en una insignia +N
Zona de arrastrar y soltar — Contenedor de arrastrar y soltar que convierte cualquier región en un destino para soltar archivos, sin selector de archivos propio.
Icono de archivo — Insignia de tipo de archivo localizada, resuelta a partir de un tipo MIME o un nombre de archivo.
Entrada de archivo — Zona de arrastrar y soltar (o clic para explorar) que emite los archivos seleccionados.
Bandera — Bandera de país o idioma renderizada en un marco personalizable, opcionalmente circular.
Comparador de imágenes — Desliza un divisor accesible por teclado para comparar lado a lado las superficies de antes y después.
Visor de imagen — Visor de imagen ráster completo con desplazamiento y zoom, resaltados de región etiquetados y anotación opcional.
Lightbox — Visor de imágenes modal a pantalla completa con navegación anterior/siguiente y zoom
Mapa — Envoltorio de mapa MapLibre GL con leyenda declarativa, coropletas y marcadores
Tarjeta multimedia — Vista previa en línea de una imagen, un video o un archivo adjunto dentro de un mensaje de chat.
Desplazamiento y zoom — Área desplazable para inspeccionar con zoom un contenido en slot o una imagen, con un nivel de zoom acotado.
Reproducción — Control de reproducción/pausa que avanza un índice a través de un rango con un temporizador fijo.
Código QR — Codifica cualquier valor como un símbolo de código QR escaneable, renderizado en un canvas.
Video — Reproductor de video en línea con controles personalizados, subtítulos seleccionables y vista previa en miniaturas.
Lista de reproducción de video — Reproduce una secuencia de videos en una lista de reproducción navegable, avanzando automáticamente al siguiente.
Marco con zoom — Vista previa en iframe en espacio aislado (sandbox) con controles de zoom discretos; la antigua superficie de inspección de contenido en slot o de imagen ahora es lr-pan-zoom.

Utilidades

Intersection Observer — Emite entradas de intersección nativas cuando los objetivos insertados mediante slot entran o salen del viewport.
Observador de mutaciones — Observa el DOM insertado mediante slot en busca de cambios de elementos y atributos, y reenvía los registros de mutación nativos
Observador de redimensionamiento — Observa los elementos insertados mediante slot y emite entradas de redimensionamiento tipadas, sin interfaz visual propia
Botón de copiar — Botón de solo icono que copia un valor de texto al portapapeles y muestra una marca de verificación como confirmación.
Vista de diferencias — Renderiza una diferencia de líneas real entre dos cadenas de texto como una salida de diff unificado con código de colores.
Separador — Separador semántico adaptable a temas, para dividir contenido horizontal o verticalmente.
Botón de exportar — Descarga los datos de una tabla como CSV o JSON, en un solo formato o mediante un menú de formatos.
Formato de bytes — Formato de tamaños en bytes según la configuración regional, con paso de unidad y precisión ajustables.
Formato de fecha — Formato de fecha y hora según la configuración regional, mediante Intl.DateTimeFormat.
Formato de número — Formato de números, moneda y notación compacta según la configuración regional, mediante Intl.NumberFormat.
Icono — Renderiza glifos SVG en línea nítidos a partir de un conjunto de rutas con nombre integrado, sin dependencias.
Visor de JSON — Vista de árbol colapsable y copiable para inspeccionar cualquier carga útil JSON
Fecha conocida — Campo de entrada de tres partes (día/mes/año) para una fecha que el usuario ya conoce
Región activa — Región activa ARIA oculta visualmente que limita la frecuencia de los anuncios del lector de pantalla
Popover de menciones — Autocompletado anclado al cursor de texto para menciones con @ y comandos con barra diagonal en un campo de texto.
Estado de sondeo — Cuenta regresiva hasta la siguiente actualización programada, con un control integrado de pausa y reanudación.
Contenido aleatorio — Rota entre los elementos hijos colocados en el slot, de forma aleatoria o secuencial, para textos A/B y testimonios
Tiempo relativo — Muestra una marca de tiempo relativa según la configuración regional que se actualiza automáticamente.
Recorrido — Recorrido guiado con foco destacado y pasos, pensado para la incorporación de nuevos usuarios en el primer uso del producto.
Oculto visualmente — Oculta contenido en pantalla manteniéndolo accesible para los lectores de pantalla, y lo muestra de nuevo al recibir el foco.