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

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
@@ -48,7 +48,7 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
 | `_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`                         |
 | `_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`                 | --                    | Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                                                                                    | `undefined \| { onClick?: EventValueCallback<Event, string> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`                         |
+| `_on`                 | --                    | Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                                                                                    | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined`                         |
 | `_role`               | `_role`               | Gibt an, welche Role der Schalter hat.                                                                                                                                                                                                                                                | `"tab" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined`                         |
 | `_tabIndex`           | `_tab-index`          | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                         |
 | `_target`             | `_target`             | Definiert das Verhalten, bei dem der Link geöffnet werden soll.                                                                                                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                         |
@@ -57,6 +57,29 @@ 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ## 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,36 @@ 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ## 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
@@ -106,7 +104,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 | `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<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 für die Beschriftung der Schaltfläche an.                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`                                    |
-| `_on`                 | --                    | Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                    | `undefined \| { onClick?: EventValueCallback<Event, string> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`                                    |
+| `_on`                 | --                    | Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                    | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined`                                    |
 | `_role`               | `_role`               | Gibt an, welche Role der Schalter hat.                                                                                                                                                | `"tab" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined`                                    |
 | `_selector`           | `_selector`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
 | `_stealth`            | `_stealth`            | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt an, ob der Link nur beim Fokus sichtbar ist.                                | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                        |
@@ -126,6 +124,29 @@ 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ## 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,29 @@ 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ----------------------------------------------
 
 

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,29 @@ 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ----------------------------------------------
 
 

package/doc/nav.md

@@ -18,7 +18,7 @@ noch die Icons ausgegeben.
 
 ### Code
 
-```tsx
+```html
 <kol-nav
 	_links='[{_"label":"Startseite", "_href":"startseite"},{_"label":"Unterseite von Startseite", "_href":"unterseite"}]'
 	_has-compact-button="true"
@@ -35,28 +35,15 @@ noch die Icons ausgegeben.
 
 Die Navigationsstruktur wird als JSON-Struktur an das Attribut `_links_` übergeben. Die Struktur ist als Wert/Parameter-Paar aufgebaut:
 
-```tsx
-[
-  {"_label":"Startseite", "_href":"startseite"},
-  {"_label":"Unterseite 1":"_href":"unterseite1"},
-  {"_label":"Unterseite 2":"_href":"unterseite2"}
-]
+```html
+[ {"_label":"Startseite", "_href":"startseite"}, {"_label":"Unterseite 1":"_href":"unterseite1"}, {"_label":"Unterseite 2":"_href":"unterseite2"} ]
 ```
 
 Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzliche Attribut `_children` im übergeordneten Element.
 
-```tsx
-[
-	{
-		_label: 'Startseite',
-		_href: 'startseite',
-		_children: [
-			{ _label: '1. Untermenüpunkt', _href: 'startseite/1-untermenuepunkt' },
-			{ _label: '2. Untermenüpunkt', _href: 'startseite/2-untermenuepunkt' },
-		],
-	},
-	{ _label: '2. Menüpunkt', _href: 'unterseite' },
-];
+```html
+[ { _label: 'Startseite', _href: 'startseite', _children: [ { _label: '1. Untermenüpunkt', _href: 'startseite/1-untermenuepunkt' }, { _label: '2.
+Untermenüpunkt', _href: 'startseite/2-untermenuepunkt' }, ], }, { _label: '2. Menüpunkt', _href: 'unterseite' }, ];
 ```
 
 ### Kompakte Navigationsleiste anzeigen
@@ -127,6 +114,29 @@ Die Navigationsleiste kann mit dem Attribut `_orientation` zwischen horizontaler
 | `"nav"` | 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ## Dependencies
 
 ### Depends on

package/doc/pagination.md

@@ -8,7 +8,7 @@ durchlaufen werden.
 
 ### Code
 
-```tsx
+```html
 <div>
 	<kol-pagination _total="100" _page="6"></kol-pagination>
 	<kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
@@ -55,19 +55,42 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 
 ## Properties
 
-| Property              | Attribute            | Description                                                                                    | Type                                                                                                                                                                                              | Default     |
-| --------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen. | `number \| undefined`                                                                                                                                                                             | `1`         |
-| `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.        | `string \| undefined`                                                                                                                                                                             | `undefined` |
-| `_hasButtons`         | `_has-buttons`       | Gibt an, welche Sprung-Schalter sichtbar sein sollen.                                          | `boolean \| string \| undefined \| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                          | `undefined` |
-| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                           | `{ onChangePage?: EventValueCallback<Event, number> \| undefined; onChangePageSize?: EventValueCallback<Event, number> \| undefined; onClick?: EventValueCallback<Event, number> \| undefined; }` | `undefined` |
-| `_page` _(required)_  | `_page`              | Gibt an, welche Seite aktuell ausgewählt ist.                                                  | `number`                                                                                                                                                                                          | `undefined` |
-| `_pageSize`           | `_page-size`         | Gibt an, wie viele Einträge pro Seite angezeigt werden.                                        | `number`                                                                                                                                                                                          | `1`         |
-| `_pageSizeOptions`    | `_page-size-options` | Gibt an, welche Optionen für die Seitenlänge angeboten werden.                                 | `number[] \| string`                                                                                                                                                                              | `[]`        |
-| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben dem aktuell ausgewählten Seite angezeigt werden.               | `number \| undefined`                                                                                                                                                                             | `1`         |
-| `_tooltipAlign`       | `_tooltip-align`     | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.                       | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                             | `'top'`     |
-| `_total` _(required)_ | `_total`             | Gibt an, wie viele Einträge mit der Pagination gehandelt werden.                               | `number`                                                                                                                                                                                          | `undefined` |
-| `_variant`            | `_variant`           | Gibt an, welche Button-Variante verwendet werden soll.                                         | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined`                                                                                                            | `'normal'`  |
+| Property              | Attribute            | Description                                                                                    | Type                                                                                                                                                                                                                   | Default     |
+| --------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen. | `number \| undefined`                                                                                                                                                                                                  | `1`         |
+| `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.        | `string \| undefined`                                                                                                                                                                                                  | `undefined` |
+| `_hasButtons`         | `_has-buttons`       | Gibt an, welche Sprung-Schalter sichtbar sein sollen.                                          | `boolean \| string \| undefined \| { first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `undefined` |
+| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                           | `{ onChangePage?: EventValueOrEventCallback<Event, number> \| undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> \| undefined; onClick?: EventValueOrEventCallback<Event, number> \| undefined; }` | `undefined` |
+| `_page` _(required)_  | `_page`              | Gibt an, welche Seite aktuell ausgewählt ist.                                                  | `number`                                                                                                                                                                                                               | `undefined` |
+| `_pageSize`           | `_page-size`         | Gibt an, wie viele Einträge pro Seite angezeigt werden.                                        | `number`                                                                                                                                                                                                               | `1`         |
+| `_pageSizeOptions`    | `_page-size-options` | Gibt an, welche Optionen für die Seitenlänge angeboten werden.                                 | `number[] \| string`                                                                                                                                                                                                   | `[]`        |
+| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben dem aktuell ausgewählten Seite angezeigt werden.               | `number \| undefined`                                                                                                                                                                                                  | `1`         |
+| `_tooltipAlign`       | `_tooltip-align`     | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden.                       | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                  | `'top'`     |
+| `_total` _(required)_ | `_total`             | Gibt an, wie viele Einträge mit der Pagination gehandelt werden.                               | `number`                                                                                                                                                                                                               | `undefined` |
+| `_variant`            | `_variant`           | Gibt an, welche Button-Variante verwendet werden soll.                                         | `"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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
 
 
 ## Dependencies

package/doc/progress.md

@@ -6,7 +6,7 @@ Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine opt
 
 ### Code
 
-```tsx
+```html
 <div>
 	<kol-progress _type="bar" _max="100" _value="20"></kol-progress>
 </div>
@@ -51,6 +51,29 @@ Verwenden Sie das Attribut `_value`, um den aktuellen Wert der Komponente zu bes
 | `_value` _(required)_ | `_value`  | Gibt an, wie weit die Anzeige fortgeschritten ist.                   | `number`                        | `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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ----------------------------------------------
 
 

package/doc/select.md

@@ -6,19 +6,10 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 
 ### Code
 
-```tsx
-<kol-select
-  _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]"
-  _value="['1']"
->
-  Auswahlfeld
-</kol-select>
-<kol-select
-  _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]"
-  _multiple
-  _value="['0','2']"
->
-  Auswahlfeld (Mehrfachauswahl)
+```html
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+	Auswahlfeld (Mehrfachauswahl)
 </kol-select>
 ```
 
