@public-ui/components 2.2.8 → 3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.0

package/doc/table-stateless.md

@@ -1,90 +1,19 @@
-# TableStateless
-
-Synonyme: Data Table, Details List, Data Grid
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe <kol-link _href="table-stateful" _label="KolTableStateful" />.
-
-TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
-
-## Selektion
-
-Über die `_selection`-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist `_selection` definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
-
-```ts
-const data = [
-	{ id: '1001', name: 'Marianne Musterfrau' },
-	{ id: '1002', name: 'Max Mustermann' },
-];
-const selection: KoliBriTableSelection = {
-	/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
-	label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
-
-	/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
-	selectedKeys: ['1002'],
-
-	/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
-	keyPropertyName: 'id',
-};
-```
-
-## Beispiel
-
-```jsx
-<KolTableStateless
-  _label="Table for demonstration purposes"
-  _headerCells={{
-    horizontal: [
-      [
-        { key: 'value', label: 'Value', sortDirection: 'ASC' },
-      ],
-    ],
-  }}
-  _data={DATA}
-  _selection={{
-    label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
-    selectedKeys: ['1002'],
-    keyPropertyName: 'id',
-  }}
-  _on={{
-    /**
-     * @param {MouseEvent} _
-     * @param {SortEventPayload} payload
-     * @param {string} payload.key
-     * @param {KoliBriSortDirection} payload.currentSortDirection
-     */
-    onSort: (_: MouseEvent, payload: SortEventPayload) => {
-      /* Perform sort, update `DATA` and headers `sortDirection` */
-    },
-
-    /**
-     * @param {Event} _
-     * @param {string[]} selection - Array of selected keys
-     */
-    onSelectionChange: (_: Event, selection: string[]) => {
-      /* Update selection.selectedKeys state */
-    }
-  }}
-/>
-```
+# kol-table-stateless
 
 <!-- Auto Generated Below -->
 
 
 ## 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`    | <span class="text-red-500">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major release.<br/><br/>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; multiple?: boolean` \| `undefined; selectedKeys?: string[]` \| `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` _(required)_    | `_min-width`    | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                         | `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; multiple?: boolean` \| `undefined; selectedKeys?: string[]` \| `undefined; disabledKeys?: string[]` \| `undefined; })` | `undefined` |
 
 
 ----------------------------------------------

package/doc/tabs.md

