@public-ui/components 1.5.0-rc.10 → 1.5.0-rc.12

package/doc/pagination.md

@@ -1,8 +1,6 @@
 # Pagination
 
-Mit Hilfe der <b>Paginierung-Komponente</b> lassen sich umfangreiche Inhalte auf der Seite
-in handliche Abschnitte unterteilen. Diese können dann über die Paginierung der Reihe nach
-durchlaufen werden.
+Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.
 
 ## Konstruktion
 
@@ -19,34 +17,31 @@ durchlaufen werden.
 ### Beispiel
 
 <div class="grid gap-2">
-  <kol-heading _level="3">Standardausgabe nur mit aktuellem Element</kol-heading>
-  <kol-pagination _total="100" _page="6"></kol-pagination>
-  <kol-heading _level="3">Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)</kol-heading>
+  <kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
+  <kol-pagination _total="100" _page="6" _has-buttons="false"></kol-pagination>
+  <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
   <kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
-  <kol-heading _level="3">Ausgabe 2 Elemente links und rechts (_boundary-count)</kol-heading>
+  <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
   <kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
 </div>
 
 ## Verwendung
 
-Die Pagination-Komponente kann über Ihre Properties konfiguriert werden.
+Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
 
-- Die Property `_total` bestimmt die Anzahl der Elemente.
-  Ohne weitere Properties werden immer das erste und die letzte Element angezeigt, die dazwischen liegenden durch Punkte symbolisiert.<br/>
-- Über die Property `boundary-count` wird die Anzahl von Elementen bestimmt, die in der Pagination-Komponente rechts und links angezeigt werden, während die übrigen Elemente durch Punkte symbolisiert werden. Die Einstellung `boundary-count` = 2 und `_count` = 10 hätte zur Folge, das links die Elemente 1 und 2 und rechts die Elemente 9 und 10 angezeigt werden, während die Elemente 3 bis 8 durch Punkte symbolisiert werden.<br/>
-- Die Property `_page` legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
-- Über die Property `_sibling-count` kann festgelegt werden, wie viele Elemente links und rechts des aktuellen Elements angezeigt werden sollen. Der Wert 2 hätte also zur Folge, daß zwei Elemente links und rechts des
-  aktuellen Elements angezeigt werden.
+- Das Attribut **`_total`** bestimmt die Gesamtanzahl der Elemente.
+- Über das Attribut **`boundary-count`** wird die Anzahl von Elementen bestimmt, die in der **Paginierung**-Komponente rechts und links angezeigt werden, während die übrigen Elemente
+- Das Attribut **`_page`** legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
+- Über das Attribut **`_sibling-count`** kann festgelegt werden, wie viele Elemente jeweils links und rechts des Aktuellen angezeigt werden sollen.
 
 <!-- ### Best practices -->
 
 ### Anwendungsfälle
 
-Die **Pagination**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo
-auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, kann sie zur Verbesserung der Struktur und Übersichtlichkeit eingesetzt werden.<br/>
-Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte oder auch listenartige Layouts, wie z.B. Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
+Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
+Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 <!-- ## Links und Referenzen -->
 
@@ -59,14 +54,14 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 | --------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen. | `number \| undefined`                                                                                                                                                                                                  | `1`         |
 | `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.        | `string \| undefined`                                                                                                                                                                                                  | `undefined` |
-| `_hasButtons`         | `_has-buttons`       | Gibt an, welche Sprung-Schalter sichtbar sein sollen.                                          | `boolean \| string \| undefined \| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `undefined` |
+| `_hasButtons`         | `_has-buttons`       | Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.                            | `boolean \| string \| undefined \| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |
 | `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                           | `{ onChangePage?: EventValueOrEventCallback<Event, number> \| undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> \| undefined; onClick?: EventValueOrEventCallback<Event, number> \| undefined; }` | `undefined` |
 | `_page` _(required)_  | `_page`              | Gibt an, welche Seite aktuell ausgewählt ist.                                                  | `number`                                                                                                                                                                                                               | `undefined` |
 | `_pageSize`           | `_page-size`         | Gibt an, wie viele Einträge pro Seite angezeigt werden.                                        | `number`                                                                                                                                                                                                               | `1`         |
