@public-ui/components 1.6.0-rc.2 → 1.6.0-rc.20

package/doc/input-password.md

@@ -7,14 +7,14 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 ### Code
 
 ```html
-<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _iconOnly: true, _label: 'Passwort anzeigen' }">
+<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _hideLabel_: true, _label: 'Passwort anzeigen' }">
 	Passwort
 </kol-input-password>
 ```
 
 ### Beispiel
 
-<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _iconOnly: true, _label: 'Passwort anzeigen' }">
+<kol-input-password _id="main_passwort" _name="main_passwort" _smartButton="{ _icon: 'codicon codicon-eye', _hideLabel_: true, _label: 'Passwort anzeigen' }">
   Passwort
 </kol-input-password>
 
@@ -34,37 +34,39 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 
 ## Links und Referenzen
 
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default     |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `true`      |
-| `_autoComplete`       | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                                                                         | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
-| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `''`        |
-| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_maxLength`          | `_max-length`    | Gibt an, wie viele Zeichen maximal eingegeben werden können.                                                                                         | `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 (Pattern) 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?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `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 das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_touched`            | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `false`     |
-| `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |
+| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `true`      |
+| `_autoComplete`       | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                                                                         | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_hasCounter`         | `_has-counter`   | Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `''`        |
+| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_maxLength`          | `_max-length`    | Gibt an, wie viele Zeichen maximal eingegeben werden können.                                                                                         | `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 (Pattern) 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`        | `_smart-button`  | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaLabel?: string` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
+| `_touched`            | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `false`     |
+| `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Slots
@@ -79,11 +81,13 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 ### Depends on
 
 - kol-input
+- [kol-tooltip](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-input-password --> kol-input
+  kol-input-password --> kol-tooltip
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert

package/doc/input-radio-group.md

@@ -16,7 +16,7 @@
 | `_hideLabel`          | `_hide-label`  | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                   | `undefined`  |
 | `_hint`               | `_hint`        | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                    | `''`         |
 | `_id`                 | `_id`          | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                    | `undefined`  |
-| `_label` _(required)_ | `_label`       | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                 | `undefined`  |
+| `_label` _(required)_ | `_label`       | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `string`                                                                      | `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`  |
@@ -38,6 +38,7 @@
 graph TD;
   kol-input-radio-group --> kol-input-radio
   kol-input-radio --> kol-input
+  kol-input-radio --> kol-tooltip
   kol-input-radio --> kol-alert
   kol-input --> kol-icon
   kol-input --> kol-button-wc

package/doc/input-radio.md

@@ -14,17 +14,17 @@ Die Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und
 <kol-input-radio
 	_id="anrede"
 	_name="anrede"
-	_list='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
+	_options='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'
 ></kol-input-radio>
 ```
 
 ### Beispiel
 
-<kol-input-radio _id="anrede" _name="anrede" _list='[{"label":"Herr","value":"Herr"},{"label":"Frau","value":"Frau"}, {"label":"Firma","value":"Firma"}]'></kol-input-radio>
+<kol-input-radio _id="anrede" _name="anrede" _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 **_\_list_** als JSON-Objekt übergeben.
+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:
 
@@ -47,7 +47,7 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 <kol-input-radio
 	_id="anrede"
 	_name="anrede"
