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

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">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">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>
@@ -63,37 +63,36 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 | `Tab`   | Fokussiert das Link-Element.    |
 | `Enter` | Ruft den hinterlegten Link auf. |
 
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## 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.).                                                                                 | `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/>Deprecated: Defines which elements are controlled by this component. (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/>Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date`` \| ``location`` \| ``page`` \| ``step`` \| ``time`` \| ``true`. (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/>Deprecated: Defines whether the interactive element of the component expanded something. (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/>Deprecated: Setzt die semantische Beschriftung der Komponente.                                                                                                                                                                                                                   | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_ariaSelected`      | `_aria-selected`       | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Deprecated: Defines whether the interactive element of the component is selected (e.g. 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/>Deprecated: Makes the element not focusable and ignore all events.                                                                                                                                                  | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_download`          | `_download`            | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                                                                                                                                               | `boolean` \| `string` \| `undefined`                                                    | `false`                                        |
+| `_hideLabel`         | `_hide-label`          | Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                                                                                                                              | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_href` _(required)_ | `_href`                | Defines the target URI of the link.                                                                                                                                                                                                                                                                                                                          | `string`                                                                            | `undefined`                                    |
+| `_icon`              | `_icon`                | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                                                                                                                                                                                                               | `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: Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                           | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `undefined`                                    |
+| `_iconOnly`          | `_icon-only`           | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                                         | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_label`             | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                                                                 | `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`                | --                     | Defines the callback functions for links.                                                                                                                                                                                                                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }` | `undefined`                                    |
+| `_role`              | `_role`                | Defines the role of the components primary element.                                                                                                                                                                                                                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                          | `undefined`                                    |
+| `_selector`          | `_selector`            | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Deprecated: 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/>Deprecated: Gibt an, ob der Link nur beim Fokus sichtbar ist.                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_tabIndex`          | `_tab-index`           | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                                                                             | `number` \| `undefined`                                                               | `undefined`                                    |
+| `_target`            | `_target`              | Defines where to open the link.                                                                                                                                                                                                                                                                                                                              | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_targetDescription` | `_target-description`  | Defines the description to use when the link is going to be opened in another application.                                                                                                                                                                                                                                                                   | `string` \| `undefined`                                                               | `'Der Link wird in einem neuen Tab geöffnet.'` |
+| `_tooltipAlign`      | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `'right'`                                      |
+| `_useCase`           | `_use-case`            | <span style="color:red">**[DEPRECATED]**</span> will be removed in v2<br/><br/>Deprecated: Gibt den Verwendungsfall des Links an.                                                                                                                                                                                                                            | `"image"` \| `"nav"` \| `"text"` \| `undefined`                                           | `'text'`                                       |
 
 
 ## Dependencies
@@ -115,9 +114,9 @@ graph TD;
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-breadcrumb --> kol-link
   kol-input-adapter-leanup --> kol-link
   kol-link-group --> kol-link

package/doc/logo.md

@@ -7,12 +7,12 @@ Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen die Logos ver
 ### Code
 
 ```html
-<kol-logo _org_="BReg"></kol-logo>
+<kol-logo _org="BReg"></kol-logo>
 ```
 
 ### Beispiel
 
-<kol-logo _org_="BReg"></kol-logo>
+<kol-logo _org="BReg"></kol-logo>
 
 ## Verwendung
 
@@ -48,23 +48,15 @@ Das Attribut **`_org`** wird für die Definition des gewünschten Logos verwende
 
 **BMZ** = **_Bundesministerium für wirtschaftliche Zusammenarbeit und Entwicklung_**
 
