@public-ui/components 2.1.0 → 2.1.2

package/doc/combobox.md

@@ -0,0 +1,100 @@
+# Combobox `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 **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.
+
+## Konstruktion
+
+### Code
+
+```html
+<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+```
+
+### Beispiel
+
+<kol-combobox  _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+
+## Verwendung
+
+Die Auswahlmöglichkeiten werden über das Attribut **`_suggestions`** als JSON-Array an die Komponente übergeben.
+
+Beispiel für die Konstruktion des JSON-Array:
+
+```json
+["Herr", "Frau", "Firma"]
+```
+
+<!--### Best practices-->
+
+<!-- ## Barrierefreiheit -->
+
+### Tastatursteuerung
+
+| Taste                          | Funktion                                                                                                                                                                                            |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`                          | Fokussiert das Auswahlfeld.                                                                                                                                                                         |
+| `Enter`                        | Wenn die Listbox geöffnet ist und eine Option fokussiert ist, wählt diese Funktion die fokussierte Option aus und schließt die Listbox. Wenn keine Optionfokussiert ist, öffnet es nur die Listbox. |
+| `Pfeil nach unten (ArrowDown)` | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach unten, wenn die Listbox geöffnet ist.                                                              |
+| `Pfeil nach oben (ArrowUp)`    | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach oben, wenn die Listbox geöffnet ist.                                                               |
+| `Escape (Esc)`                 | Schlißt die Listbox und entfernt den visuellen Fokus von der Combobox, ohne eine Auswahl zu treffen.                                                                                                |
+| `Home`                         | Bewegt den visuellen Fokus auf die erste Option in der Listbox.                                                                                                                                     |
+| `End`                          | Bewegt den visuellen Fokus auf die letzte Option in der Listbox.                                                                                                                                    |
+| `Seite mach oben(PageUp)`      | Springt zehn Optionen nach oben in der Listbox und fokussiert die entsprechende Option.                                                                                                             |
+| `Seite mach unten(PageDown)`   | Springt zehn Optionen nach unten in der Listbox und fokussiert die entsprechende Option.                                                                                                            |
+| `Druckbare Zeichen`            | Fokussiert die erste Option, die mit dem gedrückten Zeichen beginnt.                                                                                                                                |
+
+<!-- Auto Generated Below -->
+
+
+## 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` |
+| `_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`     |
+| `_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`                    | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `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` |
+| `_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` |
+| `_required`                 | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_suggestions` _(required)_ | --               | Suggestions the user can choose from.                                                                                                                        | `string[]`                                                                                                                                                                                                                                                                                                                                                                        | `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
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
+## Slots
+
+| Slot | Description                         |
+| ---- | ----------------------------------- |
+|      | Die Beschriftung des Eingabefeldes. |
+
+
+----------------------------------------------
+
+

package/doc/input-checkbox.md

@@ -20,6 +20,29 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
 <kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
 <kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
 
+### 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                                             | -                                                   |
+| onInput  | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event)  | Definierter `_value` wenn aktiv, andernfalls `null` |
+| onChange | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
+| onBlur   | Element verliert Fokus                                              | -                                                   |
+
 ## Verwendung
 
 Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.

package/doc/input-date.md

@@ -35,6 +35,30 @@ const ClearableDateInput = () => {
 };
 ```
 
+### 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  | Datum wird gesetzt bzw. änder sich (entspricht nativem `input`-Event)  | Eingegebenes Datum als ISO8601 String |
+| onChange | Datum wird gesetzt bzw. änder sich (entspricht nativem `change`-Event) | Eingegebenes Datum als ISO8601 String |
+| onBlur   | Element verliert Fokus                                                 | -                                     |
+
 ## Verwendung
 
 Die **InputDate**-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.

package/doc/input-email.md

@@ -14,6 +14,30 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
 
 <kol-input-email _label="E-Mail-Adresse" _icons='{"right": "codicon codicon-mail"}'></kol-input-email>
 
+### 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                                                                       | -                            |
+
 ## Verwendung
 
 Setzen Sie die **InputEmail**-Komponente auf Formularen ein, wenn dort die Eingabe einer oder mehrerer E-Mail-Adressen erforderlich ist.

package/doc/input-file.md

@@ -10,6 +10,30 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es kö
 <kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>
 ```
 
+### 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 oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event)  | Ausgwählte Dateien als FileList |
+| onChange | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
+| onBlur   | Element verliert Fokus                                                          | -                               |
+
 ### Beispiel
 
 <kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>

package/doc/input-number.md

@@ -10,6 +10,30 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 <kol-input-number _value="74" _label="ZAHL!" _icons='{"right": "codicon codicon-dashboard"}'></kol-input-number>
 ```
 
+### 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-input-number _value="74" _label="ZAHL!" _icons='{"right": "codicon codicon-dashboard"}'></kol-input-number>

package/doc/input-password.md

@@ -10,6 +10,30 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 <kol-input-password _label="Passwort" _smartButton='{"_icons": "codicon codicon-eye", "_hideLabel": true, "_label": "Passwort anzeigen"}'></kol-input-password>
 ```
 
