@public-ui/components 1.6.0-rc.1 → 1.6.0-rc.10

package/doc/modal.md

@@ -1,20 +1,35 @@
-# Modal
+# Hinweis
+
+Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt ([caniuse](https://caniuse.com/?search=dialog)), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
+
+## Verwendung von `<dialog>`
+
+Die Dokumentation des `<dialog>` finden Sie [hier(MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
+Das **Dialog**-Element kann wie jedes andere HTML-Tag verwendet werden, alle Elemente innerhalb werden wie gewohnt dargestellt.
+Der Dialog ist standardmäßig nicht sichtbar, über das Setzen des Attributs `open`, oder über die Funktionen `show()` und `showModal()` wird er sichtbar.
+`open` und `show()` öffnen das Element mit `position: absolute`, während `showModal()` `position: fixed` setzt.
+
+- Beide Varianten haben eine `max-width`, die unter `box-sizing: content-box` der gesamten Bildschirmbreite entspricht (bzw des `position` Elters)
+- Die Modalvariante hat einen Hintergrund, der eine sanfte Abdunklung verursacht (unser Tipp: die Opacity der Hintergrundfarbe erhöhen), der über `::backdrop` gestylt werden kann und Klickevents auf den Dialog weiterleitet.
+- Die Modalvariante ist in der Bildschirmmitte zentriert (via `margin: auto`, kann von CSS Resets überschrieben werden)
+
+## Modal
 
 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
+### 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
+### Konstruktion
 
-### Code
+#### Code
 
 ```html
-<kol-modal id="test-modal" _aria-label="Beschreibung zur Modalbox">
+<kol-modal id="test-modal" _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">
@@ -39,7 +54,7 @@ Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der
 </script>
 ```
 
-## Verwendung
+### 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.
 
@@ -49,19 +64,19 @@ Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sp
 
 Das **Modal** hat einen `z-index` von `100`.
 
-### Best practices
+#### 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
+#### 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
+### 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.
 
@@ -75,14 +90,14 @@ Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern
 
 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.
 
-### Tastatursteuerung
+#### Tastatursteuerung
 
 | Taste | Funktion                                                                                    |
 | ----- | ------------------------------------------------------------------------------------------- |
 | `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
 | `ESC` | Schließt das Modal.                                                                         |
 
-## Links und Referenzen
+### Links und Referenzen
 
 - https://www.w3.org/TR/wai-aria-practices/#dialog_modal
 - https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
@@ -92,12 +107,13 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ## Properties
 
-| 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` |
-| `_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` |
-| `_width`                  | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                         | `string` \| `undefined`                                           | `'100%'`    |
+| 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` |
+| `_ariaLabel`     | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `undefined` |
+| `_label`         | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined` |
+| `_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%'`    |
 
 
 ## Slots

package/doc/nav.md

@@ -16,7 +16,7 @@ noch die Icons ausgegeben.
 
 ```html
 <kol-nav
-	_ariaLabel="Navigation"
+	_label="Navigation"
 	_links="[
 	{
 		_href: 'startseite',
@@ -35,7 +35,7 @@ noch die Icons ausgegeben.
 
 ### Beispiel
 
-<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>
+<kol-nav _label="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
 
@@ -107,34 +107,36 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 
 ## 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` | <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'`  |
+| 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`          | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `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 style="color:red">**[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`      |
+| `_label`              | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined`  |
+| `_links` _(required)_ | `_links`              | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
+| `_orientation`        | `_orientation`        | Gibt die horizontale oder vertikale Ausrichtung der Komponente 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/>Gibt an, welche Variante der Darstellung genutzt werden soll.       | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
 
 
 ## Dependencies
 
 ### Depends on
 
+- kol-button-link-text-switch
 - kol-button-wc
-- kol-span-wc
-- kol-link-wc
 - [kol-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
+  kol-nav --> kol-button-link-text-switch
   kol-nav --> kol-button-wc
-  kol-nav --> kol-span-wc
-  kol-nav --> kol-link-wc
   kol-nav --> kol-button
+  kol-button-link-text-switch --> kol-button-wc
+  kol-button-link-text-switch --> kol-link-wc
+  kol-button-link-text-switch --> kol-span-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon

package/doc/pagination.md

@@ -50,19 +50,19 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 
 ## Properties
 
-| Property              | Attribute            | Description                                                                                    | Type                                                                                                                                                                                                                   | Default     |
-| --------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen. | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
-| `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.        | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
-| `_hasButtons`         | `_has-buttons`       | 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` | 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'`  |
+| 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`       | 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` | 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 bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                  | `'top'`     |
+| `_total` _(required)_ | `_total`             | Setzt die Gesamtanzahl der Seiten.                                                               | `number`                                                                                                                                                                                                               | `undefined` |
+| `_variant`            | `_variant`           | Gibt an, welche Variante der Darstellung genutzt werden soll.                                    | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                                                                                   | `'normal'`  |
 
 
 ## Dependencies

package/doc/popover.md

@@ -10,10 +10,10 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 
 ## 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` |
+| Property | Attribute | Description                                                        | Type                                                  | Default |
+| -------- | --------- | ------------------------------------------------------------------ | ----------------------------------------------------- | ------- |
+| `_align` | `_align`  | Setzt die Ausrichtung des Popovers in Relation zum Triggerelement. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'` |
+| `_show`  | `_show`   | Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.    | `boolean` \| `undefined`                                | `false` |
 
 
 ## Slots

package/doc/progress.md

@@ -45,14 +45,14 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Properties
 
-| 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`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>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` |
-| `_variant`            | `_variant` | Gibt an, ob die Fortschrittsanzeige als Balken oder Kreis dargestellt wird.                                                                                  | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
+| Property              | Attribute  | Description                                                                                                                                                              | Type                                                                          | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | ----------- |
+| `_label`              | `_label`   | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                              | `string` \| `undefined`                                                         | `undefined` |
+| `_max` _(required)_   | `_max`     | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.                                                                                                     | `number`                                                                      | `undefined` |
+| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `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` |
+| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                            | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
 
 
 ----------------------------------------------

package/doc/quote.md

@@ -22,12 +22,12 @@ Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann
 
 ## Properties
 
-| 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'`  |
+| Property              | Attribute  | Description                                                                                                                 | Type                               | Default     |
+| --------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
+| `_caption`            | `_caption` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`              | `undefined` |
+| `_href` _(required)_  | `_href`    | Gibt den Link zur Quelle des Zitates an.                                                                                    | `string`                           | `undefined` |
+| `_quote` _(required)_ | `_quote`   | Setzt den Text, also das Zitat selbst.                                                                                      | `string`                           | `undefined` |
+| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                               | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
 
 
 ## Dependencies

package/doc/select.md

@@ -90,27 +90,27 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 
 ## Properties
 
-| Property              | Attribute     | Description                                                                                                                                                                                                                                                                                                                                               | Type                                                                                                    | Default     |
-| --------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                                                                                                                                                                                                                                      | `string` \| `undefined`                                                                                   | `undefined` |
-| `_alert`              | `_alert`      | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                                                                                                                                                                                                                                  | `boolean` \| `undefined`                                                                                  | `true`      |
-| `_disabled`           | `_disabled`   | 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` |
-| `_label` _(required)_ | `_label`      | Das Label dient der Beschriftung unterschiedlicher Elemente. - Button -> label text - Heading -> headline text - Input, Select und Textarea -> label text - Summary -> summary text - Table -> caption text - etc.  Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden, wenn man das Label mittels dem Expert-Slot überschreiben will. | `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`   | 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` |
+| Property              | Attribute     | Description                                                                                                                                          | Type                                                                                                    | Default     |
+| --------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key` | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                                   | `undefined` |
+| `_alert`              | `_alert`      | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                  | `true`      |
+| `_disabled`           | `_disabled`   | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `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` | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_hint`               | `_hint`       | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                   | `''`        |
+| `_icon`               | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
+| `_id`                 | `_id`         | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                   | `undefined` |
+| `_label` _(required)_ | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `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`   | Macht das Eingabeelementzu 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 das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `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` |
 
 
 ## Slots

package/doc/skip-nav.md

@@ -8,7 +8,7 @@ Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt wer
 
 ```html
 <kol-skip-nav
-	_aria-label="Ein versteckter Link"
+	_label="Ein versteckter Link"
 	_links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"
 ></kol-skip-nav>
 ```
@@ -17,7 +17,7 @@ Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt wer
 
 Um die **SkipNav** sehen zu können, klicken Sie auf diesen Text und gehen dann mit der Tab-Taste einen Schritt weiter.
 
-<kol-skip-nav _aria-label="Ein versteckter Link" _links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"></kol-skip-nav>
+<kol-skip-nav _label="Ein versteckter Link" _links="[{'_label':'Navigation','_href':'#nav'},{'_label':'Inhalt','_href':'#main'},{'_label':'Kontakt','_href':'#kontakt'},{'_label':'Links','_href':'#links'}]"></kol-skip-nav>
 
 ## Verwendung
 
@@ -54,23 +54,23 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                  | Type                    | Default     |
-| ------------------------- | ------------- | ---------------------------------------------------------------------------- | ----------------------- | ----------- |
-| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string`                | `undefined` |
-| `_links` _(required)_     | `_links`      | Setzt die Liste der darzustellenden Links.                                   | `LinkProps[]` \| `string` | `undefined` |
+| Property              | Attribute     | Description                                                                                                                                                                                             | Type                    | Default     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ----------- |
+| `_ariaLabel`          | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`   | `undefined` |
+| `_label`              | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`   | `undefined` |
+| `_links` _(required)_ | `_links`      | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies
 
 ### Depends on
 
-- [kol-link](../link)
+- kol-link-wc
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-skip-nav --> kol-link
-  kol-link --> kol-link-wc
+  kol-skip-nav --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip

package/doc/span.md

@@ -9,23 +9,24 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 ### Code
 
 ```html
-<kol-span _icon="codicon codicon-home" _icon-only="false" _label="Text inside the span."></kol-span>
+<kol-span _icon="codicon codicon-home" _label="Text inside the span."></kol-span>
 ```
 
 ### Beispiel
 
-<kol-span _icon="codicon codicon-home" _icon-only="false" _label="Text inside the span."></kol-span>
+<kol-span _icon="codicon codicon-home" _label="Text inside the span."></kol-span>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute    | Description                               | Type                                                                 | Default     |
-| --------------------- | ------------ | ----------------------------------------- | -------------------------------------------------------------------- | ----------- |
-| `_icon`               | `_icon`      | Iconklasse (z.B.: "codicon codicon-home") | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined` | `undefined` |
-| `_iconOnly`           | `_icon-only` | Gibt an, ob nur das Icon angezeigt wird.  | `boolean` \| `undefined`                                               | `false`     |
-| `_label` _(required)_ | `_label`     | Setzt den sichtbaren Text des Elements.   | `string`                                                             | `undefined` |
+| Property              | Attribute     | Description                                                                                                                                                        | Type                                                                 | Default     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ----------- |
+| `_hideLabel`          | `_hide-label` | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                          | `boolean` \| `undefined`                                               | `false`     |
+| `_icon`               | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined` | `undefined` |
+| `_iconOnly`           | `_icon-only`  | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an. | `boolean` \| `undefined`                                               | `undefined` |
+| `_label` _(required)_ | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                        | `boolean` \| `string`                                                  | `undefined` |
 
 
 ## Dependencies

package/doc/spin.md

@@ -10,32 +10,34 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 <style>
 	/* https://github.com/vineethtrv/css-loader */
 	.loader {
-		width: 48px;
-		height: 48px;
-		border: 3px dotted #444;
-		border-style: solid solid dotted dotted;
+		animation: rotation 2s linear infinite;
+		border-color: #444;
 		border-radius: 50%;
+		border-style: solid solid dotted dotted;
+		border-width: 3px;
+		box-sizing: border-box;
 		display: inline-block;
+		height: 48px;
 		position: relative;
-		box-sizing: border-box;
-		animation: rotation 2s linear infinite;
+		width: 48px;
 	}
 	.loader::after {
-		content: '';
+		animation: rotationBack 1s linear infinite;
+		border-color: #ff3d00;
+		border-radius: 50%;
+		border-style: solid solid dotted;
+		border-width: 3px;
 		box-sizing: border-box;
-		position: absolute;
+		bottom: 0;
+		content: '';
+		height: 24px;
 		left: 0;
+		margin: auto;
+		position: absolute;
 		right: 0;
 		top: 0;
-		bottom: 0;
-		margin: auto;
-		border: 3px dotted #ff3d00;
-		border-style: solid solid dotted;
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		animation: rotationBack 1s linear infinite;
 		transform-origin: center center;
+		width: 24px;
 	}
 
 	@keyframes rotation {
@@ -67,8 +69,9 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 </style>
 <div>
 	<kol-spin _show></kol-spin>
+	<kol-spin _show _variant="cycle"></kol-spin>
 	<!-- for a11y experts - own animation -->
-	<kol-spin _show="true" _variant="none">
+	<kol-spin _show _variant="none">
 		<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
 		<span className="loader" slot="expert"></span>
 	</kol-spin>
@@ -81,8 +84,8 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 ### Beispiel
 
 <kol-spin _show></kol-spin>
-
-<kol-spin _show="true" _variant="none"><span className="loader" slot="expert"></span></kol-spin>
+<kol-spin _show _variant="cycle"></kol-spin>
+<kol-spin _show _variant="none"><span className="loader" slot="expert"></span></kol-spin>
 
 <kol-details _summary="CSS Loaders & Spinners" _open>
 Es gibt im Internet viele verschiedene CSS Loaders und Spinners. Beispielsweise bietet _Vineeth_ eine ganze Reihe interessanter CSS Loaders an. Diese können auch in der KoliBri Bibliothek genutzt werden. Dazu muss lediglich der Link zu der entsprechenden CSS Datei in den Head der HTML Datei eingebunden werden. Anschließend kann die gewünschte Animation über den Expert-Slot in die KoliBri-Komponente eingebunden werden. Hier sind einige Beispiele (ohne reduzierte Animationsgeschwindigkeit):
@@ -114,10 +117,10 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                  | Type                                      | Default |
-| ---------- | ---------- | ---------------------------------------------------------------------------- | ----------------------------------------- | ------- |
-| `_show`    | `_show`    | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.                    | `boolean` \| `undefined`                    | `false` |
-| `_variant` | `_variant` | Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll. | `"cycle"` \| `"dot"` \| `"none"` \| `undefined` | `'dot'` |
+| Property   | Attribute  | Description                                                     | Type                                      | Default |
+| ---------- | ---------- | --------------------------------------------------------------- | ----------------------------------------- | ------- |
+| `_show`    | `_show`    | Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist. | `boolean` \| `undefined`                    | `false` |
+| `_variant` | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.   | `"cycle"` \| `"dot"` \| `"none"` \| `undefined` | `'dot'` |
 
 
 ----------------------------------------------