@public-ui/components 1.1.15 → 1.1.16-rc.0

package/doc/spin.md

@@ -0,0 +1,52 @@
+# 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.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<div>
+	<kol-spin _show />
+</div>
+```
+
+### Beispiel
+
+<kol-spin _show></kol-spin>
+
+## Verwendung
+
+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.
+
+### Anwendungsfälle
+
+- Abrufen neuer oder aktualisierter Suchergebnisse.
+- Einloggen in geschützte Bereiche.
+- Download von Inhalten.
+- Laden von umfangreichen Inhalten, z.B. Videos.
+
+## Barrierefreiheit
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                               | Type                   | Default |
+| -------- | --------- | --------------------------------------------------------- | ---------------------- | ------- |
+| `_show`  | `_show`   | Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht. | `boolean \| undefined` | `false` |
+
+
+----------------------------------------------
+
+

package/doc/table.md

@@ -0,0 +1,220 @@
+# 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.
+
+<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.
+
+**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.
+
+### Funktionalitäten
+
+Die Table-Komponente unterstützt folgende Funktionalitäten:
+
+- 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.
+- 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.
+
+### 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.
+
+#### 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,
+      },
+      …
+    ],
+    …
+  ],
+};
+```
+
+#### 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
+<kol-table _caption="Tabellenbeschreibung" _headers="{'horizontal': [[{'label':'Montag','key':'montag'}]]}" _pagination="[{'page':2}]"></kol-table>
+```
+
+### Beispiel
+
+<kol-table _caption="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 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).
+
+<!--### 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 gemanaged: `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/
+- https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html
+- https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen
+- https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html
+- https://www.digitala11y.com/aria-sort-properties/
+- https://dequeuniversity.com/library/aria/table-sortable
+- https://www.maxability.co.in/2016/06/07/aria-sort-property/
+- https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
+- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen
+- https://stackoverflow.com/questions/1312236/
+- https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
+
+<!-- Auto Generated Below -->
+
+
+## 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?: TooltipAlignment \| undefined; }` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-button](../button)
+- [kol-pagination](../pagination)
+
+### Graph
+```mermaid
+graph TD;
+  kol-table --> kol-button
+  kol-table --> kol-pagination
+  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-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
+  style kol-table fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/tabs.md

@@ -0,0 +1,151 @@
+# Tabs
+
+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 (Index der Registerkarte)` auch manuell gesetzt werden,
+um z.B. die dritte anstelle der ersten Registerkarte aktiv zu setzen.
+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:
+
+### Code
+
+```tsx
+<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1"},{"_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","_icon":"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 Registerkarten werden als JSON-Struktur an das Attribut `_tabs` übergeben. Die Struktur ist als Wert-/Parameter-Paar aufgebaut:
+
+```tsx
+[
+	{
+		_label: 'Tab 1',
+	},
+	{
+		_label: 'Tab 2',
+		_disabled: true,
+	},
+	{
+		_label: 'Tab 3',
+		_icon: 'home',
+		_on: { onClose: true },
+	},
+];
+```
+
+### 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**.
+
+### 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 der Benutzer keine Seite verlassen muss.
+- 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.
+- 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
+
+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:
+
+- 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?: EventValueCallback<KeyboardEvent \| PointerEvent \| CustomEvent<any>, 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'`     |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-button-group-wc](../button-group)
+- kol-button-wc
+
+### Graph
+```mermaid
+graph TD;
+  kol-tabs --> kol-button-group-wc
+  kol-tabs --> 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
+  style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/textarea.md

@@ -0,0 +1,108 @@
+# Textarea
+
+Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum
+InputText können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<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>
+```
+
+### 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.<br/>
+Mit Hilfe der Property **`_rows`** kann die Höhe der Textarea in Zeilen bestimmt werden.<br/>
+Über die Property **`_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
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                                                          | Type                                                                                     | Default      |
+| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                 | `string \| undefined`                                                                    | `undefined`  |
+| `_adjustHeight`    | `_adjust-height` | Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.                                                    | `boolean \| undefined`                                                                   | `false`      |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                             | `boolean \| undefined`                                                                   | `true`       |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                          | `boolean \| undefined`                                                                   | `undefined`  |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                             | `string \| undefined`                                                                    | `undefined`  |
+| `_hasCounter`      | `_has-counter`   | Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.                          | `boolean \| undefined`                                                                   | `undefined`  |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                        | `boolean \| undefined`                                                                   | `undefined`  |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                               | `string \| undefined`                                                                    | `''`         |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                         | `string`                                                                                 | `undefined`  |
+| `_maxLength`       | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                                | `number \| undefined`                                                                    | `undefined`  |
+| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                     | `string \| undefined`                                                                    | `undefined`  |
+| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined`  |
+| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                         | `string \| undefined`                                                                    | `undefined`  |
+| `_readOnly`        | `_read-only`     | Gibt an, ob das Eingabefeld nur lesend ist.                                                                          | `boolean \| undefined`                                                                   | `undefined`  |
+| `_required`        | `_required`      | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                                     | `boolean \| undefined`                                                                   | `undefined`  |
+| `_resize`          | `_resize`        | Gibt an, ob die Größe des Eingabefeldes geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | `"both" \| "horizontal" \| "none" \| "vertical" \| undefined`                            | `'vertical'` |
+| `_rows`            | `_rows`          | Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.                                                       | `number \| undefined`                                                                    | `undefined`  |
+| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                         | `number \| undefined`                                                                    | `undefined`  |
+| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                        | `boolean \| undefined`                                                                   | `false`      |
+| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                  | `string \| undefined`                                                                    | `undefined`  |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-textarea --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  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-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-textarea fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/toast.md

