Tutti i componenti

Esplora tutti i 308 componenti Lyra UI. Filtra per famiglia, cerca per nome e prova le anteprime dal vivo oppure apri un esempio documentato.

Conversazione e chat

Area di lavoro dell'agente — Struttura controllata e responsive per una conversazione IA che compone la trascrizione, il compositore di messaggi e un pannello dei dettagli opzionale per esecuzione, strumenti, recupero, grounding e contesto.
Visualizzatore audio — Visualizzazione dell'attività vocale disegnata su canvas, che riflette lo stato di un agente: inattivo, in ascolto, in elaborazione o che parla.
Selettore di varianti — Navigatore controllato «‹ n / m ›» tra le varianti rigenerate o modificate di uno stesso messaggio di chat.
Compositore di chat — Campo di inserimento messaggi di chat a ridimensionamento automatico, con controlli di invio e interruzione integrati.
Messaggio di chat — Contenitore di messaggio di chat basato sul ruolo, con avatar, badge e un footer sensibile allo stato.
Area di scorrimento della chat — Contenitore di scorrimento della trascrizione che gestisce l'ancoraggio in fondo, una pillola «vai all'ultimo messaggio» e un separatore dei messaggi non letti.
Punto di ripristino — Punto di ripristino inline della conversazione, con conferma prima del ripristino, per riportare la chat a uno stato precedente.
Blocco di codice — Visualizzazione di codice delimitato con evidenziazione della sintassi lazy opzionale e un pulsante di copia.
Blocco di codice core — Visualizzazione di codice ottimizzata per una build leggera, che evidenzia la sintassi solo tramite una mappa di grammatica fornita in fase di compilazione.
Elemento di conversazione — Riga selezionabile della cronologia chat che mostra titolo, anteprima e timestamp di una sessione.
Stato di generazione — Mostra tempo trascorso, token e throughput durante lo streaming di una risposta IA.
Separatore di passaggio di consegne — Separatore etichettato che segna il passaggio di controllo tra agenti in una trascrizione.
Markdown — Rendering sanificato da Markdown a HTML con tabelle GFM, codice e link.
Markdown core — Rendering di Markdown ottimizzato per una build leggera, che evidenzia il codice solo tramite una mappa di grammatica fornita in fase di compilazione.
Azioni sul messaggio — Barra delle azioni per messaggio in un messaggio di chat, con copia, rigenera, modifica e feedback integrati.
Feedback sul messaggio — Valutazione con pollice su/giù per un messaggio dell'assistente, con un pannello dei dettagli opzionale per motivo e commento.
Selettore modello — Selettore di provider e modello con catalogo fisso o inserimento di testo libero personalizzato.
Pannello impostazioni modello — Selettore di modello abbinato a uno slider della temperatura per configurare un agente.
Push-to-talk — Pulsante di acquisizione del microfono che gestisce l'intero ciclo di vita di richiesta dei permessi, registrazione e chiusura, per l'uso a pressione prolungata o a interruttore.
Stato dello stream — Mostra la fase di una singola connessione di streaming con rilevamento di blocco basato su heartbeat.
Testo in streaming — Esegue il rendering incrementale del testo dell'assistente in streaming, unendo gli aggiornamenti rapidi dei token.
Testo in streaming core — Renderer di testo in streaming ottimizzato per una build leggera, il cui modo Markdown evidenzia i blocchi di codice solo tramite una mappa di grammatica fornita in fase di compilazione.
Chip di suggerimento — Riga scorrevole di chip con prompt iniziali o di follow-up, che passa il testo selezionato al componente ospitante.
Elenco dei thread — Barra laterale delle conversazioni, raggruppata e ricercabile, con azioni per riga per fissare, archiviare, eliminare e rinominare.
Feed della trascrizione — Feed di sottotitoli dal vivo per una sessione vocale in corso, con passaggio da provvisorio a definitivo e scorrimento con ancoraggio in fondo.
Indicatore di digitazione — Indicazione di presenza puramente visiva che mostra che l'assistente sta componendo una risposta.
Badge di utilizzo — Striscia compatta di token, costo e latenza per un messaggio o un'esecuzione, con un dettaglio a comparsa al passaggio del mouse.
Selettore di voce — Selettore di voci TTS su un catalogo fornito, con anteprima audio inline e gestione dei valori obsoleti.
Renderer di widget — Esegue il rendering di un albero di widget JSON dichiarativo trasmesso in streaming da un agente, tramite un registro tipo-componente basato su una lista consentita.
Parti del messaggio — Renderizza parti ordinate e intercalabili dei messaggi IA con primitive per testo, ragionamento, strumenti, citazioni, allegati e contenuti multimediali.
Inserimento prompt — Combina la composizione del prompt con allegati, selezione di modello, voce e fonti, menzioni, comandi e turni in coda.
Coda dei prompt — Gestisce una coda controllata di prompt di approfondimento che possono essere modificati, riordinati, rimossi o inviati subito.
Sessione in tempo reale — Fornisce un’interfaccia di sessione vocale indipendente dal fornitore per connessione, attività, trascrizione, acquisizione, silenziamento e interruzione.
Barra della selezione — Posiziona le azioni per chiedere, citare, referenziare e copiare accanto al testo selezionato mantenendone l’ancora documentale.

