@public-ui/components 1.4.0-rc.1 → 1.4.0-rc.2

package/doc/input-date.md

@@ -6,10 +6,8 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
 
 ### Code
 
-```tsx
-<kol-input-date _id="mein_datum" _name="mein_datum" _type="date">
-	Erstellungsdatum
-</kol-input-date>
+```html
+<kol-input-date _id="mein_datum" _name="mein_datum" _type="date"> Erstellungsdatum </kol-input-date>
 ```
 
 ### Beispiel
@@ -87,6 +85,25 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}.${number}` \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}.${number}` \| `${number}:${number}:${number}` \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-email.md

@@ -6,10 +6,8 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
 
 ### Code
 
-```tsx
-<kol-input-email _id="meine_email" _name="meine_email">
-	E-Mail-Adresse
-</kol-input-email>
+```html
+<kol-input-email _id="meine_email" _name="meine_email"> E-Mail-Adresse </kol-input-email>
 ```
 
 ### Beispiel
@@ -73,6 +71,25 @@ Die Validierung der erfassten E-Mail-Adressen erfolgt programmseitig. Bei Eingab
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-file.md

@@ -6,10 +6,8 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für Uploads. Es können eine ode
 
 ### Code
 
-```tsx
-<kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png, image/jpeg, application/pdf">
-	Bild hochladen
-</kol-input-file>
+```html
+<kol-input-file _id="mein_upload" _name="mein_upload" _accept="image/png, image/jpeg, application/pdf"> Bild hochladen </kol-input-file>
 ```
 
 ### Beispiel
@@ -63,6 +61,25 @@ Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erl
 | `_value`           | `_value`      | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-number.md

@@ -6,10 +6,8 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen, Datumswerte, Datum
 
 ### Code
 
-```tsx
-<kol-input-number _type="date" _id="mein_datum" _name="mein_datum">
-	Erstellungsdatum
-</kol-input-number>
+```html
+<kol-input-number _type="date" _id="mein_datum" _name="mein_datum"> Erstellungsdatum </kol-input-number>
 ```
 
 ### Beispiel
@@ -94,6 +92,25 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                                                                                                                                       | ``${number}-${number}-${number}T${number}:${number}:${number}.${number}` \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}.${number}` \| `${number}:${number}:${number}` \| number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Used by

package/doc/input-password.md

@@ -6,10 +6,8 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 
 ### Code
 
-```tsx
-<kol-input-password _id="main_passwort" _name="main_passwort">
-	Passwort
-</kol-input-password>
+```html
+<kol-input-password _id="main_passwort" _name="main_passwort"> Passwort </kol-input-password>
 ```
 
 ### Beispiel
@@ -66,6 +64,25 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-radio.md

@@ -10,7 +10,7 @@ Die Komponente ** InputRadio** besteht aus einer Sammlung von Radio-Elementen un
 
 ### Code
 
-```tsx
+```html
 <kol-input-radio
 	_id="anrede"
 	_name="anrede"
@@ -34,21 +34,8 @@ Das JSON-Objekt erwartet je Radio-Element folgende Werte:
 
 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',
-	},
-];
+```html
+[ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];
 ```
 
 ### Best practices
@@ -97,6 +84,25 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
 | `_value`             | `_value`       | Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902) | `number \| string \| undefined`                                                          | `undefined`  |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Used by

package/doc/input-range.md

@@ -6,10 +6,8 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 
 ### Code
 
-```tsx
-<kol-input-range _id="meine_range" _name="meine_range" _min={100} _max={200} _step={10}>
-	Wertebereich
-</kol-input-range>
+```html
+<kol-input-range _id="meine_range" _name="meine_range" _min="{100}" _max="{200}" _step="{10}"> Wertebereich </kol-input-range>
 ```
 
 ### Beispiel
@@ -65,6 +63,25 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                  | `number \| undefined`                                                                                                                                                                                         | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/input-text.md

@@ -6,10 +6,8 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ### Code
 
-```tsx
-<kol-input-text _type="text" _id="mein_text" _name="mein_text">
-	Texteingabe
-</kol-input-text>
+```html
+<kol-input-text _type="text" _id="mein_text" _name="mein_text"> Texteingabe </kol-input-text>
 ```
 
 ### Beispiel
@@ -74,6 +72,25 @@ Texteingabe
 | `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/kolibri.md

@@ -6,7 +6,7 @@ Diese Komponente implementiert das KoliBri-Logo.
 
 ### Code
 
-```tsx
+```html
 <kol-kolibri _animate _labled />
 ```
 
@@ -31,6 +31,25 @@ Diese Komponente implementiert das KoliBri-Logo.
 | `_labeled` | `_labeled` | Gibt an, ob die Logo-Beschriftung angezeigt werden soll.                 | `boolean \| undefined` | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ----------------------------------------------
 
 

package/doc/link-button.md

@@ -12,12 +12,12 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
 
 ### Code
 
-```tsx
+```html
 <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>
+<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
 ```
 
 ### Beispiel
@@ -57,6 +57,25 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
 | `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Button hat.                                                                                                                                                                                                                                            | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'normal'`                          |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/link-group.md

@@ -6,7 +6,7 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine listen
 
 ### Code
 
