Reihe

layout.cluster · v1.1.0 Horizontale Reihe mit Umbruch (Buttons, Badges, Meta-Zeilen) — wrappt fluid ohne Media Query WebsiteAppDesktopE-Mail

Spalten

layout.columns · v1.1.0 Zwei benannte Spalten mit Verhältnis (1:1, 2:1, 1:2) — stapeln mobil untereinander WebsiteAppDesktop

Effekt-Rahmen

layout.effect-frame · v1.2.0 Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte: laufender Rand-Glanz, Punkt-/Linien-Raster oder Verlaufs-Schein — alle Effekte aus Tokens und mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Raster

layout.grid · v1.1.0 Zwölf-Spalten-Raster. Kinder bestimmen ihre Breite über node.layout.span; ohne Angabe gilt die Vorgabe aus dem columns-Prop. WebsiteAppDesktop

Stapel

layout.stack · v1.1.0 Vertikaler Stapel mit Token-Abstand — das Grundlayout für untereinander stehende Inhalte WebsiteAppDesktopE-Mail

Quellen-Marker (Inline Citation)

ui.inline-citation · v1.0.0 Hochgestellter Quellen-Verweis im Fließtext — verlinkt auf den passenden Eintrag in component.sources, mit Titel als Tooltip AppDesktop

Button

ui.button · v1.1.0 Auslöser für Aktionen — emittiert das semantische Event activate WebsiteAppDesktop

Button-Gruppe

ui.button-group · v1.0.1 Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben WebsiteAppDesktop

Icon-Knopf

ui.icon-button · v1.1.0 Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate WebsiteAppDesktop

Preis

ui.price · v1.0.1 Shop-Preiszeile: Betrag (bei Streichpreis automatisch in Sale-Farbe), Streichpreis, Rabatt-Badge — Sale-Ton über den themebaren color.sale-Token WebsiteApp

Mengen-Stepper

ui.quantity-stepper · v1.0.1 Mengenwahl mit −/+ und Zahleneingabe — progressive (Input funktioniert ohne JS), Controller klemmt auf min/max und emittet change WebsiteApp

Sterne-Bewertung

ui.rating · v1.1.1 Rating-Anzeige 0–5 mit Teilsternen (Breiten-Maske, kein JS) und optionaler Anzahl — Farben über status.warning-/Sale-Tokens WebsiteApp

Varianten-Swatch

ui.swatch · v1.0.1 Farb-/Bild-Kachel für Produktvarianten. Die Produktfarbe ist ein CONTENT-Datum (Prop), kein Design-Token — Auswahl-Ring und Maße kommen aus Tokens WebsiteApp

Checkbox

ui.checkbox · v1.0.0 Checkbox mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Farbwähler

ui.color-input · v1.1.0 Nativer Farbwähler (input type=color) als Formulardatum — z. B. eine Kunden-Markenfarbe. NICHT für Design-Entscheidungen im System (dafür gibt es semantische Tokens) WebsiteAppDesktop

Eingabefeld

ui.input · v1.3.0 Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens WebsiteAppDesktop

Radio-Gruppe

ui.radio-group · v1.0.0 Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl) WebsiteAppDesktop

Auswahlfeld

ui.select · v1.2.0 Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens WebsiteAppDesktop

Schieberegler (Slider)

ui.slider · v1.0.0 Nativer Range-Slider mit Token-Styling und Live-Wertanzeige — funktioniert ohne JS, Controller aktualisiert Anzeige und emittet change WebsiteAppDesktop

Schalter

ui.switch · v1.0.0 An/Aus-Schalter (Toggle) — checkbox-Semantik mit Switch-Optik über Tokens WebsiteAppDesktop

Mehrzeiliges Textfeld

ui.textarea · v1.2.0 Mehrzeiliges Formularfeld mit Label, Zuständen und Formular-Tokens WebsiteAppDesktop

Ankündigungs-Pille

ui.announcement · v1.0.1 Pill-Banner über einer Überschrift (Beispiel: Neu · Version 2 ist da): Markierung links, Text, optionaler Pfeil — als Link oder statisch WebsiteAppE-Mail

Audio-Player

ui.audio · v1.0.0 Natives Audio-Element mit Browser-Steuerung und optionaler Unterschrift — unsichere Quellen zeigen den Platzhalter WebsiteAppDesktop

Avatar

ui.avatar · v1.0.1 Bild oder Initialen einer Person mit optionalem Status WebsiteAppDesktopE-Mail

Avatar-Stapel

ui.avatar-stack · v1.0.0 Überlappende Avatare mit „+n“-Rest — Teams, Zuweisungen, Teilnehmerlisten WebsiteAppDesktop

Trennlinie

ui.divider · v1.2.0 Horizontale Trennlinie, optional mit zentriertem Beschriftungstext WebsiteAppDesktopE-Mail

Icon-Fläche (Featured Icon)