Strumenti e osservabilità degli agenti

Feed di attività — Registro di attività in streaming (solo aggiunta) delle azioni granulari di un agente, che si riassume in un totale di passaggi completati al termine dell'esecuzione.
Dashboard di valutazione dell'agente — Vista d'insieme controllata delle valutazioni, che abbina le schede delle metriche a un grafico di tendenza e alla cronologia degli stati per esecuzione.
Domanda dell’agente — Raccoglie una risposta strutturata a una domanda di un agente o server MCP, con azioni per accettare, rifiutare e annullare.
Esecuzioni in background — Mostra i lavori degli agenti gestiti dall’applicazione, in coda, in esecuzione o completati, con richieste di apertura e annullamento.
Indicatore del budget — Mostra il consumo fornito rispetto a un limite, inclusi gli stati non disponibile e superato.
Revisione delle modifiche — Esamina le modifiche ai file fornite dall’applicazione e richiede una decisione per conservare o scartare ogni blocco.
Gestione dei connettori — Mostra lo stato della connessione e richiede azioni di connessione, disconnessione o nuovo tentativo per i connettori gestiti dall’applicazione.
Concessione dei permessi — Presenta una richiesta di permesso circoscritta e comunica all’applicazione la scelta dell’utente di consentire o negare.
Regole dei permessi — Mostra le regole di autorizzazione definite dall’applicazione e richiede modifiche alle decisioni di consenso, conferma o rifiuto.
Esecuzione dell'agente — Struttura di primo livello per l'esecuzione di un agente, che mostra stato, tempo trascorso, passaggio corrente e costo, con azioni di annullamento e nuovo tentativo.
Traccia dell'agente — Vista gerarchica della traccia di un agente/LLM, con filtri per tipo di span e salti rapidi ai passaggi di consegne, su un unico array di span condiviso.
Coda di approvazione — Coda accessibile da tastiera delle chiamate agli strumenti in attesa, ciascuna esaminata e approvata o rifiutata tramite un'unica finestra di dialogo condivisa.
Pannello artefatto — Struttura attorno a un artefatto generato da un agente, con commutazione anteprima/codice, navigazione tra versioni e azioni di copia/download.
Cornice del browser — Vista presentazionale di tipo «computer dell'agente», che mostra uno streaming di schermate, un URL di sola lettura e controlli per riprendere il comando.
Scheda commit — Riepilogo compatto di un commit con statistiche delle modifiche e cambiamenti per file, collegato a una vista diff.
Pannello di confronto — Confronto affiancato di due risposte (A/B) con voto del vincitore, per valutazioni di modelli in stile arena.
Barra di conferma — Blocco inline e non modale di approvazione/rifiuto per un'azione proposta dall'agente, inserito nella trascrizione anziché in una finestra di dialogo.
Ispettore di contesto — Vista di ispezione dei segmenti di contesto di una chiamata al modello, con stime dei token, citazioni, indicatori di mascheramento e controlli di copia/esportazione.
Dataset di valutazione — Elenco di esempi di valutazione filtrabile e taggabile, con funzioni di aggiunta, rimozione, importazione ed esportazione.
Risultato di valutazione — Superficie di punteggio a rubrica e revisione umana per confrontare le esecuzioni di un singolo esempio di valutazione.
Esecuzione di valutazione — Vista dell'avanzamento in tempo reale di un batch di valutazione, con progresso complessivo e un pannello a comparsa per ciascun esempio, comprensivo di grounding e tracce degli strumenti.
Riepilogo delle policy — Elenco in sola lettura delle decisioni relative a guardrail, permessi, privacy e policy sugli strumenti, con spiegazioni accessibili di autorizzazione, rifiuto o necessità di revisione.
Cascata degli span — Sequenza temporale orizzontale degli span di una traccia di un agente, come barre colorate secondo lo stato su un asse temporale condiviso.
Stack trace — Analizza gli stack trace di JS/TS, browser e Python in frame attivabili, con possibilità di comprimere i frame interni.
Elenco delle attività — Tracciamento dal vivo e comprimibile del piano di un agente, con stato del ciclo di vita per ogni passaggio e sottopassaggi annidati.
Terminale — Console ANSI in sola lettura che esegue il rendering dell'output in streaming di un agente o di uno strumento, con ricerca e ancoraggio in fondo.
Risultati dei test — Riepilogo pass/fail di una suite di test con conteggi per stato, filtri a interruttore e dettaglio dei fallimenti a espansione automatica.
Pannello di ragionamento — Pannello comprimibile per la trascrizione del ragionamento, in tempo reale o rivista, di un agente IA.
Finestra di dialogo di approvazione strumento — Punto di controllo con intervento umano per approvare, rifiutare o modificare una chiamata a uno strumento proposta, prima che venga eseguita.
Blocco di chiamata strumento — Blocco inline comprimibile per una chiamata a uno strumento dell'agente, che si espande per mostrarne argomenti, errore e risultato.
Chip di chiamata strumento — Pillola inline compatta che riassume nome, stato e durata della chiamata a uno strumento di un agente.
Modulo parametri strumento — Genera un modulo modificabile a partire dallo schema JSON piatto di uno strumento, per modificare gli argomenti della chiamata.
Finestra di dialogo risultato strumento — Overlay modale che mostra stato, durata e dettaglio completo del risultato di una chiamata a uno strumento.
Vista risultato strumento — Esegue il rendering del risultato di una chiamata a uno strumento tramite un renderer registrato, con fallback su JSON.
Finestra di dialogo di selezione strumenti — Finestra di dialogo ricercabile, raggruppata per categoria, per scegliere quali strumenti dell'agente sono abilitati.
Sequenza temporale degli strumenti — Elenco cronologico delle chiamate agli strumenti dell'esecuzione di un agente, con conteggio dei tentativi, blocco in attesa di approvazione umana e mascheramento dei campi sensibili.
Albero della traccia — Gerarchia comprimibile degli span di una traccia di agente/LLM, con una barra della durata e colonne opzionali per token e costo.
Scheda risultato — Contenitore a scheda con bordo che offre ai renderer personalizzati dei risultati degli strumenti un aspetto uniforme in formato scheda compatta
Campo risultato — Riga compatta etichetta/valore per schede dei risultati degli strumenti e barre di metadati dense
Applicazione MCP — Ospita una risorsa eseguibile MCP App in una sandbox isolata ed espone le richieste dell’host come eventi tipizzati.
Studio dei prompt — Offre un ambiente indipendente dal fornitore per modificare, visualizzare, versionare, salvare ed eseguire prompt strutturati.
Visualizzatore di schemi — Ispeziona alberi JSON Schema selezionabili con vincoli, campi obbligatori, rami di composizione e problemi di validazione.
Pannello dei sottoagenti — Mostra una gerarchia controllata di esecuzioni dei sottoagenti con stato, attività, modello, avanzamento e azioni del ciclo di vita.

