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

package/doc/nav.md

@@ -0,0 +1,156 @@
+# Nav
+
+Eine **Navigationsleiste** ist eine Gruppe von verwandten Links oder „Navigationselementen“, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln. Dabei werden häufig animierte Übergänge verwendet.
+
+Die **Nav**-Komponente stellt eine vollwertige vertikale , bzw. horizontale **Navigationsleiste** bereit. Sie kann mehrere Ebenen enthalten und in verschiedenen Breiten ausgegeben werden. Die **Nav**-Komponente repräsentiert die Struktur der Webseite und hat so eine fundamentale Bedeutung sowohl für Nutzer:innen, als auch für Suchmaschinen.
+
+**KoliBri** stellt eine umfangreich konfigurierbare, vertikale oder horizontale **Navigationsleiste** zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann.
+Menüpunkte der obersten Ebene, wie z.B. die Startseite, werden stets über die ganze Breite der **Navigation** gestreckt. Nachfolgende Ebenen, als direkte Kindelemente, werden auf der linken Seite
+etwas eingerückt ausgegeben. Übergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am linken Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich
+das Plus-Icon automatisch zu einem **Minus-Icon**, mit dem der Menüpunkt wieder geschlossen werden kann.
+
+Aktive Menüpunkte werden mit einer farbigen Markierung dargestellt.
+
+Über ein **Doppelpfeil-Icon** unterhalb der Navigation kann die Breite der **Nav**-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur
+noch die Icons ausgegeben.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-nav
+	_links='[{_"label":"Startseite", "_href":"startseite"},{_"label":"Unterseite von Startseite", "_href":"unterseite"}]'
+	_has-compact-button="true"
+></kol-nav>
+```
+
+### Beispiel
+
+<kol-nav _ariaLabel="Navigation" _links='[{"_label":"Startseite","_href":"startseite", "_children":[{"_label":"1. Untermenüpunkt","_href":"startseite/1-untermenuepunkt"},{"_label":"2. Untermenüpunkt","_href":"startseite/2-untermenuepunkt"}]},{"_label":"2. Menüpunkt","_href":"unterseite"}]' _has-compact-button></kol-nav>
+
+## Verwendung
+
+### Links in der Navigationsleiste definieren
+
+Die Navigationsstruktur wird als JSON-Struktur an das Attribut `_links_` übergeben. Die Struktur ist als Wert/Parameter-Paar aufgebaut:
+
+```tsx
+[
+  {"_label":"Startseite", "_href":"startseite"},
+  {"_label":"Unterseite 1":"_href":"unterseite1"},
+  {"_label":"Unterseite 2":"_href":"unterseite2"}
+]
+```
+
+Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzliche Attribut `_children` im übergeordneten Element.
+
+```tsx
+[
+	{
+		_label: 'Startseite',
+		_href: 'startseite',
+		_children: [
+			{ _label: '1. Untermenüpunkt', _href: 'startseite/1-untermenuepunkt' },
+			{ _label: '2. Untermenüpunkt', _href: 'startseite/2-untermenuepunkt' },
+		],
+	},
+	{ _label: '2. Menüpunkt', _href: 'unterseite' },
+];
+```
+
+### Kompakte Navigationsleiste anzeigen
+
+Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut `_compact="true"`.
+
+### Umschalter normale/kompakte Darstellung
+
+Um zwischen beiden Darstellungen umschalten zu können, kann über das Attribut `_hasCompactButton="true"`
+ein Link unterhalb der Navigationsleiste angezeigt werden.
+
+### Umschaltung horizontale/vertikale Ausrichtung
+
+Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler und vertikaler Ausrichtung umgeschaltet werden. Mögliche Werte sind:<br/>
+
+- `horizontal`
+- `vertical`
+
+### Best practices
+
+- Verwenden Sie **Navigationsleisten**, um **Navigation** oder navigationsähnliche Aktionen darzustellen (z. B. interne oder externe Links, Abmelden, Kontrolle der Sichtbarkeit auf der Seite).
+- Verwenden Sie das Label, um eine klare und präzise Beschreibung des Inhalts zu diesem bestimmten Navigationselement bereitzustellen.
+- Verwenden Sie keine **Navigationsleisten** für Aktionen, die besser als Schaltflächen dargestellt werden (z. B. „Speichern“, „Löschen“, „Artikel in den Warenkorb legen“).
+- Stapeln Sie nicht mehrere **Navigationsleisten** direkt nebeneinander.
+- Verwenden Sie keine **Navigationsleisten** zum Vergleichen von Inhalten (z. B. unterschiedliche Leistungen).
+- Berücksichtigen Sie die Anzahl der Navigationselemente, die Sie in die **Navigationsleiste** einfügen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, ziehen Sie alternative Ansätze zur Präsentation des Inhalts in Betracht oder verwenden Sie ein anderes Navigationsmuster/eine andere Komponente.
+- Wenn ein Menüpunkt Kindelemente besitzt, bewirkt die Enter-Taste das Öffnen des nächsten Kindelements. Es ist in diesem Fall nicht möglich den Link im Elternelement mit der Enter-Taste auszuführen.
+
+### Anwendungsfälle
+
+- Verwenden Sie **Navigationsleisten** als In-Page-Navigation auf einer Landingpage.
+- Verwenden Sie **Navigationsleisten**, um verwandte Informationen auf einer Landingpage zu organisieren.
+- Nutzen Sie **Navigationsleisten**, um Angebote oder Vorteile in verschiedene Kategorien einzuordnen (z.B. Formulare).
+- Verwenden Sie **Navigationsleisten**, um FAQs in verschiedene Kategorien zu unterteilen.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste   | Funktion                                                                                                                                                                                                                   |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`   | Fokussiert den ersten Menüpunkt in der Navigation. Nachfolgend kann mit der Tab-Taste jeder Menüpunkt angesprungen werden. Wenn der Has-compact-Button aktiviert wurde, ist dieser ebenfalls mit der Tab-Taste erreichbar. |
+| `Enter` | Öffnet bzw.schließt den fokussierten Menüpunkt. Besitzt der fokussierte Menüpunkt kein weiteres Kindelement, wird mit der Enter-Taste der eigentliche Link Aufgerufen.                                                     |
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                  | Attribute             | Description                                                                                                      | Type                                                            | Default      |
+| ------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ |
+| `_ariaCurrentValue`       | `_aria-current-value` | Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll. | `"date" \| "location" \| "page" \| "step" \| "time" \| boolean` | `false`      |
+| `_ariaLabel` _(required)_ | `_aria-label`         | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.                                     | `string`                                                        | `undefined`  |
+| `_collapsible`            | `_collapsible`        | Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.                    | `boolean \| undefined`                                          | `false`      |
+| `_compact`                | `_compact`            | Gibt an, ob die Navigation kompakt angezeigt wird.                                                               | `boolean \| undefined`                                          | `false`      |
+| `_hasCompactButton`       | `_has-compact-button` | Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.   | `boolean \| undefined`                                          | `false`      |
+| `_links` _(required)_     | `_links`              | Gibt die geordnete Liste der Seitenhierarchie an.                                                                | `NavLinkWithChildrenProps[] \| string`                          | `undefined`  |
+| `_orientation`            | `_orientation`        | Gibt die Ausrichtung der Navigation an.                                                                          | `"horizontal" \| "vertical" \| undefined`                       | `'vertical'` |
+| `_variant`                | `_variant`            | Gibt an, welche Ausprägung der Button hat.                                                                       | `"primary" \| "secondary" \| undefined`                         | `'primary'`  |
+
+
+## Shadow Parts
+
+| Part    | Description |
+| ------- | ----------- |
+| `"nav"` | TBD         |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-link-wc
+- [kol-button](../button)
+
+### Graph
+```mermaid
+graph TD;
+  kol-nav --> kol-link-wc
+  kol-nav --> kol-button
+  kol-link-wc --> kol-span-wc
+  kol-link-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-button --> kol-button-wc
+  style kol-nav fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/pagination.md

@@ -0,0 +1,111 @@
+# Pagination
+
+Mit Hilfe der <b>Paginierung-Komponente</b> lassen sich umfangreiche Inhalte auf der Seite
+in handliche Abschnitte unterteilen. Diese können dann über die Paginierung der Reihe nach
+durchlaufen werden.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<div>
+	<kol-pagination _total="100" _page="6"></kol-pagination>
+	<kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
+	<kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
+</div>
+```
+
+### Beispiel
+
+<div class="grid gap-2">
+  <kol-heading _level="3">Standardausgabe nur mit aktuellem Element</kol-heading>
+  <kol-pagination _total="100" _page="6"></kol-pagination>
+  <kol-heading _level="3">Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)</kol-heading>
+  <kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
+  <kol-heading _level="3">Ausgabe 2 Elemente links und rechts (_boundary-count)</kol-heading>
+  <kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
+</div>
+
+## Verwendung
+
+Die Pagination-Komponente kann über Ihre Properties konfiguriert werden.
+
+- Die Property `_total` bestimmt die Anzahl der Elemente.
+  Ohne weitere Properties werden immer das erste und die letzte Element angezeigt, die dazwischen liegenden durch Punkte symbolisiert.<br/>
+- Über die Property `boundary-count` wird die Anzahl von Elementen bestimmt, die in der Pagination-Komponente rechts und links angezeigt werden, während die übrigen Elemente durch Punkte symbolisiert werden. Die Einstellung `boundary-count` = 2 und `_count` = 10 hätte zur Folge, das links die Elemente 1 und 2 und rechts die Elemente 9 und 10 angezeigt werden, während die Elemente 3 bis 8 durch Punkte symbolisiert werden.<br/>
+- Die Property `_page` legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
+- Über die Property `_sibling-count` kann festgelegt werden, wie viele Elemente links und rechts des aktuellen Elements angezeigt werden sollen. Der Wert 2 hätte also zur Folge, daß zwei Elemente links und rechts des
+  aktuellen Elements angezeigt werden.
+
+<!-- ### Best practices -->
+
+### Anwendungsfälle
+
+Die **Pagination**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo
+auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, kann sie zur Verbesserung der Struktur und Übersichtlichkeit eingesetzt werden.<br/>
+Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte oder auch listenartige Layouts, wie z.B. Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
+
+## Barrierefreiheit
+
+<!-- ## Links und Referenzen -->
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute            | Description                                                                                    | Type                                                                                                                                                                                              | Default     |
+| --------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen. | `number \| undefined`                                                                                                                                                                             | `1`         |
+| `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.        | `string \| undefined`                                                                                                                                                                             | `undefined` |
+| `_hasButtons`         | `_has-buttons`       | Gibt an, welche Sprung-Schalter sichtbar sein sollen.                                          | `boolean \| string \| undefined \| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                          | `undefined` |
+| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                           | `{ onChangePage?: EventValueCallback<Event, number> \| undefined; onChangePageSize?: EventValueCallback<Event, number> \| undefined; onClick?: EventValueCallback<Event, number> \| undefined; }` | `undefined` |
+| `_page` _(required)_  | `_page`              | Gibt an, welche Seite aktuell ausgewählt ist.                                                  | `number`                                                                                                                                                                                          | `undefined` |
+| `_pageSize`           | `_page-size`         | Gibt an, wie viele Einträge pro Seite angezeigt werden.                                        | `number`                                                                                                                                                                                          | `1`         |
+| `_pageSizeOptions`    | `_page-size-options` | Gibt an, welche Optionen für die Seitenlänge angeboten werden.                                 | `number[] \| string`                                                                                                                                                                              | `[]`        |
+| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben dem aktuell ausgewählten Seite angezeigt werden.               | `number \| undefined`                                                                                                                                                                             | `1`         |
+| `_tooltipAlign`       | `_tooltip-align`     | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.                       | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                             | `'top'`     |
+| `_total` _(required)_ | `_total`             | Gibt an, wie viele Einträge mit der Pagination gehandelt werden.                               | `number`                                                                                                                                                                                          | `undefined` |
+| `_variant`            | `_variant`           | Gibt an, welche Button-Variante verwendet werden soll.                                         | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined`                                                                                                            | `'normal'`  |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-table](../table)
+
+### Depends on
+
+- [kol-button](../button)
+- [kol-select](../select)
+- kol-button-wc
+
+### Graph
+```mermaid
+graph TD;
+  kol-pagination --> kol-button
+  kol-pagination --> kol-select
+  kol-pagination --> kol-button-wc
+  kol-button --> kol-button-wc
+  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-select --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  kol-table --> kol-pagination
+  style kol-pagination fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/progress.md

