@public-ui/components 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0 → 4.0.0-alpha.0

package/doc/alert.md

@@ -1,88 +1,4 @@
-# Alert
-
-Synonyme: Message
-
-Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success">Textbereich im Alert</kol-alert>
-<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
-```
-
-### Beispiel
-
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success" >Textbereich im Alert</kol-alert>
-<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
-
-## Verwendung
-
-### Überschrift
-
-Die **Überschrift** der Alert-Komponente wird über das Attribut `_label` bestimmt.
-
-### Überschriftenebene
-
-Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
-
-### Typ des Alert
-
-Die **Alert**-Komponente bietet **vier** unterschiedliche Typen, die sich jeweils auf die farbliche Gestaltung und das verwendetet Icon im Alert beziehen. Zur Wahl stehen:
-
-<ul>
-<li>Success</li>
-<li>Error</li>
-<li>Info</li>
-<li>Warning</li>
-</ul>
-
-Der Typ eines Alert wird über das Attribut `_type` festgelegt.
-
-### Inhalt des Alert
-
-Der Inhalt des Alert wird zwischen das öffnende Element `<kol-alert>` und das schließende `</kol-alert>` geschrieben. Der Inhalt kann aus beliebigem **HTML-Code**, aber auch aus weiteren **KoliBri**-Komponenten bestehen.
-
-### Variante des Alert
-
-Über das Attribut **`_variant`** kann festgelegt werden, in welcher Darstellungsvariante das Alert angezeigt wird. `msg` lässt die linke, farbig hinterlegte Spalte mit dem Icon über die gesamte Höhe des Alerts gehen, `card` setzt die linke Spalte nur neben die Überchrift.
-
-### Best practices
-
-- Verwenden Sie die **Alert**-Komponente an geeigneten Positionen auf Ihrer Webseite, um Informationen im richtigen Zusammenhang darzustellen.
-- Verwenden Sie immer den richtigen **Type** der **Alert**-Komponente, um bei den Benutzer:innen die gewünschte Reaktion zu erzeugen. Vermeiden Sie bspw. den Typ **_Error_**, wenn Sie auf den erfolgreichen Abschluss eines Speichervorgangs hinweisen möchten.
-- Vermeiden Sie, zu viele **Alert**-Komponenten auf einer Seite zu platzieren, da der Informationsgehalt von den Benutzer:innen dann oft nicht mehr als besonders wichtig wahrgenommen wird.
-
-### Anwendungsfälle
-
-- Verwenden Sie die **Alert**-Komponente, wenn Sie die Benutzer:innen auf Fehler bei der Eingabe in Formularen hinweisen möchten.
-- Verwenden Sie die **Alert**-Komponente, um Nutzer:innen auf die erfolgreiche Ausführung von Funktionen hinzuweisen, z.B. **`Ihre Anfrage wurde erfolgreich gespeichert`**.
-- Verwenden Sie die **Alert**-Komponente, um Nutzer:innen weitere Informationen zu einem Thema zur Verfügung zu stellen.
-
-## Barrierefreiheit
-
-Die **Alert**-Komponente wurde auf die Darstellung mit höchstmöglichen Kontrast optimiert.
-
-Das zusätzliche Icon (je nach gewähltem Typ) gewährleistet, dass die Information vom Nutzer nicht allein über die Farbe klassifiziert werden muss.
-
-Bei der Nutzung eines Screenreaders wird immer das Icon mitgelesen.
-Der Titel sollte daher nicht mit dem **Alert**-Typ beginnen, da das zu einem doppelten Vorlesen des **Alert**-Typs führt.
-
-**Beispiel:**  
-Richtig: Label = "Füllen Sie das Feld aus." → Ausgabe: "Fehler - Füllen Sie das Feld aus."  
-Falsch: Label = "Fehler: Füllen Sie das Feld aus." → "Ausgabe: Fehler - Fehler: Füllen Sie das Feld aus."
-
-Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
-
-- Die Schriftfarbe ist entweder weiß oder schwarz.
-- Die Schriftfarbe ist abhängig von der Hintergrundfarbe und wechselt immer auf die Schriftfarbe mit dem größeren Farbkontrast zur Hintergrundfarbe.
-- Ist der Farbkontrast für AA nicht ausreichend, wird die Hintergrundfarbe überschrieben.
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
+# kol-alert
 
 <!-- Auto Generated Below -->
 

package/doc/avatar.md

@@ -1,48 +1,4 @@
-# Avatar
-
-Synonyme: Persona
-
-Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-avatar _label="Erika Maria Mustermann"></kol-avatar>
-<kol-avatar _label="Erika"></kol-avatar>
-<kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar>
-```
-
-### Beispiele
-
-<kol-avatar _label="Erika Maria Mustermann"></kol-avatar>
-<kol-avatar _label="Erika"></kol-avatar>
-<kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar>
-
-## Verwendung
-
-### Mit Bild
-
-In der Standard-Ansicht zeigt die **Avatar**-Komponente ein Avatar-Bild. Hierzu muss das Attribut `_src` mit einer URL zum Bild angegeben werden.  
-Zusätzlich ist es notwendig, das `_label`-Attribut mit dem Namen des Benutzers anzugeben, damit ein Alternativtext ausgezeichnet werden kann.
-
-### Ohne Bild
-
-Die **Avatar**-Komponente kann auch ohne `_src`-Attribut verwendet werden und zeigt in diesem Fall die Initialen des Benutzers, basierend auf dem
-`_label`-Attribut.
-
-### Anwendungsfälle
-
-Verwenden Sie die **Avatar**-Komponente, um das Bild eines Users anzuzeigen.
-
-## Barrierefreiheit
-
-Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
-
-- Die Komponente ist mit einem Beschreibungstext, der den Namen des Users beinhaltet, als aria-label ausgezeichnet.
-- Die Initialen, die alternativ zum Avatar-Bild gezeigt werden, werden als rein visuelles, semantisch nicht relevantes Element betrachtet und für Screenreader
-  entsprechend versteckt.
+# kol-avatar
 
 <!-- Auto Generated Below -->
 

