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

package/doc/abbr.md

@@ -7,10 +7,8 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 
 ### Code
 
-```tsx
-<kol-abbr _title="Abkürzung" _tooltip-align="top">
-	Abbr
-</kol-abbr>
+```html
+<kol-abbr _title="Abkürzung" _tooltip-align="top"> Abbr </kol-abbr>
 ```
 
 ### Beispiel
@@ -53,6 +51,25 @@ Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht
 | `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'`     |
 
 
+## 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/accordion.md

@@ -8,7 +8,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 ### Code
 
-```tsx
+```html
 <kol-accordion _heading="Überschrift" _level="1" _open>
 	<div slot="content">Beispieltext</div>
 </kol-accordion>
@@ -99,7 +99,7 @@ Standardansicht gelegt.
 | Property                | Attribute  | Description                                               | Type                                                                          | Default     |
 | ----------------------- | ---------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------- |
 | `_heading` _(required)_ | `_heading` | Gibt die Überschrift des Accordions an.                   | `string`                                                                      | `undefined` |
-| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                     | `1`         |
+| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                | `1`         |
 | `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \| { onClick?: EventValueCallback<Event, boolean> \| undefined; }` | `undefined` |
 | `_open`                 | `_open`    | Gibt an, ob das Accordion geöffnet ist.                   | `boolean \| undefined`                                                        | `false`     |
 
@@ -124,6 +124,25 @@ Standardansicht gelegt.
 | `"open"`      | Ermöglicht das Stylen des geöffneten Zustands und Icons.    |
 
 
+## 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/alert.md

@@ -6,10 +6,8 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 
 ### Code
 
-```tsx
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">
-	Textbereich im Alert
-</kol-alert>
+```html
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg"> Textbereich im Alert </kol-alert>
 ```
 
 ### Beispiel
@@ -85,12 +83,31 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean \| undefined`                                                  | `false`     |
 | `_hasCloser` | `_has-closer` | Gibt an, ob der Alert ein Schließen-Icon hat.                                     | `boolean \| undefined`                                                  | `false`     |
 | `_heading`   | `_heading`    | Gibt den Titel der Meldung an.                                                    | `string \| undefined`                                                   | `undefined` |
-| `_level`     | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                               | `1`         |
+| `_level`     | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                          | `1`         |
 | `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                  | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
 | `_type`      | `_type`       | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
 | `_variant`   | `_variant`    | Gibt an, welche Benachrichtigungsvariante dargestellt wird.                       | `"card" \| "msg" \| undefined`                                          | `'msg'`     |
 
 
+## 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/badge.md

@@ -7,7 +7,7 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
 
 ### Code
 
-```tsx
+```html
 <kol-badge _label="Beispieltext" _color="#000000" _icon="home" _icon-align="right" style={{ fontWeight: '600' }}></kol-badge>
 ```
 
@@ -97,14 +97,33 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default                  |
-| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| `_color`              | `_color`        | Gibt die Farbe des Hintergrundes bzw. der Schrift an.                                                                              | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `Nationalfarben.Schwarz` |
-| `_icon`               | `_icon`         | Gibt einen Identifier eines Icons aus den Icofont's an. (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. | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'left'`                 |
-| `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                  |
-| `_label` _(required)_ | `_label`        | Gibt den Label-Text des Badges an.                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`              |
-| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                           | `string \| 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?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| undefined; }`                                      | `undefined`              |
+| Property              | Attribute       | Description                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`        | Gibt die Farbe des Hintergrundes bzw. der Schrift an.                                                                              | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'#000'`    |
+| `_icon`               | `_icon`         | Gibt einen Identifier eines Icons aus den Icofont's an. (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. | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'left'`    |
+| `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_label` _(required)_ | `_label`        | Gibt den Label-Text des Badges an.                                                                                                 | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).                           | `string \| 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?: Alignment \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _customClass?: string \| undefined; _variant?: KoliBriButtonVariant \| 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

package/doc/breadcrumb.md

@@ -11,7 +11,7 @@ Diese ist nicht mit einem link versehen. Alle Elemente links der aktuellen Seite
 
 ### Code
 
-```tsx
+```html
 <div>
 	<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/"},{"_label":"Unterseite von Startseite","_href":"#/unterseite"}]'></kol-breadcrumb>
 </div>
@@ -43,23 +43,9 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 
 Beispiel für ein JSON-Objekt, das an das Attribut **\_links** übergeben wird:
 
-```tsx
-[
-	{
-		_label: 'Startseite',
-		_href: '#/',
-		_icon: 'home',
-		_iconOnly: true,
-	},
-	{
-		_label: '1. Unterseite',
-		_href: '/1_unterseite',
-	},
-	{
-		_label: '2. Unterseite',
-		_href: '/2_unterseite',
-	},
-];
+```html
+[ { _label: 'Startseite', _href: '#/', _icon: 'home', _iconOnly: true, }, { _label: '1. Unterseite', _href: '/1_unterseite', }, { _label: '2. Unterseite',
+_href: '/2_unterseite', }, ];
 ```
 
 <kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icon":"home","_icon-only": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
