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

package/doc/card.md

@@ -0,0 +1,162 @@
+# Card
+
+Um einzelne Bereiche Ihrer Webseite optisch hervorzuheben, bietet sich die **Card**-Komponente an. Mit ihrer Hilfe können Sie Ihre Inhalte sehr einfach strukturieren.
+
+Die **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_** und einem **_Fuß-Bereich_**.
+
+Der **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalts-Bereich** ist optisch durch eine horizontale Trennlinie unterhalb des Titel-Bereichs abgetrennt und wird in der Standardschrift ausgegeben.
+Der **Fuß-Bereich** wird optional durch ein Attribut aktiviert und stellt dann Platz für weitere Inhalte, z.B. eine **Button**-Komponente bereit. Der Fuß-Bereich ist optisch durch eine horizontale Trennlinie vom Inhalts-Bereich abgetrennt.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
+	<div slot="header">Text im Header-Bereich</div>
+	<div slot="content">
+		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+	</div>
+	<div slot="footer">Weiterer Beispieltext im Fuß-Bereich</div>
+</kol-card>
+```
+
+### Beispiel
+
+<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
+<div slot="header">Text im Header-Bereich</div>
+  <div slot="content">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
+    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+    dolor sit amet.
+  </div>
+  <div slot="footer">Weiterer Beispieltext im Fuß-Bereich</div>
+</kol-card>
+
+## Verwendung
+
+### Einfache Standard-Card
+
+In der Standardansicht besteht eine **Card** aus einem Titel-Bereich, der ohne setzen des Attributs **\_heading** mit drei Punkten angezeigt wird, und einem leeren Inhalts-Bereich.
+Die horizontale Trennlinie zwischen beiden Bereichen setzt KoliBri automatisch.
+
+### Titel der Card-Komponente
+
+Den Titel der Card bestimmen Sie durch Setzen des Attributs **\_heading="Ihr Titel"**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Beachten Sie, dass **HTML-Code** nicht erlaubt ist.
+
+### Größe des Titels
+
+Der **Titel** der Card kann als H1-H6 ausgegeben werden. Die Größe wird über das Attribut `_level`übergeben. Erlaubt sind die Werte 1 - 6.
+
+### Inhalt im Header-Bereich der Card-Komponente
+
+Den Inhalt im Header-Bereich der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Der Container muss als Attribut **slot="header"** enthalten. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Auch **HTML-Code** können sie hier einfügen. Dieser wird ausgewertet und anschließend als normaler Text ausgegeben. Sie können im Fuß-Bereich aber auch andere KoliBri-Komponenten einfügen, wie z.B. die **Button**-Komponente.
+
+Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
+
+```tsx
+<kol-card _heading="Beispiel" _level="1">
+	<div slot="header">Text im Header-Bereich</div>
+</kol-card>
+```
+
+### Inhalt der Card-Komponente
+
+Den Inhalt der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Der Container muss als Attribut **slot="content"** enthalten. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Auch **HTML-Code** können sie hier einfügen. Dieser wird ausgewertet und anschließend als normaler Text ausgegeben.
+
+Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
+
+```tsx
+<kol-card _heading="Beispiel" _level="1">
+	<div slot="content">Text im Inhalts-Bereich</div>
+</kol-card>
+```
+
+### Inhalt im Fuß-Bereich der Card-Komponente
+
+Den Inhalt im Fuß-Bereich der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Der Container muss als Attribut **slot="footer"** enthalten. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Auch **HTML-Code** können sie hier einfügen. Dieser wird ausgewertet und anschließend als normaler Text ausgegeben. Sie können im Fuß-Bereich aber auch andere KoliBri-Komponenten einfügen, wie z.B. die **Button**-Komponente.
+
+Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
+
+Wenn Sie den Fuß-Bereich der Card-Komponente nutzen möchten, achten Sie darauf das Attribut **\_has-footer** im Element `<kol-card>` zu setzen
+
+```tsx
+<kol-card _heading="Beispiel" _level="1" _has-footer>
+	<div slot="footer">Text im Fuß-Bereich</div>
+</kol-card>
+```
+
+### Best practices
+
+- Verwenden Sie die **Card**-Komponente, um in sich geschlossene Themenbereiche optisch zu kapseln.
+- Verwenden Sie die **Card**-Komponente, um Ihre Inhalte semantisch zu strukturieren.
+- Vermeiden Sie, zu viele Cards auf einer Inhaltsseite zu verwenden.
+- Vermeiden Sie, wichtige Inhalte innerhalb der Card-Komponente zu platzieren, wenn sich die zugehörigen Aktions-Elemente (Buttons, Links, etc.) nicht innerhalb der gleichen Card befinden.
+
+### Anwendungsfälle
+
+Hierzu sind unter **\*Beispiele** einige exemplarische Anwendungsfälle dargestellt..
+
+#### Einfügen weiterer KoliBri-Komponenten in die Card-Komponente
+
+Es ist auch möglich andere Komponenten der KoliBri-Bibliothek innerhalb der **Card**-Komponente zu verwenden. Hierzu ist unter **Beispiele** ein exemplarisches
+
+## Barrierefreiheit
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute     | Description                                                                                                                            | Type                                      | Default     |
+| ----------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `_hasFooter`            | `_has-footer` | Gibt an, ob die Card einen Footer-Bereich hat.                                                                                         | `boolean \| undefined`                    | `false`     |
+| `_heading` _(required)_ | `_heading`    | Gibt die Überschrift der Card an.                                                                                                      | `string`                                  | `undefined` |
+| `_headline`             | `_headline`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Überschrift der Card an. | `string \| undefined`                     | `undefined` |
+| `_level`                | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.                                                                              | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
+
+
+## Slots
+
+| Slot        | Description                                                                                      |
+| ----------- | ------------------------------------------------------------------------------------------------ |
+| `"content"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.                        |
+| `"footer"`  | Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.                            |
+| `"header"`  | Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card. |
+
+
+## Shadow Parts
+
+| Part     | Description |
+| -------- | ----------- |
+| `"card"` | TBD         |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-heading-wc](../heading)
+
+### Graph
+```mermaid
+graph TD;
+  kol-card --> kol-heading-wc
+  style kol-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/details.md

@@ -0,0 +1,116 @@
+# Details
+
+Mit Hilfe der **Detail**-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick
+durch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.
+
+Die **Detail**-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden,
+kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf das Icon nach unten hin geöffnet. Das Pfeil-Icon ändert dabei
+seine Ausrichtung von **_rechts_** nach **_unten_**.<br/>Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.
+
+## Konstruktion
+
+Der gewünschte Inhalt wird zwischen öffnendem und schließendem Element notiert.
+
+### Code
+
+```tsx
+<kol-details _summary="Ihre Überschrift" _open>
+	Ihr Text im Detail-Bereich
+</kol-details>
+```
+
+### Beispiel
+
+<kol-details _summary="Nach Laden der Seite geschlossen">
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+  sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+</kol-details>
+
+## Verwendung
+
+### Geöffnet anzeigen
+
+Verwenden Sie das Attribut `_open`, um die Komponente beim Anzeigen geöffnet darzustellen.
+
+### Einleitungstext
+
+Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Überschrift angezeigt werden soll.
+
+### Best practices
+
+- Verwenden Sie die **Detail**-Komponente, um ergänzende Inhalte zu einem Hauptthema platzsparend anzuordnen.
+- Die **Detail**-Komponente eignet sich gut für die Realisierung einer FAQ-Seite, wobei die Frage über das Attribut `_summary` und die Antwort im Inhaltsbereich ausgegeben werden kann.
+- Vermeiden Sie es, wichtige Informationen, die z.B. rechtliche Aspekte betreffen, in einem verborgenen Bereich auszugeben. Es kann nicht sichergestellt werden, dass der Benutzer diese Informationen auch sicher liest.
+- Vermeiden Sie es, zu viele **Detail**-Komponenten zu verwenden, da die Übersichtlichkeit der Seite hierunter leiden kann.
+
+### Anwendungsfälle
+
+#### Details-Komponente innerhalb eines Fließtextes
+
+<div>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+    </p>
+    <kol-details _summary="Nach Laden der Seite geschlossen">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+    </kol-details>
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+      sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+    </p>
+  </div>
+
+## Barrierefreiheit
+
+- Die **Details**-Komponente bietet sich an, um eine Kontext-sensitive Hilfe für die Barrierefreiheit umzusetzen.
+
+### Tastatursteuerung
+
+| Taste   | Funktion                                        |
+| ------- | ----------------------------------------------- |
+| `Tab`   | Fokussiert die Details-Komponente.              |
+| `Enter` | Öffnet bzw. schließt den Inhalt der Komponente. |
+
+## Links und Referenzen
+
+- https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute  | Description                                                       | Type                   | Default     |
+| ----------------------- | ---------- | ----------------------------------------------------------------- | ---------------------- | ----------- |
+| `_open`                 | `_open`    | Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist. | `boolean \| undefined` | `false`     |
+| `_summary` _(required)_ | `_summary` | Gibt die Zusammenfassung der Detailbeschreibung an.               | `string`               | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-icon](../icon)
+- [kol-indented-text](../indented-text)
+
+### Graph
+```mermaid
+graph TD;
+  kol-details --> kol-icon
+  kol-details --> kol-indented-text
+  style kol-details fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/form.md

