Système de composants sans interface · Nouvelle ressource
Système de design Bits UI.
Bits UI fournit des composants Svelte sans interface prédéfinie, composés à l’aide d’éléments natifs et de l’état de Svelte 5. L’exemple associe une case à cocher à état mixte calculé, des sections d’accordéon dépliables indépendamment et une boîte de dialogue de révision basée sur un portail, avec la configuration de style complète.
Guide OpenDesign9 chapitres28 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface du système de design Bits UI
Cochez un élément, examinez l’état mixte du contrôle global, vérifiez la progression incomplète, puis terminez et enregistrez la liste de contrôle locale.
Case à cocher, accordéon et boîte de dialogue de Bits UI 2.19.5 avec Svelte 5.57.1. Tous les styles visuels sont originaux. · Référence de mise en œuvre
02
Référence de conception du système de design Bits UI
Bits UI 2.19.5 avec Svelte 5.57.1. Bits UI est sans interface imposée : toutes les valeurs de couleur, de typographie et d’espacement --app-* sont des configurations originales explicites fournies avec cet exemple, et non des jetons de design officiels de Bits UI. Les attributs de données natifs et les propriétés des composants sont indiqués séparément.
Système de design Bits UI : composer des parties natives avec l’état de Svelte 5
Composer des parties natives avec l’état de Svelte 5
La liste de contrôle utilise $state pour les réponses individuelles, les identifiants des sections développées et la visibilité de la boîte de dialogue. Un décompte de complétion calculé avec $derived alimente à la fois la progression affichée et la case à cocher globale. La source de vérité réside ainsi dans un modèle Svelte unique, tandis que Bits UI fournit les interactions natives de chaque composant.
La case à cocher, l’accordéon et la boîte de dialogue sont composés à partir de leurs propres parties. La boîte de dialogue de vérification n’a pas à gérer les réponses de la liste de contrôle, et l’accordéon n’a pas à les effacer lorsqu’il se ferme. Cette séparation constitue un bon point de départ pour un formulaire à plusieurs sections : le modèle reste intact même lorsque les parties visibles de l’interface changent.
Système de design Bits UI : utiliser ensemble les sources des composants et des styles de Svelte 5
Utiliser ensemble les sources des composants et des styles de Svelte 5
L’exemple utilise les runes de Svelte 5 : $state pour les groupes, les sections développées, la visibilité de la boîte de dialogue et l’état enregistré ; $derived pour le décompte de complétion. Bits UI 2.19.5 est importé directement. Aucun plugin Tailwind, fournisseur de thème ni bibliothèque d’icônes n’est nécessaire pour ce traitement visuel original.
Les fichiers complets App.svelte et style.css fonctionnent dans un projet Svelte standard créé avec Vite. Le point d’entrée utilise mount de Svelte, plutôt que l’ancien constructeur new App. Lors du transfert de cet exemple, conservez la syntaxe runes du composant avec la dépendance Bits UI 2.19.5 : les liaisons et les rappels présentés ici ne correspondent pas à un ancien composant Svelte API.
Système de design Bits UI Déduire un véritable état mixte à partir des cases individuelles
Déduire un véritable état mixte à partir des cases individuelles
Six cases booléennes sont réparties en trois groupes. Le contrôle global est coché uniquement lorsque les six cases le sont, et indéterminé lorsque le nombre de cases cochées est compris entre un et cinq. Son rappel onCheckedChange met à jour toutes les cases : l’état mixte est ainsi calculé, plutôt que stocké dans un indicateur distinct susceptible de se désynchroniser.
Les contrôles individuels appellent une petite fonction de modification qui met à jour leur modèle et invalide le retour de sauvegarde. La case à cocher globale native affichée expose aria-checked=mixed après la sélection d’une seule case. La feuille de style réagit à data-state=checked et data-state=indeterminate, afin que le comportement et la présentation reposent sur le même état natif.
Cochez la première vérification de l’indicateur de focus et observez le tiret du contrôle global.
Ouvrez la liste de vérification et confirmez que le bouton Enregistrer la vérification terminée est désactivé.
Revenez en arrière, cochez toutes les cases et enregistrez l’instantané local complet.
Système de design Bits UI Permettre d’ouvrir plusieurs sections sans perdre leurs réponses
Autoriser des sections indépendantes sans perdre leurs réponses
Accordion.Root utilise type=multiple et un tableau lié contenant les identifiants des groupes ouverts. La navigation au clavier commence avec les sections ouvertes, tandis que Form correction et Result feedback peuvent être ouverts indépendamment. Le repli d’une section n’efface pas ses cases, car leurs valeurs résident dans l’état parent.
Chaque déclencheur répète son propre décompte de cases terminées, de sorte que la progression reste visible lorsque le contenu est replié. Les éléments natifs Header, Trigger et Content préservent les relations attendues et le comportement au clavier. Le marqueur plus pivote en fonction de data-state du déclencheur et respecte les préférences de réduction des animations, sans piloter l’ouverture au moyen d’un gestionnaire de clic distinct.
Système de design Bits UI Composer l’anatomie complète d’une boîte de dialogue et lui confier la gestion du focus
Composer l’anatomie complète de la boîte de dialogue et lui confier la gestion du focus
La vérification utilise Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description et Close. Le titre et la description sont de véritables éléments natifs, ce qui permet à Bits UI d’établir leurs relations d’accessibilité. Le portail place la superposition en dehors du flux normal du panneau de vérification.
Le contenu a une largeur responsive limitée et une hauteur maximale qui ne s’applique qu’à la superposition, avec un défilement possible pour les vérifications plus longues. La touche Échap ferme la boîte de dialogue sans effacer la liste. Gardez le déclencheur disponible comme cible de retour du focus au lieu de le supprimer à l’ouverture de la superposition.
Système de design Bits UI Rendre explicites et réutilisables les règles visuelles de l’application
Rendre explicites et réutilisables les règles visuelles de l’application
CSS associe les états natifs coché et indéterminé au même rôle d’action, mais utilise des glyphes différents pour chacun. Un rôle de focus distinct correspond à la position du clavier : un contrôle peut donc rester visiblement sélectionné tout en indiquant l’endroit où aura lieu la prochaine action au clavier.
L’échelle d’espacement nommée comprend quatre, huit, douze, seize, vingt-quatre et trente-deux pixels. Les panneaux utilisent la valeur de vingt-quatre pixels sur ordinateur et celle de seize pixels sur les écrans étroits. Le tableau de spécifications documente ces choix concrets comme une configuration d’origine, afin que les lecteurs puissent les reproduire ou les remplacer sans confondre le style de démonstration avec une garantie du package.
Système de design Bits UI Distinguer une validation manuelle d’un résultat de test automatisé
Distinguer une validation manuelle du résultat d’un test automatisé
La liste de vérification consigne les éléments cochés par le lecteur. Elle n’inspecte pas une autre page, n’exécute pas de tests au clavier et ne certifie pas la conformité en matière d’accessibilité. Le texte d’introduction et la description de la vérification précisent tous deux cette portée, ce qui est nécessaire puisque les six éléments portent sur des comportements d’accessibilité réels.
Le bouton Enregistrer est désactivé tant que les six cases ne sont pas cochées. Le message de sauvegarde indique que le lecteur a coché les six cases et que le résultat est conservé localement. Il est toujours possible d’ouvrir une vérification partielle pour examiner les éléments manquants, mais elle ne peut pas afficher de message de vérification terminée. Cette distinction donne du sens aux transitions d’état de l’exemple.
Système de design Bits UI Effacer les messages de confirmation dès que les éléments justificatifs changent
Effacer les messages de réussite dès que les éléments de preuve changent
Toute modification individuelle ou globale efface l’état de sauvegarde. Ainsi, une confirmation de fin ne reste pas affichée après le retrait d’une coche. L’action Tout effacer rétablit également la section initialement ouverte et ferme la boîte de dialogue de vérification, ramenant chaque état associé à un point de départ connu.
La région d’état se trouve en dehors de la superposition : le message de sauvegarde reste donc dans le document après la fermeture de la boîte de dialogue. Il décrit l’état local de la page et ne laisse pas entendre qu’un rapport a été envoyé. Un rechargement efface la liste de vérification, ce qui convient à cette démonstration autonome.
Système de design Bits UI Relier les éléments du composant aux libellés visibles
Relier les éléments du composant aux libellés visibles
Chaque case à cocher possède un identifiant stable et un libellé visible associé. Son état coché ou indéterminé est représenté par le contrôle natif ; la coche et le tiret sont décoratifs. Reliez à la fois la valeur booléenne checked et la valeur indeterminate calculée au contrôle global, afin qu’une sélection partielle ne soit pas annoncée comme un simple élément non coché.
Dialog.Title et Dialog.Description fournissent le nom et l’explication de la vérification grâce à l’anatomie native. Le portail sépare la superposition de la mise en page de l’accordéon, tandis que Dialog.Close reste l’action explicite de fermeture. La région d’état située à l’extérieur conserve le résultat de la sauvegarde après la fermeture de la superposition, qui ne le fait donc pas disparaître avec le contenu de la boîte de dialogue.
Associez le libellé visible à son contrôle.
Conservez un anneau de focus bien visible après l’application de styles personnalisés.
Ne supprimez pas les éléments de titre ou de description lors de la personnalisation d’une boîte de dialogue.
Composition native Bits UI avec modèles $state/$derived, cases à cocher contrôlées et boîte de dialogue de vérification utilisant un portail.
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>
Il s’agit des variables d’origine --app-*, et non d’une palette officielle de Bits.
Les styles de focus et de réduction des animations sont inclus.
Seule la superposition utilise une hauteur maximale relative à la fenêtre d’affichage.
04
Configuration de l’agent du système de design Bits UI
Point de départ de l’implémentation
Vérifié avec Bits UI 2.19.5 et Svelte 5.57.1. La feuille de style d’origine complète est requise ; Bits UI ne fournit ni couleurs par défaut ni mise en page.
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 pour votre projet
Prompt pour l’agent IA
Utilisez Bits UI 2.19.5 et Svelte 5 pour créer l’interface de vérification manuelle fournie. Répartissez six vérifications dans trois sections Accordion, calculez les états global coché et indéterminé à partir des réponses individuelles et conservez les réponses lorsque les sections sont repliées. Assemblez toutes les parties de Dialog pour la vérification, autorisez une inspection incomplète et désactivez Enregistrer tant que les six éléments ne sont pas cochés. Toute modification d’une réponse invalide les commentaires enregistrés ; Tout effacer rétablit l’état initial des sections et ferme la vérification. Incluez le CSS complet et présentez les résultats comme des vérifications locales cochées par le lecteur, et non comme une certification automatisée de l’accessibilité.
05
Sources et périmètre du système de design Bits UI
Bits UI 2.19.5 avec Svelte 5.57.1. Jetons d’application et illustrations d’origine. Il s’agit d’une liste de vérification manuelle avec état local, et non d’un audit ou d’une certification automatisés de l’accessibilité.
