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

package/doc/breadcrumb.md

@@ -1,87 +1,4 @@
-# Breadcrumb
-
-Mit Hilfe der **Breadcrumb**-Komponente kann der Pfad zur aktuellen Position einer Webseite in einer hierarchischen Struktur dargestellt werden.
-
-## Funktionsweise
-
-Die **Breadcrumb**-Komponente zeigt die aktuelle Position einer Webseite in einer horizontalen Navigationsstruktur an. Das jeweils letzte Element rechts stellt die aktuelle Seite selbst dar.
-Diese ist nicht mit einem link versehen. Alle Elemente links der aktuellen Seite sind mit einem Link auf die verknüpfte Seite versehen.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/"},{"_label":"Unterseite von Startseite","_href":"#/unterseite"}]'></kol-breadcrumb>
-</div>
-```
-
-### Beispiel
-
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/"},{"_label":"Unterseite von Startseite","_href":"#/unterseite"}]'></kol-breadcrumb>
-
-## Verwendung
-
-### Definition der Links
-
-Das Attribut **\_links** erwartet die Übergabe eines JSON-Objekts, aus dem sich der Aufbau der anzuzeigenden Breadcrumb-Pfade ergibt. Das JSON-Objekt übergibt beliebig viele Elemente, die jeweils eine Anzahl an Eigenschaften und Werten bereitstellen.
-
-Jede Eigenschaft und der zugehörige Wert müssen in doppelten Anführungszeichen gesetzt werden.
-
-Einzelne Elemente werden in geschweiften Klammern und durch **Komma** separiert geschrieben.
-
-Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** übergeben werden.
-
-<b>Folgende Eigenschaften stehen zur Verfügung:</b>
-
-- **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
-- **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
-- **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
-
-Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
-
-```JSON
-[
-  { '_label': 'Startseite', '_href': '#/', '_icons': 'codicon codicon-home', '_hide-label': true },
-  { '_label': '1. Unterseite', '_href': '/unterseite_eins' },
-  { '_label': '2. Unterseite', '_href': '/unterseite_zwei' }
-]
-```
-
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icons":"codicon codicon-home","hide-label": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
-
-### Best practices
-
-- Die **Breadcrumb**-Komponente ist ein wichtiges Element für eine effektive Suchmaschinenoptimierung Ihrer Webseite.
-- Auch für Benutzer:innen der Webseite bietet eine Breadcrumb-Navigation zusätzliche Übersicht.
-- Positionieren Sie die Breadcrumb möglichst weit oben auf Ihren Inhaltsseiten, um zu gewährleisten, dass Suchmaschinen diese als zusätzliche Informationsquelle zur Struktur Ihrer Webseite nutzen können.
-- Positionieren Sie die Breadcrumb-Komponente auf jeder Inhaltsseite Ihre Webseite. Sie gewährleisten so, dass sich Besucher:innen jederzeit zurecht finden und die aktuelle Position erkennen können.
-- Vermeiden Sie, die Breadcrumb-Navigation auf der Startseite zu positionieren.
-- Verwenden Sie eine Breadcrumb-Navigation nur dann, wenn sie für Benutzer:innen einen wirklichen Mehrwert bieten.
-- Auf mobilen Varianten einer Webseite ist eine Breadcrumb-Navigation möglicherweise nicht sinnvoll.
-
-### Anwendungsfälle
-
-Eine Breadcrumb-Navigation ist auf einer großen Mehrzahl der aktuellen Webseiten zu finden. Somit beschreibt der klassische Anwendungsfall den generellen Einbau dieser Komponente.
-
-## Barrierefreiheit
-
-Achten Sie im Sinne der optimalen Barrierefreiheit darauf, das Attribut `_label` korrekt auszuzeichnen. Beachten Sie diesen Hinweis insbesondere dann, wenn Sie die Option `_hide-label` verwenden und so auf einen beschreibenden Text im Link verzichten würden.
-
-Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-Taste angesprungen werden kann, obwohl dort kein Link hinterlegt ist. Hierdurch kann auch dieses Element von Screenreader erreicht und vorgelesen werden.
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                     |
-| ------- | ------------------------------------------------------------ |
-| `Tab`   | Springt die einzelnen Elemente der Breadcrumb-Navigation an. |
-| `Enter` | Öffnet den Link des aktuellen Elements.                      |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
+# kol-breadcrumb
 
 <!-- Auto Generated Below -->
 

package/doc/button-link.md

@@ -1,51 +1,4 @@
-# ButtonLink
-
-Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.
-
-Einen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property `_disabled`. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.
-
-Statt, wie bei einem Link, `_href` zu verwenden, wird bei einem ButtonLink das Property über den `Click-Callback` gesteuert. Hierzu wird das `_on`-Property verwendet.
-
-Bei einem Link gibt es das Property `target`, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.
-
-Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `secondary` usw.) angeboten wird, stehen die Properties `_customClass` und `_variant` nicht zur Verfügung.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
-```
-
-### 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 */
-	},
-	onClick: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event       | Auslöser                                                       | Value                |
-| ----------- | -------------------------------------------------------------- | -------------------- |
-| onFocus     | Element wird fokussiert                                        | -                    |
-| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
-| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
-| onBlur      | Element verliert Fokus                                         | -                    |
-
-### Beispiel
-
-<div class="flex gap-2">
-  <kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
-</div>
+# kol-button-link
 
 <!-- Auto Generated Below -->
 
