HiveGrid-Wireframes/04 Standards/Subframe UI Standards/04_Gruppenregeln.md

Gruppenregeln

Status: Entwurf

Gruppenregeln gelten fuer Komponenten-Bereiche wie Actions, Form Inputs, Data Display, Feedback, Overlays, Navigation, Layout, Typography, Utility und Patterns.

Der Komponenten-Index ist nur eine Link- und Statusuebersicht. Wiederverwendbare Regeln stehen hier oder in 03_Benennung.

Format fuer neue Regeln

Neue Gruppenregeln sollen diese Struktur nutzen:

## Bereichsname

### Regel: [kurzer Regelname]

Status: Offen

Gilt fuer:

- [[Components/Component Name]]

Komponenten-Notizen:

| Komponente | Notiz | Status |
| --- | --- | --- |
| [[Components/Component Name]] |  | Offen |

Bereiche

Bereich	Tag	Zweck
Actions	#Actions	Aktions-Komponenten wie Buttons und Links
Form Inputs	#FormInputs	Inputs, Selects, Toggles, Upload, Field Groups
Data Display	#DataDisplay	Tables, Badges, Avatars, Cards, Empty States
Feedback	#Feedback	Alerts, Toasts, Loader, Skeletons, Error States
Overlays	#Overlays	Dialoge, Drawer, Side Panels, Confirmation Flows
Navigation	#Navigation	Sidebar, Tabs, Breadcrumbs, Page Navigation
Layout	#Layout	Cards, Divider, Collapsibles, Page Templates
Typography	#Typography	Labels und textbezogene Komponenten
Utility	#Utility	Utility Controls wie Theme Toggle
Patterns	#Patterns	Zusammengesetzte Patterns aus mehreren Komponenten

Uebergreifende Control-Regeln

Regel: Control-Hoehen fuer Button und Form Inputs

Status: Teilweise entschieden

Diese Regel definiert konkrete Hoehen fuer Button und ausgewaehlte Form-Input-Controls. Die Size-Namen selbst sind global in 03_Benennung definiert. Feste Hoehen sind bisher nur fuer Small, Medium und Large entschieden. Sie gilt fuer einzeilige Controls und Trigger, nicht fuer mehrzeilige oder stark spezialisierte Eingabeflaechen.

Size	Height	Height Mode	Status
3X Small	Offen	Offen	Werte offen
2X Small	Offen	Offen	Werte offen
Extra Small	Offen	Offen	Werte offen
Small	32px	Exact	Entschieden
Medium	36px	Exact	Entschieden
Large	48px	Exact	Entschieden
Extra Large	Offen	Offen	Werte offen
2X Large	Offen	Offen	Werte offen
3X Large	Offen	Offen	Werte offen

Gilt fuer:

• Components/Button
• Components/Button Group
• Components/Icon Button
• Components/Text Input
• Components/Number Input
• Components/Select
• Components/Multiselect
• Components/Multiselect Tags
• Components/Combobox Autocomplete
• Components/Search Input
• Components/Date Picker
• Components/Toggle Group Segmented Control

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Button	Referenz fuer Action-Control-Hoehen	Entschieden
Components/Button Group	Einzelne Buttons folgen derselben Size-Regel	Entschieden
Components/Icon Button	Square Control folgt derselben Size-Regel; Breite entspricht Hoehe	Entschieden
Components/Text Input	Input-Hoehe folgt derselben Size-Regel	Entschieden
Components/Number Input	Einzeiliger Input folgt derselben Size-Regel	Entschieden
Components/Select	Select-Hoehe folgt derselben Size-Regel	Entschieden
Components/Multiselect	Control-Hoehe folgt derselben Size-Regel	Entschieden
Components/Multiselect Tags	Tags/Chips muessen zur Control-Hoehe passen	Offen
Components/Combobox Autocomplete	Trigger/Input folgt derselben Size-Regel	Entschieden
Components/Search Input	Suchfeld folgt derselben Size-Regel	Entschieden
Components/Date Picker	Single-date Trigger folgt derselben Size-Regel; Range-Version separat klaeren	Teilweise entschieden
Components/Toggle Group Segmented Control	Erstmal gleiche Hoehen; spaeter visuell pruefen	Offen

Actions

Regel: Actions nutzen Action-Sprache

Status: Offen

Gilt fuer:

• Components/Button
• Components/Button Group
• Components/Link

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Button	Hauptkomponente fuer Actions	Offen
Components/Button Group	Gruppierte Actions	Offen
Components/Link	Unterschied zwischen Link- und Button-Verhalten klaeren	Offen

Form Inputs

Regel: Form Inputs teilen eine Field-Anatomy

