@public-ui/components 2.2.0 → 3.0.0-alpha.0

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 -->
 

package/doc/table-stateless.md

@@ -1,75 +1,4 @@
-# TableStateless
-
-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 **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).
-
-TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
-
-## Selektion
-
-Über die `_selection`-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist `_selection` definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
-
-```ts
-const data = [
-	{ id: '1001', name: 'Marianne Musterfrau' },
-	{ id: '1002', name: 'Max Mustermann' },
-];
-const selection: KoliBriTableSelection = {
-	/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
-	label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
-
-	/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
-	selectedKeys: ['1002'],
-
-	/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
-	keyPropertyName: 'id',
-};
-```
-
-## Beispiel
-
-```jsx
-<KolTableStateless
-  _label="Table for demonstration purposes"
-  _headerCells={{
-    horizontal: [
-      [
-        { key: 'value', label: 'Value', sortDirection: 'ASC' },
-      ],
-    ],
-  }}
-  _data={DATA}
-  _selection={{
-    label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
-    selectedKeys: ['1002'],
-    keyPropertyName: 'id',
-  }}
-  _on={{
-    /**
-     * @param {MouseEvent} _
-     * @param {SortEventPayload} payload
-     * @param {string} payload.key
-     * @param {KoliBriSortDirection} payload.currentSortDirection
-     */
-    onSort: (_: MouseEvent, payload: SortEventPayload) => {
-      /* Perform sort, update `DATA` and headers `sortDirection` */
-    },
-
-    /**
-     * @param {Event} _
-     * @param {string[]} selection - Array of selected keys
-     */
-    onSelectionChange: (_: Event, selection: string[]) => {
-      /* Update selection.selectedKeys state */
-    }
-  }}
-/>
-```
+# kol-table-stateless
 
 <!-- Auto Generated Below -->
 

package/doc/table.md

@@ -1,179 +1,4 @@
-# Table
-
-Synonyme: Data Table, Details List, Data Grid
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#fb4509" _label="Deprecated"></kol-badge>KolTable ist veraltet, bitte stattdessen <kol-link _label="KolTableStateful" _href="https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateful/readme.md"></kol-link> verwenden, die API und Funktionalität sind identisch.
-</kol-alert>
-
-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.
-
-<kol-indented-text _summary="Backend-seitige Pagination">
-	Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-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.
-</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 _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
-```
-
-### Beispiel
-
-<kol-table _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _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
 
 <!-- Auto Generated Below -->
 

package/doc/tabs.md

@@ -1,92 +1,4 @@
-# Tabs
-
-Synonyme: Navigation, Nav
-
-Die **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite zu organisieren und zwischen ihnen zu navigieren. Tabs sorgen dafür, dass große Inhaltsmengen für Nutzer:innen leichter organisiert werden können. Tabs sind in Registerkartenleisten angeordnet, die als Registerkartengruppen bezeichnet werden, wobei die Registerkartenbeschriftung den Nutzer:innen einen Hinweis darauf gibt, welcher Inhalt angezeigt wird, wenn die Registerkarte ausgewählt wird.
-
-## 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`** 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 Daten im Attribut **`_tabs`** zu den Div-Elementen erfolgt automatisch.
-
-### Code
-
-```html
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icons":"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>
-</kol-tabs>
-```
-
-### Beispiel
-
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icons":"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>
-</kol-tabs>
-
-## Verwendung
-
-### Definition der Registerkarten
-
-Die Daten für die Registerkarten können als Objekte oder JSON-String an das Attribut **`_tabs`** übergeben werden.
-
-```json
-[{ "_label": "Tab 1", "_icons": "codicon codicon-home" }, { "_label": "Tab 2", "_on": { "onClose": true } }, { "_label": "Tab 3" }]
-```
-
-### Registerkarte deaktivieren
-
-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.
-
-### Best practices
-
-- 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.
-- 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
-
-- Ü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.
-
-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.
-
-| 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
-
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role" _target="_blank"></kol-link>
-- <kol-link _href="https://dequeuniversity.com/library/aria/tabpanel" _target="_blank"></kol-link>
-- <kol-link _href="https://design-system.service.gov.uk/components/tabs/" _target="_blank"></kol-link>
+# kol-tabs
 
 <!-- Auto Generated Below -->
 

package/doc/textarea.md

@@ -1,76 +1,4 @@
-# Textarea
-
-Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-textarea
-	_resize="none"
-	_rows="5"
-	_value="
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
-  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
-  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
-  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-  sit amet."
-></kol-textarea>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-### Beispiel
-
-<kol-textarea _resize="none" _rows="5" _value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.">
-</kol-textarea>
-
-## Verwendung
-
-Verwenden Sie die **Textarea**-Komponente wenn die Eingabe von größeren Textmengen erforderlich ist, z.B. bei der Erfassung eines Anliegens innerhalb eines Formulars.
-Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestimmt werden.
-Über das Attribut **`_resize`** kann zusätzlich festgelegt werden ob und in welche Richtung die Textarea vergrößert werden kann. Der Wert **`none`** sperrt die Textarea gegen Größenänderungen.
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                        |
-| -------------- | ------------------------------------------------------------------------------- |
-| `Tab`          | Fokussiert die Textarea.                                                        |
-| `Pfeil-Tasten` | Können für die Navigation im Inhalt der fokussierten Textarea verwendet werden. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-textarea
 
 <!-- Auto Generated Below -->