-| `_pageSizeOptions`    | `_page-size-options` | Gibt an, welche Optionen für die Seitenlänge angeboten werden.                                 | `number[] \| string`                                                                                                                                                                                                   | `[]`        |
-| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben dem aktuell ausgewählten Seite angezeigt werden.               | `number \| undefined`                                                                                                                                                                                                  | `1`         |
+| `_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`             | Gibt an, wie viele Einträge mit der Pagination gehandelt werden.                               | `number`                                                                                                                                                                                                               | `undefined` |
+| `_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'`  |
 
 
@@ -92,9 +87,7 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-select --> kol-input
   kol-input --> kol-icon
   kol-input --> kol-button-wc

package/doc/progress.md

@@ -18,20 +18,20 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ## Verwendung
 
-Verwenden Sie das Attribut `_type`, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
+Verwenden Sie das Attribut **`_type`**, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
 
-- **bar** für eine Ausgabe als horizontaler Fortschrittsbalken
-- **cycle** für eine Ausgabe als kreisförmiger Fortschrittsbalken
+- `bar`: für eine Ausgabe als horizontaler Fortschrittsbalken
+- `cycle`: für eine Ausgabe als kreisförmiger Fortschrittsbalken
 
-Verwenden Sie das Attribut `_max`, um den maximalen Wert der Komponente zu bestimmen.
+Verwenden Sie das Attribut **`_max`**, um den maximalen Wert der Komponente zu bestimmen, das Minimum ist immer 0.
 
-Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bestimmen.
+Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu bestimmen.
 
 <!--### Best practices
 
 ### Anwendungsfälle-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 ## Links und Referenzen
 
@@ -47,7 +47,7 @@ Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bes
 | --------------------- | --------- | -------------------------------------------------------------------- | ------------------------------- | ----------- |
 | `_max` _(required)_   | `_max`    | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist. | `number`                        | `undefined` |
 | `_type`               | `_type`   | Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.      | `"bar" \| "cycle" \| undefined` | `undefined` |
-| `_unit`               | `_unit`   | Gibt die Einheit der Fortschrittswerte an.                           | `string \| undefined`           | `'%'`       |
+| `_unit`               | `_unit`   | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)      | `string \| undefined`           | `'%'`       |
 | `_value` _(required)_ | `_value`  | Gibt an, wie weit die Anzeige fortgeschritten ist.                   | `number`                        | `undefined` |
 
 

package/doc/quote.md

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

package/doc/select.md

@@ -7,39 +7,48 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 
 ```html
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
 <kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 	Auswahlfeld (Mehrfachauswahl)
 </kol-select>
+<kol-select
+	_list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
+	_size="4"
+	_value="['1']"
+>
+	Auswahlfeld mit _size
+</kol-select>
 ```
 
 ### Beispiel
 
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']">Auswahlfeld</kol-select>
-
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">Auswahlfeld (Mehrfachauswahl)</kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+Auswahlfeld (Mehrfachauswahl)
+</kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _size="4" _value="['1']">Auswahlfeld mit size</kol-select>
 
 ## Verwendung
 