ui.featured-icon · v1.0.1 Icon auf getönter runder/eckiger Fläche (Untitled-UI-Muster Featured Icon) — Töne aus Status-/Primary-Tokens per color-mix abgeleitet WebsiteAppDesktop

Überschrift

ui.heading · v1.2.0 Überschrift der Ebenen 1–6 (anchor-Prop als Sprungziel für Inhaltsverzeichnisse) WebsiteAppDesktopE-Mail

Icon

ui.icon · v1.0.0 Kuratiertes Inline-SVG-Icon-Set (Whitelist) — Größen über icon-Tokens, Farbe über currentColor/Ton WebsiteAppDesktopE-Mail

Bild

ui.image · v1.1.0 Bild mit URL-Whitelist, Seitenverhältnis und Platzhalter-Fallback bei unsicherer Quelle WebsiteAppDesktopE-Mail

Listen-Zeile (Item)

ui.item · v1.0.0 Universelle Listen-Zeile: Icon/Avatar-Fläche, Titel + Untertitel, Meta rechts, optionaler Chevron — Grundbaustein für Listen, Suchergebnisse, Auswahllisten WebsiteAppDesktop

Tastenkürzel

ui.kbd · v1.0.0 Tastenkürzel-Anzeige — „Strg+K" wird zu einzelnen Tasten-Kappen mit + dazwischen WebsiteAppDesktopE-Mail

Link

ui.link · v1.0.0 Textlink mit URL-Whitelist — echte href-Navigation bleibt immer die Rückfallebene WebsiteAppDesktopE-Mail

QR-Code

ui.qr-code · v1.0.0 Serverseitig generierter QR-Code (SVG) — Belege, Zahlungs-Links, Geräte-Kopplung. Die Nutzdaten fließen nur ENCODIERT ein, nie als Markup WebsiteAppDesktopE-Mail

Relative Zeit

ui.relative-time · v1.0.0 Relative Zeitangabe („vor 3 Minuten“, „in 2 Tagen“) als natives time-Element mit absolutem Titel — serverseitig berechnet, now-Prop hält Demos deterministisch WebsiteAppDesktopE-Mail

Rich Text

ui.richtext · v1.2.0 Sanitisierter Rich-Text: Fliesstext-Semantik (h3-h6, Listen, Tabellen, mark/kbd/sub/sup/abbr/time, dl, figure) + Ton-Spans aus festem Vorrat (data-tone) WebsiteAppDesktopE-Mail

Text

ui.text · v1.0.0 Fließtext-Absatz mit Ton und Größe WebsiteAppDesktopE-Mail

Badge

ui.badge · v2.1.0 Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden) WebsiteAppDesktopE-Mail

Chip

ui.chip · v1.2.0 Filter-/Auswahl-Chip — im Element Builder generiert (Archetyp box) WebsiteAppDesktop

Füllstand (Meter)

ui.meter · v1.0.0 Füllstands-Anzeige eines bekannten Bereichs (Speicher, Kontingent) — färbt sich nach Schwellwerten, im Unterschied zu ui.progress (Fortschritt eines Vorgangs) WebsiteAppDesktopE-Mail

Fortschrittsbalken

ui.progress · v1.1.0 Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige WebsiteAppDesktop

Skeleton

ui.skeleton · v1.1.0 Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise WebsiteAppDesktop

Ladeindikator

ui.spinner · v1.0.0 Rotierender Ladeindikator mit Größen und Screenreader-Label WebsiteAppDesktop

Status-Anzeige

ui.status · v1.0.0 Zustands-Punkt mit Beschriftung (online, beeinträchtigt, offline, wartend) — Punkt pulsiert optional; Farben aus Status-Tokens WebsiteAppDesktopE-Mail

Agenten-Karte

component.agent-card · v1.1.0 Steckbrief eines Agenten: Name, Rolle, Zustand, Modell, Werkzeug-Badges und Kennzahlen — für Agenten-Übersichten und Team-Ansichten AppDesktop

AI-Diff (Änderungs-Ansicht)

component.ai-diff · v1.0.0 Zeilenweise Änderungs-Ansicht (hinzugefügt/entfernt/Kontext) mit Datei-Kopf und Zähler — der Konsument liefert annotierte Zeilen, das Framework rechnet keine Diffs WebsiteAppDesktop

Gedankenkette

component.chain-of-thought · v1.0.0 Zeitleiste der Denk-Schritte eines Agenten: Schritt-Punkte mit Titel, Detailtext und optionaler Quellen-/Werkzeug-Angabe — als Ganzes einklappbar AppDesktop

Wiederherstellungspunkt

component.checkpoint · v1.0.0 Marke im Verlauf, zu der zurückgesprungen werden kann: Linie mit Label, Zeitangabe und Zurücksetzen-Knopf AppDesktop

Freigabe (Human-in-the-Loop)