@@ -76,16 +29,6 @@ kolibriElement._on = {
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
 
 

package/doc/button.md

@@ -1,120 +1,4 @@
-# Button
-
-**Buttons** dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-button _label="Primary" _variant="primary"></kol-button>
-<kol-button _label="Secondary" _variant="secondary"></kol-button>
-<kol-button _label="Normal" _variant="normal"></kol-button>
-<kol-button _label="Danger" _variant="danger"></kol-button>
-<kol-button _label="Ghost" _variant="ghost"></kol-button>
-```
-
-### 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 */
-	},
-	onClick: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event       | Auslöser                                                       | Value                |
-| ----------- | -------------------------------------------------------------- | -------------------- |
-| onFocus     | Element wird fokussiert                                        | -                    |
-| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
-| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
-| onBlur      | Element verliert Fokus                                         | -                    |
-
-### Beispiel
-
-Default
-
-<div class="flex flex-wrap gap-2">
-  <kol-button _label="Primary" _variant="primary"></kol-button>
-  <kol-button _label="Secondary" _variant="secondary"></kol-button>
-  <kol-button _label="Normal" _variant="normal"></kol-button>
-  <kol-button _label="Danger" _variant="danger"></kol-button>
-  <kol-button _label="Ghost" _variant="ghost"></kol-button>
-</div>
-
-Disabled
-
-<div class="flex flex-wrap gap-2">
-  <kol-button _label="Primary" _variant="primary" _disabled></kol-button>
-  <kol-button _label="Secondary" _variant="secondary" _disabled></kol-button>
-  <kol-button _label="Normal" _variant="normal" _disabled></kol-button>
-  <kol-button _label="Danger" _variant="danger" _disabled></kol-button>
-  <kol-button _label="Ghost" _variant="ghost" _disabled></kol-button>
-</div>
-
-## Verwendung
-
-### Beschriftung
-
-Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut **`_label`**.
-`_label="Schaltflächenbeschriftung"`
-
-### Icons
-
-Icons (**`_icons`**) kann entweder als String angegeben werden, oder als Objekt.
-Als String übergeben Sie die Iconklasse (z.B.: `_icons="codicon codicon-home`), das Icon wird links vom Text angezeigt.
-Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
-
-### Schaltfläche ohne Text
-
-Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
-
-<kol-alert _type="info">Beachten Sie, dass das Attribut **`_label`** auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll, dieses wird von Screenreadern vorgelesen und in den Tooltip gesetzt.</kol-alert>
-
-### Darstellung angeben
-
-Zur Steuerung der Darstellung verwenden Sie das Attribut **`_variant`**. Der Standardwert ist `primary`, alternativ kann auch `primary`, `secondary`, `normal`, `danger`, `ghost`, oder `custom` gesetzt werden.<br/>
-
-Über die Verwendung des Wertes `custom` kann eine eigene Darstellung gewählt werden. Verpflichtend ist in diesem Fall das Setzen des Attribut **`_custom-class`**, damit die Schaltfläche im Shadow-Dom mittels CSS selektiert werden kann.
-
-### Best practices
-
-- Verwenden Sie eine primäre Schaltfläche für die nächstbeste Aktion. Verbleibende Calls-to-Action sollten als sekundäre Schaltfläche dargestellt werden.
-- Verwenden Sie Schaltflächen an einheitlichen Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
-- Verwenden Sie nur eine primäre Schaltfläche je Viewport. Auf der gesamten Seite kann ein Button-Style beliebig oft auftreten.
-- Die Beschriftung des Button muss die Aktion beschreiben, die die Schaltfläche ausführt. Sie sollte ein Verb enthalten (z.B. Speichern). Verwenden Sie prägnante, spezifische, selbsterklärende Beschriftungen.
-- Schaltflächenbeschriftungen sollten immer dann auch ein Nomen enthalten, wenn es Raum für Interpretationen darüber gibt, wofür das Verb zuständig ist. Verwenden Sie keine generischen Bezeichnungen wie "OK", insbesondere nicht im Fehlerfall. Fehler sind nie "OK".
-- Verwenden Sie nicht mehrere Buttons im Style "primär" innerhalb einer Gruppierung.
-- Verwenden Sie Buttons nicht als Link oder als Navigationselement.
-
-## Barrierefreiheit
-
-Für Menschen mit einem eingeschränkten Sichtfeld ist die Positionierung des **Icons** im Button links von der Beschriftung optimal.
-
-Probleme mit Disabled-Status
-
-- Darstellung Kontraste
-- Möglichkeit des Nutzerfeedbacks
-
-### Tastatursteuerung
-
-| Taste   | Funktion                                                     |
-| ------- | ------------------------------------------------------------ |
-| `Tab`   | Springt den einzelnen Button an und fokussiert ihn.          |
-| `Enter` | Führt die onClick-Methode der fokussierten Schaltfläche aus. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+# kol-button
 
 <!-- Auto Generated Below -->
 
@@ -147,16 +31,6 @@ Probleme mit Disabled-Status
 
 ## Methods
 
-### `focus() => Promise<void>`
-
-<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
 
 

package/doc/card.md

@@ -1,68 +1,4 @@
-# Card
-
-Um einzelne Bereiche Ihrer Webseite optisch hervorzuheben, bietet sich die **Card**-Komponente an. Mit ihrer Hilfe können Sie Ihre Inhalte sehr einfach strukturieren.
-
-Die **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_**.
-
-Der **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalts-Bereich** ist optisch durch eine horizontale Trennlinie unterhalb des Titel-Bereichs abgetrennt und wird in der Standardschrift ausgegeben.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-card _label="Testtitel">
-	<div>
-		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
-		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
-		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-	</div>
-</kol-card>
-```
-
-### Beispiel
-
-<kol-card _label="Testtitel">
-	<div>
-		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
-		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
-		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-	</div>
-</kol-card>
-
-## Verwendung
-
-### Einfache Standard-Card
-
-In der Standardansicht besteht eine **Card** aus einem Titel-Bereich, und einem leeren Inhalts-Bereich.
-Die horizontale Trennlinie zwischen beiden Bereichen setzt KoliBri automatisch.
-
-### Titel der Card-Komponente
-
-Den Titel der Card bestimmen Sie durch Setzen des Attributs **`_label`**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
-Beachten Sie, dass **HTML-Code** nicht erlaubt ist. Sofern nicht gesetzt werden drei Punkte dargestellt.
-Die Überschriftenebene des Titels wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
-
-### Inhalts-Container
-
-Die Inhalte im Content-Bereich der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Hier können Sie beliebigen **HTML-Code** einfügen.
-
-Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
-
-```html
-<kol-card _label="Beispiel" _level="1">
-	<div>Text im Inhalts-Bereich</div>
-</kol-card>
-```
-
-### Best practices
-
-- Verwenden Sie die **Card**-Komponente, um in sich geschlossene Themenbereiche optisch zu kapseln.
-- Verwenden Sie die **Card**-Komponente, um Ihre Inhalte semantisch zu strukturieren.
-- Vermeiden Sie, zu viele Cards auf einer Inhaltsseite zu verwenden.
-- Vermeiden Sie, wichtige Inhalte innerhalb der Card-Komponente zu platzieren, wenn sich die zugehörigen Aktions-Elemente (Buttons, Links, etc.) nicht innerhalb der gleichen Card befinden.
+# kol-card
 
 <!-- Auto Generated Below -->
 
@@ -73,7 +9,7 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ----------- |
 | `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                          | `false`     |
 | `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                        | `undefined` |
-| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                  | `1`         |
+| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                  | `0`         |
 | `_on`                 | --            | Defines the event callback functions for the component.                                                            | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
 
 

package/doc/combobox.md

@@ -1,81 +1,31 @@
-# Combobox `preview`
-
-Synonyme: Autocomplete, Select, Dropdown
-
-<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.                                                                                                                                |
+# kol-combobox
 
 <!-- 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`     |
-| `_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` |
-| `_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`     |
-| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                                        | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                                                 | `W3CInputValue[]` \| `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` |
+| 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` |
+| `_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`     |
+| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[]` \| `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

package/doc/components.md

@@ -17,7 +17,7 @@ First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tr
 ```ts
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { register } from '@public-ui/components';
-import { DEFAULT } from '@public-ui/themes';
+import { DEFAULT } from '@public-ui/theme-default';
 
 register(DEFAULT, defineCustomElements)
 	.then(() => {