Bits UI stellt Headless-Svelte-Komponenten bereit, die sich über native Bestandteile und den Zustand von Svelte 5 zusammensetzen lassen. Das Beispiel kombiniert eine aus dem Gesamtzustand abgeleitete Checkbox mit gemischtem Zustand, unabhängig voneinander ausklappbare Akkordeonbereiche und einen Dialog für Bewertungen auf Basis eines Portals. Die vollständige Konfiguration der Gestaltung ist ebenfalls enthalten.
Bits UI-Designsystem: Vorschau der Benutzeroberfläche
Markieren Sie eine einzelne Prüfung, untersuchen Sie den gemischten Status der Gesamtprüfung, sehen Sie sich den unvollständigen Fortschritt an und schließen Sie anschließend die lokale Checkliste ab und speichern Sie sie.
Bits UI 2.19.5 Checkbox, Accordion und Dialog mit Svelte 5.57.1. Alle visuellen Styles sind eigens gestaltet. · Implementierungsreferenz
02
Bits UI-Designsystem: Designreferenz
Bits UI 2.19.5 mit Svelte 5.57.1. Bits UI ist headless: Alle Farben, Typografie- und Abstandsangaben unter --app-* sind Teil der expliziten, eigens gestalteten Konfiguration dieses Beispiels und keine offiziellen Bits UI-Design-Tokens. Native Datenattribute und Komponenten-Props sind separat gekennzeichnet.
Bits UI-Designsystem: Native Teile mit dem Svelte-5-Status zusammensetzen
Native Teile mit dem Svelte-5-Status zusammensetzen
Die Checkliste verwendet $state für die einzelnen Antworten, die IDs der aufgeklappten Abschnitte und die Sichtbarkeit des Dialogs. Ein mit $derived berechneter Abschlusszähler speist sowohl den sichtbaren Fortschritt als auch das Kontrollkästchen für die Gesamtmarkierung. So liegt die maßgebliche Datenquelle in einem einzigen Svelte-Modell, während Bits UI die native Interaktion für jede Komponente bereitstellt.
Checkbox, Accordion und Dialog werden aus ihren jeweiligen Teilen zusammengesetzt. Der Prüfungsdialog muss die Antworten der Checkliste nicht verwalten, und ein Accordion muss diese Antworten beim Schließen nicht verwerfen. Diese Trennung ist ein guter Ausgangspunkt für ein Formular mit mehreren Abschnitten: Das Modell bleibt erhalten, auch wenn sich ändert, welche Teile der Benutzeroberfläche sichtbar sind.
Bits UI-Designsystem: Svelte-5-Komponenten und Styling-Quellen gemeinsam verwenden
Svelte-5-Komponenten und Styling-Quellen gemeinsam verwenden
Das Beispiel verwendet Svelte-5-Runen: $state für Gruppen, aufgeklappte Abschnitte, Dialogsichtbarkeit und Speicherstatus; $derived für den Abschlusszähler. Bits UI 2.19.5 wird direkt importiert. Für dieses eigens gestaltete Erscheinungsbild sind weder ein Tailwind-Plugin noch ein Theme-Provider oder eine Symbolbibliothek erforderlich.
Die vollständigen Dateien App.svelte und style.css funktionieren in einem standardmäßigen Vite-Svelte-Projekt. Der Einstiegspunkt verwendet mount aus Svelte anstelle des älteren Konstruktors new App. Behalten Sie beim Übertragen des Beispiels die Runen-Syntax der Komponente und die Abhängigkeit von Bits UI 2.19.5 zusammen; die hier gezeigten Bindings und Callbacks gehören nicht zu einer älteren Svelte-Komponenten-API.
Bits UI-Designsystem: Einen echten gemischten Status aus den einzelnen Kontrollkästchen ableiten
Einen echten gemischten Status aus den einzelnen Kontrollkästchen ableiten
Sechs boolesche Prüfungen sind in drei Gruppen unterteilt. Das übergeordnete Kontrollkästchen ist nur dann aktiviert, wenn alle sechs Prüfungen erledigt sind, und im Zwischenzustand, wenn eine bis fünf Prüfungen erledigt sind. Sein onCheckedChange-Callback aktualisiert alle Prüfungen. Dadurch wird der Mischzustand berechnet, statt als separates Flag gespeichert zu werden, das nicht mehr mit den Prüfungen übereinstimmen könnte.
Einzelne Steuerelemente rufen eine kleine Änderungsfunktion auf, die ihr Modell aktualisiert und gespeicherte Rückmeldungen verwirft. Das gerenderte native Kontrollkästchen des übergeordneten Elements setzt aria-checked=mixed, sobald eine Prüfung ausgewählt wurde. Das Stylesheet reagiert auf data-state=checked und data-state=indeterminate, sodass Verhalten und Darstellung an denselben nativen Zustand gekoppelt bleiben.
Wähle die erste Prüfung zum Fokusindikator aus und untersuche den Strich im übergeordneten Kontrollkästchen.
Öffne die Prüfliste und bestätige, dass „Abgeschlossene Prüfung speichern“ deaktiviert ist.
Kehre zurück, markiere alle Prüfungen und speichere den vollständigen lokalen Stand.
Bits UI-Designsystem: Unabhängige Abschnitte ermöglichen, ohne ihre Antworten zu verlieren
Unabhängige Abschnitte ermöglichen, ohne ihre Antworten zu verlieren
Accordion.Root verwendet type=multiple und ein gebundenes Array mit den IDs der geöffneten Gruppen. Zu Beginn sind alle Abschnitte geöffnet. Die Bereiche zur Formularprüfung und zum Ergebnisfeedback lassen sich unabhängig voneinander öffnen. Beim Zuklappen eines Abschnitts bleiben seine Prüfungen erhalten, weil ihre Werte im übergeordneten Zustand gespeichert sind.
Jeder Trigger zeigt erneut die Anzahl der abgeschlossenen Prüfungen an, damit der Fortschritt auch bei zugeklappten Inhalten sichtbar bleibt. Die nativen Teile Header, Trigger und Content erhalten die erwartete Beziehung und das gewohnte Tastaturverhalten. Das Pluszeichen dreht sich entsprechend dem data-state des Triggers. Die Erweiterung wird nicht über einen separaten Click-Handler gesteuert, und Einstellungen für reduzierte Bewegung werden berücksichtigt.
Bits UI-Designsystem: Den vollständigen Dialogaufbau zusammensetzen und den Fokus verwalten lassen
Den vollständigen Dialogaufbau zusammensetzen und den Fokus dem Dialog überlassen
Die Prüfung verwendet Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description und Close. Titel und Beschreibung sind tatsächliche native Teile, sodass Bits UI ihre barrierefreien Beziehungen herstellen kann. Das Portal platziert das Overlay außerhalb des normalen Layoutflusses der Prüfliste.
Der Inhalt hat eine begrenzte responsive Breite und für das Overlay eine maximale Höhe, bei deren Überschreitung ein Scrollbalken angezeigt wird. Mit Escape lässt sich der Dialog schließen, ohne die Prüfliste zu leeren. Belasse den Trigger als Fokus-Rücksprungziel, statt ihn beim Öffnen des Overlays zu entfernen.
Bits UI-Designsystem: Visuelle Regeln der Anwendung explizit festlegen und wiederverwenden
Die visuellen Regeln der Anwendung explizit und wiederverwendbar festlegen
CSS bildet die nativen Zustände „aktiviert“ und „Zwischenzustand“ auf dieselbe Aktionsrolle ab, verwendet dafür aber unterschiedliche Symbole. Eine eigene Fokusrolle kennzeichnet die aktuelle Tastaturposition. So kann ein Steuerelement sichtbar ausgewählt bleiben und zugleich anzeigen, wo die nächste Tastaturaktion ausgeführt wird.
Die benannte Abstandsskala umfasst vier, acht, zwölf, sechzehn, vierundzwanzig und zweiunddreißig Pixel. Auf Desktop-Bildschirmen verwenden Bereiche den Wert vierundzwanzig Pixel, auf schmalen Bildschirmen sechzehn Pixel. Die Spezifikationstabelle dokumentiert diese konkreten Werte als ursprüngliche Konfiguration, damit sie sich reproduzieren oder ersetzen lassen und nicht fälschlich als Garantie eines Pakets verstanden werden.
Bits UI-Designsystem: Eine manuelle Markierung von einem automatisierten Testergebnis unterscheiden
Eine manuelle Markierung von einem automatisierten Testergebnis unterscheiden
Die Prüfliste hält fest, was Leserinnen und Leser selbst markiert haben. Sie untersucht keine andere Seite, führt keine Tastaturtests aus und bestätigt keine Konformität mit Barrierefreiheitsstandards. Sowohl der Einführungstext als auch die Beschreibung der Prüfung machen diesen Umfang deutlich. Das ist wichtig, weil die sechs Prüfungen tatsächliche Aspekte der Barrierefreiheit betreffen.
Die Schaltfläche „Speichern“ ist deaktiviert, bis alle sechs Prüfungen markiert sind. Der gespeicherte Satz hält fest, dass die lesende Person alle sechs Prüfungen markiert hat und das Ergebnis lokal ist. Eine unvollständige Prüfung lässt sich weiterhin öffnen, um fehlende Punkte anzusehen, führt aber nicht zu einer Meldung über eine abgeschlossene Prüfung. So bleiben die Zustandsübergänge des Beispiels aussagekräftig.
Bits UI-Designsystem: Abschlussmeldungen löschen, sobald sich die zugrunde liegenden Angaben ändern
Abschlussmeldungen löschen, sobald sich die Nachweise ändern
Bei jeder Änderung eines einzelnen oder des übergeordneten Kontrollkästchens wird der gespeicherte Zustand gelöscht. So bleibt eine Abschlussbestätigung nicht erhalten, wenn eine Prüfung wieder abgewählt wird. Die Aktion „Alles löschen“ stellt außerdem den anfangs geöffneten Abschnitt wieder her und schließt den Prüfdialog. Damit kehren alle zugehörigen Zustände in einen bekannten Ausgangszustand zurück.
Der Statusbereich befindet sich außerhalb des Overlays. Daher bleibt die gespeicherte Meldung im Dokument, nachdem der Dialog geschlossen wurde. Sie beschreibt den lokalen Zustand der Seite und lässt nicht vermuten, dass ein Bericht übermittelt wurde. Beim Neuladen wird die Prüfliste verworfen – passend für diese in sich geschlossene Demonstration.
Bits UI-Designsystem: Komponentenbestandteile mit sichtbaren Beschriftungen verknüpfen
Komponentenbestandteile mit sichtbaren Beschriftungen verknüpfen
Jedes Kontrollkästchen hat eine stabile ID und eine zugehörige sichtbare Beschriftung. Der aktivierte Zustand oder Zwischenzustand wird durch das native Steuerelement dargestellt; Häkchen und Strich sind dekorativ. Verknüpfe sowohl den booleschen Wert „aktiviert“ als auch den abgeleiteten Zwischenzustand mit dem übergeordneten Kontrollkästchen, damit eine teilweise Auswahl nicht als gewöhnlich nicht ausgewählter Eintrag angesagt wird.
Dialog.Title und Dialog.Description stellen über den nativen Aufbau den Namen und die Beschreibung der Prüfung bereit. Das Portal trennt das Overlay vom Layout des Akkordeons, während Dialog.Close die ausdrückliche Schließaktion bleibt. Der Statusbereich außerhalb des Overlays enthält das gespeicherte Ergebnis auch nach dem Schließen des Overlays, sodass es nicht mit dem Dialoginhalt verloren geht.
Verknüpfe die sichtbare Beschriftung mit dem zugehörigen Steuerelement.
Behalte nach dem Anwenden eigener Stile einen deutlich sichtbaren Fokusrahmen bei.
Entferne beim Anpassen des Dialogstils weder Titel- noch Beschreibungselemente.
Native Bits UI-Zusammensetzung mit $state/$derived-Modellen, gesteuerten Kontrollkästchen und einem Prüfdialog auf Basis eines Portals.
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>
Dies sind selbst definierte Variablen --app-*, keine offizielle Bits-Farbpalette.
Stile für Fokus und reduzierte Bewegung sind enthalten.
Nur für das Overlay wird eine maximale Höhe relativ zum Ansichtsfenster festgelegt.
04
Bits UI-Designsystem: Agent einrichten
Ausgangspunkt für die Implementierung
Verifiziert mit Bits UI 2.19.5 und Svelte 5.57.1. Das vollständige ursprüngliche Stylesheet ist erforderlich; Bits UI liefert weder Standardfarben noch ein Seitenlayout.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende Bits UI 2.19.5 und Svelte 5, um die bereitgestellte manuelle Prüfung der Benutzeroberfläche umzusetzen. Behalte sechs Prüfpunkte in drei Accordion-Abschnitten bei, leite den Sammelstatus „aktiviert“/„teilweise aktiviert“ aus den einzelnen Antworten ab und bewahre Antworten beim Zuklappen von Abschnitten. Setze für die Überprüfung alle Dialog-Bestandteile zusammen. Eine unvollständige Prüfung soll möglich sein, während „Speichern“ deaktiviert bleibt, bis alle sechs Punkte markiert sind. Jede Antwortänderung macht gespeichertes Feedback ungültig; „Alle löschen“ setzt die anfängliche Abschnittsaufklappung wieder her und schließt die Überprüfung. Binde das vollständige CSS ein und beschreibe die Ergebnisse als lokal markierte Prüfungen durch die lesende Person, nicht als automatisierte Barrierefreiheitszertifizierung.
05
Quellen und Umfang des Bits UI-Designsystems
Bits UI 2.19.5 mit Svelte 5.57.1. Ursprüngliche Anwendungstokens und Illustrationen. Dies ist eine manuelle Checkliste mit lokalem Status, kein automatisiertes Barrierefreiheits-Audit und keine Zertifizierung.