package/doc/badge.md

@@ -1,99 +1,4 @@
-# Badge
-
-Mit **Badges** können Sie bestimmte Informationen auf Ihrer Webseite optisch hervorheben.
-KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnung der Textfarbe auch die Möglichkeit, einem Badge ein Icon und/oder einen anderen Schriftschnitt mitzugeben.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
-```
-
-### Beispiel
-
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
-
-## Kontext für Badges
-
-Um die Benutzerfreundlichkeit und die Zugänglichkeit zu verbessern, sollten Badges
-immer im Kontext einer aussagekräftigen Überschrift verwendet werden.
-
-Stellen Sie sicher, dass jede Gruppe von Badges durch eine Überschrift ergänzt wird, die den gemeinsamen Kontext oder das Thema beschreibt. Vermeiden Sie es, Badges ohne solche beschreibenden Überschriften zu präsentieren.
-
-### Beispiel
-
-```html
-<kol-heading _label="Beispielüberschrift" _level="2"></kol-heading>
-<div>
-	<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
-	<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
-</div>
-```
-
-## Verwendung
-
-### Label im Badge
-
-Der Text, der im Badge angezeigt werden soll, wird über das Attribut **\_label** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
-Das Element `<kol-badge></kol-badge>` beinhaltet selbst keinen Text.
-
-### Hintergrundfarbe des Badge
-
-Ein Badge, ohne weitere Angaben zur Hintergrundfarbe, wird standardmäßig mit hellgrauer Schriftfarbe auf schwarzem Hintergrund angezeigt. Über das Attribut **\_color** können andere Hintergrundfarben gewählt werden.
-
-Die Angabe der gewünschten Hintergrundfarbe erfolgt in hexadezimaler Schreibweise, z.B. **\_color="#000000"** für schwarz.
-
-Die Textfarbe wird automatisch als Kontrastfarbe zur gewählten Hintergrundfarbe errechnet.
-
-### Icons
-
-Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
-Als String übergeben Sie die Iconklasse (z.B.: `_icons="codicon codicon-home`), das Icon wird links vom Text angezeigt.
-Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
-
-### Schriftschnitt
-
-Der Schriftschnitt wird vom Host übernommen, kann also via CSS von außen gesetzt werden.
-
-### Best practices
-
-- Verwenden Sie Badges, um wichtige Informationen in unmittelbarer Nähe des jeweiligen Elements anzuzeigen.
-- Verwenden Sie Badges, um auf geänderte Werte oder einen geänderten Status aufmerksam zu machen.
-- Ein Badge weist den Benutzer darauf hin, dass etwas neu erzeugt oder aktualisiert wurde, z. B. ein „ungelesener Bericht“ oder eine Aktivitätsbenachrichtigung.
-- Behalten Sie in gleichen Anwendungsfällen immer die gleiche Position des Badges bei, um ein einheitliches Erscheinungsbild zu gewährleisten.
-
-## Anwendungsfälle
-
-### Badge als Aufzählungszeichen verwenden
-
-<ul class="m-0 p-0">
-  <li class="flex gap-2">
-    <kol-badge _label="1" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _label="Auswahl Anliegen"></kol-heading>
-  </li>
-  <li class="flex gap-2">
-    <kol-badge _label="2" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _label="Auswahl Amtsstelle"></kol-heading>
-  </li>
-  <li class="flex gap-2">
-    <kol-badge _label="3" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2" _label="Terminauswahl"></kol-heading>
-  </li>
-</ul>
-
-## Barrierefreiheit
-
-Für die Einhaltung der Regeln zur Barrierefreiheit, ist ein optimaler Kontrast zwischen der Hintergrundfarbe und Textfarbe des Badge zwingend erforderlich. KoliBri bietet daher eine automatische Berechnung der Textfarbe aus der gewählten Hintergrundfarbe heraus. Möglich sind die Textfarben **schwarz** und **weiß**, die in Abhängigkeit zur Hintergrundfarbe ausgegeben werden.
-
-Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hierüber die Art der Information erfassen kann.
-
-<kol-alert _type="info">Eine explizite Angabe der Textfarbe ist nicht möglich.</kol-alert>
+# kol-badge
 
 <!-- Auto Generated Below -->
 

