# 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:

```md
## 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 |