@@ -1,92 +1,4 @@
-# Tabs
-
-Synonyme: Navigation, Nav
-
-Die **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite zu organisieren und zwischen ihnen zu navigieren. Tabs sorgen dafür, dass große Inhaltsmengen für Nutzer:innen leichter organisiert werden können. Tabs sind in Registerkartenleisten angeordnet, die als Registerkartengruppen bezeichnet werden, wobei die Registerkartenbeschriftung den Nutzer:innen einen Hinweis darauf gibt, welcher Inhalt angezeigt wird, wenn die Registerkarte ausgewählt wird.
-
-## Konstruktion
-
-Nach dem Laden der Komponente wird die erste Registerkarte links automatisch optisch als **_aktiv_** hervorgehoben. Jede Registerkarte übernimmt den Status **_aktiv_** nach dem Anklicken. Der Status **_aktiv_** kann mit dem Attribut **`_selected`** auch manuell auf den Index der Registrierkarte gesetzt werden.
-Die einzelnen Inhalte der Registerkarte werden in einem eigenen `HTMLDivElement` als `<div>Inhalt der Registerkarte</div>` innerhalb von `<kol-tabs></kol-tabs>` notiert.
-
-Die Zuordnung der Daten im Attribut **`_tabs`** zu den Div-Elementen erfolgt automatisch.
-
-### Code
-
-```html
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icons":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
-	<div>Inhalt von Tab 1</div>
-	<div>Inhalt von Tab 2</div>
-	<div>Inhalt von Tab 3</div>
-</kol-tabs>
-```
-
-### Beispiel
-
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icons":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
-  <div>Inhalt von Tab 1</div>
-  <div>Inhalt von Tab 2</div>
-  <div>Inhalt von Tab 3</div>
-</kol-tabs>
-
-## Verwendung
-
-### Definition der Registerkarten
-
-Die Daten für die Registerkarten können als Objekte oder JSON-String an das Attribut **`_tabs`** übergeben werden.
-
-```json
-[{ "_label": "Tab 1", "_icons": "codicon codicon-home" }, { "_label": "Tab 2", "_on": { "onClose": true } }, { "_label": "Tab 3" }]
-```
-
-### Registerkarte deaktivieren
-
-Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut **`_disabled`**.
-
-### Close-Icon im Registekartenheader
-
-Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut **`_on`** und den Wert **"onClose":true** realisieren.
-
-### Best practices
-
-- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass Nutzer:innen die Seite nicht verlassen müssen.
-- Registerkarten sollten in einer einzelnen, scrollbaren (falls erforderlich) Zeile über dem Inhalt positioniert werden, auf den sie sich beziehen.
-- Verwenden Sie die Registerkartenbezeichnung, um den Inhalt dieser Registerkarte klar und prägnant zu beschreiben und zwischen den verschiedenen Abschnitten zu unterscheiden.
-- Verwenden Sie Registerkarten nicht, um eine Sequenz oder einen Verlauf von Inhalten zu erstellen, die der Benutzer in einer bestimmten Reihenfolge lesen soll.
-- Verwenden Sie Registerkarten nicht zum Vergleichen von Inhalten (z. B. unterschiedliche Spezifikationen).
-- Berücksichtigen Sie die Anzahl der Registerkarten, die Sie in die Registerkartengruppe aufnehmen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, sollten Sie den Inhalt weiter aufteilen oder ein anderes Navigationsmuster/eine andere Komponente verwenden.
-
-### Anwendungsfälle
-
-- Über Registerkarten können Sie z.B. Dienstleistungen oder Vorteile in verschiedene Kategorien einteilen.
-- Verwenden Sie Registerkarten, um Benutzerprofile in verschiedene Abschnitte zu gliedern (z. B. persönliche Informationen, Termine, aktive Services).
-- Verwenden Sie Registerkarten, um FAQs in verschiedene Kategorien zu unterteilen.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-Ausgewählte Tabs werden beim Anspringen mit der **Tab-Taste** mit einem deutlichen Focus-Rahmen umgeben. Die einzelnen Tabs können mit den Pfeiltasten **links** und **rechts** durchlaufen werden.
-
-Nach Anspringen eines Tabs kann mit Hilfe der **Tab-Taste** vom Header in den Inhaltsbereich der Registerkarte gewechselt werden.
-
-Unabhängig davon ob die Tab-Schalter oben, rechts, unten oder links angeordnet sind, bleibt die Tastatursteuerung gleich. Hintergrund ist, dass das Layout bei der Nutzung eines Screenreaders keine Rolle spielt. Eine unterschiedliche Pfeil-Tastensteuerung aufgrund der Layout-Anordnung würde daher nicht dem üblichen Bedienkonzept des W3C entsprechen.
-
-Bei der Umsetzung der Tastatursteuerung wurde sich an den Beispielen des W3C's orientiert.
-
-Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effizient über die gesamte Seite/Anwendung zu navigieren, ist nur 1 Schalter aus der Tab-Serie fokussierbar. Sobald der Nutzende auf der Tab-Navigation selbst ist, werden die Pfeiltasten verwendet, um zwischen den Tabs selbst wechseln.
-
-| Taste                            | Funktion                                                                                                |
-| -------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `Tab`                            | Fokussiert den ersten aktiven Tab. Auf vorhandene Close-Icons können mit der Tab-Taste erreicht werden. |
-| `Pfeil-Tasten (links` \| `rechts)` | Wechselt zwischen den Tabs.                                                                             |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role" _target="_blank"></kol-link>
-- <kol-link _href="https://dequeuniversity.com/library/aria/tabpanel" _target="_blank"></kol-link>
-- <kol-link _href="https://design-system.service.gov.uk/components/tabs/" _target="_blank"></kol-link>
+# kol-tabs
 
 <!-- Auto Generated Below -->
 

package/doc/textarea.md