package/doc/breadcrumb.md

@@ -1,87 +1,4 @@
-# Breadcrumb
-
-Mit Hilfe der **Breadcrumb**-Komponente kann der Pfad zur aktuellen Position einer Webseite in einer hierarchischen Struktur dargestellt werden.
-
-## Funktionsweise
-
-Die **Breadcrumb**-Komponente zeigt die aktuelle Position einer Webseite in einer horizontalen Navigationsstruktur an. Das jeweils letzte Element rechts stellt die aktuelle Seite selbst dar.
-Diese ist nicht mit einem link versehen. Alle Elemente links der aktuellen Seite sind mit einem Link auf die verknüpfte Seite versehen.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/"},{"_label":"Unterseite von Startseite","_href":"#/unterseite"}]'></kol-breadcrumb>
-</div>
-```
-
-### Beispiel
-
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/"},{"_label":"Unterseite von Startseite","_href":"#/unterseite"}]'></kol-breadcrumb>
-
-## Verwendung
-
-### Definition der Links
-
-Das Attribut **\_links** erwartet die Übergabe eines JSON-Objekts, aus dem sich der Aufbau der anzuzeigenden Breadcrumb-Pfade ergibt. Das JSON-Objekt übergibt beliebig viele Elemente, die jeweils eine Anzahl an Eigenschaften und Werten bereitstellen.
-
-Jede Eigenschaft und der zugehörige Wert müssen in doppelten Anführungszeichen gesetzt werden.
-
-Einzelne Elemente werden in geschweiften Klammern und durch **Komma** separiert geschrieben.
-
-Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** übergeben werden.
-
-<b>Folgende Eigenschaften stehen zur Verfügung:</b>
-
-- **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
-- **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
-- **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
-
-Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
-
-```JSON
-[
-  { '_label': 'Startseite', '_href': '#/', '_icons': 'codicon codicon-home', '_hide-label': true },
-  { '_label': '1. Unterseite', '_href': '/unterseite_eins' },
-  { '_label': '2. Unterseite', '_href': '/unterseite_zwei' }
-]
-```
-
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icons":"codicon codicon-home","hide-label": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
-
-### Best practices
-
-- Die **Breadcrumb**-Komponente ist ein wichtiges Element für eine effektive Suchmaschinenoptimierung Ihrer Webseite.
-- Auch für Benutzer:innen der Webseite bietet eine Breadcrumb-Navigation zusätzliche Übersicht.
-- Positionieren Sie die Breadcrumb möglichst weit oben auf Ihren Inhaltsseiten, um zu gewährleisten, dass Suchmaschinen diese als zusätzliche Informationsquelle zur Struktur Ihrer Webseite nutzen können.
-- Positionieren Sie die Breadcrumb-Komponente auf jeder Inhaltsseite Ihre Webseite. Sie gewährleisten so, dass sich Besucher:innen jederzeit zurecht finden und die aktuelle Position erkennen können.
-- Vermeiden Sie, die Breadcrumb-Navigation auf der Startseite zu positionieren.
-- Verwenden Sie eine Breadcrumb-Navigation nur dann, wenn sie für Benutzer:innen einen wirklichen Mehrwert bieten.
-- Auf mobilen Varianten einer Webseite ist eine Breadcrumb-Navigation möglicherweise nicht sinnvoll.
-
-### Anwendungsfälle
-
-Eine Breadcrumb-Navigation ist auf einer großen Mehrzahl der aktuellen Webseiten zu finden. Somit beschreibt der klassische Anwendungsfall den generellen Einbau dieser Komponente.
-
-## Barrierefreiheit
-
-Achten Sie im Sinne der optimalen Barrierefreiheit darauf, das Attribut `_label` korrekt auszuzeichnen. Beachten Sie diesen Hinweis insbesondere dann, wenn Sie die Option `_hide-label` verwenden und so auf einen beschreibenden Text im Link verzichten würden.
-
-Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-Taste angesprungen werden kann, obwohl dort kein Link hinterlegt ist. Hierdurch kann auch dieses Element von Screenreader erreicht und vorgelesen werden.
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                     |
-| ------- | ------------------------------------------------------------ |
-| `Tab`   | Springt die einzelnen Elemente der Breadcrumb-Navigation an. |
-| `Enter` | Öffnet den Link des aktuellen Elements.                      |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
+# kol-breadcrumb
 
 <!-- Auto Generated Below -->
 

package/doc/button-group.md

@@ -1,92 +1,4 @@
-# ButtonGroup
-
-**Buttons** dienen dazu, Nutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen den Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Applikation zu finden und ermöglichen es ihm, diese Aktionen auszuführen.
-
-Die **ButtonGroup**-Komponente fasst mehrere Buttons zu einer optischen und funktionalen Einheit zusammen.
-
-## Konstruktion
-
-### Hinweis zur Version 3
-
-Die **ButtonGroup** Komponente wurde für die Version 3 wurde als veraltet markiert (`deprecated`), da sie keinen nennenswerten Beitrag zur Verbesserung der Barrierefreiheit beiträgt.
-
-Die Komponente **ButtonGroup** besteht aus einem Hauptelement `<kol-button-group></kol-button-group>`. In ihm werden beliebig viele **Button**-Komponenten zu einer Gruppe zusammengefasst. Die einzelnen **Buttons** entsprechen in ihrer Konstruktion der Beschreibung
-zur **Button**-Komponente.
-
-### Code
-
-```html
-<kol-button-group>
-	<kol-button _label="Speichern" _variant="primary"></kol-button>
-	<kol-button _label="Speichern & Schließen" _variant="normal"></kol-button>
-	<kol-button _label="Abbrechen" _variant="secondary"></kol-button>
-	<kol-button _label="Löschen" _variant="danger"></kol-button>
-	<kol-button _label="Ghost" _variant="ghost"></kol-button>
-	<kol-button _label="Deaktiviert" _disabled></kol-button>
-</kol-button-group>
-```
-
-### Beispiel
-
-<kol-button-group> 
-  <kol-button _label="Speichern" _variant="primary"></kol-button>
-  <kol-button _label="Speichern & Schließen" _variant="normal"></kol-button>
-  <kol-button _label="Abbrechen" _variant="secondary"></kol-button>
-  <kol-button _label="Löschen" _variant="danger"></kol-button>
-  <kol-button _label="Ghost" _variant="ghost"></kol-button>
-  <kol-button _label="Deaktiviert" _disabled></kol-button>
-</kol-button-group>
-
-## Verwendung
-
-### Einfache ButtonGroup
-
-Im einfachsten Fall besteht die **ButtonGroup**-Komponente aus einer Liste beschrifteter Schaltflächen. Für die Beschriftung der Buttons wird lediglich das Attribut **`_label="Ihre Beschriftung"`** verwendet.
-
-### ButtonGroup mit Text, Icon und Text mit Icon
-
-Über das Attribut **`_icons="xxx"`** wird festgelegt, ob und welches Icon verwendet werden soll.
-
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
-
-Über das Attribut **`_hide-label`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
-
-### Ausgabe verschiedener Styles für Buttons in der ButtonGroup
-
-Für die Standardausgabe eines Buttons stehen die Werte **primary**, **secondary**, **normal**, **danger** und **ghost** zur Verfügung. Hierüber wird die farbliche Gestaltung des Buttons festgelegt.
-
-### Optische Ausrichtung
-
-Über das Attribut **`_nestled`** kann eine optische Ausrichtung der ButtonGroup bestimmt werden. An der angegebenen Position werden die abgerundeten Ecken entfernt, so dass der Eindruck einer Button-Leiste entsteht. Möglich sind die Werte `bottom`, `top`, `left`und `right`.
-
-### Best practices
-
-- Verwenden Sie eine primäre Schaltfläche für die nächstbeste Aktion. Verbleibende Calls-to-Actions sollten als sekundäre Schaltfläche dargestellt werden.
-- Verwenden Sie Schaltflächen an einheitlichen Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
-- Verwenden Sie nur eine primäre Schaltfläche je Viewport. Auf der gesamten Seite kann ein Button-Style beliebig oft auftreten.
-- Die Beschriftung des Button muss die Aktion beschreiben, die die Schaltfläche ausführt. Sie sollte ein Verb enthalten (z.B. Speichern). Verwenden Sie prägnante, spezifische, selbsterklärende Beschriftungen.
-- Schaltflächenbeschriftungen sollten immer dann auch ein Nomen enthalten, wenn es Raum für Interpretationen darüber gibt, wofür das Verb zuständig ist. Verwenden Sie keine generischen Bezeichnungen wie "OK", insbesondere nicht im Fehlerfall. Fehler sind nie "OK".
-- Wenn Sie mehrere Buttons kombinieren oder anordnen möchten, verwenden Sie die **ButtonGroup**-Komponente.
-- Verwenden Sie nicht mehrere Buttons im Style "primär" in einer **ButtonGroup**.
-- Verwenden Sie Buttons nicht als Link oder als Navigationselement.
-
-## Barrierefreiheit
-
-Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen in Bezug auf die barrierefreiheit zu berücksichtigen. Die innerhalb der ButtonGroup enthaltenen **Button**-Komponenten besitzen jedoch einige wichtige Aspekte in diesem Zusammenhang:
-
-- In der Button-Komponente werden die optionalen **Icons** links ausgerichtet, um Nutzer\*innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen.
-- Die Farben der **Variant-Typen** `primary`, `secondary`, `normal`, `danger` und `ghost` wurden in Hinblick auf bestmöglichen Kontrast gewählt. Die Schriftfarbe ist per default immer weiß.
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                                       |
-| ------- | ------------------------------------------------------------------------------ |
-| `Tab`   | Springt den einzelnen Button der ButtonGroup an und fokussiert ihn.            |
-| `Enter` | Öffnet den Link des fokussierten Button oder führt dessen onClick-Methode aus. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+# kol-button-group
 
 <!-- Auto Generated Below -->
 

package/doc/button-link.md

@@ -1,51 +1,4 @@
-# ButtonLink
-
-Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.
-
-Einen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property `_disabled`. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.
-
-Statt, wie bei einem Link, `_href` zu verwenden, wird bei einem ButtonLink das Property über den `Click-Callback` gesteuert. Hierzu wird das `_on`-Property verwendet.
-
-Bei einem Link gibt es das Property `target`, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.
-
-Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `secondary` usw.) angeboten wird, stehen die Properties `_customClass` und `_variant` nicht zur Verfügung.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onClick: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event       | Auslöser                                                       | Value                |
-| ----------- | -------------------------------------------------------------- | -------------------- |
-| onFocus     | Element wird fokussiert                                        | -                    |
-| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
-| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
-| onBlur      | Element verliert Fokus                                         | -                    |
-
-### Beispiel
-
-<div class="flex gap-2">
-  <kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
-</div>
+# kol-button-link
 
 <!-- Auto Generated Below -->
 

package/doc/button.md

@@ -1,120 +1,4 @@
-# Button
-
-**Buttons** dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-button _label="Primary" _variant="primary"></kol-button>
-<kol-button _label="Secondary" _variant="secondary"></kol-button>
-<kol-button _label="Normal" _variant="normal"></kol-button>
-<kol-button _label="Danger" _variant="danger"></kol-button>
-<kol-button _label="Ghost" _variant="ghost"></kol-button>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onClick: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event       | Auslöser                                                       | Value                |
-| ----------- | -------------------------------------------------------------- | -------------------- |
-| onFocus     | Element wird fokussiert                                        | -                    |
-| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
-| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
-| onBlur      | Element verliert Fokus                                         | -                    |
-
-### Beispiel
-
-Default
-
-<div class="flex flex-wrap gap-2">
-  <kol-button _label="Primary" _variant="primary"></kol-button>
-  <kol-button _label="Secondary" _variant="secondary"></kol-button>
-  <kol-button _label="Normal" _variant="normal"></kol-button>
-  <kol-button _label="Danger" _variant="danger"></kol-button>
-  <kol-button _label="Ghost" _variant="ghost"></kol-button>
-</div>
-
-Disabled
-
-<div class="flex flex-wrap gap-2">
-  <kol-button _label="Primary" _variant="primary" _disabled></kol-button>
-  <kol-button _label="Secondary" _variant="secondary" _disabled></kol-button>
-  <kol-button _label="Normal" _variant="normal" _disabled></kol-button>
-  <kol-button _label="Danger" _variant="danger" _disabled></kol-button>
-  <kol-button _label="Ghost" _variant="ghost" _disabled></kol-button>
-</div>
-
-## Verwendung
-
-### Beschriftung
-
-Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut **`_label`**.
-`_label="Schaltflächenbeschriftung"`
-
-### Icons
-
-Icons (**`_icons`**) kann entweder als String angegeben werden, oder als Objekt.
-Als String übergeben Sie die Iconklasse (z.B.: `_icons="codicon codicon-home`), das Icon wird links vom Text angezeigt.
-Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
-
-### Schaltfläche ohne Text
-
-Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
-
-<kol-alert _type="info">Beachten Sie, dass das Attribut **`_label`** auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll, dieses wird von Screenreadern vorgelesen und in den Tooltip gesetzt.</kol-alert>
-
-### Darstellung angeben
-
-Zur Steuerung der Darstellung verwenden Sie das Attribut **`_variant`**. Der Standardwert ist `primary`, alternativ kann auch `primary`, `secondary`, `normal`, `danger`, `ghost`, oder `custom` gesetzt werden.<br/>
-
-Über die Verwendung des Wertes `custom` kann eine eigene Darstellung gewählt werden. Verpflichtend ist in diesem Fall das Setzen des Attribut **`_custom-class`**, damit die Schaltfläche im Shadow-Dom mittels CSS selektiert werden kann.
-
-### Best practices
-
-- Verwenden Sie eine primäre Schaltfläche für die nächstbeste Aktion. Verbleibende Calls-to-Action sollten als sekundäre Schaltfläche dargestellt werden.
-- Verwenden Sie Schaltflächen an einheitlichen Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
-- Verwenden Sie nur eine primäre Schaltfläche je Viewport. Auf der gesamten Seite kann ein Button-Style beliebig oft auftreten.
-- Die Beschriftung des Button muss die Aktion beschreiben, die die Schaltfläche ausführt. Sie sollte ein Verb enthalten (z.B. Speichern). Verwenden Sie prägnante, spezifische, selbsterklärende Beschriftungen.
-- Schaltflächenbeschriftungen sollten immer dann auch ein Nomen enthalten, wenn es Raum für Interpretationen darüber gibt, wofür das Verb zuständig ist. Verwenden Sie keine generischen Bezeichnungen wie "OK", insbesondere nicht im Fehlerfall. Fehler sind nie "OK".
-- Verwenden Sie nicht mehrere Buttons im Style "primär" innerhalb einer Gruppierung.
-- Verwenden Sie Buttons nicht als Link oder als Navigationselement.
-
-## Barrierefreiheit
-
-Für Menschen mit einem eingeschränkten Sichtfeld ist die Positionierung des **Icons** im Button links von der Beschriftung optimal.
-
-Probleme mit Disabled-Status
-
-- Darstellung Kontraste
-- Möglichkeit des Nutzerfeedbacks
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                     |
-| ------- | ------------------------------------------------------------ |
-| `Tab`   | Springt den einzelnen Button an und fokussiert ihn.          |
-| `Enter` | Führt die onClick-Methode der fokussierten Schaltfläche aus. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+# kol-button
 
 <!-- Auto Generated Below -->