-	_list={[
+	_options={[
 		{ label: 'Herr', value: 'Herr' },
 		{ label: 'Frau', value: 'Frau' },
 		{ label: 'Firma', value: 'Firma' },
@@ -59,7 +59,7 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 ### 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. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default)
+- 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" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default" _target="_blank"></kol-link>)
 
 ## Barrierefreiheit
 
@@ -73,34 +73,36 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#radiobutton
-- https://www.w3schools.com/tags/att_input_type_radio.asp
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" _label="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" _label="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" _label="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" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute      | Description                                                                                                                                          | Type                                                                                     | Default      |
-| --------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`          | `_access-key`  | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                    | `undefined`  |
-| `_alert`              | `_alert`       | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                   | `true`       |
-| `_disabled`           | `_disabled`    | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_error`              | `_error`       | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                    | `undefined`  |
-| `_hideLabel`          | `_hide-label`  | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_hint`               | `_hint`        | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                    | `''`         |
-| `_id`                 | `_id`          | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                    | `undefined`  |
-| `_label` _(required)_ | `_label`       | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                 | `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 horizontale oder vertikale Ausrichtung der Komponente an.                                                                                   | `"horizontal"` \| `"vertical"` \| `undefined`                                                | `'vertical'` |
-| `_required`           | `_required`    | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                       | `boolean` \| `undefined`                                                                   | `undefined`  |
-| `_tabIndex`           | `_tab-index`   | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `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`  |
+| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                     | Default      |
+| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                    | `undefined`  |
+| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                   | `true`       |
+| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                    | `undefined`  |
+| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                    | `''`         |
+| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                    | `undefined`  |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `string`                                                                      | `undefined`  |
+| `_list`               | `_list`          | <span class="text-red-500">**[DEPRECATED]**</span> Use _options.<br/><br/>Gibt die Liste der Optionen für das Eingabefeld an.                           | `Option<W3CInputValue>[]` \| `string` \| `undefined`                                         | `undefined`  |
+| `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `string` \| `undefined`                                                                    | `undefined`  |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined` | `undefined`  |
+| `_options`            | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                          | `Option<W3CInputValue>[]` \| `string` \| `undefined`                                         | `undefined`  |
+| `_orientation`        | `_orientation`   | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                   | `"horizontal"` \| `"vertical"` \| `undefined`                                                | `'vertical'` |
+| `_required`           | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                       | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                    | `undefined`  |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                    | `'top'`      |
+| `_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`  |
 
 
 ## Slots
@@ -119,12 +121,14 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 ### Depends on
 
 - kol-input
+- [kol-tooltip](../tooltip)
 - [kol-alert](../alert)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-input-radio --> kol-input
+  kol-input-radio --> kol-tooltip
   kol-input-radio --> kol-alert
   kol-input --> kol-icon
   kol-input --> kol-button-wc

package/doc/input-range.md

@@ -7,12 +7,21 @@ 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" _value="100" _step="20">Wertebereich</kol-input-range>
+<kol-input-range
+	_id="meine_range"
+	_name="meine_range"
+	_min="100"
+	_max="200"
+	_value="100"
+	_step="20"
+	_icon='{ "left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'
+	>Wertebereich</kol-input-range
+>
 ```
 
 ### Beispiel
 
-<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>
+<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20" _icon='{ "left": "codicon codicon-arrow-small-down", "right": "codicon codicon-arrow-small-up"}'>Wertebereich</kol-input-range>
 
 ## Verwendung
 
@@ -31,7 +40,7 @@ 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
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
@@ -49,14 +58,16 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 | `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                   | `''`        |
 | `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
 | `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                   | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                                | `undefined` |
-| `_list`               | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                                                              | `Option<number>[]` \| `string` \| `undefined`                                                               | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `string`                                                                                     | `undefined` |
+| `_list`               | `_list`          | <span class="text-red-500">**[DEPRECATED]**</span> Use _suggestions.<br/><br/>Gibt die Liste der Vorschlagswörter an.                                   | `Option<W3CInputValue>[]` \| `string` \| `undefined`                                                        | `undefined` |
 | `_max`                | `_max`           | Gibt den größtmöglichen Eingabewert an.                                                                                                              | `number` \| `undefined`                                                                                   | `undefined` |
 | `_min`                | `_min`           | Gibt den kleinstmöglichen Eingabewert 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` |
+| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                | `W3CInputValue[]` \| `string` \| `undefined`                                                                | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                   | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                   | `'top'`     |
 | `_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` |
 
@@ -73,11 +84,13 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 ### Depends on
 
 - kol-input
+- [kol-tooltip](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-input-range --> kol-input
+  kol-input-range --> kol-tooltip
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert