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

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
 
@@ -44,7 +43,7 @@ Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
 
 | Property | Attribute | Description                                               | Type                   | Default |
 | -------- | --------- | --------------------------------------------------------- | ---------------------- | ------- |
-| `_show`  | `_show`   | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht. | `boolean \| undefined` | `false` |
+| `_show`  | `_show`   | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht. | `boolean` \| `undefined` | `false` |
 
 
 ----------------------------------------------

package/doc/split-button.md

@@ -0,0 +1,85 @@
+# SplitButton
+
+> <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
+
+## Konstruktion
+
+### Code
+
+```html
+
+```
+
+### Beispiel
+
+## Verwendung
+
+### Best practices
+
+### Tastatursteuerung
+
+| Taste   | Funktion |
+| ------- | -------- |
+| `Tab`   | ??       |
+| `Enter` | ??       |
+
+## Links und Referenzen
+
+- https://www.w3.org/TR/wai-aria-practices/#accordion
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute        | Description                                                                                                                                                                                                                                                                           | Type                                                                                   | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.                                                                                                                                                                                                 | `string` \| `undefined`                                                                  | `undefined` |
+| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                              | `string` \| `undefined`                                                                  | `undefined` |
+| `_ariaCurrent`        | `_aria-current`  | Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                                                                                                                    | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`           | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                      | `boolean` \| `undefined`                                                                 | `undefined` |
+| `_ariaLabel`          | `_aria-label`    | Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | `string` \| `undefined`                                                                  | `undefined` |
+| `_ariaSelected`       | `_aria-selected` | Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                             | `boolean` \| `undefined`                                                                 | `undefined` |
+| `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                                                                                               | `string` \| `undefined`                                                                  | `undefined` |
+| `_disabled`           | `_disabled`      | Gibt an, ob der Button deaktiviert ist.                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`    | Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.                                                                                                                                                                                     | `boolean` \| `undefined`                                                                 | `false`     |
+| `_icon`               | `_icon`          | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `string` \| `undefined`                                                                  | `undefined` |
+| `_iconOnly`           | `_icon-only`     | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.                                                                                                            | `boolean` \| `undefined`                                                                 | `false`     |
+| `_label` _(required)_ | `_label`         | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                               | `undefined` |
+| `_onClick`            | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `((e: Event) => void)` \| `undefined`                                                    | `undefined` |
+| `_role`               | `_role`          | Gibt an, welche Rolle der Schalter hat.                                                                                                                                                                                                                                               | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                             | `undefined` |
+| `_showDropdown`       | `_show-dropdown` | Gibt an, welche Rolle der Schalter hat.                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                 | `false`     |
+| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number` \| `undefined`                                                                  | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).                                                                                                                                                                                                                         | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'top'`     |
+| `_type`               | `_type`          | Setzt den Typ der Schaltfläche.                                                                                                                                                                                                                                                       | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                         | `'button'`  |
+| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                      | `unknown`                                                                              | `undefined` |
+| `_variant`            | `_variant`       | Gibt an, welche Ausprägung der Button hat.                                                                                                                                                                                                                                            | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `undefined` | `'normal'`  |
+
+
+## Slots
+
+| Slot        | Description                                                |
+| ----------- | ---------------------------------------------------------- |
+| `"popover"` | Ermöglicht das Einfügen beliebigen HTML's in das dropdown. |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-button-wc
+
+### Graph
+```mermaid
+graph TD;
+  kol-split-button --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-span-wc
+  style kol-split-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

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/
@@ -174,44 +122,43 @@ _Lediglich die Rollen `columnheader` und `rowheader` wird beibehalten, da die Ta
 
 ## Properties
 