Status: Entschieden

Gilt fuer Komponenten mit #FormInputs, wenn sie in einem Field-Kontext mit Label, Help text oder Message verwendet werden. Die Regel steuert die aeussere Field-Struktur, nicht die interne Geometrie des eigentlichen Controls.

Field-Anatomy:

Element	Name in der Konvention	Position	Typografie / Abstand	Status
Label	label	Oberhalb von Help text oder Control	Abstand zu helpText: 8px	Entschieden
Help text	helpText	Zwischen Label und Control	Abstand zum Control: 6px	Entschieden
Input / Control	Komponenten-Control	Zwischen Help text und Message	Abstand zu message: 4px	Entschieden
Message	message	Unterhalb des Controls	12px, Medium	Entschieden

Naming:

• Der untere Field-Text heisst immer message.
• message wird fuer Props, Slots, Layer-Namen und Dokumentation verwendet.
• Der untere Field-Text heisst nicht label, helper, helpText oder massage.
• helpText ist ausschliesslich der Hilfetext oberhalb des Controls.

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Text Input	Hauptreferenz fuer Field-Anatomy	Entschieden
Components/Textarea	Mehrzeilige Texteingabe; nutzt dieselbe aeussere Field-Anatomy	Entschieden
Components/Number Input	Einzeiliges Zahlenfeld mit optionalen Steppern, Prefix oder Suffix	Entschieden
Components/Select	Auswahlfeld	Entschieden
Components/Multiselect	Auswahlfeld mit mehreren Werten	Entschieden
Components/Multiselect Tags	Mehrfachauswahl mit sichtbaren Tags/Chips	Entschieden
Components/Combobox Autocomplete	Textfeld mit Such- und Auswahlverhalten	Entschieden
Components/Search Input	Spezialisierte Texteingabe fuer Suche	Entschieden
Components/Date Picker	Single-date Field nutzt die Field-Anatomy; Range-Version separat klaeren	Teilweise entschieden
Components/File Upload	Spezialisierter Input mit gleicher aeusserer Field-Anatomy	Entschieden
Components/Input OTP Pin Code	Spezialisiertes Code-Field mit gleicher aeusserer Field-Anatomy	Entschieden
Components/Form Group Input Group	Wrapper fuer Label, Help text, Control und Message	Entschieden
Components/Checkbox	Nutzt die Field-Anatomy nur, wenn Label, Help text oder Message im Field-Kontext vorkommen	Entschieden
Components/Checkbox Group	Nutzt die Field-Anatomy fuer Gruppen-Label, Help text und Message	Entschieden
Components/Radio Group	Nutzt die Field-Anatomy fuer Gruppen-Label, Help text und Message	Entschieden
Components/Switch	Nutzt die Field-Anatomy nur im Field-Kontext; interne Switch-Struktur bleibt separat	Entschieden
Components/Slider Range Slider	Nutzt die Field-Anatomy nur im Field-Kontext; Slider-Geometrie bleibt separat	Entschieden
Components/Toggle Group Segmented Control	Nutzt die Field-Anatomy nur im Field-Kontext; interne Toggle-Geometrie bleibt separat	Entschieden

Regel: Form Inputs nutzen definierte Standardbreiten

Status: Entschieden

Diese Regel definiert Min Width und Default Max Width fuer textnahe Form Inputs. Fill Container ist optional: Die Komponente darf bei Bedarf die verfuegbare Containerbreite ausfuellen, soll aber nicht automatisch ohne Kontext auf volle Breite gehen.

Feld	Min Width	Default Max Width	Fill Container	Status
Components/Text Input	12rem / 192px	20rem / 320px	optional	Entschieden
Components/Textarea	12rem / 192px	36rem / 576px	optional	Entschieden
Components/Number Input	12rem / 192px	12rem / 192px	optional	Entschieden
Components/Select	12rem / 192px	20rem / 320px	optional	Entschieden
Components/Multiselect	12rem / 192px	24rem / 384px	optional	Entschieden
Components/Multiselect Tags	12rem / 192px	36rem / 576px	optional	Entschieden
Components/Combobox Autocomplete	12rem / 192px	24rem / 384px	optional	Entschieden
Components/Search Input	12rem / 192px	24rem / 384px	optional	Entschieden
Components/Date Picker	12rem / 192px	20rem / 320px	optional	Entschieden fuer Single Date; Range offen

Regel: Form Inputs nutzen horizontales Innenpadding

Status: Entschieden

Diese Regel definiert horizontales Innenpadding fuer einzeilige textnahe Form Inputs. Sie gilt fuer Inputs mit Textinhalt und optionale linke oder rechte Icons. Textarea wird nicht ueber diese Regel gesteuert, weil vertikales Padding und mehrzeilige Hoehe separat geklaert werden muessen.

