@public-ui/components 1.6.0-rc.9 → 1.6.1

package/doc/details.md

@@ -13,7 +13,7 @@ Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit ve
 ### Code
 
 ```html
-<kol-details _summary="Nach Laden der Seite geschlossen">
+<kol-details _label="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.
@@ -22,7 +22,7 @@ Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit ve
 
 ### Beispiel
 
-<kol-details _summary="Nach Laden der Seite geschlossen">
+<kol-details _label="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
@@ -37,12 +37,12 @@ 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 **`_label`**, 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 **`_label`** 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.
 
@@ -57,7 +57,7 @@ Verwenden Sie das Attribut **`_summary`**, um den Text zu definieren, der als Ü
       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="Erst nach Klick offen">
+    <kol-details _label="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
@@ -84,17 +84,18 @@ Verwenden Sie das Attribut **`_summary`**, um den Text zu definieren, der als Ü
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html
+- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _label="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                | Attribute  | Description                                                        | Type                   | Default     |
-| ----------------------- | ---------- | ------------------------------------------------------------------ | ---------------------- | ----------- |
-| `_open`                 | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist. | `boolean` \| `undefined` | `false`     |
-| `_summary` _(required)_ | `_summary` | Gibt die Zusammenfassung der Detailbeschreibung an.                | `string`               | `undefined` |
+| Property   | Attribute  | Description                                                                                                                          | Type                   | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                   | `string` \| `undefined`  | `undefined` |
+| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                                     | `boolean` \| `undefined` | `false`     |
+| `_summary` | `_summary` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an. | `string` \| `undefined`  | `undefined` |
 
 
 ## Slots

package/doc/form.md

@@ -7,17 +7,17 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 ### Code
 
 ```html
-<kol-form>
-	<kol-input-text _id="firstname">Vorname</kol-input-text>
-	<kol-input-text _id="lastname">Nachname</kol-input-text>
+<kol-form _requiredText="Sternchen heißt Pflichtfeld.">
+	<kol-input-text _label="Vorname"></kol-input-text>
+	<kol-input-text _label="Nachname"></kol-input-text>
 </kol-form>
 ```
 
 ### Beispiel
 
-<kol-form>
-	<kol-input-text _id="firstname">Vorname</kol-input-text>
-	<kol-input-text _id="lastname">Nachname</kol-input-text>
+<kol-form _requiredText="Sternchen heißt Pflichtfeld.">
+	<kol-input-text _label="Vorname"></kol-input-text>
+	<kol-input-text _label="Nachname"></kol-input-text>
 </kol-form>
 
 <!-- Auto Generated Below -->
@@ -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. Ein String überschreibt den Standardtext. | `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` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
 
 
 ## Slots

package/doc/heading.md

@@ -33,20 +33,16 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 - 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.
 
-## Barrierefreiheit
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                           | Type                                           | Default     |
-| --------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`              | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                           | `string`                                       | `undefined` |
-| `_level`              | `_level`              | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `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` |
+| Property              | Attribute             | Description                                                                                                                                                  | Type                                           | Default     |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `boolean` \| `string`                            | `undefined` |
+| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `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` |
 
 
 ## Slots