-```tsx
+```html
 <kol-link-group
 	_aria-label="Einfache LinkGroup"
 	_caption="Überschrift der LinkGroup"
@@ -26,12 +26,8 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine listen
 
 Die auszugebenden Links werden als JSON-Objekt an das Attribut `_links` übergeben.
 
-```tsx
-[
-	{ _label: 'Link 1', _href: 'https://www.w3.org' },
-	{ _label: 'Link 2', _href: 'https://www.w3.org' },
-	{ _label: 'Link 3', _href: 'https://www.w3.org' },
-];
+```html
+[ { _label: 'Link 1', _href: 'https://www.w3.org' }, { _label: 'Link 2', _href: 'https://www.w3.org' }, { _label: 'Link 3', _href: 'https://www.w3.org' }, ];
 ```
 
 Die Konstruktion der einzelnen **Links**, die innerhalb der JSON-Struktur über das Attribut **\_links** übergeben wird, ist im Abschnitt **Links** beschrieben.
@@ -90,13 +86,32 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 | ------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
 | `_ariaLabel` _(required)_ | `_aria-label`      | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.                                                                                                                          | `string`                                                                                                                                                                                                              | `undefined`  |
 | `_heading`                | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                    | `string \| undefined`                                                                                                                                                                                                 | `undefined`  |
-| `_level`                  | `_level`           | Gibt die geordnete Liste der Seitenhierarchie in Links an.                                                                                                                                            | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                                                                                                                                             | `undefined`  |
+| `_level`                  | `_level`           | Gibt die geordnete Liste der Seitenhierarchie in Links an.                                                                                                                                            | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                                                                                                                                        | `undefined`  |
 | `_links` _(required)_     | `_links`           | Gibt die geordnete Liste der Seitenhierarchie in Links an.                                                                                                                                            | `NavLinkProps[] \| string`                                                                                                                                                                                            | `undefined`  |
 | `_listStyleType`          | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                          | `"circle" \| "decimal" \| "decimal-leading-zero" \| "disc" \| "lower-alpha" \| "lower-greek" \| "lower-latin" \| "lower-roman" \| "none" \| "square" \| "upper-alpha" \| "upper-latin" \| "upper-roman" \| undefined` | `undefined`  |
 | `_ordered`                | `_ordered`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert. Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.<br/><br/> | `boolean \| undefined`                                                                                                                                                                                                | `undefined`  |
 | `_orientation`            | `_orientation`     | Gibt die Ausrichtung der LinkList an.                                                                                                                                                                 | `"horizontal" \| "vertical" \| undefined`                                                                                                                                                                             | `'vertical'` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/link.md

@@ -12,10 +12,8 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 
 ### Code
 
-```tsx
-<kol-link _href="https://www.w3.org" _target="_self" _underline="false">
-	Hier steht ein Link
-</kol-link>
+```html
+<kol-link _href="https://www.w3.org" _target="_self" _underline="false"> Hier steht ein Link </kol-link>
 ```
 
 ### Beispiel
@@ -126,6 +124,25 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 | `"span"`   | Ermöglicht das Stylen des Linktextes.     |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ## Dependencies
 
 ### Used by

package/doc/logo.md

@@ -8,7 +8,7 @@ Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen. Die
 
 ### Code
 
-```tsx
+```html
 <div>
 	<kol-logo _abbr="BReg"></kol-logo>
 </div>
@@ -71,6 +71,25 @@ Das Attribut `_abbr` wird für die Definition des gewünschten Logos verwendet.
 | `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt \| Bundesanstalt \| Bundesministerium`              | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ----------------------------------------------
 
 

package/doc/modal.md

@@ -21,7 +21,7 @@ Werden mehrere **Modale** nach einander geöffnet, dann wird immer nur das letzt
 
 > Um das Zusammenspiel von Komponenten (HTML) und Controller (TypeScript) gemeinsam darzustellen, wurden alle Code-Beispiele auf dieser Seite mit den Web Components im TSX geschrieben.
 
-```tsx
+```html
 <kol-modal
   _activeElement={this.state.activeElement}
   _aria-label="Beschreibung zur Modalbox"
@@ -119,6 +119,25 @@ Zusätzlich stellt die Komponente sicher, dass die Darstellung beliebiger Inhalt
 | `_width`                  | `_width`      | Gibt an, wie breit der Anzeigebereich sein soll (<= max-width: 100%).                   | `string \| undefined`                                           | `'100%'`    |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                     |
+| --------------------------- | ------------------------------- |
+| `--kolibri-border-color`    | Default color of the border.    |
+| `--kolibri-border-radius`   | Default radius of the border.   |
+| `--kolibri-border-width`    | Default width of the border.    |
+| `--kolibri-color-danger`    | Default color of the danger.    |
+| `--kolibri-color-disabled`  | Default color of the disabled.  |
+| `--kolibri-color-error`     | Default color of the error.     |
+| `--kolibri-color-ghost`     | Default color of the ghost.     |
+| `--kolibri-color-info`      | Default color of the info.      |
+| `--kolibri-color-normal`    | Default color of the normal.    |
+| `--kolibri-color-primary`   | Default color of the primary.   |
+| `--kolibri-color-secondary` | Default color of the secondary. |
+| `--kolibri-color-success`   | Default color of the success.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+
+
 ----------------------------------------------