@public-ui/components 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0 → 3.0.0-alpha.0

package/doc/input-range.md

@@ -1,78 +1,4 @@
-# InputRange
-
-Synonyme: Slider
-
-Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-range
-	_label="Wertebereich"
-	_min="100"
-	_max="200"
-	_value="100"
-	_step="20"
-	_icons='{"left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'
-></kol-input-range>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                      | Value                        |
-| -------- | ------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                       | -                            |
-| onClick  | Element wird angeklickt                                       | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)       | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen (entspricht nativem `change`-Event) | Eingegebener Wert als Number |
-| onBlur   | Element verliert Fokus                                        | -                            |
-
-Value types von onInput und onChange werden in [#6345](https://github.com/public-ui/kolibri/issues/6345) angeglichen.
-
-### Beispiel
-
-<kol-input-range
-	_label="Wertebereich"
-	_min="100"
-	_max="200"
-	_value="100"
-	_step="20"
-	_icons='{"left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'></kol-input-range>
-
-## Verwendung
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                 |
-| -------------- | ---------------------------------------- |
-| `Tab`          | Fokussiert das Eingabefeld.              |
-| `Pfeil-Tasten` | Verändern den Wert der Range-Komponente. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-range
 
 <!-- Auto Generated Below -->
 

package/doc/input-text.md

@@ -1,83 +1,4 @@
-# InputText
-
-Synonyme: Text Field
-
-Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.
-
-Die Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-text
-	_type="text"
-	_label="Texteingabe"
-	_icons='{"left": "codicon codicon-arrow-left", "right": {"icon": "codicon codicon-arrow-right", "style": {"font-size": "200%"}}}'
-></kol-input-text>
-<kol-input-text _type="text" _label="Deaktiviert" _disabled></kol-input-text>
-<kol-input-text _type="text" _label="Schreibgeschützt" _read-only></kol-input-text>
-<kol-input-text
-	_type="text"
-	_label="Mit Button"
-	_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'
-></kol-input-text>
-```
-
-### Beispiel
-
-<kol-input-text _type="text" _label="Texteingabe" _icons='{"left": "codicon codicon-arrow-left", "right": {"icon": "codicon codicon-arrow-right", "style": {"font-size": "200%"}}}'></kol-input-text>
-<kol-input-text _type="text" _label="Deaktiviert" _disabled></kol-input-text>
-<kol-input-text _type="text" _label="Schreibgeschützt" _read-only></kol-input-text>
-<kol-input-text
-	_type="text"
-	_label="Mit Button"
-	_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'></kol-input-text>
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-## Verwendung
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste | Funktion                              |
-| ----- | ------------------------------------- |
-| `Tab` | Fokussiert das Eingabefeld.           |
-| `ESC` | Löscht den Inhalt (nur Typ = Search). |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
-- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
+# kol-input-text
 
 <!-- Auto Generated Below -->
 

package/doc/kolibri.md

@@ -1,21 +1,4 @@
-# Logo
-
-Diese Komponente implementiert das Logo von KoliBri.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-kolibri></kol-kolibri> <kol-kolibri _labeled="false"></kol-kolibri>
-```
-
-## Beispiele
-
-<kol-kolibri></kol-kolibri>
-<kol-kolibri _labeled="false"></kol-kolibri>
-
-## Barrierefreiheit
+# kol-kolibri
 
 <!-- Auto Generated Below -->
 

package/doc/link-button.md

@@ -1,29 +1,4 @@
-# LinkButton
-
-Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
-Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="danger"></kol-link-button>
-<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
-```
-
-### Beispiel
-
-<div class="flex gap-2">
-  <kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-  <kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-  <kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-  <kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
-  <kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
-</div>
+# kol-link-button
 
 <!-- Auto Generated Below -->
 

package/doc/link-group.md

@@ -1,84 +1,4 @@
-# LinkGroup
-
-Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links.
-
-## Konstruktion
-
-### Hinweis zur Version 3
-
-Die `KolLinkGroup` Komponente der Version 3 wurde als veraltet markiert (`deprecated`), da sie keinen wesentlichen Beitrag zur Verbesserung der Barrierefreiheit bietet.
-
-### Hinweis zum `nav` Tag
-
-Die Verwendung des `nav` Tags wurde aus der `KolLinkGroup` Komponente entfernt, da er keinen Beitrag für die Barrierefreiheit leistet.
-
-### Code
-
-```html
-<kol-link-group
-	_label="Einfache LinkGroup"
-	_links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]"
-	_list-style-type="disc"
-	_orientation="'vertical"
-></kol-link-group>
-```
-
-### Beispiel
-
-<kol-link-group _label="Einfache LinkGroup" _links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]" _list-style-type="disc" _orientation="'vertical"></kol-link-group>
-
-## Verwendung
-
-### Links
-
-Die auszugebenden Links werden als JSON-Objekt an das Attribut **`_links`** übergeben. Dort können die Attribute des <kol-link _href="" _label="Links"></kol-link> übergeben werden, **`_href`** und **`_label`** sind jedoch Pflicht.
-
-```js
-[
-	{ _label: 'Link 1', _href: 'https://www.w3.org' },
-	{ _label: 'Link 2', _href: 'https://www.w3.org' },
-	{ _label: 'Link 3', _href: 'https://www.w3.org' },
-];
-```
-
-### Ausrichtung
-
-Über das Attribut **`_orientation`** kann die Ausrichtung der LinkGroup bestimmt werden. Mögliche Werte sind `horizontal` und `vertical` (Standard).
-
-### List-Style-Type
-
-Über das Attribut **`_list-style-type`** kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen diese vier Möglichkeiten zur Auswahl:
-
-- `disc`
-- `circle`
-- `square`
-- `none`
-
-<!--### Best practices-->
-
-### Anwendungsfälle
-
-#### LinkGroup innerhalb eines Fließtextes
-
-<p>
-  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
-  nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-
-<kol-link-group _label="LinkGroup innerhalb eines Fließtextes" _links="[{'_label':'Link 1'},{'_label':'Link 2'},{'_label':'Link 3'}]"></kol-link-group>
-
-Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
-nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-
-</p>
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                    |
-| ------- | ------------------------------------------- |
-| `Tab`   | Fokussiert das erste Element der LinkGroup. |
-| `Enter` | Ruft den hinterlegten Link auf.             |
+# kol-link-group
 
 <!-- Auto Generated Below -->
 

package/doc/link.md

@@ -1,74 +1,4 @@
-# Link
-
-Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.
-
-## Konstruktion
-
-### Code
-
-```html
-<p>
-	In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-	<kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
-	<i>
-		<b>inline-Element</b>
-	</i>
-	ausgegeben.
-</p>
-```
-
-### Beispiel
-
-<p>
-   In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-  <kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
-    <b>inline-Element</b>
-    </i> ausgegeben.
-</p>
-
-## Verwendung
-
-### Link innerhalb eines Fließtextes mit Icon und Text
-
-<p>
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link><br/>
-  <kol-link _icons="codicon codicon-home">
-    Ich bin ein Link mit Icon rechts
-  </kol-link>
-  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
-  nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link>. Lorem, ipsum dolor sit amet consectetur adipisicing
-  elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi
-  <kol-link _icons="codicon codicon-home">Ich bin ein Link mit Icon rechts</kol-link>
-  facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-</p>
-
-## `aria-current` Service
-
-Damit die Link-Komponente automatisch ein [`aria-current`-Tag](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-setzen kann, muss ihr über den ariaCurrent-Service mitgeteilt werden, welche Seite gerade aktiv ist:
-
-```typescript
-import { setCurrentLocation } from '@public-ui/components';
-
-/* Bei jedem Seitenwechsel aufrufen: */
-setCurrentLocation('/path/to/page');
-```
-
-Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links entsprechen.
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste   | Funktion                        |
-| ------- | ------------------------------- |
-| `Tab`   | Fokussiert das Link-Element.    |
-| `Enter` | Ruft den hinterlegten Link auf. |
+# kol-link
 
 <!-- Auto Generated Below -->
 

package/doc/modal.md

@@ -1,94 +1,4 @@
-# Modal
-
-Synonyme: Dialog, Prompt
-
-Mithilfe 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
-
-Das **Modal** realisiert die Basis für barrierefreie Overlays und ermöglicht es beliebige HTML-Inhalte anzuzeigen. Beispielsweise wäre eine Dialog-Komponente eine Komposition aus einer Card-Komponente, die in einer **Modal**-Komponente eingefügt wird.
-
-Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
-
-### Konstruktion
-
-#### Code
-
-```html
-<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
-	<kol-card _label="Vorgang löschen">
-		<div>
-			<p>Wollen Sie den Vorgang wirklich löschen?</p>
-			<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 id="modal-open-button" _label="Modal öffnen"></kol-button>
-
-<script>
-	const modal = document.querySelector('#test-modal');
-	const modalOpenButton = document.querySelector('#modal-open-button');
-
-	document.querySelectorAll('.close-modal').forEach((buttonElement) => {
-		buttonElement._on = {
-			onClick: () => modal.closeModal(),
-		};
-	});
-	modalOpenButton._on = { onClick: () => modal.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.
-
-Da das Modal vom eigentlichen Seiteninhalt entkoppelt ist, aber für eine teilweise Sperrung der Inhalte sorgt, muss es auch eine Möglichkeit bieten, das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen.
-
-<kol-alert _type="info">Es wird empfohlen einen Close-Button oben rechts einzubauen.</kol-alert>
-
-Zum Öffnen des Modals können Sie mithilfe einer DOM-Referenz die Methode `openModal` verwenden, zum Schließen `closeModal`.
-
-### Legacy Verwendung
-
-Aus Kompatibilitätsgründen ist es weiterhin möglich, des Modal über die Eigenschaft `_activeElement` zu steuern. Ist die Eigenschaft (auf eine beliebige DOM-Node) gesetzt, wird das Modal gezeigt. Beim Entfernen wird das Modal entsprechend wieder ausgeblendet. Die Eigenschaft wird mit KoliBri Version 3 entfernt werden.
-
-#### Best practices
-
-- Verwenden Sie die Modalbox, um weiterführende Informationen zu einem Thema anzuzeigen.
-- Verwenden Sie die Modalbox, um umfangreiche Inhalte optisch kompakter zu gestalten.
-- Vermeiden Sie es, wichtige Informationen wie z.B. rechtliche Themen, auf die Nutzer:innen reagieren müssen, in Modalboxen zu platzieren.
-
-#### Anwendungsfälle
-
-- Nutzen Sie die Modalbox, als Erklärungshilfe zu einzelnen Eingabefeldern in Formularen.
-- Nutzen Sie die Modalbox, um ergänzende Informationen erst nach Anforderung durch die Nutzer:innen anzuzeigen.
-- Nutzen Sie die Modalbox, um ein Feedback zu Speichervorgängen oder ähnliches anzuzeigen, z.B. **_Vielen Dank für Ihre Rückmeldung_** nach Absenden eines Formulars.
-
-### Barrierefreiheit
-
-> Die optische Standardausgabe der Komponente ist auf die Umsetzung der Barrierefreiheit hin optimiert. Wenn Sie eigene Custom Styles verwenden, kann das zu einer Einschränkung der Barrierefreiheit führen.
-
-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.
-
-Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern darauf, das Attribut **`aria-label`** korrekt zu setzen.
-
-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 des Browser-Menüs ist weiterhin möglich.
-
-#### Tastatursteuerung
-
-| Taste | Funktion                                                                                    |
-| ----- | ------------------------------------------------------------------------------------------- |
-| `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
-| `ESC` | Schließt das Modal.                                                                         |
-
-### Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank"></kol-link>
+# kol-modal
 
 <!-- Auto Generated Below -->
 

package/doc/nav.md

@@ -1,113 +1,4 @@
-# Nav
-
-Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)
-
-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.
-Ü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 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
-
-### Code
-
-```html
-<kol-nav
-	_label="Navigation"
-	_links="[
-    {
-      '_href': 'startseite',
-      '_icons': 'codicon codicon-home',
-      '_label': 'Startseite2',
-      '_children': [
-        {
-          '_href': 'startseite/1-untermenuepunkt',
-          '_icons': 'codicon codicon-home',
-          '_label': '1. Untermenüpunkt'
-        },
-        {
-          '_href': 'startseite/2-untermenuepunkt',
-          '_icons': 'codicon codicon-home',
-          '_label': '2. Untermenüpunkt'
-        }
-      ]
-    },
-    {
-      '_href': 'unterseite',
-      '_icons': 'codicon codicon-home',
-      '_label': '2. Menüpunkt'
-    }
-  ]"
-	_has-compact-button
-></kol-nav>
-```
-
-### Beispiel
-
-<kol-nav _label="Navigation" _links="[{'_href':'startseite','_icons':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icons':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icons':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icons':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
-
-## Verwendung
-
-### Links in der Navigationsleiste definieren
-
-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',
-		_icons: 'codicon codicon-home',
-		_label: 'Startseite',
-		_children: [
-			{ _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
-			{ _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
-		],
-	},
-	{ _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
-];
-```
-
-### Kompakte Navigationsleiste anzeigen
-
-Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_hide-label`**.
-
-### Umschaltung horizontale/vertikale Ausrichtung
-
-Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** umgeschaltet werden. Mögliche Werte sind:
-
-- `horizontal`
-- `vertical`
-
-### Best practices
-
-- Verwenden Sie **Navigationsleisten**, um **Navigation** oder navigationsähnliche Aktionen darzustellen (z. B. interne oder externe Links, Abmelden, Kontrolle der Sichtbarkeit auf der Seite).
-- Verwenden Sie das Label, um eine klare und präzise Beschreibung des Inhalts zu diesem bestimmten Navigationselement bereitzustellen.
-- Verwenden Sie keine **Navigationsleisten** für Aktionen, die besser als Schaltflächen dargestellt werden (z. B. „Speichern“, „Löschen“, „Artikel in den Warenkorb legen“).
-- Stapeln Sie nicht mehrere **Navigationsleisten** direkt nebeneinander.
-- Verwenden Sie keine **Navigationsleisten** zum Vergleichen von Inhalten (z. B. unterschiedliche Leistungen).
-- Berücksichtigen Sie die Anzahl der Navigationselemente, die Sie in die **Navigationsleiste** einfügen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, ziehen Sie alternative Ansätze zur Präsentation des Inhalts in Betracht oder verwenden Sie ein anderes Navigationsmuster/eine andere Komponente.
-
-### Anwendungsfälle
-
-- Verwenden Sie **Navigationsleisten** als In-Page-Navigation auf einer Landingpage.
-- Verwenden Sie **Navigationsleisten**, um verwandte Informationen auf einer Landingpage zu organisieren.
-- Nutzen Sie **Navigationsleisten**, um Angebote oder Vorteile in verschiedene Kategorien einzuordnen (z.B. Formulare).
-- Verwenden Sie **Navigationsleisten**, um FAQs in verschiedene Kategorien zu unterteilen.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                                                                                                                                                                                   |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`   | Fokussiert den ersten Menüpunkt in der Navigation. Nachfolgend kann mit der Tab-Taste jeder Menüpunkt angesprungen werden. Wenn der Has-compact-Button aktiviert wurde, ist dieser ebenfalls mit der Tab-Taste erreichbar. |
-| `Enter` | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls.                                                                                  |
+# kol-nav
 
 <!-- Auto Generated Below -->
 

package/doc/pagination.md

@@ -1,45 +1,4 @@
-# Pagination
-
-Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-pagination _max="100" _page="6"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-```
-
-### Beispiel
-
-<div class="grid gap-2">
-  <kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
-  <kol-pagination _max="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 _max="100" _page="6" _sibling-count="2"></kol-pagination>
-  <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
-  <kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-
-## Verwendung
-
-Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
-
-- Das Attribut **`_max`** 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 **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.
+# kol-pagination
 
 <!-- Auto Generated Below -->