@public-ui/components 1.6.0-rc.17 → 1.6.0-rc.19

package/doc/input-range.md

@@ -40,7 +40,7 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 
 ## Links und Referenzen
 
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <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>
 
 <!-- Auto Generated Below -->
 
@@ -59,12 +59,13 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 | `_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`          | Gibt die Liste der Vorschlagswörter an.                                                                                                              | `Option<number>[]` \| `string` \| `undefined`                                                               | `undefined` |
+| `_list`               | `_list`          | <span class="text-red-500">**[DEPRECATED]**</span> Use _suggestions.<br/><br/>Gibt die Liste der Vorschlagswörter an.                                   | `Option<W3CInputValue>[]` \| `string` \| `undefined`                                                        | `undefined` |
 | `_max`                | `_max`           | Gibt den größtmöglichen Eingabewert an.                                                                                                              | `number` \| `undefined`                                                                                   | `undefined` |
 | `_min`                | `_min`           | Gibt den kleinstmöglichen Eingabewert an.                                                                                                            | `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` |
 | `_step`               | `_step`          | Gibt die Schrittweite der Wertveränderung an.                                                                                                        | `number` \| `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`     |

package/doc/input-text.md

@@ -49,8 +49,8 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 
 ## Links und Referenzen
 
-- <kol-link _href="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/" _target="_blank"></kol-link>
+- <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 -->
 
@@ -70,7 +70,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_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`          | Gibt die Liste der Vorschlagswörter an.                                                                                                              | `string` \| `string[]` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `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` |
@@ -79,7 +79,8 @@ 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`        | `_smart-button`  | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).                                             | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _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; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `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`     |

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,28 +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`         | <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.).                                                                             | `boolean` \| `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'`                          |
+| 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.md

@@ -12,7 +12,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 ```html
 <p>
 	In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-	<kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
+	<kol-link _href="https://www.w3.org" _label="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
 	<i>
 		<b>inline-Element</b>
 	</i>
@@ -24,7 +24,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 
 <p>
    In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-  <kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
+  <kol-link _href="https://www.w3.org" _label="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
     <b>inline-Element</b>
     </i> ausgegeben.
 </p>
@@ -68,30 +68,31 @@ 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`         | <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.).                                                                                 | `boolean` \| `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'`                                       |
+| 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`                                    |
+| `_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`                                    |
+| `_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.).                                                                                                                                              | `boolean` \| `string` \| `undefined`                                                    | `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> 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,10 +1,10 @@
 # Hinweis
 
-Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt (<kol-link _href="https://caniuse.com/?search=dialog" _target="_blank" _label="caniuse"></kol-link>), 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.
+Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt (<kol-link _href="https://caniuse.com/?search=dialog" _label="https://caniuse.com/?search=dialog" _target="_blank" _label="caniuse"></kol-link>), 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`-Tag
 
-Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
+Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
 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.
@@ -99,8 +99,8 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ### Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _label="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _label="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/nav.md

@@ -61,7 +61,7 @@ Um Untermenüpunkte zu erzeugen, erweitern Sie die JSON-Struktur um das zusätzl
 
 ### Kompakte Navigationsleiste anzeigen
 
-Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_compact`**.
+Um die Navigationsleiste in der kompakten Darstellung auszugeben, setzen Sie das Attribut **`_hide-label`**.
 
 ### Umschalter normale/kompakte Darstellung
 
@@ -110,8 +110,9 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 | `_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`      |
+| `_compact`            | `_compact`            | <span style="color:red">**[DEPRECATED]**</span> Use _hide-label<br/><br/>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`      |
+| `_hideLabel`          | `_hide-label`         | Defines if navigation labels should be hidden                                                                                                                                                           | `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'` |

package/doc/progress.md

@@ -37,8 +37,8 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Links und Referenzen
 
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _label="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/quote.md

