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

package/doc/tabs.md

@@ -4,18 +4,15 @@ Die **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite
 
 ## Konstruktion
 
-Nach dem Laden der Komponente wird die erste Registerkarte links automatisch optisch als **_aktiv_** hervorgehoben. Jede Registerkarte übernimmt den Status **_aktiv_** nach dem Anklicken. Der Status **_aktiv_** kann mit dem Attribut `_selected (Index der Registerkarte)` auch manuell gesetzt werden,
-um z.B. die dritte anstelle der ersten Registerkarte aktiv zu setzen.
+Nach dem Laden der Komponente wird die erste Registerkarte links automatisch optisch als **_aktiv_** hervorgehoben. Jede Registerkarte übernimmt den Status **_aktiv_** nach dem Anklicken. Der Status **_aktiv_** kann mit dem Attribut **`_selected`** auch manuell auf den Index der Registrierkarte gesetzt werden.
 Die einzelnen Inhalte der Registerkarte werden in einem eigenen `HTMLDivElement` als `<div>Inhalt der Registerkarte</div>` innerhalb von `<kol-tabs></kol-tabs>` notiert.
 
-Die Zuordnung der JSON-Objekte im Attribut **\_tabs** zu den Div-Elementen erfolgt automatisch.
-
-Typischer Aufbau einer **Tab**-Komponente:
+Die Zuordnung der Daten im Attribut **`_tabs`** zu den Div-Elementen erfolgt automatisch.
 
 ### Code
 
 ```html
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
+<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
 	<div>Inhalt von Tab 1</div>
 	<div>Inhalt von Tab 2</div>
 	<div>Inhalt von Tab 3</div>
@@ -24,7 +21,7 @@ Typischer Aufbau einer **Tab**-Komponente:
 
 ### Beispiel
 
-<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
+<kol-tabs _selected="0" _tabs='[{"_label":"Tab 1","_icon":"codicon codicon-home"},{"_label":"Tab 2", "_on": {"onClose": true}},{"_label":"Tab 3"}]'>
   <div>Inhalt von Tab 1</div>
   <div>Inhalt von Tab 2</div>
   <div>Inhalt von Tab 3</div>
@@ -34,82 +31,73 @@ Typischer Aufbau einer **Tab**-Komponente:
 
 ### Definition der Registerkarten
 
-Die Registerkarten werden als JSON-Struktur an das Attribut `_tabs` übergeben. Die Struktur ist als Wert-/Parameter-Paar aufgebaut:
+Die Daten für die Registerkarten können als Objekte oder JSON-String an das Attribut **`_tabs`** übergeben werden.
 
-```html
-[ { _label: 'Tab 1', }, { _label: 'Tab 2', _disabled: true, }, { _label: 'Tab 3', _icon: 'home', _on: { onClose: true }, }, ];
+```json
+[{ "_label": "Tab 1", "_icon": "codicon codicon-home" }, { "_label": "Tab 2", "_on": { "onClose": true } }, { "_label": "Tab 3" }]
 ```
 
-### Registerkarte auswählen
-
-Standardmäßig wird die erste Registerkarte von links aus als **_ausgewählt_** angezeigt. Verwenden Sie das Attribut `_selected` und als Wert die **interne ID**, um eine andere Registerkarte als ausgewählt zu setzen. Besitzt die **Tabs**-Komponente beispielsweise drei Tabs und soll das zweite Tab ausgewählt werden, setzen Sie **1** als Wert für `_selected` ein, da die ID immer von 0 aus hochgezählt wird.
-
 ### Registerkarte deaktivieren
 
-Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut `_disabled` und den Wert **true**.
+Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut **`_disabled`**.
 
 ### Close-Icon im Registekartenheader
 
-Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut `_on` und den Wert **"onClose":true** realisieren.
+Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut **`_on`** und den Wert **"onClose":true** realisieren.
 
 ### Best practices
 
-- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass der Benutzer keine Seite verlassen muss.
+- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass Nutzer:innen die Seite nicht verlassen müssen.
 - Registerkarten sollten in einer einzelnen, scrollbaren (falls erforderlich) Zeile über dem Inhalt positioniert werden, auf den sie sich beziehen.
 - Verwenden Sie die Registerkartenbezeichnung, um den Inhalt dieser Registerkarte klar und prägnant zu beschreiben und zwischen den verschiedenen Abschnitten zu unterscheiden.
-- Es sollte immer nur eine Registerkarte aktiv sein.
-- Verwenden Sie keine Registerkarten, um eine Sequenz oder einen Verlauf von Inhalten zu erstellen, die der Benutzer in einer bestimmten Reihenfolge lesen soll.
-- Verwenden Sie keine Registerkarten zum Vergleichen von Inhalten (z. B. unterschiedliche Spezifikationen).
-- Verwenden Sie keine Registerkarten, um Benutzer zu einer anderen Seite zu navigieren.
+- Verwenden Sie Registerkarten nicht, um eine Sequenz oder einen Verlauf von Inhalten zu erstellen, die der Benutzer in einer bestimmten Reihenfolge lesen soll.
+- Verwenden Sie Registerkarten nicht zum Vergleichen von Inhalten (z. B. unterschiedliche Spezifikationen).
 - Berücksichtigen Sie die Anzahl der Registerkarten, die Sie in die Registerkartengruppe aufnehmen. Wenn Sie das Gefühl haben, dass die Zahl zu groß wird, sollten Sie den Inhalt weiter aufteilen oder ein anderes Navigationsmuster/eine andere Komponente verwenden.
 
 ### Anwendungsfälle
 
