@public-ui/components 2.0.2 → 2.0.4-rc.0

package/doc/form.md

@@ -25,10 +25,11 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                     | Type                                                                                                          | Default     |
-| --------------- | ---------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.                                       | `undefined` \| `{ onSubmit?: EventCallback<Event>` \| `undefined; onReset?: EventCallback<Event>` \| `undefined; }` | `undefined` |
-| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
+| Property        | Attribute        | Description                                                                                                                                                                             | Type                                                                                                          | Default     |
+| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_errorList`    | --               | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[]` \| `undefined`                                                                            | `undefined` |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.                                                                                                                               | `undefined` \| `{ onSubmit?: EventCallback<Event>` \| `undefined; onReset?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.                                                                                         | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
 
 
 ## Slots
@@ -42,13 +43,29 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ### Depends on
 
+- [kol-alert](../alert)
+- [kol-link](../link)
 - [kol-indented-text](../indented-text)
 
 ### Graph
 ```mermaid
 graph TD;
+  kol-form --> kol-alert
+  kol-form --> kol-link
   kol-form --> kol-indented-text
-  style kol-form fill:#f9f,stroke:#333,stroke-width:4px
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
+  kol-link --> kol-link-wc
+  kol-link-wc --> kol-span-wc
+  kol-link-wc --> kol-icon
+  kol-link-wc --> kol-tooltip-wc
+  style kol-form stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/heading.md

@@ -69,7 +69,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-card --> kol-heading-wc
   kol-heading --> kol-heading-wc
-  style kol-heading-wc fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-heading-wc stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/icon.md

@@ -82,7 +82,7 @@ graph TD;
   kol-input-checkbox --> kol-icon
   kol-link-wc --> kol-icon
   kol-span-wc --> kol-icon
-  style kol-icon fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-icon stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/indented-text.md

@@ -57,7 +57,7 @@ Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informatione
 graph TD;
   kol-details --> kol-indented-text
   kol-form --> kol-indented-text
-  style kol-indented-text fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-indented-text stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-checkbox.md

@@ -127,7 +127,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-checkbox stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-color.md

@@ -113,7 +113,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-color fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-color stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-date.md

@@ -148,7 +148,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-date fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-date stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-email.md

@@ -117,7 +117,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-email fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-email stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-file.md

@@ -108,7 +108,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-file fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-file stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-number.md

@@ -107,7 +107,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-number fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-number stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-password.md

@@ -107,7 +107,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-password fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-password stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-radio.md

@@ -143,7 +143,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-radio fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-radio stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-range.md

@@ -118,7 +118,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-range fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-range stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-text.md

@@ -128,7 +128,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-text fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-text stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/kolibri.md

@@ -7,13 +7,13 @@ Diese Komponente implementiert das Logo von KoliBri.
 ### Code
 
 ```html
-<kol-kolibri /> <kol-kolibri _labeled="false" />
+<kol-kolibri></kol-kolibri> <kol-kolibri _labeled="false"></kol-kolibri>
 ```
 
 ## Beispiele
 
-<kol-kolibri />
-<kol-kolibri _labeled="false" />
+<kol-kolibri></kol-kolibri>
+<kol-kolibri _labeled="false"></kol-kolibri>
 
 ## Barrierefreiheit
 
@@ -25,7 +25,7 @@ Diese Komponente implementiert das Logo von KoliBri.
 | Property   | Attribute  | Description                                | Type                                                                                                      | Default     |
 | ---------- | ---------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------- |
 | `_color`   | `_color`   | Defines the color of the logo and label.   | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#003c78'` |
-| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean` \| `undefined`                                                                                    | `undefined` |
+| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean` \| `undefined`                                                                                    | `true`      |
 
 
 ----------------------------------------------

package/doc/link-button.md

