@public-ui/components 1.1.15 → 1.1.16-rc.0

package/doc/input-radio-group.md

@@ -0,0 +1,58 @@
+# InputRadioGroup
+
+<!-- Auto Generated Below -->
+
+
+> **[DEPRECATED]** Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Verwendet einfach den Tag `<kol-input-radio>` statt `<kol-input-radio-group>`.
+
+## 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`       |
+| `_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`                                                                    | `''`         |
+| `_id` _(required)_   | `_id`          | Gibt die technische ID des Eingabefeldes an.                                         | `string`                                                                                 | `undefined`  |
+| `_list` _(required)_ | `_list`        | Gibt die Liste der Optionen für das Eingabefeld an.                                  | `Option<unknown>[] \| 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`  |
+| `_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.                                                          | `string \| undefined`                                                                    | `undefined`  |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-input-radio](../input-radio)
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-radio-group --> kol-input-radio
+  kol-input-radio --> kol-input
+  kol-input-radio --> kol-alert
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-radio-group fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-radio.md

@@ -0,0 +1,134 @@
+# 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.
+
+<kol-alert _alert _heading="Hinweis" _level="1" _type="info">
+  Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.
+</kol-alert><br/>
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-radio
+	_id="anrede"
+	_name="anrede"
+	_list='[{"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>
+
+## Verwendung
+
+Die einzelnen Radio-Elemente innerhalb der Komponente ** InputRadio** werden über dass Attribut **_\_list_** als JSON-Objekt übergeben.
+
+Das JSON-Objekt erwartet je Radio-Element folgende Werte:
+
+**`label`** = Beschriftung des Radio-Elements
+
+**`value`** = Wert des Radio-Elements
+
+Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
+
+```tsx
+[
+	{
+		label: 'Herr',
+		value: 'Herr',
+	},
+	{
+		label: 'Frau',
+		value: 'Frau',
+	},
+	{
+		label: 'Firma',
+		value: 'Firma',
+	},
+];
+```
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+- 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
+
+### Tastatursteuerung
+
+| Taste          | Funktion                                                                                         |
+| -------------- | ------------------------------------------------------------------------------------------------ |
+| `Tab`          | Fokussiert das erste Radio-Element, aktiviert es aber nicht aus.                                 |
+| `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.                   |
+
+## 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
+
+<!-- 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`       |
+| `_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`                                                                    | `''`         |
+| `_id` _(required)_   | `_id`          | Gibt die technische ID des Eingabefeldes an.                                               | `string`                                                                                 | `undefined`  |
+| `_list` _(required)_ | `_list`        | Gibt die Liste der Optionen für das Eingabefeld an.                                        | `Option<unknown>[] \| 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`  |
+| `_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) | `boolean \| number \| object \| string \| undefined \| unknown[]`                        | `undefined`  |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-input-radio-group](../input-radio-group)
+
+### Depends on
+
+- kol-input
+- [kol-alert](../alert)
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-radio --> kol-input
+  kol-input-radio --> kol-alert
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  kol-input-radio-group --> kol-input-radio
+  style kol-input-radio fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-range.md

@@ -0,0 +1,95 @@
+# InputRange
+
+Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-range _id="meine_range" _name="meine_range" _min={100} _max={200} _step={10}>
+	Wertebereich
+</kol-input-range>
+```
+
+### Beispiel
+
+<kol-input-range _id="meine_range" _name="meine_range" _min={100} _max={200} _step={10}>
+  Wertebereich
+</kol-input-range>
+
+## Verwendung
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste          | Funktion                                 |
+| -------------- | ---------------------------------------- |
+| `Tab`          | Fokussiert das Eingabefeld.              |
+| `Pfeil-Tasten` | Verändern den Wert der Range-Komponente. |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                          | Type                                                                                                                                                                                                          | Default     |
+| ------------------ | ---------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.             | `boolean \| undefined`                                                                                                                                                                                        | `true`      |
+| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                         | `"off" \| "on" \| undefined`                                                                                                                                                                                  | `undefined` |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                          | `boolean \| undefined`                                                                                                                                                                                        | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                             | `string \| undefined`                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                        | `boolean \| undefined`                                                                                                                                                                                        | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                               | `string \| undefined`                                                                                                                                                                                         | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.   | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                         | `string`                                                                                                                                                                                                      | `undefined` |
+| `_list`            | `_list`          | Gibt die Liste der Vorschlagswörter an.                                              | `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
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-range --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-range fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/input-text.md

