@public-ui/components 1.5.0-rc.10 → 1.5.0-rc.12

package/doc/input-radio-group.md

@@ -11,16 +11,16 @@
 | -------------------- | -------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ |
 | `_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`       |
-| `_disabled`          | `_disabled`    | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                          | `boolean \| 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`  | 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`                                                                    | `''`         |
-| `_id` _(required)_   | `_id`          | Gibt die technische ID des Eingabefeldes an.                                         | `string`                                                                                 | `undefined`  |
+| `_hideLabel`         | `_hide-label`  | Versteckt das sichtbare Label des Elements.                                          | `boolean \| undefined`                                                                   | `undefined`  |
+| `_hint`              | `_hint`        | Gibt den Hinweistext an.                                                             | `string \| undefined`                                                                    | `''`         |
+| `_id`                | `_id`          | Gibt die technische ID des Eingabefeldes an.                                         | `string \| undefined`                                                                    | `undefined`  |
 | `_list` _(required)_ | `_list`        | Gibt die Liste der Optionen für das Eingabefeld an.                                  | `Option<W3CInputValue>[] \| string`                                                      | `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`  |
 | `_orientation`       | `_orientation` | Gibt die Ausrichtung der LinkList an.                                                | `"horizontal" \| "vertical" \| undefined`                                                | `'vertical'` |
-| `_required`          | `_required`    | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                     | `boolean \| 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`      |
 | `_value`             | `_value`       | Gibt den Wert der Radio an.                                                          | `number \| string \| undefined`                                                          | `undefined`  |
@@ -44,9 +44,7 @@ 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-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon

package/doc/input-radio.md

@@ -1,6 +1,6 @@
 # InputRadio
 
-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.
+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.
@@ -38,9 +38,27 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
 [ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];
 ```
 