@@ -0,0 +1,95 @@
+# Toast
+
+Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.
+
+Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für fünf Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-toast _heading="Überschrift" _type="success">
+	Web Component
+</kol-toast>
+```
+
+### Beispiel
+
+<div class="d-grid gap-2">
+  <kol-alert _heading="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
+  <kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
+</div>
+
+## Verwendung
+
+### Überschrift
+
+Verwenden Sie das Attribut `_heading`, um die Überschrift des Toasts zu bestimmen.
+
+### Größe der Überschrift
+
+Verwenden Sie das Attribut `_level`, um die Größe der Überschrift zu bestimmen. Möglich sind die Werte 1 - 6.
+
+### Anzeigen des Toasts
+
+Verwenden Sie das Attribut `_show`, um den Toast manuell anzuzeigen.
+
+### Anzeigedauer des Toast
+
+Verwenden Sie das Attribut `_showDuration`, um die Anzeigedauer des Toasts festzulegen.
+
+### Anzeigetyp des Toast
+
+Verwenden Sie das Attribut `_type`, um den Typ des Toasts festzulegen.
+
+<!--### Best practices
+
+### Anwendungsfälle-->
+
+## Barrierefreiheit
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute        | Description                                                                       | Type                                                                    | Default     |
+| --------------- | ---------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
+| `_alert`        | `_alert`         | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean \| undefined`                                                  | `true`      |
+| `_hasCloser`    | `_has-closer`    | Gibt an, ob der Toast ein Schließen-Icon hat.                                     | `boolean \| undefined`                                                  | `false`     |
+| `_heading`      | `_heading`       | Gibt den Titel der Meldung an.                                                    | `string \| undefined`                                                   | `''`        |
+| `_level`        | `_level`         | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                               | `1`         |
+| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                  | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
+| `_show`         | `_show`          | Gibt an, ob der Toast eingeblendet wird.                                          | `boolean \| undefined`                                                  | `true`      |
+| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.              | `number \| undefined`                                                   | `10000`     |
+| `_type`         | `_type`          | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-alert](../alert)
+
+### Graph
+```mermaid
+graph TD;
+  kol-toast --> kol-alert
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  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
+  style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+