@public-ui/components 2.2.6-rc.2 → 3.0.0-0edf6aa20a9ac9faa46ebe0e45a8c62841b05164.0

package/doc/nav.md

@@ -1,113 +1,4 @@
-# Nav
-
-Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)
-
-Eine **Navigationsleiste** ist eine Gruppe von verwandten Links oder Navigationselementen, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln.
-
-**KoliBri** stellt eine umfangreich konfigurierbare, vertikale oder horizontale **Navigationsleiste** zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann.
-Übergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am rechten Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich das Plus-Icon automatisch zu einem **Minus-Icon**, mit dem der Menüpunkt wieder geschlossen werden kann.
-
-Aktive Menüpunkte werden mit einer farbigen Markierung dargestellt.
-
-Über eine optionale Schaltfläche unterhalb der Navigation kann die Breite der **Nav**-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur
-noch die Icons ausgegeben.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-nav
-	_label="Navigation"
-	_links="[
-    {
-      '_href': 'startseite',
-      '_icons': 'codicon codicon-home',
-      '_label': 'Startseite2',
-      '_children': [
-        {
-          '_href': 'startseite/1-untermenuepunkt',
-          '_icons': 'codicon codicon-home',
-          '_label': '1. Untermenüpunkt'
-        },
-        {
-          '_href': 'startseite/2-untermenuepunkt',
-          '_icons': 'codicon codicon-home',
-          '_label': '2. Untermenüpunkt'
-        }
-      ]
-    },
-    {
-      '_href': 'unterseite',
-      '_icons': 'codicon codicon-home',
-      '_label': '2. Menüpunkt'
-    }
-  ]"
-	_has-compact-button
-></kol-nav>
-```
-
-### Beispiel
-
-<kol-nav _label="Navigation" _links="[{'_href':'startseite','_icons':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icons':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icons':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icons':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
-
-## Verwendung
-
-### Links in der Navigationsleiste definieren
-
-Die Navigationsstruktur wird als Objekt oder JSON-String an das Attribut **`_links`** übergeben. Die Struktur ist als Wert/Parameter-Paar aufgebaut:
-Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzliche Attribut **`_children`** im übergeordneten Element.
-
-```js
-[
-	{
-		_href: 'startseite',
-		_icons: 'codicon codicon-home',
-		_label: 'Startseite',
-		_children: [
-			{ _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
-			{ _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
-		],
-	},
-	{ _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
-];
-```
-
-### Kompakte Navigationsleiste anzeigen
-
-Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_hide-label`**.
-
-### Umschaltung horizontale/vertikale Ausrichtung
-
-Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** umgeschaltet werden. Mögliche Werte sind:
-
-- `horizontal`
-- `vertical`
-
-### Best practices
-
-- Verwenden Sie **Navigationsleisten**, um **Navigation** oder navigationsähnliche Aktionen darzustellen (z. B. interne oder externe Links, Abmelden, Kontrolle der Sichtbarkeit auf der Seite).
-- Verwenden Sie das Label, um eine klare und präzise Beschreibung des Inhalts zu diesem bestimmten Navigationselement bereitzustellen.
-- Verwenden Sie keine **Navigationsleisten** für Aktionen, die besser als Schaltflächen dargestellt werden (z. B. „Speichern“, „Löschen“, „Artikel in den Warenkorb legen“).
-- Stapeln Sie nicht mehrere **Navigationsleisten** direkt nebeneinander.
-- Verwenden Sie keine **Navigationsleisten** zum Vergleichen von Inhalten (z. B. unterschiedliche Leistungen).
-- Berücksichtigen Sie die Anzahl der Navigationselemente, die Sie in die **Navigationsleiste** einfügen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, ziehen Sie alternative Ansätze zur Präsentation des Inhalts in Betracht oder verwenden Sie ein anderes Navigationsmuster/eine andere Komponente.
-
-### Anwendungsfälle
-
-- Verwenden Sie **Navigationsleisten** als In-Page-Navigation auf einer Landingpage.
-- Verwenden Sie **Navigationsleisten**, um verwandte Informationen auf einer Landingpage zu organisieren.
-- Nutzen Sie **Navigationsleisten**, um Angebote oder Vorteile in verschiedene Kategorien einzuordnen (z.B. Formulare).
-- Verwenden Sie **Navigationsleisten**, um FAQs in verschiedene Kategorien zu unterteilen.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                                                                                                                                                                                   |
-| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`   | Fokussiert den ersten Menüpunkt in der Navigation. Nachfolgend kann mit der Tab-Taste jeder Menüpunkt angesprungen werden. Wenn der Has-compact-Button aktiviert wurde, ist dieser ebenfalls mit der Tab-Taste erreichbar. |
-| `Enter` | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls.                                                                                  |
+# kol-nav
 
 <!-- Auto Generated Below -->
 

package/doc/pagination.md

@@ -1,45 +1,4 @@
-# Pagination
-
-Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-pagination _max="100" _page="6"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-	<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-```
-
-### Beispiel
-
-<div class="grid gap-2">
-  <kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
-  <kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
-  <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
-  <kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
-  <kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
-  <kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
-</div>
-
-## Verwendung
-
-Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
-
-- Das Attribut **`_max`** bestimmt die Gesamtanzahl der Elemente.
-- Über das Attribut **`boundary-count`** wird die Anzahl von Elementen bestimmt, die in der **Paginierung**-Komponente rechts und links angezeigt werden, während die übrigen Elemente
-- Das Attribut **`_page`** legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
-- Über das Attribut **`_sibling-count`** kann festgelegt werden, wie viele Elemente jeweils links und rechts des Aktuellen angezeigt werden sollen.
-
-<!-- ### Best practices -->
-
-### Anwendungsfälle
-
-Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
-Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
+# kol-pagination
 
 <!-- Auto Generated Below -->
 

package/doc/popover-button.md

@@ -0,0 +1,42 @@
+# kol-popover-button
+
+<!-- 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` |
+| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `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`     |
+| `_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`     |
+| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `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` |
+| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
+| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'bottom'`  |
+| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                                                                                               | `undefined` |
+| `_shortKey`           | `_short-key`        | Adds a visual short key hint to the component.                                                                                                                                   | `string` \| `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'`     |
+| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
+| `_value`              | `_value`            | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
+
+
+## Slots
+
+| Slot | Description          |
+| ---- | -------------------- |
+|      | The popover content. |
+
+
+----------------------------------------------
+
+

package/doc/progress.md

@@ -1,44 +1,4 @@
-# Progress
-
-Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
-	<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
-</div>
-```
-
-### Beispiel
-
-<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
-<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
-
-## Verwendung
-
-Verwenden Sie das Attribut **`_variant`**, um die optische Ausgabe der Komponente zu steuern. Mögliche Werte sind:
-
-- `bar`: für eine Ausgabe als horizontaler Fortschrittsbalken
-- `cycle`: für eine Ausgabe als kreisförmiger Fortschrittsbalken
-
-Verwenden Sie das Attribut **`_max`**, um den maximalen Wert der Komponente zu bestimmen, das Minimum ist immer 0.
-
-Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu bestimmen.
-
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-<!-- ## Barrierefreiheit -->
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
+# kol-progress
 
 <!-- Auto Generated Below -->
 

package/doc/quote.md

@@ -1,66 +1,4 @@
-# Quote
-
-> <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.
-
-Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`inline`) und eine eingerückte(`block`) Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay, low throughput, and low altitude
-								service. The connection topology is limited to a single point-to-point path
-								for each carrier, used with standard carriers, but many carriers can be used
-								without significant interference with each other, outside early spring.
-								This is because of the 3D ether space available to the carriers, in contrast
-								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
-								avoidance system, which increases availability."
-	_variant="block"
->
-</kol-quote>
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay."
-	_variant="inline"
-></kol-quote>
-```
-
-### Beispiele
-
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay, low throughput, and low altitude
-					service. The connection topology is limited to a single point-to-point path
-					for each carrier, used with standard carriers, but many carriers can be used
-					without significant interference with each other, outside early spring.
-					This is because of the 3D ether space available to the carriers, in contrast
-					to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
-					avoidance system, which increases availability."
-	_variant="block"></kol-quote>
-<kol-quote
-	_label="RFC 1149"
-	_href="https://datatracker.ietf.org/doc/html/rfc1149"
-	_quote="Avian carriers can provide high delay."
-	_variant="inline"></kol-quote>
-
-## Verwendung
-
-Mittels **`_label`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
-Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann **`_variant`** auf `block` gesetzt werden.
-
-## References
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
-- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
+# kol-quote
 
 <!-- Auto Generated Below -->
 

package/doc/select.md

@@ -1,159 +1,36 @@
-# Select
-
-Synonyme: Datalist, Dropdown
-
-Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _value="[1]"> Auswahlfeld </kol-select>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _multiple _value="[0,2]">
-	Auswahlfeld (Mehrfachauswahl)
-</kol-select>
-<kol-select
-	_options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2},{'label':'Herr','value':3},{'label':'Frau','value':4},{'label':'Firma','value':5}]"
-	_rows="4"
-	_value="[1]"
->
-	Auswahlfeld mit _rows
-</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>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2}]" _multiple _value="[0,2]">
-Auswahlfeld (Mehrfachauswahl)
-</kol-select>
-<kol-select _options="[{'label':'Herr','value':0},{'label':'Frau','value':1},{'label':'Firma','value':2},{'label':'Herr','value':3},{'label':'Frau','value':4},{'label':'Firma','value':5}]" _rows="4" _value="[1]">Auswahlfeld mit rows</kol-select>
-
-## Verwendung
-
-Die Auswahlmöglichkeiten werden über das Attribut **`_options`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
-
-Beispiel für die Konstruktion des JSON-Objektes:
-
-```json
-[
-	{ "label": "Herr", "value": 0 },
-	{ "label": "Frau", "value": 1 },
-	{ "label": "Firma", "value": 2 }
-]
-```
-
-### Individuelle Höhe angeben
-
-Über das Attribut **`_rows`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
-
-<!--### Best practices-->
-
-<!-- ## Barrierefreiheit -->
-
-### Tastatursteuerung
-
-| Taste                         | Funktion                                                                                                                                                                                                                      |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`                         | Fokussiert das Auswahlfeld.                                                                                                                                                                                                   |
-| `Enter`                       | Öffnet bzw.schließt die Auswahlliste.                                                                                                                                                                                         |
-| `Pfeil-Tasten (oben / unten)` | Wechselt in der Auswahlliste das aktivierte Element. Diese Funktion ist auch bei eingeklappter Auswahlliste aktiv. Bei Mehrfachauswahl muss zur Auswahl mehrerer Einträge zusätzlich die Shift-Taste gedrück gehalten werden. |
-
-### `Single-Select-Filter` für Select-Komponente
-
-Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem
-Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen <b>SingeSelectFormatter</b> zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:
-
-```html
-class SingleSelectFormatter extends AbstractFormatter { public format(value: unknown): unknown { return [value]; } public parse(value: unknown): unknown { if
-(Array.isArray(value) && value.length > 0) { return value[0]; } return value; } }
-```
-
-Fügen Sie den Formatter anschließend der Select-Komponente hinzu:
-
-```html
-const singleSelectFormatHandler = new FormatHandler(); singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]); (this.getInput('kategorie') as
-InputControl).setFormatHandler(singleSelectFormatHandler);
-```
-
-Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.
-
-```html
-import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
-```
-
-## Links und Referenzen
-
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+# kol-select
 
 <!-- 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`         | <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` |
-| `_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`                | `_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` |
-| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_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` |
-| `_options`            | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                                           | `(Option<StencilUnknown>` \| `Optgroup<StencilUnknown>)[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_rows`               | `_rows`          | Defines how many rows of options 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` |
-| `_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.                                                                                                                                                       | `W3CInputValue[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `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` |
+| `_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`                | `_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` |
+| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_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` |
+| `_options`            | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                  | `(Option<StencilUnknown>` \| `Optgroup<StencilUnknown>)[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
+| `_rows`               | `_rows`          | Defines how many rows of options 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` |
+| `_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.                                                                                                                              | `W3CInputValue[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
 
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `getValue() => Promise<Stringified<W3CInputValue[]> | undefined>`