Retrieval e grafi di conoscenza

Scheda community — Scheda riassuntiva di una community di un grafo di conoscenza, con chip dei membri e un'azione di approfondimento.
Esploratore di embedding — Vista a dispersione 2D accessibile delle coordinate di embedding proiettate dal componente ospitante, con colorazione per cluster e selezione dei punti opzionali.
Scheda entità — Scheda descrittiva di un'entità del grafo di conoscenza, con badge del tipo, proprietà, grado e un'azione per mettere a fuoco nel grafo.
Chip entità — Menzione @entità inline per il testo dell'agente, con popover di anteprima al passaggio del mouse o al focus.
Dossier entità — Superficie di dettaglio di un'entità con intestazione, statistica di confidenza e schede per relazioni, frammenti di supporto e provenienza.
Grafo — Rappresenta le relazioni come un diagramma a nodi e collegamenti orientato alle forze, con supporto per panoramica e zoom.
Legenda del grafo — Legenda dei tipi di nodo per un grafo associato, che funge anche da filtro di visibilità.
Coda di ingestione — Elenco controllato di documenti che avanzano lungo una pipeline di ingestione, con fase, avanzamento, conteggi e richieste di nuovo tentativo o annullamento.
Base di conoscenza — Elenco delle fonti di una base di conoscenza per il recupero, con stato di sincronizzazione, integrità dell'indicizzazione, permessi e richieste di gestione per riga.
Amministrazione della base di conoscenza — Struttura operativa a schede che abbina le fonti di una base di conoscenza alla coda di ingestione, inoltrando le azioni di gestione al componente ospitante.
Esploratore del grafo di conoscenza — Struttura di esplorazione del grafo di conoscenza che combina rendering del grafo, ricerca di entità, filtri per tipo, espansione del vicinato e ricerca dei percorsi.
Mappa mentale — Albero radiale di argomenti espandibile per esplorare spazialmente una gerarchia e approfondire un argomento.
Elenco dei vicini — Righe di relazione di un'entità, con navigazione ed espansione nel grafo per riga.
Tavolozza dei nodi — Libreria di nodi ricercabile e categorizzata per trascinare o posizionare nodi su una tela di flusso.
Striscia del percorso — Catena compatta e scorrevole nodo-relazione-nodo che rappresenta un percorso di ragionamento GraphRAG.
Ispettore di frammenti — Elenco classificato dei frammenti RAG recuperati, con barre di rilevanza e un collegamento diretto a un visualizzatore di documenti.
Badge di citazione — Indicatore di citazione inline [n] con anteprima al passaggio del mouse e colorazione basata su confidenza/verifica.
Riepilogo grounding — Scheda di valutazione del grounding a livello di affermazione, che mostra conteggi di supporto, copertura delle citazioni, confidenza, avvisi e citazioni delle prove.
Pannello memoria — Superficie della memoria di lavoro di un agente per contesto a breve termine e memorie a lungo termine, con confidenza e azioni soggette a conferma.
Pannello di provenienza — Scompone in una struttura comprimibile le entità, le relazioni, le community e i frammenti alla base di una risposta.
Risposta RAG — Superficie di risposta con grounding che combina Markdown sanificato, badge di citazione, una valutazione del grounding e anteprime espandibili delle fonti.
Avanzamento della ricerca — Mostra i passaggi della ricerca, il numero di fonti e l’avanzamento complessivo forniti dall’applicazione.
Risultati di recupero — Elenco classificato di frammenti recuperati, con deduplicazione, raggruppamento per fonte, selezione e modalità di presentazione compatta o espansa.
Ricerca di recupero — Barra di ricerca per una superficie di recupero o RAG, con chip di filtro e ambito, un selettore di modalità vettoriale/per parole chiave/ibrida e feedback di stato.
Traccia di recupero — Sequenza temporale delle fasi della pipeline di recupero, con prove espandibili per ciascuna fase di riscrittura, embedding, recupero, riordinamento e filtro.
Scheda fonte — Voce di citazione che mostra titolo, pagina, estratto e testo integrale espandibile di una fonte.
Elenco fonti — Pannello Fonti comprimibile che raggruppa le schede di citazione di un messaggio di chat sotto un'unica intestazione.
Selettore di fonti — Albero di checkbox che delimita quali fonti guidano la risposta successiva, con cartelle a tre stati, selezione totale e ricerca.
Evidenze delle affermazioni — Verifica le affermazioni generate rispetto alle citazioni, mostrando stato del supporto, attendibilità ed evidenze.
Dashboard di valutazione RAG — Presenta metriche di qualità RAG, tendenze, segmenti di valutazione e cronologia delle esecuzioni calcolati dall’host.
Confronto del recupero — Confronta affiancati insiemi ordinati di recupero e reranking, con sovrapposizione e dettaglio dei punteggi.