-Die Auswahlmöglichkeiten, **_Option-List_**, werden über das Attribut **_\_list_** als JSON-Objekt an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
+Die Auswahlmöglichkeiten werden über das Attribut **`_list`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
-```html
-[ { label: 'Herr', value: '0', }, { label: 'Frau', value: '1', }, { label: 'Firma', value: '2', }, ];
+```js
+[
+	{ label: 'Herr', value: '0' },
+	{ label: 'Frau', value: '1' },
+	{ label: 'Firma', value: '2' },
+];
 ```
 
 ### Individuelle Höhe angeben
 
-Mit der Property **`_height`** kann eine individuelle Höhe der Selectbox mittels CSS bestimmt werden. Die property erwartet einen String als Übergabewert, der innerhalb des style-Attributes ausgegeben wird. Es ist daher erforderlich, auch die gewünschte Ausgabeeinheit, z.B. px oder em, mit zu übergeben.
-
-```html
-<kol-select _height="85px"></kol-select>
-```
+Über das Attribut **`_size`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
 
 <!--### Best practices-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 ### Tastatursteuerung
 
@@ -85,19 +94,19 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
 | `_accessKey`         | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                  | `string \| undefined`                                                                                   | `undefined` |
 | `_alert`             | `_alert`      | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                              | `boolean \| undefined`                                                                                  | `true`      |
-| `_disabled`          | `_disabled`   | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                           | `boolean \| undefined`                                                                                  | `undefined` |
+| `_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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                         | `boolean \| undefined`                                                                                  | `undefined` |
-| `_hint`              | `_hint`       | Gibt den Text für eine Hinweistext an.                                                                                                | `string \| undefined`                                                                                   | `''`        |
+| `_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` _(required)_   | `_id`         | Gibt die technische ID des Eingabefeldes an.                                                                                          | `string`                                                                                                | `undefined` |
+| `_id`                | `_id`         | Gibt die technische ID des Eingabefeldes an.                                                                                          | `string \| undefined`                                                                                   | `undefined` |
 | `_list` _(required)_ | `_list`       | Gibt den technischen Namen des Eingabefeldes an.                                                                                      | `SelectOption<W3CInputValue>[] \| string`                                                               | `undefined` |
 | `_multiple`          | `_multiple`   | Gibt an, ob mehrere Werte eingegeben werden können.                                                                                   | `boolean \| undefined`                                                                                  | `false`     |
 | `_name`              | `_name`       | Gibt den technischen Namen des Eingabefeldes an.                                                                                      | `string \| undefined`                                                                                   | `undefined` |
 | `_on`                | --            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                             | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                | `undefined` |
-| `_required`          | `_required`   | Gibt an, ob die Selectbox ein Pflichtfeld ist.                                                                                        | `boolean \| undefined`                                                                                  | `undefined` |
-| `_size`              | `_size`       | Gibt an, wie viele Optionen im Drop-Down-Menü sichtbar sein sollen.                                                                   | `number \| undefined`                                                                                   | `undefined` |
+| `_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` |
@@ -123,9 +132,7 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon

package/doc/skip-nav.md

@@ -15,7 +15,7 @@ Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt wer
 
 ### Beispiel
 
-Um die **SkipNav** sehen zu können, klicken Sie auf den Text **_Beispiel_** und gehen dann mit der Tab-Taste einen Schritt weiter.
+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>
 
@@ -23,15 +23,20 @@ Um die **SkipNav** sehen zu können, klicken Sie auf den Text **_Beispiel_** und
 
 Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Rendern der versteckten Links zuständig ist.
 