@@ -0,0 +1,45 @@
+# Form
+
+## Konstruktion
+
+### Code
+
+### Beispiel
+
+## Verwendung
+
+### Anwendungsfälle
+
+### Best practices
+
+## Barrierefreiheit
+
+## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute        | Description                                                   | Type                                                                                                          | Default     |
+| --------------- | ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.     | `undefined \| { onSubmit?: EventCallback<Event> \| undefined; onReset?: EventCallback<Event> \| undefined; }` | `undefined` |
+| `_requiredText` | `_required-text` | Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll. | `boolean \| string \| undefined`                                                                              | `true`      |
+
+
+## Dependencies
+
+### Depends on
+
+- [kol-indented-text](../indented-text)
+
+### Graph
+```mermaid
+graph TD;
+  kol-form --> kol-indented-text
+  style kol-form fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/heading.md

@@ -0,0 +1,66 @@
+# Heading
+
+Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.
+
+## Konstruktion
+
+### Code
+
+```tsx
+<div>
+	<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
+</div>
+```
+
+### Beispiel
+
+<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
+
+## Verwendung
+
+Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten. Möglich sind H1 bis H6.
+
+### Best practices
+
+- Achten Sie bei der Verwendung von Headings auf die empfohlene Semantik für die Suchmaschinenoptimierung.
+- Setzen Sie Headings in verschiedenen Größen ein, um eine sinnvolle Struktur Ihrer Inhalte zu erzeugen.
+- Kombinieren Sie die **Heading**-Komponente mit allen anderen **KoliBri**-Komponenten. Setzen Sie sie im Inhaltsbereich der Komponenten ein.
+
+## Barrierefreiheit
+
+<!--## Links und Referenzen
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                               | Type                                      | Default |
+| -------- | --------- | --------------------------------------------------------- | ----------------------------------------- | ------- |
+| `_level` | `_level`  | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`     |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-accordion](../accordion)
+ - [kol-alert](../alert)
+ - [kol-card](../card)
+ - [kol-heading](.)
+ - [kol-link-group](../link-group)
+
+### Graph
+```mermaid
+graph TD;
+  kol-accordion --> kol-heading-wc
+  kol-alert --> kol-heading-wc
+  kol-card --> kol-heading-wc
+  kol-heading --> kol-heading-wc
+  kol-link-group --> kol-heading-wc
+  style kol-heading-wc fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+