toolctrl-labs/HiveGrid-Wireframes
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize repo structure and standards references

Browse Source
This commit is contained in:
david committed 2026-06-29 05:03:42 +02:00
1 parent 3cb93a81be
commit be2054274d
5885 files changed
+2588 -195
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

04 Standards/README.md
+17
View File
@@ -0,0 +1,17 @@
# Standards
Dieser Bereich sammelt dauerhafte UI-, Layout- und Subframe-Standards.
Er ist nicht der Ort fuer konkrete Ticket-Flows oder einzelne Screen-Entscheidungen.
## Inhalt
| Pfad | Zweck |
|---|---|
| `Subframe UI Standards/` | eigenes Standards-Projekt fuer Subframe-, Komponenten- und Layout-Standards |
## Regel
Standards werden nur geaendert, wenn David explizit daran arbeiten will oder eine systemweite Regel vorher validiert wurde.
Normale Screen-/Flow-Arbeit dokumentiert Entscheidungen im jeweiligen Wireframe-Paket, nicht automatisch hier.
04 Standards/Subframe UI Standards/00_HiveGrid-Einordnung.md
+83
View File
@@ -0,0 +1,83 @@
# HiveGrid-Einordnung
Status: aktiv
Datum: 2026-06-29
Die Subframe UI Standards sind Teil des HiveGrid-Wireframe-Repos, bleiben aber ein eigenes Standards-Projekt.
## Zweck
Die Subframe UI Standards dokumentieren Standards fuer:
- Subframe Component Library
- komponentennahe UI-Regeln
- Layout- und Spacing-Standards
- Control-Groessen
- Field-Anatomy
- Overlay-, Dialog-, Table- und State-Konventionen
- Subframe-Komponentenlinks und Komponenten-Notizen
Sie sind die zentrale Stelle fuer dauerhaft gueltige Subframe-, Komponenten- und Layout-Standards.
## Abgrenzung zu HiveGrid Screen-Regeln
Das HiveGrid Screen-Regelwerk in `01 Regeln/Screen Agent Workflow.md` und `01 Regeln/Wireframing Playbook.md` regelt:
- wie Flows geplant werden
- wie David Entscheidungen validiert
- wie Screen-Dateien, Canvas und Tracker synchron bleiben
- wann Subframe benutzt werden darf
- wie Error States, Backlog und Ticket-Handoffs dokumentiert werden
Die Subframe UI Standards regeln dagegen:
- wie UI-Bausteine, Komponenten und Layout-Standards in Subframe gedacht werden
- welche Layout-/Spacing-/Control-Regeln als Systemstandard gelten
- welche Komponentenregeln langfristig wiederverwendbar sind
Beide Ebenen duerfen sich ergaenzen, aber nicht ungeprueft ueberschreiben.
## Aenderungsschutz
Dieses Standards-Projekt darf nicht nebenbei waehrend normaler Screen- oder Flow-Arbeit geaendert werden.
Aenderungen sind nur erlaubt, wenn:
1. David explizit sagt, dass an den Subframe UI Standards gearbeitet wird.
2. Eine konkrete Layout-/Komponentenentscheidung vorher mit David validiert wurde.
3. Die Aenderung im passenden Standards-Bereich dokumentiert wird.
4. Betroffene Querverweise geprueft werden.
5. `AI/08_AI-Change-History.md` aktualisiert wird, wenn eine inhaltliche Regelwerksaenderung passiert.
Nicht erlaubt:
- Komponentenregeln automatisch aus Screen-Arbeit ableiten.
- Werte aus einem Ticket ungeprueft als globale Subframe-Regel speichern.
- bestehende Komponenten-Notizen oder Gruppenregeln umschreiben, nur weil ein einzelner Screen anders aussieht.
- offene Brainstorming-Punkte als entschiedene Regel eintragen.
## Nutzung fuer D-D0b
D-D0b ist der aktuelle Ort, an dem Layout-Entscheidungen validiert werden.
Nach Validierung koennen dauerhafte Layout-Regeln aus D-D0b in die Subframe UI Standards ueberfuehrt werden.
Dauerhafte Layout-Regeln stehen danach unter `Layout/`.
Dabei muss sichtbar bleiben:
- welche Entscheidung validiert wurde
- ob sie neu ist oder aus bestehenden Komponentenregeln kommt
- ob sie Carbon nur als Referenz nutzt oder bewusst davon abweicht
- ob sie fuer alle Subframe-Screens gilt oder nur fuer bestimmte Layout-Archetypen
## Arbeitsregel fuer Agents
Vor Arbeit an diesem Standards-Projekt lesen:
1. `00_HiveGrid-Einordnung.md`
2. `00_Start.md`
3. `AI/07_AI-References.md`
4. die konkret betroffene Regeldatei
Bei Unsicherheit: erst fragen, nicht schreiben.
04 Standards/Subframe UI Standards/00_Start.md
+64
View File
@@ -0,0 +1,64 @@
# Subframe UI Standards
Status: Entwurf
Datum: 2026-06-02
Dieses Standards-Projekt dokumentiert dauerhafte Subframe-, Komponenten- und Layout-Standards fuer HiveGrid.
Seit 2026-06-29 liegt es als eigenes Standards-Projekt im HiveGrid-Wireframe-Repo.
Die HiveGrid-Einordnung und der Aenderungsschutz stehen in [[00_HiveGrid-Einordnung]].
Es dokumentiert Standards, die nicht direkt in einzelnen Screens oder in Subframe selbst geloest werden:
- Benennung
- State-Namen
- Varianten-Namen
- Size-Namen
- Defaults
- globale Component-API-Regeln
- komponenteninterne Abstaende
- Gruppenregeln
- Komponenten-Links und Notizen
Es soll wachsen, wenn echte, validierte Standards entstehen.
## Struktur
| Datei | Zweck |
| --- | --- |
| [[00_HiveGrid-Einordnung]] | Einordnung im HiveGrid-Repo, Zweck, Abgrenzung und Aenderungsschutz |
| [[01_Brainstorming]] | Rohe Ideen und offene Gedanken |
| [[02_Entscheidungen]] | Entscheidungen, die nachvollziehbar bleiben sollen |
| [[03_Benennung]] | Globale Regeln fuer Namen und Begriffe |
| [[04_Gruppenregeln]] | Regeln fuer Komponenten-Gruppen |
| [[05_Komponenten-Index]] | Link- und Statusuebersicht mit Fertig-Checkbox |
| [[06_Backlog]] | Themen fuer spaeter |
| [[07_Global-Rules]] | Globale Component-API- und Arbeitsregeln |
| [[08_Todo]] | Laufende Aufgaben, Pruefpunkte und Nacharbeiten |
| `Layout/` | Validierte Layout-, Spacing-, Dialog-, Table- und Composition-Regeln |
| [[AI/07_AI-References]] | Arbeitskontext und Ablauf fuer AI-Aenderungen |
| [[AI/08_AI-Change-History]] | AI-Verlauf fuer Aenderungen am Vault |
| `Components/` | Einzelne Komponenten-Notizen mit Subframe-Link, Bereich und Regel-Referenzen |
## Grundmodell
Standards werden so hoch wie moeglich und so spezifisch wie noetig dokumentiert.
1. Globale Benennungen stehen in [[03_Benennung]].
2. Globale Component-API-Regeln stehen in [[07_Global-Rules]].
3. Gruppenregeln stehen in [[04_Gruppenregeln]].
4. Der Komponenten-Index ist nur eine Link- und Statusuebersicht.
5. Einzelne Komponenten-Notizen stehen unter `Components/`.
6. Dauerhafte Layout-Regeln stehen unter `Layout/`, sobald sie validiert sind.
7. Laufende Aufgaben und Pruefpunkte stehen in [[08_Todo]].
8. AI-Aenderungen werden in [[AI/08_AI-Change-History]] protokolliert.
Bei Arbeit mit AI zuerst [[AI/07_AI-References]] lesen.
Wenn die Arbeit aus dem HiveGrid-Wireframe-Kontext kommt, zuerst [[00_HiveGrid-Einordnung]] lesen.
Beispiel:
- `disabled` wird global geklaert.
- Field-Anatomy-Abstaende fuer Form Inputs stehen in [[04_Gruppenregeln]].
- Text-Input-spezifische Notizen stehen in [[Components/Text Input]].
04 Standards/Subframe UI Standards/01_Brainstorming.md
+33
View File
@@ -0,0 +1,33 @@
# Brainstorming
Status: Offen
Hier landen rohe Gedanken, bevor daraus Regeln oder Entscheidungen werden.
## Ziel
Das Regelwerk soll spaeter Fragen beantworten wie:
- Wie nennen wir diesen State?
- Wie nennen wir diese Variante?
- Welche Komponenten nutzen diese Gruppenregel?
- Wo ist der Subframe-Link?
- Braucht diese Komponente eine eigene Sonderregel?
## Offene Fragen
| Frage | Bereich | Status |
| --- | --- | --- |
| Heisst die Standardgroesse `default` oder `medium`? | Benennung | Entschieden: `Medium`, kein `Default`-Name |
| Nutzen wir `disabled` oder `isDisabled`? | Prop-Benennung | Offen |
| Nutzen wir `loading` oder `isLoading`? | Prop-Benennung | Offen |
| Schreibweise fuer Code-Props: `Medium` oder `medium`? | Prop-Benennung | Offen |
| Nutzen wir `variant="default"` oder nur semantische Varianten? | Prop-Benennung | Offen |
| Heisst ein Fehler `error` oder `negative`? | Benennung | Offen |
| Heisst eine gefaehrliche Aktion `destructive` oder `danger`? | Benennung | Offen |
| Welche Regeln sind global und welche gehoeren zu Gruppen? | Struktur | Offen |
| Welche Komponenten brauchen eigene Notizen ueber Gruppenregeln hinaus? | Komponenten | Offen |
## Inspiration fuer spaeter
IBM Carbon kann spaeter fuer Spacing-Inspiration genutzt werden. Es ist aktuell noch keine Regelquelle.
04 Standards/Subframe UI Standards/02_Entscheidungen.md
+38
View File
@@ -0,0 +1,38 @@
# Entscheidungen
Status: Entwurf
Diese Datei haelt Entscheidungen fest, die spaeter wieder auffindbar sein sollen.
## Entscheidungslog
| Datum | Thema | Entscheidung | Grund | Status |
| --- | --- | --- | --- | --- |
| 2026-06-29 | HiveGrid-Integration | Die Subframe UI Standards werden als eigenes Standards-Projekt in das HiveGrid-Wireframe-Repo aufgenommen. | Layout- und Komponentenstandards sollen zentral versioniert werden, ohne die HiveGrid Screen-/Flow-Arbeitsregeln zu vermischen. | Entschieden |
| 2026-06-29 | Aenderungsschutz | Die Subframe UI Standards duerfen nicht nebenbei in normaler Screen-Arbeit geaendert werden; Aenderungen brauchen explizite Aufgabe oder validierte Entscheidung. | Es ist ein eigenes Standards-Projekt und globale Standards duerfen nicht aus einzelnen Screens abgeleitet werden. | Entschieden |
| 2026-06-02 | Speicherung | Das Regelwerk wird als Obsidian-kompatibler Markdown-Ordner gespeichert. | Es soll durchsuchbar, verlinkbar und leicht erweiterbar sein. | Entschieden |
| 2026-06-02 | Scope | Start mit Benennung, States, Varianten, Defaults, Gruppenregeln und komponenteninternen Abstaenden. | Farben, Shadows, Radius und globale Tokens werden groesstenteils in Subframe gepflegt. | Entschieden |
| 2026-06-02 | Regelmodell | Das Modell ist Global -> Gruppe -> Komponenten-Notiz. | Nicht jede Regel gilt fuer jede Komponente und Dopplungen sollen gering bleiben. | Entschieden |
| 2026-06-02 | Sprache | Der Start ist auf Deutsch, weil es fuer die gemeinsame Arbeit einfacher ist. | Spaeter kann auf Englisch umgestellt werden. | Entschieden |
| 2026-06-02 | Komponenten-Seiten | Komponenten-MDs werden fuer relevante Komponenten angelegt, aber nur leichtgewichtig mit Bereich, Subframe-Link, Regeln und Notizen. | Die Tabelle ist keine zentrale Regelquelle; sie soll nur beim Finden und Pruefen helfen. | Entschieden |
| 2026-06-02 | Komponenten-Index | `05_Komponenten-Index.md` ist nur eine Link- und Statusuebersicht mit `Fertig?`-Checkbox, nicht die Regelquelle. | Wiederverwendbares Vokabular gehoert in `03_Benennung.md`, globale API-Regeln in `07_Global-Rules.md` und Gruppenregeln in `04_Gruppenregeln.md`. | Entschieden |
| 2026-06-11 | Global Rules | Globale Component-API-Regeln werden in `07_Global-Rules.md` gesammelt. | Die Regeln gelten ueber Komponenten-Gruppen hinweg und sollen nicht mit Gruppenregeln oder Benennungen vermischt werden. | Entschieden |
| 2026-06-04 | Size-Namen | Erlaubte Size-Namen sind `3X Small`, `2X Small`, `Extra Small`, `Small`, `Medium`, `Large`, `Extra Large`, `2X Large` und `3X Large`. `Medium` ist der Default, wird aber nicht `Default` genannt. | Die Size-Namen gelten global fuer alle Komponenten, sobald eine Komponente Groessen benennt. | Entschieden |
| 2026-06-04 | Bereichsnamen | Komponentenbereiche heissen `Actions`, `Form Inputs`, `Data Display`, `Feedback`, `Overlays`, `Navigation`, `Layout`, `Typography`, `Utility` und `Patterns`. | Die Library soll eine klare, englische Taxonomie haben und `Data Display` nicht doppelt uebersetzen. | Entschieden |
| 2026-06-04 | Control-Hoehen | Fuer Button- und formularnahe Controls gelten erstmal `Small` 32px, `Medium` 36px und `Large` 48px. | Buttons, Inputs, Selects und Toggle-artige Controls sollen dieselbe Grundlogik fuer Groessen nutzen. | Entschieden |
| 2026-06-11 | Radius-Namen | Radius-Tokens heissen `Radius Small`, `Radius Medium`, `Radius Large` und `Radius Round`. Die Werte sind 4px, 8px, 12px und 9999px. | Radius-Namen sollen zentral benannt werden und nicht pro Komponente neu entstehen. | Entschieden |
| 2026-06-11 | Form Input Padding | Einzeilige textnahe Form Inputs nutzen horizontal 12px Randabstand und 8px Gap zwischen Icon und Text. | Text- und Icon-Ausrichtung soll ueber Form Inputs hinweg konsistent bleiben. | Entschieden |
| 2026-06-11 | Form Input Radius | Textnahe Form Inputs nutzen `Radius Small` mit 4px. | Form Inputs sollen eine gemeinsame Corner-Radius-Basis haben. | Entschieden |
| 2026-06-11 | Form Input Breiten | Textnahe Form Inputs bekommen definierte Min Widths und Default Max Widths; Fill Container bleibt optional. | Inputs sollen konsistente Standardbreiten haben, aber in Layout-Kontexten flexibel ausfuellen koennen. | Entschieden |
| 2026-06-20 | Control-Hoehen Scope | `Icon Button`, `Number Input`, `Search Input`, `Combobox Autocomplete` und der Single-date `Date Picker` folgen der gemeinsamen Control-Hoehen-Regel fuer `Small`, `Medium` und `Large`. | Einzeilige Controls und Trigger sollen ueber Actions und Form Inputs hinweg dieselbe Groessenlogik nutzen. | Entschieden |
| 2026-06-20 | Date Picker Basisregeln | Die Single-date Version des `Date Picker` nutzt vorerst dieselben Basisregeln wie textnahe Inputs: Standardbreite, horizontales Innenpadding und `Radius Small`. Date-range / von-bis wird separat geklaert. | Die Basisversion soll konsistent sein; Range-Varianten haben vermutlich andere Breiten und Verhalten. | Entschieden |
| 2026-06-23 | Form Field-Anatomy | Form Inputs nutzen bei Field-Kontexten die Reihenfolge `label`, `helpText`, Control und `message`. Abstaende: Label zu Help text 8px, Help text zu Control 6px, Control zu Message 4px. `message` ist 12px Medium und heisst in der Naming Convention immer `message`. | Label, Hilfetext und unterer Field-Text sollen ueber Form Inputs hinweg gleich benannt, positioniert und getaktet sein. | Entschieden |
| 2026-06-20 | Laufende Aufgaben | `08_Todo.md` sammelt konkrete Pruefpunkte und Nacharbeiten; `06_Backlog.md` bleibt fuer langfristige Themen ohne konkrete Aktion. | Offene Arbeitsfragen sollen nicht im Chat verloren gehen und vom strategischen Backlog getrennt bleiben. | Entschieden |
| 2026-06-04 | State-Namen | `default`, `hover`, `active`, `focus`, `disabled`, `loading`, `error` und `selected` sind als State-Namen zugelassen. | Subframe regelt viele States intern, aber das Regelwerk braucht konsistente Begriffe fuer Dokumentation und Varianten. | Entschieden |
| 2026-06-04 | Focus vs Selected | `focus` und `selected` bleiben getrennte States. | Focus beschreibt aktuellen Interaktionsfokus; Selected beschreibt eine Auswahl oder aktiven Zustand. Beides kann gleichzeitig auftreten. | Entschieden |
## Vorlage
| Datum | Thema | Entscheidung | Grund | Status |
| --- | --- | --- | --- | --- |
| YYYY-MM-DD | | | | Offen |
04 Standards/Subframe UI Standards/03_Benennung.md
+76
View File
@@ -0,0 +1,76 @@
# Benennung
Diese Datei gleicht nur das allgemeine Vokabular ab.
Komponentenregeln und komponentenspezifische Ausnahmen stehen in [[04_Gruppenregeln]] oder in den Komponenten-Notizen.
## Size-Namen
Diese Namen werden fuer Groessen verwendet.
`Medium` ist die Standardgroesse. Sie wird trotzdem `Medium` genannt, nicht `Default`.
Wenn eine Komponente Groessen benennt, muss sie diese Size-Namen verwenden. Eigene Size-Namen sollen nicht eingefuehrt werden, solange keine neue Benennungsentscheidung dokumentiert ist.
| Name | Bedeutung | Status | Notizen |
| ------------- | --------------------------- | ----------- | --------------------------------------------------- |
| `3X Small` | maximal kompakte Groesse | Entschieden | Nur Namensgebung |
| `2X Small` | sehr stark kompakte Groesse | Entschieden | Nur Namensgebung |
| `Extra Small` | sehr kompakte Groesse | Entschieden | Nur Namensgebung |
| `Small` | kompakte Groesse | Entschieden | |
| `Medium` | Standardgroesse | Entschieden | Medium ist der Default, heisst aber nicht `Default` |
| `Large` | grosse Groesse | Entschieden | |
| `Extra Large` | sehr grosse Variante | Entschieden | Nur Namensgebung |
| `2X Large` | sehr stark grosse Variante | Entschieden | Nur Namensgebung |
| `3X Large` | maximal grosse Variante | Entschieden | Nur Namensgebung |
## Radius-Namen
Diese Namen werden fuer Radius-Tokens verwendet.
| Name | Wert | Status | Notizen |
| --- | --- | --- | --- |
| `Radius Small` | 4px | Entschieden | |
| `Radius Medium` | 8px | Entschieden | |
| `Radius Large` | 12px | Entschieden | |
| `Radius Round` | 9999px | Entschieden | Fuer Kreise, Pills und voll runde Formen |
## Field-Namen
Diese Namen werden fuer Field-Anatomy in Form Inputs verwendet.
Die zugehoerigen Abstaende und Typografie-Regeln stehen in [[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]].
| Name | Bedeutung | Status | Notizen |
| --- | --- | --- | --- |
| `label` | Field-Label oberhalb des Controls | Entschieden | Nicht fuer den unteren Field-Text verwenden |
| `helpText` | Hilfetext zwischen Label und Control | Entschieden | Steht oberhalb des Controls |
| `message` | Unterer Field-Text unterhalb des Controls | Entschieden | Heisst immer `message`, nicht `label`, `helper`, `helpText` oder `massage` |
## State-Namen
Diese Namen werden fuer States verwendet, auch wenn Subframe viele Interaction States intern abbildet.
`Focus` und `Selected` sind nicht dasselbe: `Focus` ist der aktuelle Tastatur- oder Interaktionsfokus, `Selected` ist ein ausgewaehlter oder aktiver Zustand.
| Name | Bedeutung | Status | Notizen |
| --- | --- | --- | --- |
| `default` | Normalzustand | Entschieden | Als State-Name erlaubt, nicht als Size-Name |
| `hover` | Hover-Zustand | Entschieden | |
| `active` | gedrueckt oder aktiv | Entschieden | |
| `focus` | Fokuszustand | Entschieden | Fokus auf Interaktion/Tastatur |
| `disabled` | nicht nutzbar | Entschieden | |
| `loading` | Aktion oder Inhalt laedt | Entschieden | |
| `error` | Fehler oder Validierung | Entschieden | Nicht automatisch gleich `destructive` |
| `selected` | ausgewaehltes Element | Entschieden | Nicht dasselbe wie `focus` |
## Varianten-Namen
Diese Namen werden fuer Varianten verwendet.
| Name | Bedeutung | Status | Notizen |
| ------------- | ------------------------------- | ----------- | -------------------------------------------------------- |
| `primary` | wichtigste Aktion oder Betonung | Entschieden | Brand-gebunden; Default ist meistens Primary |
| `secondary` | zweite Aktion oder Betonung | Entschieden | Brand-gebunden; Farben spaeter klaeren |
| `tertiary` | niedrigere Betonung | Entschieden | Bleibt zusaetzlich zu `ghost` bestehen |
| `ghost` | minimale visuelle Betonung | Entschieden | Bleibt zusaetzlich zu `tertiary` bestehen |
| `destructive` | gefaehrliche Aktion | Entschieden | Fuer gefaehrliche Aktionen; nicht mit `error` vermischen |
| `neutral` | neutrale Variante | Entschieden | Neutrale/schwarze Variante |
| `success` | positives Feedback | Entschieden | |
| `warning` | Warnung | Entschieden | |
| `information` | Information | Entschieden | |
04 Standards/Subframe UI Standards/04_Gruppenregeln.md
+343
View File
@@ -0,0 +1,343 @@
# 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 |
04 Standards/Subframe UI Standards/05_Komponenten-Index.md
+87
View File
@@ -0,0 +1,87 @@
# Komponenten-Index
Status: Entwurf
Diese Datei ist eine Link- und Statusuebersicht, nicht die zentrale Regelquelle.
Regeln stehen in [[03_Benennung]] und [[04_Gruppenregeln]]. Komponenten-spezifische Notizen stehen in den verlinkten Component-Dateien.
## Komponenten
| Bereich | Komponente | Lokale Notiz | Subframe | Fertig? |
| ------------ | -------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| Actions | Button | [[Components/Button]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe) | <input type="checkbox" checked id="60df8e"> |
| Actions | Button Group | [[Components/Button Group]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Button+Group_e0379327-50f0-4852-9ae1-ad09b4bf01d3) | <input type="checkbox" unchecked id="326cf6"> |
| Actions | Icon Button | [[Components/Icon Button]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6) | <input type="checkbox" unchecked id="21b207"> |
| Actions | Link | [[Components/Link]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Link+Button_a4ee726a-774c-4091-8c49-55b659356024) | <input type="checkbox" checked id="56f603"> |
| Form Inputs | Checkbox | [[Components/Checkbox]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Checkbox_3816e3b5-c48c-499b-b45e-0777c6972523) | <input type="checkbox" checked id="c318f5"> |
| Form Inputs | Checkbox Group | [[Components/Checkbox Group]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Checkbox+Group_f9f1b596-c6b3-4d60-aa9a-f34b353f8aa5) | <input type="checkbox" checked id="4ac26a"> |
| Form Inputs | Combobox Autocomplete | [[Components/Combobox Autocomplete]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Custom+Component_8a1be2ee-c1b7-4407-9c21-6448306d2700) | <input type="checkbox" unchecked id="0818a1"> |
| Form Inputs | Date Picker | [[Components/Date Picker]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Date+Field_8597ff0e-368d-42c9-b5bc-b22473c41104) | <input type="checkbox" unchecked id="5f6cef"> |
| Form Inputs | File Upload | [[Components/File Upload]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Upload_28a3336a-2bdd-4d1c-8dc1-75c9d6eef452) | <input type="checkbox" checked id="2754c8"> |
| Form Inputs | Form Group Input Group | [[Components/Form Group Input Group]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="0b659e"> |
| Form Inputs | Input OTP Pin Code | [[Components/Input OTP Pin Code]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Verification+Code_1a223fbe-dca0-4e44-a383-44bbc7db975d) | <input type="checkbox" checked id="80b9d8"> |
| Form Inputs | Multiselect | [[Components/Multiselect]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Multi+Select_457d3920-2559-46a2-9dfe-c5b809028265) | <input type="checkbox" checked id="78ca90"> |
| Form Inputs | Multiselect Tags | [[Components/Multiselect Tags]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Multi+Select+Tags_8e4472a6-e1eb-47a4-8c95-c911e02208bf) | <input type="checkbox" unchecked id="d6a9cf"> |
| Form Inputs | Number Input | [[Components/Number Input]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Number+Input_06ebc0c5-994e-4eac-b855-f3c6d7f1bbbf) | <input type="checkbox" checked id="44979f"> |
| Form Inputs | Radio Group | [[Components/Radio Group]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Radio+Group_c4b6300e-20b4-4f3e-8b9f-379a046674ca) | <input type="checkbox" checked id="ed1a88"> |
| Form Inputs | Search Input | [[Components/Search Input]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723) | <input type="checkbox" unchecked id="ee1a1f"> |
| Form Inputs | Select | [[Components/Select]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Select_bb88f90b-8c43-4b73-9c2f-3558ce7838f3) | <input type="checkbox" unchecked id="9691be"> |
| Form Inputs | Slider Range Slider | [[Components/Slider Range Slider]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Slider_f4092874-0320-449e-a0c5-b435987c4cfb) | <input type="checkbox" checked id="1561a4"> |
| Form Inputs | Switch | [[Components/Switch]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Switch_7a464794-9ea9-4040-b1de-5bfb2ce599d9) | <input type="checkbox" checked id="e4c5d4"> |
| Form Inputs | Text Input | [[Components/Text Input]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Text+Field_be48ca43-f8e7-4c0e-8870-d219ea11abfe) | <input type="checkbox" checked id="197ffc"> |
| Form Inputs | Textarea | [[Components/Textarea]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Text+Area_4ec05ee8-8f1c-46b2-b863-5419aa7f5cce) | <input type="checkbox" checked id="2ca9a4"> |
| Form Inputs | Toggle Group Segmented Control | [[Components/Toggle Group Segmented Control]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Toggle+Group_2026f10a-e3cc-4c89-80da-a7259acae3b7) | <input type="checkbox" checked id="7bbf20"> |
| Data Display | Avatar | [[Components/Avatar]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2) | <input type="checkbox" checked id="5c6e36"> |
| Data Display | Avatar Group | [[Components/Avatar Group]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Avatar+Group_6e7444ab-1d67-47f5-af23-1a2d3ecf1016) | <input type="checkbox" checked id="f3123b"> |
| Data Display | Badge Feedback | [[Components/Badge Feedback]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Badge+Feedback_896531e4-54ea-4e5a-8710-c30fc2ce10fb) | <input type="checkbox" unchecked id="e06288"> |
| Data Display | Badge Shortcut | [[Components/Badge Shortcut]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Badge+Shortcut_97bdb082-1124-4dd7-a335-b14b822d0157) | <input type="checkbox" checked id="b7a8c1"> |
| Data Display | Empty State | [[Components/Empty State]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_EmptyState_9fcf03a9-ada9-4a3d-80bc-87ff6ce78023) | <input type="checkbox" checked id="96fb67"> |
| Data Display | Pagination | [[Components/Pagination]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="88e2a9"> |
| Data Display | Stats Card KPI | [[Components/Stats Card KPI]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_StatKpi_63f809c7-22ef-47f8-9fb9-0f33b252be3f) | <input type="checkbox" checked id="1ff432"> |
| Data Display | Table | [[Components/Table]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Table_142dfde7-d0cc-48a1-a04c-a08ab2252633) | <input type="checkbox" unchecked id="65a190"> |
| Data Display | Tag Label | [[Components/Tag Label]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Tag+_+Label_bb114597-3b27-4c24-a34b-737c67238809) | <input type="checkbox" unchecked id="20dee9"> |
| Feedback | Alert | [[Components/Alert]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Alert_3a65613d-d546-467c-80f4-aaba6a7edcd5) | <input type="checkbox" checked id="693d02"> |
| Feedback | Banner Alert | [[Components/Banner Alert]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Alert_c836f6cf-ff90-4e2d-991f-5cc256be2b6b) | <input type="checkbox" checked id="6ad9f7"> |
| Feedback | Error State | [[Components/Error State]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Partial+page+failure_db7ae858-338b-4089-8177-2dea8e3b97fe) | <input type="checkbox" unchecked id="9e51db"> |
| Feedback | Form save retry | [[Components/Form save retry]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Form+save+retry_db7627dd-19cb-457b-bbfd-6fe16d620fe0) | <input type="checkbox" checked id="a837a9"> |
| Feedback | Loading Indicator ProgressBar | [[Components/Loading Indicator ProgressBar]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77) | <input type="checkbox" checked id="d60fe4"> |
| Feedback | Loading Indicator ProgressCircle | [[Components/Loading Indicator ProgressCircle]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Progress+Circle_91a72105-500a-46e2-997b-7e8cd29b5f81) | <input type="checkbox" unchecked id="ccd072"> |
| Feedback | Loading Indicator Skeleton | [[Components/Loading Indicator Skeleton]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Skeleton_08dee637-2ba5-4c5d-86d4-a531fd11481f) | <input type="checkbox" unchecked id="d70991"> |
| Feedback | Offline banner | [[Components/Offline banner]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Offline+banner_2582cb6e-0176-4a5c-b70f-c3bef3c7001d) | <input type="checkbox" checked id="e432ea"> |
| Feedback | Partial page failure | [[Components/Partial page failure]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Partial+page+failure_db7ae858-338b-4089-8177-2dea8e3b97fe) | <input type="checkbox" checked id="7dcdb9"> |
| Feedback | Timeout | [[Components/Timeout]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Timeout_ff21411f-6321-4139-bc92-603c625e2380) | <input type="checkbox" checked id="9faae7"> |
| Feedback | Toast | [[Components/Toast]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Toast_2c7966c2-a95d-468a-83fe-bf196b95be7a) | <input type="checkbox" checked id="bdd39f"> |
| Feedback | Stepper Progress Steps Horizontal | [[Components/Stepper Progress Steps Horizontal]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Stepper_3c5d47dc-1b1a-45d9-b244-18422d7bfb56) | <input type="checkbox" unchecked id="3c5d47"> |
| Feedback | Stepper Progress Steps Vertikal | [[Components/Stepper Progress Steps Vertikal]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Vertical+Stepper_bdc0291d-b5be-40c5-ae2f-527a868488b2) | <input type="checkbox" unchecked id="bdc029"> |
| Feedback | Tooltip | [[Components/Tooltip]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Tooltip_ccebd1e9-f6ac-4737-8376-0dfacd90c9f3) | <input type="checkbox" unchecked id="318e85"> |
| Overlays | Confirm Dialog | [[Components/Confirm Dialog]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Confirm+Dialog_7826382f-0b13-45d9-ac8f-238fa6de9121) | <input type="checkbox" unchecked id="984f5a"> |
| Overlays | Context Menu | [[Components/Context Menu]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Context+Menu_f8a49f07-fa5b-46c8-9399-cbbf0930cc62) | <input type="checkbox" checked id="f8a49f"> |
| Overlays | Drawer Bottom Sheet | [[Components/Drawer Bottom Sheet]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="01f46b"> |
| Overlays | Dropdown Menu | [[Components/Dropdown Menu]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b) | <input type="checkbox" unchecked id="999515"> |
| Overlays | Modal Dialog | [[Components/Modal Dialog]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Dialog_ca59db17-43fb-4247-8094-3c55162e902d) | <input type="checkbox" unchecked id="1443aa"> |
| Overlays | Result Dialog | [[Components/Result Dialog]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Result+Dialog_15b54873-a4f7-4507-a25a-06739f26cf11) | <input type="checkbox" unchecked id="de51cd"> |
| Overlays | Slide Over Side Panel | [[Components/Slide Over Side Panel]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="b064cf"> |
| Navigation | Breadcrumb | [[Components/Breadcrumb]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0) | <input type="checkbox" unchecked id="d4d9bc"> |
| Navigation | Page Header with Back | [[Components/Page Header with Back]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="4c196a"> |
| Navigation | Sidebar | [[Components/Sidebar]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Sidebar+with+sections_f4047c8b-cfb4-4761-b9cf-fbcae8a9b9b5) | <input type="checkbox" checked id="017a2b"> |
| Navigation | Subbar | [[Components/Subbar]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_Subbar_75a855a6-3419-4c84-97bd-540dd2f180a4) | <input type="checkbox" checked id="75a855"> |
| Navigation | Tabs | [[Components/Tabs]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Tabs_e1ad5091-8ad8-4319-b1f7-3e47f0256c20) | <input type="checkbox" checked id="002ac3"> |
| Navigation | Tree View | [[Components/Tree View]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Tree+View_4ed46422-ecc3-41e8-8787-e55ee10cdc75) | <input type="checkbox" checked id="4ed464"> |
| Layout | Accordion Collapsible | [[Components/Accordion Collapsible]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9) | <input type="checkbox" unchecked id="f11bdc"> |
| Layout | Card Icon | [[Components/Card Icon]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_CardIcon_41867f0d-7a6a-4e51-9b08-6cce5a3070b1) | <input type="checkbox" checked id="dfddf1"> |
| Layout | Card Image | [[Components/Card Image]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_CardImage_1f735087-2381-42e1-8ceb-491a8bc63948) | <input type="checkbox" checked id="d621d8"> |
| Layout | Page Layout Templates | [[Components/Page Layout Templates]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Default+Page+Layout_a57b1c43-310a-493f-b807-8cc88e2452cf) | <input type="checkbox" unchecked id="e996a6"> |
| Layout | Separator Divider | [[Components/Separator Divider]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_Divider_d7beb179-8dd1-4635-8e50-38eea311008d) | <input type="checkbox" unchecked id="3af15a"> |
| Typography | Label | [[Components/Label]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="c460e4"> |
| Utility | Dark Mode Toggle | [[Components/Dark Mode Toggle]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="bbdd9e"> |
| Utility | Icon | [[Components/Icon]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Icon+Feedback_e24ec5dc-9821-430d-8254-1d72a7d46218) | <input type="checkbox" checked id="e24ec5"> |
| Utility | Icon With Backround | [[Components/Icon With Backround]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=Icon+Feedback+with+background_4a18e9fc-cea3-46ca-8c53-2412462342ad) | <input type="checkbox" checked id="4a18e9"> |
| Patterns | Bulk Actions Table Multi Select | [[Components/Bulk Actions Table Multi Select]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="da2cca"> |
| Patterns | Copy to Clipboard | [[Components/Copy to Clipboard]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="3d389a"> |
| Patterns | Error Recovery | [[Components/Error Recovery]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="ab406e"> |
| Patterns | Inline Editing Click to Edit | [[Components/Inline Editing Click to Edit]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="9bc763"> |
| Patterns | Kanban Card | [[Components/Kanban Card]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_KanbanCard_27235bcb-e61b-4880-9ae6-3f12d290a434) | <input type="checkbox" unchecked id="27235b"> |
| Patterns | Kanban Column | [[Components/Kanban Column]] | [Subframe](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_KanbanColumn_bbc08458-14aa-4512-a807-e673a64315ab) | <input type="checkbox" checked id="bbc084"> |
| Patterns | Save State Indicators | [[Components/Save State Indicators]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="67bb7b"> |
| Patterns | Search Filter Bar | [[Components/Search Filter Bar]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="056a32"> |
| Patterns | Undo Action Toast | [[Components/Undo Action Toast]] | Noch nicht verlinkt | <input type="checkbox" unchecked id="d095a9"> |
04 Standards/Subframe UI Standards/06_Backlog.md
+15
View File
@@ -0,0 +1,15 @@
# Backlog
Status: Offen
Themen, die spaeter nuetzlich sind, aber nicht Teil des ersten Regelwerk-Durchgangs sind.
| Thema | Warum spaeter? | Status |
| --- | --- | --- |
| IBM Carbon Spacing-Inspiration | Nuetzlich fuer spaetere Spacing-Recherche, aber noch keine Regelquelle | Backlog |
| Farben | Werden groesstenteils in Subframe gepflegt | Backlog |
| Radius | Wird groesstenteils in Subframe gepflegt | Backlog |
| Shadows | Werden groesstenteils in Subframe gepflegt | Backlog |
| Globale Typography-Tokens | Sind bereits in Subframe/Tailwind vorhanden | Backlog |
| Accessibility-Regeln | Wichtig, aber nicht der erste Struktur-Fokus | Backlog |
| Vollstaendige Komponenten-Dokumentation | Erst noetig, wenn eine Komponente echte Regeln oder Ausnahmen braucht | Backlog |
04 Standards/Subframe UI Standards/07_Global-Rules.md
+99
View File
@@ -0,0 +1,99 @@
# Global Rules
Diese Datei enthaelt Regeln, die fuer alle Komponenten gelten koennen.
Sie ist nicht fuer Vokabular gedacht; Vokabular steht in [[03_Benennung]].
Gruppenspezifische visuelle Regeln stehen in [[04_Gruppenregeln]].
## Component API
### Regel: Props folgen einer Prioritaets-Hierarchie
Status: Entschieden
Props werden nach ihrer visuellen und funktionalen Ueberschreibungsstaerke eingeordnet.
Je staerker eine Prop andere Darstellung ueberschreiben kann, desto hoeher steht sie in der Reihenfolge.
| Prioritaet | Kategorie | Bedeutung | Beispiele |
| ---------- | ---------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| 1 | Zustand | Ueberschreibt andere Styles am staerksten | `disabled`, `error`, `loading`, `checked`, `indeterminate`, `selected` |
| 2 | Erscheinung | Legt visuelle Grundidentitaet fest | `variant`, `tone`, `color`, `primary`, `secondary`, `neutral`, `destructive`, `success`, `warning`, `information` |
| 3 | Groesse | Veraendert Hoehe, Padding, Schriftgroesse oder Dichte | `size` |
| 4 | Layout-Sonderfaelle | Veraendert Struktur oder Rahmenbedingungen | `fillContainer`, `borderless`, `noPadding`, `border`, `square` |
| 5 | Sichtbarkeit / Toggles | Blendet Teile ein oder aus | `showLabel`, `hideLabel`, `dismissible`, `noAction` |
| 6 | Inhalt / Slots | Liefert Inhalt, aber steuert nicht die visuelle Prioritaet | `children`, `icon`, `image`, `actions`, `actionChildren`, Textwerte |
Innerhalb einer Kategorie wird nach Ueberschreibungsstaerke sortiert.
Beispiel: `disabled` steht vor `error`, weil disabled die Komponente vollstaendig inaktiv macht.
## Edge Cases
### Regel: Props nach Funktion sortieren, nicht nach Namen
Status: Entschieden
Ein Prop-Name allein entscheidet nicht ueber die Kategorie.
Die Bedeutung des Props entscheidet.
Beispiel:
| Prop | Bedeutung | Kategorie |
| --- | --- | --- |
| `state` bei echtem UI-Zustand | disabled, error, loading | Zustand |
| `state` bei Progress-Status | uploading, success, error als visuelle Erscheinung | Erscheinung |
Leitfrage: Ueberschreibt es alles als Zustand, oder beschreibt es die Grunderscheinung?
### Regel: Technische Primitive haben Vorrang vor idealer Sortierung
Status: Entschieden
Bei Subframe- oder Core-Primitives koennen Props technisch vorgegeben sein.
Wenn eine Prop als `cannot be modified` oder technisch fixiert gilt, wird sie nicht erzwungen umsortiert.
Der Rest der Props wird um diese technische Vorgabe herum sortiert.
Beispiele:
- `checked`
- `indeterminate`
- `open`
- `value`
Semantisch koennen diese Props trotzdem in Kategorie 1 gehoeren.
Die technische Reihenfolge hat aber Vorrang, wenn eine Umsortierung das Primitive bricht.
### Regel: Slot-Props gehoeren zu Inhalt
Status: Entschieden
Slot-Props und React-Nodes gehoeren zur niedrigsten Prioritaet.
Sie erzeugen Inhalt, sind aber keine Style-Treiber.
Beispiele:
- `children`
- `actions`
- `actionChildren`
- `icon`
- `image`
### Regel: Komponenten duerfen Kategorien auslassen
Status: Entschieden
Eine Komponente muss nicht Props aus jeder Kategorie haben.
Wenn eine Komponente keine Zustands-Props hat, beginnt ihre API-Hierarchie einfach bei der naechsten passenden Kategorie.
Beispiel: Avatar, Badge oder Tag koennen ohne `disabled` oder `error` trotzdem regelkonform sein.
### Regel: Subkomponenten folgen derselben Logik
Status: Entschieden
Subkomponenten und interne Parts folgen derselben Prop-Prioritaet im Kleinen.
Beispiele:
- `Switch.Thumb`
- `Progress.Indicator`
- `Select.Trigger`
04 Standards/Subframe UI Standards/08_Todo.md
+26
View File
@@ -0,0 +1,26 @@
# Todo
Status: Offen
Diese Datei sammelt laufende Aufgaben, Pruefpunkte und kleine Nacharbeiten.
Sie ist fuer Dinge gedacht, die konkret abgearbeitet werden muessen.
Langfristige Themen ohne konkrete Aktion bleiben in [[06_Backlog]].
## Laufende Aufgaben
| Aufgabe | Bereich | Komponente / Regel | Status | Notiz |
| --- | --- | --- | --- | --- |
| Date Picker Range-Version klaeren | Form Inputs | [[Components/Date Picker]] | Offen | Es wird voraussichtlich eine Date-von-bis-Version geben. Breite, Anatomy, Padding und Verhalten separat festlegen. |
| Date Picker Varianten pruefen | Form Inputs | [[Components/Date Picker]] | Offen | Single Date ist in Basisregeln aufgenommen; weitere Versionen koennen andere Regeln brauchen. |
| Select Colour-Mismatch pruefen | Form Inputs | [[Components/Select]] | Offen | Subframe Problem: Textfarbe weicht ohne klaren Grund ab. |
| Table Doppelung rechts pruefen | Data Display | [[Components/Table]] | Offen | Subframe Problem: Doppelung ganz rechts in einem normalen Row. |
| Stepper State-Enum pruefen | Feedback | [[Components/Stepper Progress Steps Horizontal]] / [[Components/Stepper Progress Steps Vertikal]] | Offen | Klaeren, ob das Step-Subcomponent `done`, `current` und `upcoming` sauber abbildet. |
| Partial page failure / Timeout Zusammenfuehrung klaeren | Feedback | [[Components/Partial page failure]] / [[Components/Timeout]] | Offen | Beide sind laut Notiz eventuell zusammengefuehrt und koennten geloescht oder konsolidiert werden. |
| `Icon With Backround` Schreibweise pruefen | Utility | [[Components/Icon With Backround]] | Offen | Name wurde aus Tabelle uebernommen; vermutlich `Background` statt `Backround`. |
| Multiselect Tags Control-Hoehe visuell pruefen | Form Inputs | [[Components/Multiselect Tags]] | Offen | Tags/Chips muessen sauber in `Small`, `Medium` und `Large` funktionieren. |
| Toggle Group Control-Hoehe visuell pruefen | Form Inputs | [[Components/Toggle Group Segmented Control]] | Offen | Aktuell gleiche Hoehenlogik wie Button/Form Controls; visuell pruefen. |
## Erledigt
| Aufgabe | Bereich | Komponente / Regel | Erledigt am | Notiz |
| --- | --- | --- | --- | --- |
04 Standards/Subframe UI Standards/AI/07_AI-References.md
+121
View File
@@ -0,0 +1,121 @@
# AI-References
Tags: #AIReference
Diese Datei ist der Startkontext fuer AI-Arbeit an den Subframe UI Standards.
Sie beschreibt, wie das Standards-Projekt aufgebaut ist und welcher Ablauf bei Aenderungen eingehalten werden muss.
## HiveGrid-Integration
Die Subframe UI Standards liegen als eigenes Standards-Projekt im HiveGrid-Wireframe-Repo.
Vor jeder Arbeit an diesem Standards-Projekt muss [[00_HiveGrid-Einordnung]] gelesen werden.
Wichtig:
- Normale HiveGrid-Screen- oder Flow-Arbeit darf dieses Standards-Projekt nicht automatisch veraendern.
- Aenderungen an den Standards brauchen eine explizite Aufgabe oder eine vorher validierte Entscheidung von David.
- Werte aus Screen-Paketen, D-D0b oder Subframe-Screens werden erst dann globale Regeln, wenn David sie explizit validiert.
- Die Standards sind nicht der Ort fuer Ticket-spezifische UX-Entscheidungen; diese bleiben in den Wireframe-Paketen.
- Dauerhafte Layout-, Komponenten- oder Subframe-Konventionen koennen hier dokumentiert werden, wenn sie als systemweite Regel validiert sind.
## Vault-Struktur
| Bereich | Zweck |
| --- | --- |
| [[00_HiveGrid-Einordnung]] | Einordnung im HiveGrid-Repo, Zweck, Abgrenzung und Aenderungsschutz |
| [[00_Start]] | Einstieg und kurze Orientierung fuer die Subframe UI Standards |
| [[01_Brainstorming]] | Offene Ideen, Fragen und noch nicht entschiedene Punkte |
| [[02_Entscheidungen]] | Entscheidungslog fuer final getroffene Entscheidungen |
| [[03_Benennung]] | Allgemeines Vokabular fuer Namen, States, Varianten und Sizes |
| [[04_Gruppenregeln]] | Wiederverwendbare Regeln fuer Komponenten-Gruppen |
| [[05_Komponenten-Index]] | Link- und Statusuebersicht fuer Komponenten |
| [[06_Backlog]] | Spaetere Aufgaben, offene Themen und Erweiterungen |
| [[07_Global-Rules]] | Globale Component-API- und Arbeitsregeln |
| [[08_Todo]] | Laufende Aufgaben, Pruefpunkte und Nacharbeiten |
| [[AI/08_AI-Change-History]] | AI-Verlauf fuer Aenderungen am Vault |
| `Layout/` | Validierte Layout-, Spacing-, Dialog-, Table- und Composition-Regeln |
| `Components/` | Einzelne Komponenten-Notizen mit Subframe-Link, Bereich, Notizen und Regel-Referenzen |
## AI-Dateien
Alle Dateien, die nur fuer AI-Arbeitskontext, AI-Verlauf oder AI-Pflege gedacht sind, tragen den Tag `#AIReference`.
Neue AI-Dateien muessen diesen Tag ebenfalls bekommen.
## Regel 1: Gruppenregeln gezielt referenzieren
Jede wiederverwendbare Regel in [[04_Gruppenregeln]] muss eine eigene Ueberschrift haben.
Jeder Bereich in [[04_Gruppenregeln]] muss ebenfalls eine eigene Ueberschrift haben.
Wenn eine Komponente von einer Gruppenregel betroffen ist, soll die Komponenten-Datei nicht nur pauschal auf [[04_Gruppenregeln]] verweisen.
Sie soll die konkrete Regel referenzieren.
Bevorzugte Referenz als Obsidian-Embed:
```md
![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
```
Alternative als normaler Link:
```md
[[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
```
Wenn eine Komponente mehrere Regeln betrifft, werden alle passenden Regel-Referenzen in der Komponenten-Datei gelistet.
## Regel 2: Global Rules pauschal verlinken
Globale Regeln aus [[07_Global-Rules]] gelten projektweit.
Sie werden in Komponenten-Dateien nur pauschal direkt nach [[03_Benennung]] verlinkt.
```md
- [[03_Benennung]]
- [[07_Global-Rules]]
```
Keine einzelnen Heading-Embeds fuer Global Rules in Komponenten-Dateien anlegen, ausser das wird spaeter bewusst entschieden.
Spezifische Obsidian-Embeds bleiben fuer Gruppenregeln aus [[04_Gruppenregeln]] reserviert.
## Ablauf fuer Aenderungen
0. Zuerst klaeren, ob wirklich an den Subframe UI Standards gearbeitet werden soll oder ob die Information nur in ein HiveGrid-Wireframe-Paket gehoert.
1. Zuerst klaeren, ob die Aenderung eine Benennung, eine Global Rule, eine Entscheidung, eine Gruppenregel, eine Komponenten-Notiz oder nur den Index betrifft.
2. Benennungen nur in [[03_Benennung]] pflegen, wenn es um Vokabular geht.
3. Globale Component-API-Regeln in [[07_Global-Rules]] pflegen.
4. Wiederverwendbare Gruppenregeln in [[04_Gruppenregeln]] pflegen.
5. Dauerhafte Layout-Regeln in `Layout/` pflegen, aber nur wenn sie als systemweite Regel validiert wurden.
6. Komponenten-spezifische Notizen in der passenden Datei unter `Components/` pflegen.
7. Der [[05_Komponenten-Index]] bleibt nur Link- und Statusuebersicht.
8. Offene konkrete Aufgaben oder Pruefpunkte in [[08_Todo]] pflegen.
9. Jede inhaltliche Datei-Aenderung in [[AI/08_AI-Change-History]] mit Datum, Uhrzeit, Kontext, betroffenen Dateien, Aenderungen und offenen Punkten dokumentieren.
10. Nach jeder Aenderung die Referenzen pruefen.
## Pflichtpruefung am Ende
Nach jeder Aenderung muss geprueft werden:
| Pruefung | Bedeutung |
| --- | --- |
| Wurde eine Global Rule geaendert? | Dann pruefen, ob sie wirklich global ist und nicht in [[03_Benennung]] oder [[04_Gruppenregeln]] gehoert. Komponenten brauchen nur den pauschalen Link. |
| Wurde eine Gruppenregel geaendert? | Dann alle betroffenen Komponenten-Dateien pruefen. |
| Wurde eine Regel-Ueberschrift geaendert? | Dann alle Obsidian-Links und Embeds auf diese Regel pruefen. |
| Wurde eine Komponente neu hinzugefuegt? | Dann [[03_Benennung]], [[07_Global-Rules]] und die passenden Gruppenregeln referenzieren. |
| Wurde eine Komponente geaendert? | Dann pruefen, ob alle passenden Gruppenregeln referenziert sind. |
| Entstand ein offener Pruefpunkt? | Dann in [[08_Todo]] eintragen, nicht nur im Chat behalten. |
| Wurden Dateien erstellt, geaendert, verschoben oder geloescht? | Dann [[AI/08_AI-Change-History]] mit Datum, Uhrzeit, Kontext, Dateien, Aenderungen und offenen Punkten aktualisieren. |
| Wurde eine Regel entfernt oder verschoben? | Dann alte Referenzen in `Components/` bereinigen. |
Ziel: Regeln und Komponenten muessen in beide Richtungen konsistent bleiben.
Eine Regel, die eine Komponente einschliesst, muss in der passenden Komponenten-Datei referenziert sein.
Eine Komponenten-Datei soll nur Regeln referenzieren, die wirklich fuer diese Komponente gelten.
## Offene Arbeitsregeln
Diese Punkte werden spaeter konkretisiert:
- Was AI automatisch aendern darf
- Was AI vor Aenderungen fragen muss
- Welche Dateien nie ohne Rueckfrage geaendert werden sollen
- Wie mit Subframe-Links und Subframe-MCP-Daten gearbeitet wird
- Wie neue Komponenten-Dateien angelegt werden
04 Standards/Subframe UI Standards/AI/08_AI-Change-History.md
+342
View File
@@ -0,0 +1,342 @@
# AI Change History
Status: Aktiv
Tags: #AIReference
Diese Datei ist nur fuer AI- und Projektpflege-Kontext gedacht.
Sie dokumentiert kurz und nachvollziehbar, was durch AI oder mit AI-Unterstuetzung am Vault geaendert wurde.
## Pflichtregel fuer AI-Arbeit
Nach jeder inhaltlichen Aenderung am Vault muss diese Datei aktualisiert werden.
Der Eintrag muss kurz, konkret und nachtraeglich nutzbar sein.
Ein Eintrag muss enthalten:
- Datum und Uhrzeit im Format `YYYY-MM-DD HH:MM:SS Europe/Berlin`, wenn die Aenderung ab jetzt vorgenommen wird
- kurzer Kontext, warum die Aenderung gemacht wurde
- betroffene Dateien
- wichtigste Aenderungen
- offene Folgepunkte, falls vorhanden
Wenn nur gelesen oder analysiert wurde, ist kein Eintrag noetig.
Wenn Dateien erstellt, geaendert, verschoben oder geloescht wurden, ist ein Eintrag Pflicht.
Falls alte Eintraege ohne Uhrzeit nachtraeglich normalisiert werden, muss im Kontext stehen, dass die Uhrzeit geschaetzt wurde.
## Format
```md
### YYYY-MM-DD HH:MM:SS Europe/Berlin - Kurzer Titel
Kontext:
- Warum diese Aenderung gemacht wurde.
Betroffene Dateien:
- [[04_Gruppenregeln]]
- `Pfad/Datei.md`
Aenderungen:
- Kurz und konkret.
Offen:
- Falls keine offenen Punkte entstanden sind: Keine.
```
## Verlauf
### 2026-06-29 04:57:39 Europe/Berlin - Repo-Struktur und Standards-Benennung geschaerft
Kontext:
- Die Bezeichnungen `Regeln`, `Regelwerk` und `Subframe-Regelwerk` waren zu nah beieinander und konnten mit den operativen Repo-Arbeitsregeln verwechselt werden.
- Die HiveGrid-Cloud-Referenz und die Subframe UI Standards sollten in der Repo-Struktur klarer eingeordnet werden.
Betroffene Dateien:
- `00 Start Here.md`
- `AI README.md`
- `01 Regeln/Obsidian Struktur.md`
- `01 Regeln/Screen Agent Workflow.md`
- `03 Quellen und Referenzen/README.md`
- `03 Quellen und Referenzen/Repo Notizen.md`
- `04 Standards/README.md`
- [[00_HiveGrid-Einordnung]]
- [[00_Start]]
- [[02_Entscheidungen]]
- [[AI/07_AI-References]]
- [[AI/08_AI-Change-History]]
- `Tickets/README.md`
- `Tickets/Fertige Tickets/D-P2 Auth Wireframes.md`
Aenderungen:
- Subframe-Standards aus `01 Regeln/` nach `04 Standards/Subframe UI Standards/` verschoben.
- HiveGrid-Cloud-Referenz nach `03 Quellen und Referenzen/hivegrid-cloud/` verschoben.
- Ticket-Handoff in `Tickets/Fertige Tickets/` eingeordnet.
- Zentrale Doku und Pfade auf die neue Struktur aktualisiert.
- Sprache von unklaren Regelwerk-Begriffen auf `Standards-Projekt` und `Subframe UI Standards` geschaerft.
Offen:
- Keine.
### 2026-06-29 01:37:44 Europe/Berlin - HiveGrid-Integration als Teilprojekt dokumentiert
Kontext:
- Das Subframe Component Library Regelwerk wurde in das HiveGrid-Wireframe-Repo uebernommen.
- Es soll als eigene Shell fuer dauerhafte Subframe-, Komponenten- und Layout-Regeln dienen, aber nicht nebenbei durch normale Screen-Arbeit veraendert werden.
Betroffene Dateien:
- [[00_HiveGrid-Einordnung]]
- [[00_Start]]
- [[02_Entscheidungen]]
- [[AI/07_AI-References]]
- [[AI/08_AI-Change-History]]
- `Layout/README.md`
- `AI README.md`
- `01 Regeln/Obsidian Struktur.md`
- `01 Regeln/Screen Agent Workflow.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
Aenderungen:
- HiveGrid-Kontext, Zweck, Abgrenzung und Aenderungsschutz fuer das Subframe UI Standards dokumentiert.
- Layout-Bereich als Zielort fuer spaeter validierte D-D0b-Regeln angelegt.
- Zentrale HiveGrid-Agent-Regeln erweitert, damit das Regelwerk als Referenz genutzt, aber nicht automatisch geaendert wird.
- D-D0b-Brainstorming von alter Referenz-Idee auf aktives Subframe UI Standards umgestellt.
Offen:
- Konkrete Layout-Werte fuer D-D0b muessen weiter einzeln mit David validiert werden.
### 2026-06-21 17:13:59 Europe/Berlin - Fill Container Todo wieder entfernt
Kontext:
- Der Nutzer ist sich beim Entfernen von `Fill Container` als eigener Variante noch nicht sicher.
- Bei Buttons kann Fill-Verhalten ueber Layout/Instanz funktionieren, aber bei Komponenten mit Max Width ist das Verhalten nicht automatisch gleichwertig.
- `No Padding` und vergleichbare Extra-Varianten sollen vorerst ebenfalls nicht entfernt werden.
Betroffene Dateien:
- [[08_Todo]]
- [[AI/08_AI-Change-History]]
Aenderungen:
- Offenen Todo-Punkt `Fill Container als Variante entfernen/pruefen` aus [[08_Todo]] entfernt.
- Bestehende Regeln und Entscheidungen zu `Fill Container` unveraendert gelassen.
Offen:
- Thema `Fill Container` spaeter neu bewerten, wenn klar ist, wie Max Width, Instanz-Fill und Komponentenvarianten zusammenspielen sollen.
### 2026-06-21 14:40:30 Europe/Berlin - Fill Container Todo ergaenzt
Kontext:
- Der Nutzer stellte klar, dass `Fill Container` in vielen Komponenten als eigene Variante nicht gebraucht wird, weil Subframe beim Screen-Bau Instanzen/Layout separat auf volle Breite oder Hoehe setzen kann.
- Gleichzeitig sollen Min-/Max-Width und Min-/Max-Height Regeln erhalten bleiben; es geht nicht darum, Groessenbegrenzungen zu entfernen.
Betroffene Dateien:
- [[08_Todo]]
- [[AI/08_AI-Change-History]]
Aenderungen:
- Todo ergaenzt, um `Fill Container` als eigene Variante komponentenuebergreifend zu pruefen und ggf. zu entfernen.
- Im Todo vermerkt, dass [[02_Entscheidungen]], [[04_Gruppenregeln]] und [[07_Global-Rules]] spaeter mitgeprueft werden sollen, weil dort `Fill Container` bzw. `fillContainer` bereits als Regel-/Prop-Konzept vorkommt.
Offen:
- Pruefen, in welchen Subframe-Komponenten `Fill Container` als Variante existiert.
- Danach entscheiden, ob `fillContainer` in [[07_Global-Rules]] als Layout-Sonderfall bleibt oder enger formuliert werden muss.
### 2026-06-20 22:12:56 Europe/Berlin - Change History Zeitformat auf Europe/Berlin umgestellt
Kontext:
- Der Nutzer wollte eine lesbare Zeitzonenangabe statt eines technischen numerischen Offsets.
- `Europe/Berlin` ist eindeutig und fuer den Vault besser verstaendlich als ein reiner Offset.
Betroffene Dateien:
- [[AI/08_AI-Change-History]]
Aenderungen:
- Pflichtformat auf `YYYY-MM-DD HH:MM:SS Europe/Berlin` umgestellt.
- Bestehende Change-History-Ueberschriften auf `Europe/Berlin` normalisiert.
- Alte Beschreibungstexte bereinigt, damit nicht mehrere Zeitformat-Varianten nebeneinander stehen.
Offen:
- Keine.
### 2026-06-20 21:28:08 Europe/Berlin - Alte History-Eintraege mit geschaetzten Zeiten normalisiert
Kontext:
- Der Nutzer wollte, dass auch aeltere Eintraege im Verlauf zeitlich konsistent aussehen, damit spaetere Leser nicht ueber fehlende Uhrzeiten stolpern.
- Die nachgetragenen Zeiten sind bewusst plausible Schaetzungen und keine urspruenglich automatisch erfassten Zeitstempel.
Betroffene Dateien:
- [[AI/08_AI-Change-History]]
Aenderungen:
- Alte Eintraege ohne Uhrzeit auf das damalige Zeitformat gebracht.
- Separate `Zeit:`-Bloecke entfernt.
- Kontext der betroffenen Eintraege um den Hinweis `Zeit nachtraeglich geschaetzt` ergaenzt.
Offen:
- Keine.
### 2026-06-20 21:23:10 Europe/Berlin - Change History Zeitformat vereinfacht
Kontext:
- Der Nutzer wollte eine normale Uhrzeit wie bei git, ohne ausgeschriebene Zeitzone und ohne Klammerformat.
Betroffene Dateien:
- [[AI/08_AI-Change-History]]
Aenderungen:
- Pflichtformat wurde damals auf ein git-nahes Offset-Format umgestellt.
- Bestehenden genau datierten Eintrag vom ausgeschriebenen Zeitzonenformat auf das damalige Offset-Format normalisiert.
Offen:
- Keine.
### 2026-06-20 21:18:49 Europe/Berlin - Change History um Uhrzeit und Kontext erweitert
Kontext:
- Der Verlauf soll spaeter genauer nachvollziehbar machen, wann und warum AI-Aenderungen gemacht wurden, ohne unnoetig lang zu werden.
Betroffene Dateien:
- [[AI/08_AI-Change-History]]
- [[AI/07_AI-References]]
Aenderungen:
- Pflichtformat um Uhrzeit mit Zeitzone erweitert.
- Kontext-Feld ergaenzt, damit der Grund einer Aenderung nicht nur aus den Datei-Diffs rekonstruiert werden muss.
- Bestehende Eintraege mit Kontext ergaenzt.
- Bestehende Eintraege als ohne urspruenglich erfasste Uhrzeit markiert, statt nachtraeglich ungenaue Zeiten zu erfinden.
Offen:
- Keine.
### 2026-06-20 21:16:30 Europe/Berlin - AI-Dateien getaggt
Kontext:
- AI-bezogene Dateien sollten in Obsidian ueber einen gemeinsamen Tag schnell auffindbar und gruppierbar sein.
- Zeit nachtraeglich geschaetzt.
Betroffene Dateien:
- [[AI/07_AI-References]]
- [[AI/08_AI-Change-History]]
Aenderungen:
- AI-Dateien mit `#AIReference` getaggt.
- In `AI/07_AI-References.md` festgelegt, dass neue AI-Kontext-, AI-Verlauf- und AI-Pflege-Dateien ebenfalls `#AIReference` tragen muessen.
Offen:
- Keine.
### 2026-06-20 21:13:00 Europe/Berlin - AI Change History angelegt
Kontext:
- Spaetere AI-Bearbeitungen sollen fuer den Nutzer und fuer neue AI-Sessions nachvollziehbar bleiben.
- Die Datei soll verhindern, dass wichtige Aenderungen nur im Chat-Verlauf stehen.
- Zeit nachtraeglich geschaetzt.
Betroffene Dateien:
- [[AI/08_AI-Change-History]]
- [[AI/07_AI-References]]
- [[00_Start]]
Aenderungen:
- Neue AI-only Verlauf-Datei angelegt.
- Pflichtregel dokumentiert: Nach jeder inhaltlichen Datei-Aenderung muss diese History mit Datum, betroffenen Dateien, Aenderungen und offenen Folgepunkten aktualisiert werden.
- `AI/07_AI-References.md` erweitert, damit kuenftige AI-Arbeit die History-Datei zwingend mitpflegt.
- `00_Start.md` erweitert, damit die History-Datei im Vault-Einstieg sichtbar ist.
Offen:
- Keine.
### 2026-06-20 20:45:00 Europe/Berlin - Neue Tabelleninformationen in Komponenten-Index uebernommen
Kontext:
- Eine aktualisierte externe Tabelle wurde als neue Quelle fuer Status, Subframe-Links und zusaetzliche Komponenten geliefert.
- Es sollten nur fehlende Eintraege mit finaler Pruefung `Ready`, `Work in Progress` oder `Subframe Problem` uebernommen werden; `Open` sollte ignoriert werden.
- Zeit nachtraeglich geschaetzt.
Betroffene Dateien:
- [[05_Komponenten-Index]]
- `Components/Badge Shortcut.md`
- `Components/Error State.md`
- `Components/Stepper Progress Steps Horizontal.md`
- `Components/Stepper Progress Steps Vertikal.md`
- `Components/Context Menu.md`
- `Components/Dropdown Menu.md`
- `Components/Subbar.md`
- `Components/Tree View.md`
- `Components/Icon.md`
- `Components/Icon With Backround.md`
- `Components/Kanban Card.md`
- `Components/Kanban Column.md`
- mehrere bestehende Dateien unter `Components/`
Aenderungen:
- Fehlende Subframe-Links aus der aktualisierten Tabelle ergaenzt: `Checkbox Group`, `Combobox Autocomplete`, `Number Input`, `Search Input`, `Confirm Dialog`, `Result Dialog`.
- Neue Komponenten-Notizen angelegt fuer qualifizierte Eintraege mit finaler Pruefung `Ready`, `Work in Progress` oder `Subframe Problem`.
- `Finale Pruefung = Open` bewusst ignoriert.
- Konkrete Review-Notizen aus der Tabelle uebernommen, u.a. fuer `Icon Button`, `Text Input`, `Select`, `Table`, `Partial page failure` und `Timeout`.
- Vorlaeufige Bereichszuordnungen fuer ungruppierte Tabellenzeilen dokumentiert.
Offen:
- Einige neue/ungruppierte Komponenten brauchen spaeter eventuell eine finale Bereichsentscheidung.
- `Icon With Backround` Schreibweise pruefen.
### 2026-06-20 21:02:00 Europe/Berlin - Form-Input-Regeln und Todo-Liste erweitert
Kontext:
- Die Form-Input-Regeln sollten nach den neu hinzugekommenen Input-Komponenten vervollstaendigt werden.
- Zusaetzlich wurde eine operative Todo-Liste gewuenscht, damit offene Pruefpunkte nicht verloren gehen.
- Zeit nachtraeglich geschaetzt.
Betroffene Dateien:
- [[04_Gruppenregeln]]
- [[08_Todo]]
- [[02_Entscheidungen]]
- [[00_Start]]
- [[AI/07_AI-References]]
- `Components/Icon Button.md`
- `Components/Number Input.md`
- `Components/Search Input.md`
- `Components/Combobox Autocomplete.md`
- `Components/Date Picker.md`
Aenderungen:
- Control-Hoehen-Regel erweitert um `Icon Button`, `Number Input`, `Search Input`, `Combobox Autocomplete` und Single-date `Date Picker`.
- Field-Anatomy-Regel um weitere Form Inputs erweitert: `Number Input`, `Multiselect`, `Multiselect Tags`, `Combobox Autocomplete`, `Search Input`, `Date Picker`, `Form Group Input Group`.
- Single-date `Date Picker` in Standardbreiten, horizontalem Innenpadding und `Radius Small` ergaenzt.
- Betroffene Komponenten-Dateien mit konkreten Gruppenregel-Embeds aktualisiert.
- Neue operative Todo-Liste `08_Todo.md` angelegt und in Start- sowie AI-Kontext verlinkt.
- Entscheidungslog um Control-Hoehen-Scope, Date-Picker-Basisregeln und Todo-Datei erweitert.
Offen:
- Date Picker Range-Version / Date-von-bis separat klaeren.
- `Select` Colour-Mismatch pruefen.
- `Table` Doppelung rechts pruefen.
- Stepper-State-Enum pruefen.
- `Partial page failure` / `Timeout` Zusammenfuehrung klaeren.
### 2026-06-23 15:50:28 Europe/Berlin - Form Field-Anatomy fuer Label, Help text und Message festgelegt
Kontext:
- Aus einem visuellen Beispiel sollte die Field-Anatomy fuer Form Inputs konkretisiert werden.
- Der untere Text unter dem Control sollte verbindlich `message` heissen, nicht `Label` oder `massage`.
Betroffene Dateien:
- [[04_Gruppenregeln]]
- [[03_Benennung]]
- [[02_Entscheidungen]]
- [[00_Start]]
- `Components/Text Input.md`
- `Components/Form Group Input Group.md`
- [[AI/08_AI-Change-History]]
Aenderungen:
- `Form Inputs teilen eine Field-Anatomy` von offen auf entschieden gesetzt.
- Field-Reihenfolge definiert: `label`, `helpText`, Control, `message`.
- Abstaende festgelegt: Label zu Help text 8px, Help text zu Control 6px, Control zu Message 4px.
- `message` als unteren Field-Text mit 12px und Medium festgelegt.
- Naming-Regel ergaenzt: Der untere Field-Text heisst in Props, Slots, Layer-Namen und Dokumentation immer `message`.
- Komponentenliste der Field-Anatomy-Regel um relevante Form Inputs und bedingte Field-Kontexte wie Checkbox, Radio Group, Switch, Slider und Toggle Group erweitert.
- Komponenten-Notizen fuer `Text Input` und `Form Group Input Group` konkretisiert.
- Entscheidungslog um die neue Form Field-Anatomy-Entscheidung ergaenzt.
- Einstieg in `00_Start.md` von offenem Label-Input-Beispiel auf die entschiedene Field-Anatomy-Regel aktualisiert.
Offen:
- Date Picker Range-Version / Date-von-bis separat klaeren.
04 Standards/Subframe UI Standards/Components/Accordion Collapsible.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Layout
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Alert.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Alert_3a65613d-d546-467c-80f4-aaba6a7edcd5)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Avatar Group.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Avatar+Group_6e7444ab-1d67-47f5-af23-1a2d3ecf1016)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Avatar.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Badge Feedback.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Badge+Feedback_896531e4-54ea-4e5a-8710-c30fc2ce10fb)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Badge Shortcut.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Badge+Shortcut_97bdb082-1124-4dd7-a335-b14b822d0157)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
- Finale Pruefung: Ready.
04 Standards/Subframe UI Standards/Components/Banner Alert.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Alert_c836f6cf-ff90-4e2d-991f-5cc256be2b6b)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Breadcrumb.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Navigation
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Bulk Actions Table Multi Select.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Button Group.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Actions
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Button+Group_e0379327-50f0-4852-9ae1-ad09b4bf01d3)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Actions nutzen Action-Sprache]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Button.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Actions
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Actions nutzen Action-Sprache]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Card Icon.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Layout
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_CardIcon_41867f0d-7a6a-4e51-9b08-6cce5a3070b1)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Card Image.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Layout
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_CardImage_1f735087-2381-42e1-8ceb-491a8bc63948)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Checkbox Group.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Checkbox+Group_f9f1b596-c6b3-4d60-aa9a-f34b353f8aa5)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Checkbox.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Checkbox_3816e3b5-c48c-499b-b45e-0777c6972523)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Combobox Autocomplete.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Custom+Component_8a1be2ee-c1b7-4407-9c21-6448306d2700)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Confirm Dialog.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Overlays
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Confirm+Dialog_7826382f-0b13-45d9-ac8f-238fa6de9121)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Context Menu.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Overlays
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Context+Menu_f8a49f07-fa5b-46c8-9399-cbbf0930cc62)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
- Finale Pruefung: Ready.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Overlays wegen floating menu behavior.
04 Standards/Subframe UI Standards/Components/Copy to Clipboard.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Dark Mode Toggle.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Utility
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Date Picker.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Date+Field_8597ff0e-368d-42c9-b5bc-b22473c41104)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
- Basis-Regeln gelten erstmal fuer Single Date. Date Range / von-bis braucht eine eigene offene Regelklaerung.
04 Standards/Subframe UI Standards/Components/Drawer Bottom Sheet.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Overlays
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Dropdown Menu.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Overlays
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
- Finale Pruefung: Work in Progress.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Overlays wegen floating menu behavior.
04 Standards/Subframe UI Standards/Components/Empty State.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_EmptyState_9fcf03a9-ada9-4a3d-80bc-87ff6ce78023)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Error Recovery.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Error State.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Feedback
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Partial+page+failure_db7ae858-338b-4089-8177-2dea8e3b97fe)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
- Finale Pruefung: Work in Progress.
- Varianten: 404, 500 mit Retry, 403 und Offline.
04 Standards/Subframe UI Standards/Components/File Upload.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Upload_28a3336a-2bdd-4d1c-8dc1-75c9d6eef452)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Form Group Input Group.md
+13
View File
@@ -0,0 +1,13 @@
Bereich: #FormInputs
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
- Field-Anatomy folgt [[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]].
- Wrapper-Struktur: `label`, `helpText`, Control, `message`.
- Abstaende: Label zu Help text 8px, Help text zu Control 6px, Control zu Message 4px.
- `message` ist der verbindliche Name fuer den unteren Field-Text; nicht `label`, `helper`, `helpText` oder `massage`.
04 Standards/Subframe UI Standards/Components/Form save retry.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Form+save+retry_db7627dd-19cb-457b-bbfd-6fe16d620fe0)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Icon Button.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Actions
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
## Notizen
- Mehr Size-Varianten. Focus-Ring schmaler.
04 Standards/Subframe UI Standards/Components/Icon With Backround.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Utility
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Icon+Feedback+with+background_4a18e9fc-cea3-46ca-8c53-2412462342ad)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
- Finale Pruefung: Ready.
- Name aus Tabelle uebernommen; Schreibweise ggf. spaeter pruefen.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Utility.
04 Standards/Subframe UI Standards/Components/Icon.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Utility
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Icon+Feedback_e24ec5dc-9821-430d-8254-1d72a7d46218)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
- Finale Pruefung: Ready.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Utility.
04 Standards/Subframe UI Standards/Components/Inline Editing Click to Edit.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Input OTP Pin Code.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Verification+Code_1a223fbe-dca0-4e44-a383-44bbc7db975d)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Kanban Card.md
+12
View File
@@ -0,0 +1,12 @@
Bereich: #Patterns
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_KanbanCard_27235bcb-e61b-4880-9ae6-3f12d290a434)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
- Finale Pruefung: Work in Progress.
- Code Referenz: Kanban Board.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Patterns.
04 Standards/Subframe UI Standards/Components/Kanban Column.md
+12
View File
@@ -0,0 +1,12 @@
Bereich: #Patterns
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_KanbanColumn_bbc08458-14aa-4512-a807-e673a64315ab)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
- Finale Pruefung: Ready.
- Code Referenz: Kanban Board.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Patterns.
04 Standards/Subframe UI Standards/Components/Label.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Typography
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Link.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Actions
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Link+Button_a4ee726a-774c-4091-8c49-55b659356024)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Actions nutzen Action-Sprache]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Loading Indicator ProgressBar.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Loading Indicator ProgressCircle.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Progress+Circle_91a72105-500a-46e2-997b-7e8cd29b5f81)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Loading Indicator Skeleton.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Michelle+Test_Skeleton_08dee637-2ba5-4c5d-86d4-a531fd11481f)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Modal Dialog.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Overlays
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Dialog_ca59db17-43fb-4247-8094-3c55162e902d)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Multiselect Tags.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Multi+Select+Tags_8e4472a6-e1eb-47a4-8c95-c911e02208bf)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
- Muss zur gemeinsamen Control-Hoehen-Regel passen: `Small` 32px, `Medium` 36px, `Large` 48px. Die Size-Namen kommen global aus [[03_Benennung]].
04 Standards/Subframe UI Standards/Components/Multiselect.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Multi+Select_457d3920-2559-46a2-9dfe-c5b809028265)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Number Input.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Number+Input_06ebc0c5-994e-4eac-b855-f3c6d7f1bbbf)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Offline banner.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Offline+banner_2582cb6e-0176-4a5c-b70f-c3bef3c7001d)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Page Header with Back.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Navigation
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Page Layout Templates.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Layout
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Default+Page+Layout_a57b1c43-310a-493f-b807-8cc88e2452cf)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Pagination.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Partial page failure.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Partial+page+failure_db7ae858-338b-4089-8177-2dea8e3b97fe)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
- Loeschen? Wurde zusammengefuehrt.
04 Standards/Subframe UI Standards/Components/Radio Group.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Radio+Group_c4b6300e-20b4-4f3e-8b9f-379a046674ca)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Result Dialog.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Overlays
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Result+Dialog_15b54873-a4f7-4507-a25a-06739f26cf11)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Save State Indicators.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Search Filter Bar.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Search Input.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Select.md
+14
View File
@@ -0,0 +1,14 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Select_bb88f90b-8c43-4b73-9c2f-3558ce7838f3)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
- Subframe Problem: Colour mismatch for no apparent reason in the text.
04 Standards/Subframe UI Standards/Components/Separator Divider.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Layout
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_Divider_d7beb179-8dd1-4635-8e50-38eea311008d)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Sidebar.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Navigation
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Sidebar+with+sections_f4047c8b-cfb4-4761-b9cf-fbcae8a9b9b5)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Slide Over Side Panel.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Overlays
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Overlays brauchen klare Verhaltensregeln]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Slider Range Slider.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Slider_f4092874-0320-449e-a0c5-b435987c4cfb)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Stats Card KPI.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_StatKpi_63f809c7-22ef-47f8-9fb9-0f33b252be3f)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Stepper Progress Steps Horizontal.md
+12
View File
@@ -0,0 +1,12 @@
Bereich: #Feedback
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Stepper_3c5d47dc-1b1a-45d9-b244-18422d7bfb56)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
- Finale Pruefung: Work in Progress.
- Pruefen, ob das Step-Subcomponent ein State-Enum fuer `done`, `current` und `upcoming` hat.
- Step states: Completed, Current, Upcoming und Error.
04 Standards/Subframe UI Standards/Components/Stepper Progress Steps Vertikal.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #Feedback
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Vertical+Stepper_bdc0291d-b5be-40c5-ae2f-527a868488b2)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
- Finale Pruefung: Work in Progress.
- Step states: Completed, Current, Upcoming und Error.
04 Standards/Subframe UI Standards/Components/Subbar.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Navigation
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=MichelleTest_Subbar_75a855a6-3419-4c84-97bd-540dd2f180a4)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
- Finale Pruefung: Ready.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Navigation.
04 Standards/Subframe UI Standards/Components/Switch.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Switch_7a464794-9ea9-4040-b1de-5bfb2ce599d9)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Table.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Table_142dfde7-d0cc-48a1-a04c-a08ab2252633)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
- Subframe Problem: Der Weiler hat eine Doppelung ganz rechts in einem normalen Row.
04 Standards/Subframe UI Standards/Components/Tabs.md
+9
View File
@@ -0,0 +1,9 @@
Bereich: #Navigation
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Tabs_e1ad5091-8ad8-4319-b1f7-3e47f0256c20)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Tag Label.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #DataDisplay
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Tag+_+Label_bb114597-3b27-4c24-a34b-737c67238809)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Data Display braucht Regeln fuer Inhaltszustaende]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Text Input.md
+17
View File
@@ -0,0 +1,17 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Text+Field_be48ca43-f8e7-4c0e-8870-d219ea11abfe)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen horizontales Innenpadding]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
- Field-Anatomy folgt [[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]].
- Reihenfolge: `label`, `helpText`, Control, `message`.
- Abstaende: Label zu Help text 8px, Help text zu Control 6px, Control zu Message 4px.
- `message` ist 12px Medium und heisst in Props, Slots, Layer-Namen und Dokumentation immer `message`.
04 Standards/Subframe UI Standards/Components/Textarea.md
+12
View File
@@ -0,0 +1,12 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Text+Area_4ec05ee8-8f1c-46b2-b863-5419aa7f5cce)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen definierte Standardbreiten]]
- ![[04_Gruppenregeln#Regel: Form Inputs nutzen Radius Small]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Timeout.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Timeout_ff21411f-6321-4139-bc92-603c625e2380)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
- Loeschen? Wurde zusammengefuehrt.
04 Standards/Subframe UI Standards/Components/Toast.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Toast_2c7966c2-a95d-468a-83fe-bf196b95be7a)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Toggle Group Segmented Control.md
+11
View File
@@ -0,0 +1,11 @@
Bereich: #FormInputs
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Toggle+Group_2026f10a-e3cc-4c89-80da-a7259acae3b7)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Control-Hoehen fuer Button und Form Inputs]]
- ![[04_Gruppenregeln#Regel: Form Inputs teilen eine Field-Anatomy]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Tooltip.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Feedback
Subframe: [In Subframe öffnen](https://app.subframe.com/f023064a5ca0/library?component=Tooltip_ccebd1e9-f6ac-4737-8376-0dfacd90c9f3)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Feedback-Severity-Namen muessen konsistent bleiben]]
## Notizen
-
04 Standards/Subframe UI Standards/Components/Tree View.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Navigation
Subframe: [In Subframe oeffnen](https://app.subframe.com/f023064a5ca0/library?component=Tree+View_4ed46422-ecc3-41e8-8787-e55ee10cdc75)
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
## Notizen
- Finale Pruefung: Ready.
- Bereich war in der neuen Tabelle leer; vorlaeufig #Navigation.
04 Standards/Subframe UI Standards/Components/Undo Action Toast.md
+10
View File
@@ -0,0 +1,10 @@
Bereich: #Patterns
Subframe: Noch nicht verlinkt
Regeln:
- [[03_Benennung]]
- [[07_Global-Rules]]
- ![[04_Gruppenregeln#Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten]]
## Notizen
-
04 Standards/Subframe UI Standards/Layout/README.md
+31
View File
@@ -0,0 +1,31 @@
# Layout-Regeln
Status: in Aufbau
Dieser Bereich ist die Zielstruktur fuer dauerhafte Layout-Regeln der Subframe UI Standards.
Hier hinein gehoeren nur Regeln, die als systemweite Subframe-/HiveGrid-Regel validiert wurden.
## Zweck
Dokumentiert werden koennen spaeter:
- Layout-Raster und Spacing-Rhythmus
- Page-, Card-, Dialog- und Table-Padding
- Dialogbreiten
- Text-Rhythmus
- Form- und Settings-Composition
- Table-, List- und State-Layouts
## Nicht hier hinein
- unvalidierte Brainstorming-Werte
- einzelne Screen-Entscheidungen
- Ticket-spezifische Sonderfaelle
- Komponenten-Details, die besser in `Components/` oder [[04_Gruppenregeln]] liegen
## Arbeitsregel
D-D0b ist aktuell der Arbeitsort fuer Layout-Entscheidungen.
Erst wenn David eine Entscheidung validiert hat und sie wirklich als systemweite Regel gelten soll, wird sie hier dokumentiert.