Fall	Wert	Mode	Status
Linkes Innenpadding ohne Icon	12px	Exact	Entschieden
Rechtes Innenpadding ohne Icon	12px	Exact	Entschieden
Linker Rand zu linkem Icon	12px	Exact	Entschieden
Rechtes Icon zu rechtem Rand	12px	Exact	Entschieden
Icon zu Text	8px	Exact	Entschieden

Gilt fuer:

• Components/Text Input
• Components/Number Input
• Components/Select
• Components/Multiselect
• Components/Multiselect Tags
• Components/Combobox Autocomplete
• Components/Search Input
• Components/Date Picker

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Text Input	Standard-Referenz fuer einzeiliges Padding	Entschieden
Components/Number Input	Folgt dem einzeiligen Input-Padding	Entschieden
Components/Select	Folgt dem einzeiligen Input-Padding	Entschieden
Components/Multiselect	Folgt dem einzeiligen Input-Padding	Entschieden
Components/Multiselect Tags	Padding muss mit Tags/Chips zusammen funktionieren	Entschieden
Components/Combobox Autocomplete	Folgt dem einzeiligen Input-Padding	Entschieden
Components/Search Input	Folgt dem einzeiligen Input-Padding	Entschieden
Components/Date Picker	Single-date Trigger folgt dem einzeiligen Input-Padding; Range-Version separat klaeren	Teilweise entschieden

Regel: Form Inputs nutzen Radius Small

Status: Entschieden

Diese Regel definiert den Standard-Corner-Radius fuer Form Inputs. Der Token ist global in 03_Benennung definiert.

Property	Token	Wert	Mode	Status
Corner Radius	Radius Small	4px	Exact	Entschieden

Gilt fuer:

• Components/Text Input
• Components/Textarea
• Components/Number Input
• Components/Select
• Components/Multiselect
• Components/Multiselect Tags
• Components/Combobox Autocomplete
• Components/Search Input
• Components/Date Picker

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Text Input	Nutzt Radius Small	Entschieden
Components/Textarea	Nutzt Radius Small; mehrzeilige Hoehe separat klaeren	Entschieden
Components/Number Input	Nutzt Radius Small	Entschieden
Components/Select	Nutzt Radius Small	Entschieden
Components/Multiselect	Nutzt Radius Small	Entschieden
Components/Multiselect Tags	Nutzt Radius Small	Entschieden
Components/Combobox Autocomplete	Nutzt Radius Small	Entschieden
Components/Search Input	Nutzt Radius Small	Entschieden
Components/Date Picker	Single-date Trigger nutzt Radius Small; Range-Version separat klaeren	Teilweise entschieden

Data Display

Regel: Data Display braucht Regeln fuer Inhaltszustaende

Status: Offen

Gilt fuer Komponenten mit #DataDisplay.

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Table	Hauptreferenz fuer Loading, Empty, Hover und Selection States	Offen
Components/Badge Feedback	Benennungsueberschneidung mit Feedback pruefen	Offen
Components/Empty State	Kann auch zu Feedback gehoeren	Offen

Feedback

Regel: Feedback-Severity-Namen muessen konsistent bleiben

Status: Offen

Gilt fuer Komponenten mit #Feedback.

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Banner Alert	Beziehung zu Components/Alert klaeren	Offen
Components/Toast	Temporaeres Feedback	Offen
Components/Alert	Inline oder persistentes Feedback	Offen

Overlays

Regel: Overlays brauchen klare Verhaltensregeln

Status: Offen

Gilt fuer Komponenten mit #Overlays.

Komponenten-Notizen:

Komponente	Notiz	Status
Components/Modal Dialog	Hauptkandidat fuer Dialog-Regeln	Offen
Components/Confirm Dialog	Bestaetigungs-Flow fuer kritische Actions	Offen
Components/Slide Over Side Panel	Side-Panel-Verhalten	Offen

Navigation

Noch keine Gruppenregel entschieden.

Layout

Noch keine Gruppenregel entschieden.

Typography

Noch keine Gruppenregel entschieden.

Utility

Noch keine Gruppenregel entschieden.

Patterns

Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten

Status: Offen

Gilt fuer Eintraege mit #Patterns.

Komponenten-Notizen:

Pattern	Notiz	Status
Components/Bulk Actions Table Multi Select	Nutzt Table, Checkbox, Button, Confirm Dialog	Offen
Components/Search Filter Bar	Nutzt Search Input, Select, Badge, Button	Offen
Components/Error Recovery	Nutzt Feedback- und Retry-Patterns	Offen