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.

Sichtbar ist stets eine Kit-Darstellung; das native Element (Kalender, Zeitrad, Datei-Dialog, Range, Zahlenfeld) bleibt verborgener Wertträger für name/value. Ohne JavaScript greift die native Fallback-Bedienung.

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.

.px-card__body ist der semantische Inhalts-Wrapper; in einer normalen Karte ohne eigenes Padding, in einer randlosen Karte polstert er den Inhalt selbst.

Ergebnis-Panel (Figure)

Weiches, gerundetes Panel für eine hervorgehobene Kennzahl: Label + grosser Mono-Wert, optional Icon, Hinweis, Zweitwert und ein Fuss für ein kleines Steuerelement. Ton über Varianten (--accent / --success / --critical / neutral), rein aus Kit-Tokens. Abgrenzung zu .px-stat: die Kennzahl-Kachel ist die kleine KPI im Raster, .px-figure das einzelne, betonte Ergebnis mit Ton und optionalem Fuss-Control.

Zugangsdaten-Panel

Kopierbares Feld-Panel für Schnellzugriff auf Postfach-Zugangsdaten: je Zeile ein Wert (.px-cred__value, ganze Fläche kopiert), plus maskierte Passwortzeile mit Aufdecken- und Kopieren-Knopf. Das Raster (.px-cred-grid) füllt automatisch; eine Karte ist .px-cred. Copy-/Reveal-Logik liefert das konsumierende Tool — hier zur Vorschau minimal verdrahtet.

Toolbar & Filter

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

Toolbar mit .px-toolbar__title links und mehreren Aktions-<form>s in .px-toolbar__actions rechts — die Aktionen bleiben in einer Zeile, statt zu stapeln.

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.

Grössere, zentrierte Zähl-Pille für das „OFFEN 11"-Muster — Anzahl neben einer Überschrift. Einstellig rund, mehrstellig als Pille; vertical-align:middle richtet sie an grossem Titeltext aus (nicht „tiefgestellt"). Weiche Töne oder --solid (kräftig, weisser Text).

Empty State

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

.px-empty--inline für kleine Hinweise innerhalb einer Karte oder Liste — deutlich weniger Höhe als der Seiten-Empty-State.

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.