# Bits UI-Designsystem

## 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-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.

### Eigene semantische CSS-Konfiguration

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --app-canvas | #f4f3f8 | Seitenhintergrund. |
| --app-surface | #ffffff | Oberfläche des Bedienfelds und Dialogs. |
| --app-ink | #2d2938 | Haupttext. |
| --app-muted | #746d80 | Unterstützender Text. |
| --app-line | #e3dfeb | Trennlinien und Rahmen. |
| --app-action | #604c88 | Markierte Steuerelemente und Hauptaktionen. |
| --app-on-action | #fff | Text auf Aktionen. |
| --app-focus | #9a80ce | Sichtbarer Tastaturfokus. |
| --app-soft | #eee8f7 | Optionale dezente Oberflächenrolle. |
### Eigene Abstände und Geometrie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --app-space-1 | 4px | Kleinste benannte Abstandseinheit. |
| --app-space-2 | 8px | Kompakter Abstand. |
| --app-space-3 | 12px | Abstand zwischen Steuerelement und Beschriftung. |
| --app-space-4 | 16px | Innenabstand des schmalen Bedienfelds. |
| --app-space-6 | 24px | Innenabstand des Bedienfelds und Spaltenabstand auf dem Desktop. |
| --app-space-8 | 32px | Seitenabstand auf dem Desktop. |
| Checkbox geometry | 22×22px; 5px radius; 1px border | Explizites, eigens gestaltetes Steuerelement-Styling. |
| Focus ring | 3px solid #9a80ce; 3px offset | Wird auf den Tastaturfokus einer Schaltfläche angewendet. |
| Dialog width | min(440px, 100% − 28px) | Explizite Geometrie der responsiven Überlagerung. |
| Dialog maximum height | 100vh − 28px with overflow:auto | Ansichtsfensterbegrenzung nur für die Überlagerung; keine Rückkopplung über die Seitenhöhe. |
| Type hierarchy | 34px title / 29px mobile; 16px accordion; 13px checks; 12px guidance | Eigene Hierarchie mit Systemschriften. |
### Verträge nativer Komponenten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Checkbox.Root checked | boolean | Abgeschlossener oder unvollständiger Status. |
| Checkbox.Root indeterminate | boolean | Das Steuerelement für die Gesamtmarkierung zeigt einen gemischten Status an, wenn einige Prüfungen markiert sind. |
| Checkbox data-state | checked / unchecked / indeterminate | Wird direkt vom Stylesheet verwendet. |
| Accordion.Root type | multiple | Mehrere Prüfungsabschnitte können gleichzeitig geöffnet bleiben. |
| Accordion value | string[] | Svelte-gebundene Liste der IDs aufgeklappter Gruppen. |
| Dialog.Root open | boolean, two-way bound | Steuert die Sichtbarkeit der Prüfung. |
| Dialog.Title / Description | Native title and description relationships | Manuelle doppelte ARIA-IDs sind nicht erforderlich. |
| Dialog.Portal | Overlay and content rendered outside the normal panel | Verhindert Abschneiden durch den Dokumentfluss des Bedienfelds. |
## Vollständige Anleitung zum Bits UI-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

1. Wähle die erste Prüfung zum Fokusindikator aus und untersuche den Strich im übergeordneten Kontrollkästchen.

2. Öffne die Prüfliste und bestätige, dass „Abgeschlossene Prüfung speichern“ deaktiviert ist.

3. Kehre zurück, markiere alle Prüfungen und speichere den vollständigen lokalen Stand.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## Bits UI-Designsystem: Komponentenbeispiele

### Vollständige Prüfliste in Svelte 5

Native Bits UI-Zusammensetzung mit $state/$derived-Modellen, gesteuerten Kontrollkästchen und einem Prüfdialog auf Basis eines Portals.

```
<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>
```

Code-Referenz

- Das übergeordnete Steuerelement leitet sowohl den aktivierten Zustand als auch den Zwischenzustand aus den sechs einzelnen Prüfungen ab.

