@public-ui/components 1.5.0-rc.9 → 1.5.1

package/doc/textarea.md

@@ -1,7 +1,6 @@
 # Textarea
 
-Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum
-InputText können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
+Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href="/docs/components/input-text" _label="InputText"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
 
 ## Konstruktion
 
@@ -28,9 +27,9 @@ InputText können hier auch umfangreiche Inhalte eingegeben werden, die auch mit
 
 ## Verwendung
 
-Verwenden Sie die **Textarea**-Komponente wenn die Eingabe von größeren Textmengen erforderlich ist, z.B. bei der Erfassung eines Anliegens innerhalb eines Formulars.<br/>
-Mit Hilfe der Property **`_rows`** kann die Höhe der Textarea in Zeilen bestimmt werden.<br/>
-Über die Property **`_resize`** kann zusätzlich festgelegt werden ob und in welche Richtung die Textarea vergrößert werden kann. Der Wert **`none`** sperrt die Textarea gegen Größenänderungen.
+Verwenden Sie die **Textarea**-Komponente wenn die Eingabe von größeren Textmengen erforderlich ist, z.B. bei der Erfassung eines Anliegens innerhalb eines Formulars.
+Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestimmt werden.
+Über das Attribut **`_resize`** kann zusätzlich festgelegt werden ob und in welche Richtung die Textarea vergrößert werden kann. Der Wert **`none`** sperrt die Textarea gegen Größenänderungen.
 
 <!--### Best practices
 
@@ -41,9 +40,9 @@ Mit Hilfe der Property **`_rows`** kann die Höhe der Textarea in Zeilen bestimm
 ### Tastatursteuerung
 
 | Taste          | Funktion                                                                        |
-| -------------- | ------------------------------------------------------------------------------- | --- |
+| -------------- | ------------------------------------------------------------------------------- |
 | `Tab`          | Fokussiert die Textarea.                                                        |
-| `Pfeil-Tasten` | Können für die Navigation im Inhalt der fokussierten Textarea verwendet werden. |     |
+| `Pfeil-Tasten` | Können für die Navigation im Inhalt der fokussierten Textarea verwendet werden. |
 
 ## Links und Referenzen
 
@@ -54,28 +53,35 @@ Mit Hilfe der Property **`_rows`** kann die Höhe der Textarea in Zeilen bestimm
 
 ## Properties
 
-| Property           | Attribute        | Description                                                                                                          | Type                                                                                     | Default      |
-| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                 | `string \| undefined`                                                                    | `undefined`  |
-| `_adjustHeight`    | `_adjust-height` | Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.                                                    | `boolean \| undefined`                                                                   | `false`      |
-| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                             | `boolean \| undefined`                                                                   | `true`       |
-| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                          | `boolean \| undefined`                                                                   | `undefined`  |
-| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                             | `string \| undefined`                                                                    | `undefined`  |
-| `_hasCounter`      | `_has-counter`   | Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.                          | `boolean \| undefined`                                                                   | `undefined`  |
-| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                        | `boolean \| undefined`                                                                   | `undefined`  |
-| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                               | `string \| undefined`                                                                    | `''`         |
-| `_id` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                         | `string`                                                                                 | `undefined`  |
-| `_maxLength`       | `_max-length`    | Gibt an, wie viele Zeichen man maximal eingeben kann.                                                                | `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`  |
-| `_placeholder`     | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                         | `string \| undefined`                                                                    | `undefined`  |
-| `_readOnly`        | `_read-only`     | Gibt an, ob das Eingabefeld nur lesend ist.                                                                          | `boolean \| undefined`                                                                   | `undefined`  |
-| `_required`        | `_required`      | Gibt an, ob das Eingabefeld ein Pflichtfeld ist.                                                                     | `boolean \| undefined`                                                                   | `undefined`  |
-| `_resize`          | `_resize`        | Gibt an, ob die Größe des Eingabefeldes geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | `"both" \| "horizontal" \| "none" \| "vertical" \| undefined`                            | `'vertical'` |
-| `_rows`            | `_rows`          | Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.                                                       | `number \| undefined`                                                                    | `undefined`  |
-| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                         | `number \| undefined`                                                                    | `undefined`  |
-| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                        | `boolean \| undefined`                                                                   | `false`      |
-| `_value`           | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                  | `string \| undefined`                                                                    | `undefined`  |
+| Property        | Attribute        | Description                                                                                                                           | Type                                                                                     | Default      |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`    | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                  | `string` \| `undefined`                                                                    | `undefined`  |
+| `_adjustHeight` | `_adjust-height` | Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.                                                                     | `boolean` \| `undefined`                                                                   | `false`      |
+| `_alert`        | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                              | `boolean` \| `undefined`                                                                   | `true`       |
+| `_disabled`     | `_disabled`      | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.                                                       | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_error`        | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                              | `string` \| `undefined`                                                                    | `undefined`  |
+| `_hasCounter`   | `_has-counter`   | Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.                                                                  | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_hideLabel`    | `_hide-label`    | Versteckt das sichtbare Label des Elements.                                                                                           | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_hint`         | `_hint`          | Gibt den Hinweistext an.                                                                                                              | `string` \| `undefined`                                                                    | `''`         |
+| `_id`           | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                          | `string` \| `undefined`                                                                    | `undefined`  |
+| `_maxLength`    | `_max-length`    | Setzt die maximale Zeichenanzahl.                                                                                                     | `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`  |
+| `_placeholder`  | `_placeholder`   | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.                                                                          | `string` \| `undefined`                                                                    | `undefined`  |
+| `_readOnly`     | `_read-only`     | Setzt das Eingabefeld in den schreibgeschützten Modus.                                                                                | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_required`     | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                        | `boolean` \| `undefined`                                                                   | `undefined`  |
+| `_resize`       | `_resize`        | Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | `"both"` \| `"horizontal"` \| `"none"` \| `"vertical"` \| `undefined`                            | `'vertical'` |
+| `_rows`         | `_rows`          | Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.                                                                        | `number` \| `undefined`                                                                    | `undefined`  |
+| `_tabIndex`     | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                          | `number` \| `undefined`                                                                    | `undefined`  |
+| `_touched`      | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                         | `boolean` \| `undefined`                                                                   | `false`      |
+| `_value`        | `_value`         | Gibt den Wert des Eingabefeldes an.                                                                                                   | `string` \| `undefined`                                                                    | `undefined`  |
+
+
+## Slots
+
+| Slot                                            | Description |
+| ----------------------------------------------- | ----------- |
+| `"default Die Beschriftung des Eingabefeldes."` |             |
 
 
 ## Dependencies
@@ -94,12 +100,11 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-tooltip --> kol-span-wc
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   style kol-textarea fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/toast.md

@@ -2,14 +2,15 @@
 
 Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.
 
-Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für fünf Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
+Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für zehn Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<kol-toast _heading="Überschrift" _type="success"> Web Component </kol-toast>
+<kol-alert _heading="Erfolg" _type="success">Hier wird der Erfolg näher beschrieben.</kol-alert>
+<kol-alert _type="success" _show="false">Hier wird der Erfolg näher beschrieben.</kol-alert>
 ```
 
 ### Beispiel
