# Web Awesome Designsystem

## Web Awesome Designsystem – Oberflächenvorschau

Passen Sie Radius- und Abstandsskalen an, wechseln Sie das Erscheinungsbild des Beispiels, wählen Sie eine Region aus und überprüfen Sie einen lokalen Arbeitsbereichsnamen.

## Web Awesome Designreferenz des Designsystems

Das Standard-Theme CSS von Web Awesome 3.14.0 wurde im installierten Paket geprüft. Die Farbeinträge unten sind semantische Aliase; ihre Verweise auf die Farbpalette bleiben erhalten, statt durch vermutete Hex-Werte ersetzt zu werden. Die aus der Skala abgeleiteten Pixelbeispiele setzen einen Root-Wert von 16px und scale=1 voraus.

### Semantische Rollen für Oberflächen und Text

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --wa-color-surface-default | white | Hauptfläche des Beispiels. |
| --wa-color-surface-raised | white | Erhöhte Ebene. |
| --wa-color-surface-lowered | var(--wa-color-neutral-95) | Hintergrund der Codeausgabe. |
| --wa-color-surface-border | var(--wa-color-neutral-90) | Containerbegrenzung. |
| --wa-color-text-normal | var(--wa-color-neutral-10) | Normaler Text. |
| --wa-color-text-quiet | var(--wa-color-neutral-40) | Sekundärer Text. |
| --wa-color-text-link | var(--wa-color-brand-40) | Link-Rolle. |
| --wa-color-brand-fill-loud | var(--wa-color-brand-50) | Fläche mit kräftiger Markenfarbe. |
| --wa-color-brand-on-loud | white | Text auf kräftiger Markenfläche. |
| --wa-color-brand-fill-quiet | var(--wa-color-brand-95) | Fläche für dezente Badge-Hintergründe. |
| --wa-color-brand-on-quiet | var(--wa-color-brand-40) | Text auf dezenter Markenfläche. |
### Abstände und Formen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --wa-space-scale | 1 | Multiplikator für Abstandstokens. |
| --wa-space-xs | calc(var(--wa-space-scale) * 0.5rem) | 8px bei Standardskalierung. |
| --wa-space-s | calc(var(--wa-space-scale) * 0.75rem) | 12px bei Standardskalierung. |
| --wa-space-m | calc(var(--wa-space-scale) * 1rem) | 16px bei Standardskalierung. |
| --wa-space-l | calc(var(--wa-space-scale) * 1.5rem) | 24px bei Standardskalierung. |
| --wa-space-xl | calc(var(--wa-space-scale) * 2rem) | 32px bei Standardskalierung. |
| --wa-space-2xl | calc(var(--wa-space-scale) * 2.5rem) | 40px bei Standardskalierung. |
| --wa-border-radius-scale | 1 | Multiplikator für skalierbare Radien. |
| --wa-border-radius-s | calc(var(--wa-border-radius-scale) * 0.1875rem) | 3px bei Standardskalierung. |
| --wa-border-radius-m | calc(var(--wa-border-radius-scale) * 0.375rem) | 6px bei Standardskalierung. |
| --wa-border-radius-l | calc(var(--wa-border-radius-scale) * 0.75rem) | 12px bei Standardskalierung. |
### Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --wa-font-family-body | ui-sans-serif, system-ui, sans-serif | Systemschrift ohne Serifen für Fließtext. |
| --wa-font-family-heading | var(--wa-font-family-body) | Alias für die Überschriften-Schriftfamilie. |
| --wa-font-family-code | ui-monospace, monospace | Monospace-Ausgabe. |
| --wa-font-size-scale | 1 | Multiplikator der Schriftgrößenskala. |
| --wa-font-size-m | calc(1rem * var(--wa-font-size-scale)) | 16px bei standardmäßigem Root-Wert und Skalierungsfaktor. |
| --wa-font-size-l | round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px) | 20px bei standardmäßigem Root-Wert und Skalierungsfaktor. |
| --wa-font-size-xl | round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px) | 25px bei standardmäßigem Root-Wert und Skalierungsfaktor. |
| --wa-font-size-2xl | round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px) | 32px bei standardmäßigem Root-Wert und Skalierungsfaktor. |
| --wa-line-height-condensed | 1.2 | Kompakte Titel und Labels. |
| --wa-line-height-normal | 1.6 | Normale Zeilenhöhe für Fließtext. |
### Aliase für Formularelemente

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --wa-form-control-background-color | var(--wa-color-surface-default) | Alias für die Eingabeoberfläche. |
| --wa-form-control-border-color | var(--wa-color-neutral-border-loud) | Rolle für die Eingabeumrandung. |
| --wa-form-control-border-radius | var(--wa-border-radius-m) | Radius-Alias für Felder. |
| --wa-form-control-label-color | var(--wa-color-text-normal) | Barrierefreie Label-Farbe. |
| --wa-form-control-hint-color | var(--wa-color-text-quiet) | Alias für die Hinweisfarbe. |
## Web Awesome Designsystem: vollständiger Leitfaden

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.