@@ -114,6 +100,25 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 | `"separator"` | Ermöglicht das Ändern des Separator-Icons. |
 
 
+## 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/button-group.md

@@ -11,7 +11,7 @@ zur **Button**-Komponente.
 
 ### Code
 
-```tsx
+```html
 <kol-button-group>
   <kol-button _label="Speichern" _variant="primary"></<kol-button>
   <kol-button _label="Speichern & Schließen" _variant="normal"></<kol-button>

package/doc/button-link.md

@@ -14,7 +14,7 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 
 ### Code
 
-```tsx
+```html
 <kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
 ```
 
@@ -50,6 +50,25 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 | `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                      | `unknown`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `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/button.md

@@ -6,7 +6,7 @@
 
 ### Code
 
-```tsx
+```html
 <kol-button _label="Primary" _variant="primary"></kol-button>
 <kol-button _label="Secondary" _variant="secondary"></kol-button>
 <kol-button _label="Normal" _variant="normal"></kol-button>
@@ -50,9 +50,9 @@ Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut **`_label`*
 
 Über das Attribut **`_icon`** wird eine JSON-Struktur übergeben, mit der alle Paramater zu Anzeige des Icon im Button festgelegt wird.
 
-```tsx
-_icon =
-	"{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}";
+```html
+_icon = "{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid
+fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}";
 ```
 
 Es ist möglich, ein Icon an jeder Position des Button anzuzeigen, sowie die Ausgabe mehrerer Icons im Button. Jedes Icon erhält in der JSON-Struktur einen eigenen Abschnitt, in dem seine Properties festgelegt werden.
@@ -64,7 +64,7 @@ Jeder Abschnitt beginnt mit der gewünschten Position des Icon im Button:
 - right
 - left
 
-```tsx
+```html
 "{'top': {weitere Properties}";
 ```
 
@@ -72,13 +72,13 @@ Als weitere Properties zur Konfiguration des Icon stehen zur Verfügung:
 
 - icon: legt das anzuzeigende Icon aus der Icofont-Bibliothek fest.
 
-```tsx
+```html
 "{'top': {'icon':'fa-solid fa-arrow-up'}";
 ```
 
 - style: übergibt ggfls. eigene CSS-Stylinganweisungen an das Icon, wie z.B. font-size, transform oder color.
 
-```tsx
+```html
 "{'top': {'style': {'font-size':'200%','color':'#040404','transform':'rotate(45deg)'},'icon':'fa-solid fa-arrow-up'}";
 ```
 
@@ -160,6 +160,25 @@ Probleme mit Disabled-Status
 | `_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
 
 ### Used by

package/doc/card.md

@@ -11,7 +11,7 @@ Der **Fuß-Bereich** wird optional durch ein Attribut aktiviert und stellt dann
 
 ### Code
 
-```tsx
+```html
 <kol-card _heading="Testtitel" _has-footer _max-height="vh2">
 	<div slot="header">Text im Header-Bereich</div>
 	<div slot="content">