@@ -23,23 +24,29 @@ Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster
 
 ### Überschrift
 
-Verwenden Sie das Attribut `_heading`, um die Überschrift des Toasts zu bestimmen.
+Verwenden Sie das Attribut **`_heading`**, um die Überschrift des Toasts zu bestimmen.
 
 ### Größe der Überschrift
 
-Verwenden Sie das Attribut `_level`, um die Größe der Überschrift zu bestimmen. Möglich sind die Werte 1 - 6.
+Verwenden Sie das Attribut **`_level`**, um die Überschriftenebene zu setzen.
 
 ### Anzeigen des Toasts
 
-Verwenden Sie das Attribut `_show`, um den Toast manuell anzuzeigen.
+Verwenden Sie das Attribut **`_show`**, um den Toast manuell anzuzeigen.
 
 ### Anzeigedauer des Toast
 
-Verwenden Sie das Attribut `_showDuration`, um die Anzeigedauer des Toasts festzulegen.
+Verwenden Sie das Attribut **`_showDuration`**, um die Anzeigedauer des Toasts festzulegen.
 
 ### Anzeigetyp des Toast
 
-Verwenden Sie das Attribut `_type`, um den Typ des Toasts festzulegen.
+Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögliche Werte sind:
+
+- `default`
+- `error`
+- `info`
+- `success`
+- `warning`
 
 <!--### Best practices
 
@@ -56,14 +63,21 @@ Verwenden Sie das Attribut `_type`, um den Typ des Toasts festzulegen.
 
 | Property        | Attribute        | Description                                                                       | Type                                                                    | Default     |
 | --------------- | ---------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
-| `_alert`        | `_alert`         | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean \| undefined`                                                  | `true`      |
-| `_hasCloser`    | `_has-closer`    | Gibt an, ob der Toast ein Schließen-Icon hat.                                     | `boolean \| undefined`                                                  | `false`     |
-| `_heading`      | `_heading`       | Gibt den Titel der Meldung an.                                                    | `string \| undefined`                                                   | `''`        |
-| `_level`        | `_level`         | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                          | `1`         |
-| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                  | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
-| `_show`         | `_show`          | Gibt an, ob der Toast eingeblendet wird.                                          | `boolean \| undefined`                                                  | `true`      |
-| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.              | `number \| undefined`                                                   | `10000`     |
-| `_type`         | `_type`          | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
+| `_alert`        | `_alert`         | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean` \| `undefined`                                                  | `true`      |
+| `_hasCloser`    | `_has-closer`    | Aktiviert das Schließen-Icon.                                                     | `boolean` \| `undefined`                                                  | `false`     |
+| `_heading`      | `_heading`       | Gibt den Titel der Meldung an.                                                    | `string` \| `undefined`                                                   | `''`        |
+| `_level`        | `_level`         | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                         | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
+| `_on`           | --               | Gibt die EventCallback-Function für das Schließen des Toasts an.                  | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
+| `_show`         | `_show`          | Gibt an, ob der Toast eingeblendet wird.                                          | `boolean` \| `undefined`                                                  | `true`      |
+| `_showDuration` | `_show-duration` | Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.              | `number` \| `undefined`                                                   | `10000`     |
+| `_type`         | `_type`          | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
+
+
+## Slots
+
+| Slot                                | Description |
+| ----------------------------------- | ----------- |
+| `"default Der Inhalt der Meldung."` |             |
 
 
 ## Dependencies