component.confirmation · v1.1.0 Rückfrage vor einer folgenreichen Agenten-Aktion: Beschreibung, Details-Liste, Zustimmen/Ablehnen — nach der Wahl bleibt die Entscheidung sichtbar AppDesktop

Kontext-Anzeige

component.context · v1.0.0 Auslastung des Kontextfensters: Balken mit belegten/freien Token, Warn-Ton ab Schwellwert, optional Kosten und Modell-Angabe AppDesktop

Konversation (Chat-Container)

component.conversation · v1.1.0 Scrollender Chat-Verlauf: hält den Blick am unteren Rand, zeigt beim Hochscrollen einen Zurück-nach-unten-Knopf — nimmt Nachrichten und AI-Bausteine im Slot auf AppDesktop

Nachricht (Chat)

component.message · v1.0.0 Chat-Nachricht: Nutzer als Blase rechts, Assistent als Fließtext links mit Avatar; optionale Anhänge, Aktions-Leiste (Kopieren, Bewerten, Neu erzeugen) und Zeitstempel AppDesktop

Modell-Wahl

component.model-selector · v1.0.0 Kompakte Modell-Auswahl für die Chat-Leiste: aktuelles Modell als Knopf, Panel mit Anbieter-Gruppen, Beschreibung und Merkmal-Badges AppDesktop

Plan (Agenten-Vorhaben)

component.plan · v1.0.0 Vorhaben eines Agenten vor der Ausführung: nummerierte Schritte mit Werkzeug-Angabe und Zustand, optional Freigabe-Leiste am Fuß AppDesktop

Prompt-Eingabe

component.prompt-input · v1.1.0 Chat-Eingabe: mitwachsendes Textfeld, Enter sendet (Umschalt+Enter = Zeilenumbruch), Werkzeugleiste (Anhang, Modell) und Senden/Stop-Knopf AppDesktop

Warteschlange

component.queue · v1.0.0 Anstehende Aufträge eines Agenten: Position, Titel, Zustand (wartet/läuft) und Entfernen-Knopf — für Batch-Läufe und Hintergrund-Aufgaben AppDesktop

Denkprozess (Reasoning)

component.reasoning · v1.0.0 Einklappbarer Denk-Block des Modells: Kopfzeile mit Dauer und Zustand (denkt / fertig), Inhalt als gedämpfter Text — natives details/summary, kein JS nötig AppDesktop

Quellen

component.sources · v1.0.0 Einklappbare Quellenliste unter einer Antwort: nummerierte Einträge mit Titel, Domain und optionalem Auszug — passend zu ui.inline-citation im Text AppDesktop

Vorschläge

component.suggestion · v1.0.0 Anschluss-Fragen als Pillen unter der Antwort oder über der Eingabe — Klick meldet den Text zur Übernahme in die Prompt-Eingabe AppDesktop

Aufgaben-Liste (Task)

component.task · v1.0.0 Was der Agent gerade abarbeitet: Aufgaben mit Zustand (offen/läuft/fertig/Fehler), optionalen Unterpunkten und Fortschritts-Zeile AppDesktop

Werkzeug-Aufruf (Tool Call)

component.tool · v1.0.0 Aufruf eines Agenten-Werkzeugs: Name, Zustand (wartet/läuft/fertig/Fehler), einklappbare Eingabe- und Ergebnis-Blöcke — natives details, kein JS AppDesktop

CTA-Button

component.cta-button · v1.0.1 Grosser Call-to-Action — komponiert im Component Builder auf ui.button Website

Theme-Umschalter

component.theme-switcher · v1.0.1 Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung WebsiteAppDesktop

Produkt-Karte

component.product-card · v1.0.1 Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen WebsiteApp

Produkt-Galerie

component.product-gallery · v1.0.1 Thumbnail-Spalte + Hauptbild — Controller wechselt das Hauptbild beim Thumbnail-Klick; ohne Bilder rendern Platzhalter-Flächen WebsiteApp

Sticky-Kaufleiste

component.sticky-buy-bar · v1.0.1 Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller) WebsiteApp

Varianten-Picker

component.variant-picker · v1.0.1 Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante WebsiteApp

Aktivitäts-Raster (Heatmap)

component.activity-heatmap · v1.0.0 Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, Intensität in fünf Stufen aus einem Ton-Token, Wochentag- und Monats-Beschriftung, Legende und Gesamtzahl AppDesktop

Monatskalender

component.calendar · v1.0.0 Voller Monatskalender (Mo–So): Termine als Punkte mit Label, Heute-Markierung, optionale Vor/Zurück-Links — serverseitig gerendert, Monat als Prop WebsiteAppDesktop

Diagramm

component.chart · v1.0.0 Diagramm auf ApexCharts (lokal ausgeliefert, kein CDN): Linie, Balken, Fläche, Kreis, Ring, Radar. Farben und Schrift werden zur Laufzeit aus den Design-Tokens gelesen, ein Theme-Wechsel färbt mit. Ohne JavaScript bleibt eine lesbare Wertetabelle stehen WebsiteAppDesktop