@@ -0,0 +1,104 @@
+# InputText
+
+Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-input-text _type="text" _id="mein_text" _name="mein_text">
+	Texteingabe
+</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>
+
+## Verwendung
+
+### Best practices
+
+- Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
+
+## Barrierefreiheit
+
+### Tastatursteuerung
+
+| Taste | Funktion                              |
+| ----- | ------------------------------------- |
+| `Tab` | Fokussiert das Eingabefeld.           |
+| `ESC` | Löscht den Inhalt (nur Typ = Search). |
+
+## Links und Referenzen
+
+- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
+- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute        | Description                                                                                              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Default     |
+| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `true`      |
+| `_autoComplete`    | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                             | `"off" \| "on" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
+| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `''`        |
+| `_icon`            | `_icon`          | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.                       | `string \| undefined \| { right: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { right?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_list`            | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                  | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_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; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaLabel?: string \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: "tab" \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: TooltipAlignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks \| undefined; _type?: KoliBriButtonType \| undefined; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| 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
+
+### Depends on
+
+- kol-input
+
+### Graph
+```mermaid
+graph TD;
+  kol-input-text --> kol-input
+  kol-input --> kol-icon
+  kol-input --> kol-button-wc
+  kol-input --> kol-alert
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-span-wc --> kol-icon
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-alert --> kol-heading-wc
+  kol-alert --> kol-button-wc
+  kol-alert --> kol-icon
+  style kol-input-text fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/kolibri.md

@@ -0,0 +1,36 @@
+# KoliBri-Logo
+
+Diese Komponente implementiert das KoliBri-Logo.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-kolibri _animate _labled />
+```
+
+## Beispiele
+
+<kol-kolibri />
+<kol-kolibri _animate />
+<kol-kolibri _animate _labled="false" /> 
+<kol-kolibri _labled="false" />
+
+## Barrierefreiheit
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                                              | Type                   | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `_animate` | `_animate` | Gibt an, ob das Bild-Logo farblich animiert werden soll.                 | `boolean \| undefined` | `undefined` |
+| `_color`   | `_color`   | Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll. | `string \| undefined`  | `'#003c78'` |
+| `_labeled` | `_labeled` | Gibt an, ob die Logo-Beschriftung angezeigt werden soll.                 | `boolean \| undefined` | `undefined` |
+
+
+----------------------------------------------
+
+

package/doc/link-button.md

@@ -0,0 +1,90 @@
+# 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.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
+<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
+<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
+<kol-link-button _href="#" _label="Secondary" _variant="danger"></kol-link-button>
+<kol-link-button _href="#"_label="Ghost" _variant="ghost"></kol-link-button>
+```
+
+### Beispiel
+
+<div class="flex gap-2">
+  <kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
+  <kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
+  <kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
+  <kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
+  <kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
+</div>
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute             | Description                                                                                                                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default                                        |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
+| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                                                                                                                      | `"date" \| "location" \| "page" \| "step" \| "time" \| boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`                                    |
+| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                        | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`                                    |
+| `_ariaLabel`          | `_aria-label`         | Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
+| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`                                    |
+| `_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`                                        |
+| `_fill`               | `_fill`               | Gibt an, ob der Link die gesamte zur Verfügung stehende Breite ausfüllt.                                                                                                                                                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                        |
+| `_href`               | `_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/)                                                                                                                                                                                        | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined`                                    |
+| `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.                                                                                                                                                    | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `'left'`                                       |
+| `_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`                                    |
+| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                          | `undefined \| { onClick?: EventCallback<Event> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`                                    |
+| `_part`               | `_part`               | Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)                                                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
+| `_role`               | `_role`               | Gibt an, welche Role der Schalter hat.                                                                                                                                                                                                                                                | `"tab" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined`                                    |
+| `_selector`           | `_selector`           | Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.                                                                                                                                                                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
+| `_stealth`            | `_stealth`            | Gibt an, ob der Link nur beim Fokus sichtbar ist.                                                                                                                                                                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                        |
+| `_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`                                    |
+| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Der Link wird in einem neuen Tab geöffnet.'` |
+| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'right'`                                      |
+| `_underline`          | `_underline`          | Gibt an, ob die Links unterstrichen dargestellt werden.                                                                                                                                                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                                         |
+| `_useCase`            | `_use-case`           | Gibt den Verwendungsfall des Links an.                                                                                                                                                                                                                                                | `"image" \| "nav" \| "text" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `'text'`                                       |
+| `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Button hat.                                                                                                                                                                                                                                            | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'normal'`                                     |
+
+
+## Dependencies
+
+### Depends on
+
+- kol-span-wc
+- [kol-tooltip](../tooltip)
+
+### Graph
+```mermaid
+graph TD;
+  kol-link-button --> kol-span-wc
+  kol-link-button --> 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
+  style kol-link-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+