-```html
-[ { _label: 'Navigation', _href: '#nav', }, { _label: 'Inhalt', _href: '#main', }, ];
+```js
+[
+	{ _label: 'Navigation', _href: '#nav' },
+	{ _label: 'Inhalt', _href: '#main' },
+	{ _label: 'Kontakt', _href: '#kontakt' },
+	{ _label: 'Links', _href: '#links' },
+];
 ```
 
 <!--### Best practices
 
 ### Anwendungsfälle-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 ### Tastatursteuerung
 
@@ -52,7 +57,7 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 | Property                  | Attribute     | Description                                                                  | Type                    | Default     |
 | ------------------------- | ------------- | ---------------------------------------------------------------------------- | ----------------------- | ----------- |
 | `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string`                | `undefined` |
-| `_links` _(required)_     | `_links`      | Ist die Liste der unsichtbaren Links.                                        | `LinkProps[] \| string` | `undefined` |
+| `_links` _(required)_     | `_links`      | Setzt die Liste der darzustellenden Links.                                   | `LinkProps[] \| string` | `undefined` |
 
 
 ## Dependencies
@@ -70,11 +75,7 @@ graph TD;
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-tooltip --> kol-span-wc
   style kol-skip-nav fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/span.md

@@ -21,11 +21,11 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 
 ## Properties
 
-| Property              | Attribute    | Description                                                                                    | Type                                                                 | Default     |
-| --------------------- | ------------ | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------- |
-| `_icon`               | `_icon`      | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/) | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined` | `undefined` |
-| `_iconOnly`           | `_icon-only` | Gibt an, ob nur das Icon angezeigt wird.                                                       | `boolean \| undefined`                                               | `false`     |
-| `_label` _(required)_ | `_label`     | Gibt einen beschreibenden Text für das Text-Element an.                                        | `string`                                                             | `undefined` |
+| 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` |
 
 
 ## Dependencies

package/doc/spin.md

@@ -1,6 +1,6 @@
 # Spin
 
-Lader, wie die **Spin**-Komponente, informieren die Nutzer:innen über Lade- oder Rechenvorgänge, die vom System ausgeführt werden. Der Fortschritt kann durch eine wiederholte Animation kommuniziert werden.
+Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über Lade- oder Rechenvorgänge, die vom System ausgeführt werden. Der Fortschritt kann durch eine wiederholte Animation kommuniziert werden.
 
 ## Konstruktion
 
@@ -22,9 +22,8 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 ### Best practices
 
-- Verwenden Sie Lader, um die Nutzer:innen über einen Ladezustand oder einen laufenden Prozess zu informieren.
-- Verwenden Sie Lader an konsistenten Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
-- Verwenden Sie einen Lader, um anzuzeigen, wie viel Arbeit noch übrig ist, bevor das Ergebnis angezeigt werden kann.
+- Verwenden Sie Ladeanzeigen, um die Nutzer:innen über einen Ladezustand oder einen laufenden Prozess zu informieren.
+- Verwenden Sie Ladeanzeigen an konsistenten Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
 
 ### Anwendungsfälle
 
@@ -33,7 +32,7 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 - Download von Inhalten.
 - Laden von umfangreichen Inhalten, z.B. Videos.
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 <!--## Links und Referenzen
 

package/doc/table.md

@@ -1,4 +1,4 @@
-# Table
+k# Table
 
 Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
 
@@ -10,33 +10,13 @@ Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Date
 
 Die Table-Komponente ist so konstruiert, dass nicht der gesamte Tabellenaufbau im Markup selbst beschrieben werden muss. Wie genau die Tabelle Markup-spezifisch aufgebaut werden muss, um barrierefrei zu sein, übernimmt die Komponente selbst.
 
-**Beispiel**, wie es nicht gedacht ist:
-
-```html
-<kol-table>
-	<kol-tr>
-		<kol-th>…</kol-th>
-		…
-	</kol-tr>
-	…
-</kol-table>
-```
-
-**Beispiel**, wie es gedacht ist:
-
-```html
-<div>
-	<kol-table _caption="…" _headers="…" _data="…" _pagination="…"></kol-table>
-</div>
-```
-
-Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch "zusammenbaut", kann die komplexe Auszeichnung für die assistive Systeme dem/der Entwickler:in abgenommen werden.
+Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch zusammenbaut, kann die komplexe Auszeichnung für die assistive Systeme dem/der Entwickler:in abgenommen werden.
 
 ### Funktionalitäten
 
 Die Table-Komponente unterstützt folgende Funktionalitäten:
 
-- Tabellenbeschreibung durch ein `caption`-Attribut.
+- Tabellenbeschreibung durch ein **`caption`**-Attribut.
 - Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
 - Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
 - Unterschiedliche Render-Funktion für die Zellen.
@@ -49,11 +29,9 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 
 > Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.
 
-### Typen
-
 ### Pagination
 
-Über die Property `_pagination` kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist in der Pagination-Spezifikation zu finden.
+Über das Attribut **`_pagination`** kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite <kol-link _href="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
 
 #### KoliBriTableHeaders
 
@@ -92,10 +70,6 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 };
 ```
 
