@public-ui/components 2.2.1 → 3.0.0-alpha.1

package/doc/progress.md

@@ -1,44 +1,4 @@
-# Progress
-
-Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
-	<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
-</div>
-```
-
-### Beispiel
-
-<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
-<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
-
-## Verwendung
-
-Verwenden Sie das Attribut **`_variant`**, 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
-
-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.
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-<!-- ## Barrierefreiheit -->
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
+# kol-progress
 
 <!-- Auto Generated Below -->
 

package/doc/quote.md

@@ -1,66 +1,4 @@
-# Quote
-
-> <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.
-
-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.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay, low throughput, and low altitude
-								service. The connection topology is limited to a single point-to-point path
-								for each carrier, used with standard carriers, but many carriers can be used
-								without significant interference with each other, outside early spring.
-								This is because of the 3D ether space available to the carriers, in contrast
-								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
-								avoidance system, which increases availability."
-	_variant="block"
->
-</kol-quote>
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay."
-	_variant="inline"
-></kol-quote>
-```
-
-### Beispiele
-
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay, low throughput, and low altitude
-					service. The connection topology is limited to a single point-to-point path
-					for each carrier, used with standard carriers, but many carriers can be used
-					without significant interference with each other, outside early spring.
-					This is because of the 3D ether space available to the carriers, in contrast
-					to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
-					avoidance system, which increases availability."
-	_variant="block"></kol-quote>
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay."
-	_variant="inline"></kol-quote>
-
-## Verwendung
-
-Mittels **`_label`** 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
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
-- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
+# kol-quote
 
 <!-- Auto Generated Below -->
 

package/doc/select.md

@@ -1,115 +1,4 @@
-# Select
-
-Synonyme: Datalist, Dropdown
-
-Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _multiple _value="[0,2]">
-	Auswahlfeld (Mehrfachauswahl)
-</kol-select>
-<kol-select
-	_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2},{'label':'Herr','value':3},{'label':'Frau','value':4},{'label':'Firma','value':5}]"
-	_rows="4"
-	_value="[1]"
->
-	Auswahlfeld mit _rows
-</kol-select>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                 | Value                       |
-| -------- | -------------------------------------------------------- | --------------------------- |
-| onFocus  | Element wird fokussiert                                  | -                           |
-| onClick  | Element wird angeklickt                                  | -                           |
-| onInput  | Eine Auswahl erfolgt (entspricht nativem `input`-Event)  | `value`-Attribut der Option |
-| onChange | Eine Auswahl erfolgt (entspricht nativem `change`-Event) | `value`-Attribut der Option |
-| onBlur   | Element verliert Fokus                                   | -                           |
-
-### Beispiel
-
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _multiple _value="[0,2]">
-Auswahlfeld (Mehrfachauswahl)
-</kol-select>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2},{'label':'Herr','value':3},{'label':'Frau','value':4},{'label':'Firma','value':5}]" _rows="4" _value="[1]">Auswahlfeld mit rows</kol-select>
-
-## Verwendung
-
-Die Auswahlmöglichkeiten werden über das Attribut **`_options`** 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:
-
-```json
-[
-	{ "label": "Herr", "value": 0 },
-	{ "label": "Frau", "value": 1 },
-	{ "label": "Firma", "value": 2 }
-]
-```
-
-### Individuelle Höhe angeben
-
-Über das Attribut **`_rows`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
-
-<!--### Best practices-->
-
-<!-- ## Barrierefreiheit -->
-
-### Tastatursteuerung
-
-| Taste                         | Funktion                                                                                                                                                                                                                      |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`                         | Fokussiert das Auswahlfeld.                                                                                                                                                                                                   |
-| `Enter`                       | Öffnet bzw.schließt die Auswahlliste.                                                                                                                                                                                         |
-| `Pfeil-Tasten (oben / unten)` | Wechselt in der Auswahlliste das aktivierte Element. Diese Funktion ist auch bei eingeklappter Auswahlliste aktiv. Bei Mehrfachauswahl muss zur Auswahl mehrerer Einträge zusätzlich die Shift-Taste gedrück gehalten werden. |
-
-### `Single-Select-Filter` für Select-Komponente
-
-Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem
-Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen <b>SingeSelectFormatter</b> zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:
-
-```html
-class SingleSelectFormatter extends AbstractFormatter { public format(value: unknown): unknown { return [value]; } public parse(value: unknown): unknown { if
-(Array.isArray(value) && value.length > 0) { return value[0]; } return value; } }
-```
-
-Fügen Sie den Formatter anschließend der Select-Komponente hinzu:
-
-```html
-const singleSelectFormatHandler = new FormatHandler(); singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]); (this.getInput('kategorie') as
-InputControl).setFormatHandler(singleSelectFormatHandler);
-```
-
-Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.
-
-```html
-import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
-```
-
-## Links und Referenzen
-
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+# kol-select
 
 <!-- Auto Generated Below -->
 

package/doc/single-select.md

@@ -1,33 +1,5 @@
 # kol-single-select
 
-Die **SingleSelect**-Komponente erzeugt eine Auswahlbox, die ein Eingabefeld mit einer darunter angeordneten Liste von auswählbaren Optionen kombiniert. Sie bietet auch eine Suchfunktion, um die Auswahl zu filtern.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-single-select
-	_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]"
-	_label="Beispiel"
-	_value="1"
-></kol-single-select>
-```
-
-## Verwendung
-
-Die Auswahlmöglichkeiten werden über das Attribut **`_options`** 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:
-
-```json
-[
-	{ "label": "Herr", "value": 0 },
-	{ "label": "Frau", "value": 1 },
-	{ "label": "Firma", "value": 2 }
-]
-```
-
 <!-- Auto Generated Below -->
 
 

