@public-ui/components 2.2.6-rc.2 → 3.0.0-0edf6aa20a9ac9faa46ebe0e45a8c62841b05164.0

package/dist/types/schema/tag-names.d.ts

@@ -7,51 +7,49 @@ export declare enum TagEnum {
     'badge' = 5,
     'breadcrumb' = 6,
     'button' = 7,
-    'button-group' = 8,
-    'button-link' = 9,
-    'card' = 10,
-    'combobox' = 11,
-    'details' = 12,
-    'drawer' = 13,
-    'form' = 14,
-    'heading' = 15,
-    'icon' = 16,
-    'image' = 17,
-    'indented-text' = 18,
-    'input-checkbox' = 19,
-    'input-color' = 20,
-    'input-date' = 21,
-    'input-email' = 22,
-    'input-file' = 23,
-    'input-number' = 24,
-    'input-password' = 25,
-    'input-radio' = 26,
-    'input-range' = 27,
-    'input-text' = 28,
-    'kolibri' = 29,
-    'link' = 30,
-    'link-button' = 31,
-    'link-group' = 32,
-    'logo' = 33,
-    'modal' = 34,
-    'nav' = 35,
-    'pagination' = 36,
-    'progress' = 37,
-    'select' = 38,
-    'separator' = 39,
-    'skip-nav' = 40,
-    'spin' = 41,
-    'single-select' = 42,
-    'split-button' = 43,
-    'symbol' = 44,
-    'table' = 45,
-    'table-stateless' = 46,
-    'table-stateful' = 47,
-    'tabs' = 48,
-    'textarea' = 49,
-    'toast-container' = 50,
-    'toolbar' = 51,
-    'tooltip' = 52,
-    'tree' = 53,
-    'tree-item' = 54
+    'button-link' = 8,
+    'card' = 9,
+    'combobox' = 10,
+    'details' = 11,
+    'drawer' = 12,
+    'form' = 13,
+    'heading' = 14,
+    'icon' = 15,
+    'image' = 16,
+    'input-checkbox' = 17,
+    'input-color' = 18,
+    'input-date' = 19,
+    'input-email' = 20,
+    'input-file' = 21,
+    'input-number' = 22,
+    'input-password' = 23,
+    'input-radio' = 24,
+    'input-range' = 25,
+    'input-text' = 26,
+    'kolibri' = 27,
+    'link' = 28,
+    'link-button' = 29,
+    'logo' = 30,
+    'modal' = 31,
+    'nav' = 32,
+    'pagination' = 33,
+    'popover-button' = 34,
+    'progress' = 35,
+    'select' = 36,
+    'separator' = 37,
+    'single-select' = 38,
+    'skip-nav' = 39,
+    'spin' = 40,
+    'split-button' = 41,
+    'symbol' = 42,
+    'table' = 43,
+    'table-stateful' = 44,
+    'table-stateless' = 45,
+    'tabs' = 46,
+    'textarea' = 47,
+    'toast-container' = 48,
+    'toolbar' = 49,
+    'tooltip' = 50,
+    'tree' = 51,
+    'tree-item' = 52
 }

package/dist/types/schema/types/icons.d.ts

@@ -4,7 +4,7 @@ export type KoliBriCustomIcon = {
     label?: string;
     style?: Record<string, string>;
 };
