@public-ui/components 1.6.0-rc.6 → 1.6.0-rc.8

package/doc/input-password.md

@@ -48,6 +48,7 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_autoComplete`       | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                                                                         | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_hasCounter`         | `_has-counter`   | Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `''`        |
 | `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
@@ -61,7 +62,7 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_readOnly`           | `_read-only`     | Setzt das Eingabefeld in den schreibgeschützten Modus.                                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_required`           | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_size`               | `_size`          | Setzt die Breite des Eingabefeldes in Buchstabenbreiten.                                                                                             | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | --               | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _ariaLabel?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| `_smartButton`        | --               | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_touched`            | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `false`     |
 | `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |

package/doc/input-text.md

@@ -64,6 +64,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_autoComplete`       | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann.                                                                                         | `"off"` \| `"on"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_hasCounter`         | `_has-counter`   | Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `''`        |
 | `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
@@ -78,7 +79,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_readOnly`           | `_read-only`     | Setzt das Eingabefeld in den schreibgeschützten Modus.                                                                                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_required`           | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_size`               | `_size`          | Setzt die Breite des Eingabefeldes in Buchstabenbreiten.                                                                                             | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | --               | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _ariaLabel?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| `_smartButton`        | --               | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_touched`            | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `false`     |
 | `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                    | `"search"` \| `"tel"` \| `"text"` \| `"url"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'text'`    |

package/doc/link-button.md

@@ -30,28 +30,28 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                     | Type                                                                                   | Default                             |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------- |
-| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                        | `string` \| `undefined`                                                                  | `undefined`                         |
-| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)  | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`           | `undefined`                         |
-| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean` \| `undefined`                                                                 | `undefined`                         |
-| `_ariaLabel`          | `_aria-label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                     | `string` \| `undefined`                                                                  | `undefined`                         |
-| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)    | `boolean` \| `undefined`                                                                 | `undefined`                         |
-| `_customClass`        | `_custom-class`       | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                         | `string` \| `undefined`                                                                  | `undefined`                         |
-| `_disabled`           | `_disabled`           | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                 | `boolean` \| `undefined`                                                                 | `false`                             |
-| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                            | `boolean` \| `string` \| `undefined`                                                       | `false`                             |
-| `_hideLabel`          | `_hide-label`         | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                       | `boolean` \| `undefined`                                                                 | `false`                             |
-| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                 | `string`                                                                               | `undefined`                         |
-| `_icon`               | `_icon`               | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                     | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                   | `undefined`                         |
-| `_iconOnly`           | `_icon-only`          | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.              | `boolean` \| `undefined`                                                                 | `undefined`                         |
-| `_label` _(required)_ | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                     | `string`                                                                               | `undefined`                         |
-| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined`                         |
-| `_role`               | `_role`               | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                      | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                             | `undefined`                         |
-| `_tabIndex`           | `_tab-index`          | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                            | `number` \| `undefined`                                                                  | `undefined`                         |
-| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                       | `string` \| `undefined`                                                                  | `undefined`                         |
-| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                | `string` \| `undefined`                                                                  | `translate('kol-open-link-in-tab')` |
-| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`                           |
-| `_variant`            | `_variant`            | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                   | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `undefined` | `'normal'`                          |
+| Property              | Attribute             | Description                                                                                                                                                                                             | Type                                                                                                 | Default                             |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                          | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                         | `undefined`                         |
+| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                         | `boolean` \| `undefined`                                                                               | `undefined`                         |
+| `_ariaLabel`          | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                            | `boolean` \| `undefined`                                                                               | `undefined`                         |
+| `_customClass`        | `_custom-class`       | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                 | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_disabled`           | `_disabled`           | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                         | `boolean` \| `undefined`                                                                               | `false`                             |
+| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                                    | `boolean` \| `string` \| `undefined`                                                                     | `false`                             |
+| `_hideLabel`          | `_hide-label`         | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                               | `boolean` \| `undefined`                                                                               | `false`                             |
+| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                         | `string`                                                                                             | `undefined`                         |
+| `_icon`               | `_icon`               | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                 | `undefined`                         |
+| `_iconOnly`           | `_icon-only`          | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                      | `boolean` \| `undefined`                                                                               | `undefined`                         |
+| `_label` _(required)_ | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string`                                                                                             | `undefined`                         |
+| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                            | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined`                         |
+| `_role`               | `_role`               | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined`                         |
+| `_tabIndex`           | `_tab-index`          | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                    | `number` \| `undefined`                                                                                | `undefined`                         |
+| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                                               | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                        | `string` \| `undefined`                                                                                | `translate('kol-open-link-in-tab')` |
+| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`                           |
+| `_variant`            | `_variant`            | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`                          |
 
 
 ## Dependencies