Vorher/Nachher-Vergleich

component.comparison · v1.0.0 Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche WebsiteAppDesktop

Detail-Liste (Begriff/Wert)

component.description-list · v1.0.0 Detail-Ansicht eines Datensatzes als Begriff/Wert-Zeilen (dl/dt/dd) — Werte-Arten text/badge/muted/code/link, ein- oder zweispaltig, optional gestreift WebsiteAppDesktopE-Mail

Gantt (Zeitplan)

component.gantt · v1.0.0 Projekt-Zeitplan als Balkendiagramm: Zeilen mit Aufgaben, Zeitachse in Tagen/Wochen, farbige Balken (Ton aus Tokens), Fortschritts-Füllung, Heute-Linie und Meilenstein-Rauten AppDesktop

Kanban-Board

component.kanban · v1.1.0 Spalten-Board mit Karten (Titel, Beschreibung, Badge, Zugewiesene, Link) — horizontal scrollbar; draggable-Prop schaltet Drag & Drop + Tastatur (Strg+Pfeile) frei WebsiteAppDesktop

Mini-Kalender (Tagesstreifen)

component.mini-calendar · v1.0.0 Kompakter Tagesstreifen für Kopfleisten: waagerechte Tage mit Wochentag, Markierungs-Punkten für Termine, Blättern vor/zurück — Auswahl meldet das Datum AppDesktop

Zahlen-Fluss (animierter Wert)

component.number-flow · v1.0.0 Zahl, die bei Wertänderung zum neuen Wert zählt (deutsches Format) — Server rendert den Endwert; mit [data-motion=reduce] am Konsumenten springt er sofort WebsiteAppDesktop

Sortierbare Liste

component.sortable-list · v1.0.0 Liste mit Gruppen, deren Einträge per Ziehen oder Tastatur (Pfeile mit Strg) umsortiert und zwischen Gruppen verschoben werden — meldet jede Umsortierung AppDesktop

Verlaufslinie (Sparkline)

component.sparkline · v1.0.0 Kleine Verlaufsgrafik ohne Achsen für Kennzahl-Karten und Tabellenzellen — reines Inline-SVG, KEINE Diagramm-Bibliothek nötig; Farbe aus Tokens, Wertetabelle als Rückfall entfällt (Werte stehen im aria-label) WebsiteAppDesktop

Tabelle

component.table · v1.3.0 Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar, Sticky-Kopf + Spalten-Pinning WebsiteAppDesktopE-Mail

Laufband (Ticker)

component.ticker · v1.0.0 Durchlaufende Daten-Zeile (Kurse, Kennzahlen, Meldungen) mit Wert und Veränderungs-Ton — pausiert bei Hover; mit [data-motion=reduce] am Konsumenten statische scrollbare Zeile WebsiteAppDesktop

Baum (Tree View)

component.tree · v1.1.0 Hierarchische Baum-Ansicht (Ordner/Strukturen, max. 6 Ebenen): Zweige klappen per Controller, Blätter emittieren select — Chevron dreht, aktiver Knoten hervorgehoben WebsiteAppDesktop

Teilbare Fläche (Split-Panes)

component.resizable · v1.0.0 Zwei Bereiche mit ziehbarem Teiler (horizontal oder vertikal) — Maus/Touch per Pointer-Capture, Tastatur mit Pfeiltasten, Grenzen über min/max AppDesktop

Window

component.window · v1.0.0 Desktop-Fensterrahmen mit Titelleiste und Controls — Inhalt via contentMode (legacy-iframe | integrated-page) ab Phase 5 Desktop

Auswahl-Karten (Choicebox)

component.choice-box · v1.1.0 Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection WebsiteAppDesktop

Code-Eingabe

component.code-input · v1.0.0 Verifizierungs-Code-Eingabe (4/6/8 Stellen): Einzelzellen mit Auto-Weiterspringen, Backspace zurück, Einfügen verteilt — der Wert landet gesammelt in einem versteckten Feld WebsiteAppDesktop

Combobox (Select mit Suche)

component.combobox · v1.0.0 Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option WebsiteAppDesktop

Datumswahl (Date Picker)

component.date-picker · v1.0.0 Datums-Eingabe mit Popover-Kalender (Monatsraster, Vor/Zurück, Heute markiert, Mo-So) — progressive: Textfeld TT.MM.JJJJ funktioniert ohne JS, emittet change WebsiteAppDesktop

Text-Editor (Eingabe)

component.editor · v1.0.0 Rich-Text-EINGABE mit Werkzeugleiste (fett, kursiv, unterstrichen, Überschrift, Listen, Zitat, Code, Link) — erzeugt genau das HTML, das der Sanitizer erlaubt; Gegenstück zur Anzeige ui.richtext AppDesktop

Feldgruppe

