@public-ui/components 1.5.0-rc.8 → 1.5.0

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.
@@ -56,22 +52,22 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 | 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` |
+| `_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"` |             |
+| 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)
@@ -84,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

@@ -1,12 +1,14 @@
 # Image
 
+> <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 **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 +16,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
 
-### Best practices
+<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>
+
+## 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 +55,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,10 +35,6 @@ 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 -->
 
 

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,26 +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` |
+| 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
@@ -95,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
 ```
 

package/doc/input-color.md

@@ -1,18 +1,18 @@
 # InputColor
 
-Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Angabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
+Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#ff0000"> Hintergrundfarbe </kol-input-color>
+<kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4"> Hintergrundfarbe </kol-input-color>
 ```
 
 ### Beispiel
 
-<kol-input-color  _id="meine_farbe" _name="meine_farbe" _value="#ff0000">Hintergrundfarbe</kol-input-color>
+<kol-input-color  _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4">Hintergrundfarbe</kol-input-color>
 
 ## Verwendung
 
@@ -20,7 +20,7 @@ Stellen Sie die Default-Farbe über das Attribut `_value` ein. Verwenden Sie hie
 
 ### Best practices
 
-- Achten Sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
 
 ## Barrierefreiheit
 
@@ -28,46 +28,43 @@ Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei
 
 Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
 
-Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
-
 ### Tastatursteuerung
 
 | Taste                           | Funktion                                                                                                                                    |
 | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
 | `Tab`                           | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld kann mit der Tab-Taste zwischen den Steuerfeldern gewechselt werden.                  |
 | `Enter`                         | Öffnet bzw. schließt das Dialogfeld der Komponente. Bei fokussierter Pipette wird mit der Enter-Taste die Funktion **_Pipette_** gestartet. |
-| `ESC`                           | Beendet die Pipetten-Funktion. .                                                                                                            |
+| `ESC`                           | Beendet die Pipettenfunktion. Schließt das Dialogfeld, wenn die Pipettenfunktion nicht aktiv ist.                                           |
 | `Pfeil-Tasten (rechts / links)` | Verschieben bei fokussiertem Feld **_Farbspektrum_** den Auswahlpunkt.                                                                      |
 | `Pfeil-Tasten (oben   / unten)` | Ändert bei fokussiertem Feld **_Farbsystem_** die Auswahl.                                                                                  |
 
 ## Links und Referenzen
 
 - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
-- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
 
 <!-- Auto Generated Below -->
 
 
 ## 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`      |
-| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                             | `"off" \| "on" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_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 Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
-| `_list`            | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                  | `string \| string[] \| 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` |
-| `_smartButton`     | --               | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _accessKey?: string \| undefined; _disabled?: boolean \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| 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`     |
-| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
+| 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`      |
+| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                             | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_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 Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
+| `_id`           | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
+| `_list`         | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                  | `string` \| `string[]` \| `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` |
+| `_smartButton`  | --               | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _ariaLabel?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Alignment` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Alignment` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `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`     |
+| `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 
 
 ## Dependencies
@@ -86,12 +83,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-color fill:#f9f,stroke:#333,stroke-width:4px
 ```