@@ -34,28 +25,15 @@ Die Auswahlmöglichkeiten, **_Option-List_**, werden über das Attribut **_\_lis
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
-```tsx
-[
-	{
-		label: 'Herr',
-		value: '0',
-	},
-	{
-		label: 'Frau',
-		value: '1',
-	},
-	{
-		label: 'Firma',
-		value: '2',
-	},
-];
+```html
+[ { label: 'Herr', value: '0', }, { label: 'Frau', value: '1', }, { label: 'Firma', value: '2', }, ];
 ```
 
 ### Individuelle Höhe angeben
 
 Mit der Property **`_height`** kann eine individuelle Höhe der Selectbox mittels CSS bestimmt werden. Die property erwartet einen String als Übergabewert, der innerhalb des style-Attributes ausgegeben wird. Es ist daher erforderlich, auch die gewünschte Ausgabeeinheit, z.B. px oder em, mit zu übergeben.
 
-```tsx
+```html
 <kol-select _height="85px"></kol-select>
 ```
 
@@ -76,37 +54,22 @@ Mit der Property **`_height`** kann eine individuelle Höhe der Selectbox mittel
 Die Select-Komponente liefert bei Auswahl eines Wertes eine Liste (Array) mit genau einem
 Wert zurück (im Single-Modus). Das kann bei der weiteren Verarbeitung zu unnötigem Aufwand führen. Einfacher ist es hier, den Wert der Select-Komponente über einen <b>SingeSelectFormatter</b> zu Filtern. Fügen Sie hierzu im Formular nachfolgende Klasse ein:
 