Moduli e input

Pulsante — Pulsante d'azione basato su token, con varianti di tono, dimensioni e uno stato di caricamento.
Casella di controllo — Controllo di modulo booleano con stati selezionato, deselezionato e indeterminato.
Gruppo di checkbox — Raggruppa checkbox correlate in un unico campo multi-selezione associato al modulo e validato.
Editor di codice — Superficie di editing del codice multilinea senza dipendenze, con un margine opzionale per i numeri di riga.
Selettore colore — Input colore nativo associato al modulo, con etichetta, suggerimento e interfaccia per gli errori di validazione.
Combobox — Selezione singola o multipla filtrabile che abbina un campo di testo a un popover listbox.
Input data — Campo data con popover calendario associato e valore in formato ISO-8601.
Selettore data — Calendario inline a griglia mensile per selezionare una singola data o un intervallo di date.
Selettore di emoji — Selettore di emoji ricercabile, navigabile da tastiera e associato a un modulo.
Pulsante icona — Attiva un'azione tramite un pulsante compatto e accessibile con sola icona.
Campo di testo — Campo di testo su una riga con etichetta, suggerimento e interfaccia di validazione inline opzionali.
Selettore di paese — Seleziona codici di paesi e territori con nomi tradotti, bandiere e ricerca facoltativa.
Selettore di valuta — Seleziona codici di valuta con nomi tradotti, simboli e ricerca facoltativa.
Selettore di fuso orario — Seleziona identificatori di fusi orari da un elenco ordinato, con ricerca facoltativa.
Selettore di unità — Seleziona unità di misura con nomi tradotti, simboli e ricerca facoltativa.
Selettore di locale — Menu a discesa a lista chiusa per cambiare il locale attivo, alimentato dal registro di locale integrato nella libreria.
Input numerico — Campo numerico con vincoli di min, max e step, oltre alla validazione nativa dei vincoli.
Opzione — Opzione selezionabile che fornisce valore, etichetta, raggruppamento e dati di stato a una combobox.
Input telefono — Campo telefonico con riconoscimento del paese, il cui valore nel modulo è nel formato canonico E.164
Pulsante di opzione — Controllo a scelta singola associato al modulo per selezionare un'opzione da un insieme
Gruppo di radio — Gruppo etichettato e navigabile da tastiera di pulsanti radio a scelta singola.
Modulo di valutazione — Griglia di valutazione configurabile per punteggio, categoria e commento, con un flusso di invio e passaggio al successivo per scorrere una coda di valutazione degli output di un agente IA.
Selettore — Menu a discesa a lista chiusa per scegliere un'opzione da un insieme fisso di scelte.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Cursore — Controllo numerico a intervallo per impostazioni come la temperatura di un LLM o un livello di volume.
Selettore campioni — Selettore a scelta singola su un piccolo insieme fisso di campioni colore, con un contratto radiogroup integrato.
Interruttore — Controllo di modulo a interruttore booleano, con semantica on/off per i moduli nativi.
Area di testo — Input di testo semplice multilinea con crescita automatica, validazione e interfaccia da controllo di modulo.
Input orario — Campo orario segmentato e sensibile alla lingua, con un selettore a colonne associato; l'esperienza nativa del browser (input[type=time]) è lr-native-time-input.
Intervallo orario — Selettore a due maniglie per definire un intervallo di inizio e fine su un dominio numerico.
Pulsante di attivazione — Pulsante autonomo a due stati che attiva o disattiva un'opzione, con semantica aria-pressed.
Gruppo di pulsanti di attivazione — Raggruppa pulsanti di attivazione dietro un unico punto di tabulazione, con selezione multipla o singola annullabile.
Input orario nativo — Campo orario nativo, racchiuso nell'interfaccia Lyra di etichetta, suggerimento e validazione, da usare al posto del campo segmentato lr-time-input quando si preferisce il selettore nativo del browser.
Codice OTP — Campo segmentato per inserire un codice di verifica monouso, con compilazione automatica via SMS integrata.
Pulsante di opzione segmentato — Controllo a scelta singola con l'aspetto di un pulsante anziché di un cerchio, di solito raggruppato con lr-radio-group per formare un controllo segmentato.
Input token — Campo associato al modulo che raccoglie un elenco di token rimovibili come tag o destinatari.