component.fieldset · v1.0.0 Formular-Gruppierung (fieldset/legend): fasst zusammengehörige Felder mit Überschrift und optionalem Hinweis zusammen — disabled deaktiviert alle Kinder nativ WebsiteAppDesktop

Datei-Upload (Dropzone)

component.file-upload · v1.1.1 Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien WebsiteAppDesktop

Filterleiste

component.filter-bar · v1.0.0 Filter-Bar über Tabellen/Listen: Suchfeld + Filter-Buttons mit Options-Panels + Zurücksetzen — Controller pflegt aktive Filter, emittet filter WebsiteAppDesktop

Formular

component.form · v1.1.0 Sammelt Eingabe-Bausteine und schickt sie an einen BENANNTEN Vorgang (kernel/operations.php). Kein Ziel, keine URL im Seiten-JSON — nur ein Name, der in der Weissliste stehen muss. WebsiteAppDesktop

Eingabegruppe

component.input-group · v1.0.0 Eingabefeld mit Prefix-/Suffix-Addons im gemeinsamen Rahmen (€-Zeichen, Einheiten, Icons) — der Bootstrap-input-group-Fall für Preis- und Einheitenfelder WebsiteAppDesktop

Mehrfach-Select

component.multi-select · v1.0.0 Multi-Select mit Chips im Feld, Suchfilter und Options-Panel (Untitled-UI-Muster) — Controller pflegt Auswahl, Escape/Außenklick schließen, emittet auswahl WebsiteAppDesktop

Segment-Schalter

component.segmented-control · v1.0.0 Umschalter aus verbundenen Segmenten (genau eine Auswahl) — für Ansichts-/Modus-Wechsel; als Formularwert über das name-Feld, Tastatur mit Pfeiltasten WebsiteAppDesktop

Tag-Eingabe

component.tag-input · v1.0.0 Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags WebsiteAppDesktop

Akkordeon

component.accordion · v1.0.1 Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event WebsiteAppDesktop

Einlaufende Liste

component.animated-list · v1.0.1 Liste, deren Einträge nacheinander einlaufen (Benachrichtigungs-Demos, Feature-Aufzählungen): Icon-Fläche, Titel, Text, Zeit — mit prefers-reduced-motion-Rückfall WebsiteAppDesktop

Hinweiskasten

component.callout · v1.0.0 Hervorgehobener Hinweis im Fliesstext (Ton aus festem Vorrat: info/success/warning/danger) mit optionalem Titel und Rich-Text-Inhalt WebsiteAppDesktopE-Mail

Card

component.card · v1.2.0 Inhaltskarte mit Media-, Inhalts- und Footer-Slot WebsiteAppDesktopE-Mail

Carousel

component.carousel · v1.0.0 Bilder-Carousel auf scroll-snap-Basis: ohne JavaScript horizontal wischbar, der Controller ergänzt Pfeile, Punkte und Tastatur — kein Autoplay (bewusst) WebsiteApp

Code-Block

component.code-block · v2.0.0 Code-Fenster im Syntax-Stil: dunkle Flaeche in jedem Theme (color.code.*-Tokens), Traffic-Dots, Dateinamen-Tab, Kopieren-Knopf, Zeilennummern, serverseitiges Syntax-Highlighting (php/js/json/bash/html/css) WebsiteAppDesktop

Bild-Zoom (Lightbox)

component.image-zoom · v1.0.0 Klickbares Bild öffnet ein Vollbild-Overlay (Backdrop, Escape/Klick schließt, Scroll-Lock) — ohne JS bleibt es ein normales Bild WebsiteAppDesktop

Listengruppe

component.list-group · v1.0.0 Gerahmte Eintragsliste (Bootstrap list-group): Einträge mit Titel, Beschreibung, Badge und optionalem Link — aktiv/deaktiviert je Eintrag WebsiteAppDesktop

Befehls-Schnipsel

component.snippet · v1.0.0 Einzeiliger Befehl mit Prompt-Zeichen und Kopieren-Knopf, optional mit Reitern (npm/pnpm/yarn) — Docs- und Onboarding-Baustein WebsiteAppDesktop

Terminal (Ausgabe)

component.terminal · v1.0.0 Terminal-Fenster mit Fenster-Punkten und Zeilen-Typen (Befehl, Ausgabe, Erfolg, Fehler, Hinweis); Zeilen erscheinen nacheinander (abschaltbar, respektiert prefers-reduced-motion) WebsiteAppDesktop

Video-Spieler

component.video-player · v1.1.0 Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player — v1.1: Leiste per Drag scrubbing-fähig WebsiteAppDesktop

Brotkrumen

component.breadcrumb · v1.1.1 Pfadnavigation (items-Array, letzter Eintrag = aktuelle Seite ohne Link) WebsiteAppDesktop

Befehlsmenü (Cmd+K)

