14 KiB

Raw Blame History

Komponentenvertraege

Jede Komponente hat einen festen Aufbau. Freie Interpretation ist ausgeschlossen. Implementierung siehe assets/components.css.

Inhaltsverzeichnis

Buttons
Icon-Button
Eingaben
Segmented Control und View Switcher
Command Band
Navigationseintrag
Listenzeile
Tile
Tabelle
Facet Rail
Inspector
Floating Window
Dialog, Drawer, Popover
Lane-Spalte
Empty State
Zaehler und KPI
Ergebnisblock (Results)
Donut-Metrikkarte

1. Buttons

Variante	Klasse	Einsatz
Primary	`.btn.btn--primary`	genau eine Primaeraktion je Ansicht
Secondary	`.btn.btn--secondary`	alle weiteren Aktionen
Ghost	`.btn.btn--ghost`	Aktionen in dichten Kontexten, Toolbars
Destructive	`.btn.btn--destructive`	irreversible Datenaktionen

Hoehe --control-h, Radius --radius-sm, Innenabstand 12 px, Text 13 px, Gewicht 500.
Beschriftung: Verb plus Objekt, keine Versalien, keine Icons ohne Text ausser im Icon-Button.
Buttonbreite folgt dem Text. Kein width: 100% ausser in einem Drawer unter 480 px Breite.
Loeschen ist immer --destructive, nie Primary, auch nicht in einer Tabellenzeile.
In einer Buttongruppe steht Primary rechts.

Verboten: mehr als ein Primary je Ansicht, ein Primary ueber die volle Breite eines Detailpanels, Buttons mit Bandfarbe ausserhalb des Command Band.

2. Icon-Button

Quadratisch --icon-btn, transparent, Rahmen erst bei Hover.
Immer aria-label. Immer Tooltip nach 400 ms.
Umschaltbar per aria-pressed. Aktiv: --surface-selected plus Akzentrahmen.
Die Kuerzel F (Bookmark) und R (Results) werden durch Icons plus Tooltip ersetzt. Einbuchstabige Buttons sind ohne Vorwissen nicht lesbar.

3. Eingaben

Input, Select, Textarea: Hoehe --control-h, Radius --radius-sm, Rahmen --border-default, Flaeche --surface-input.
Label: 11 px Versalien in --text-muted, direkt ueber dem Feld, 4 px Abstand.
Pflichtkennzeichnung als Text Pflichtfeld rechts im Label, nie als Sternchen.
Textarea: maximal vier Controlhoehen, vertikal veraenderbar. Eine Textarea ueber 150 px Standardhoehe ist ein Layoutfehler.
Fehlerzustand: aria-invalid="true", roter Rahmen plus Fehlertext darunter in 12 px.
Technische Werte immer .mono.

Formularlayout: zweispaltiges Raster, Spaltenbreite maximal 480 px, Zeilenabstand 12 px. Kein Formular in einer zentrierten schmalen Karte auf leerer Flaeche.

4. Segmented Control und View Switcher

Segmented Control: 2 bis 5 sich ausschliessende Optionen, aktive Option in --accent.
Der View Switcher in Work (my Workspace, Datensaetze, Kacheln, Raster, Rohdaten) ist ein Segmented Control und wechselt ausschliesslich die Darstellung derselben Datenmenge.
Beim Wechsel bleiben erhalten: Filter, Sortierung, Suche, Auswahl, Scrollposition des Objekts, Bookmarks. Wer den Zustand verliert, hat eine Seitennavigation gebaut, keine Ansicht.
Exportformate (CSV, MD, HTML) sind Aktionen, keine Ansichten. Sie gehoeren in ein Export-Popover hinter einen Secondary-Button und nicht in den View Switcher.

5. Command Band

Eine bis zwei Zeilen, Zeilenhoehe --band-row-h.
Alle Filter- und Scope-Controls tragen .band__control. Kein Mischbetrieb aus Band-Controls und neutralen Selects in derselben Zone. Das ist der auffaelligste Fehler im heutigen Work.
Der Freitextfilter .band__search ist bewusst neutral, weil er eine Eingabe ist und keine Auswahl.
Aktive Filter zeigen ihre Trefferzahl (Severity: Critical · 17).
Zuruecksetzen ist ein .btn--secondary links im Band, nicht bandfarben.
Reihenfolge fest: Zuruecksetzen, Primaerfilter, Fachfilter, Quellfilter, Freitext.