@@ -0,0 +1,56 @@
+# Progress
+
+Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<div>
+	<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+</div>
+```
+
+### Beispiel
+
+<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+
+## Verwendung
+
+Verwenden Sie das Attribut `_type`, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
+
+- **bar** für eine Ausgabe als horizontaler Fortschrittsbalken
+- **cycle** für eine Ausgabe als kreisförmiger Fortschrittsbalken
+
+Verwenden Sie das Attribut `_max`, um den maximalen Wert der Komponente zu bestimmen.
+
+Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bestimmen.
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+## Links und Referenzen
+
+- https://developer.mozilla.org/de/docs/Web/HTML/Element/progress
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute | Description                                                          | Type                            | Default     |
+| --------------------- | --------- | -------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `_max` _(required)_   | `_max`    | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number`                        | `undefined` |
+| `_type`               | `_type`   | Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.      | `"bar" \| "cycle" \| undefined` | `undefined` |
+| `_unit`               | `_unit`   | Gibt die Einheit der Fortschrittswerte an.                           | `string \| undefined`           | `'%'`       |
+| `_value` _(required)_ | `_value`  | Gibt an, wie weit die Anzeige fortgeschritten ist.                   | `number`                        | `undefined` |
+
+
+----------------------------------------------
+
+

package/doc/select.md

