@public-ui/components 1.5.0-rc.11 → 1.5.0-rc.12

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
 
@@ -57,7 +64,7 @@ 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`     |
+| `_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` |

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

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