Visualizzazione dei dati

Generatore di query per grafi — Editor associato a un modulo per una query tipizzata di relazione o percorso su un grafo, con ancoraggi di entità, filtri per tipo, limiti di hop e query salvate.
Calendario — Calendario mensile responsive con indicatori di eventi e una vista agenda accessibile da tastiera.
Misuratore di contesto — Misuratore di occupazione segmentato, a barra o ad anello, per un budget di token o una finestra di contesto.
Libreria documenti — Inventario di documenti ricercabile e filtrabile, con versioni, tag, proprietari, aggiornamento, ordinamento e selezione multipla.
Elenco variabili d'ambiente — Elenco chiave/valore mascherato per variabili d'ambiente e segreti, con rivelazione e copia per riga.
Albero dei file — Preimpostazione da esploratore file sul componente albero, con badge di stato Git e caricamento pigro delle directory.
Tela di flusso — Tela panoramica e con zoom per costruire ed eseguire flussi di lavoro visivi a DAG.
Controlli di flusso — Gruppo di pulsanti zoom, adatta e blocco per una tela di flusso associata.
Minimappa di flusso — Mappa panoramica d'angolo con un rettangolo della vista trascinabile per una tela di flusso associata.
Nodo di flusso — Scheda del nodo di workflow con intestazione, tono di stato e punti di connessione per una tela di flusso.
Overlay di esecuzione del flusso — Applica decorazioni sullo stato di esecuzione a una tela di flusso e mostra una striscia di riepilogo compatta dei passaggi.
Imbuto — Mostra il calo di conversione fase per fase come barre normalizzate sulla prima fase.
Indicatore — Mostra un singolo valore come misuratore radiale, ad anello o lineare.
Mappa di calore — Esegue il rendering di una matrice o di una griglia a calendario di valori come mappa di calore su canvas, con adattamento al ridimensionamento.
Paginazione — Navigazione tra pagine controllata, con salto pagina modificabile e riepilogo dell'intervallo di elementi
Generatore di query — Generatore componibile di query strutturate per dati tabellari o di dashboard, che combina righe di condizione campo/operatore/valore con un combinatore AND/OR.
Striscia di sequenza — Striscia compatta per elemento che visualizza una sequenza di stati categoriali come celle colorate, con un marcatore opzionale.
Sparkline — Traccia un andamento SVG inline compatto come linea, area riempita o barre per una serie di dati.
Statistica — Presenta un singolo KPI con unità di misura, badge di andamento a pillola, righe di dettaglio e uno sparkline opzionale.
Tabella — Tabella dati puramente di presentazione, con intestazioni ordinabili, selezione, filtri e paginazione.
Sequenza temporale — Sequenza collegata di righe di eventi passati per audit trail, cronologie degli agenti e changelog.
Elemento della sequenza temporale — Una riga evento per una sequenza temporale, con indicatore a codice colore, titolo, timestamp e descrizione.
Albero — Gerarchia espandibile/comprimibile per navigare grafi, documenti o alberi di file
Nodo dell'albero — Renderer ricorsivo di righe treeitem per un nodo e i relativi figli all'interno di un albero.
Nuvola di parole — Tag cloud SVG senza dipendenze che scala ogni parola in base al proprio peso
Griglia dati — Griglia dati virtualizzata per grandi set di dati, lato client o server, con ordinamento, filtri, raggruppamento, paginazione e selezione.

Grafici

Grafico a barre — Confronta valori tra categorie con barre verticali o orizzontali.
Grafico a scatola e baffi — Riassume le distribuzioni a partire da riepiloghi statistici a cinque numeri precalcolati.
Grafico a bolle — Rappresenta tre dimensioni per punto usando la posizione x, y e il raggio della bolla.
Grafico — Wrapper di base su Chart.js che alimenta grafici a linee, a barre, a torta e altre visualizzazioni di dati.
Grafico a ciambella — Mostra le proporzioni tra parte e tutto come segmenti di un anello.
Istogramma — Raggruppa i valori numerici in intervalli di uguale ampiezza per evidenziarne la distribuzione.
Grafico a linee — Traccia le tendenze lungo un asse continuo con una o più serie collegate.
Grafico Lite — Grafico a barre e a linee senza dipendenze, renderizzato in puro SVG: non richiede Chart.js.
Grafico a torta — Grafico a torta proporzionale che mostra la quota di una serie sul totale.
Grafico ad area polare — Grafico ad area polare che rappresenta ogni categoria come uno spicchio proporzionale al suo valore.
Grafico radar — Grafico radar che confronta più metriche di una serie su una griglia radiale.
Grafico a dispersione — Grafico a dispersione di coppie di punti x/y grezzi su assi lineari.

Layout e navigazione