package/doc/skip-nav.md

@@ -1,53 +1,4 @@
-# SkipNav
-
-Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die **Tab-Taste** sichtbar.
-
-## Konstruktion
-
-### Code
-
-```html
-<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>
-```
-
-### Beispiel
-
-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 _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
-
-Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Rendern der versteckten Links zuständig ist.
-
-```js
-[
-	{ _label: 'Navigation', _href: '#nav' },
-	{ _label: 'Inhalt', _href: '#main' },
-	{ _label: 'Kontakt', _href: '#kontakt' },
-	{ _label: 'Links', _href: '#links' },
-];
-```
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-<!-- ## Barrierefreiheit -->
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                              |
-| ------- | --------------------------------------------------------------------- |
-| `Tab`   | Fokussiert die SkipNav und ermöglicht das Durchlaufen der Menüpunkte. |
-| `Enter` | Ruft den Link des fokussierten Menüpunkts auf.                        |
-
-## Links und Referenzen
-
-- <kol-link _href="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
+# kol-skip-nav
 
 <!-- Auto Generated Below -->
 

package/doc/spin.md

@@ -1,116 +1,4 @@
-# Spin
-
-Synonyme: Placeholder, Skeleton, Shimmer
-
-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
-
-### Code
-
-```html
-<style>
-	/* https://github.com/vineethtrv/css-loader */
-	.loader {
-		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;
-		width: 48px;
-	}
-	.loader::after {
-		animation: rotationBack 1s linear infinite;
-		border-color: #ff3d00;
-		border-radius: 50%;
-		border-style: solid solid dotted;
-		border-width: 3px;
-		box-sizing: border-box;
-		bottom: 0;
-		content: '';
-		height: 24px;
-		left: 0;
-		margin: auto;
-		position: absolute;
-		right: 0;
-		top: 0;
-		transform-origin: center center;
-		width: 24px;
-	}
-
-	@keyframes rotation {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-	@keyframes rotationBack {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(-360deg);
-		}
-	}
-
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
-	@media (prefers-reduced-motion) {
-		.loader {
-			animation-duration: 6s;
-		}
-		.loader::after {
-			animation-duration: 3s;
-		}
-	}
-</style>
-<div>
-	<kol-spin _show></kol-spin>
-	<kol-spin _show _variant="cycle"></kol-spin>
-	<!-- for a11y experts - own animation -->
-	<kol-spin _show _variant="none">
-		<!-- slot for own animation : https://github.com/vineethtrv/css-loader -->
-		<span className="loader" slot="expert"></span>
-	</kol-spin>
-</div>
-```
-
-<kol-alert _label_="Reduce Motion" _level="4" _type="warning">
-Wenn möglich sollte stets auf Animationen verzichtet werden. Wenn Animationen genutzt werden, sollte immer darauf geachtet werden, eine Variante mit reduzierter Animationsgeschwindigkeit anzubieten. Mehr Informationen dazu findet sich hier:
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link>
-</kol-alert>
-
-### Beispiel
-
-<kol-spin _show></kol-spin>
-<kol-spin _show _variant="cycle"></kol-spin>
-<kol-spin _show _variant="none"><span className="loader" slot="expert"></span></kol-spin>
-
-<kol-details _label="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):
-<kol-link _href="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
-</kol-details>
-
-## Verwendung
-
-Verwenden Sie das Attribut `_show` um festzulegen, ob der Spin angezeigt wird.
-
-### Best practices
-
-- 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
-
-- Abrufen neuer oder aktualisierter Suchergebnisse.
-- Einloggen in geschützte Bereiche.
-- Download von Inhalten.
-- Laden von umfangreichen Inhalten, z.B. Videos.
+# kol-spin
 
 <!-- Auto Generated Below -->
 

package/doc/split-button.md

