@public-ui/components 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0 → 4.0.0-alpha.0

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

package/doc/toaster.md

@@ -1,74 +1,4 @@
-# Toaster
-
-Synonyme: Notification, Snackbar
-
-Mit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster
-angezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt.
-
-## Konstruktion
-
-Die Toast-Komponenten werden nicht direkt verwendet, sondern immer über den ToasterService konstruiert.
-
-### Code
-
-```js
-import { ToasterService } from '@public-ui/components';
-
-// Get the toaster instance for the current HTML document.
-const toaster = ToasterService.getInstance(document, {
-	defaultAlertType: 'msg', // Standard: 'card'
-});
-
-// Enqueue a new toast to the toaster to display:
-toaster.enqueue({
-	label: 'This is the title',
-	description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
-	type: 'info',
-	variant: 'msg', // Standard: 'card'
-});
-```
-
-### Weitere Service-Methoden
-
-- `closeAll`: Schließt alle Toasts
-- `dispose`: Entfernt den Toast Container. Die Toaster-Instanz kann nicht weiter genutzt werden.
-
-## Verwendung
-
-### Überschrift
-
-Verwenden Sie das Attribut **`_label`**, um die Überschrift des Toasts zu bestimmen.
-
-### Inhalt
-
-Verwenden Sie das Attribut **`_description`**, um den Text-Inhalt des Toasts zu bestimmen.
-
-Alternativ zur statischen Description können Sie über das Attribut **`_render`** eine eigene Render-Funktion definieren. Diese wird mit einer Referenz zum
-HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeben, das eine `close`-Funktion zum Schließen des Toasts bereitstellt.
-
-```ts
-const closeToast = toaster.enqueue({
-	render: (element: HTMLElement, { close }) => {
-		element.textContent = 'Mein Inhalt';
-		const customCloseButton = document.createElement('button');
-		customCloseButton.textContent = 'Toast schließen';
-		element.appendChild(customCloseButton);
-		customCloseButton.addEventListener('click', close, { once: true });
-	},
-});
-
-/* Optional: Toast wieder schließen mit `closeToast()` */
-```
-
-### Anzeigetyp des Toast
-
-Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind:
-
-- `default`
-- `error`
-- `info`
-- `success`
-- `warning`
+# kol-toast-container
 
 <!-- Auto Generated Below -->
 

package/doc/toolbar.md

@@ -1,49 +1,4 @@
-# Toolbar `preview`
-
-<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 Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.
-
-```html
-<kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar>
-```
-
-### Beispiel
-
-<kol-toolbar
-	_label="Label"
-	_items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]">
-</kol-toolbar>
-
-## Verwendung
-
-Verwenden Sie die **Toolbar**-Komponente wenn die Navigation von verschiedenen Buttons und Links ermöglicht werden soll, z.B. um den Inhalt einer Textarea zu formatieren.
-Mit Hilfe des Attributs **`_label`** kann das **`aria-label`** gesetzt werden.
-Über das Attribut **`_items`** werden die einzelnen Funktionen in der Toolbar gesetzt.
-Der **`tabIndex`** wird von der **Toolbar**-Komponente gesteuert. Default ist hierbei immer das erste aktive Elemente in der **Toolbar**.
-
-### Unterstützte **Toolbar**-Komponenten
-
-- Link
-- Button
-
-Die **Toolbar**-Komponente erkennt hierbei selbständig durch das **`_href`**-Attribut, ob es sich um eine **Link**- oder **Button**-Komponente handelt.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                       |
-| -------------- | -------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Erster Tab fokussiert die Toolbar. Zweiter das erste aktive Element und dritter setzt den Standard wieder her. |
-| `Pfeil-Tasten` | Können für die Navigation der Element in der fokussierten Toolbar verwendet werden.                            |
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" _target="_blank"></kol-link>
+# kol-toolbar
 
 <!-- Auto Generated Below -->
 

package/doc/tree-item.md

@@ -1,6 +1,4 @@
-# Tree-Item
-
-Weitere Informationen zum Tree finden Sie auf der <kol-link _href="/docs/components/tree" _label="Seite der Tree-Komponente"></kol-link>.
+# kol-tree-item-wc
 
 <!-- Auto Generated Below -->
 

package/doc/tree.md

@@ -1,73 +1,4 @@
-# Tree
-
-Synonyme: List, Navigation
-
-<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 Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.
-
-### Code
-
-```html
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-	<kol-tree-item _label="Page 1" _href="#" _open>
-		<kol-tree-item _label="Subpage 1" _href="#" _open>
-			<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-		</kol-tree-item>
-		<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-	</kol-tree-item>
-	<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-```
-
-### Beispiel
-
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-  <kol-tree-item _label="Page 1" _href="#" _open>
-    <kol-tree-item _label="Subpage 1" _href="#" _open>
-      <kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-    </kol-tree-item>
-    <kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-  </kol-tree-item>
-  <kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-
-## Verwendung
-
-Eine **Tree**-Komponente wird verwendet, um komplexe, hierarchische Datenstrukturen visuell darzustellen und zu navigieren. Sie ermöglicht es Benutzern, sich effizient durch verschachtelte Informationen zu bewegen und bietet eine klare Übersicht über die Beziehungen zwischen den verschiedenen Elementen. Solche Komponenten sind nützlich in Anwendungen wie Navigatoren, Organisationsdiagrammen, Produktkatalogen und überall dort, wo eine strukturierte Darstellung von Daten erforderlich ist.
-Das **`_label`**-Attribut wird für den Text und das **`_href`**-Attribut für den Link des Navigationspunkts genutzt. Zusätzlich lässt sich das aktive Element über das Attribut **`_active`** steuern, sowie im Standardzustand über das **`_open`** Attribut öffnen.
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                                                                                                                                                                                                                                                                         |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Der Tree lässt sich zudem mittels Tabulator-Taste fokussieren.                                                                                                                                                                                                                                                                                                   |
-| `Pfeil-Tasten` | Die Pfeiltasten können für die Navigation der Elemente im Tree verwendet werden, um das Untermenü zu öffnen oder zu schließen sowie zwischen den Navigationspunkten zu springen. Dabei wird die linke/rechte Pfeiltaste für das Öffnen oder Schließen des Untermenüs und die oben/unten Pfeiltaste für das Wechseln zwischen den Navigationselementen verwendet. |
-| `Enter`        | Selektiert das derzeitig fokussierte Element und navigiert, falls das **`_href`**-Attribut gesetzt wurde.                                                                                                                                                                                                                                                        |
-| `Home`         | Fokussiert das erste Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                             |
-| `End`          | Fokussiert das letzte Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                            |
-| `*`            | Öffnet, alle Geschwister-Elemente der derzeitig fokussierten Ebene                                                                                                                                                                                                                                                                                               |
-
-Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tasten gesucht und fokussiert werden. In dem oben gennanten Beispiel, würde durch die Taste `S` das Element mit dem **`_label`** `Subpage 1` fokussiert werden und bei wiederholten Drücken der selben Taste die `Subpage 2`, etc.
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" _target="_blank"></kol-link>
+# kol-tree
 
 <!-- Auto Generated Below -->