@public-ui/components 1.5.0-rc.9 → 1.5.0

package/doc/nav.md

@@ -1,17 +1,13 @@
 # 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.
+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.
 
 **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.
+Übergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am rechten 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
+Über eine optionale Schaltfläche 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
@@ -20,44 +16,61 @@ noch die Icons ausgegeben.
 
 ```html
 <kol-nav
-	_links='[{"_label":"Startseite", "_href":"startseite"},{"_label":"Unterseite von Startseite", "_href":"unterseite"}]'
-	_has-compact-button="true"
+	_ariaLabel="Navigation"
+	_links="[
+	{
+		_href: 'startseite',
+		_icon: 'codicon codicon-home',
+		_label: 'Startseite',
+		_children: [
+			{ _href: 'startseite/1-untermenuepunkt', _icon: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
+			{ _href: 'startseite/2-untermenuepunkt', _icon: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
+		],
+	},
+	{ _href: 'unterseite', _icon: 'codicon codicon-home', _label: '2. Menüpunkt' },
+]"
+	_has-compact-button
 ></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>
+<kol-nav _ariaLabel="Navigation" _links="[{_href: 'startseite',_icon: 'codicon codicon-home',_label: 'Startseite',_children: [{ _href: 'startseite/1-untermenuepunkt', _icon: 'codicon codicon-home', _label: '1. Untermenüpunkt' },{ _href: 'startseite/2-untermenuepunkt', _icon: 'codicon codicon-home', _label: '2. Untermenüpunkt' },],},{ _href: 'unterseite', _icon: 'codicon codicon-home', _label: '2. Menüpunkt' }]" _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:
-
-```html
-[ {"_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.
-
-```html
-[ { _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' }, ];
+Die Navigationsstruktur wird als Objekt oder JSON-String an das Attribut **`_links`** übergeben. Die Struktur ist als Wert/Parameter-Paar aufgebaut:
+Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzliche Attribut **`_children`** im übergeordneten Element.
+
+```js
+[
+	{
+		_href: 'startseite',
+		_icon: 'codicon codicon-home',
+		_label: 'Startseite',
+		_children: [
+			{ _href: 'startseite/1-untermenuepunkt', _icon: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
+			{ _href: 'startseite/2-untermenuepunkt', _icon: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
+		],
+	},
+	{ _href: 'unterseite', _icon: 'codicon codicon-home', _label: '2. Menüpunkt' },
+];
 ```
 
 ### Kompakte Navigationsleiste anzeigen
 
-Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut `_compact="true"`.
+Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_compact`**.
 
 ### 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.
+Um eine Schaltfläche einzublenden, die die kompakte Darstellung an/aus schaltet, setzen Sie das Attribut **`_hasCompact-button`**.
+Diese Schaltfläche erscheint unterhalb der Navigation und wird nur bei vertikaler Ausrichtung angezeigt.
 
 ### Umschaltung horizontale/vertikale Ausrichtung
 
-Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler und vertikaler Ausrichtung umgeschaltet werden. Mögliche Werte sind:<br/>
+Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** umgeschaltet werden. Mögliche Werte sind:
 
 - `horizontal`
 - `vertical`
@@ -70,7 +83,6 @@ Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler
 - 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
 
@@ -86,7 +98,7 @@ Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler
 | 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.                                                     |
+| `Enter` | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls.                                                                                  |
 
 <!--## Links und Referenzen
 
@@ -95,23 +107,16 @@ Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler
 
 ## 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`                                          | `true`       |
-| `_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.                                                                                                                              | `ButtonOrLinkOrTextWithChildrenProps[] \| string`               | `undefined`  |
-| `_orientation`            | `_orientation`        | Gibt die Ausrichtung der Navigation an.                                                                                                                                        | `"horizontal" \| "vertical" \| undefined`                       | `'vertical'` |
-| `_variant`                | `_variant`            | <span class="text-red-500">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Gibt an, welche Ausprägung der Button hat. | `"primary" \| "secondary" \| undefined`                         | `'primary'`  |
-
-
-## Shadow Parts
-
-| Part    | Description |
-| ------- | ----------- |
-| `"nav"` |             |
+| 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`                                          | `true`       |
+| `_compact`                | `_compact`            | Gibt an, ob die Navigation kompakt angezeigt wird.                                                                                                                                              | `boolean` \| `undefined`                                          | `false`      |
+| `_hasCompactButton`       | `_has-compact-button` | <span class="text-red-500">**[DEPRECATED]**</span> Version 2<br/><br/>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.                                                                                                                                               | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
+| `_orientation`            | `_orientation`        | Gibt die Ausrichtung der Navigation an.                                                                                                                                                         | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
+| `_variant`                | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Stellt verschiedene Varianten der Navigation zur Verfügung. | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
 
 
 ## Dependencies
@@ -133,9 +138,7 @@ graph TD;
   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-tooltip --> kol-span-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip

package/doc/pagination.md

@@ -1,8 +1,6 @@
 # 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.
+Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.
 
 ## Konstruktion
 
@@ -19,34 +17,31 @@ durchlaufen werden.
 ### 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-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
+  <kol-pagination _total="100" _page="6" _has-buttons="false"></kol-pagination>
+  <kol-heading _level="3" _label="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-heading _level="3" _label="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 **Paginierung**-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.
+- Das Attribut **`_total`** bestimmt die Gesamtanzahl der Elemente.
+- Über das Attribut **`boundary-count`** wird die Anzahl von Elementen bestimmt, die in der **Paginierung**-Komponente rechts und links angezeigt werden, während die übrigen Elemente
+- Das Attribut **`_page`** legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
+- Über das Attribut **`_sibling-count`** kann festgelegt werden, wie viele Elemente jeweils links und rechts des Aktuellen angezeigt werden sollen.
 
 <!-- ### 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.
+Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
+Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 <!-- ## Links und Referenzen -->
 
@@ -57,17 +52,17 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 
 | 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?: EventValueOrEventCallback<Event, number> \| undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> \| undefined; onClick?: EventValueOrEventCallback<Event, number> \| undefined; }` | `undefined` |
+| `_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`       | Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.                            | `boolean` \| `string` \| `undefined` \| `{ first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |
+| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                           | `{ onChangePage?: EventValueOrEventCallback<Event, number>` \| `undefined; onChangePageSize?: EventValueOrEventCallback<Event, number>` \| `undefined; onClick?: EventValueOrEventCallback<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'`  |
+| `_pageSizeOptions`    | `_page-size-options` | Setzt die Optionen für das Seitenlängenselect.                                                 | `number[]` \| `string`                                                                                                                                                                                                   | `[]`        |
+| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben der aktuell Ausgewählten 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`             | Setzt die Gesamtanzahl der Seiten.                                                             | `number`                                                                                                                                                                                                               | `undefined` |
+| `_variant`            | `_variant`           | Gibt an, welche Button-Variante verwendet werden soll.                                         | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `undefined`                                                                                                                                 | `'normal'`  |
 
 
 ## Dependencies
@@ -92,16 +87,15 @@ graph TD;
   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-tooltip --> kol-span-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-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-table --> kol-pagination
   style kol-pagination fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/popover.md

@@ -0,0 +1,21 @@
+# Popover
+
+> <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
+
+Die **Popover**-Komponente stellt eine Möglichkeit dar zusätzliche Inhalte in ein temporäres Element zu setzen, das, ähnlich wie <kol-link _href="" _label="Tooltip"></kol-link>, um sein Triggerelement angeordnet ist.
+Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute    | Description                                                        | Type                                                  | Default |
+| ------------ | ------------ | ------------------------------------------------------------------ | ----------------------------------------------------- | ------- |
+| `_alignment` | `_alignment` | Setzt die Ausrichtung des Popovers in Relation zum Triggerelement. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'` |
+| `_show`      | `_show`      | Öffnet/schließt das Popover.                                       | `boolean` \| `undefined`                                | `false` |
+
+
+----------------------------------------------
+
+

package/doc/progress.md

@@ -8,30 +8,32 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ```html
 <div>
-	<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
+	<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
 </div>
 ```
 
 ### Beispiel
 
-<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _type="bar" _max="100" _value="20"></kol-progress>
+<kol-progress _label="Fortschritt" _type="cycle" _max="100" _value="20"></kol-progress>
 
 ## Verwendung
 
-Verwenden Sie das Attribut `_type`, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
+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
+- `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 **`_max`**, um den maximalen Wert der Komponente zu bestimmen, das Minimum ist immer 0.
 
-Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bestimmen.
+Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu bestimmen.
 
 <!--### Best practices
 
 ### Anwendungsfälle-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 ## Links und Referenzen
 
@@ -45,9 +47,10 @@ Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bes
 
 | Property              | Attribute | Description                                                          | Type                            | Default     |
 | --------------------- | --------- | -------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `_label`              | `_label`  | Setzt die Bezeichnung der Fortschrittsanzeige.                       | `string` \| `undefined`           | `undefined` |
 | `_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`           | `'%'`       |
+| `_type`               | `_type`   | Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.      | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
+| `_unit`               | `_unit`   | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)      | `string` \| `undefined`           | `'%'`       |
 | `_value` _(required)_ | `_value`  | Gibt an, wie weit die Anzeige fortgeschritten ist.                   | `number`                        | `undefined` |
 
 

package/doc/quote.md

@@ -1,8 +1,13 @@
 # Quote
 
-The quote component is implemented in two variants. The first variant is the default `short` variant as inline quote with quotation marks. The second variant is the indented `long` variant. The indented variant is used to highlight a text passage or information visually.
+> <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
 
-Both variants can be extended with a `cite` element. The `cite` element is used to identify the source of a quotation and will be displayed below the quote as a link.
+Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`inline`) und eine eingerückte(`block`) Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates.
+
+## Verwendung
+
+Mittels **`_caption`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
+Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann **`_variant`** auf `block` gesetzt werden.
 
 ## References
 
@@ -17,12 +22,12 @@ Both variants can be extended with a `cite` element. The `cite` element is used
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                | Type                               | Default     |
-| --------------------- | ---------- | ------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- |
-| `_caption`            | `_caption` | The caption of the quote.                                                                  | `string \| undefined`              | `undefined` |
-| `_href` _(required)_  | `_href`    | The href is a URL that designates a source document or message for the information quoted. | `string`                           | `undefined` |
-| `_quote` _(required)_ | `_quote`   | The text of the quote.                                                                     | `string`                           | `undefined` |
-| `_variant`            | `_variant` | The variant of the quote.                                                                  | `"block" \| "inline" \| undefined` | `'inline'`  |
+| Property              | Attribute  | Description                            | Type                               | Default     |
+| --------------------- | ---------- | -------------------------------------- | ---------------------------------- | ----------- |
+| `_caption`            | `_caption` | Setzt die Überschrift.                 | `string` \| `undefined`              | `undefined` |
+| `_href` _(required)_  | `_href`    | Link auf die Quelle des Zitates.       | `string`                           | `undefined` |
+| `_quote` _(required)_ | `_quote`   | Setzt den Text, also das Zitat selbst. | `string`                           | `undefined` |
+| `_variant`            | `_variant` | Setzt die Variante des Zitats.         | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
 
 
 ## Dependencies
@@ -40,11 +45,7 @@ graph TD;
   kol-link-wc --> kol-icon
   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-tooltip --> kol-span-wc
   style kol-quote fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/select.md

@@ -7,39 +7,48 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 
 ```html
-<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'}" _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>
+<kol-select
+	_list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
+	_size="4"
+	_value="['1']"
+>
+	Auswahlfeld mit _size
+</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>
+<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>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _size="4" _value="['1']">Auswahlfeld mit size</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.
+Die Auswahlmöglichkeiten werden über das Attribut **`_list`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
-```html
-[ { label: 'Herr', value: '0', }, { label: 'Frau', value: '1', }, { label: 'Firma', value: '2', }, ];
+```js
+[
+	{ 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.
-
-```html
-<kol-select _height="85px"></kol-select>
-```
+Über das Attribut **`_size`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
 
 <!--### Best practices-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 ### Tastatursteuerung
 
@@ -83,24 +92,24 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 
 | 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`     | <span class="text-red-500">**[DEPRECATED]**</span> Use _size instead.<br/><br/>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?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
-| `_id` _(required)_   | `_id`         | Gibt die technische ID des Eingabefeldes an.                                                                                          | `string`                                                                                                | `undefined` |
-| `_list` _(required)_ | `_list`       | Gibt den technischen Namen des Eingabefeldes an.                                                                                      | `SelectOption<W3CInputValue>[] \| 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.                                                                                                   | `W3CInputValue[] \| string \| undefined`                                                                | `undefined` |
+| `_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`   | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.                                                       | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_error`             | `_error`      | Gibt den Text für eine Fehlermeldung an.                                                                                              | `string` \| `undefined`                                                                                   | `undefined` |
+| `_height`            | `_height`     | <span class="text-red-500">**[DEPRECATED]**</span> Use _size instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll. | `string` \| `undefined`                                                                                   | `undefined` |
+| `_hideLabel`         | `_hide-label` | Versteckt das sichtbare Label des Elements.                                                                                           | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_hint`              | `_hint`       | Gibt den Hinweistext an.                                                                                                              | `string` \| `undefined`                                                                                   | `''`        |
+| `_icon`              | `_icon`       | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                                                    | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
+| `_id`                | `_id`         | Gibt die technische ID des Eingabefeldes an.                                                                                          | `string` \| `undefined`                                                                                   | `undefined` |
+| `_list` _(required)_ | `_list`       | Gibt den technischen Namen des Eingabefeldes an.                                                                                      | `SelectOption<W3CInputValue>[]` \| `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`   | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                        | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_size`              | `_size`       | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                   | `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.                                                                                                   | `W3CInputValue[]` \| `string` \| `undefined`                                                                | `undefined` |
 
 
 ## Dependencies
@@ -123,12 +132,11 @@ graph TD;
   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-tooltip --> kol-span-wc
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-pagination --> kol-select
   style kol-select fill:#f9f,stroke:#333,stroke-width:4px
 ```