Fisarmonica — Coordina un gruppo di pannelli a scomparsa, consentendo facoltativamente l'apertura simultanea di più pannelli.
Elemento fisarmonica — Pannello a scomparsa pensato per essere inserito in un gruppo fisarmonica.
Barra app — Barra di navigazione responsive che si adatta da versione completa a sola icona, fino a un overlay per mobile.
Gruppo barra app — Sezione con titolo, facoltativamente comprimibile, che raggruppa gli elementi di navigazione all'interno di una barra app.
Elemento barra app — Elemento di navigazione con icona ed etichetta per una barra app, con uno stato compresso a sola icona.
Breadcrumb — Percorso di navigazione responsive che mostra la posizione dell'utente all'interno della gerarchia della pagina
Elemento breadcrumb — Singolo link o etichetta della pagina corrente all'interno di un percorso di navigazione breadcrumb
Gruppo di pulsanti — Raggruppa pulsanti di azione correlati in un unico blocco responsive e con etichetta
Card — Superficie di contenuto con bordo, dotata di slot per header, media, footer e azioni.
Carosello — Carosello accessibile a slide singola, con navigazione da tastiera, indicatori, loop e riproduzione automatica.
Elemento del carosello — Wrapper semantico opzionale per una slide, che applica uno stile coerente all'elemento figlio del carosello.
Palette dei comandi — Menu dei comandi dell'applicazione, ricercabile, con navigazione da tastiera e scorciatoie.
Gruppo di controlli — Raggruppa controlli di modulo eterogenei e pulsanti di azione in un'unica riga responsive e centrata
Griglia dashboard — Griglia di widget controllata, responsive e accessibile da tastiera, che posiziona le voci di layout ed emette richieste di spostamento, ridimensionamento e collisione.
Dettagli — Pannello a scomparsa accessibile che si espande per rivelare il contenuto sotto un riepilogo.
Pannello dock — Pannello ridimensionabile e comprimibile, ancorato a un bordo del layout esistente.
Pannello drilldown — Struttura di navigazione controllata da un dato di un grafico o di una tabella verso prove, documenti, entità o esecuzioni di agenti correlati, con un percorso breadcrumb.
Elemento dropdown — Alias compatibile con Web Awesome per una singola riga di azione all'interno di un menu dropdown.
Barra dei filtri — Riga di filtri per dashboard che compone input Lyra e chip rimovibili, con stati di reset e caricamento.
Menu — Menu semantico inline con elementi di azione, navigazione da tastiera e sottomenu annidati.
Elemento menu — Singola riga di azione per un menu, con icona, checkbox o stile distruttivo opzionali.
Elemento riordinabile — Riga singola all'interno di una lista riordinabile, che abbina pulsanti di spostamento su/giù a un contenuto arbitrario inserito tramite slot.
Lista riordinabile — Elenco generico di righe riordinabili, spostabili tramite pulsanti per riga o la scorciatoia Ctrl/Cmd+Freccia.
Etichetta di menu — Aggiunge un'intestazione non interattiva per raggruppare voci correlate all'interno di un menu.
Barra dei menu — Barra dei menu orizzontale per applicazioni, con menu a discesa titolati e navigazione completa da tastiera.
Elemento della barra dei menu — Titolo di primo livello di una barra dei menu che apre il menu annidato o funge da semplice azione.
Menu di navigazione — Navigazione dell'intestazione del sito con link e pannelli a comparsa, che si comprime dietro un pulsante menu quando lo spazio non basta.
Elemento del menu di navigazione — Una voce del menu di navigazione: un link a una pagina o un pulsante di espansione che apre un pannello a comparsa.
Pagina — Struttura semantica di applicazione la cui navigazione passa da una colonna fissa a un cassetto modale su mobile in base allo spazio realmente assegnato, e non alla finestra.
Pannello responsive — Ancora il contenuto in linea su desktop oppure lo presenta come overlay a comparsa su dispositivi mobili
Scroller — Superficie di overflow responsive con controlli precedente/successivo opzionali per righe di card e schede.
Segmented — Riga di pulsanti a selezione singola per scegliere una tra diverse opzioni etichettate a colpo d'occhio.
Split — Divide una dashboard in pannelli ridimensionabili tramite trascinamento, con collasso responsive opzionale.
Pannello split — Divide il contenuto in due pannelli ridimensionabili tramite trascinamento con un unico divisore, un'alternativa più semplice al lr-multi-split multi-pannello.
Stepper — Guida gli utenti attraverso un wizard multi-step ordinato, con stato per ogni step e salto diretto tramite clic.
Schede — Barra di schede che mostra un solo pannello light DOM alla volta, con navigazione completa da tastiera.
Scheda — Descrittore di scheda compatibile con Web Awesome/Shoelace, abbinato al proprio pannello all'interno di una barra di schede tramite gli attributi panel e name.
Pannello di scheda — Descrittore di pannello compatibile con Web Awesome/Shoelace, abbinato alla propria scheda all'interno di una barra di schede tramite gli attributi name e panel.
Lista virtuale — Contenitore di liste con windowing, che renderizza solo le righe visibili a schermo per raccolte scorrevoli di grandi dimensioni
Widget — Contenitore di pannello con titolo, dotato di controlli opzionali per comprimere ed espandere a schermo intero

Overlay e feedback