package/doc/link-group.md

@@ -8,7 +8,7 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertik
 
 ```html
 <kol-link-group
-	_aria-label="Einfache LinkGroup"
+	_label="Einfache LinkGroup"
 	_caption="Überschrift der LinkGroup"
 	_links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]"
 	_list-style-type="disc"
@@ -18,7 +18,7 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertik
 
 ### Beispiel
 
-<kol-link-group _aria-label="Einfache LinkGroup" _caption="Überschrift der LinkGroup" _links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]" _list-style-type="disc" _orientation="'vertical"></kol-link-group>
+<kol-link-group _label="Einfache LinkGroup" _caption="Überschrift der LinkGroup" _links="[{'_label':'Link 1','_href':'https://www.w3.org'},{'_label':'Link 2','_href':'https://www.w3.org'},{'_label':'Link 3','_href':'https://www.w3.org'}]" _list-style-type="disc" _orientation="'vertical"></kol-link-group>
 
 ## Verwendung
 
@@ -61,7 +61,7 @@ Die Überschrift der LinkGroup wird über das Attribut **`_heading`** übergeben
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
   nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
 
-<kol-link-group _aria-label="LinkGroup innerhalb eines Fließtextes" _links="[{'_label':'Link 1'},{'_label':'Link 2'},{'_label':'Link 3'}]"></kol-link-group>
+<kol-link-group _label="LinkGroup innerhalb eines Fließtextes" _links="[{'_label':'Link 1'},{'_label':'Link 2'},{'_label':'Link 3'}]"></kol-link-group>
 
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
 nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
@@ -84,15 +84,16 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 
 ## Properties
 
-| Property                  | Attribute          | Description                                                                                                                                                                                          | Type                                                                                                                                                                                                                  | Default      |
-| ------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_ariaLabel` _(required)_ | `_aria-label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                          | `string`                                                                                                                                                                                                              | `undefined`  |
-| `_heading`                | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
-| `_level`                  | `_level`           | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.                                                | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                                                                                                                                                        | `undefined`  |
-| `_links` _(required)_     | `_links`           | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                      | `LinkProps[]` \| `string`                                                                                                                                                                                               | `undefined`  |
-| `_listStyleType`          | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                         | `"circle"` \| `"decimal"` \| `"decimal-leading-zero"` \| `"disc"` \| `"lower-alpha"` \| `"lower-greek"` \| `"lower-latin"` \| `"lower-roman"` \| `"none"` \| `"square"` \| `"upper-alpha"` \| `"upper-latin"` \| `"upper-roman"` \| `undefined` | `undefined`  |
-| `_ordered`                | `_ordered`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert.<br/><br/>Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll. | `boolean` \| `undefined`                                                                                                                                                                                                | `undefined`  |
-| `_orientation`            | `_orientation`     | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                   | `"horizontal"` \| `"vertical"` \| `undefined`                                                                                                                                                                             | `'vertical'` |
+| Property              | Attribute          | Description                                                                                                                                                                                             | Type                                                                                                                                                                                                                  | Default      |
+| --------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `_ariaLabel`          | `_aria-label`      | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
+| `_heading`            | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                      | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
+| `_label`              | `_label`           | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
+| `_level`              | `_level`           | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.                                                   | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                                                                                                                                                        | `undefined`  |
+| `_links` _(required)_ | `_links`           | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string`                                                                                                                                                                                               | `undefined`  |
+| `_listStyleType`      | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                            | `"circle"` \| `"decimal"` \| `"decimal-leading-zero"` \| `"disc"` \| `"lower-alpha"` \| `"lower-greek"` \| `"lower-latin"` \| `"lower-roman"` \| `"none"` \| `"square"` \| `"upper-alpha"` \| `"upper-latin"` \| `"upper-roman"` \| `undefined` | `undefined`  |
+| `_ordered`            | `_ordered`         | <span style="color:red">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert.<br/><br/>Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.    | `boolean` \| `undefined`                                                                                                                                                                                                | `undefined`  |
+| `_orientation`        | `_orientation`     | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                      | `"horizontal"` \| `"vertical"` \| `undefined`                                                                                                                                                                             | `'vertical'` |
 
 
 ## Dependencies

