@public-ui/components 1.6.0-rc.18 → 1.6.0-rc.19

package/doc/button.md

@@ -98,29 +98,29 @@ Probleme mit Disabled-Status
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                             | Type                                                                                                                                            | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                       | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaCurrent`        | `_aria-current`  | Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                          | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                                                                    | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                         | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                            | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                 | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                         | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                               | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                            | `undefined` |
-| `_iconAlign`          | `_icon-align`    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                      | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                         | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `boolean` \| `string`                                                                                                                             | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                             | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                      | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                    | `number` \| `undefined`                                                                                                                           | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `'top'`     |
-| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                       | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
-| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                        | `unknown`                                                                                                                                       | `undefined` |
-| `_variant`            | `_variant`       | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                            | `'normal'`  |
+| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                      | Type                                                                                                                                            | Default     |
+| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                                                                                                                                | `string` \| `undefined`                                                                                                                           | `undefined` |
+| `_ariaControls`       | `_aria-controls` | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                                                         | `string` \| `undefined`                                                                                                                           | `undefined` |
+| `_ariaCurrent`        | `_aria-current`  | <span class="text-red-500">**[DEPRECATED]**</span> aria-current is not necessary for buttons. will be removed in version 2.<br/><br/>Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                                                                    | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded` | Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                  | `boolean` \| `undefined`                                                                                                                          | `undefined` |
+| `_ariaLabel`          | `_aria-label`    | <span style="color:red">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                                          | `string` \| `undefined`                                                                                                                           | `undefined` |
+| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                     | `boolean` \| `undefined`                                                                                                                          | `undefined` |
+| `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                                                                                                                                                                                          | `string` \| `undefined`                                                                                                                           | `undefined` |
+| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                                                                                                                                  | `boolean` \| `undefined`                                                                                                                          | `false`     |
+| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                                                                                                                        | `boolean` \| `undefined`                                                                                                                          | `false`     |
+| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                                                                                                                      | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                            | `undefined` |
+| `_iconAlign`          | `_icon-align`    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.                                                                                                                                                         | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `undefined` |
+| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                                                               | `boolean` \| `undefined`                                                                                                                          | `undefined` |
+| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                                                                                                                                  | `string` \| `undefined`                                                                                                                           | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                                                                                                                                      | `boolean` \| `string`                                                                                                                             | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                                                      | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
+| `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                                                                                                                                       | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                      | `undefined` |
+| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number` \| `undefined`                                                                                                                           | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                                 | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `'top'`     |
+| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                                                                                                                                | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
+| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                                                                                                                                 | `unknown`                                                                                                                                       | `undefined` |
+| `_variant`            | `_variant`       | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                                                                                                                                    | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                            | `'normal'`  |
 
 
 ## Dependencies

package/doc/card.md

@@ -12,7 +12,7 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 ### Code
 
 ```html
-<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
+<kol-card _label="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.
@@ -26,7 +26,7 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 
 ### Beispiel
 
-<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
+<kol-card _label="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.
@@ -46,7 +46,7 @@ Die horizontale Trennlinie zwischen beiden Bereichen setzt KoliBri automatisch.
 
 ### Titel der Card-Komponente
 
-Den Titel der Card bestimmen Sie durch Setzen des Attributs **`_heading`**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Den Titel der Card bestimmen Sie durch Setzen des Attributs **`_label`**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
 Beachten Sie, dass **HTML-Code** nicht erlaubt ist. Sofern nicht gesetzt werden drei Punkte dargestellt.
 Die Überschriftenebene des Titels wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
@@ -57,7 +57,7 @@ Die Inhalte im Header/Content/Footer-Bereich der Card bestimmen Sie durch Einfü
 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.
 
 ```html
-<kol-card _heading="Beispiel" _level="1">
+<kol-card _label="Beispiel" _level="1">
 	<div slot="header">Text im Header-Bereich</div>
 	<div slot="content">Text im Inhalts-Bereich</div>
 	<div slot="footer">Text im Fuß-Bereich</div>
@@ -76,12 +76,13 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 
 ## Properties
 
-| Property                | Attribute     | Description                                                                                                                                           | Type                                           | Default     |
-| ----------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
-| `_hasFooter`            | `_has-footer` | Macht den Footerbereich der Card sichtbar.                                                                                                            | `boolean` \| `undefined`                         | `false`     |
-| `_heading` _(required)_ | `_heading`    | Gibt die Beschriftung der Komponente an.                                                                                                              | `string`                                       | `undefined` |
-| `_headline`             | `_headline`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Beschriftung der Komponente an.         | `string` \| `undefined`                          | `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`         |
+| Property     | Attribute     | Description                                                                                                                                           | Type                                           | Default     |
+| ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
+| `_hasFooter` | `_has-footer` | Macht den Footerbereich der Card sichtbar.                                                                                                            | `boolean` \| `undefined`                         | `false`     |
+| `_heading`   | `_heading`    | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Gibt die Beschriftung der Komponente an.                                         | `string` \| `undefined`                          | `undefined` |
+| `_headline`  | `_headline`   | <span style="color:red">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Beschriftung der Komponente an.         | `string` \| `undefined`                          | `undefined` |
+| `_label`     | `_label`      |                                                                                                                                                       | `string` \| `undefined`                          | `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`         |
 
 
 ## Slots

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
@@ -91,10 +91,11 @@ Verwenden Sie das Attribut **`_summary`**, um den Text zu definieren, der als Ü
 
 ## 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 summary label.                                                                                               | `string` \| `undefined`  | `undefined` |
+| `_open`    | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist.                                                       | `boolean` \| `undefined` | `false`     |
+| `_summary` | `_summary` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Gibt die Zusammenfassung der Detailbeschreibung an. | `string` \| `undefined`  | `undefined` |
 
 
 ## Slots