## Web Awesome Designsystem: benutzerdefinierte Elemente mit eigener Komponentengrenze

### Custom Elements mit eigener Komponentengrenze

> Web Awesome stellt registrierte benutzerdefinierte HTML-Elemente bereit, sodass keine React-Anwendung erforderlich ist. Nach dem Import von wa-input oder wa-select lassen sich die Elemente in gewöhnliches HTML einfügen und über ihre dokumentierten Eigenschaften und Ereignisse steuern. Diese Arbeitsumgebung bündelt Version 3.14.0 und verwendet ausschließlich Komponenten aus dem öffentlichen Paket.

Bei den sichtbaren Steuerelementen handelt es sich um die tatsächlichen benutzerdefinierten Elemente einschließlich ihrer Shadow-Root-Implementierung. Der umgebende Header, die Abschnitte und die Anzeige sind eigens für HTML erstellt. So lässt sich anhand des Beispiels beobachten, welche Gestaltungsentscheidungen über geerbte benutzerdefinierte Eigenschaften die Komponentengrenze überschreiten und welche zur Seitengestaltung gehören.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: semantische Farb-Aliase beibehalten

### Semantische Farb-Aliase beibehalten

Das Standard-Theme unterscheidet zwischen erhabenen, standardmäßigen und abgesenkten Oberflächen, normalem und zurückhaltendem Text sowie mehreren Paaren aus Markenfüllfarbe und darauf abgestimmter Textfarbe. Die Token-Anzeige verwendet die abgesenkte Oberfläche, das Hauptbeispiel die standardmäßige Oberfläche und das kleine Badge kombiniert brand-fill-quiet mit brand-on-quiet. Diese Rollen bleiben auch bei geändertem Erscheinungsbild aussagekräftig.

Die Referenz behält Aliase wie var(--wa-color-neutral-10) bei, statt jede Rolle einem vermuteten Hex-Wert zuzuordnen. Eine Palette kann sich ändern, während die semantische Zuordnung gültig bleibt. Wenn Sie eine starke Markenaktion anpassen, sollten Sie sowohl die Füllfarbe als auch die darauf abgestimmte Textfarbe berücksichtigen. Wird nur eine davon geändert, kann der Button-Text schwer lesbar werden.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: Skalierung ändern, ohne jede Komponente neu zu schreiben

### Die Skala anpassen, ohne jede Komponente neu zu schreiben

Die Radiusauswahl ändert --wa-border-radius-scale ausschließlich am Beispiel. Bei Skalierungsfaktor eins ergeben die standardmäßigen kleinen, mittleren und großen Radien bei einem Root-Wert von sechzehn Pixeln drei, sechs und zwölf Pixel. Bei Skalierungsfaktor null werden diese skalierbaren Ecken eckig; bei Skalierungsfaktor zwei verdoppeln sie sich. Die Pill- und Kreis-Tokens sind separate Konzepte und sollten nicht als Teil dieses Multiplikators betrachtet werden.