Toast — Area di impilamento che ancora le notifiche toast a un angolo dello schermo.
Elemento toast — Singolo toast rimovibile con un accento di gravità, icona opzionale e timer di chiusura automatica.
Chip — Piccola pillola per un tag, un filtro o un ambito, rimovibile o attivabile/disattivabile a scelta.
Gruppo di chip — Racchiude un insieme di chip con un controllo di overflow +N opzionale, attivato quando il numero supera un limite.
Avviso — Messaggio di avviso chiuso per impostazione predefinita, con chiusura automatica temporizzata e passaggio opzionale allo stack di notifiche toast condiviso.
Badge — Etichetta di stato compatta per segnalare stato, conteggi o categorie in linea
Callout — Superficie per messaggi in linea per contenuti di stato, avviso ed errore, richiudibile.
Menu contestuale — Trasforma qualsiasi area in un bersaglio per clic destro, pressione prolungata o Maiusc+F10 che apre un menu di azioni.
Finestra di dialogo — Overlay modale con focus intrappolato per conferme, moduli e altre attività di interruzione.
Pannello laterale — Fa scorrere un pannello modale da qualsiasi bordo del viewport per filtri o controlli contestuali.
Menu a discesa — Popover con ruolo menu che ancora un elenco di azioni a un trigger fornito dal consumer
Stato vuoto — Comunica uno stato vuoto o di assenza di dati con un'icona, un messaggio e azioni opzionali.
Kbd — Chip sensibile alla piattaforma che rappresenta una scorciatoia da tastiera come tasti
Popover — Superficie flottante attivata al clic, con chiusura automatica leggera, per contenuti e controlli contestuali
Popup — Primitiva di posizionamento di basso livello che mantiene un pannello flottante allineato alla sua ancora, lo stesso motore alla base di popover e tooltip.
Barra di avanzamento — Indicatore di avanzamento orizzontale, determinato o indeterminato, con valore opzionale.
Anello di avanzamento — Indicatore di avanzamento circolare, determinato o indeterminato, con etichetta centrale.
Valutazione — Valutazione a stelle accessibile da tastiera, con riempimento parziale a precisione frazionaria
Scheletro — Segnaposto animato che sostituisce il contenuto durante il caricamento.
Indicatore di caricamento — Segnala un'attività in background in corso con un indicatore di occupato animato e indeterminato.
Etichetta — Alias semantico dello stile badge per etichettare parole chiave o categorie
Suggerimento — Tooltip attivato da hover e focus, che descrive un trigger fornito dal consumer

Visualizzatori di documenti e file

Visualizzatore di archivi — Elenca nomi dei file e dimensioni non compresse all'interno di un archivio ZIP, senza estrarne il contenuto.
Visualizzatore di calendario — Analizza e visualizza gli eventi di un file di calendario .ics come riepiloghi, orari e luoghi.
Visualizzatore di contatti — Recupera un documento vCard e visualizza una scheda accessibile per ogni contatto.
Visualizzatore CSV — Recupera un file CSV e ne visualizza le righe in un foglio scorrevole e virtualizzato.
Visualizzatore di dataset — Recupera testo delimitato e lo visualizza come tabella dati tipizzata e accessibile.
Confronto documenti — Confronto affiancato o in linea tra due versioni di un documento, che combina una vista diff testuale con anteprime renderizzate dei documenti.
Anteprima documento — Mostra l'anteprima in linea di un documento o allegato in base al tipo MIME, con fallback al download.
Visualizzatore di documenti — Mostra un documento in una finestra di dialogo con un registro di renderer per tipo MIME estendibile.
Visualizzatore DOCX — Visualizza un file DOCX come HTML semantico sanificato tramite il convertitore mammoth.
Visualizzatore di ebook — Visualizza un EPUB con navigazione tra i capitoli, utilizzando epub.js come dipendenza peer opzionale.
Visualizzatore di email — Analizza e visualizza un messaggio .eml con intestazioni, corpo sanificato e allegati.
Visualizzatore GeoJSON — Recupera, convalida e visualizza su una mappa le feature di un file GeoJSON.
Livello di evidenziazione — Overlay che disegna rettangoli di evidenziazione attivabili sopra il contenuto posizionato di un documento.
Visualizzatore HTML — Recupera un URL e ne visualizza in modo sicuro l'HTML dopo averlo sanificato.
Inclusione — Recupera un frammento HTML e lo incorpora tramite transclusione come contenuto di pagina light-DOM sanificato.
Visualizzatore di notebook — Motore di rendering di notebook Jupyter in sola lettura che compone markdown, codice e output di cella avanzati.
Barra delle pagine — Barra di miniature verticale virtualizzata per sfogliare un documento paginato.
Visualizzatore PDF — Recupera e visualizza le pagine PDF con zoom, paginazione e un livello di testo selezionabile
Visualizzatore PPTX — Visualizzatore lato client best-effort per presentazioni PowerPoint PPTX.
Visualizzatore di fogli di calcolo — Recupera e visualizza cartelle di lavoro .xlsx e .xls legacy con schede dei fogli e righe virtualizzate.
Visualizzatore SVG — Recupera e visualizza in modo sicuro un documento SVG in linea e sanificato a partire da un URL.
Visualizzatore XML — Vista ad albero comprimibile e copiabile per ispezionare documenti XML.