-| Property                | Attribute     | Description                                                             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Default     |
-| ----------------------- | ------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_caption` _(required)_ | `_caption`    | Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
-| `_data` _(required)_    | `_data`       | Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden. | `KoliBriDataType[] \| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_headers` _(required)_ | `_headers`    | Gibt die horizontalen und vertikalen Header für die Tabelle an.         | `string \| { horizontal?: KoliBriTableHeaderCell[][] \| undefined; vertical?: KoliBriTableHeaderCell[][] \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_minWidth`             | `_min-width`  | Gibt an, die minimale Breite der Tabelle an.                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_pagination`           | `_pagination` | Gibt an, ob die Daten geteilt in Seiten angezeigt wird.                 | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _total?: number \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified<PaginationHasButton> \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified<number[]> \| undefined; _siblingCount?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; }` | `undefined` |
+| Property                | Attribute     | Description                                                             | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| ----------------------- | ------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_caption` _(required)_ | `_caption`    | Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_data` _(required)_    | `_data`       | Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden. | `KoliBriDataType[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
+| `_headers` _(required)_ | `_headers`    | Gibt die horizontalen und vertikalen Header für die Tabelle an.         | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_minWidth`             | `_min-width`  | Gibt an, die minimale Breite der Tabelle an.                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_pagination`           | `_pagination` | Gibt an, ob die Daten geteilt in Seiten angezeigt wird.                 | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _total?: number` \| `undefined; _customClass?: string` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _tooltipAlign?: Alignment` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies
 
 ### Depends on
 
-- [kol-button](../button)
 - [kol-pagination](../pagination)
+- [kol-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-table --> kol-button
   kol-table --> kol-pagination
+  kol-table --> kol-button
+  kol-pagination --> kol-button
+  kol-pagination --> kol-select
+  kol-pagination --> kol-button-wc
   kol-button --> kol-button-wc
   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-pagination --> kol-button
-  kol-pagination --> kol-select
-  kol-pagination --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-select --> kol-input
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-table fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/tabs.md

@@ -4,18 +4,15 @@ Die **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite
 
 ## Konstruktion
 
-Nach dem Laden der Komponente wird die erste Registerkarte links automatisch optisch als **_aktiv_** hervorgehoben. Jede Registerkarte übernimmt den Status **_aktiv_** nach dem Anklicken. Der Status **_aktiv_** kann mit dem Attribut `_selected (Index der Registerkarte)` auch manuell gesetzt werden,
-um z.B. die dritte anstelle der ersten Registerkarte aktiv zu setzen.
+Nach dem Laden der Komponente wird die erste Registerkarte links automatisch optisch als **_aktiv_** hervorgehoben. Jede Registerkarte übernimmt den Status **_aktiv_** nach dem Anklicken. Der Status **_aktiv_** kann mit dem Attribut **`_selected`** auch manuell auf den Index der Registrierkarte gesetzt werden.
 Die einzelnen Inhalte der Registerkarte werden in einem eigenen `HTMLDivElement` als `<div>Inhalt der Registerkarte</div>` innerhalb von `<kol-tabs></kol-tabs>` notiert.
 
-Die Zuordnung der JSON-Objekte im Attribut **\_tabs** zu den Div-Elementen erfolgt automatisch.
-
-Typischer Aufbau einer **Tab**-Komponente:
+Die Zuordnung der Daten im Attribut **`_tabs`** zu den Div-Elementen erfolgt automatisch.
 
 ### Code
 
 ```html
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
+<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
 	<div>Inhalt von Tab 1</div>
 	<div>Inhalt von Tab 2</div>
 	<div>Inhalt von Tab 3</div>
@@ -24,7 +21,7 @@ Typischer Aufbau einer **Tab**-Komponente:
 
 ### Beispiel
 
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
+<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
   <div>Inhalt von Tab 1</div>
   <div>Inhalt von Tab 2</div>
   <div>Inhalt von Tab 3</div>
@@ -34,82 +31,73 @@ Typischer Aufbau einer **Tab**-Komponente:
 
 ### Definition der Registerkarten
 
-Die Registerkarten werden als JSON-Struktur an das Attribut `_tabs` übergeben. Die Struktur ist als Wert-/Parameter-Paar aufgebaut:
+Die Daten für die Registerkarten können als Objekte oder JSON-String an das Attribut **`_tabs`** übergeben werden.
 
-```html
-[ { _label: 'Tab 1', }, { _label: 'Tab 2', _disabled: true, }, { _label: 'Tab 3', _icon: 'home', _on: { onClose: true }, }, ];
+```json
+[{ "_label": "Tab 1", "_icon": "codicon codicon-home" }, { "_label": "Tab 2", "_on": { "onClose": true } }, { "_label": "Tab 3" }]
 ```
 
-### Registerkarte auswählen
-
-Standardmäßig wird die erste Registerkarte von links aus als **_ausgewählt_** angezeigt. Verwenden Sie das Attribut `_selected` und als Wert die **interne ID**, um eine andere Registerkarte als ausgewählt zu setzen. Besitzt die **Tabs**-Komponente beispielsweise drei Tabs und soll das zweite Tab ausgewählt werden, setzen Sie **1** als Wert für `_selected` ein, da die ID immer von 0 aus hochgezählt wird.
-
 ### Registerkarte deaktivieren
 
-Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut `_disabled` und den Wert **true**.
+Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut **`_disabled`**.
 
 ### Close-Icon im Registekartenheader
 
-Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut `_on` und den Wert **"onClose":true** realisieren.
+Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut **`_on`** und den Wert **"onClose":true** realisieren.
 
 ### Best practices
 
-- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass der Benutzer keine Seite verlassen muss.
+- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass Nutzer:innen die Seite nicht verlassen müssen.
 - Registerkarten sollten in einer einzelnen, scrollbaren (falls erforderlich) Zeile über dem Inhalt positioniert werden, auf den sie sich beziehen.
 - Verwenden Sie die Registerkartenbezeichnung, um den Inhalt dieser Registerkarte klar und prägnant zu beschreiben und zwischen den verschiedenen Abschnitten zu unterscheiden.
-- Es sollte immer nur eine Registerkarte aktiv sein.
-- Verwenden Sie keine Registerkarten, um eine Sequenz oder einen Verlauf von Inhalten zu erstellen, die der Benutzer in einer bestimmten Reihenfolge lesen soll.
-- Verwenden Sie keine Registerkarten zum Vergleichen von Inhalten (z. B. unterschiedliche Spezifikationen).
-- Verwenden Sie keine Registerkarten, um Benutzer zu einer anderen Seite zu navigieren.
+- Verwenden Sie Registerkarten nicht, um eine Sequenz oder einen Verlauf von Inhalten zu erstellen, die der Benutzer in einer bestimmten Reihenfolge lesen soll.
+- Verwenden Sie Registerkarten nicht zum Vergleichen von Inhalten (z. B. unterschiedliche Spezifikationen).
 - Berücksichtigen Sie die Anzahl der Registerkarten, die Sie in die Registerkartengruppe aufnehmen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, sollten Sie den Inhalt weiter aufteilen oder ein anderes Navigationsmuster/eine andere Komponente verwenden.
 
 ### Anwendungsfälle
 
-- Verwenden Sie Registerkarten, um verwandte Informationen auf einer Landingpage zu organisieren.
 - Über Registerkarten können Sie z.B. Dienstleistungen oder Vorteile in verschiedene Kategorien einteilen.
 - Verwenden Sie Registerkarten, um Benutzerprofile in verschiedene Abschnitte zu gliedern (z. B. persönliche Informationen, Termine, aktive Services).
 - Verwenden Sie Registerkarten, um FAQs in verschiedene Kategorien zu unterteilen.
 
 ## Barrierefreiheit
 
+### Tastatursteuerung
+
 Ausgewählte Tabs werden beim Anspringen mit der **Tab-Taste** mit einem deutlichen Focus-Rahmen umgeben. Die einzelnen Tabs können mit den Pfeiltasten **links** und **rechts** durchlaufen werden.
 
 Nach Anspringen eines Tabs kann mit Hilfe der **Tab-Taste** vom Header in den Inhaltsbereich der Registerkarte gewechselt werden.
 
 Unabhängig davon ob die Tab-Schalter oben, rechts, unten oder links angeordnet sind, bleibt die Tastatursteuerung gleich. Hintergrund ist, dass das Layout bei der Nutzung eines Screenreaders keine Rolle spielt. Eine unterschiedliche Pfeil-Tastensteuerung aufgrund der Layout-Anordnung würde daher nicht dem üblichen Bedienkonzept des W3C entsprechen.
 
-### Tastatursteuerung
-
 Bei der Umsetzung der Tastatursteuerung wurde sich an den Beispielen des W3C's orientiert.
 
 Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effizient über die gesamte Seite/Anwendung zu navigieren, ist nur 1 Schalter aus der Tab-Serie fokussierbar. Sobald der Nutzende auf der Tab-Navigation selbst ist, werden die Pfeiltasten verwendet, um zwischen den Tabs selbst wechseln.
 
-W3C-Samples:
+| Taste                            | Funktion                                                                                                |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `Tab`                            | Fokussiert den ersten aktiven Tab. Auf vorhandene Close-Icons können mit der Tab-Taste erreicht werden. |
+| `Pfeil-Tasten (links` \| `rechts)` | Wechselt zwischen den Tabs.                                                                             |
+
+## Links und Referenzen
 
 - https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
 - https://dequeuniversity.com/library/aria/tabpanel
 - https://design-system.service.gov.uk/components/tabs/
 
-| Taste                | Funktion                                                                                                |
-| -------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------- | --- |
-| `Tab`                | Fokussiert den ersten aktiven Tab. Auf vorhandene Close-Icons können mit der Tab-Taste erreicht werden. |
-| `Pfeil-Tasten (links | rechts)`                                                                                                | Wechselt zwischen den Tabs. |     |
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                           | Type                                                                                                                                                                                                                                                     | Default     |
-| ------------------------- | ------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.          | `string`                                                                                                                                                                                                                                                 | `undefined` |
-| `_on`                     | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.   | `undefined \| { onCreate?: EventCallback<Event> \| { label: string; callback: EventCallback<Event>; } \| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \| CustomEvent<any> \| KeyboardEvent \| PointerEvent, number> \| undefined; }` | `undefined` |
-| `_selected`               | `_selected`   | Gibt an, welches Tab selektiert sein soll.                                            | `number \| undefined`                                                                                                                                                                                                                                    | `0`         |
-| `_tabs` _(required)_      | `_tabs`       | Gibt die geordnete Liste der Seitenhierarchie in Links an.                            | `TabButtonProps[] \| string`                                                                                                                                                                                                                             | `undefined` |
-| `_tabsAlign`              | `_tabs-align` | Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind. | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                    | `'top'`     |
+| Property                  | Attribute     | Description                                                                         | Type                                                                                                                                                                                                                                                     | Default     |
+| ------------------------- | ------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.        | `string`                                                                                                                                                                                                                                                 | `undefined` |
+| `_on`                     | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
+| `_selected`               | `_selected`   | Gibt an, welches Tab selektiert sein soll.                                          | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
+| `_tabs` _(required)_      | `_tabs`       | Setzt die Daten für die Registrierkarten.                                           | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
+| `_tabsAlign`              | `_tabs-align` | Setzt die Position der Registrierkarten.                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 
 
 ## Dependencies
@@ -127,9 +115,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
   style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
 ```