6. Navigationseintrag

Hoehe 32 px, Innenabstand 12 px, Icon 16 px, Text 13 px.
Aktiv: 2-px-Akzentkante links, --surface-selected, --text-primary. Nicht die Textfarbe wechseln, weil eine farbige Navigationsschrift mit Zustandsfarben kollidiert.
Kein Badge, kein Zaehler in der Navigation. Zaehler gehoeren in den Context Strip.

7. Listenzeile

Aufbau in drei Spalten: Severity-Glyph, Textblock, Aktionen.

⬢  Permission changes on AdminSDHolder object              ⚑  ⧉
   [CRITICAL] [IOE FOUND] [AD DELEGATION]   ● fail

Mindesthoehe zwei Zeilenhoehen, Titel maximal zwei Zeilen, danach Ellipse.
Metazeile: Badges in fester Reihenfolge, danach Outcome.
Status: IOE Found als Fliesstext ist zu ersetzen. Die Information gehoert in Badge und Outcome.
Aktionen erscheinen dauerhaft, nicht erst bei Hover. Hover-only-Aktionen sind nicht tastaturfaehig.
Zeilenabstand 4 px. Keine Schatten, keine abgerundeten Kartenoptik ueber --radius-sm hinaus.

8. Tile

Raster repeat(auto-fill, minmax(260px, 1fr)), Abstand 8 px.
Feste Hoehe --tile-h. Alle Tiles einer Zeile sind gleich hoch. Kein Leerraum am Tile-Ende.
Drei Zeilen: Kopf (Glyph plus Titel, zwei Zeilen), Badgezeile (einzeilig, Ueberlauf +n), Fusszeile (Outcome links, Aktionen rechts, 1-px-Trennlinie darueber).
Aktionen ausschliesslich in der Fusszeile. Aktionen am oberen rechten Rand kollidieren mit dem Titel.
Hover: Rahmen wird --border-strong, Flaeche --surface-hover. Kein Anheben, kein Schatten, kein Scale.
Auswahl: 2-px-Akzentrahmen plus --surface-selected. Die Severity-Kante bleibt sichtbar.

9. Tabelle

Kopfzeile klebend, --surface-panel-raised, 11 px Versalien in --text-muted.
Kopf und Koerper in derselben Groessenklasse.
Textspalten linksbuendig. Rechtsbuendig ausschliesslich numerische Spalten mit tabular-nums. Rechtsbuendige Titelspalten sind ein Fehler.
Erste Spalte ist der Objekttitel und traegt die Severity-Kante.
Severity als Badge, Outcome als Glyph plus Text, Review als Chip. Kein Klartext fuer Severity.
Zeilenauswahl per Klick, Mehrfachauswahl per Shift und Ctrl, Batch-Leiste erscheint im Context Strip.
Sortierbare Spalten mit Pfeilindikator und aria-sort.
Spaltenbreiten veraenderbar, Auswahl der sichtbaren Spalten ueber ein Popover rechts im Kopf.
Virtualisierung ab 200 Zeilen. Paginierung nur, wenn der Server sie erzwingt.
Die Tabelle nutzt die volle verfuegbare Breite. Kein max-width, keine umgebende Karte.

10. Facet Rail

Breite --facetrail-w, nur im Archetyp Datentabelle.
Gruppen mit 11-px-Versallegende, Eintraege in --control-h-sm.
Jeder Eintrag: Checkbox, Label, rechtsbuendige Trefferzahl in .mono.
Aktive Facetten erscheinen zusaetzlich als entfernbare Chips oben im Ergebnisbereich.
Die Rail ersetzt das Command Band nicht. Scope- und Enum-Filter bleiben im Band, zaehlende Mehrfachfacetten stehen in der Rail.
Ein- und ausklappbar, Zustand wird gespeichert.

11. Inspector