-<!--### Best practices
-
-### Anwendungsfälle-->
-
-## Barrierefreiheit
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property            | Attribute | Description                                                                                                                                                                     | Type                                                           | Default     |
-| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
-| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` \| `undefined` | `undefined` |
-| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium`              | `undefined` |
+| Property            | Attribute | Description                                                                                                                                                                                 | Type                                                           | Default     |
+| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
+| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Deprecated: Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` \| `undefined` | `undefined` |
+| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                              | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium`              | `undefined` |
 
 
 ----------------------------------------------

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 ([caniuse](https://caniuse.com/?search=dialog)), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.
+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>`
+## Verwendung von `dialog`-Tag
 
-Die Dokumentation des `<dialog>` finden Sie [hier(MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
+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,21 +99,21 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 
 ### Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#dialog_modal
-- https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
+- <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 -->
 
 
 ## Properties
 
-| Property         | Attribute     | Description                                                                                                                                                                                             | Type                                                            | Default     |
-| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
-| `_activeElement` | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                                                                                                                 | `HTMLElement` \| `null` \| `undefined`                              | `undefined` |
-| `_ariaLabel`     | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `undefined` |
-| `_label`         | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined` |
-| `_on`            | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                                                                                                                                        | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
-| `_width`         | `_width`      | Setzt die Breite des Modals. (max-width: 100%).                                                                                                                                                         | `string` \| `undefined`                                           | `'100%'`    |
+| Property         | Attribute     | Description                                                                                                                                | Type                                                            | Default     |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ----------- |
+| `_activeElement` | --            | Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.                                                    | `HTMLElement` \| `null` \| `undefined`                              | `undefined` |
+| `_ariaLabel`     | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente. | `string` \| `undefined`                                           | `undefined` |
+| `_label`         | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string` \| `undefined`                                           | `undefined` |
+| `_on`            | --            | Gibt die EventCallback-Function für das Schließen des Modals an.                                                                           | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| `_width`         | `_width`      | Defines the width of the modal. (max-width: 100%)                                                                                          | `string` \| `undefined`                                           | `'100%'`    |
 
 
 ## Slots

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
 
@@ -100,24 +100,23 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 | `Tab`   | Fokussiert den ersten Menüpunkt in der Navigation. Nachfolgend kann mit der Tab-Taste jeder Menüpunkt angesprungen werden. Wenn der Has-compact-Button aktiviert wurde, ist dieser ebenfalls mit der Tab-Taste erreichbar. |
 | `Enter` | Klappt Unterpunkte auf/zu, sofern eine Ausklappschaltfläche fokussiert ist, aktiviert die Schaltfläche oder öffnet den Link anderenfalls.                                                                                  |
 
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                                             | Type                                                            | Default      |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------ |
-| `_ariaCurrentValue`   | `_aria-current-value` | Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll.                                                                                        | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
-| `_ariaLabel`          | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                           | `undefined`  |
-| `_collapsible`        | `_collapsible`        | Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.                                                                                                           | `boolean` \| `undefined`                                          | `true`       |
-| `_compact`            | `_compact`            | Gibt an, ob die Navigation kompakt angezeigt wird.                                                                                                                                                      | `boolean` \| `undefined`                                          | `false`      |
-| `_hasCompactButton`   | `_has-compact-button` | <span style="color:red">**[DEPRECATED]**</span> Version 2<br/><br/>Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.                       | `boolean` \| `undefined`                                          | `false`      |
-| `_label`              | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`                                           | `undefined`  |
-| `_links` _(required)_ | `_links`              | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
-| `_orientation`        | `_orientation`        | Gibt die horizontale oder vertikale Ausrichtung der Komponente an.                                                                                                                                      | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
-| `_variant`            | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Gibt an, welche Variante der Darstellung genutzt werden soll.       | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
+| Property              | Attribute             | Description                                                                                                                                                                                            | Type                                                            | Default      |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------ |
+| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value of aria-current to be used with the current context within the navigation.                                                                                                           | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` | `false`      |
+| `_ariaLabel`          | `_aria-label`         | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente.                                                             | `string` \| `undefined`                                           | `undefined`  |
+| `_collapsible`        | `_collapsible`        | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                                                                               | `boolean` \| `undefined`                                          | `true`       |
+| `_compact`            | `_compact`            | <span style="color:red">**[DEPRECATED]**</span> Use _hide-label<br/><br/>Deprecated: 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/>Deprecated: Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.          | `boolean` \| `undefined`                                          | `false`      |
+| `_hideLabel`          | `_hide-label`         | Hides the label.                                                                                                                                                                                       | `boolean` \| `undefined`                                          | `false`      |
+| `_label`              | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                     | `string` \| `undefined`                                           | `undefined`  |
+| `_links` _(required)_ | `_links`              | Defines the list of links, buttons or texts to render.                                                                                                                                                 | `ButtonOrLinkOrTextWithChildrenProps[]` \| `string`               | `undefined`  |
+| `_orientation`        | `_orientation`        | Defines whether the orientation of the component is horizontal or vertical.                                                                                                                            | `"horizontal"` \| `"vertical"` \| `undefined`                       | `'vertical'` |
+| `_variant`            | `_variant`            | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major version.<br/><br/>Deprecated: Defines which variant should be used for presentation. | `"primary"` \| `"secondary"` \| `undefined`                         | `'primary'`  |
 
 
 ## Dependencies
@@ -138,12 +137,12 @@ graph TD;
   kol-button-link-text-switch --> kol-link-wc
   kol-button-link-text-switch --> kol-span-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-button --> kol-button-wc
   style kol-nav fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/pagination.md

@@ -41,28 +41,25 @@ Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
 Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
 Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
 
-<!-- ## Barrierefreiheit -->
-
-<!-- ## Links und Referenzen -->
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute            | Description                                                                                      | Type                                                                                                                                                                                                                   | Default     |
-| --------------------- | -------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_boundaryCount`      | `_boundary-count`    | Gibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.   | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
-| `_customClass`        | `_custom-class`      | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.          | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
-| `_hasButtons`         | `_has-buttons`       | Setzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.                              | `boolean` \| `string` \| `undefined` \| `{ first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |
-| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                                             | `{ onChangePage?: EventValueOrEventCallback<Event, number>` \| `undefined; onChangePageSize?: EventValueOrEventCallback<Event, number>` \| `undefined; onClick?: EventValueOrEventCallback<Event, number>` \| `undefined; }` | `undefined` |
-| `_page` _(required)_  | `_page`              | Gibt an, welche Seite aktuell ausgewählt ist.                                                    | `number`                                                                                                                                                                                                               | `undefined` |
-| `_pageSize`           | `_page-size`         | Gibt an, wie viele Einträge pro Seite angezeigt werden.                                          | `number`                                                                                                                                                                                                               | `1`         |
-| `_pageSizeOptions`    | `_page-size-options` | Setzt die Optionen für das Seitenlängenselect.                                                   | `number[]` \| `string`                                                                                                                                                                                                   | `[]`        |
-| `_siblingCount`       | `_sibling-count`     | Gibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.                       | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
-| `_tooltipAlign`       | `_tooltip-align`     | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                  | `'top'`     |
-| `_total` _(required)_ | `_total`             | Setzt die Gesamtanzahl der Seiten.                                                               | `number`                                                                                                                                                                                                               | `undefined` |
-| `_variant`            | `_variant`           | Gibt an, welche Variante der Darstellung genutzt werden soll.                                    | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                                                                                   | `'normal'`  |
+| Property              | Attribute            | Description                                                                       | Type                                                                                                                                                                                                                   | Default     |
+| --------------------- | -------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_boundaryCount`      | `_boundary-count`    | Defines the amount of pages to show next to the outer arrow buttons.              | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
+| `_customClass`        | `_custom-class`      | Defines the custom class attribute for the buttons.                               | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
+| `_hasButtons`         | `_has-buttons`       | Defines which navigation buttons to render (first, last, next, previous buttons). | `boolean` \| `string` \| `undefined` \| `{ first: boolean; last: boolean; next: boolean; previous: boolean; }`                                                                                                               | `true`      |
+| `_label`              | `_label`             | Defines the description of the component.                                         | `string` \| `undefined`                                                                                                                                                                                                  | `undefined` |
+| `_on` _(required)_    | --                   | Gibt an, auf welche Callback-Events reagiert werden.                              | `{ onChangePage?: EventValueOrEventCallback<Event, number>` \| `undefined; onChangePageSize?: EventValueOrEventCallback<Event, number>` \| `undefined; onClick?: EventValueOrEventCallback<Event, number>` \| `undefined; }` | `undefined` |
+| `_page` _(required)_  | `_page`              | Defines the current page.                                                         | `number`                                                                                                                                                                                                               | `undefined` |
+| `_pageSize`           | `_page-size`         | Defines the amount of entries to show per page.                                   | `number`                                                                                                                                                                                                               | `1`         |
+| `_pageSizeOptions`    | `_page-size-options` | Defines the options for the page-size-select.                                     | `number[]` \| `string`                                                                                                                                                                                                   | `[]`        |
+| `_siblingCount`       | `_sibling-count`     | Defines the amount of pages to show next to the current page.                     | `number` \| `undefined`                                                                                                                                                                                                  | `1`         |
+| `_tooltipAlign`       | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.         | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                  | `'top'`     |
+| `_total` _(required)_ | `_total`             | Setzt die Gesamtanzahl der Seiten.                                                | `number`                                                                                                                                                                                                               | `undefined` |
+| `_variant`            | `_variant`           | Defines which variant should be used for presentation.                            | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                                                                                   | `'normal'`  |
 
 
 ## Dependencies
@@ -85,10 +82,11 @@ graph TD;
   kol-pagination --> kol-button-wc
   kol-button --> kol-button-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-select --> kol-input
+  kol-select --> kol-tooltip-wc
   kol-input --> kol-icon
   kol-input --> kol-button-wc
   kol-input --> kol-alert

package/doc/popover.md

@@ -10,10 +10,10 @@ Das Triggerelement ist immer das im HTML vorangehende Element (previousSibling).
 
 ## Properties
 
-| Property | Attribute | Description                                                        | Type                                                  | Default |
-| -------- | --------- | ------------------------------------------------------------------ | ----------------------------------------------------- | ------- |
-| `_align` | `_align`  | Setzt die Ausrichtung des Popovers in Relation zum Triggerelement. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'` |
-| `_show`  | `_show`   | Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.    | `boolean` \| `undefined`                                | `false` |
+| Property | Attribute | Description                                                                                               | Type                                                  | Default |
+| -------- | --------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------- |
+| `_align` | `_align`  | Defines where to show the Tooltip preferably: top, right, bottom or left. In relation to trigger element. | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'` |
+| `_show`  | `_show`   | Makes the element show up.                                                                                | `boolean` \| `undefined`                                | `false` |
 
 
 ## Slots

package/doc/progress.md

@@ -37,22 +37,22 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 
 ## Links und Referenzen
 
-- https://developer.mozilla.org/de/docs/Web/HTML/Element/progress
-- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
+- <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 -->
 
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                                                                                              | Type                                                                          | Default     |
-| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | ----------- |
-| `_label`              | `_label`   | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                              | `string` \| `undefined`                                                         | `undefined` |
-| `_max` _(required)_   | `_max`     | Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.                                                                                                     | `number`                                                                      | `undefined` |
-| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
-| `_unit`               | `_unit`    | Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)                                                                                                          | `string` \| `undefined`                                                         | `'%'`       |
-| `_value` _(required)_ | `_value`   | Gibt an, wie weit die Anzeige fortgeschritten ist.                                                                                                                       | `number`                                                                      | `undefined` |
-| `_variant`            | `_variant` | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                            | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
+| Property              | Attribute  | Description                                                                                                                                         | Type                                                                          | Default     |
+| --------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------- |
+| `_label`              | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                  | `string` \| `undefined`                                                         | `undefined` |
+| `_max` _(required)_   | `_max`     | Defines at which value the progress display is completed.                                                                                           | `number`                                                                      | `undefined` |
+| `_type`               | `_type`    | <span class="text-red-500">**[DEPRECATED]**</span> will be removed in v2, use _variant<br/><br/>Defines which variant should be used for presentation. | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
+| `_unit`               | `_unit`    | Defines the unit of the step values (not shown).                                                                                                    | `string` \| `undefined`                                                         | `'%'`       |
+| `_value` _(required)_ | `_value`   | Defines the progress.                                                                                                                               | `number`                                                                      | `undefined` |
+| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                                                              | `"bar"` \| `"cycle"` \| `"cycle-label-value"` \| `"cycle-value-label"` \| `undefined` | `undefined` |
 
 
 ----------------------------------------------

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
 
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
-- https://www.mediaevent.de/html/quote.html
-- https://www.mediaevent.de/html/cite.html
-- https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/
+- <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/>Deprecated: Defines the visible caption of the component. | `string` \| `undefined`              | `undefined` |
+| `_href` _(required)_  | `_href`    | Defines the link to the source of the quote.                                                                                   | `string`                           | `undefined` |
+| `_label`              | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).             | `string` \| `undefined`              | `undefined` |
+| `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                                 | `string`                           | `undefined` |
+| `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                                         | `"block"` \| `"inline"` \| `undefined` | `'inline'`  |
 
 
 ## Dependencies
@@ -43,9 +44,9 @@ graph TD;
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-quote fill:#f9f,stroke:#333,stroke-width:4px
 ```