component.command-menu · v1.1.0 Command-Menu / Docs-Suche: Strg/Cmd+K oder Öffner-Button, Suchfilter (inkl. unsichtbarer keywords), Pfeiltasten + Enter, Gruppen und Kürzel — Eintrag MIT href navigiert (Progressive-Fallback), ohne href emittet er command AppDesktop

Kontextmenü

component.context-menu · v1.0.0 Rechtsklick-Menü für eine Zielfläche: Einträge mit Icons/Trennern/Gefahr-Ton, öffnet an der Mausposition, schließt bei Außenklick/Escape — Einträge emittieren aktion WebsiteAppDesktop

Menüleiste (Menubar)

component.menubar · v1.0.0 Klassische Desktop-Menüleiste (Datei, Bearbeiten, Ansicht …): Menüs mit Einträgen, Kürzeln, Trennern und Gefahr-Ton; Tastatur-fähig, öffnet bei Hover wenn ein Menü offen ist AppDesktop

Navigation

component.navigation · v1.5.1 Hauptnavigation in zwei Menü-Formen: klassische Leiste ODER Burger-Flyout (Logo + Primary-CTA + Burger, Links im Vollflächen-Overlay rechtsbündig) — navigate als semantisches Event WebsiteAppDesktop

Seitenkopf (Page Header)

component.page-header · v1.0.1 App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie AppDesktop

Vor/Zurueck-Pager

component.pager · v1.1.1 Blaettern zwischen benachbarten Seiten (Docs-Kapitel): links Zurueck, rechts Weiter — beide optional WebsiteApp

Seitennavigation

component.pagination · v1.1.0 Blättern durch Seiten (Fenster mit Auslassungen) — navigate mit Seitenzahl als Payload WebsiteAppDesktop

Schritte (Progress Steps)

component.progress-steps · v1.0.0 Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens WebsiteAppDesktop

Seitenleiste (Sidebar)

component.sidebar · v1.2.0 App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben AppDesktop

Tab-Leiste (Pills)

component.tab-bar · v1.0.0 Segmentierte Pill-Tab-Leiste (Atlassian-Collections-Muster): Leiste auf sunken-Fläche, aktiver Tab als Secondary-Pill — progressive Links, optional zentriert Website

Tabs

component.tabs · v1.1.0 Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change WebsiteAppDesktop

Inhaltsverzeichnis

component.toc · v1.2.0 „Auf dieser Seite"-Liste mit Anker-Links (items-Array) und Scrollspy: der sichtbare Abschnitt wird beim Scrollen markiert (ohne JS statische Liste) WebsiteApp

Dialog-Stapel

component.dialog-stack · v1.0.0 Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish WebsiteAppDesktop

Schublade (Drawer)

component.drawer · v1.0.0 Von rechts einfahrendes Slideout-Panel mit Backdrop (Untitled-UI-Muster): Öffner-Button, Kopf mit Titel + Schließen, Inhalt, Fußleiste — Escape/Backdrop schließen WebsiteAppDesktop

Dropdown-Menü

component.dropdown · v1.1.1 Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event WebsiteAppDesktop

Hover-Karte (Vorschau)

component.hover-card · v1.0.1 Vorschau-Karte beim Überfahren/Fokussieren eines Auslösers (Link-Vorschau, Personen-Karte): Titel, Text, Meta-Zeile — mit Verzögerung, schließt bei Verlassen/Escape WebsiteAppDesktop

Modal

component.modal · v1.1.0 Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder WebsiteAppDesktop

Popover

component.popover · v1.0.1 Generischer verankerter Overlay: Klick auf den Auslöser öffnet ein Panel mit freiem Slot-Inhalt — schließt bei Außenklick und Escape. Für reine Hover-Vorschau component.hover-card, für Menüs component.dropdown WebsiteAppDesktop

Tooltip

component.tooltip · v1.1.1 Hinweis-Blase bei Hover/Fokus — rein CSS (kein JS), Ebene über layer.dropdown WebsiteAppDesktop

Aktivitäten (Feed)

component.activity-feed · v1.0.0 Aktivitäten-Feed mit Zeitleiste: Initialen-Kreis, Akteur + Aktion + Ziel, Zeitstempel — Verbindungslinie aus Tokens AppDesktop

Hinweis

component.alert · v1.1.1 Hinweis-Box in vier Tönen mit Icon, optional schließbar WebsiteAppDesktopE-Mail

Banner (Ankündigungsleiste)

component.banner · v1.0.0 Seitenbreite Ankündigungsleiste mit Ton-Varianten, optionalem Link und Schließen-Knopf — geschlossen bleibt sie pro Sitzung zu (storageKey) WebsiteAppDesktop

Leerzustand (Empty State)

component.empty-state · v1.1.0 Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts WebsiteAppDesktop

Metrik-Karte

component.metric-card · v1.1.0 Dashboard-Kennzahl (Untitled-UI-Muster): Label, großer Wert, Delta-Badge mit Richtung (steigend grün / fallend rot), Vergleichstext AppDesktop