Breite --inspector-w, persistent, nicht modal.
Kopf klebend: Titel, Badgezeile, Aktionszeile.
Sektionen mit 11-px-Versallegende und 1-px-Trennlinie.
Feste Sektionsreihenfolge fuer Findings:
1. Identitaet (Titel, Severity, IOE, Kategorie, Quelle)
2. Bearbeitung (Status, Prioritaet, Owner, Frist)
3. Result Message und Trefferzahl
4. Description
5. Remediation
6. Likelihood of Compromise
7. MITRE-Zuordnung
8. Provenienz (Tool, Scanbericht, Mappingversion, Profilversion, Importzeitpunkt)
Fliesstextbloecke in 13 px mit Zeilenhoehe 1.55 und maximal 76 Zeichen Zeilenlaenge.
Rohfelder und vollstaendige Scannerattribute in einer eingeklappten Sektion am Ende.

12. Floating Window

Fuer Results, weil Evidenz und Hauptinhalt parallel gebraucht werden.

Nicht modal, verschiebbar, groessenveraenderlich, mehrfach gleichzeitig moeglich.
Titelleiste --surface-shell, 44 px, Titel in 12 px Versalien, Schliessen rechts. Die Titelleiste ist niemals farbig. Violett oder Teal als Titelbalken ist ein Fehler.
Titel immer nach demselben Schema: RESULTS · {Findingtitel} · {n}.
Mindestgroesse 480 mal 320 px, Maximum 90 vw mal 80 vh.
Rahmen 1 px --border-strong, Radius --radius-md, --shadow-overlay.
Inhalt ist immer der Ergebnisblock aus Abschnitt 17.
Escape schliesst, Fokus kehrt zum ausloesenden Button zurueck.
Unter 1024 px Viewportbreite wird das Fenster automatisch zum Vollbild-Drawer.

17. Ergebnisblock (Results)

Verbindliche Darstellung jedes Ergebnisses im gesamten Assessor, unabhaengig vom Scanbericht. PingCastle, Purple Knight, Maester, CIS-CAT und MSCT sehen hier identisch aus. Eine werkzeugeigene Ergebnisform ist ein Fehler.

Aufbau von aussen nach innen:

Fundname als Ueberschrift des Fensterrumpfs (.linked-results-heading), einmal je Fenster.
Je Ergebnis ein Block (.result-block): 18 px Innenabstand, 1 px --line, Flaeche --panel. Keine Warnfarbe - der Inhalt ist der Befund, kein Hinweis.
Blocktitel (.result-block__title): --ui-reading-heading-size, --ui-strong-weight, --heading. Werkzeugtext traegt Test result, ein verknuepftes Blatt seinen Blattnamen.
Inhalt: Fliesstext ueber RichTextValue (Ueberschriften, Aufzaehlungen, Verweise, Code) und/oder Tabellen.

Tabellen im Ergebnisblock:

Immer .rich-text-table in .rich-text-table-wrap. Die allgemeine Tabellenform mit klebendem Kopf und Unterstreichungen wird hier nicht verwendet.
Zellen: 1 px --line rundum, oben ausgerichtet, --ui-control-size.
Kopfzellen: Versalien, --ui-label-weight, --ui-label-tracking, Tinte --heading, Flaeche --surface-inset, kein Umbruch, nicht klebend.
Der Behaelter rollt waagerecht; die Tabelle waechst ueber min-width: 100% auf ihre Inhaltsbreite.

Scrollbalken sind Statusanzeige, nicht Zierrat:

Ueberlaufende Ergebnisbehaelter (.rich-text-table-wrap, .results-window-body) deklarieren eigene Scrollbalken und schalten damit die ueberlagerten, erst beim Scrollen sichtbaren Balken ab.
Sobald der Inhalt ueberlaeuft, ist die Rollflaeche dauerhaft sichtbar. Ohne sie ist eine nur teilweise sichtbare Ergebnistabelle von einer abgeschnittenen Tabelle nicht zu unterscheiden.
Rollflaeche --surface-inset, Griff --line-strong, im Hover --muted, Breite 11 px.

Overlay	Einsatz	Modal
Popover	kurze lokale Auswahl, Spaltenkonfiguration	nein
Drawer	Zusatzkontext bei begrenzter Breite	nein
Inspector	dauerhaftes Arbeiten neben dem Inhalt	nein
Floating Window	paralleler Vergleich, Results	nein
Dialog	blockierende Entscheidung, Loeschbestaetigung	ja

Ein Dialog ist kein allgemeiner Detailcontainer. Er hat Titel, kurzen Text, hoechstens zwei Aktionen, geschlossenen Fokuszyklus und gibt den Fokus beim Schliessen an den Ausloeser zurueck.