package/doc/link.md

@@ -70,30 +70,30 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                                                 | Type                                                                                | Default                                        |
-| --------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- |
-| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                    | `string` \| `undefined`                                                               | `undefined`                                    |
-| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                              | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`        | `undefined`                                    |
-| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                             | `boolean` \| `undefined`                                                              | `undefined`                                    |
-| `_ariaLabel`          | `_aria-label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                 | `string` \| `undefined`                                                               | `undefined`                                    |
-| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                | `boolean` \| `undefined`                                                              | `undefined`                                    |
-| `_disabled`           | `_disabled`           | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                             | `boolean` \| `undefined`                                                              | `false`                                        |
-| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                                        | `boolean` \| `string` \| `undefined`                                                    | `false`                                        |
-| `_hideLabel`          | `_hide-label`         | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                   | `boolean` \| `undefined`                                                              | `false`                                        |
-| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                             | `string`                                                                            | `undefined`                                    |
-| `_icon`               | `_icon`               | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                 | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                | `undefined`                                    |
-| `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<br/><br/>Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `undefined`                                    |
-| `_iconOnly`           | `_icon-only`          | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                          | `boolean` \| `undefined`                                                              | `undefined`                                    |
-| `_label` _(required)_ | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                 | `string`                                                                            | `undefined`                                    |
-| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }` | `undefined`                                    |
-| `_role`               | `_role`               | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                                  | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                          | `undefined`                                    |
-| `_selector`           | `_selector`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.                                    | `string` \| `undefined`                                                               | `undefined`                                    |
-| `_stealth`            | `_stealth`            | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt an, ob der Link nur beim Fokus sichtbar ist.                                                      | `boolean` \| `undefined`                                                              | `false`                                        |
-| `_tabIndex`           | `_tab-index`          | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                        | `number` \| `undefined`                                                               | `undefined`                                    |
-| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                                                   | `string` \| `undefined`                                                               | `undefined`                                    |
-| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                            | `string` \| `undefined`                                                               | `'Der Link wird in einem neuen Tab geöffnet.'` |
-| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `'right'`                                      |
-| `_useCase`            | `_use-case`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Verwendungsfall des Links an.                                                                 | `"image"` \| `"nav"` \| `"text"` \| `undefined`                                           | `'text'`                                       |
+| Property             | Attribute             | Description                                                                                                                                                                                                 | Type                                                                                | Default                                        |
+| -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `_ariaControls`      | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                    | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_ariaCurrent`       | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                              | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`        | `undefined`                                    |
+| `_ariaExpanded`      | `_aria-expanded`      | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                             | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_ariaLabel`         | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).     | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_ariaSelected`      | `_aria-selected`      | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_disabled`          | `_disabled`           | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                              | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_download`          | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                                        | `boolean` \| `string` \| `undefined`                                                    | `false`                                        |
+| `_hideLabel`         | `_hide-label`         | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                   | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_href` _(required)_ | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                             | `string`                                                                            | `undefined`                                    |
+| `_icon`              | `_icon`               | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                 | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                | `undefined`                                    |
+| `_iconAlign`         | `_icon-align`         | <span style="color:red">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<br/><br/>Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `undefined`                                    |
+| `_iconOnly`          | `_icon-only`          | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                          | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_label`             | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                 | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_on`                | --                    | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                           | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }` | `undefined`                                    |
+| `_role`              | `_role`               | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                                  | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                          | `undefined`                                    |
+| `_selector`          | `_selector`           | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.                                                          | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_stealth`           | `_stealth`            | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Gibt an, ob der Link nur beim Fokus sichtbar ist.                                                                            | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_tabIndex`          | `_tab-index`          | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                        | `number` \| `undefined`                                                               | `undefined`                                    |
+| `_target`            | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                                                   | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_targetDescription` | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                            | `string` \| `undefined`                                                               | `'Der Link wird in einem neuen Tab geöffnet.'` |
+| `_tooltipAlign`      | `_tooltip-align`      | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `'right'`                                      |
+| `_useCase`           | `_use-case`           | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Gibt den Verwendungsfall des Links an.                                                                                       | `"image"` \| `"nav"` \| `"text"` \| `undefined`                                           | `'text'`                                       |
 
 
 ## Dependencies

package/doc/modal.md

@@ -1,20 +1,35 @@
-# Modal
+# Hinweis
+
+Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt ([caniuse](https://caniuse.com/?search=dialog)), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
+
+## Verwendung von `<dialog>`
+
+Die Dokumentation des `<dialog>` finden Sie [hier(MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
+Das **Dialog**-Element kann wie jedes andere HTML-Tag verwendet werden, alle Elemente innerhalb werden wie gewohnt dargestellt.
+Der Dialog ist standardmäßig nicht sichtbar, über das Setzen des Attributs `open`, oder über die Funktionen `show()` und `showModal()` wird er sichtbar.
+`open` und `show()` öffnen das Element mit `position: absolute`, während `showModal()` `position: fixed` setzt.
+
+- Beide Varianten haben eine `max-width`, die unter `box-sizing: content-box` der gesamten Bildschirmbreite entspricht (bzw des `position` Elters)
+- Die Modalvariante hat einen Hintergrund, der eine sanfte Abdunklung verursacht (unser Tipp: die Opacity der Hintergrundfarbe erhöhen), der über `::backdrop` gestylt werden kann und Klickevents auf den Dialog weiterleitet.
+- Die Modalvariante ist in der Bildschirmmitte zentriert (via `margin: auto`, kann von CSS Resets überschrieben werden)
+
+## Modal
 
 Mit Hilfe der **Modal**-Komponente können zusätzliche Informationen oder auch Eingabeformulare in einem Dialogfenster angezeigt werden. Ein offenes **Modal** kann via **ESC** geschlossen werden.
 Die **Modal**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt. Dabei wird der Hintergrund des Fensters deaktiviert und allein der Inhalt des Modal-Fensters ist aktiv.
 
-## Funktionsweise
+### Funktionsweise
 
 Das **Modal** realisiert die Basis für barrierefreie Overlays und ermöglicht es beliebige HTML-Inhalte anzuzeigen. Beispielsweise wäre eine Dialog-Komponente eine Komposition aus einer Card-Komponente die in einer **Modal**-Komponente eingefügt wird.
 
 Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der Webseite deaktiviert, außer die innerhalb des aktiven Modals.
 
-## Konstruktion
+### Konstruktion
 
-### Code
+#### Code
 
 ```html