@@ -1,76 +1,4 @@
-# Textarea
-
-Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-textarea
-	_resize="none"
-	_rows="5"
-	_value="
-  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
-  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
-  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
-  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-  sit amet."
-></kol-textarea>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-### Beispiel
-
-<kol-textarea _resize="none" _rows="5" _value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.">
-</kol-textarea>
-
-## Verwendung
-
-Verwenden Sie die **Textarea**-Komponente wenn die Eingabe von größeren Textmengen erforderlich ist, z.B. bei der Erfassung eines Anliegens innerhalb eines Formulars.
-Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestimmt werden.
-Über das Attribut **`_resize`** kann zusätzlich festgelegt werden ob und in welche Richtung die Textarea vergrößert werden kann. Der Wert **`none`** sperrt die Textarea gegen Größenänderungen.
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                        |
-| -------------- | ------------------------------------------------------------------------------- |
-| `Tab`          | Fokussiert die Textarea.                                                        |
-| `Pfeil-Tasten` | Können für die Navigation im Inhalt der fokussierten Textarea verwendet werden. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-textarea
 
 <!-- Auto Generated Below -->
 
@@ -81,28 +9,25 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 | --------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
 | `_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`         | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in v3. Use automatic behaviour instead.<br/><br/>Defines whether the screen-readers should read out the notification.                                                                                                              | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `undefined`  |
 | `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_error`              | `_error`         | <span style="color:red">**[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`      |
+| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
 | `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`         |
-| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                    | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                     | `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`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `string` \| `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "error"` \| `"default"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined`  |
+| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `string` \| `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'` |
+| `_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`. | `"none"` \| `"vertical"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                         | `'vertical'` |
 | `_rows`               | `_rows`          | Defines how many rows of text should be visible at the same time.                                                                                                                                                                                                                                  | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
 | `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                                                                                                                                     | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
 | `_spellCheck`         | `_spell-check`   | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean` \| `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`  |
@@ -110,16 +35,6 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `getValue() => Promise<string | undefined>`
 
 

package/doc/toaster.md

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

package/doc/toolbar.md

@@ -1,49 +1,4 @@
-# Toolbar `preview`
-
-<kol-alert _type="warning" _variant="card">
-  <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
-</kol-alert>
-
-Die Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.
-
-```html
-<kol-toolbar _label="Label" _items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]"> </kol-toolbar>
-```
-
-### Beispiel
-
-<kol-toolbar
-	_label="Label"
-	_items="[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]">
-</kol-toolbar>
-
-## Verwendung
-
-Verwenden Sie die **Toolbar**-Komponente wenn die Navigation von verschiedenen Buttons und Links ermöglicht werden soll, z.B. um den Inhalt einer Textarea zu formatieren.
-Mit Hilfe des Attributs **`_label`** kann das **`aria-label`** gesetzt werden.
-Über das Attribut **`_items`** werden die einzelnen Funktionen in der Toolbar gesetzt.
-Der **`tabIndex`** wird von der **Toolbar**-Komponente gesteuert. Default ist hierbei immer das erste aktive Elemente in der **Toolbar**.
-
-### Unterstützte **Toolbar**-Komponenten
-
-- Link
-- Button
-
-Die **Toolbar**-Komponente erkennt hierbei selbständig durch das **`_href`**-Attribut, ob es sich um eine **Link**- oder **Button**-Komponente handelt.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                       |
-| -------------- | -------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Erster Tab fokussiert die Toolbar. Zweiter das erste aktive Element und dritter setzt den Standard wieder her. |
-| `Pfeil-Tasten` | Können für die Navigation der Element in der fokussierten Toolbar verwendet werden.                            |
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" _target="_blank"></kol-link>
+# kol-toolbar
 
 <!-- Auto Generated Below -->
 

package/doc/tree-item.md

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

package/doc/tree.md

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

package/doc/version.md

@@ -1,26 +1,4 @@
-# Version
-
-Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-version _label="1.44.0"></kol-version>
-</div>
-```
-
-### Beispiel
-
-<kol-version _label="1.44.0"></kol-version>
-
-## Verwendung
-
-Für die Konfiguration steht das Attribut **`_label`** zur Verfügung und nimmt einen beliebigen Text auf, dem in der Komponente ein `v` vorgestellt wird.
-
-Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
+# kol-version
 
 <!-- Auto Generated Below -->