-#### KoliBriTablePaginationStates
-
-Die Tabellen-Komponente verwendet intern die Pagination-Komponente die sich mit den gleichen Properties steuern lässt. Die Steuerung wird in der Beschreibung der Pagination-Komponente erläutert.
-
 ### Code
 
 ```html
@@ -111,9 +85,8 @@ Die Tabellen-Komponente verwendet intern die Pagination-Komponente die sich mit
 ### Sortierung
 
 - Zu jedem Header kann man eine Sortierfunktion definieren.
-- Es ist maximal nur eine Sortierfunktion aktiviert oder keine.
-- Bei dem Rendern der Daten in die Tabelle muss jetzt geprüft werden, ob eine Sortierung aktiv ist und vorher die Daten durch die Funktion sortiert werden.
-- Aktuell wird nicht unterstützt, dass bei zweidimensionalen Headern, die Header der jeweils anderen Header-Seite mitsortiert werden. Bei der Anforderung der Sortierung empfehlen wir die Verwendung nur einer Header-Dimension (entweder horizontal oder vertikal).
+- Es ist exakt eine oder keine Sortierfunktion aktiviert.
+- Aktuell wird nicht unterstützt, dass bei zweidimensionalen Headern, die Header der jeweils anderen Header-Seite mit sortiert werden. Bei der Anforderung der Sortierung empfehlen wir die Verwendung nur einer Header-Dimension (entweder horizontal oder vertikal).
 
 <!--### Best practices
 
@@ -123,37 +96,12 @@ Die Tabellen-Komponente verwendet intern die Pagination-Komponente die sich mit
 
 Bei der Table-Komponente werden zahlreiche Attribut-Definitionen dem Tabellen-Markup hinzugefügt, um die Screenreader bestmöglich zu unterstützen.
 
-Aktuell werden folgende Attribute von der Komponente gemanaged: `role`, `scope` und `aria-\*`.
+Aktuell werden folgende Attribute von der Komponente verwaltet: `role`, `scope` und `aria-\*`.
 
 Das heißt beispielsweise, dass bei den Spaltenüberschriften automatisch entweder die Rolle `colheader` oder `rowheader` gesetzt wird. Darüber hinaus wird der Scope entweder auf `col`/`colgroup` oder `row`/`rowgroup` gesetzt. Ähnlich dieser Automatismen werden auch die `aria-\*`-Attribute je nach Relevanz gesetzt.
 
 Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
 
-### Pagination ohne/mit Label
-
-Bei der Tabelle kann die Pagination optional hinzugefügt werden. Die Steuerelemente der Pagination haben hierbei keine sichtbaren Labels, weil das eine übliche Darstellung ist (State-of-the-art). Für den Screenreader-Nutzenden werden alle Steuerelemente genauso vorgelesen, als würde es ein sichtbares Label geben (KoliBri-Inputs).
-Nun bleibt aus Sicht der Barrierefreiheit nur noch zu beurteilen, ob für sehende Nutzende die Steuerung auch barrierefrei ist.
-
-Sichtweisen:
-
-<ol type="a">
-  <li>Dem sehenden Nutzenden erschließt sich durch die aussagekräftigen Beschriftungen der Optionen das Verhalten der Steuerelement, auch ohne zusätzliches Label. Die Steuerelemente der Pagination können optisch kompakter dargestellt werden.</li>
-  <li>Dem sehenden Nutzenden werden Labels angezeigt, um auf das Verhalten der Steuerelement schließen zu können. Dadurch können die Beschriftungen der Optionen kürzer erfolgen. Die Steuerelemente der Pagination werden tendenziell durch das zusätzliche Label optisch mehr Platz benötigen.
-	Wenn die Select-Auswahl ein Label bekommt, dann muss konsequenterweise auch die Seitenauswahl ein Label erhalten.</li>
-</ol>
-
-**Betrachtung:** Der informelle Teil (Label) für das Verständnis muss in der Sichtweise **a** durch die Optionsbeschriftung und bei Sichtweise **b** durch das explizite Label abgebildet werden.
-
-> **Aus Sicht der Barrierefreiheit sind beide Sichtweise barrierefrei.** (?!)
-
-**Lösungsentscheidung:** Es wäre möglich, die Pagination mit um einen `_labelled`-Modus zu erweitern, um somit den Projekten beide Sichtweisen anbieten zu können.
-
-### Verwendung von Role
-
-Die Auszeichnung der Rolle (`role`) führt bei manchen Screenreadern zu Problemen. Da der Fokus der Table-Komponente auf der Darstellung von Daten liegt und somit der semantische Aufbau auf der HTML-Table beruht, sollte das Vorlesen auch ohne zusätzliche Rollenauszeichnung gut funktionieren (Retest).
-
-_Lediglich die Rollen `columnheader` und `rowheader` wird beibehalten, da die Tabellenköpfe (`th`) in entweder Spalten- oder Zeilen-orientiert sind._
-
 ## Links und Referenzen
 
 - https://www.w3.org/WAI/tutorials/tables/
@@ -199,9 +147,7 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-pagination --> kol-button
   kol-pagination --> kol-select
   kol-pagination --> kol-button-wc