@public-ui/components 1.1.15 → 1.1.16-rc.1

package/dist/types/utils/prop.validators.d.ts

@@ -3,24 +3,24 @@ import { Stringified } from '../types/common';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTargetAndStopPropagation: (event: Event, target?: HTMLElement) => void;
-declare type SetStateHooks = {
+type SetStateHooks = {
   afterPatch?: Generic.Element.StateHooksCallback;
   beforePatch?: Generic.Element.NextStateHooksCallback;
 };
 export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | undefined, hooks?: SetStateHooks) => void;
-declare type WatchOptions = {
+type WatchOptions = {
   defaultValue?: unknown;
   hooks?: SetStateHooks;
   required?: boolean;
 };
-declare type WatchBooleanOptions = WatchOptions & {
+type WatchBooleanOptions = WatchOptions & {
   defaultValue?: boolean | null;
 };
-declare type WatchStringOptions = WatchOptions & {
+type WatchStringOptions = WatchOptions & {
   defaultValue?: string | null;
   minLength?: number;
 };
-export declare type WatchNumberOptions = WatchOptions & {
+export type WatchNumberOptions = WatchOptions & {
   defaultValue?: number | null;
   min?: number;
   max?: number;

package/dist/types/utils/reuse.d.ts

@@ -0,0 +1,2 @@
+export declare const propergateFocus: <H extends HTMLElement, R extends HTMLElement>(host?: H | undefined, ref?: R | undefined) => void;
+export declare const smartSetTimeout: (cb: () => void, delay?: number) => void;

package/dist/types/utils/validator.d.ts

@@ -1,4 +1,5 @@
 export declare const isObject: (value: unknown) => boolean;
 export declare const isString: (value: unknown, minLength?: number) => boolean;
 export declare const isStyle: (style?: Record<string, string>) => boolean;
+export declare const isEmptyOrPrefixOf: (prefix: string, text: string) => boolean;
 export declare const STATE_CHANGE_EVENT: Event;

package/doc/abbr.md

@@ -0,0 +1,77 @@
+# Abbr
+
+Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.
+Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-abbr _title="Abkürzung" _tooltip-align="top">
+	Abbr
+</kol-abbr>
+```
+
+### Beispiel
+
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
+
+## Verwendung
+
+### Angabe der Beschreibung zur Abkürzung
+
+Die eigentliche Beschreibung wird über das Attribut **`_title`** übergeben.
+
+### Ausrichtung des Tooltip
+
+Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. Mittels der KoliBri-Komponente zoomt der Tooltip proportional zu seinem Text mit und wird vorgelesen.
+
+## Links und Referenzen
+
+- https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute        | Description                                                                            | Type                                                  | Default     |
+| --------------------- | ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
+| `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.               | `string`                                              | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'`     |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-tooltip](../tooltip)
+
+### Graph
+```mermaid
+graph TD;
+  kol-abbr --> kol-tooltip
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-span-wc --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  style kol-abbr fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/accordion.md

@@ -0,0 +1,144 @@
+# Accordion
+
+Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, öffnet sich ein Textfeld mit zusätzlichen Informationen. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
+
+Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-accordion _heading="Überschrift" _level="1" _open>
+	<div slot="content">Beispieltext</div>
+</kol-accordion>
+```
+
+### Beispiel
+
+<div class="grid gap-2">
+  <kol-accordion _heading="Element 1">
+    <div slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
+    <div slot="header">Inhalt eines Header</div>
+  </kol-accordion>
+  <kol-accordion _heading="Element 2">
+    <div slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
+  </kol-accordion>
+  <kol-accordion _heading="Element 3">
+    <div slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
+    <div slot="header">Inhalt eines Header</div>
+  </kol-accordion>
+</div>
+
+## Verwendung
+
+### Überschrift im Accordion-Tab
+
+Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **\_heading** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
+
+### Größe der Überschrift
+
+Die Schriftgröße, mit der die Überschrift im Accordion-Tab angezeigt wird, wird durch das Attribut **\_level** übergeben. Möglich sind die Level **1** bis **6**
+
+### Inhalt im Kopfbereich des Accordion
+
+Ein optisch abgetrennter Inhalt im Kopfbereich des Accordions wird über einen eigenen Slot übergeben. Gibt es diesen Slot nicht oder wird er leer übergeben, ist der Kopfbereich nicht sichtbar.
+
+**`<div slot="header">Inhalt im Kopfbereich</div>`**
+
+### Inhalt des Accordion
+
+Der Hauptinhalt des Accordions wird über einen eigenen Slot übergeben.
+
+**`<div slot="content">Inhalt im Kopfbereich</div>`**
+
+### Accordion geöffnet anzeigen
+
+Standardmäßig wird das Accordion nach dem Laden der Seite im geschlossenen Zustand angezeigt. Soll das Accordion geöffnet angezeigt werden, setzen Sie das Attribut **\_open** zusätzlich ein.
+
+### Best practices
+
+- Verwenden Sie ein Accordion, um lange Textabschnitte unter einem thematischen Oberbegriff zusammenzufassen
+- Verwenden Sie ein Accordion, um weniger wichtige Informationen, als Ergänzung zu Hauptinformationen, zur Verfügung zu stellen.
+- Mit einem Accordion können Sie die Länge Ihrer Webseite deutlich reduzieren und stellen gleichzeitig die Erreichbarkeit aller Informationen für die Nutzer:innen sicher.
+- Verwenden Sie eindeutige Überschriften, um die Nutzer:innen auf die weiteren Informationen des Accordions hinzuweisen.
+- Vermeiden Sie, wichtige `Call-To-Action`-Elemente innerhalb eines Accordions zu verbergen.
+- Lassen Sie Fehlermeldungen nicht innerhalb des Accordions anzeigen, um zu vermeiden, dass Nutzer:innen wichtige Informationen übersehen.
+- Verwenden Sie ein Accordion nicht als Auswahl-Element für Nutzer:innen.
+- Verwenden Sie ein Accordion nicht, um wichtige Informationen zu rechtlichen Angaben oder zum Datenschutz anzuzeigen.
+
+### Anwendungsfälle
+
+- Häufig gestellte Fragen (FAQ)
+
+## Barrierefreiheit
+
+In der **Accordion**-Komponente wird das Öffnen-/Schließen-Icon links ausgerichtet, um Nutzer:innen mit eingeschränktem Sichtfeld eine bessere Bedienbarkeit zu ermöglichen.
+
+Es wurde bewusst auf die Verwendung von Icons, wie z.B. `<` oder `>` verzichtet. Die Verwendung der Icons `+` und `-` gewährleistet eine bessere Sicht- und Erkennbarkeit bezüglich des Geöffnet- und Geschlossen-Status.
+
+Bei der farblichen Gestaltung wurde besonders Wert auf einen höchstmöglichen Kontrast in der
+Standardansicht gelegt.
+
+### Tastatursteuerung
+
+| Taste   | Funktion                                             |
+| ------- | ---------------------------------------------------- |
+| `Tab`   | Springt die einzelnen Accordion-Tabs an.             |
+| `Enter` | Öffnet bzw. schließt den fokussierten Accordion-Tab. |
+
+## Links und Referenzen
+
+- https://www.w3.org/TR/wai-aria-practices/#accordion
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute  | Description                                               | Type                                                                          | Default     |
+| ----------------------- | ---------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------- |
+| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des Accordions an.                   | `string`                                                                      | `undefined` |
+| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                     | `1`         |
+| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \| { onClick?: EventValueCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`                 | `_open`    | Gibt an, ob das Accordion geöffnet ist.                   | `boolean \| undefined`                                                        | `false`     |
+
+
+## Slots
+
+| Slot        | Description                                                                     |
+| ----------- | ------------------------------------------------------------------------------- |
+| `"content"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |
+| `"header"`  | Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.    |
+
+
+## Shadow Parts
+
+| Part          | Description                                                 |
+| ------------- | ----------------------------------------------------------- |
+| `"accordion"` | Ermöglicht das Stylen des äußeren Container des Accordions. |
+| `"close"`     | Ermöglicht das Stylen des geschlossenen Zustands und Icons. |
+| `"content"`   | Ermöglicht das Stylen des Inhaltsbereichs.                  |
+| `"header"`    | Ermöglicht das Stylen des Kopfbereichs.                     |
+| `"icon"`      | Ermöglicht das Stylen der Icons.                            |
+| `"open"`      | Ermöglicht das Stylen des geöffneten Zustands und Icons.    |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-heading-wc](../heading)
+- [kol-icon](../icon)
+
+### Graph
+```mermaid
+graph TD;
+  kol-accordion --> kol-heading-wc
+  kol-accordion --> kol-icon
+  style kol-accordion fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/alert.md

@@ -0,0 +1,130 @@
+# Alert
+
+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
+
+```tsx
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">
+	Textbereich im Alert
+</kol-alert>
+```
+
+### Beispiel
+
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">Textbereich im Alert</kol-alert>
+
+## Verwendung
+
+### Überschrift
+
+Die **Überschrift** der Alert-Komponente wird über das Attribut `_heading` bestimmt.
+
+### Größe der Überschrift
+
+Die **Größe** der Überschrift wird über das Attribut `_level` bestimmt und lässt die Werte 1 - 6 zu.
+
+### 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.
+
+### 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 **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
+
+- https://www.w3.org/TR/wai-aria-practices/#alert
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                                                                       | Type                                                                    | Default     |
+| ------------ | ------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
+| `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean \| undefined`                                                  | `false`     |
+| `_hasCloser` | `_has-closer` | Gibt an, ob der Alert ein Schließen-Icon hat.                                     | `boolean \| undefined`                                                  | `false`     |
+| `_heading`   | `_heading`    | Gibt den Titel der Meldung an.                                                    | `string \| undefined`                                                   | `undefined` |
+| `_level`     | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                               | `1`         |
+| `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                  | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
+| `_type`      | `_type`       | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
+| `_variant`   | `_variant`    | Gibt an, welche Benachrichtigungsvariante dargestellt wird.                       | `"card" \| "msg" \| undefined`                                          | `'msg'`     |
+
+
+## Dependencies
+
+### Used by
+
+ - kol-input
+ - [kol-input-adapter-leanup](../input-adapter-leanup)
+ - [kol-input-radio](../input-radio)
+ - [kol-toast](../toast)
+
+### Depends on
+
+- [kol-heading-wc](../heading)
+- kol-button-wc
+- [kol-icon](../icon)
+
+### Graph
+```mermaid
+graph TD;
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-input --> kol-alert
+  kol-input-adapter-leanup --> kol-alert
+  kol-input-radio --> kol-alert
+  kol-toast --> kol-alert
+  style kol-alert fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/badge.md

@@ -0,0 +1,137 @@
+# 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
+
+```tsx
+<kol-badge _label="Beispieltext" _color="#000000" _icon="home" _icon-align="right" style={{ fontWeight: '600' }}></kol-badge>
+```
+
+### Beispiel
+
+<kol-badge _label="Beispieltext" _color="#000000" _icon="home" _icon-align="right"></kol-badge>
+
+## 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.
+
+### Anzeige eines Icon im Badge
+
+KoliBri stellt die komplette Bibliothek von **Icofont** zur Verfügung. Sie können daher optional im Badge ein Icon aus Icofont anzeigen lassen. Bestimmen Sie das Icon über das Attribut **\_icon="_Name des Icon_"**.
+
+Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie [hier](https://icofont.com/icons)
+
+### Position des Icon
+
+Das Icon kann zusätzlich entweder links oder rechts vom Text angezeigt werden. Verwenden Sie für die Angabe der Ausgabeposition das Attribut **\_icon-align=""**.
+Als Wert können Sie `_icon-align="left"` oder `_icon-align="right"` angeben.
+
+### Nur Icon anzeigen
+
+Mit dem Attribut **`_icon-only`** kann festgelegt werden, dass nur das mit dem Attribut **`_icon`** gewählte Icon angezeigt wird. Der Wert im Attribut **`_label`** wird in diesem Fall ignoriert.
+
+### Schriftschnitt
+
+Über Stylinganweisungen im Attribut **style** können Sie den Schriftschnitt im Badge festlegen. Das Attribut **style** erwartet als Wert ein Objekt.
+`style={{ fontWeight: '600' }}`
+
+### 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">
+    Auswahl Anliegen
+    </kol-heading>
+  </li>
+  <li class="flex gap-2">
+    <kol-badge _label="2" _color="#0747a6"></kol-badge>
+    <kol-heading _level="2">
+    Auswahl Amtsstelle
+    </kol-heading>
+  </li>
+  <li class="flex gap-2">
+    <kol-badge _label="3" _color="#0747a6"></kol-badge>
+    <kol-heading _level="2">
+    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>
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute       | Description                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default                  |
+| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| `_color`              | `_color`        | Gibt die Farbe des Hintergrundes bzw. der Schrift an.                                                                              | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `Nationalfarben.Schwarz` |
+| `_icon`               | `_icon`         | Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)                                                     | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined`              |
+| `_iconAlign`          | `_icon-align`   | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll. | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'left'`                 |
+| `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                  |
+| `_label` _(required)_ | `_label`        | Gibt den Label-Text des Badges an.                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
+| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                           | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }`                                                          | `undefined`              |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-tooltip](../tooltip)
+ - [kol-version](../version)
+
+### Depends on
+
+- kol-span-wc
+- kol-button-wc
+
+### Graph
+```mermaid
+graph TD;
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-span-wc --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-tooltip --> kol-badge
+  kol-version --> kol-badge
+  style kol-badge fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+