Sistema di componenti senza interfaccia · Nuova risorsa
sistema di design Bits UI.
Bits UI offre componenti Svelte headless, componibili tramite parti native e lo stato di Svelte 5. L’esempio combina una casella di controllo con stato misto derivato, sezioni dell’accordion espandibili in modo indipendente e una finestra di dialogo di revisione basata su portal, includendo la configurazione completa degli stili.
Guida OpenDesign9 capitoli28 voci di riferimentoGuida applicativa originale
01
Bits UI Anteprima dell’interfaccia del sistema di design
Seleziona un controllo, esamina lo stato misto del controllo collettivo, verifica l’avanzamento incompleto, quindi completa e salva la lista di controllo locale.
Bits UI 2.19.5 Checkbox, Accordion e Dialog con Svelte 5.57.1. Tutti gli stili visivi sono originali. · Riferimento per l’implementazione
02
Bits UI Riferimento di design del sistema di design
Bits UI 2.19.5 con Svelte 5.57.1. Bits UI è headless: tutti i colori, i caratteri e i valori di spaziatura --app-* sono configurazioni originali esplicite incluse in questo esempio, non token di design ufficiali di Bits UI. Gli attributi dei dati nativi e le proprietà dei componenti sono identificati separatamente.
Sistema di design Bits UI Componi parti native attorno allo stato di Svelte 5
Comporre parti native mantenendo lo stato in Svelte 5
La checklist usa $state per le singole risposte, gli ID delle sezioni espanse e la visibilità della finestra di dialogo. Un conteggio di completamento $derived alimenta sia l’avanzamento visibile sia la casella di controllo generale. In questo modo, la fonte di verità risiede in un unico modello Svelte, mentre Bits UI fornisce l’interazione nativa per ciascun componente.
Checkbox, Accordion e Dialog sono composti a partire dalle rispettive parti. La finestra di dialogo di revisione non deve gestire le risposte della checklist e un accordion non deve cancellarle quando viene chiuso. Questa separazione è il punto di partenza utile per un modulo con più sezioni: il modello mantiene i dati anche quando cambiano le parti dell’interfaccia visibili.
Sistema di design Bits UI Usa insieme le sorgenti dei componenti e degli stili di Svelte 5
Usare insieme le fonti dei componenti e degli stili di Svelte 5
L’esempio usa le rune di Svelte 5: $state per i gruppi, le sezioni espanse, la visibilità della finestra di dialogo e lo stato di salvataggio; $derived per il conteggio di completamento. Bits UI 2.19.5 viene importato direttamente. Non sono necessari plugin Tailwind, provider di temi o librerie di icone per ottenere questo stile visivo originale.
App.svelte e style.css, nella loro versione completa, funzionano in un progetto Svelte standard basato su Vite. Il punto d’ingresso usa mount di Svelte, invece del costruttore new App, ormai superato. Quando trasferisci l’esempio, mantieni insieme la sintassi delle rune del componente e la dipendenza Bits UI 2.19.5: i binding e i callback mostrati qui non sono un API di un componente Svelte precedente.
Sistema di design Bits UI Ricava il vero stato misto dai singoli controlli
Derivare uno stato misto effettivo dai singoli controlli
Sei controlli Boolean sono distribuiti in tre gruppi. Il controllo generale risulta selezionato solo quando tutti e sei sono attivi e assume lo stato indeterminato quando il conteggio è compreso tra uno e cinque. Il callback onCheckedChange aggiorna tutti i controlli, così lo stato misto è un risultato calcolato, anziché un flag memorizzato separatamente che potrebbe non essere più sincronizzato.
I singoli controlli chiamano una semplice funzione di modifica che aggiorna il modello e annulla il feedback di salvataggio. Dopo aver selezionato un controllo, la casella nativa generale renderizzata espone aria-checked=mixed. Il foglio di stile reagisce a data-state=checked e data-state=indeterminate, mantenendo comportamento e presentazione associati allo stesso stato nativo.
Seleziona il primo controllo relativo agli indicatori di focus e osserva il trattino del controllo generale.
Apri la checklist di revisione e verifica che Salva sia disattivato finché la revisione non è completa.
Torna indietro, seleziona tutti i controlli e salva lo stato locale completo.
Sistema di design Bits UI Consenti sezioni indipendenti senza perdere le risposte
Consentire sezioni indipendenti senza perdere le relative risposte
Accordion.Root usa type=multiple e un array associato degli ID dei gruppi espansi. All’avvio, le sezioni sono espanse, mentre Correzione del modulo e Feedback dei risultati possono essere aperte indipendentemente. La chiusura di una sezione non cancella i relativi controlli, perché i loro valori risiedono nello stato del componente genitore.
Ogni trigger mostra il conteggio dei controlli completati nel proprio gruppo, così l’avanzamento resta visibile anche quando il contenuto è compresso. Le parti native Header, Trigger e Content mantengono la relazione prevista e il comportamento da tastiera. Il simbolo più ruota in base a data-state del trigger e rispetta le preferenze di movimento ridotto, senza gestire l’espansione tramite un handler click separato.
Sistema di design Bits UI Componi l’anatomia completa della finestra di dialogo e affidale la gestione del focus
Comporre la struttura completa della finestra di dialogo e affidarle la gestione del focus
La revisione usa Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description e Close. Titolo e descrizione sono parti native effettive, così Bits UI può stabilire le relazioni di accessibilità. Il portal colloca l’overlay al di fuori del normale flusso del pannello della checklist.
Il contenuto ha una larghezza responsiva limitata e un’altezza massima applicata solo all’overlay, con scorrimento per le revisioni più lunghe. Escape chiude la finestra di dialogo senza cancellare la checklist. Mantieni disponibile il trigger come destinazione per il ripristino del focus, invece di rimuoverlo all’apertura dell’overlay.
Sistema di design Bits UI Rendi esplicite e riutilizzabili le regole visive dell’applicazione
Rendere esplicite e riutilizzabili le regole visive dell’applicazione
CSS associa gli stati nativi checked e indeterminate allo stesso ruolo di azione, ma usa glifi diversi per ciascuno. Il ruolo del focus, distinto, rappresenta la posizione da tastiera: un controllo può restare visibilmente selezionato e mostrare al tempo stesso dove avverrà la prossima azione da tastiera.
La scala di spaziatura definita comprende quattro, otto, dodici, sedici, ventiquattro e trentadue pixel. Nei pannelli si usano ventiquattro pixel su desktop e sedici sugli schermi stretti. La tabella delle specifiche documenta queste scelte concrete come configurazione originale, così chi legge può riprodurle o sostituirle senza confondere lo stile dimostrativo con una garanzia del pacchetto.
Sistema di design Bits UI Distingui una selezione manuale dall’esito di un test automatico
Distinguere una selezione manuale dal risultato di un test automatizzato
La checklist registra le selezioni effettuate da chi legge. Non esamina un’altra pagina, non esegue test da tastiera e non certifica la conformità all’accessibilità. Sia il testo introduttivo sia la descrizione della revisione chiariscono esplicitamente questi limiti, necessari perché i sei controlli riguardano comportamenti di accessibilità reali.
Salva è disattivato finché tutti e sei i controlli non sono selezionati. Il messaggio di salvataggio specifica che sono stati selezionati tutti e sei i controlli da chi legge e che il risultato è locale. È comunque possibile aprire una revisione parziale per esaminare ciò che manca, ma non si può ottenere un messaggio di revisione completata. Questa distinzione dà significato alle transizioni di stato dell’esempio.
Sistema di design Bits UI Cancella i messaggi di completamento quando cambiano i dati
Cancellare i messaggi di completamento ogni volta che cambiano le prove
Qualsiasi modifica, individuale o generale, cancella lo stato di salvataggio. In questo modo, una conferma di completamento non resta visibile dopo la rimozione di un controllo. L’azione Cancella tutto ripristina anche la sezione inizialmente espansa e chiude la finestra di dialogo di revisione, riportando tutti gli stati correlati a una condizione iniziale nota.
L’area di stato si trova fuori dall’overlay, quindi il messaggio di salvataggio resta nel documento dopo la chiusura della finestra di dialogo. Descrive lo stato locale della pagina e non suggerisce che sia stato inviato un rapporto. Ricaricando la pagina, la checklist viene cancellata: una scelta adatta a questa dimostrazione autonoma.
Sistema di design Bits UI Collega le parti dei componenti alle etichette visibili
Collega le parti dei componenti alle etichette visibili
Ogni casella di controllo ha un ID stabile e un’etichetta visibile associata. Lo stato selezionato o indeterminato è rappresentato dal controllo nativo; il segno di spunta e il trattino sono decorativi. Associa al controllo generale sia il valore Boolean selezionato sia il valore indeterminato derivato, in modo che una selezione parziale non venga annunciata come un normale elemento non selezionato.
Dialog.Title e Dialog.Description forniscono il nome e la spiegazione della revisione tramite l’anatomia nativa. Il portal separa l’overlay dal layout dell’accordion, mentre Dialog.Close resta l’azione esplicita per chiuderlo. L’area di stato esterna conserva il risultato salvato dopo la chiusura dell’overlay, evitando che vada perso insieme al contenuto della finestra di dialogo.
Associa l’etichetta visibile al relativo controllo.
Mantieni un anello focus-visible ben visibile dopo aver applicato stili personalizzati.
Non rimuovere le parti del titolo o della descrizione quando personalizzi lo stile di una finestra di dialogo.
Composizione nativa di Bits UI con modelli $state/$derived, caselle di controllo controllate e finestra di dialogo di revisione basata su portal.
svelte
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
Si tratta di variabili --app-* originali, non di una palette ufficiale di Bits.
Sono inclusi stili per il focus e per il movimento ridotto.
Solo l’overlay usa un’altezza massima relativa alla viewport.
04
Sistema di design Bits UI Configurazione dell’agente
Punto di partenza per l’implementazione
Verificato con Bits UI 2.19.5 e Svelte 5.57.1. È necessario il foglio di stile originale completo; Bits UI non fornisce colori predefiniti né un layout di pagina.
javascript
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install [email protected][email protected]
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Usa Bits UI 2.19.5 e Svelte 5 per realizzare l’interfaccia di revisione manuale fornita. Mantieni sei controlli in tre sezioni Accordion, ricava gli stati checked/indeterminate del controllo generale dalle singole risposte e conserva le risposte quando le sezioni vengono compresse. Componi tutte le parti di Dialog per la revisione, consentendo di esaminare anche una checklist incompleta e disattivando Salva finché tutti e sei i controlli non sono selezionati. Ogni modifica a una risposta annulla il feedback di salvataggio; Cancella tutto ripristina l’espansione iniziale e chiude la revisione. Includi CSS completo e descrivi i risultati come controlli locali selezionati da chi legge, non come certificazione automatica dell’accessibilità.
05
Sistema di design Bits UI Fonti e ambito
Bits UI 2.19.5 con Svelte 5.57.1. Token e illustrazioni originali dell’applicazione. È una checklist manuale con stato locale, non un audit o una certificazione automatica dell’accessibilità.