-```tsx
-class SingleSelectFormatter extends AbstractFormatter {
-	public format(value: unknown): unknown {
-		return [value];
-	}
-
-	public parse(value: unknown): unknown {
-		if (Array.isArray(value) && value.length > 0) {
-			return value[0];
-		}
-		return value;
-	}
-}
+```html
+class SingleSelectFormatter extends AbstractFormatter { public format(value: unknown): unknown { return [value]; } public parse(value: unknown): unknown { if
+(Array.isArray(value) && value.length > 0) { return value[0]; } return value; } }
 ```
 
 Fügen Sie den Formatter anschließend der Select-Komponente hinzu:
 
-```tsx
-const singleSelectFormatHandler = new FormatHandler();
-singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]);
-(this.getInput('kategorie') as InputControl).setFormatHandler(singleSelectFormatHandler);
+```html
+const singleSelectFormatHandler = new FormatHandler(); singleSelectFormatHandler.formatters.add([new SingleSelectFormatter()]); (this.getInput('kategorie') as
+InputControl).setFormatHandler(singleSelectFormatHandler);
 ```
 
 Beachten Sie, dass der FormatHandler zunächst in die Form importiert wird.
 
-```tsx
-import {
-  xxx...,
-  xxx...,
-  FormatHandler,
-} from '@leanup/form';
+```html
+import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 ```
 
 ## Links und Referenzen
@@ -147,6 +110,29 @@ import {
 | `"select"` | Ermöglicht das Stylen des select-Knotens. |
 
 
+## 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-text`      | Default color of the text.      |
+| `--kolibri-color-visited`   | Default color of the visited.   |
+| `--kolibri-color-warning`   | Default color of the warning.   |
+| `--kolibri-font-family`     | Default font family.            |
+| `--kolibri-font-size`       | Default font size.              |
+
+
 ## Dependencies
 
 ### Used by