@@ -30,23 +30,22 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default                             |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| `_accessKey`          | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined`                         |
-| `_customClass`        | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_download`           | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_hideLabel`          | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                               | `false`                             |
-| `_href` _(required)_  | `_href`               | Defines the target URI of the link.                                                                                                                          | `string`                                                                                             | `undefined`                         |
-| `_icons`              | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                               | `undefined`                         |
-| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined`                         |
-| `_on`                 | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined`                         |
-| `_role`               | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined`                         |
-| `_tabIndex`           | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                | `undefined`                         |
-| `_target`             | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_targetDescription`  | `_target-description` | Defines the description to use when the link is going to be opened in another application.                                                                   | `string` \| `undefined`                                                                                | `translate('kol-open-link-in-tab')` |
-| `_tooltipAlign`       | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`                           |
-| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`                          |
+| Property              | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default     |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined` |
+| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined` |
+| `_customClass`        | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
+| `_download`           | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                                | `undefined` |
+| `_hideLabel`          | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                               | `false`     |
+| `_href` _(required)_  | `_href`               | Defines the target URI of the link.                                                                                                                          | `string`                                                                                             | `undefined` |
+| `_icons`              | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                               | `undefined` |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined` |
+| `_on`                 | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined` |
+| `_role`               | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined` |
+| `_tabIndex`           | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                | `undefined` |
+| `_target`             | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`   |
+| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`  |
 
 
 ## Dependencies
@@ -64,7 +63,7 @@ graph TD;
   kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-link-button fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-link-button stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/link-group.md

@@ -101,7 +101,7 @@ graph TD;
   kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-link-group fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-link-group stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/link.md

@@ -78,21 +78,20 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 
 ## Properties
 
-| Property             | Attribute             | Description                                                                                                                                                  | Type                                                                                   | Default                                        |
-| -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ---------------------------------------------- |
-| `_accessKey`         | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                  | `undefined`                                    |
-| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined` | `undefined`                                    |
-| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                  | `undefined`                                    |
-| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                 | `false`                                        |
-| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                          | `string`                                                                               | `undefined`                                    |
-| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                 | `undefined`                                    |
-| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` \| `undefined`                                                                  | `undefined`                                    |
-| `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined`                                    |
-| `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                             | `undefined`                                    |
-| `_tabIndex`          | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                  | `undefined`                                    |
-| `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                  | `undefined`                                    |
-| `_targetDescription` | `_target-description` | Defines the description to use when the link is going to be opened in another application.                                                                   | `string` \| `undefined`                                                                  | `'Der Link wird in einem neuen Tab geöffnet.'` |
-| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`                                      |
+| Property             | Attribute             | Description                                                                                                                                                  | Type                                                                                   | Default     |
+| -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`         | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                  | `undefined` |
+| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined` | `undefined` |
+| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                  | `undefined` |
+| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                 | `false`     |
+| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                          | `string`                                                                               | `undefined` |
+| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                 | `undefined` |
+| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` \| `undefined`                                                                  | `undefined` |
+| `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined` |
+| `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                             | `undefined` |
+| `_tabIndex`          | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                  | `undefined` |
+| `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                  | `undefined` |
+| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`   |
 
 
 ## Dependencies
@@ -100,6 +99,7 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 ### Used by
 
  - [kol-breadcrumb](../breadcrumb)
+ - [kol-form](../form)
  - [kol-link-group](../link-group)
  - [kol-quote](../quote)
 
@@ -117,9 +117,10 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
   kol-breadcrumb --> kol-link
+  kol-form --> kol-link
   kol-link-group --> kol-link
   kol-quote --> kol-link
-  style kol-link fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-link stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/nav.md

@@ -18,17 +18,30 @@ noch die Icons ausgegeben.
 <kol-nav
 	_label="Navigation"
 	_links="[
-		{
-			_href: 'startseite',
-			_icons: 'codicon codicon-home',
-			_label: 'Startseite',
-			_children: [
-				{ _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
-				{ _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
-			],
-		},
-		{ _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
-	]"
+    {
+      '_href': 'startseite',
+      '_icons': 'codicon codicon-home',
+      '_label': 'Startseite2',
+      '_children': [
+        {
+          '_href': 'startseite/1-untermenuepunkt',
+          '_icons': 'codicon codicon-home',
+          '_label': '1. Untermenüpunkt'
+        },
+        {
+          '_href': 'startseite/2-untermenuepunkt',
+          '_icons': 'codicon codicon-home',
+          '_label': '2. Untermenüpunkt'
+        }
+      ]
+    },
+    {
+      '_href': 'unterseite',
+      '_icons': 'codicon codicon-home',
+      '_label': '2. Menüpunkt'
+    }
+  ]"
+	_has-compact-button
 ></kol-nav>
 ```
 