Die Abstandsauswahl ändert --wa-space-scale. Innenabstände, Lücken und Abstände in der Anzeige des Beispiels verwenden die offiziellen Abstandstokens, sodass sich ihre Verhältnisse gemeinsam ändern. Das bedeutet nicht, dass jede Abmessung jeder Komponente skaliert wird: Für die Größe der Steuerelemente einer Komponente gelten eigene Token-Beziehungen. Das Bearbeitungsfeld bleibt davon unberührt, damit der Vergleich beim Ändern des Beispiels stabil bleibt.

1. Wählen Sie „Eckig“ und prüfen Sie die Ecken des Eingabefelds, des Containers und der Anzeige.

2. Wählen Sie „Großzügige Abstände“ und vergleichen Sie die Lücken im Beispiel mit dem unveränderten Bearbeitungsfeld.

3. Setzen Sie die Standardwerte zurück, um beide Multiplikatoren und das Erscheinungsbild gemeinsam wiederherzustellen.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: Typografie-Tokens und eigens gewählte Überschriften

### Typografie-Tokens und ursprüngliche Überschriftenwahl

Die Standardschriftfamilie für Fließtext lautet ui-sans-serif, system-ui, sans-serif. Die Alias-Schriftfamilie für Überschriften verweist auf die Fließtextschriftfamilie, während für Code ui-monospace verwendet wird. Das Token für die normale Zeilenhöhe hat den Wert 1.6, das für die kompakte Zeilenhöhe 1.2. Das mittlere Schriftgrößen-Token entspricht einem rem multipliziert mit font-size-scale; größere Schriftgrößen verwenden gerundete Berechnungen. Die Tabelle zeigt diese Ausdrücke, statt ihre Abhängigkeiten zu verbergen.

Die Arbeitsumgebung selbst verwendet eine Überschrift mit 34px und eine Abschnittsüberschrift mit 23px. An einem lokalen Breakpoint von 700px wird die Seitenüberschrift verkleinert. Dabei handelt es sich ausdrücklich um eigene Seitenregeln. Die nativen Felder behalten das Label- und Hinweis-Styling der Bibliothek bei, sodass sich eine individuelle Seitenhierarchie mit der Standardtypografie der Komponenten vergleichen lässt.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: Anfangswerte, Eigenschaften und Änderungsereignisse

### Ausgangswerte, Eigenschaften und Änderungsereignisse

Jedes Auswahlfeld enthält wa-option-Elemente mit stabilen Werten. Bei den Standardoptionen wird das Attribut selected verwendet, wie es der aktuellen Anleitung für die initiale Auswahl entspricht. Laufzeitänderungen lesen die value-Eigenschaft des Auswahlfelds aus. Die Theme-Steuerelemente reagieren auf change-Ereignisse und aktualisieren benutzerdefinierte Eigenschaften von CSS; sie lesen keine Texte aus den dargestellten Optionsbeschriftungen aus.

Die Regionsauswahl ist ein reguläres Beispiel-Formularfeld und steuert keinen externen Speicherdienst. Der ausgewählte Wert wird in der lokalen Aktionsmeldung ausgegeben. Die Oberfläche erweckt nicht den Eindruck, dass durch die Auswahl von Europa Speicherplatz zugewiesen wird. Diese Unterscheidung ist wichtig, wenn eine realistisch wirkende Komponentendemonstration Produktbegriffe verwendet.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: Gestaltung mit Tokens und dokumentierten Parts

### Mit Tokens und dokumentierten Teilen gestalten