@@ -62,7 +62,7 @@ Auch **HTML-Code** können sie hier einfügen. Dieser wird ausgewertet und ansch
 
 Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
 
-```tsx
+```html
 <kol-card _heading="Beispiel" _level="1">
 	<div slot="header">Text im Header-Bereich</div>
 </kol-card>
@@ -75,7 +75,7 @@ Auch **HTML-Code** können sie hier einfügen. Dieser wird ausgewertet und ansch
 
 Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
 
-```tsx
+```html
 <kol-card _heading="Beispiel" _level="1">
 	<div slot="content">Text im Inhalts-Bereich</div>
 </kol-card>
@@ -90,7 +90,7 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 
 Wenn Sie den Fuß-Bereich der Card-Komponente nutzen möchten, achten Sie darauf das Attribut **\_has-footer** im Element `<kol-card>` zu setzen
 
-```tsx
+```html
 <kol-card _heading="Beispiel" _level="1" _has-footer>
 	<div slot="footer">Text im Fuß-Bereich</div>
 </kol-card>
@@ -120,12 +120,12 @@ Es ist auch möglich andere Komponenten der KoliBri-Bibliothek innerhalb der **C
 
 ## Properties
 
-| Property                | Attribute     | Description                                                                                                                            | Type                                      | Default     |
-| ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
-| `_hasFooter`            | `_has-footer` | Gibt an, ob die Card einen Footer-Bereich hat.                                                                                         | `boolean \| undefined`                    | `false`     |
-| `_heading` _(required)_ | `_heading`    | Gibt die Überschrift der Card an.                                                                                                      | `string`                                  | `undefined` |
-| `_headline`             | `_headline`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Überschrift der Card an. | `string \| undefined`                     | `undefined` |
-| `_level`                | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                                                                              | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
+| Property                | Attribute     | Description                                                                                                                            | Type                                           | Default     |
+| ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
+| `_hasFooter`            | `_has-footer` | Gibt an, ob die Card einen Footer-Bereich hat.                                                                                         | `boolean \| undefined`                         | `false`     |
+| `_heading` _(required)_ | `_heading`    | Gibt die Überschrift der Card an.                                                                                                      | `string`                                       | `undefined` |
+| `_headline`             | `_headline`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Überschrift der Card an. | `string \| undefined`                          | `undefined` |
+| `_level`                | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                                                                              | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
 
 
 ## Slots
@@ -144,6 +144,25 @@ Es ist auch möglich andere Komponenten der KoliBri-Bibliothek innerhalb der **C
 | `"card"` | TBD         |
 
 
+## 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/details.md

@@ -13,10 +13,8 @@ Der gewünschte Inhalt wird zwischen öffnendem und schließendem Element notier
 
 ### Code
 
-```tsx
-<kol-details _summary="Ihre Überschrift" _open>
-	Ihr Text im Detail-Bereich
-</kol-details>
+```html
+<kol-details _summary="Ihre Überschrift" _open> Ihr Text im Detail-Bereich </kol-details>
 ```
 
 ### Beispiel
@@ -96,6 +94,25 @@ Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Übers
 | `_summary` _(required)_ | `_summary` | Gibt die Zusammenfassung der Detailbeschreibung an.               | `string`               | `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/heading.md

@@ -6,7 +6,7 @@ Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Übersch
 
 ### Code
 
-```tsx
+```html
 <div>
 	<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
 </div>
@@ -35,9 +35,11 @@ Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten.
 
 ## Properties
 
-| Property | Attribute | Description                                               | Type                                      | Default |
-| -------- | --------- | --------------------------------------------------------- | ----------------------------------------- | ------- |
-| `_level` | `_level`  | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`     |
+| Property              | Attribute   | Description                                                                                                            | Type                                           | Default     |
+| --------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`    | Gibt den Text der Überschrift an.                                                                                      | `string`                                       | `undefined` |
+| `_level`              | `_level`    | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
+| `_overline`           | `_overline` | Gibt den Text der zusätzlichen Beschriftung an.                                                                        | `string \| undefined`                          | `''`        |
 
 
 ## Dependencies