-type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
+export type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
 export type KoliBriHorizontalIcons = {
     right?: IconOrIconClass;
     left?: IconOrIconClass;

package/dist/types/schema/types/input/control/number.d.ts

@@ -6,10 +6,8 @@ export declare const inputDateTypeOptions: readonly ["date", "datetime-local", "
 export type InputDateType = (typeof inputDateTypeOptions)[number];
 export type OptionalInputProps<T> = {
     accessKey: string;
-    alert: boolean;
     autoComplete: InputTypeOnOff;
     disabled: boolean;
-    error: string;
     hideLabel: boolean;
     hint: string;
     icons: Stringified<KoliBriHorizontalIcons>;

package/dist/types/schema/types/input/types.d.ts

@@ -1,21 +1,21 @@
 import type { EventCallback, EventValueOrEventCallback } from '../callbacks';
-import type { Events } from '../../enums';
+import type { Callback } from '../../enums';
 export declare const inputTypeOnOffOptions: readonly ["on", "off"];
 export type InputTypeOnOff = (typeof inputTypeOnOffOptions)[number];
 type InputTypeOnBlur = {
-    [Events.onBlur]?: EventCallback<Event>;
+    [Callback.onBlur]?: EventCallback<Event>;
 };
 type InputTypeOnClick = {
-    [Events.onClick]?: EventCallback<Event>;
+    [Callback.onClick]?: EventCallback<Event>;
 };
 type InputTypeOnChange = {
-    [Events.onChange]?: EventValueOrEventCallback<Event, unknown>;
+    [Callback.onChange]?: EventValueOrEventCallback<Event, unknown>;
 };
 type InputTypeOnFocus = {
-    [Events.onFocus]?: EventCallback<Event>;
+    [Callback.onFocus]?: EventCallback<Event>;
 };
 type InputTypeOnInput = {
-    [Events.onInput]?: EventValueOrEventCallback<Event, unknown>;
+    [Callback.onInput]?: EventValueOrEventCallback<Event, unknown>;
 };
 export type Option<T> = {
     disabled?: boolean;

package/dist/types/schema/types/table.d.ts

@@ -3,7 +3,6 @@ export type KoliBriTableCellTextAlign = 'center' | 'left' | 'right' | 'justify';
 export type KoliBriSortDirection = 'ASC' | 'DESC' | 'NOS';
 export type KoliBriTableDataType = Record<string, unknown>;
 export type KoliBriTableCell = {
-    asTd?: boolean;
     colSpan?: number;
     label: string;
     render?: KoliBriTableRender;

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

@@ -1,5 +1,19 @@
-type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus' | 'input' | 'toggle' | 'selection-change';
-export declare function stopPropagation(event: Event): void;
-export declare function tryToDispatchKoliBriEvent<T>(type: KoliBriEventType, target?: EventTarget, detail?: T): void;
-export declare function preventDefaultAndStopPropagation(event: Event): void;
-export {};
+declare enum KolEvent {
+    blur = "kolBlur",
+    change = "kolChange",
+    changePage = "kolChangePage",
+    changePageSize = "kolChangePageSize",
+    click = "kolClick",
+    close = "kolClose",
+    focus = "kolFocus",
+    input = "kolInput",
+    mousedown = "kolMousedown",
+    reset = "kolReset",
+    select = "kolSelect",
+    selectionChange = "kolSelectionChange",
+    sort = "kolSort",
+    submit = "kolSubmit",
+    toggle = "kolToggle"
+}
+declare function dispatchDomEvent<T>(target: HTMLElement, event: KolEvent, detail?: T): void;
+export { KolEvent, dispatchDomEvent };

package/doc/abbr.md

@@ -1,61 +1,20 @@
-# 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
-
-```html
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
-```
-
-### Beispiel
-
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
-
-## Verwendung
-
-### Angabe der Beschreibung zur Abkürzung
-
-Der Begriff bzw. die Erklärung wird über das Attribut **`_label`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
-
-### Ausrichtung des Tooltip
-
-Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
-
-## Barrierefreiheit
-
-Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
-Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
+# kol-abbr
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                        | Type                                                  | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| Property | Attribute | Description                                                                                                        | Type                  | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
+| `_label` | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined` | `undefined` |
 
 
 ## Slots
 
-| Slot | Description                             |
-| ---- | --------------------------------------- |
-|      | Der Begriff, der erläutert werden soll. |
+| Slot | Description                    |
+| ---- | ------------------------------ |
+|      | The abbreviation (short form). |
 
 
 ----------------------------------------------

package/doc/accordion.md

@@ -1,111 +1,4 @@
-# Accordion
-
-Synonyme: Collapse
-
-Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. 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
-
-```html
-<div class="grid gap-2">
-	<kol-accordion _label="Element 1">
-		<div>
-			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 _label="Element 2">
-		<div>
-			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>
-</div>
-```
-
-### Beispiel
-
-<div class="grid gap-2">
-	<kol-accordion _label="Element 1">
-		<div>
-			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 _label="Element 2">
-		<div>
-			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>
-</div>
-
-## Verwendung
-
-### Überschrift im Accordion-Tab
-
-Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_label`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
-
-### Überschriftenebene
-
-Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
-
-### Inhalt des Accordion
-
-Der Hauptinhalt des Accordions wird über deb Slot übergeben.
-
-**`<kol-accordion _label="Element 1">Accordion-Inhalt</kol-accordion>`**
-
-### 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
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
+# kol-accordion
 
 <!-- Auto Generated Below -->
 
@@ -123,16 +16,6 @@ Standardansicht gelegt.
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `kolFocus() => Promise<void>`
 
 

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 -->
 
@@ -94,7 +10,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean` \| `undefined`                                                  | `false`     |
 | `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                                  | `false`     |
 | `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined`                                                   | `undefined` |
-| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
+| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `0`         |
 | `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
 | `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
 | `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |

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