Gewöhnliche Selektoren für Nachfahren können nicht ohne Weiteres auf den Shadow Tree einer Komponente zugreifen. Dieses Beispiel nutzt geerbte Theme-Variablen, damit Hintergrund, Text und Radius des Felds mit der umgebenden Gestaltung von HTML abgestimmt bleiben. Das ist eine unterstützte Styling-Schnittstelle und kein Versuch, internes, generiertes Markup anzusprechen.

Für komponentenspezifische Änderungen konsultieren Sie die dokumentierten benutzerdefinierten Eigenschaften und Parts von CSS für die jeweilige Komponente. Ein globaler Selektor für Eingabefelder ändert nicht zwangsläufig das interne Eingabefeld von wa-input. Umgekehrt kann eine Theme-Klasse oder -Variable auf einem gemeinsamen Vorfahren viele benutzerdefinierte Elemente unterhalb davon gezielt beeinflussen. Wählen Sie den Geltungsbereich daher sorgfältig aus.

Unterstützende Spezifikation lesen

## Web Awesome Designsystem: Aktualisierung, Validierung und lokale Ergebnisse

### Aktualisierung, Validierung und lokale Ergebnisse

Die Registrierung einer Komponente erfolgt aus Sicht der Seite asynchron. Das Beispiel wartet mit customElements.whenDefined auf die verwendeten APIs und anschließend auf die Aktualisierung der Auswahlfelder, bevor es die Anfangswerte ausliest. So werden Standardwerte nicht auf ein Element angewendet, das noch nicht vom unbekannten HTML-Tag zu seiner Komponentenklasse hochgestuft wurde.

Die Workspace-Aktion verwendet setCustomValidity und reportValidity auf wa-input. Ein getrimmter Name mit weniger als zwei Zeichen wird zurückgewiesen; ein input-Ereignis löscht den benutzerdefinierten Fehler, sodass die Eingabe korrigiert und erneut geprüft werden kann. Der deaktivierte Button „Später einladen“ ist ein nativer deaktivierter Zustand der Komponente. Der Statustext gibt nur einen lokal angewendeten Namen aus. Der vollständige Code enthält keine Anfrage zum Erstellen eines Workspace oder zum Zuweisen von Ressourcen.

- Barrierefreie Beschriftungen werden über label-Attribute bereitgestellt.

- Hinweise erläutern die Namensvorgabe, bevor ein Fehler auftritt.

- Die deaktivierte Aktion bleibt inaktiv und macht dennoch ihren Zweck deutlich.

Unterstützende Spezifikation lesen

## Web Awesome-Designsystem: Theme und verwendete Komponenten importieren

### Das Theme und die verwendeten Komponenten importieren

Installiere @awesome.me/webawesome@3.14.0 in einer Vite-Vanilla-Anwendung und verwende die bereitgestellte main.js als Einstiegspunkt. Das Stylesheet des Standard-Themes ist erforderlich. Das Beispiel bindet absichtlich weder den umfassenderen nativen Reset noch das Utility-Bundle ein, da das Seitenlayout explizit definiert ist CSS. Die Importe registrieren die fünf im Markup verwendeten Komponententypen.

Die npm-dist-Module sind für Bundler vorgesehen. Die dist-cdn-Distribution ist eine Alternative, um Module direkt im Browser zu laden, da Abhängigkeiten dort anders gebündelt werden. Übernimm keinen dist-Import in ein einfaches Script-Tag und gehe davon aus, dass sich ungebundene Abhängigkeiten auflösen lassen. Komponenten, die externe Assets benötigen, erfordern die dokumentierte Konfiguration des Basispfads. Dieses Beispiel kommt ohne bereitgestellte Icon-Assets aus und ist für den Offline-Betrieb gebündelt.

Unterstützende Spezifikation lesen

## Web Awesome-Designsystem: öffentliche Komponenten und klare Theme-Grenzen

### Öffentliche Komponenten und klar abgegrenzte Themes