14. Lane-Spalte (Archetyp Board)

Feste Breite 320 px, horizontales Scrollen der Spaltenmenge.
Spaltenkopf klebend: Name, Trefferzahl in .mono, Auswahl-Checkbox.
Karten in der Spalte sind Tiles mit derselben Struktur wie in der Kachelansicht, nur mit --tile-min-w: 100%. Kein eigener Kartentyp.
Verbindungspfeile zwischen Spalten sind 1-px-Linien in --border-default, keine Farbe.
Der Hinweis, dass die Reihenfolge eine Arbeitsannahme entlang der MITRE-Taktiken ist und keine bestaetigte Kausalitaet, steht dauerhaft im Context Strip.
Kein Kanban-Look: keine farbigen Spaltenkoepfe, keine Drag-Schatten, keine abgerundeten Spaltenflaechen.

15. Empty State

Linksbuendig, maximal 480 px breit, gestrichelter Rahmen, 16 px Innenabstand.
Titel 14 px, ein Satz Erklaerung 12 px, genau eine Aktion.
Keine Illustration, keine zentrierte Vollbildflaeche, kein Blocksatz.
Bei gefilterter Leermenge lautet der Text, welcher Filter greift, plus Aktion Filter zuruecksetzen.

16. Zaehler und KPI

Zaehler stehen inline im Context Strip: 127 angezeigt · 0 markiert · 474 gesamt.
Zahlen immer .mono mit tabular-nums.
Eine KPI-Kachel ist nur zulaessig, wenn sie einen Vergleichswert traegt (Vorscan, Zielwert, Anteil). Eine Kachel mit einer einzelnen Zahl ist eine dekorative Flaechenfuellung und verboten.
Vor jedem Diagramm ist die Frage zu beantworten: Welche Entscheidung faellt danach in fuenf Sekunden leichter? Ohne Antwort werden Tabelle, Liste oder Inline-Zaehler verwendet.

18. Donut-Metrikkarte

Bindende Referenz ist Design/ChatGPT Image Aug 5, 2026, 01_12_23 PM.png. Freie Donutvarianten sind ausgeschlossen.

Ausschliesslich DonutMetricCard und .donut-metric-rack verwenden. Keine lokal neu gezeichneten Kreis-, Gauge- oder Donutvarianten.
Ein Rack zeigt gleich breite dunkle Einzelkarten mit gemeinsamem dunklem Rahmen, 8-px-Abstand, 12-px-Innenabstand und den Tokenradien --donut-rack-radius beziehungsweise --donut-card-radius.
Jede Karte enthaelt exakt: kurzen farbigen Kopfstrich, linksbuendigen Titel, 270-Grad-Grundbogen, farbigen Fortschrittsbogen mit runden Enden, zentralen absoluten Wert und darunter den gleichfarbigen Prozentwert.
Die kompakte Gesamtproportion verwendet 196 px Mindesthoehe und einen maximal 128 px grossen Ring; lokale Ansichten duerfen diese Werte nicht eigenstaendig vergroessern.
Der 0-Prozent-Zustand zeigt den farbigen Startpunkt. 100 Prozent fuellt den gesamten 270-Grad-Bogen. Animation dauert 700 ms; bei prefers-reduced-motion bleibt der Endzustand statisch sichtbar.
Verbindliche Reihenfolge und Farben fuer Result Status: Results All blau, Deviation orange, Passed gruen, Not Applicable violett, Not Run grau, Error rot. Farben stammen ausschliesslich aus den --donut-*-Tokens.
Results All ist die 100-Prozent-Referenz. Alle weiteren Anteile werden unabhaengig gegen All berechnet; sie muessen fachlich nicht gemeinsam 100 Prozent ergeben.
Dark- und Lightmode verwenden dieselbe Geometrie und Informationshierarchie. Der Lightmode nutzt ausschliesslich die hellen --donut-*-Themewerte; Statusfarben werden fuer lesbaren Textkontrast abgedunkelt, ihre Bedeutung und Reihenfolge bleiben gleich.
Desktop zeigt sechs Karten in einer Zeile. Unter 1100 px folgen drei, unter 760 px zwei Karten je Zeile. Titel, Wert und Prozent duerfen nicht entfallen.

14 KiB Raw Blame History