Buttons

Varianten und Zustände. Fokus per Tab-Taste sichtbar (Ring), Hover/Aktiv über die Maus, deaktivierte Buttons ausgegraut.

Für destruktive Aktionen ohne Dialog — gedrückt halten füllt den Balken; erst dann feuert px:hold-complete.

Formulare

Jedes Feld hat ein Label. Fehler werden nicht nur farblich, sondern mit Icon und Text ausgewiesen. Zustände: Ruhe, Fokus (Ring), deaktiviert, Fehler.

Karten & Kennzahlen

Generische Oberflächen-Karte (.px-card, optional --link mit Hover) im Kartenraster (.px-cards) und Kennzahl-Kachel (.px-stat) — für Detailpanels und Dashboards.

Toolbar & Filter

Suche links, Ansichts-Umschalter und Ergebniszähler rechts. Filter-Chips mit Zähler; aktive Chips tragen die Akzentfläche.

Tabs & Subnav

Horizontale Tabs für gleichrangige Unteransichten (aktiv = Akzent-Unterlinie, Punkt = Handlungsbedarf); vertikale Subnav für Einstellungsbereiche (klebt beim Scrollen, aktiv hebt sich als Kachel ab).

Datentabelle

Zwei Ausprägungen: die klassische Tabelle (in einer Card, sortierbar, fixierbare Kopfzeile) und die schwebende Tabelle (.px-ftable), die ohne Rahmen ruhig auf dem Hintergrund liegt und erst beim Hover als Kachel abhebt. Beträge rechtsbündig mit Tabellenziffern.

Beschreibungsliste

Feld/Wert-Paare für Detailansichten: Label links, Wert rechts, dünne Trennlinien.

Badges & Status

Auf Basis des verallgemeinerten Zustandsvokabulars: neutral · active · success · waiting · critical. Jedes Tool bildet seine Fachzustände darauf ab.

Empty State

Wenn nichts da ist — mit Aktion oder kompakt (in Card/Liste).

Overlays

Modals sind zentral und standardmässig grosszügig breit (920px). Escape und Abbrechen schliessen immer; ein Hintergrundklick schliesst nur bei data-px-dismiss, sonst ist das Modal gelockt (gut für Formulare). Toast unten mit Fortschrittsbalken (Hover pausiert) und Copy-Icon. Beim Öffnen setzt das JS body.px-modal-open (sperrt das Scrollen des Hintergrunds).

App-Shell

Schwebende Sidebar (Brand, Nav mit aktivem/Hover-Zustand, User-Menü, Einklappen) und Content mit Seiten-Header. Die Demo-Seite selbst nutzt genau diese Shell; hier als eingerahmte Vorschau.

Auth / Login

Split-Screen: links Marketing-Panel mit schräger Trennung, rechts das Formular mit Fehlermeldung, „Angemeldet bleiben" und Alt-Link. Eigene Seite: auth.php.

Druck-Grundlage

Generisches A4-Blatt (.px-sheet) als Basis für spätere Rechnungsausgabe. Im Druck blendet das Kit die App-Chrome aus; .px-no-print versteckt Elemente im Druck, .px-print-only zeigt sie nur dort, .px-print-color erzwingt Farben. Unten verkleinerte Vorschau.