@@ -0,0 +1,182 @@
+# Select
+
+Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-select
+  _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]"
+  _value="['1']"
+>
+  Auswahlfeld
+</kol-select>
+<kol-select
+  _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]"
+  _multiple
+  _value="['0','2']"
+>
+  Auswahlfeld (Mehrfachauswahl)
+</kol-select>
+```
+
+### Beispiel
+
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']">Auswahlfeld</kol-select>
+
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">Auswahlfeld (Mehrfachauswahl)</kol-select>
+
+## Verwendung
+
+Die Auswahlmöglichkeiten, **_Option-List_**, werden über das Attribut **_\_list_** als JSON-Objekt an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
+
+Beispiel für die Konstruktion des JSON-Objektes:
+
+```tsx
+[
+	{
+		label: 'Herr',
+		value: '0',
+	},
+	{
+		label: 'Frau',
+		value: '1',
+	},
+	{
+		label: 'Firma',
+		value: '2',
+	},
+];
+```
+
+### Individuelle Höhe angeben
+
+Mit der Property **`_height`** kann eine individuelle Höhe der Selectbox mittels CSS bestimmt werden. Die property erwartet einen String als Übergabewert, der innerhalb des style-Attributes ausgegeben wird. Es ist daher erforderlich, auch die gewünschte Ausgabeeinheit, z.B. px oder em, mit zu übergeben.
+
+```tsx
+<kol-select _height="85px"></kol-select>
+```
+
+<!--### Best practices-->
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste               | Funktion                              |
+| ------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`               | Fokussiert das Auswahlfeld.           |
+| `Enter`             | Öffnet bzw.schließt die Auswahlliste. |
+| `Pfeil-Tasten (oben | unten)`                               | Wechselt in der Auswahlliste das aktivierte Element. Diese Funktion ist auch bei eingeklappter Auswahlliste aktiv. Bei Mehrfachauswahl muss zur Auswahl mehrerer Einträge zusätzlich die Shift-Taste gedrück gehalten werden. |
+
+### `Single-Select-Filter` für Select-Komponente
+
+Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem
+Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen <b>SingeSelectFormatter</b> zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:
+
+```tsx
+class SingleSelectFormatter extends AbstractFormatter {
+	public format(value: unknown): unknown {
+		return [value];
+	}
+
+	public parse(value: unknown): unknown {
+		if (Array.isArray(value) && value.length > 0) {
+			return value[0];
+		}
+		return value;
+	}
+}
+```
+
+Fügen Sie den Formatter anschließend der Select-Komponente hinzu:
+
+```tsx
+const singleSelectFormatHandler = new FormatHandler();
+singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]);
+(this.getInput('kategorie') as InputControl).setFormatHandler(singleSelectFormatHandler);
+```
+
+Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.
+
+```tsx
+import {
+  xxx...,
+  xxx...,
+  FormatHandler,
+} from '@leanup/form';
+```
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute     | Description                                                                          | Type                                                                                                                                                                                                          | Default     |
+| -------------------- | ------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`         | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_alert`             | `_alert`      | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.             | `boolean \| undefined`                                                                                                                                                                                        | `true`      |
+| `_disabled`          | `_disabled`   | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                          | `boolean \| undefined`                                                                                                                                                                                        | `undefined` |
+| `_error`             | `_error`      | Gibt den Text für eine Fehlermeldung an.                                             | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_height`            | `_height`     | Gibt an, ob eine individuelle Höhe übergeben werden soll.                            | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`         | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                        | `boolean \| undefined`                                                                                                                                                                                        | `undefined` |
+| `_hint`              | `_hint`       | Gibt den Text für eine Hinweistext an.                                               | `string \| undefined`                                                                                                                                                                                         | `''`        |
+| `_icon`              | `_icon`       | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.   | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
+| `_id` _(required)_   | `_id`         | Gibt die technische ID des Eingabefeldes an.                                         | `string`                                                                                                                                                                                                      | `undefined` |
+| `_list` _(required)_ | `_list`       | Gibt den technischen Namen des Eingabefeldes an.                                     | `SelectOption<unknown>[] \| string`                                                                                                                                                                           | `undefined` |
+| `_multiple`          | `_multiple`   | Gibt an, ob mehrere Werte eingegeben werden können.                                  | `boolean \| undefined`                                                                                                                                                                                        | `false`     |
+| `_name`              | `_name`       | Gibt den technischen Namen des Eingabefeldes an.                                     | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_on`                | --            | Gibt die EventCallback-Funktionen für das Input-Event an.                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                      | `undefined` |
+| `_required`          | `_required`   | Gibt an, ob die Selectbox ein Pflichtfeld ist.                                       | `boolean \| undefined`                                                                                                                                                                                        | `undefined` |
+| `_size`              | `_size`       | Gibt an, wie viele Optionen im Drop-Down-Menü sichtbar sein sollen.                  | `number \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_tabIndex`          | `_tab-index`  | Gibt an, welchen Tab-Index dieses Input hat.                                         | `number \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_touched`           | `_touched`    | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.        | `boolean \| undefined`                                                                                                                                                                                        | `false`     |
+| `_value`             | `_value`      | Gibt den Wert des Eingabefeldes an.                                                  | `string \| undefined \| unknown[]`                                                                                                                                                                            | `undefined` |
+
+
+## Shadow Parts
+
+| Part       | Description                               |
+| ---------- | ----------------------------------------- |
+| `"select"` | Ermöglicht das Stylen des select-Knotens. |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-pagination](../pagination)
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-select --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  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-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  kol-pagination --> kol-select
+  style kol-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/skip-nav.md

@@ -0,0 +1,98 @@
+# SkipNav
+
+Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die **Tab-Taste** sichtbar.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-skip-nav
+	_aria-label="Ein versteckter Link"
+	_links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"
+></kol-skip-nav>
+```
+
+### Beispiel
+
+Um die **SkipNav** sehen zu können, klicken Sie auf den Text **_Beispiel_** und gehen dann mit der Tab-Taste einen Schritt weiter.
+
+<kol-skip-nav _aria-label="Ein versteckter Link" _links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"></kol-skip-nav>
+
+## Verwendung
+
+Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Rendern der versteckten Links zuständig ist.
+
+```tsx
+[
+	{
+		_label: 'Navigation',
+		_href: '#nav',
+	},
+	{
+		_label: 'Inhalt',
+		_href: '#main',
+	},
+];
+```
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste   | Funktion                                                              |
+| ------- | --------------------------------------------------------------------- |
+| `Tab`   | Fokussiert die SkipNav und ermöglicht das Durchlaufen der Menüpunkte. |
+| `Enter` | Ruft den Link des fokussierten Menüpunkts auf.                        |
+
+## Links und Referenzen
+
+- https://webaim.org/techniques/skipnav/
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                  | Attribute     | Description                                                                  | Type                       | Default     |
+| ------------------------- | ------------- | ---------------------------------------------------------------------------- | -------------------------- | ----------- |
+| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string`                   | `undefined` |
+| `_links` _(required)_     | `_links`      | Ist die Liste der unsichtbaren Links.                                        | `NavLinkProps[] \| string` | `undefined` |
+
+
+## Shadow Parts
+
+| Part     | Description                      |
+| -------- | -------------------------------- |
+| `"link"` | Ermöglicht das Stylen der Links. |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-link](../link)
+
+### Graph
+```mermaid
+graph TD;
+  kol-skip-nav --> kol-link
+  kol-link --> kol-link-wc
+  kol-link-wc --> kol-span-wc
+  kol-link-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  style kol-skip-nav fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/span.md

@@ -0,0 +1,31 @@
+# kol-span
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute    | Description                                                                                    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------- | ------------ | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_icon`               | `_icon`      | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. 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` |
+| `_iconOnly`           | `_icon-only` | Gibt an, ob nur das Icon angezeigt wird.                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_label` _(required)_ | `_label`     | Gibt einen beschreibenden Text für das Text-Element an.                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-span-wc
+
+### Graph
+```mermaid
+graph TD;
+  kol-span --> kol-span-wc
+  kol-span-wc --> kol-icon
+  style kol-span fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+