Gemeinsame Ebene
Headless Core und DOM-Vertrag
Der Core definiert Zustände, Tastaturverhalten, ARIA-Zuordnungen sowie data-scope und data-part.
Proof of Concept für das Komponenten-System
Gemeinsames Verhalten für drei Frameworks und zwei Marken.
kredit und cpool nutzen dieselben Zustands- und Bedienregeln. Framework und Markendesign bleiben frei wählbar.
Aufbau
Gemeinsame Regeln, getrennte Gestaltung.
Der Core gibt Verhalten und DOM-Struktur vor. Adapter und Tokens passen die Komponenten an Framework und Marke an.
Produktspezifische Ebene
Adapter und Marken-Tokens
Adapter binden den Core an jedes Framework. kredit und cpool gestalten dieselbe DOM-Struktur mit eigenen Tokens.
Umfang des PoC
Ein Core ersetzt mehrfach gepflegte Verhaltenslogik.
11Komponenten im Katalog
3Framework-Adapter für denselben Core
2Marken-Themes mit eigenen Tokens
1gemeinsame Spezifikation für Verhalten und Barrierefreiheit
DOM-Vergleich
Dieselbe Struktur in jedem Theme.
Jede Demo nutzt data-scope="button". Nur das Theme und der Framework-Adapter ändern sich.
Katalog
11 Komponenten mit dokumentiertem Verhalten.
Jede Detailseite zeigt Props, Tastaturregeln, Framework-Beispiele und alle Theme-Varianten.
01
Aktion
Button
Startet eine benannte Aktion und zeigt Lade-, Deaktiviert- und Fokuszustände.
02Eingabe
Text Field
Nimmt kurze Texte auf und verbindet das Feld mit Label, Hilfetext und Fehlermeldung.
03Auswahl
Select
Öffnet eine Optionsliste und übernimmt genau einen Wert in den Trigger.
04Auswahl
Checkbox
Schaltet eine unabhängige Option ein oder aus.
05Auswahl
Radio Group
Wählt genau eine Option aus einer sichtbaren Gruppe.
06Status
Switch
Ändert eine Einstellung mit sofortiger Wirkung.