@@ -113,28 +126,25 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 
 ### Depends on
 
-- kol-button-link-text-switch
+- kol-link-wc
 - kol-button-wc
 - [kol-button](../button)
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-nav --> kol-button-link-text-switch
+  kol-nav --> kol-link-wc
   kol-nav --> kol-button-wc
   kol-nav --> kol-button
-  kol-button-link-text-switch --> kol-button-wc
-  kol-button-link-text-switch --> kol-link-wc
-  kol-button-link-text-switch --> kol-span-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
   kol-button --> kol-button-wc
-  style kol-nav fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-nav stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/pagination.md

@@ -91,7 +91,7 @@ graph TD;
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
   kol-table --> kol-pagination
-  style kol-pagination fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-pagination stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/quote.md

@@ -91,7 +91,7 @@ graph TD;
   kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-quote fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-quote stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/select.md

@@ -161,7 +161,7 @@ graph TD;
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
   kol-pagination --> kol-select
-  style kol-select fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-select stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/skip-nav.md

@@ -75,7 +75,7 @@ graph TD;
   kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-skip-nav fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-skip-nav stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/span.md

@@ -40,7 +40,7 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 graph TD;
   kol-span --> kol-span-wc
   kol-span-wc --> kol-icon
-  style kol-span fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-span stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/split-button.md

@@ -70,7 +70,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-split-button fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-split-button stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/table.md

@@ -122,15 +122,16 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 
 ## Properties
 
-| Property                | Attribute           | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |
-| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_allowMultiSort`       | `_allow-multi-sort` | Defines whether to allow multi sort.                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
-| `_data` _(required)_    | `_data`             | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
-| `_dataFoot`             | `_data-foot`        | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_headers` _(required)_ | `_headers`          | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_minWidth`             | `_min-width`        | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
-| `_pagination`           | `_pagination`       | Defines whether to show the data distributed over multiple pages.                                                  | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _max?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| Property                | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |
+| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_allowMultiSort`       | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_data` _(required)_    | `_data`                | Defines the primary table data.                                                                                    | `KoliBriTableDataType[]` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_dataFoot`             | `_data-foot`           | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[]` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
+| `_headers` _(required)_ | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string` \| `{ horizontal?: KoliBriTableHeaderCell[][]` \| `undefined; vertical?: KoliBriTableHeaderCell[][]` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_label` _(required)_   | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_minWidth`             | `_min-width`           | Defines the table min-width.                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
+| `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean` \| `string` \| `undefined` \| `{ _page: number; } & { _on?: KoliBriPaginationButtonCallbacks` \| `undefined; _page?: number` \| `undefined; _max?: number` \| `undefined; _boundaryCount?: number` \| `undefined; _hasButtons?: boolean` \| `Stringified<PaginationHasButton>` \| `undefined; _pageSize?: number` \| `undefined; _pageSizeOptions?: Stringified<number[]>` \| `undefined; _siblingCount?: number` \| `undefined; _customClass?: string` \| `undefined; _label?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
+| `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `"both"` \| `"bottom"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |
 
 
 ## Dependencies
@@ -139,12 +140,14 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 
 - [kol-button](../button)
 - [kol-pagination](../pagination)
+- kol-button-wc
 
 ### Graph
 ```mermaid
 graph TD;
   kol-table --> kol-button
   kol-table --> kol-pagination
+  kol-table --> kol-button-wc
   kol-button --> kol-button-wc
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip-wc
@@ -161,7 +164,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-table fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-table stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/tabs.md

@@ -95,7 +95,7 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `_align`              | `_align`    | Defines the position of the tab captions.                                                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 | `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                 | `undefined` |
-| `_on`                 | --          | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
+| `_on`                 | --          | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `PointerEvent` \| `KeyboardEvent, number>` \| `undefined; }` | `undefined` |
 | `_selected`           | `_selected` | Defines which tab is active.                                                                                       | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
 | `_tabs` _(required)_  | `_tabs`     | Defines the tab captions.                                                                                          | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
 
@@ -116,7 +116,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-tabs stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/textarea.md

@@ -122,7 +122,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-textarea fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-textarea stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------