Produkt-Grid

section.product-grid · v1.1.1 Responsives Grid aus Produkt-Karten (auto-fill) mit optionalem Sektions-Kopf — für Empfehlungen, Kategorien, Suchergebnisse Website

Produkt-Bühne (PDP-Kopf)

section.product-stage · v1.2.1 Der Kopf der Produktdetailseite: Produkt-Galerie | Kaufbox (Titel, Sterne, Preis, Varianten-Picker, Mengen-Stepper, Warenkorb-CTA mit cart-Event, Trust-Punkte) Website

Docs-Hero

section.docs-hero · v1.1.1 Einstiegs-Hero fuer Dokumentationen im Syntax-Stil: Navy-Band (color.code.*-Welt) mit Schaltkreis-Raster und Glow-Knoten, Eyebrow, Titel, Leadtext, Aktions-Pills und Code-Fenster rechts WebsiteApp

Hero

section.hero · v1.1.1 Große Einstiegs-Section mit Titel, Untertitel und Aktions-Slot Website

Hero (zentriert)

section.hero-centered · v1.2.1 Zentrierter Hero: zweizeiliger Display-Titel, horizontale Häkchen-Zeile, Primary- + Ghost-CTA, Plattform-Leiste in Mono — ton-neutral, Theme liefert Farben und Schrift-Familien Website

Hero (geteilt)

section.hero-split · v1.1.1 Generischer Split-Hero als dunkles Band: zweifarbiger Titel, Häkchen-Liste, CTA, Foto — Farben vollständig über die color.band-Tokens (Theme steuert) Website

Karten-Reihe (Scroll)

section.card-row · v1.1.1 Horizontale Content-Karten-Reihe mit CSS-Scroll-Snap (kein JS): farbige Karten (Ton per Prop aus Tokens) mit Badge, Titel, Link und optionaler Media-Fläche Website

Feature-Bento

section.feature-bento · v1.1.1 Karten-Grid mit Haarlinien-Bordern (Bento-Muster): Sektions-Kopf (Mono-Kicker + Display-Titel), Karten mit Mono-Label, Text, optionaler Media-Fläche und Breit-Option Website

Feature-Raster

section.features · v1.1.1 Feature-Kacheln mit Icon, Titel und Text — auto-fit-Raster, mobil eine Spalte Website

Laufband (Marquee)

section.marquee · v1.1.1 Endlos laufendes Band für Logos oder Kurztexte: Richtung und Tempo wählbar, Randabblendung, Pause bei Mauskontakt — hält bei prefers-reduced-motion an Website

Media-Split

section.media-split · v1.1.1 Text-Bild-Wechselzeile: Display-Titel + Text + Text-Link-CTA neben einer Media-Fläche (Bild oder Platzhalter-Fläche), Seite wählbar Website

Teaser-Karte

section.teaser-card · v1.0.1 Im Block Builder eingefrorene Komposition WebsiteApp

Absatz mit Punkten

section.text-bullets · v1.1.1 Universeller Inhalts-Block: Kicker (Akzent), zweifarbiger Titel, Text, Häkchen-Liste (optional mit fettem Auftakt je Punkt), Zitat-Balken, optionales Foto — als dunkles oder helles Band (Wechsel-Rhythmus) Website

Call-to-Action

section.cta · v1.1.1 Aufruf-Banner mit Titel, Text und Button-Slot — brand- oder neutral-getönt, mobil kompakt Website

FAQ (Accordion)

section.faq · v1.2.1 Fragen-Accordion auf nativen details/summary-Elementen (kein JS): Sektions-Kopf + Haarlinien-Trenner, Chevron dreht im offenen Zustand Website

Footer (Gesprächs-CTA)

section.footer-cta · v1.1.1 Großer Website-Footer als Band: große Nav-Links + Gesprächs-CTA, Trennlinie, Rechtliches/Firma/Social, Copyright — ton-neutral, Instanz wählt den Ton, Theme liefert die Werte Website

Preistabelle

section.pricing · v1.1.1 Preispläne als Karten (Highlight-Plan hervorgehoben) — auto-fit-Raster, mobil gestapelt Website

Footer

section.footer · v1.2.1 Seitenfuß mit Marke, Link-Spalten und Copyright-Zeile — Spalten stapeln mobil Website

Raster: Haupt + Seitenspalte

section.grid-two-column · v1.0.1 Standard-Aufteilung 8/4 ab md, darunter gestapelt. Zeigt zugleich, wie die Spannweite am Kind gesetzt wird. Website

Platzhalter-Fläche

section.placeholder · v1.1.1 Reservierte Sektion für noch fehlende Inhalte (Produktvisuals, Videos, Embeds): optionaler Kicker/Titel + gestrichelte Fläche mit Mono-Label und wählbarem Seitenverhältnis Website

Logo-Leiste

section.logo-cloud · v1.1.1 Referenz-Logos in einer fluiden Reihe (gedämpft, Hover farbig) Website