- Das Speichern setzt den Abschluss aller Prüfungen voraus, nicht das Öffnen des Dialogs.

- Dieses manuelle Arbeitsblatt führt kein Barrierefreiheitsaudit aus.

### Vollständige ursprüngliche visuelle Konfiguration

Benannte semantische Farben, Abstandsskala, native data-state-Selektoren und responsives Overlay-Styling.

```
:root{--app-canvas:#f4f3f8;--app-surface:#ffffff;--app-ink:#2d2938;--app-muted:#746d80;--app-line:#e3dfeb;--app-action:#604c88;--app-on-action:#fff;--app-focus:#9a80ce;--app-soft:#eee8f7;--app-radius:12px;--app-space-1:4px;--app-space-2:8px;--app-space-3:12px;--app-space-4:16px;--app-space-6:24px;--app-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:var(--app-canvas);color:var(--app-ink)}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid var(--app-focus);outline-offset:3px}.check-shell{max-width:1080px;margin:auto;padding:var(--app-space-8)}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--app-muted)}h1{font-size:34px;line-height:1.15;max-width:710px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;max-width:640px;color:var(--app-muted)}.check-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--app-space-6);margin-top:28px}.check-panel{background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;padding:var(--app-space-6);min-width:0}.bulk{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;padding-bottom:24px}.count{margin-left:auto;color:var(--app-muted);font-size:12px}.checkbox{width:22px;height:22px;flex-shrink:0;border:1px solid #aaa1ba;background:white;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.checkbox[data-state=checked],.checkbox[data-state=indeterminate]{background:var(--app-action);border-color:var(--app-action);color:var(--app-on-action)}.accordion{margin-bottom:24px}.accordion-item{border-top:1px solid var(--app-line)}.accordion-item:last-child{border-bottom:1px solid var(--app-line)}.accordion-heading{margin:0;font-size:16px}.accordion-trigger{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:20px 0;color:var(--app-ink);font-weight:600}.accordion-trigger small{display:block;font-weight:400;font-size:11px;color:var(--app-muted);margin-top:6px}.plus{font-size:23px;font-weight:400;transition:transform .15s}.accordion-trigger[data-state=open] .plus{transform:rotate(45deg)}.accordion-content{padding:0 0 20px}.group-description{font-size:12px;line-height:1.6;color:var(--app-muted);margin:0 0 16px}.check-row{display:flex;align-items:flex-start;gap:12px;margin-top:14px}.check-row label{font-size:13px;line-height:1.6;cursor:pointer}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600}.primary{background:var(--app-action);color:var(--app-on-action)}.secondary{background:white;color:var(--app-ink);border-color:var(--app-line)}.reset{border:0;background:transparent;color:var(--app-muted);font-size:12px;padding:12px}.result{font-size:12px;line-height:1.6;color:var(--app-muted);margin:18px 0 0}.check-notes{min-width:0;padding:0 4px}.check-notes h2{font:400 29px/1.2 Georgia,serif}.check-notes>p:not(.eyebrow){font-size:13px;line-height:1.7;color:var(--app-muted)}.check-notes dl>div{padding:14px 0;border-top:1px solid var(--app-line)}.check-notes dt{font-size:13px;font-weight:600}.check-notes dd{font-size:12px;line-height:1.7;color:var(--app-muted);margin:5px 0 0}.focus-art{height:165px;background:#e6e0ef;border-radius:12px;position:relative;overflow:hidden;margin-bottom:24px}.focus-art span{position:absolute;width:140px;height:85px;left:35px;top:44px;background:white;border-radius:8px;transform:rotate(-9deg);box-shadow:0 0 0 6px #b3a3cd}.focus-art i{position:absolute;width:75px;height:13px;background:#b7adc6;left:60px;top:61px;transform:rotate(-9deg)}.focus-art b{position:absolute;width:72px;height:28px;background:#695587;left:87px;top:91px;border-radius:5px;transform:rotate(-9deg)}.overlay{position:fixed;inset:0;background:#21193180;z-index:20}.dialog{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;background:white;padding:24px;border-radius:14px;box-shadow:0 20px 80px #23193640}.dialog-title{font-size:23px;margin:0 0 12px}.dialog-description,.remaining{font-size:13px;line-height:1.7;color:var(--app-muted)}.review-summary{padding:0;list-style:none}.review-summary li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-line);font-size:13px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}@media(max-width:740px){.check-layout{grid-template-columns:minmax(0,1fr)}.check-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.check-shell{padding:14px}.check-panel,.dialog{padding:16px}.check-panel>.primary,.dialog-actions>*{width:100%}}@media(prefers-reduced-motion:reduce){.plus{transition:none}}
```

