@public-ui/components 1.5.0-rc.2 → 1.5.0-rc.20

package/doc/logo.md

@@ -1,26 +1,22 @@
 # Logo
 
-Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen Logos ausgegeben werden. Die zur Verfügung stehenden Logos entstammen aus dem Umfeld
-der Bundesinstitutionen. Die **Logo**-Komponente rendert an beliebiger Position auf der Webseite ein Logo, das über ein Attribut definiert wird. Das Logo wird dabei aus einer
-Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen. Die Ausgabe des Logos kann über das Attribut **style** definiert werden.
+Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen die Logos verschiedener Bundesinstitutionen ausgegeben werden. Das Logo wird dabei aus einer Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<div>
-	<kol-logo _abbr="BReg"></kol-logo>
-</div>
+<kol-logo _org_="BReg"></kol-logo>
 ```
 
 ### Beispiel
 
-<kol-logo _abbr="BReg"></kol-logo>
+<kol-logo _org_="BReg"></kol-logo>
 
 ## Verwendung
 
-Das Attribut `_abbr` wird für die Definition des gewünschten Logos verwendet. Es sind folgende Parameter möglich:
+Das Attribut **`_org`** wird für die Definition des gewünschten Logos verwendet. Es sind folgende Parameter möglich:
 
 **BReg** = **_Die Bundesregierung_**
 
@@ -67,33 +63,8 @@ Das Attribut `_abbr` wird für die Definition des gewünschten Logos verwendet.
 
 | Property            | Attribute | Description                                                                                                                                                                     | Type                                                           | Default     |
 | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
-| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt \| Bundesanstalt \| Bundesministerium \| undefined` | `undefined` |
-| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt \| Bundesanstalt \| Bundesministerium`              | `undefined` |
-
-
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
+| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` \| `undefined` | `undefined` |
+| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium`              | `undefined` |
 
 
 ----------------------------------------------

package/doc/modal.md

@@ -1,11 +1,7 @@
 # Modal
 
-Mit Hilfe der **Modal**-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem
-Dialogfenster angezeigt werden. Sie wird nach Klick auf einen Button aufgerufen und über ein eigenes
-Close-Icon wieder geschlossen. Die **Modal**-Komponente basiert auf der **Card**-Komponente und ist standardmäßig versteckt. Sie wird i.d.R.
-erst nach Klick auf einen Button oder sonstigem Trigger angezeigt. Dabei wird der Hintergrund des Fensters deaktiviert und allein der Inhalt
-des Modal-Fensters ist aktiv. Das **Modal**-Fenster wird über ein **Close-Icon** oben rechts im Kopfbereich wieder
-geschlossen.
+Mit Hilfe der **Modal**-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem Dialogfenster angezeigt werden. Ein offenes **Modal** kann via **ESC** geschlossen werden.
+Die **Modal**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt. Dabei wird der Hintergrund des Fensters deaktiviert und allein der Inhalt des Modal-Fensters ist aktiv.
 
 ## Funktionsweise
 
@@ -13,54 +9,45 @@ Das **Modal** realisiert die Basis für barrierefreie Overlays und ermöglicht e
 
 Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
 
-Werden mehrere **Modale** nach einander geöffnet, dann wird immer nur das letzte geöffnete angezeigt. Die **Modale** werden nach dem _Last In – First Out_ -Prinzip (LIFO) angezeigt, wobei die einzelnen **Modale** in beliebiger Reihenfolge wieder geschlossen werden können.
-
 ## Konstruktion
 
 ### Code
 
-> Um das Zusammenspiel von Komponenten (HTML) und Controller (TypeScript) gemeinsam darzustellen, wurden alle Code-Beispiele auf dieser Seite mit den Web Components im TSX geschrieben.
-
 ```html
-<kol-modal
-  _activeElement={this.state.activeElement}
-  _aria-label="Beschreibung zur Modalbox"
-  _on={{
-    onClick: (event: Event) => {
-      this.setState({
-        activeElement: null // schließt das Modal
-      })
-    }
-  }}
-  _width="400px"
->
-  <kol-card _heading="Vorgang löschen" _has-footer>
-    <p slot="content">Wollen Sie den Vorgang wirklich löschen?</p>
-    <div slot="footer">
-      <kol-button _label="Ok" _variant="primary"></kol-button>
-      <kol-button _label="Abbrechen"></kol-button>
-    </div>
-  </kol-card>
+<kol-modal id="test-modal" _aria-label="Beschreibung zur Modalbox">
+	<kol-card _heading="Vorgang löschen" _has-footer style="background-color: bisque">
+		<p slot="content">Wollen Sie den Vorgang wirklich löschen?</p>
+		<div slot="footer">
+			<kol-button class="close-modal" _label="Ok" _variant="primary"></kol-button>
+			<kol-button class="close-modal" _label="Abbrechen"></kol-button>
+		</div>
+	</kol-card>
 </kol-modal>