-- Verwenden Sie Registerkarten, um verwandte Informationen auf einer Landingpage zu organisieren.
 - Über Registerkarten können Sie z.B. Dienstleistungen oder Vorteile in verschiedene Kategorien einteilen.
 - Verwenden Sie Registerkarten, um Benutzerprofile in verschiedene Abschnitte zu gliedern (z. B. persönliche Informationen, Termine, aktive Services).
 - Verwenden Sie Registerkarten, um FAQs in verschiedene Kategorien zu unterteilen.
 
 ## Barrierefreiheit
 
+### Tastatursteuerung
+
 Ausgewählte Tabs werden beim Anspringen mit der **Tab-Taste** mit einem deutlichen Focus-Rahmen umgeben. Die einzelnen Tabs können mit den Pfeiltasten **links** und **rechts** durchlaufen werden.
 
 Nach Anspringen eines Tabs kann mit Hilfe der **Tab-Taste** vom Header in den Inhaltsbereich der Registerkarte gewechselt werden.
 
 Unabhängig davon ob die Tab-Schalter oben, rechts, unten oder links angeordnet sind, bleibt die Tastatursteuerung gleich. Hintergrund ist, dass das Layout bei der Nutzung eines Screenreaders keine Rolle spielt. Eine unterschiedliche Pfeil-Tastensteuerung aufgrund der Layout-Anordnung würde daher nicht dem üblichen Bedienkonzept des W3C entsprechen.
 
-### Tastatursteuerung
-
 Bei der Umsetzung der Tastatursteuerung wurde sich an den Beispielen des W3C's orientiert.
 
 Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effizient über die gesamte Seite/Anwendung zu navigieren, ist nur 1 Schalter aus der Tab-Serie fokussierbar. Sobald der Nutzende auf der Tab-Navigation selbst ist, werden die Pfeiltasten verwendet, um zwischen den Tabs selbst wechseln.
 
-W3C-Samples:
+| Taste                            | Funktion                                                                                                |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `Tab`                            | Fokussiert den ersten aktiven Tab. Auf vorhandene Close-Icons können mit der Tab-Taste erreicht werden. |
+| `Pfeil-Tasten (links` \| `rechts)` | Wechselt zwischen den Tabs.                                                                             |
+
+## Links und Referenzen
 
 - https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
 - https://dequeuniversity.com/library/aria/tabpanel
 - https://design-system.service.gov.uk/components/tabs/
 
-| Taste                | Funktion                                                                                                |
-| -------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------- | --- |
-| `Tab`                | Fokussiert den ersten aktiven Tab. Auf vorhandene Close-Icons können mit der Tab-Taste erreicht werden. |
-| `Pfeil-Tasten (links | rechts)`                                                                                                | Wechselt zwischen den Tabs. |     |
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                  | Attribute     | Description                                                                           | Type                                                                                                                                                                                                                                                     | Default     |
-| ------------------------- | ------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.          | `string`                                                                                                                                                                                                                                                 | `undefined` |
-| `_on`                     | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.   | `undefined \| { onCreate?: EventCallback<Event> \| { label: string; callback: EventCallback<Event>; } \| undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent \| CustomEvent<any> \| KeyboardEvent \| PointerEvent, number> \| undefined; }` | `undefined` |
-| `_selected`               | `_selected`   | Gibt an, welches Tab selektiert sein soll.                                            | `number \| undefined`                                                                                                                                                                                                                                    | `0`         |
-| `_tabs` _(required)_      | `_tabs`       | Gibt die geordnete Liste der Seitenhierarchie in Links an.                            | `TabButtonProps[] \| string`                                                                                                                                                                                                                             | `undefined` |
-| `_tabsAlign`              | `_tabs-align` | Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind. | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                    | `'top'`     |
+| Property                  | Attribute     | Description                                                                         | Type                                                                                                                                                                                                                                                     | Default     |
+| ------------------------- | ------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.        | `string`                                                                                                                                                                                                                                                 | `undefined` |
+| `_on`                     | --            | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen. | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `CustomEvent<any>` \| `KeyboardEvent` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |
+| `_selected`               | `_selected`   | Gibt an, welches Tab selektiert sein soll.                                          | `number` \| `undefined`                                                                                                                                                                                                                                    | `0`         |
+| `_tabs` _(required)_      | `_tabs`       | Setzt die Daten für die Registrierkarten.                                           | `TabButtonProps[]` \| `string`                                                                                                                                                                                                                             | `undefined` |
+| `_tabsAlign`              | `_tabs-align` | Setzt die Position der Registrierkarten.                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 
 
 ## Dependencies
@@ -127,9 +115,7 @@ 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-tooltip --> kol-span-wc
   style kol-tabs fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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,28 @@ 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`  |
 
 
 ## Dependencies
@@ -94,12 +93,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,14 @@ 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'` |
 
 
 ## Dependencies
@@ -76,15 +83,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
 ```