@public-ui/components 2.1.0 → 2.1.2

package/doc/table-stateless.md

@@ -1,14 +1,35 @@
 # TableStateless
 
-<KolAlert _type="warning" _variant="msg">
-  <kol-badge _label="untested"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.
-</KolAlert>
+<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.
 
-Beispiel:
+## 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
@@ -21,8 +42,11 @@ Beispiel:
     ],
   }}
   _data={DATA}
-  className="block"
-  style={{ maxWidth: '600px' }}
+  _selection={{
+    label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
+    selectedKeys: ['1002'],
+    keyPropertyName: 'id',
+  }}
   _on={{
     /**
      * @param {MouseEvent} _
@@ -33,6 +57,14 @@ Beispiel:
     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 */
+    }
   }}
 />
 ```
@@ -42,14 +74,15 @@ Beispiel:
 
 ## Properties
 
-| Property                    | Attribute       | Description                                                                                                        | Type                                                                                                                      | Default     |
-| --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_data` _(required)_        | `_data`         | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                        | `undefined` |
-| `_dataFoot`                 | `_data-foot`    | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                           | `undefined` |
-| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }` | `undefined` |
-| `_label` _(required)_       | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                  | `undefined` |
-| `_minWidth`                 | `_min-width`    | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                     | `undefined` |
-| `_on`                       | --              | Defines the callback functions for table events.                                                                   | `undefined` \| `{ onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload>` \| `undefined; }`                         | `undefined` |
+| Property                    | Attribute       | Description                                                                                                        | Type                                                                                                                                                                                              | Default     |
+| --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_data` _(required)_        | `_data`         | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                | `undefined` |
+| `_dataFoot`                 | `_data-foot`    | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                   | `undefined` |
+| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                         | `undefined` |
+| `_label` _(required)_       | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                          | `undefined` |
+| `_minWidth`                 | `_min-width`    | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                                                                                             | `undefined` |
+| `_on`                       | --              | Defines the callback functions for table events.                                                                   | `undefined` \| `{ onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload>` \| `undefined; onSelectionChange?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>` \| `undefined; }` | `undefined` |
+| `_selection`                | `_selection`    | Defines how rows can be selected and the current selection.                                                        | `string` \| `undefined` \| `({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string` \| `undefined; selectedKeys?: string[]` \| `undefined; })`                                         | `undefined` |
 
 
 ----------------------------------------------

package/doc/table.md

@@ -1,10 +1,8 @@
 # Table
 
-<KolAlert _type="warning" _variant="msg">
-  KolTable ist deprecated, bitte stattdessen
-  <kol-link _label="KolTableStateful" _href="https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateless/readme.md">
-  verwenden, die API und Funktionalität sind identisch.
-</KolAlert>
+<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-stateless/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.
 
@@ -187,8 +185,10 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 | `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; vertical?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
 | `_label` _(required)_   | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_minWidth`             | `_min-width`           | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
+| `_on`                   | --                     | Defines the callback functions for table events.                                                                   | `undefined` \| `{ onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload>` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
 | `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _max?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
 | `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `"both"` \| `"bottom"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |
+| `_selection`            | `_selection`           | Defines how rows can be selected and the current selection.                                                        | `string` \| `undefined` \| `({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string` \| `undefined; selectedKeys?: string[]` \| `undefined; })`                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 
 
 ----------------------------------------------

package/doc/textarea.md

@@ -20,6 +20,30 @@ Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur V
 ></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.">
@@ -53,32 +77,33 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                              | Default      |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_adjustHeight`       | `_adjust-height` | Adjusts the height of the element to its content.                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_alert`              | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `true`       |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_error`              | `_error`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use `msg` instead.<br/><br/>Defines the error message text.                           | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_hasCounter`         | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                  | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_hideError`          | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `''`         |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `_maxLength`          | `_max-length`    | Defines the maximum number of input characters.                                                                                                              | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined`  |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_resize`             | `_resize`        | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)              | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                                                                                                                                                                                                                                                                                                                     | `'vertical'` |
-| `_rows`               | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                            | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                             | `'top'`      |
-| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
-| `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                              | Default      |
+| --------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                                                                                                                                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_adjustHeight`       | `_adjust-height` | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_alert`              | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `true`       |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_error`              | `_error`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use `msg` instead.<br/><br/>Defines the error message text.                                                                                                                                                                 | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_hasCounter`         | `_has-counter`   | Shows the character count on the lower border of the input.                                                                                                                                                                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_hideError`          | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `''`         |
+| `_icons`              | --               | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                    | `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                     | `undefined`  |
+| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                                                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `_maxLength`          | `_max-length`    | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_msg`                | --               | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined`  |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                       | `undefined`  |
+| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_resize`             | `_resize`        | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                                                                                                                                                                                                                                                                                                                     | `'vertical'` |
+| `_rows`               | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                                                                                                                                                                  | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                   | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                             | `'top'`      |
+| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`      |
+| `_value`              | `_value`         | Defines the value of the input.                                                                                                                                                                                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined`  |
 
 
 ## Methods

package/doc/toaster.md

@@ -73,10 +73,16 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl
 
 ## Methods
 
-### `closeAll() => Promise<void>`
+### `closeAll(immediate?: boolean) => Promise<void>`
 
 
 
+#### Parameters
+
+| Name        | Type      | Description |
+| ----------- | --------- | ----------- |
+| `immediate` | `boolean` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/toolbar.md

@@ -0,0 +1,61 @@
+# 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>
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute | Description                                                                       | Type                    | Default     |
+| --------------------- | --------- | --------------------------------------------------------------------------------- | ----------------------- | ----------- |
+| `_items` _(required)_ | --        | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). | `ToolbarItemPropType[]` | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the semantic aria-label of the component.                                 | `string`                | `undefined` |
+
+
+----------------------------------------------
+
+

package/doc/tree.md

@@ -1,7 +1,7 @@
 # Tree
 
-<kol-alert _type="warning">
-  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.
+<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>
 
 <!-- Auto Generated Below -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "bugs": {