-<kol-modal id="test-modal" _aria-label="Beschreibung zur Modalbox">
+<kol-modal id="test-modal" _label="Beschreibung zur Modalbox">
 	<kol-card _heading="Vorgang löschen" _has-footer style="background-color: bisque">
 		<p slot="content">Wollen Sie den Vorgang wirklich löschen?</p>
 		<div slot="footer">
@@ -39,7 +54,7 @@ Sobald ein **Modal** geöffnet wird, werden alle selektierbaren Elemente in der
 </script>
 ```
 
-## Verwendung
+### Verwendung
 
 Über das Attribut **`_width`** geben Sie die gewünschte Breite der Modalbox an. Sie wird in der gewählten Größe immer mittig auf dem Bildschirm angezeigt.
 
@@ -49,19 +64,19 @@ Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sp
 
 Das **Modal** hat einen `z-index` von `100`.
 
-### Best practices
+#### Best practices
 
 - Verwenden Sie die Modalbox, um weiterführende Informationen zu einem Thema anzuzeigen.
 - Verwenden Sie die Modalbox, um umfangreiche Inhalte optisch kompakter zu gestalten.
 - Vermeiden Sie es, wichtige Informationen wie z.B. rechtliche Themen, auf die Nutzer:innen reagieren müssen, in Modalboxen zu platzieren.
 
-### Anwendungsfälle
+#### Anwendungsfälle
 
 - Nutzen Sie die Modalbox, als Erklärungshilfe zu einzelnen Eingabefeldern in Formularen.
 - Nutzen Sie die Modalbox, um ergänzende Informationen erst nach Anforderung durch die Nutzer:innen anzuzeigen.
 - Nutzen Sie die Modalbox, um ein Feedback zu Speichervorgängen oder ähnliches anzuzeigen, z.B. **_Vielen Dank für Ihre Rückmeldung_** nach Absenden eines Formulars.
 
-## Barrierefreiheit
+### Barrierefreiheit
 
 > Die optische Standardausgabe der Komponente ist auf die Umsetzung der Barrierefreiheit hin optimiert. Wenn Sie eigene Custom Styles verwenden, kann das zu einer Einschränkung der Barrierefreiheit führen.
 
@@ -75,14 +90,14 @@ Achten Sie für eine optimale Ausgabe der **Modal**-Komponente in Screenreadern
 
 Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektierbaren Elemente deaktiviert außer die innerhalb des eigenen Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert die sich im Browser-Seitenbereich befinden. Das Fokussieren den Browser-Menü's ist weiterhin möglich.
 
-### Tastatursteuerung
+#### Tastatursteuerung
 
 | Taste | Funktion                                                                                    |
 | ----- | ------------------------------------------------------------------------------------------- |
 | `Tab` | Bei geöffnetem Modal werden alle fokussierbaren Elemente der Reihenfolge nach angesprungen. |
 | `ESC` | Schließt das Modal.                                                                         |
 
-## Links und Referenzen
+### Links und Referenzen
 
 - https://www.w3.org/TR/wai-aria-practices/#dialog_modal
 - https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
@@ -92,12 +107,13 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                                                                 | Type                                                            | Default     |
-| ------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
-| `_activeElement`          | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                                     | `HTMLElement` \| `null` \| `undefined`                              | `undefined` |
-| `_ariaLabel` _(required)_ | `_aria-label` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string`                                                        | `undefined` |
-| `_on`                     | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                                                            | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
-| `_width`                  | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                                                             | `string` \| `undefined`                                           | `'100%'`    |
+| Property         | Attribute     | Description                                                                                                                                                                                             | Type                                                            | Default     |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
+| `_activeElement` | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                                                                                                                 | `HTMLElement` \| `null` \| `undefined`                              | `undefined` |
+| `_ariaLabel`     | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `undefined` |
+| `_label`         | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined` |
+| `_on`            | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                                                                                                                                        | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| `_width`         | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                                                                                                                                         | `string` \| `undefined`                                           | `'100%'`    |
 
 
 ## Slots

package/doc/nav.md

@@ -16,7 +16,7 @@ noch die Icons ausgegeben.
 
 ```html
 <kol-nav
