@public-ui/components 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0 → 4.0.0-alpha.0

package/doc/input-checkbox.md

@@ -1,81 +1,4 @@
-# Checkbox
-
-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.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-checkbox _label="false">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung"></kol-link> zu.</kol-input-checkbox>
-<kol-input-checkbox _variant="switch" _label="Geburtsdatum anzeigen?"></kol-input-checkbox>
-<kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
-<kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
-```
-
-### Beispiel
-
-<kol-input-checkbox _label="false">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung"></kol-link> zu.</kol-input-checkbox>
-<kol-input-checkbox _variant="switch" _label="Geburtsdatum anzeigen?"></kol-input-checkbox>
-<kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
-<kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                            | Value                                               |
-| -------- | ------------------------------------------------------------------- | --------------------------------------------------- |
-| onFocus  | Element wird fokussiert                                             | -                                                   |
-| onInput  | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event)  | Definierter `_value` wenn aktiv, andernfalls `null` |
-| onChange | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
-| onBlur   | Element verliert Fokus                                              | -                                                   |
-
-## Verwendung
-
-Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.
-
-### 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.
-
-## 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 <kol-link _href="/docs/components/select" _label="/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.
-
-### Tastatursteuerung
-
-| Taste  | Funktion                                                                                                           |
-| ------ | ------------------------------------------------------------------------------------------------------------------ |
-| `Tab`  | Fokussiert die Checkbox bzw. ermöglicht den Wechsel zwischen Checkboxen einer Liste.                               |
-| `Leer` | Aktiviert bzw. deaktiviert die Checkbox. Der Zustand **_Indeterminate_** ist über die Tastatur nicht herzustellen. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#checkbox" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-checkbox
 
 <!-- Auto Generated Below -->
 

package/doc/input-color.md

@@ -1,47 +1,4 @@
-# InputColor
-
-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 _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
-```
-
-### Beispiel
-
-<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
-
-## Verwendung
-
-Stellen Sie die Default-Farbe über das Attribut `_value` ein. Verwenden Sie hierfür eine hexadezimale Schreibweise (#xxxxxx).
-
-### Best practices
-
-- Achten Sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei ist. Die Auswahl einer Farbe ist über Tastatursteuerung möglich. Die Ausgabe der gewählten Farbe über Screenreader ist jedoch technisch eingeschränkt.  
-Siehe auch: [https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md#input-color](Known Issues).
-
-Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
-
-### 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 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
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-color
 
 <!-- Auto Generated Below -->
 

package/doc/input-date.md

@@ -1,102 +1,4 @@
-# InputDate
-
-Synonyme: Date Picker, Datetime Picker, Week Picker Month Picker, Time Picker, Calendar
-
-Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>
-```
-
-### Beispiel
-
-<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>
-
-#### Datum entfernen
-
-Folgendes Beispiel zeigt eine Component in React, die die Möglichkeit bietet über einen Button den Wert im Datumsfeld zu entfernen.
-
-```jsx
-const ClearableDateInput = () => {
-  const [value, setValue] = useState<Date>();
-  return (
-    <>
-        <KolInputDate
-          _label="Lorem ipsum dolor sit"
-          _value={value}
-          _on={{ onChange: (_, v: Date) => setValue(v) }}
-        />
-        {/* Set null as value to clear the inputs value. */}
-        <KolButton _on={{ onClick: () => setValue(null) }} _label="Clear" />
-    </>
-  );
-};
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                | Value                                 |
-| -------- | ----------------------------------------------------------------------- | ------------------------------------- |
-| onFocus  | Element wird fokussiert                                                 | -                                     |
-| onClick  | Element wird angeklickt                                                 | -                                     |
-| onInput  | Datum wird gesetzt bzw. ändert sich (entspricht nativem `input`-Event)  | Eingegebenes Datum als ISO8601 String |
-| onChange | Datum wird gesetzt bzw. ändert sich (entspricht nativem `change`-Event) | Eingegebenes Datum als ISO8601 String |
-| onBlur   | Element verliert Fokus                                                  | -                                     |
-
-## Verwendung
-
-Die **InputDate**-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.
-
-<kol-alert _type="info">Beachten Sie, dass im **Firefox** nicht alle **`_types`** der **InputDate**-Komponente funktional sind. Es werden bei den Typen `month`, `time` und `week` keine Auswahldialoge angezeigt.</kol-alert>
-
-Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-Die Icons in der Komponente sind per Tab-Taste nicht erreichbar. Die Auswahlhilfen der Komponente werden über die **Leertaste** geöffnet. So erhalten Sie beispielsweise beim Typ **date** ein Kalendermodul, über das per Maus oder über die Tastatur das gewünschte Datum ausgewählt werden kann. Die manuelle Eingabe der Werte ist alternativ möglich.
-
-### Tastatursteuerung
-
-Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Datum, Uhrzeit u.a). Mit der `Tab`-Taste wird der Fokus auf das Eingabefeld gesetzt. Anschließend kann mittels der `Leer`-Taste das gerätespezifische Auswahldialog geöffent werden.
-
-> Hinweis: Wir haben in unseren Tests festgestellt, dass es je nach Browser-Version manchmal möglich ist, das Kalender-Icon anzufokusieren und mal nicht. Ohne das sich die Implementierung der Komponente geändert hat. Warum das so ist ist uns noch nicht bekannt. Nichtsdestotrotz ist das Öffnen des Auswahldialogs immer mittels der `Leer`-Taste möglich.
-
-| Taste                           | Funktion                                                                                                                                                                                                                                                        |
-| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`                           | Fokussiert das Eingabefeld. Nach erhalt des Fokus wechselt die `Tab`-Taste durch die Eingabebereiche. Danach erst wechselt die `Tab`-Taste zum nächsten Eingabefeld.                                                                                            |
-| `Leer`                          | Wenn das Eingabefeld fokussiert ist, kann im Browser mit der `Leer`-Taste ein Auswahldialog aufgerufen bzw. geschlossen werden. Die Navigation und Auswahl erfolgt hier mit Hilfe der `Tab`-Taste, der `Pfeil`-Tasten und der Bestätigung mittes `Enter`-Taste. |
-| `Pfeil-Tasten (links / rechts)` | Wenn das Eingabefeld fokussiert ist, kann mit den `Pfeil`-Tasten zwischen den Eingabebereichen gewechselt werden.                                                                                                                                               |
-| `Pfeil-Tasten (oben / unten)`   | Wenn ein Eingabebereich aktiviert ist, können mit den `Pfeil`-Tasten oben und unten die Werte verändert werden.                                                                                                                                                 |
-| `Esc`                           | Ist ein Auswahldialog verfügbar, kann dieser alternativ zur `Leer`-Taste oder auch mit der `Esc`-Taste geschlossen werden.                                                                                                                                      |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/2012/WD-html-markup-20120329/input.date.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" _target="_blank"></kol-link>
-- <kol-link _href="https://a11ysupport.io/tech/html/input(type-date)_element" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-date
 
 <!-- Auto Generated Below -->
 

package/doc/input-email.md

@@ -1,68 +1,4 @@
-# InputEmail
-
-Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-email _label="E-Mail-Adresse" _icons='{"right": "codicon codicon-mail"}'></kol-input-email>
-```
-
-### Beispiel
-
-<kol-input-email _label="E-Mail-Adresse" _icons='{"right": "codicon codicon-mail"}'></kol-input-email>
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-## Verwendung
-
-Setzen Sie die **InputEmail**-Komponente auf Formularen ein, wenn dort die Eingabe einer oder mehrerer E-Mail-Adressen erforderlich ist.
-
-Standardmäßig ist die Komponente für die Erfassung einer einzelnen E-Mail-Adresse vorgesehen. Setzen Sie das Attribut **`_multiple`**, um mehrere E-Mail-Adressen zu erfassen. Trennen Sie die einzelnen E-Mail-Adressen mit einem Komma (,) voneinander.
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-Eine Validierung der erfassten E-Mail-Adressen innerhalb der Komponente erfolgt nicht.
-Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error`** mit der entsprechenden Fehlermeldung, diese wird dann via **kol-alert** unterhalb angezeigt.
-
-### Tastatursteuerung
-
-| Taste | Funktion                    |
-| ----- | --------------------------- |
-| `Tab` | Fokussiert das Eingabefeld. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
-- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
+# kol-input-email
 
 <!-- Auto Generated Below -->
 

package/doc/input-file.md

@@ -1,67 +1,4 @@
-# InputFile
-
-Synonyme: Upload, File Uploader, File Picker, File Selector
-
-Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                        | Value                           |
-| -------- | ------------------------------------------------------------------------------- | ------------------------------- |
-| onFocus  | Element wird fokussiert                                                         | -                               |
-| onClick  | Element wird angeklickt                                                         | -                               |
-| onInput  | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event)  | Ausgwählte Dateien als FileList |
-| onChange | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
-| onBlur   | Element verliert Fokus                                                          | -                               |
-
-### Beispiel
-
-<kol-input-file _label="Bild hochladen" _accept="image/png, image/jpeg, application/pdf" _icons='{"right": "codicon codicon-device-camera"}'></kol-input-file>
-
-## Verwendung
-
-Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erlaubt sind. Wird das Attribut nicht oder leer übergeben, sind alle Dateitypen erlaubt.
-Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" _target="_blank" _label="MDN Artikel zum Attribut accept"></kol-link>.
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-- Lassen Sie nur die Dateitypen zum Upload zu, die für die Programmausführung benötigt werden. Eine fehlende Einschränkung der hochladbaren Dateitypen kann ein erhebliches Sicherheitsrisiko sein.
-- Begrenzen Sie die Größe der Dateien, die Sie zum Upload zulassen möchten.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste | Funktion                                                        |
-| ----- | --------------------------------------------------------------- |
-| `Tab` | Fokussiert das Eingabefeld und ruft den Dateiauswahldialog auf. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-file
 
 <!-- Auto Generated Below -->
 

package/doc/input-number.md

@@ -1,59 +1,4 @@
-# InputNumber
-
-Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-number _value="74" _label="ZAHL!" _icons='{"right": "codicon codicon-dashboard"}'></kol-input-number>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-### Beispiel
-
-<kol-input-number _value="74" _label="ZAHL!" _icons='{"right": "codicon codicon-dashboard"}'></kol-input-number>
-
-## Verwendung
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-### Tastatursteuerung
-
-| Taste                         | Funktion                                                                                                                                             |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`                         | Fokussiert das Eingabefeld.                                                                                                                          |
-| `Pfeil-Tasten (oben / unten)` | Erhöht oder verringert den Wert innerhalb der Attribute **`_min`** und **`_max`** entsprechend der im Attribut **`_step`** angegebenen Schrittgröße. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-number
 
 <!-- Auto Generated Below -->
 

package/doc/input-password.md

@@ -1,60 +1,4 @@
-# InputPassword
-
-Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert.
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-password _label="Passwort" _smartButton='{"_icons": "codicon codicon-eye", "_hideLabel": true, "_label": "Passwort anzeigen"}'></kol-input-password>
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                                                     | Value                        |
-| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
-| onFocus  | Element wird fokussiert                                                                      | -                            |
-| onClick  | Element wird angeklickt                                                                      | -                            |
-| onInput  | Eine Eingabe erfolgt (entspricht nativem `input`-Event)                                      | Eingegebener Wert als String |
-| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
-| onBlur   | Element verliert Fokus                                                                       | -                            |
-
-### Beispiel
-
-<kol-input-password _label="Passwort" _smartButton='{"_icons": "codicon codicon-eye", "_hideLabel": true, "_label": "Passwort anzeigen"}'></kol-input-password>
-
-## Verwendung
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste | Funktion                    |
-| ----- | --------------------------- |
-| `Tab` | Fokussiert das Eingabefeld. |
-
-## Links und Referenzen
-
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-password
 
 <!-- Auto Generated Below -->
 

package/doc/input-radio.md

@@ -1,100 +1,4 @@
-# InputRadio
-
-Synonyme: Choice Group, Radio Buttons
-
-Die Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.
-
-<kol-alert _alert _heading="Hinweis" _level="1" _type="info">
-  Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.
-</kol-alert><br/>
-
-## Konstruktion
-
-### Code
-
-```html
-<kol-input-radio _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'></kol-input-radio>
-```
-
-### Beispiel
-
-<kol-input-radio _options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'></kol-input-radio>
-
-## Verwendung
-
-Die einzelnen Radio-Elemente innerhalb der Komponente ** InputRadio** werden über dass Attribut **_\_options_** als JSON-Objekt übergeben.
-
-Das JSON-Objekt erwartet je Radio-Element folgende Werte:
-
-**`label`** = Beschriftung des Radio-Elements
-
-**`value`** = Wert des Radio-Elements
-
-Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
-
-```html
-[ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];
-```
-
-### Events
-
-Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
-
-```js
-kolibriElement._on = {
-	onFocus: (event) => {
-		/* Do something on focus */
-	},
-	onInput: (event, value) => {
-		/* Do something with value or event */
-	},
-	// ...
-};
-```
-
-| Event    | Auslöser                                                        | Value                       |
-| -------- | --------------------------------------------------------------- | --------------------------- |
-| onFocus  | Eine Option wird fokussiert                                     | -                           |
-| onInput  | Eine Option wird ausgewählt (entspricht nativem `input`-Event)  | `value`-Attribut der Option |
-| onChange | Eine Option wird ausgewählt (entspricht nativem `change`-Event) | `value`-Attribut der Option |
-| onBlur   | Eine Option verliert Fokus                                      | -                           |
-
-### onChange
-
-<kol-alert _heading="Hinweis für Versionen <2" _type="info">event.target.value enthält die Nummer der Checkbox mit einem '-' davor.</kol-alert>
-
-```jsx
-<kol-input-radio
-	_options={[
-		{ label: 'Herr', value: 'Herr' },
-		{ label: 'Frau', value: 'Frau' },
-		{ label: 'Firma', value: 'Firma' },
-	]}
-	_on={{ onChange: (_event, value) => setValue(value) }}
-></kol-input-radio>
-```
-
-### Best practices
-
-- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-- Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. (<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default" _target="_blank"></kol-link>)
-
-## Barrierefreiheit
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                         |
-| -------------- | ------------------------------------------------------------------------------------------------ |
-| `Tab`          | Fokussiert das erste Radio-Element, aktiviert es aber nicht.                                     |
-| `Leer`         | Aktiviert das erste Radio-Element, nachdem die RadioGroup über die Tab-Taste angesprungen wurde. |
-| `Pfeil-Tasten` | Durchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element.                   |
-
-## Links und Referenzen
-
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3schools.com/tags/att_input_type_radio.asp" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+# kol-input-radio
 
 <!-- Auto Generated Below -->