Die Werkbank zeigt das Standard-Theme und öffentliche Komponenten. Einige Komponenten, Muster und Designressourcen von Web Awesome sind Pro-Angebote. Daher wird auf der Seite nicht der Eindruck erweckt, dass die Installation des öffentlichen Pakets alle Elemente des Katalogs freischaltet. Prüfe die Verfügbarkeit einer Komponente, bevor du sie zu einer erforderlichen Abhängigkeit in einem gemeinsam genutzten Designsystem machst.

Ein wiederverwendbares Produkttheme sollte dokumentieren, welche Variablen geändert werden, für welchen Bereich sie gelten und wie beide Darstellungsmodi geprüft werden. Die interaktive Werkbank zeigt den Prozess im Kleinen: Leserinnen und Leser können die genau geänderten Variablen prüfen und die resultierenden nativen Komponenten vergleichen, statt sich auf ein losgelöstes Palettenbild zu verlassen.

Unterstützende Spezifikation lesen

## Beispiele für Komponenten im Web Awesome-Designsystem

### Markup der Custom-Element-Werkbank

Native wa-select-, wa-option-, wa-input-, wa-switch- und wa-button-Elemente, kombiniert mit gewöhnlichem semantischem HTML.

```
<main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
```

Code-Referenz

- Anfangsauswahlen werden mit selected auf wa-option festgelegt.

- Es werden ausschließlich kostenlose Komponenten verwendet.

### Vollständige Importe und Token-Steuerelemente

Registriert Komponenten, wartet auf deren Upgrade, ändert bereichsbezogene Custom Properties und setzt die lokale Validierung um.

```
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
```

Code-Referenz

- whenDefined verhindert, dass ein noch nicht aktualisiertes Custom Element ausgelesen wird API.

- Der Code importiert nur die verwendeten Komponenten.

### Bereichsbezogenes Beispiel CSS

Gewöhnliches HTML verwendet dieselben Theme-Variablen wie die nativen Custom Elements.

```
*{box-sizing:border-box}body{margin:0;font-family:var(--wa-font-family-body);font-size:16px;line-height:var(--wa-line-height-normal);color:var(--wa-color-text-normal);background:#f5f6f8}.token-workbench{max-width:1100px;margin:auto;padding:32px}header{max-width:740px;margin-bottom:28px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em}h2{font-size:23px;line-height:1.25}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.workbench-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}.controls{display:flex;flex-direction:column;gap:20px;padding:24px;background:white;border:1px solid #d9dde3;border-radius:12px}.controls h2{margin:0}.hint,footer{color:var(--wa-color-text-quiet);font-size:14px}.specimen{background:var(--wa-color-surface-default);color:var(--wa-color-text-normal);border:1px solid var(--wa-color-surface-border);border-radius:var(--wa-border-radius-l);padding:var(--wa-space-xl);display:flex;flex-direction:column;gap:var(--wa-space-l)}.specimen h2,.specimen p{margin:0}.sample-head,.sample-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wa-space-s)}.sample-head{justify-content:space-between}.badge{font-size:10px;letter-spacing:.09em;font-weight:700;background:var(--wa-color-brand-fill-quiet);color:var(--wa-color-brand-on-quiet);padding:4px 8px;border-radius:var(--wa-border-radius-s)}.token-readout{background:var(--wa-color-surface-lowered);padding:var(--wa-space-m);border-radius:var(--wa-border-radius-m);font:13px/1.7 var(--wa-font-family-code);white-space:pre-wrap;overflow-wrap:anywhere}#result{font-size:13px}footer{margin-top:20px}@media(max-width:700px){.token-workbench{padding:20px 16px}.workbench-grid{grid-template-columns:1fr}.controls{padding:20px}h1{font-size:28px}.specimen{padding:var(--wa-space-l)}}
```

Code-Referenz

- Die Überschrift und der Layout-Breakpoint der Werkbank sind eigene Gestaltungsentscheidungen.

### Vollständiges index.html-Dokument

