@public-ui/components 1.5.0-rc.2 → 1.5.0-rc.21

package/doc/icon.md

@@ -1,14 +1,10 @@
 # Icon
 
-Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut `_icon` gesteuert werden und erfolgt durch das Attribut `_aria-label` barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
+Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_aria-label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
 
-Folgende Icon-Fonts werden _`out-of-the-box`_ unterstützt.
+Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-link> unterstützt.
 
-- [Codicons]
-- [Font-Awesome]
-- [Icofont]
-
-<kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateien der Icon-Fonts eingebunden sind.</kol-alert>
+<kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>
 
 ## Konstruktion
 
@@ -24,9 +20,13 @@ Die Komponente **Icon** wird über das HTML-Tag `kol-icon` erzeugt.
 
 <kol-icon _aria-label="Zu Hause" _icon="codicon codicon-home"></kol-icon>
 
-## Verwendung
+### Icon
+
+Das Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
+Als String übergeben Sie die Iconklasse (z.B.: `_icon="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.
 
-### Best practices
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
 
 ## Barrierefreiheit
 
@@ -34,10 +34,6 @@ Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
 
 - https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
 
-### Aria-Hidden
-
-Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.
-
 ### Aria-Label
 
 Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschriftet werden.
@@ -53,18 +49,25 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                                                                                                                                                                               | Type                  | Default     |
-| ------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `_ariaLabel` _(required)_ | `_aria-label` | Gibt das Aria-Label am Icon an.                                                                                                                                                                                                           | `string`              | `undefined` |
-| `_icon` _(required)_      | `_icon`       | Gibt einen Identifier eines Icons aus den Icon's an.                                                                                                                                                                                      | `string`              | `undefined` |
-| `_part`                   | `_part`       | <span class="text-red-500">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) /** | `string \| undefined` | `undefined` |
+| Property                  | Attribute     | Description                                                                                                                                                                                                                           | Type                  | Default     |
+| ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `_ariaLabel` _(required)_ | `_aria-label` | Gibt das Aria-Label am Icon an.                                                                                                                                                                                                       | `string`              | `undefined` |
+| `_icon` _(required)_      | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                                           | `string`              | `undefined` |
+| `_part`                   | `_part`       | <span class="text-red-500">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) | `string` \| `undefined` | `undefined` |
+
+
+## Shadow Parts
+
+| Part     | Description                               |
+| -------- | ----------------------------------------- |
+| `"icon"` | Ermöglicht das Styling des inneren Icons. |
 
 
 ## Dependencies
 
 ### Used by
 
- - [kol-alert](../alert)
+ - [kol-alert-wc](../alert)
  - [kol-breadcrumb](../breadcrumb)
  - [kol-details](../details)
  - [kol-icon-font-awesome](../icon-font-awesome)
@@ -77,7 +80,7 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 ### Graph
 ```mermaid
 graph TD;
-  kol-alert --> kol-icon
+  kol-alert-wc --> kol-icon
   kol-breadcrumb --> kol-icon
   kol-details --> kol-icon
   kol-icon-font-awesome --> kol-icon

package/doc/image.md

@@ -4,9 +4,9 @@ Die **Image**-Komponente dient dazu, Bilder darzustellen.
 
 ## Konstruktion
 
-Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
+Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
 
-### Code Beispiele
+### Code
 
 ```html
 <kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
@@ -14,27 +14,34 @@ Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
 <kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
 ```
 
-## Verwendung
+### Beispiele
+
+<kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
+<kol-image _src="nur-dekoratives-bild.jpg" _alt=""></kol-image>
+<kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
 
-### Best practices
+## Verwendung
 
-#### \_srcset
+### Bilder in unterschiedlicher Auflösung und/oder Seitenverhältnis
 
-Mittels `_srcset` (und `_sizes`) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
-Desweiteren können mittels `_srcset` auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
-Auch bei Verwendung von `_srcset` sollte `_src` genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) `srcset` nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
-Für weitere Infos zu `_srcset` siehe [Links und Referenzen](#links-und-referenzen)
+Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
+Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
+Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _label="MDN Artikel zu srcset"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _label="MDN Artikel zu sizes"></kol-link>
+Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
 
-#### \_loading
+### Ladeverhalten
 
-Dieses Attribut ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
+Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
 `eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _label="MDN Artikel zu loading"></kol-link>
 
 ## Barrierefreiheit
 
-### \_alt
+### Alternativtext
 
-Dieses Attribut ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
+Das Attribut **`_alt`** ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
 Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt, wenn das Bild nicht geladen werden kann/soll.
 
 ## Links und Referenzen
@@ -46,13 +53,13 @@ Ausführliche Erklärung zu `_srcset` und `_sizes`: https://www.mediaevent.de/ht
 
 ## Properties
 
-| Property            | Attribute  | Description                                               | Type                             | Default     |
-| ------------------- | ---------- | --------------------------------------------------------- | -------------------------------- | ----------- |
-| `_alt` _(required)_ | `_alt`     | Gibt den alternativen Text an.                            | `string`                         | `undefined` |
-| `_loading`          | `_loading` | Gibt den Lademodus an.                                    | `"eager" \| "lazy" \| undefined` | `'lazy'`    |
-| `_sizes`            | `_sizes`   | ...                                                       | `string \| undefined`            | `undefined` |
-| `_src` _(required)_ | `_src`     | Gibt die Quell-URL an.                                    | `string`                         | `undefined` |
-| `_srcset`           | `_srcset`  | Gibt eine Liste von Quell-URLs mit Breiten der Bilder an. | `string \| undefined`            | `undefined` |
+| Property            | Attribute  | Description                                                               | Type                             | Default     |
+| ------------------- | ---------- | ------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `_alt` _(required)_ | `_alt`     | Setzt den alternativen Text.                                              | `string`                         | `undefined` |
+| `_loading`          | `_loading` | Setzt den Lademodus.                                                      | `"eager"` \| `"lazy"` \| `undefined` | `'lazy'`    |
+| `_sizes`            | `_sizes`   | Setzt Größen für unterschiedliche Auflösungen, unterstützend für _srcset. | `string` \| `undefined`            | `undefined` |
+| `_src` _(required)_ | `_src`     | Setzt die Quell-URL des Bildes.                                           | `string`                         | `undefined` |
+| `_srcset`           | `_srcset`  | Setzt eine Liste von Quell-URLs mit Breiten der Bilder.                   | `string` \| `undefined`            | `undefined` |
 
 
 ----------------------------------------------

package/doc/indented-text.md

@@ -1,8 +1,6 @@
 # IndentedText
 
-Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate.
-
-In der Komponente kann beliebiger HTML-Code verwendet werden.
+Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die <kol-link _href="/docs/components/quote/" _label="kol-quote-Komponente"></kol-link> verwendet werden.).
 
 ## Konstruktion
 
@@ -37,38 +35,9 @@ Die Komponente besitzt keine weiteren Attribute. Der hervorzuhebende Text wird z
 
 Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informationen optisch hervorzuheben.
 
-## Barrierefreiheit
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
-
-
 ## Dependencies
 
 ### Used by

package/doc/input-adapter-leanup.md

@@ -17,15 +17,14 @@
 graph TD;
   kol-input-adapter-leanup --> kol-alert
   kol-input-adapter-leanup --> kol-link
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon

package/doc/input-checkbox.md

@@ -2,8 +2,6 @@
 
 Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.
 
-Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch_** dar. Hierbei wird die Checkbox zu einem Schieberegler gewandelt, der bei Anklicken nach rechts (aktiv) bzw. nach links (inaktiv) verschoben wird.
-
 ## Konstruktion
 
 ### Code
@@ -26,15 +24,21 @@ Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch
 
 Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.
 
+### Varianten
+
+Mittels des Attributs **`_variant`** können folgende Varianten ausgewählt werden (Beispiele siehe oben):
+
+- `button`: wechselt das Icon je nach Zustand (Beispiel 3+4)
+- `switch`: verwandelt die Checkbox in einen horizontalen Schalter, hierbei gilt rechts als aktiv und links als inaktiv. (Beispiel 2)
+
 ### Best practices
 
 - Verwenden Sie eine einzelne Checkbox, wenn Sie von den Nutzer:innen eine einfach Bestätigung wünschen, z.B. Akzeptieren der Datenschutzerklärung.
 - Verwenden Sie eine Gruppe von Checkboxen, um den Nutzer:innen die Möglichkeit zu geben einen oder mehrere Werte auszuwählen.
-- Vermeiden Sie zu viele Checkboxen, da hierdurch die Übersichtlichkeit verloren geht. Verwenden Sie in diesem Fall eine Select-Box.
 
 ## Barrierefreiheit
 
-Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <a href="?path=/story/react-select-beschreibung--page">Select-Box</a>.
+Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <kol-link _href="/docs/components/select">Select-Box mit **`_multiple`**</kol-link>.
 
 Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
 
@@ -55,51 +59,26 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Properties
 
-| Property           | Attribute        | Description                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                          | Default     |
-| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `true`      |
-| `_checked`         | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht.                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                         | `''`        |
-| `_icon`            | `_icon`          | Ermöglicht das Überschreiben der Icons für die Checkbox.                                                                                          | `string \| undefined \| { checked: string; indeterminate?: string \| undefined; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate: string; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate?: string \| undefined; unchecked: string; }` | `undefined` |
-| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string`                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_indeterminate`   | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                      | `undefined` |
-| `_required`        | `_required`      | Gibt an, ob die Checkbox ein Pflichtfeld ist.                                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_type`            | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
-| `_value`           | `_value`         | Gibt den Wert der Checkbox an.                                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_variant`         | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
-
-
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
+| Property         | Attribute        | Description                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                          | Default     |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`     | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_alert`         | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `true`      |
+| `_checked`       | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden)                                                             | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_disabled`      | `_disabled`      | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.                                                                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_error`         | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`     | `_hide-label`    | Versteckt das sichtbare Label des Elements.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_hint`          | `_hint`          | Gibt den Hinweistext an.                                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `''`        |
+| `_icon`          | `_icon`          | Ermöglicht das Überschreiben der Icons für die Checkbox.                                                                                          | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
+| `_id`            | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_indeterminate` | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_name`          | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_on`            | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                      | `undefined` |
+| `_required`      | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_tabIndex`      | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_touched`       | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_type`          | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
+| `_value`         | `_value`         | Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_variant`       | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
 
 
 ## Dependencies
@@ -120,12 +99,11 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-tooltip --> kol-span-wc
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-input-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```