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

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,29 @@ 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-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/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>
 ```
 
@@ -42,7 +42,7 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 | `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                                                                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_label` _(required)_ | `_label`         | Gibt einen beschreibenden Text für das Text-Element an.                                                                                                                                                                                                                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `undefined \| { onClick?: EventValueCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| 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` |
 | `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                         | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |
@@ -50,6 +50,29 @@ 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-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/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'}";
 ```
 
@@ -151,7 +151,7 @@ Probleme mit Disabled-Status
 | `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_label` _(required)_ | `_label`         | Gibt den Label für die Beschriftung der Schaltfläche an.                                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                        | `undefined \| { onClick?: EventValueCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                        | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| 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` |
 | `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.                                                                      | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |
@@ -160,6 +160,29 @@ 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-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/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,29 @@ 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-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/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,29 @@ 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-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/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