-<kol-button
-  _on={{
-    onClick: (event: Event) => {
-      this.setState({
-        activeElement: event.target as HTMLElement // öffnen das Modal
-      })
-    }
-  }}
-  _label="Modal öffnen"
-></kol-button>
+<kol-button id="modal-open-button" _label="Modal öffnen"></kol-button>
+<script>
+	const modal = document.querySelector('#test-modal');
+	const modalOpenButton = document.querySelector('#modal-open-button');
+	function openModal() {
+		modal._activeElement = modalOpenButton;
+		modal._open = true;
+	}
+	function closeModal() {
+		modal._activeElement = null;
+	}
+	document.querySelectorAll('.close-modal').forEach((b) => (b._on = { onClick: closeModal }));
+	modalOpenButton._on = { onClick: openModal };
+</script>
 ```
 
 ## Verwendung
 
-Über das Attribut `_width` geben Sie die gewünschte Breite der Modalbox an. Sie wird in der gewählten Größe immer mittig auf dem Bildschirm angezeigt.
+Über das Attribut **`_width`** geben Sie die gewünschte Breite der Modalbox an. Sie wird in der gewählten Größe immer mittig auf dem Bildschirm angezeigt.
+
+Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sperrung der Inhalte sorgt. Muss es auch eine Möglichkeit bieten, das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen.
 
-Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sperrung der Inhalte sorgt. Muss es auch eine Möglichkeit bieten, das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen. Das wird durch einen optionalen Schließen-Button rechts oben in der Ecke sichergestellt.
+<kol-alert _type="info">Es wird empfohlen einen Close-Button oben rechts einzubauen.</kol-alert>
 
-<kol-alert _type="info">Standardmäßig wird die Modalbox mit einem **Close-Button** oben rechts gerendert. Diese Position ist aktuell fix und kann nicht geändert werden. Es ist aber möglich innerhalb der Modalbox einen eigenen Close-Button einzubauen und den Standardbutton auszublenden.</kol-alert>
+Das **Modal** hat einen `z-index` von `100`.
 
 ### Best practices
 
@@ -80,25 +67,20 @@ Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sp
 
 Das **Modal** ist so realisiert, dass der Fokus darauf liegt, wenn es geöffnet wird. Elemente außerhalb des Modals sind dann nicht mehr fokussierbar.
 
-Wird das **Modal** geschlossen, liegt der Fokus wieder auf dem Element, welches ursprünglich das **Modal** geöffnet hatte.
+Wird das **Modal** geschlossen, liegt der Fokus wieder auf dem Element, welches unter **`_activeElement`** angegeben wurde.
 
-Bei der Realisierung dieser Funktionalität haben wir auf die Verwendung der CSS-Properties `user-select` und `pointer-events` verzichtet, um das Navigieren aus der Webseite in die Browser-Menü's weiterhin zu ermöglichen. Ebenfalls haben wir darauf verzichtet die _Event-Propagation_ zu manipulieren.
+Bei der Realisierung dieser Funktionalität haben wir auf die Verwendung der CSS-Properties **`user-select`** und **`pointer-events`** verzichtet, um das Navigieren aus der Webseite in die Browser-Menü's weiterhin zu ermöglichen. Ebenfalls haben wir darauf verzichtet die _Event-Propagation_ zu manipulieren.
 
 Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern darauf, das Attribut **`aria-label`** korrekt zu setzen.
 
-Beim Öffnen eines Modals, muss der Entwickler:in das aktive Element übergeben, zu dem nach dem Schließen des Modals automatisch der Fokus gesetzt werden soll.
-
 Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektierbaren Elemente deaktiviert außer die innerhalb des eigenen Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert die sich im Browser-Seitenbereich befinden. Das Fokussieren den Browser-Menü's ist weiterhin möglich.
 
-Zusätzlich stellt die Komponente sicher, dass die Darstellung beliebiger Inhalte bei beliebiger Zoomstufe barrierefrei bleibt. Hierzu wird ein vertikaler Scroll-Balken bei bedarf verwendet.
-
 ### Tastatursteuerung
 
-| Taste   | Funktion                                                                                                                                                                         |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`   | Fokussiert den Aufrufbutton des Modal. Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen, insbesondere auch der Close-Button des Modal. |
-| `Enter` | Öffnet das Modal.                                                                                                                                                                |
-| `Leer`  | Öffnet das Modal.                                                                                                                                                                |
+| Taste | Funktion                                                                                    |
+| ----- | ------------------------------------------------------------------------------------------- |
+| `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
+| `ESC` | Schließt das Modal.                                                                         |
 
 ## Links und Referenzen
 
@@ -112,36 +94,10 @@ Zusätzlich stellt die Komponente sicher, dass die Darstellung beliebiger Inhalt
 
 | Property                  | Attribute     | Description                                                                             | Type                                                            | Default     |
 | ------------------------- | ------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
-| `_activeElement`          | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde. | `HTMLElement \| null \| undefined`                              | `undefined` |
+| `_activeElement`          | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde. | `HTMLElement` \| `null` \| `undefined`                              | `undefined` |
 | `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.            | `string`                                                        | `undefined` |
-| `_on`                     | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                        | `undefined \| { onClose?: EventCallback<Event> \| undefined; }` | `undefined` |
-| `_show`                   | `_show`       | Gibt an, ob das Modal angezeigt wird.                                                   | `boolean \| undefined`                                          | `false`     |
-| `_width`                  | `_width`      | Gibt an, wie breit der Anzeigebereich sein soll (<= max-width: 100%).                   | `string \| undefined`                                           | `'100%'`    |
-
-
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
+| `_on`                     | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                        | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| `_width`                  | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                         | `string` \| `undefined`                                           | `'100%'`    |
 
 
 ----------------------------------------------

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,71 +107,41 @@ 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`                                          | `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         |
-
-
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
+| 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
 
 ### Depends on
 
+- kol-button-wc
+- kol-span-wc
 - kol-link-wc
 - [kol-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
+  kol-nav --> kol-button-wc
+  kol-nav --> kol-span-wc
   kol-nav --> kol-link-wc
   kol-nav --> kol-button
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-span-wc
   kol-link-wc --> kol-span-wc
   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-button --> kol-button-wc
   style kol-nav fill:#f9f,stroke:#333,stroke-width:4px
 ```

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,42 +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'`  |
-
-
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
+| `_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
@@ -117,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
 ```