@@ -1,27 +1,4 @@
-# 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.
-
-Die SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button
-üblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü ("Popover") öffnet, hinter
-dem sich weitere Aktionen verbergen.
-
-- Der Sekundär-Button togglet grundsätzlich das Kontextmenü.
-- Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>
-```
-
-### Beispiel
-
-<kol-split-button _label="Split-Button">
-  Split-Button Popover
-</kol-split-button>
+# kol-split-button
 
 <!-- Auto Generated Below -->
 

package/doc/table-stateful.md

@@ -1,187 +1,4 @@
-# TableStateful
-
-Synonyme: Data Table, Details List, Data Grid
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die **TableStateful**-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.
-
-<kol-indented-text _summary="Backend-seitige Pagination">
-	Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise "manuell" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine "eigene" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe [KolTableStateless](../table-stateless/readme.md).
-</kol-indented-text>
-
-## Konstruktion
-
-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.
-
-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 **`label`**-Attribut.
-- Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
-- Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
-- Unterschiedliche Render-Funktion für die Zellen.
-- Pagination für die Tabelle.
-
-Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
-
-- Das Filtern der Tabelle ist aktuell nicht innerhalb der Tabelle vorgesehen.
-- Das Auswählen von Zeilen ist aktuell in der Tabelle nicht vorgesehen.
-
-> Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.
-
-### Pagination
-
-Ü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="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
-
-#### KoliBriTableHeaders
-
-```ts
-{
-  horizontal: [
-    [
-      {
-        label: string,
-        key?: string,
-        colsSpan?: number,
-        rowSpan?: number,
-        useTdInsteadOfTh?: boolean,
-        render?: (data) => string,
-        sort?: (data) => data,
-      },
-      …
-    ],
-    …
-  ],
-  vertical: [
-    [
-      {
-        label: string,
-        key?: string,
-        colsSpan?: number,
-        rowSpan?: number,
-        useTdInsteadOfTh?: boolean,
-        render?: (data) => string,
-        sort?: (data) => data,
-      },
-      …
-    ],
-    …
-  ],
-};
-```
-
-### Code
-
-```html
-<kol-table-stateful _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
-```
-
-### Beispiel
-
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
-
-### Footer
-
-Durch die Verwendung des **`_dataFoot_`**-Attribut können zusammenfassende Informationen oder zusätzliche Details am Ende der Tabelle angezeigt werden. Die Informationen sind hierbei an die Spaltendefinitionen gebunden.
-
-### Beispiel
-
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table>
-
-## Verwendung
-
-### Sortierung
-
-- Zu jedem Header kann man eine Sortierfunktion definieren.
-- Es ist exakt eine oder keine Sortierfunktion aktiviert.
-- **Multi-Sort-Funktionalität**: Wenn die Multi-Sort-Option (`_allowMultiSort`) aktiviert ist, kann der Benutzer mehrere Spalten gleichzeitig sortieren. Standardmäßig ist diese Funktion deaktiviert, und nur eine Spalte kann auf einmal sortiert werden. Die Sortierung wechselt zwischen aufsteigend, absteigend und ohne Sortierung. Wenn Multi-Sort deaktiviert ist, wird die Sortierung der vorherigen Spalte aufgehoben, sobald eine neue Spalte sortiert wird.
-- 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).
-
-### Render Funktion
-
-Render-Funktionen werden als Teil der Tabellen-Header definiert. Siehe Abschnitt "KoliBriTableHeaders". Gibt es sowohl horizontale als auch vertikale Header, muss die Render-Funktion für die _horizontalen_ Header definiert werden. Gibt es nur vertikale Header, können die Render-Funktionen dort definiert werden.
-
-Die `render` Funktion kann auf verschiedene Arten wie folgt verwendet werden.  
-Alle Methoden sind auch in diesem Beispiel demonstriert: [render-cell.tsx](https://github.com/public-ui/kolibri/blob/23ebb42d1ce3c8d1e4c74a5c7972842d5e4203fe/packages/samples/react/src/components/table/render-cell.tsx#L34)
-
-1. String Rückgabewert:
-
-```tsx
-{
-  render: (_el, cell) => `Index: ${cell.label}`,
-}
-```
-
-2. Node mit textContent füllen
-
-```tsx
-{
-  render: (el, cell) => {
-    el.textContent = `Index: ${cell.label}`;
-  },
-}
-```
-
-3. Node mit innerHTML füllen - ⚠️ Hierbei unbedingt darauf achten, Werte zu sanitizen, um XXS vermeiden.
-
-```tsx
-{
-  render: (el, cell) => {
-    el.innerHTML = `<strong>${cell.label}</strong>`;
-  },
-}
-```
-
-4. React render-function verwenden
-
-```tsx
-import { createReactRenderElement } from '@public-ui/react';
-{
-  render: (el) => {
-    getRoot(createReactRenderElement(el)).render(
-      <div>
-        <KolInputText _label="Input" />
-        <KolButton _label="Save" />
-      </div>,
-    );
-  },
-}
-```
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
-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 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: <kol-link _href="" _label=""></kol-link>https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/WAI/tutorials/tables/" _target="_blank"></kol-link>
-- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _target="_blank"></kol-link>
-- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
-- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.digitala11y.com/aria-sort-properties/" _target="_blank"></kol-link>
-- <kol-link _href="https://dequeuniversity.com/library/aria/table-sortable" _target="_blank"></kol-link>
-- <kol-link _href="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _target="_blank"></kol-link>
-- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
-- <kol-link _href="https://stackoverflow.com/questions/1312236/" _target="_blank"></kol-link>
-- <kol-link _href="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _target="_blank"></kol-link>
+# kol-table-stateful
 
 <!-- Auto Generated Below -->