@public-ui/components 1.5.0-rc.2 → 1.5.0-rc.20

package/doc/components.md

@@ -3,6 +3,6 @@
 ## Styling
 
 1. Do not use `!important`!
-2. Really, only use `:host` when addressing a direct child node via the selection (like `:host > .first-button`)!
-3. Align your styling to the default alignment, not the full styling!
-4. Use only the colors from the `design tokens`!
+2. Only alignment/position/layout!
+3. No colors/spacing/font/transform/animation/overflow!
+4. padding/margin 0 is allowed! If set, use comment.

package/doc/details.md

@@ -4,17 +4,20 @@ Mit Hilfe der **Detail**-Komponente können weiterführende Informationen zunäc
 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.
+kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei
+seine Ausrichtung von **_rechts_** nach **_unten_**.
+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
 
 ```html
-<kol-details _summary="Ihre Überschrift" _open> Ihr Text im Detail-Bereich </kol-details>
+<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>
 ```
 
 ### Beispiel
@@ -30,16 +33,16 @@ Der gewünschte Inhalt wird zwischen öffnendem und schließendem Element notier
 
 ### Geöffnet anzeigen
 
-Verwenden Sie das Attribut `_open`, um die Komponente beim Anzeigen geöffnet darzustellen.
+Verwenden Sie das Attribut **`_open`**, um die Komponente geöffnet darzustellen.
 
 ### Einleitungstext
 
-Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Überschrift angezeigt werden soll.
+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.
+- 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.
 
@@ -54,7 +57,7 @@ Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Übers
       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">
+    <kol-details _summary="Erst nach Klick offen">
       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
@@ -90,35 +93,10 @@ Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Übers
 
 | Property                | Attribute  | Description                                                       | Type                   | Default     |
 | ----------------------- | ---------- | ----------------------------------------------------------------- | ---------------------- | ----------- |
-| `_open`                 | `_open`    | Gibt an, ob die Detailbeschreibung geöffnet oder geschlossen ist. | `boolean \| undefined` | `false`     |
+| `_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` |
 
 
-## CSS Custom Properties
-
-| Name                        | Description                     |
-| --------------------------- | ------------------------------- |
-| `--kolibri-border-color`    | Default color of the border.    |
-| `--kolibri-border-radius`   | Default radius of the border.   |
-| `--kolibri-border-width`    | Default width of the border.    |
-| `--kolibri-color-black`     | Default color of black (dark).  |
-| `--kolibri-color-danger`    | Default color of the danger.    |
-| `--kolibri-color-disabled`  | Default color of the disabled.  |
-| `--kolibri-color-error`     | Default color of the error.     |
-| `--kolibri-color-ghost`     | Default color of the ghost.     |
-| `--kolibri-color-info`      | Default color of the info.      |
-| `--kolibri-color-normal`    | Default color of the normal.    |
-| `--kolibri-color-primary`   | Default color of the primary.   |
-| `--kolibri-color-secondary` | Default color of the secondary. |
-| `--kolibri-color-success`   | Default color of the success.   |
-| `--kolibri-color-text`      | Default color of the text.      |
-| `--kolibri-color-visited`   | Default color of the visited.   |
-| `--kolibri-color-warning`   | Default color of the warning.   |
-| `--kolibri-color-white`     | Default color of white (light). |
-| `--kolibri-font-family`     | Default font family.            |
-| `--kolibri-font-size`       | Default font size.              |
-
-
 ## Dependencies
 
 ### Depends on

package/doc/form.md

@@ -25,10 +25,10 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ## 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`      |
+| 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. Ein String überschreibt den Standardtext. | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
 
 
 ## Dependencies

package/doc/heading.md

@@ -7,24 +7,31 @@ Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Übersch
 ### Code
 
 ```html
-<div>
-	<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
-</div>
+<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
+<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
+<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
+<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
+<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
+<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
 ```
 
 ### Beispiel
 
-<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
+<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
+<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
+<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
+<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
+<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
+<kol-heading _level="6" _label="Inhalt einer H6-Ü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.
+Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
 ### 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
 
@@ -35,11 +42,11 @@ Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten.
 
 ## Properties
 
-| Property                 | Attribute             | Description                                                                                                            | Type                                           | Default     |
-| ------------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
-| `_headline` _(required)_ | `_headline`           | Gibt den Text der Überschrift an.                                                                                      | `string`                                       | `undefined` |
-| `_level`                 | `_level`              | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
-| `_secondaryHeadline`     | `_secondary-headline` | Gibt den Text der zusätzlichen Überschrift an.                                                                         | `string \| undefined`                          | `undefined` |
+| Property              | Attribute             | Description                                                                       | Type                                           | Default     |
+| --------------------- | --------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`              | Gibt den Text der Überschrift an.                                                 | `string`                                       | `undefined` |
+| `_level`              | `_level`              | Setzt den H-Level, von 1 bis 6, der Überschrift.                                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined` | `1`         |
+| `_secondaryHeadline`  | `_secondary-headline` | Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten. | `string` \| `undefined`                          | `undefined` |
 
 
 ## Dependencies
@@ -47,7 +54,7 @@ Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten.
 ### Used by
 
  - [kol-accordion](../accordion)
- - [kol-alert](../alert)
+ - [kol-alert-wc](../alert)
  - [kol-card](../card)
  - [kol-heading](.)
  - [kol-link-group](../link-group)
@@ -56,7 +63,7 @@ Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten.
 ```mermaid
 graph TD;
   kol-accordion --> kol-heading-wc
-  kol-alert --> kol-heading-wc
+  kol-alert-wc --> kol-heading-wc
   kol-card --> kol-heading-wc
   kol-heading --> kol-heading-wc
   kol-link-group --> kol-heading-wc