Zitat-Karten (Social Proof)

section.quote-card · v1.1.1 Karten mit Zitat, Person, Handle und Plattform-Hinweis — statische Social-Proof-Karten ohne externen Abruf (keine Fremd-API zur Laufzeit) WebsiteE-Mail

Bewertungen

section.reviews · v1.1.1 Review-Sektion: Zusammenfassung (große Zahl + Sterne + Verteilungs-Balken + Passform-Feedback) neben Review-Karten mit Autorin, Datum, Variante Website

Kennzahlen-Kacheln

section.stat-tiles · v1.2.1 Stat-Kacheln mit Haarlinien-Border: Mono-Label mit Status-Punkt, große Display-Zahl, Mono-Fußnote — optional mit Sektions-Kopf (Mono-Kicker + Display-Titel) WebsiteApp

Kennzahlen

section.stats · v1.1.1 Zahlen-Banner (Wert + Beschriftung) — auto-fit, mobil gestapelt Website

Kundenstimmen

section.testimonials · v1.1.1 Zitate-Raster mit Avatar (Initialen), Name und Rolle — auto-fit, mobil gestapelt Website

Developer-Portal (stillgelegt)

template.dev.portal · v1.4.0 STILLGELEGT am 2026-08-08 — ersetzt durch template.page. Das Manifest bleibt NUR, damit die 6 bereits publizierten Fassungen weiter rendern (publizierte Fassungen sind write-once und dürfen nicht brechen). Für neue Flächen NICHT verwenden: dieselben Slots wie template.page, nur eine engere bzw. weitere Erlaubnis-Liste — eine Vorlage verdient ihre Existenz durch eigene Slots, nicht durch eine eigene Erlaubnis-Liste. Website

Website Standard (stillgelegt)

template.website.standard · v1.0.0 STILLGELEGT am 2026-08-08 — ersetzt durch template.page. Das Manifest bleibt NUR, damit die 6 bereits publizierten Fassungen weiter rendern (publizierte Fassungen sind write-once und dürfen nicht brechen). Für neue Flächen NICHT verwenden: dieselben Slots wie template.page, nur eine engere bzw. weitere Erlaubnis-Liste — eine Vorlage verdient ihre Existenz durch eigene Slots, nicht durch eine eigene Erlaubnis-Liste. Website

App Shell

template.app.shell · v1.4.0 App-Seitengeruest: Kopfzeile, Seitenleiste links, Arbeitsbereich, Fusszeile — fuer Desktop-Apps und Web-Applications. Kopf und Fuss sind optional; die Beschreibung versprach sie bis 1.3.0, ohne dass es die Slots gab. WebsiteAppDesktop

Docs Shell

template.docs-shell · v1.2.3 Dokumentations-Seitengeruest: Sticky-Topbar mit Burger-Menue (mobil, natives details + Controller-Veredelung), Navigation links, Inhalt mittig, Inhaltsverzeichnis rechts (ab 1280px), Fusszeile WebsiteApp

Produkt-Kategorie

template.product.category · v1.0.1 Kategorieseite eines Shops: Brotkrumen, Einleitung, Filterleiste, Ergebnisliste, Blätterung. Die erste Vorlage, die nach der Regel vom 08.08.2026 gebaut wurde — sie hat EIGENE SLOTS (filter, results, pagination), die keine bestehende Vorlage hat. Genau das rechtfertigt eine Vorlage; eine bloß andere Erlaubnis-Liste täte es nicht. Website

Produkt-Detail

template.product.detail · v1.0.1 Detailseite eines Produkts: Pfad, Produktkopf, Beschreibung und Daten, Bewertungen, Empfehlungen. Das Gerüst sagt WELCHE REGIONEN es gibt — wie der Produktkopf innen aufgebaut ist (Galerie neben Kaufbereich), sagt section.product-stage, und wie breit die beiden sind, sagt das Raster. Drei Ebenen, drei Zuständigkeiten: KEIN Slot dieses Gerüsts greift in die Innereien eines Bausteins. Website

E-Mail Nachricht

template.email.message · v1.0.0 Standard-Aufbau einer Nachricht: Absender-Zeile oben, Inhalt in der Mitte, Rechtliches und Abmeldung unten. Die Slots akzeptieren bewusst NUR mail-freigegebene Bausteine — was in keinem Mail-Programm trägt, soll hier gar nicht erst angeboten werden. E-Mail

Seite

template.page · v1.0.1 Der Standard-Seitenaufbau: Kopf, Inhalt, Fuß. Ersetzt seit 2026-08-08 die beiden Vorlagen website.standard und dev.portal — die hatten DIESELBEN Slots und unterschieden sich nur darin, welche Bausteine sie im Inhalt zuließen. Eine Vorlage verdient ihre Existenz durch eigene Slots, nicht durch eine eigene Erlaubnis-Liste. WebsiteApp