+### onChange
+
+Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und der Wert des ausgewählten RadioButtons.
+<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
+	_id="anrede"
+	_name="anrede"
+	_list={[
+		{ 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, 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.
 - Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default)
 
 ## Barrierefreiheit
@@ -49,9 +67,9 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
 
 | Taste          | Funktion                                                                                         |
 | -------------- | ------------------------------------------------------------------------------------------------ |
-| `Tab`          | Fokussiert das erste Radio-Element, aktiviert es aber nicht aus.                                 |
+| `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 alle Radio-Elemente und aktivieren das gerade fokussierte Element.                   |
+| `Pfeil-Tasten` | Durchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element.                   |
 
 ## Links und Referenzen
 
@@ -69,16 +87,16 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
 | -------------------- | -------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ |
 | `_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`       |
-| `_disabled`          | `_disabled`    | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                | `boolean \| 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`  | 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`                                                                    | `''`         |
-| `_id` _(required)_   | `_id`          | Gibt die technische ID des Eingabefeldes an.                                               | `string`                                                                                 | `undefined`  |
+| `_hideLabel`         | `_hide-label`  | Versteckt das sichtbare Label des Elements.                                                | `boolean \| undefined`                                                                   | `undefined`  |
+| `_hint`              | `_hint`        | Gibt den Hinweistext an.                                                                   | `string \| undefined`                                                                    | `''`         |
+| `_id`                | `_id`          | Gibt die technische ID des Eingabefeldes an.                                               | `string \| undefined`                                                                    | `undefined`  |
 | `_list` _(required)_ | `_list`        | Gibt die Liste der Optionen für das Eingabefeld an.                                        | `Option<W3CInputValue>[] \| string`                                                      | `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`  |
 | `_orientation`       | `_orientation` | Gibt die Ausrichtung der LinkList an.                                                      | `"horizontal" \| "vertical" \| undefined`                                                | `'vertical'` |
-| `_required`          | `_required`    | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                           | `boolean \| 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`      |
 | `_value`             | `_value`       | Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902) | `number \| string \| undefined`                                                          | `undefined`  |
@@ -106,9 +124,7 @@ 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-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon

package/doc/input-range.md

@@ -7,20 +7,18 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 ### Code
 
 ```html
-<kol-input-range _id="meine_range" _name="meine_range" _min="{100}" _max="{200}" _step="{10}"> Wertebereich </kol-input-range>
+<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>
 ```
 
 ### Beispiel
 
-<kol-input-range _id="meine_range" _name="meine_range" _min={100} _max={200} _step={10}>
-  Wertebereich
-</kol-input-range>
+<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>
 
 ## Verwendung
 
 ### 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
 
@@ -34,33 +32,32 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 ## 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?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
-| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                         | `string`                                                                                                | `undefined` |
-| `_list`            | `_list`          | Gibt die Liste der Vorschlagswörter an.                                              | `Option<number>[] \| string \| undefined`                                                               | `undefined` |
-| `_max`             | `_max`           | Gibt den Maximalwert des Eingabefeldes an.                                           | `number \| undefined`                                                                                   | `undefined` |
-| `_min`             | `_min`           | Gibt den Minimalwert des Eingabefeldes an.                                           | `number \| 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` |
-| `_step`            | `_step`          | Gibt die Schrittweite der Wertveränderung an.                                        | `number \| 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.                                                  | `number \| 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.                                              | `Option<number>[] \| string \| undefined`                                                               | `undefined` |
+| `_max`          | `_max`           | Gibt den Maximalwert des Eingabefeldes an.                                           | `number \| undefined`                                                                                   | `undefined` |
+| `_min`          | `_min`           | Gibt den Minimalwert des Eingabefeldes an.                                           | `number \| 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` |
+| `_step`         | `_step`          | Gibt die Schrittweite der Wertveränderung an.                                        | `number \| 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.                                                  | `number \| undefined`                                                                                   | `undefined` |
 
 
 ## Dependencies
@@ -79,9 +76,7 @@ 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-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon

package/doc/input-text.md

@@ -7,24 +7,22 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 ### Code
 
 ```html
-<kol-input-text _type="text" _id="mein_text" _name="mein_text"> Texteingabe </kol-input-text>
+<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
+<kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
+<kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
 ```
 
 ### Beispiel
 
-<kol-input-text _type="text" _id="mein_text" _name="mein_text">
-Texteingabe
-</kol-input-text>
-
-<kol-input-text _type="text" _id="mein_text" _name="mein_text" _disabled>
-Texteingabe
-</kol-input-text>
+<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
+<kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
+<kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
 
 ## Verwendung
 
 ### 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
 
@@ -45,31 +43,31 @@ Texteingabe
 
 ## 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?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `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` |
-| `_maxLength`       | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                    | `number \| 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` |
-| `_pattern`         | `_pattern`       | Gibt ein Prüfpattern für das Eingabefeld an.                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_readOnly`        | `_read-only`     | Gibt an, ob die Eingabefeld nur lesend ist.                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_required`        | `_required`      | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                         | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_size`            | `_size`          | Gibt an, wie viele Zeichen man eingeben kann.                                                            | `number \| 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; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| 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`     |
-| `_type`            | `_type`          | Gibt an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist.                                     | `"search" \| "tel" \| "text" \| "url" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'text'`    |
-| `_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` |
+| `_maxLength`    | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                    | `number \| 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` |
+| `_pattern`      | `_pattern`       | Gibt ein Prüfmuster für das Eingabefeld an.                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_placeholder`  | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_readOnly`     | `_read-only`     | Setzt das Eingabefeld in den schreibgeschützten Modus.                                                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_required`     | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_size`         | `_size`          | Setzt die Breite des Eingabefeldes in Buchstabenbreiten.                                                 | `number \| 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?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| 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`     |
+| `_type`         | `_type`          | Gibt an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist.                                     | `"search" \| "tel" \| "text" \| "url" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'text'`    |
+| `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
 
 
 ## Dependencies
@@ -88,9 +86,7 @@ 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-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon

package/doc/kolibri.md

@@ -7,15 +7,20 @@ Diese Komponente implementiert das KoliBri-Logo.
 ### Code
 
 ```html
-<kol-kolibri _animate _labled />
+<kol-kolibri />
+<kol-kolibri _animate />
+<kol-kolibri _animate _labeled="false" />
+<kol-kolibri _labeled="false" />
 ```
 
 ## Beispiele
 
-<kol-kolibri />
-<kol-kolibri _animate />
-<kol-kolibri _animate _labled="false" /> 
-<kol-kolibri _labled="false" />
+<div style="display: flex; justify-content: flex-start">
+  <kol-kolibri />
+  <kol-kolibri _animate />
+  <kol-kolibri _animate _labeled="false" /> 
+  <kol-kolibri _labeled="false" />
+</div>
 
 ## Barrierefreiheit
 

package/doc/link-button.md

@@ -1,12 +1,7 @@
 # LinkButton
 
 Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
-
-Einen Link kann man nicht deaktivieren und daher gibt es bei einem LinkButton nicht das Property `_disabled`.
-
-Da es die Komponente ButtonLink gibt, die semantisch ein Button und optisch ein Link ist. Ist es nicht mehr notwendig den Click-Callback zu unterstützen. Das Property `_on` wird somit als `deprecated` markiert und wird mit dem nächsten Major-Release entfernt.
-
-Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.). Damit der LinkButton das optisch gleich aussehen kann, wurden die Properties `_customClass` und `_variant` von der Button-Komponente übernommen.
+Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
 
 ## Konstruktion
 
@@ -45,16 +40,16 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
 | `_customClass`        | `_custom-class`       | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                                                                                               | `string \| undefined`                                                                  | `undefined`                         |
 | `_disabled`           | `_disabled`           | Gibt an, ob der Link deaktiviert ist.                                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                 | `false`                             |
 | `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                                                                                                       | `string`                                                                               | `undefined`                         |
-| `_icon`               | `_icon`               | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                                                                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                   | `undefined`                         |
+| `_icon`               | `_icon`               | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                   | `undefined`                         |
 | `_iconOnly`           | `_icon-only`          | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean \| undefined`                                                                 | `false`                             |
-| `_label` _(required)_ | `_label`              | Gibt einen beschreibenden Text für das Text-Element an.                                                                                                                                                                                                                               | `string`                                                                               | `undefined`                         |
+| `_label` _(required)_ | `_label`              | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                               | `undefined`                         |
 | `_on`                 | --                    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                          | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }`    | `undefined`                         |
-| `_role`               | `_role`               | Gibt an, welche Role der Schalter hat.                                                                                                                                                                                                                                                | `"button" \| "link" \| "tab" \| undefined`                                             | `undefined`                         |
+| `_role`               | `_role`               | Setzt die Role der Schaltfläche.                                                                                                                                                                                                                                                      | `"button" \| "link" \| "tab" \| undefined`                                             | `undefined`                         |
 | `_tabIndex`           | `_tab-index`          | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number \| undefined`                                                                  | `undefined`                         |
-| `_target`             | `_target`             | Definiert das Verhalten, bei dem der Link geöffnet werden soll.                                                                                                                                                                                                                       | `string \| undefined`                                                                  | `undefined`                         |
+| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                                                                                                                             | `string \| undefined`                                                                  | `undefined`                         |
 | `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                                                                                                      | `string \| undefined`                                                                  | `translate('kol-open-link-in-tab')` |
 | `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                  | `'right'`                           |
-| `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Button hat.                                                                                                                                                                                                                                            | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined` | `'normal'`                          |
+| `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Link-Button hat.                                                                                                                                                                                                                                       | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined` | `'normal'`                          |
 
 
 ## Dependencies
@@ -71,11 +66,7 @@ graph TD;
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-tooltip --> kol-span-wc
   style kol-link-button fill:#f9f,stroke:#333,stroke-width:4px
 ```