Media e file

Chip allegato — Chip compatto per un file allegato a un messaggio, con stato di caricamento, avanzamento e possibilità di riprova.
Avatar — Piccolo indicatore di identità che mostra un'icona, un'immagine o le iniziali come fallback per una persona o un'entità
Immagine animata — Riproduce una GIF/APNG/WebP animata con un controllo play/pause che rispetta le preferenze di movimento ridotto.
Animazione — Anima in modo dichiarativo un elemento figlio inserito in uno slot, con preset predefiniti o keyframe personalizzati.
Attivatore allegati — Controllo compatto per allegare file che apre un selettore di file o un menu delle funzionalità nella casella di composizione della chat.
Lettore audio/video — Lettore audio/video con trascrizione sincronizzata, forma d'onda e controllo della velocità di riproduzione.
Gruppo di avatar — Impila avatar sovrapposti in una riga compatta che raggruppa gli elementi in eccesso in un badge +N
Area di rilascio — Contenitore drag-and-drop che trasforma qualsiasi area in una destinazione per il rilascio di file, senza un selettore di file proprio.
Icona file — Badge del tipo di file localizzato, determinato a partire da un tipo MIME o da un nome file.
Input file — Area di rilascio drag-and-drop e clic per sfogliare i file, che emette i file selezionati.
Bandiera — Bandiera di paese o lingua visualizzata in una cornice tematizzabile, opzionalmente circolare.
Comparatore di immagini — Fa scorrere un separatore accessibile da tastiera per confrontare affiancate le viste prima e dopo.
Visualizzatore di immagini — Visualizzatore di immagini raster completo con pan/zoom, evidenziazioni di area etichettate e annotazione opzionale.
Lightbox — Visualizzatore di immagini modale a schermo intero con navigazione precedente/successivo e zoom
Mappa — Wrapper per mappe MapLibre GL con legenda dichiarativa, rappresentazione coropletica e marker
Scheda multimediale — Anteprima in linea per un'immagine, un video o un allegato all'interno di un messaggio di chat.
Pan e zoom — Area scorrevole per ispezionare con zoom un contenuto in slot o un'immagine, con un livello di zoom limitato.
Riproduzione — Controllo di trasporto play/pause che avanza un indice lungo un intervallo secondo un timer fisso.
Codice QR — Codifica qualsiasi valore in un simbolo di codice QR scansionabile, disegnato su canvas.
Video — Lettore video in linea con controlli personalizzati, sottotitoli selezionabili e anteprime in miniatura.
Playlist video — Riproduce una sequenza di video in una playlist navigabile, passando automaticamente al successivo.
Cornice con zoom — Anteprima in iframe sandboxed con controlli di zoom discreti; la precedente superficie di ispezione di contenuti in slot o immagini è ora lr-pan-zoom.

Utility

Intersection Observer — Emette voci di intersezione native quando i target inseriti tramite slot entrano o escono dal viewport.
Mutation Observer — Osserva il DOM negli slot per rilevare modifiche a elementi e attributi, inoltrando i record di mutazione nativi
Resize Observer — Osserva gli elementi inseriti tramite slot ed emette voci di ridimensionamento tipizzate, senza elementi di interfaccia visibili
Pulsante di copia — Pulsante con sola icona che copia un valore testuale negli appunti, mostrando un segno di spunta come conferma.
Vista diff — Genera un diff reale a livello di riga tra due stringhe e lo visualizza come output unified-diff con codifica a colori.
Divisore — Separatore semantico tematizzabile per dividere i contenuti in orizzontale o in verticale.
Pulsante di esportazione — Consente di scaricare i dati di una tabella come CSV o JSON, in un singolo formato o tramite un menu di selezione.
Formattazione byte — Formattazione delle dimensioni in byte basata sul locale, con passo dell'unità e precisione regolabili.
Formattazione data — Formattazione di data e ora basata sul locale tramite Intl.DateTimeFormat.
Formattazione numero — Formattazione di numeri, valute e formato compatto basata sul locale tramite Intl.NumberFormat.
Icona — Genera glifi SVG inline nitidi a partire da un set integrato di percorsi con nome, senza alcuna dipendenza.
Visualizzatore JSON — Vista ad albero comprimibile e copiabile per ispezionare qualsiasi payload JSON
Data nota — Campo di input a tre parti (giorno/mese/anno) per una data che l'utente conosce già
Regione live — Regione live ARIA nascosta visivamente che limita la frequenza degli annunci per screen reader
Popover di menzione — Autocompletamento ancorato al cursore di testo per @-menzioni e comandi slash in un campo di testo.
Stato del polling — Conto alla rovescia per il prossimo aggiornamento programmato, con controlli integrati di pausa e ripresa.
Contenuto casuale — Alterna gli elementi figli inseriti negli slot in modo casuale o in sequenza, utile per testi A/B e testimonianze
Tempo relativo — Mostra un timestamp relativo basato sul locale, che si aggiorna automaticamente.
Tour — Percorso guidato passo-passo con spotlight per l'onboarding al primo utilizzo del prodotto.
Nascosto visivamente — Nasconde il contenuto a schermo mantenendolo accessibile agli screen reader, rendendolo di nuovo visibile al focus.