UI Elements (ui.*)
Die atomaren Bausteine — ein Zweck, keine Slots, kein eigener Client-Controller.
Text, Überschrift, Button, Icon, Bild, Badge, Avatar (+ Avatar-Stapel), die komplette Formular-Familie (Input, Textarea, Select mit Gruppen, Checkbox, Radio-Gruppe, Switch, Farb-, Zahlen- und Datums-nahe Felder), Status-Anzeigen (Spinner, Progress als Balken und Ring, Skeleton, Meter, Rating), Medien (Audio, QR-Code), Kleinteile wie Tastenkürzel, Relativzeit, Trennlinie, Link, Rich-Text — die vollständige, immer aktuelle Liste liefert der Katalog-Baum (aus der Registry generiert).
elements/button/
├── manifest.json # ID, Version, Targets, Events (activate), Kategorie
├── props.schema.json # label, variant(enum), size(enum), disabled … + ui-Hints
├── render.php # Closure: (props, ctx) → escapter HTML-String
├── button.css # @apply-Struktur + Komponenten-Tokens (--button-*)
└── demo.php # Variationen — speisen Galerie UND Snapshot-Tests
Regeln: Props-Whitelist mit Enums und Defaults (ungültig → Fallback); alle sichtbaren Werte über Tokens; semantische Events statt DOM-Events (ein Button emittiert activate, nie „click" — die Bedeutung gehört zur Definition, die Bindung zur Instanz); Sicherheits-Verhalten eingebaut (Link-Schema-Whitelist, Bild-Platzhalter bei unsicherer Quelle, Rich-Text-Sanitizer).
Sonderfall ui.icon: rendert aus der kuratierten icons.json (Lucide, beim Import sanitisiert) — Namen sind ein Enum, unbekannt → info-Fallback.