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

package/dist/types/components.d.ts

@@ -135,11 +135,6 @@ export namespace Components {
           * Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)
          */
         "_icon"?: Stringified<KoliBriIconProp>;
-        /**
-          * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
-          * @deprecated
-         */
-        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -422,10 +417,6 @@ export namespace Components {
          */
         "_level"?: HeadingLevel;
     }
-    interface KolColor {
-    }
-    interface KolCounter {
-    }
     interface KolDetails {
         /**
           * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.
@@ -448,15 +439,31 @@ export namespace Components {
     }
     interface KolHeading {
         /**
-          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.
+          * Gibt den Text der Überschrift an.
+         */
+        "_label": string;
+        /**
+          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.
          */
         "_level"?: HeadingLevel;
+        /**
+          * Gibt den Text der zusätzlichen Beschriftung an.
+         */
+        "_overline"?: string;
     }
     interface KolHeadingWc {
         /**
-          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.
+          * Gibt den Text der Überschrift an.
+         */
+        "_label": string;
+        /**
+          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.
          */
         "_level"?: HeadingLevel;
+        /**
+          * Gibt den Text der zusätzlichen Beschriftung an.
+         */
+        "_overline"?: string;
     }
     interface KolIcon {
         /**
@@ -2244,18 +2251,6 @@ declare global {
         prototype: HTMLKolCardElement;
         new (): HTMLKolCardElement;
     };
-    interface HTMLKolColorElement extends Components.KolColor, HTMLStencilElement {
-    }
-    var HTMLKolColorElement: {
-        prototype: HTMLKolColorElement;
-        new (): HTMLKolColorElement;
-    };
-    interface HTMLKolCounterElement extends Components.KolCounter, HTMLStencilElement {
-    }
-    var HTMLKolCounterElement: {
-        prototype: HTMLKolCounterElement;
-        new (): HTMLKolCounterElement;
-    };
     interface HTMLKolDetailsElement extends Components.KolDetails, HTMLStencilElement {
     }
     var HTMLKolDetailsElement: {
@@ -2538,8 +2533,6 @@ declare global {
         "kol-button-link": HTMLKolButtonLinkElement;
         "kol-button-wc": HTMLKolButtonWcElement;
         "kol-card": HTMLKolCardElement;
-        "kol-color": HTMLKolColorElement;
-        "kol-counter": HTMLKolCounterElement;
         "kol-details": HTMLKolDetailsElement;
         "kol-form": HTMLKolFormElement;
         "kol-heading": HTMLKolHeadingElement;
@@ -2653,11 +2646,6 @@ declare namespace LocalJSX {
           * Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)
          */
         "_icon"?: Stringified<KoliBriIconProp>;
-        /**
-          * Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.
-          * @deprecated
-         */
-        "_iconAlign"?: Alignment;
         /**
           * Gibt an, ob nur das Icon angezeigt wird.
          */
@@ -2940,10 +2928,6 @@ declare namespace LocalJSX {
          */
         "_level"?: HeadingLevel;
     }
-    interface KolColor {
-    }
-    interface KolCounter {
-    }
     interface KolDetails {
         /**
           * Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist.
@@ -2966,15 +2950,31 @@ declare namespace LocalJSX {
     }
     interface KolHeading {
         /**
-          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.
+          * Gibt den Text der Überschrift an.
+         */
+        "_label": string;
+        /**
+          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.
          */
         "_level"?: HeadingLevel;
+        /**
+          * Gibt den Text der zusätzlichen Beschriftung an.
+         */
+        "_overline"?: string;
     }
     interface KolHeadingWc {
         /**
-          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.
+          * Gibt den Text der Überschrift an.
+         */
+        "_label": string;
+        /**
+          * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt.
          */
         "_level"?: HeadingLevel;
+        /**
+          * Gibt den Text der zusätzlichen Beschriftung an.
+         */
+        "_overline"?: string;
     }
     interface KolIcon {
         /**
@@ -4706,8 +4706,6 @@ declare namespace LocalJSX {
         "kol-button-link": KolButtonLink;
         "kol-button-wc": KolButtonWc;
         "kol-card": KolCard;
-        "kol-color": KolColor;
-        "kol-counter": KolCounter;
         "kol-details": KolDetails;
         "kol-form": KolForm;
         "kol-heading": KolHeading;
@@ -4768,8 +4766,6 @@ declare module "@stencil/core" {
             "kol-button-link": LocalJSX.KolButtonLink & JSXBase.HTMLAttributes<HTMLKolButtonLinkElement>;
             "kol-button-wc": LocalJSX.KolButtonWc & JSXBase.HTMLAttributes<HTMLKolButtonWcElement>;
             "kol-card": LocalJSX.KolCard & JSXBase.HTMLAttributes<HTMLKolCardElement>;
-            "kol-color": LocalJSX.KolColor & JSXBase.HTMLAttributes<HTMLKolColorElement>;
-            "kol-counter": LocalJSX.KolCounter & JSXBase.HTMLAttributes<HTMLKolCounterElement>;
             "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes<HTMLKolDetailsElement>;
             "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes<HTMLKolFormElement>;
             "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes<HTMLKolHeadingElement>;

package/dist/types/enums/color.d.ts

@@ -1,8 +1,3 @@
-export declare enum Nationalfarben {
-  'Schwarz' = "#000000",
-  'Rot' = "#ff0000",
-  'Gold' = "#ffc0c0"
-}
 export type FarbspektrumNames = 'Violett' | 'Dunkelrot' | 'Rot' | 'Orange' | 'Hellorange' | 'Gelb' | 'Hellgrün' | 'Oliv' | 'Dunkelgrün' | 'Grün' | 'Türkis' | 'Hellblau' | 'Blau' | 'Petrol' | 'Dunkelblau' | 'Dunkelgrau' | 'Hellgrau';
 export declare enum Farbspektrum {
   'Violett' = "#5f316e",

package/dist/types/types/button-link.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 import { Events } from '../enums/events';
-import { EventCallback, EventValueCallback } from './callbacks';
+import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriCustomIcon, KoliBriIconProp } from './icon';
 import { Alignment } from './props/alignment';
@@ -48,7 +48,7 @@ type OptionalButtonAndLinkStates = {
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'danger' | 'ghost' | 'custom';
 export type KoliBriButtonCallbacks<T> = {
-  [Events.onClick]?: EventValueCallback<MouseEvent, T>;
+  [Events.onClick]?: EventValueOrEventCallback<MouseEvent, T>;
   [Events.onMouseDown]?: EventCallback<MouseEvent>;
 };
 export type KoliBriButtonVariantCustomClass = {
@@ -79,7 +79,7 @@ export type RequiredButtonStates = RequiredButtonLinkStates;
 export type OptionalButtonStates = OptionalButtonLinkStates & KoliBriButtonVariantCustomClass;
 export type ButtonStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;
 export type LinkOnCallbacks = {
-  [Events.onClick]?: EventValueCallback<Event, string>;
+  [Events.onClick]?: EventValueOrEventCallback<Event, string>;
 };
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | string;
 export type LinkUseCase = 'text' | 'image' | 'nav';

package/dist/types/types/callbacks.d.ts

@@ -1,4 +1,5 @@
 type Callback<T> = (event: T) => void;
 export type EventCallback<E extends Event> = Callback<E>;
-export type EventValueCallback<E extends Event, V> = (event: E, value: V) => void;
+type EventValueCallback<E extends Event, V> = (event: E, value: V) => void;
+export type EventValueOrEventCallback<E extends Event, V> = EventValueCallback<E, V> | EventCallback<E>;
 export {};

package/dist/types/types/heading-level.d.ts

@@ -1 +1 @@
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/dist/types/types/input/types.d.ts

@@ -1,5 +1,5 @@
 import { Events } from '../../enums/events';
-import { EventCallback, EventValueCallback } from '../callbacks';
+import { EventCallback, EventValueOrEventCallback } from '../callbacks';
 export type InputTypeOnOff = 'on' | 'off';
 type InputTypeOnBlur = {
   [Events.onBlur]?: EventCallback<Event>;
@@ -8,7 +8,7 @@ type InputTypeOnClick = {
   [Events.onClick]?: EventCallback<Event>;
 };
 type InputTypeOnChange = {
-  [Events.onChange]?: EventValueCallback<Event, unknown>;
+  [Events.onChange]?: EventValueOrEventCallback<Event, unknown>;
 };
 type InputTypeOnFocus = {
   [Events.onFocus]?: EventCallback<Event>;

package/dist/types/utils/prop.validators.d.ts

@@ -7,7 +7,7 @@ type SetStateHooks = {
   afterPatch?: Generic.Element.StateHooksCallback;
   beforePatch?: Generic.Element.NextStateHooksCallback;
 };
-export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | undefined, hooks?: SetStateHooks) => void;
+export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | null | undefined, hooks?: SetStateHooks) => void;
 type WatchOptions = {
   defaultValue?: unknown;
   hooks?: SetStateHooks;

package/dist/types/utils/validators/label.d.ts

@@ -1,3 +1,5 @@
 import { Generic } from '@a11y-ui/core';
+export declare const hasEnoughReadableChars: (str: string, min?: number) => boolean;
+export declare const containsOnlyNumbers: (str: string) => boolean;
 export declare const validateAriaLabel: (component: Generic.Element.Component, value?: string) => void;
 export declare const validateLabel: (component: Generic.Element.Component, value?: string) => void;

package/dist/types/utils/validators/list.d.ts

@@ -0,0 +1,2 @@
+import { SelectOption } from '../../types/input/types';
+export declare const validateInputSelectList: <T>(option: SelectOption<T>) => boolean;

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,29 @@ 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-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/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>
@@ -96,12 +96,12 @@ Standardansicht gelegt.
 
 ## Properties
 
-| 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`         |
-| `_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`     |
+| 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. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
+| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`                 | `_open`    | Gibt an, ob das Accordion geöffnet ist.                   | `boolean \| undefined`                                                               | `false`     |
 
 
 ## Slots
@@ -124,6 +124,29 @@ 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-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/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,35 @@ 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-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/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,36 @@ 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; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'#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` |
+| 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` |
+| `_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-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/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