Das Vite-Stammverzeichnisdokument für die bereitgestellte main.js und das Stylesheet.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Web Awesome token workbench</title></head><body><main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
<script type="module" src="/main.js"></script></body></html>
```

Code-Referenz

- Erstelle ein Vite-Vanilla-Projekt und verwende die oben gezeigten vollständigen Dateien main.js und style.css.

## Web Awesome-Designsystem: Agent einrichten

### Ausgangspunkt für die Implementierung

Die vollständige main.js, CSS und die Body-Beispiele bilden die Werkbank in einem Bundler nach. Die Offline-Demo ist ein esbuild-Bundle, in das das Theme CSS eingebettet ist. Ein React-Provider ist nicht erforderlich.

```
// Create a Vite vanilla project, then install:
// npm install @awesome.me/webawesome@3.14.0
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.

// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
```

### Ein Prompt für dein Projekt

```
Verwende die bereichsbezogene Token-Werkbank Web Awesome 3.14.0 und registriere die bereitgestellten Elemente wa-select, wa-option, wa-input, wa-button und wa-switch. Warte auf die Definition der Komponenten und auf updateComplete, bevor du die anfänglichen Auswahlen ausliest. Wende --wa-border-radius-scale und --wa-space-scale nur auf den Beispielbereich an und schalte dort zwischen den Klassen wa-light und wa-dark um, ohne andere Seiteninhalte zu verändern. Halte die sichtbare Token-Anzeige mit den nativen Steuerelementen synchron und behalte die Beschriftungen bei. Verwende die Werkbank als Prüfwerkzeug, nicht als Oberfläche zur Geräteverwaltung.
```

## Web Awesome-Designsystem: Quellen und Geltungsbereich

Öffentliche Komponenten und Standard-Theme von Web Awesome 3.14.0. Das Layout ist eine eigene Gestaltungsentscheidung; die lokale Eingabe eines Namens erstellt keinen Arbeitsbereich und speichert keine Daten.

- Installation npm/dist im Vergleich zu dist-cdn und erforderlichem Theme.

- Design-Tokens Theme-Token-Kategorien.

- Anpassen Custom Properties und Shadow-Grenzen.

- Select Optionen, Werte und Anfangsauswahl.

- Input Validierung API.

- Schalter Boolesches Custom Element.

## Weitere Ressourcen zum Web Awesome-Designsystem

### Ariakit

Ariakit stellt ungestaltete React-Komponenten mit gemeinsamem, explizitem Zustand und kombinierbaren, barrierefreien Bausteinen bereit. Bei der Combobox sind die eingegebene Suchanfrage und die bestätigte Auswahl voneinander getrennt. Dadurch eignet sie sich für suchbasierte Auswahlelemente. Die Referenzsuche unten veranschaulicht diese Unterscheidung mit gruppierten und nicht verfügbaren Ergebnissen.

### Bits UI

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.

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


- [Implementierungsreferenz](https://webawesome.com/docs/customizing)
- [Quelle](https://webawesome.com/docs/tokens/)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/usage)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/tokens/)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/customizing)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/components/select/)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/components/input/)
- [Unterstützende Spezifikation lesen](https://webawesome.com/docs/)
- [Code-Referenz](https://webawesome.com/docs/components/select/)
- [Code-Referenz](https://webawesome.com/docs)
- [Code-Referenz](https://webawesome.com/docs/customizing)
- [Code-Referenz](https://webawesome.com/)
- [Installation npm/dist im Vergleich zu dist-cdn und erforderlichem Theme.](https://webawesome.com/docs/)
- [Design-Tokens Theme-Token-Kategorien.](https://webawesome.com/docs/tokens/)
- [Anpassen Custom Properties und Shadow-Grenzen.](https://webawesome.com/docs/customizing)
- [Select Optionen, Werte und Anfangsauswahl.](https://webawesome.com/docs/components/select/)
- [Input Validierung API.](https://webawesome.com/docs/components/input/)
- [Schalter Boolesches Custom Element.](https://webawesome.com/docs/components/switch/)