@@ -76,15 +90,14 @@ Verwenden Sie das Attribut `_type`, um den Typ des Toasts festzulegen.
 ```mermaid
 graph TD;
   kol-toast --> kol-alert
-  kol-alert --> kol-heading-wc
-  kol-alert --> kol-button-wc
-  kol-alert --> kol-icon
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   style kol-toast fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/tooltip.md

@@ -6,11 +6,11 @@ Die **Tooltip**-Komponente implementiert das Gegenstück zum `Aria-Label`. Es is
 
 Ein geöffneter Tooltip lässt sich mit der `Escape`-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.
 
-**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, muss für das vorrangehende Referenz-Element `inline-block` gesetzt werden.
+**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht `display: inline` haben.
 
 ## Barrierefreiheit
 
-Die Tooltip-Komponente wird bei Focus oder Hover angezeigt und dient ausschließlich dem/der sehenden Nutzer:in ohne Screenreader die Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden für die Screenreader versteckt.
+Die Tooltip-Komponente wird bei Fokus oder bei Bewegen der Maus über dem Referenzelement angezeigt und dient ausschließlich dem/der sehenden Nutzer:in ohne Screenreader die Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden für die Screenreader versteckt.
 
 <kol-alert _type="info">
 Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange zudem von der Entwicklung sichergestellt wurde, dass der Tooltip-Text auch in gleicher Weise vom Screenreader vorgelesen wird.
@@ -25,11 +25,11 @@ Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                            | Type                                                  | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_align`              | `_align`  | Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.                          | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'`     |
-| `_id` _(required)_    | `_id`     | Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.                                       | `string`                                              | `undefined` |
-| `_label` _(required)_ | `_label`  | Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird. | `string`                                              | `undefined` |
+| Property              | Attribute | Description                                                                           | Type                                                  | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------- |
+| `_align`              | `_align`  | Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
+| `_id` _(required)_    | `_id`     | Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.                      | `string`                                              | `undefined` |
+| `_label` _(required)_ | `_label`  | Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird. | `string`                                              | `undefined` |
 
 
 ## Dependencies
@@ -42,17 +42,15 @@ Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange
 
 ### Depends on
 
-- [kol-badge](../badge)
+- kol-span-wc
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-span-wc --> kol-icon
-  kol-button-wc --> kol-tooltip
   kol-abbr --> kol-tooltip
+  kol-button-wc --> kol-tooltip
   kol-link-wc --> kol-tooltip
   style kol-tooltip fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/version.md

@@ -1,7 +1,6 @@
 # Version
 
-Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die
-Angabe z.B. von Versionen einer Seite.
+Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.
 
 ## Konstruktion
 
@@ -9,27 +8,25 @@ Angabe z.B. von Versionen einer Seite.
 
 ```html
 <div>
-	<kol-version _version="1.0.0"></kol-version>
+	<kol-version _version="1.44.0"></kol-version>
 </div>
 ```
 
 ### Beispiel
 
-<kol-version _version="1.0.0"></kol-version>
+<kol-version _version="1.44.0"></kol-version>
 
 ## Verwendung
 
-Für die Konfiguration steht das Attribut `_label_` zur Verfügung und nimmt einen beliebigen Text auf, der in der Komponente angezeigt wird.
+Für die Konfiguration steht das Attribut **`_version`** zur Verfügung und nimmt einen beliebigen Text auf, dem in der Komponente ein `v` vorgestellt wird.
 
 Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
 
-Bitte beachten Sie, dass innerhalb der Komponente dem Text aus dem Attribut **\_version** ein **"v"** vorangestellt wird.
-
 <!--### Best practices
 
 ### Anwendungsfälle-->
 
-## Barrierefreiheit
+<!-- ## Barrierefreiheit -->
 
 <!--## Links und Referenzen
 
@@ -58,7 +55,7 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
-  kol-tooltip --> kol-badge
+  kol-tooltip --> kol-span-wc
   style kol-version fill:#f9f,stroke:#333,stroke-width:4px
 ```