@@ -6,28 +6,29 @@ Die **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`
 
 ## Verwendung
 
-Mittels **`_caption`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
+Mittels **`_label`** kann eine Überschrift gesetzt werden, während **`_quote`** das eigentliche Zitat enthält. Der Ursprung wird über **`_href`** gesetzt.
 Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann **`_variant`** auf `block` gesetzt werden.
 
 ## References
 
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
-- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/quote.html" _label="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/cite.html" _label="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
+- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _label="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                                                 | Type                               | Default     |
-| --------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
-| `_caption`            | `_caption` | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`              | `undefined` |
-| `_href` _(required)_  | `_href`    | Gibt den Link zur Quelle des Zitates an.                                                                                    | `string`                           | `undefined` |
-| `_quote` _(required)_ | `_quote`   | Setzt den Text, also das Zitat selbst.                                                                                      | `string`                           | `undefined` |
-| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                               | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
+| Property              | Attribute  | Description                                                                                                                                                                                      | Type                               | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ----------- |
+| `_caption`            | `_caption` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`              | `undefined` |
+| `_href` _(required)_  | `_href`    | Gibt den Link zur Quelle des Zitates an.                                                                                                                                                         | `string`                           | `undefined` |
+| `_label`              | `_label`   | Defines the label of the citation link.                                                                                                                                                          | `string` \| `undefined`              | `undefined` |
+| `_quote` _(required)_ | `_quote`   | Setzt den Text, also das Zitat selbst.                                                                                                                                                           | `string`                           | `undefined` |
+| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                    | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
 
 
 ## Dependencies

package/doc/select.md

@@ -7,30 +7,30 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 
 ```html
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 	Auswahlfeld (Mehrfachauswahl)
 </kol-select>
 <kol-select
-	_list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
-	_size="4"
+	_options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
+	_rows="4"
 	_value="['1']"
 >
-	Auswahlfeld mit _size
+	Auswahlfeld mit _rows
 </kol-select>
 ```
 
 ### Beispiel
 
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 Auswahlfeld (Mehrfachauswahl)
 </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _size="4" _value="['1']">Auswahlfeld mit size</kol-select>
+<kol-select _options="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _rows="4" _value="['1']">Auswahlfeld mit rows</kol-select>
 
 ## Verwendung
 
-Die Auswahlmöglichkeiten werden über das Attribut **`_list`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
+Die Auswahlmöglichkeiten werden über das Attribut **`_options`** als Objekt oder JSON-String an die Komponente übergeben. Je Option müssen die Werte **`label`** und **`value`** angegeben werden.
 
 Beispiel für die Konstruktion des JSON-Objektes:
 
@@ -44,7 +44,7 @@ Beispiel für die Konstruktion des JSON-Objektes:
 
 ### Individuelle Höhe angeben
 
-Über das Attribut **`_size`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
+Über das Attribut **`_rows`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
 
 <!--### Best practices-->
 
@@ -96,17 +96,19 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                  | `true`      |
 | `_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` |
-| `_height`             | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _size instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll.                | `string` \| `undefined`                                                                                   | `undefined` |
+| `_height`             | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll.                | `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.).                          | `boolean` \| `string`                                                                                     | `undefined` |
-| `_list` _(required)_  | `_list`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `SelectOption<W3CInputValue>[]` \| `string`                                                               | `undefined` |
+| `_list`               | `_list`          | <span style="color:red">**[DEPRECATED]**</span> use _options<br/><br/>Options the user can choose from, also supporting Optgroup.                    | `SelectOption<W3CInputValue>[]` \| `string` \| `undefined`                                                  | `undefined` |
 | `_multiple`           | `_multiple`      | Gibt an, ob mehrere Werte eingegeben werden können.                                                                                                  | `boolean` \| `undefined`                                                                                  | `false`     |
 | `_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` |
+| `_options`            | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                          | `(Option<W3CInputValue>` \| `Optgroup<W3CInputValue>)[]` \| `string` \| `undefined`                           | `undefined` |
 | `_required`           | `_required`      | Macht das Eingabeelementzu einem Pflichtfeld.                                                                                                        | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_rows`               | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                 | `number` \| `undefined`                                                                                   | `undefined` |
 | `_size`               | `_size`          | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                  | `number` \| `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'`     |

package/doc/skip-nav.md

@@ -47,7 +47,7 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 
 ## Links und Referenzen
 
-- <kol-link _href="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
+- <kol-link _href="https://webaim.org/techniques/skipnav/" _label="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->