Code-Referenz

- 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.

## 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.

```
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install svelte@5.57.1 bits-ui@2.19.5
// 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

```
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.
```

## 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.

- Erste Schritte Svelte-Einrichtung und Paketintegration.

- Gestaltung Abgrenzung des Headless-Stylings und Datenattribute.

- Kontrollkästchen Aktivierter, teilweise aktivierter und kontrollierter Status.

- Accordion Mehrfaches Aufklappen und native Struktur.

- Dialog Portal, Titel, Beschreibung, Fokus und Schließen.

- Statusverwaltung Bindings und kontrollierte Werte.

## Weiterführende Ressourcen zum Bits UI-Designsystem

### Bootstrap

Verwende Bootstrap 5.3.8 mit seiner tatsächlichen Abstandsskala, semantischen Farben, responsiven Rasterdarstellung und Komponenten-APIs. Probiere ein funktionierendes Reservierungsformular, eine Fehlerübersicht, einen Tabellenfilter, ein modales Fenster und einen Farbschema-Umschalter aus und verwende anschließend den dokumentierten Code erneut.

### Bulma

Erstelle einen redaktionellen Arbeitsplatz mit der tatsächlichen Feld- und Steuerungsstruktur von Bulma, responsiven Spalten, semantischen Farbmodifikatoren und CSS-Variablen sowie vollständigem Validierungscode.

### Chakra UI

Eine Referenz zu Chakra UI v3 für Tokens, semantische Farbrollen, Rezepte und zusammengesetzte Formular-Komponenten. Sieh dir die tatsächlichen Abstands- und Schriftgrößenskalen an und probiere anschließend ein natives Formular für ein Arbeitsbereichsprofil mit Validierung, Simulation eines fehlgeschlagenen Speichervorgangs und heller/dunkler Darstellung aus.


- [Implementierungsreferenz](https://www.bits-ui.com/docs/components/checkbox)
- [Quelle](https://www.bits-ui.com/docs/styling)
- [Quelle](https://www.bits-ui.com/docs/components/dialog)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/styling)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/getting-started)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/components/checkbox)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/components/accordion)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/components/dialog)
- [Unterstützende Spezifikation lesen](https://www.bits-ui.com/docs/state-management)
- [Code-Referenz](https://www.bits-ui.com/docs/components/checkbox)
- [Code-Referenz](https://www.bits-ui.com/docs/styling)
- [Erste Schritte Svelte-Einrichtung und Paketintegration.](https://www.bits-ui.com/docs/getting-started)
- [Gestaltung Abgrenzung des Headless-Stylings und Datenattribute.](https://www.bits-ui.com/docs/styling)
- [Kontrollkästchen Aktivierter, teilweise aktivierter und kontrollierter Status.](https://www.bits-ui.com/docs/components/checkbox)
- [Accordion Mehrfaches Aufklappen und native Struktur.](https://www.bits-ui.com/docs/components/accordion)
- [Dialog Portal, Titel, Beschreibung, Fokus und Schließen.](https://www.bits-ui.com/docs/components/dialog)
- [Statusverwaltung Bindings und kontrollierte Werte.](https://www.bits-ui.com/docs/state-management)