@public-ui/components 1.1.15 → 1.1.16-rc.1

package/doc/tooltip.md

@@ -0,0 +1,66 @@
+# Tooltip
+
+<kol-alert _type="warning">Die **Tooltip**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden. Denn der Tooltip ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird.</kol-alert>
+
+Die **Tooltip**-Komponente implementiert das Gegenstück zum `Aria-Label`. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.
+
+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.
+
+## 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.
+
+<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.
+</kol-alert>
+
+## Links und Referenzen
+
+- https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/titel-tooltips-toggletips
+
+<!-- Auto Generated Below -->
+
+
+## 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`                 | `_id`     | Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.                                       | `string \| undefined`                                 | `undefined` |
+| `_label` _(required)_ | `_label`  | Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird. | `string`                                              | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-abbr](../abbr)
+ - [kol-button-link](../button-link)
+ - kol-button-wc
+ - [kol-link-button](../link-button)
+ - kol-link-wc
+
+### Depends on
+
+- [kol-badge](../badge)
+
+### Graph
+```mermaid
+graph TD;
+  kol-tooltip --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-span-wc --> kol-icon
+  kol-button-wc --> kol-tooltip
+  kol-abbr --> kol-tooltip
+  kol-button-link --> kol-tooltip
+  kol-link-button --> kol-tooltip
+  kol-link-wc --> kol-tooltip
+  style kol-tooltip fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/version.md

@@ -0,0 +1,67 @@
+# 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.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<div>
+	<kol-version _version="1.0.0"></kol-version>
+</div>
+```
+
+### Beispiel
+
+<kol-version _version="1.0.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.
+
+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
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute  | Description                          | Type     | Default     |
+| ----------------------- | ---------- | ------------------------------------ | -------- | ----------- |
+| `_version` _(required)_ | `_version` | Gibt die Versionsnummer als Text an. | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-badge](../badge)
+
+### Graph
+```mermaid
+graph TD;
+  kol-version --> kol-badge
+  kol-badge --> kol-span-wc
+  kol-badge --> kol-button-wc
+  kol-span-wc --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip
+  kol-tooltip --> kol-badge
+  style kol-version fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+