-	_ariaLabel="Navigation"
+	_label="Navigation"
 	_links="[
 	{
 		_href: 'startseite',
@@ -35,7 +35,7 @@ noch die Icons ausgegeben.
 
 ### Beispiel
 
-<kol-nav _ariaLabel="Navigation" _links="[{'_href':'startseite','_icon':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icon':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icon':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icon':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
+<kol-nav _label="Navigation" _links="[{'_href':'startseite','_icon':'codicon codicon-home','_label':'Startseite','_children':[{'_href':'startseite/1-untermenuepunkt','_icon':'codicon codicon-home','_label':'1. Untermenüpunkt'},{'_href':'startseite/2-untermenuepunkt','_icon':'codicon codicon-home','_label':'2. Untermenüpunkt'}]},{'_href':'unterseite','_icon':'codicon codicon-home','_label':'2. Menüpunkt'}]" _has-compact-button></kol-nav>
 
 ## Verwendung
 
@@ -107,16 +107,17 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 
 ## Properties
 
-| Property                  | Attribute             | Description                                                                                                                                                                                       | Type                                                            | Default      |
-| ------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ |
-| `_ariaCurrentValue`       | `_aria-current-value` | Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll.                                                                                  | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
-| `_ariaLabel` _(required)_ | `_aria-label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                       | `string`                                                        | `undefined`  |
-| `_collapsible`            | `_collapsible`        | Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.                                                                                                     | `boolean` \| `undefined`                                          | `true`       |
-| `_compact`                | `_compact`            | Gibt an, ob die Navigation kompakt angezeigt wird.                                                                                                                                                | `boolean` \| `undefined`                                          | `false`      |
-| `_hasCompactButton`       | `_has-compact-button` | <span class="text-red-500">**[DEPRECATED]**</span> Version 2<br/><br/>Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.                 | `boolean` \| `undefined`                                          | `false`      |
-| `_links` _(required)_     | `_links`              | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                   | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
-| `_orientation`            | `_orientation`        | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
-| `_variant`                | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Gibt an, welche Variante der Darstellung genutzt werden soll. | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
+| Property              | Attribute             | Description                                                                                                                                                                                             | Type                                                            | Default      |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ |
+| `_ariaCurrentValue`   | `_aria-current-value` | Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll.                                                                                        | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
+| `_ariaLabel`          | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `undefined`  |
+| `_collapsible`        | `_collapsible`        | Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.                                                                                                           | `boolean` \| `undefined`                                          | `true`       |
+| `_compact`            | `_compact`            | Gibt an, ob die Navigation kompakt angezeigt wird.                                                                                                                                                      | `boolean` \| `undefined`                                          | `false`      |
+| `_hasCompactButton`   | `_has-compact-button` | <span style="color:red">**[DEPRECATED]**</span> Version 2<br/><br/>Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.                       | `boolean` \| `undefined`                                          | `false`      |
+| `_label`              | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined`  |
+| `_links` _(required)_ | `_links`              | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
+| `_orientation`        | `_orientation`        | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                      | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
+| `_variant`            | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Gibt an, welche Variante der Darstellung genutzt werden soll.       | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
 
 
 ## Dependencies

package/doc/pagination.md

@@ -62,7 +62,7 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 | `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.                       | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
 | `_tooltipAlign`       | `_tooltip-align`     | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                  | `'top'`     |
 | `_total` _(required)_ | `_total`             | Setzt die Gesamtanzahl der Seiten.                                                               | `number`                                                                                                                                                                                                               | `undefined` |
-| `_variant`            | `_variant`           | Gibt an, welche Variante der Darstellung genutzt werden soll.                                    | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `undefined`                                                                                                                                 | `'normal'`  |
+| `_variant`            | `_variant`           | Gibt an, welche Variante der Darstellung genutzt werden soll.                                    | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                                                                                   | `'normal'`  |
 
 
 ## Dependencies

package/doc/progress.md

@@ -45,14 +45,14 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                                                                                              | Type                            | Default     |
-| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ----------- |
-| `_label`              | `_label`   | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                              | `string` \| `undefined`           | `undefined` |
-| `_max` _(required)_   | `_max`     | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.                                                                                                     | `number`                        | `undefined` |
-| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
-| `_unit`               | `_unit`    | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)                                                                                                          | `string` \| `undefined`           | `'%'`       |
-| `_value` _(required)_ | `_value`   | Gibt an, wie weit die Anzeige fortgeschritten ist.                                                                                                                       | `number`                        | `undefined` |
-| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                            | `"bar"` \| `"cycle"` \| `undefined` | `undefined` |
+| Property              | Attribute  | Description                                                                                                                                                              | Type                                                                          | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | ----------- |
+| `_label`              | `_label`   | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                              | `string` \| `undefined`                                                         | `undefined` |
+| `_max` _(required)_   | `_max`     | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.                                                                                                     | `number`                                                                      | `undefined` |
+| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
+| `_unit`               | `_unit`    | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)                                                                                                          | `string` \| `undefined`                                                         | `'%'`       |
+| `_value` _(required)_ | `_value`   | Gibt an, wie weit die Anzeige fortgeschritten ist.                                                                                                                       | `number`                                                                      | `undefined` |
+| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                            | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
 
 
 ----------------------------------------------