+### 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-input-password _label="Passwort" _smartButton='{"_icons": "codicon codicon-eye", "_hideLabel": true, "_label": "Passwort anzeigen"}'></kol-input-password>

package/doc/input-radio.md

@@ -34,9 +34,31 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
 [ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];
 ```
 
+### 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  | Eine Option wird fokussiert                                     | -                           |
+| onInput  | Eine Option wird ausgewählt (entspricht nativem `input`-Event)  | `value`-Attribut der Option |
+| onChange | Eine Option wird ausgewählt (entspricht nativem `change`-Event) | `value`-Attribut der Option |
+| onBlur   | Eine Option verliert Fokus                                      | -                           |
+
 ### onChange
 
-Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und der Wert des ausgewählten RadioButtons.
 <kol-alert _heading="Hinweis für Versionen <2" _type="info">event.target.value enthält die Nummer der Checkbox mit einem '-' davor.</kol-alert>
 
 ```jsx

package/doc/input-range.md

@@ -17,6 +17,32 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 ></kol-input-range>
 ```
 
+### 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 (entspricht nativem `change`-Event) | Eingegebener Wert als Number |
+| onBlur   | Element verliert Fokus                                        | -                            |
+
+Value types von onInput und onChange werden in [#6345](https://github.com/public-ui/kolibri/issues/6345) angeglichen.
+
 ### Beispiel
 
 <kol-input-range

package/doc/input-text.md

@@ -2,6 +2,8 @@
 
 Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.
 
+Die Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden.
+
 ## Konstruktion
 
 ### Code
@@ -31,6 +33,30 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 	_label="Mit Button"
 	_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'></kol-input-text>
 
+### 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                                                                       | -                            |
+
 ## Verwendung
 
 ### Best practices

package/doc/link-button.md

@@ -30,23 +30,23 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default     |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined` |
-| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined` |
-| `_customClass`        | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
-| `_disabled`           | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                               | `false`     |
-| `_download`           | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                                | `undefined` |
-| `_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`     |
-| `_href` _(required)_  | `_href`               | Defines the target URI of the link.                                                                                                                          | `string`                                                                                             | `undefined` |
-| `_icons`              | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `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` |
-| `_on`                 | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined` |
-| `_role`               | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `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` |
-| `_target`             | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`   |
-| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
+| Property             | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default     |
+| -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`         | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined` |
+| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined` |
+| `_customClass`       | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
+| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                               | `false`     |
+| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                                | `undefined` |
+| `_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`     |
+| `_href` _(required)_ | `_href`               | Defines the target URI of the link.                                                                                                                          | `string`                                                                                             | `undefined` |
+| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                               | `undefined` |
+| `_label`             | `_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`                                                                                | `undefined` |
+| `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined` |
+| `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `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` |
+| `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
+| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`   |
+| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
 
 
 ----------------------------------------------

package/doc/logo.md

@@ -1,5 +1,7 @@
 # Logo
 
+> **[DEPRECATED]**: Das Logo wird eine interne Komponente.
+
 Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen die Logos verschiedener Bundesinstitutionen ausgegeben werden. Das Logo wird dabei aus einer Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen.
 
 ## Konstruktion
@@ -51,6 +53,8 @@ Das Attribut **`_org`** wird für die Definition des gewünschten Logos verwende
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** 
+
 ## Properties
 
 | Property            | Attribute | Description                                                                    | Type                                              | Default     |

package/doc/select.md

@@ -20,6 +20,30 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 </kol-select>
 ```
 
+### 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 Auswahl erfolgt (entspricht nativem `input`-Event)  | `value`-Attribut der Option |
+| onChange | Eine Auswahl erfolgt (entspricht nativem `change`-Event) | `value`-Attribut der Option |
+| onBlur   | Element verliert Fokus                                   | -                           |
+
 ### Beispiel
 
 <kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>

package/doc/span.md

@@ -1,6 +1,8 @@
 # Span
 
-<kol-alert _type="warning">Die **Span**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung direkt verwendet zu werden. Denn der Span ist nur dann wirklich barrierefrei, wenn es in Kombination mit dem Tooltip verwendet wird.</kol-alert>
+<kol-alert _type="warning" _variant="card">
+  Die **Span**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung direkt verwendet zu werden. Denn der Span ist nur dann wirklich barrierefrei, wenn er in Kombination mit dem Tooltip verwendet wird.
+</kol-alert>
 
 Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die Text-Icon-Kombination und das Expert-Slot-Konzept einheitlich umzusetzen.
 

package/doc/table-stateful.md

@@ -1,8 +1,8 @@
 # TableStateful
 
-<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 **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.
 
@@ -191,8 +191,23 @@ 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` |
+
+
+## Methods
+
+### `getSelection() => Promise<KoliBriTableDataType[]>`
+
+
+
+#### Returns
+
+Type: `Promise<KoliBriTableDataType[]>`
+
+
 
 
 ----------------------------------------------