@public-ui/components 1.6.0-rc.2 → 1.6.0-rc.20

package/doc/input-text.md

@@ -20,7 +20,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 	_type="text"
 	_id="loeschbar"
 	_name="loeschbar"
-	_smartButton="{ _icon: 'codicon codicon-chrome-close', _iconOnly: true, _label: 'Löschen', _on: { onClick: clearInput } }"
+	_smartButton="{ _icon: 'codicon codicon-chrome-close', _hideLabel: true, _label: 'Löschen', _on: { onClick: clearInput } }"
 	>Löschbar</kol-input-text
 >
 ```
@@ -49,40 +49,43 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ## Links und Referenzen
 
-- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
-- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _label="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default     |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `true`      |
-| `_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` |
-| `_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` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_list`               | `_list`          | Gibt die Liste der Vorschlagswörter an.                                                                                                              | `string` \| `string[]` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_maxLength`          | `_max-length`    | Gibt an, wie viele Zeichen maximal eingegeben werden können.                                                                                         | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_pattern`            | `_pattern`       | Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_placeholder`        | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                                                         | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_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; _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'`    |
-| `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |
+| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `true`      |
+| `_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` |
+| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                          | `boolean` \| `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_list`               | `_list`          | <span class="text-red-500">**[DEPRECATED]**</span> Use _suggestions.<br/><br/>Gibt die Liste der Vorschlagswörter an.                                   | `string` \| `string[]` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
+| `_maxLength`          | `_max-length`    | Gibt an, wie viele Zeichen maximal eingegeben werden können.                                                                                         | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_pattern`            | `_pattern`       | Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_placeholder`        | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                                                         | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_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`        | `_smart-button`  | Ermöglicht eine Schaltfläche in das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                              | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaLabel?: string` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                | `W3CInputValue[]` \| `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` |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `'top'`     |
+| `_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'`    |
+| `_value`              | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 
 
 ## Slots
@@ -97,11 +100,13 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 ### Depends on
 
 - kol-input
+- [kol-tooltip](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
   kol-input-text --> kol-input
+  kol-input-text --> kol-tooltip
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert

package/doc/kolibri.md

@@ -15,12 +15,10 @@ Diese Komponente implementiert das Logo von KoliBri.
 
 ## Beispiele
 
-<div style="display: flex; justify-content: flex-start">
-  <kol-kolibri />
-  <kol-kolibri _animate />
-  <kol-kolibri _animate _labeled="false" /> 
-  <kol-kolibri _labeled="false" />
-</div>
+<kol-kolibri />
+<kol-kolibri _animate />
+<kol-kolibri _animate _labeled="false" /> 
+<kol-kolibri _labeled="false" />
 
 ## Barrierefreiheit
 

package/doc/link-button.md

@@ -1,28 +1,28 @@
 # LinkButton
 
 Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
-Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
+Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="/docs/components/button" _label="Seite des Buttons"></kol-link>.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="danger"></kol-link-button>
-<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Primary" _variant="primary"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Secondary" _variant="secondary"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Normal" _variant="normal"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Secondary" _variant="danger"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Ghost" _variant="ghost"></kol-link-button>
 ```
 
 ### Beispiel
 
 <div class="flex gap-2">
-  <kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-  <kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-  <kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-  <kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
-  <kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Primary" _variant="primary"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Secondary" _variant="secondary"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Normal" _variant="normal"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Danger" _variant="danger"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Ghost" _variant="ghost"></kol-link-button>
 </div>
 
 <!-- Auto Generated Below -->
@@ -30,27 +30,29 @@ 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`                             |
-| `_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`          | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                       | `boolean` \| `undefined`                                                                 | `false`                             |
-| `_label` _(required)_ | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                     | `string`                                                                               | `undefined`                         |
-| `_on`                 | --                    | <span class="text-red-500">**[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`       | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2<br/><br/>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`        | <span style="color:red">**[DEPRECATED]**</span> use _listen-aria-current instead<br/><br/>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`       | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>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 style="color:red">**[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`       | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>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`            | <span style="color:red">**[DEPRECATED]**</span> Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.<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`                         |
+| `_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.).                                                                                                                                              | `boolean` \| `string`                                                                                  | `undefined`                         |
+| `_listenAriaCurrent`  | `_listen-aria-current` | Listen on a aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.                                                                             | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                         | `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.
@@ -77,22 +77,21 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 | `Tab`   | Fokussiert das erste Element der LinkGroup. |
 | `Enter` | Ruft den hinterlegten Link auf.             |
 
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## 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