@public-ui/components 1.6.0 → 1.6.2

package/dist/types/components.d.ts

@@ -201,7 +201,7 @@ export namespace Components {
          */
         "_alert"?: boolean;
         /**
-          * Defines whether the card has a close button.
+          * Defines whether the element can be closed.
           * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
          */
         "_hasCloser"?: boolean;
@@ -611,7 +611,7 @@ export namespace Components {
          */
         "_headline"?: string;
         /**
-          * Defines the description of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
         /**
@@ -888,7 +888,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the technical name of an input field.
          */
@@ -927,7 +927,7 @@ export namespace Components {
         /**
           * Defines the value of the input.
          */
-        "_value": Stringified<StencilUnknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Defines which variant should be used for presentation.
          */
@@ -975,7 +975,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions instead.
@@ -1061,7 +1061,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagszahlen an.
           * @deprecated Use _suggestions instead.
@@ -1178,7 +1178,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -1295,7 +1295,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Makes the input accept multiple inputs.
           * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved.
@@ -1382,7 +1382,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagszahlen an.
           * @deprecated Use _suggestions intead.
@@ -1504,7 +1504,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the maximum number of input characters.
          */
@@ -1599,7 +1599,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.
           * @deprecated Use _options.
@@ -1684,7 +1684,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Gibt die Liste der Optionen für das Eingabefeld an.
          */
@@ -1760,7 +1760,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -1860,7 +1860,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -2384,7 +2384,7 @@ export namespace Components {
          */
         "_hasButtons"?: boolean | Stringified<PaginationHasButton>;
         /**
-          * Defines the description of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
         /**
@@ -2524,7 +2524,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Options the user can choose from, also supporting Optgroup.
           * @deprecated use _options
@@ -2819,7 +2819,8 @@ export namespace Components {
          */
         "_accessKey"?: string;
         /**
-          * Adjusts the height of the element to its content. TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved
+          * Adjusts the height of the element to its content.
+          * @TODO : change back to AdjustHeightPropType after stencil #4663 has been resolved
          */
         "_adjustHeight"?: boolean;
         /**
@@ -2856,7 +2857,7 @@ export namespace Components {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the maximum number of input characters.
          */
@@ -2919,7 +2920,7 @@ export namespace Components {
          */
         "_alert"?: boolean;
         /**
-          * Defines whether the card has a close button.
+          * Defines whether the element can be closed.
           * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
          */
         "_hasCloser"?: boolean;
@@ -3515,7 +3516,7 @@ declare namespace LocalJSX {
          */
         "_alert"?: boolean;
         /**
-          * Defines whether the card has a close button.
+          * Defines whether the element can be closed.
           * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
          */
         "_hasCloser"?: boolean;
@@ -3913,7 +3914,7 @@ declare namespace LocalJSX {
          */
         "_headline"?: string;
         /**
-          * Defines the description of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
         /**
@@ -4185,7 +4186,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the technical name of an input field.
          */
@@ -4220,7 +4221,7 @@ declare namespace LocalJSX {
         /**
           * Defines the value of the input.
          */
-        "_value": Stringified<StencilUnknown>;
+        "_value"?: Stringified<StencilUnknown>;
         /**
           * Defines which variant should be used for presentation.
          */
@@ -4268,7 +4269,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions instead.
@@ -4350,7 +4351,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagszahlen an.
           * @deprecated Use _suggestions instead.
@@ -4463,7 +4464,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -4576,7 +4577,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Makes the input accept multiple inputs.
           * @TODO : Change type back to `MultiplePropType` after Stencil#4663 has been resolved.
@@ -4659,7 +4660,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagszahlen an.
           * @deprecated Use _suggestions intead.
@@ -4777,7 +4778,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the maximum number of input characters.
          */
@@ -4868,7 +4869,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.
           * @deprecated Use _options.
@@ -4949,7 +4950,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Gibt die Liste der Optionen für das Eingabefeld an.
          */
@@ -5025,7 +5026,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -5121,7 +5122,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Gibt die Liste der Vorschlagswörter an.
           * @deprecated Use _suggestions.
@@ -5641,7 +5642,7 @@ declare namespace LocalJSX {
          */
         "_hasButtons"?: boolean | Stringified<PaginationHasButton>;
         /**
-          * Defines the description of the component.
+          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
         /**
@@ -5781,7 +5782,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Deprecated: Options the user can choose from, also supporting Optgroup.
           * @deprecated use _options
@@ -6068,7 +6069,8 @@ declare namespace LocalJSX {
          */
         "_accessKey"?: string;
         /**
-          * Adjusts the height of the element to its content. TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved
+          * Adjusts the height of the element to its content.
+          * @TODO : change back to AdjustHeightPropType after stencil #4663 has been resolved
          */
         "_adjustHeight"?: boolean;
         /**
@@ -6105,7 +6107,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "_label": LabelWithExpertSlotPropType;
+        "_label"?: LabelWithExpertSlotPropType;
         /**
           * Defines the maximum number of input characters.
          */
@@ -6164,7 +6166,7 @@ declare namespace LocalJSX {
          */
         "_alert"?: boolean;
         /**
-          * Defines whether the card has a close button.
+          * Defines whether the element can be closed.
           * @TODO : Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.
          */
         "_hasCloser"?: boolean;

package/dist/types/utils/unique-nav-labels.d.ts

@@ -0,0 +1,2 @@
+export declare function addNavLabel(ariaLabel: string): void;
+export declare function removeNavLabel(ariaLabel: string): void;

package/doc/accordion.md

@@ -17,17 +17,14 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 			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="header">Inhalt eines Header</div>
 	</kol-accordion>
 	<kol-accordion _label="Element 2">
-		<div slot="header">Inhalt im Header</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">Inhalt im Footer</div>
 	</kol-accordion>
 </div>
 ```
@@ -42,17 +39,14 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 			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="header">Inhalt eines Header</div>
 	</kol-accordion>
 	<kol-accordion _label="Element 2">
-		<div slot="header">Inhalt im Header</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">Inhalt im Footer</div>
 	</kol-accordion>
 </div>
 
@@ -66,12 +60,6 @@ Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durc
 
 Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
-### Inhalt im Kopfbereich des Accordion
-
-Ein optisch abgetrennter Inhalt im Kopfbereich des Accordions wird über einen eigenen Slot übergeben. Gibt es diesen Slot nicht oder wird er leer übergeben, ist der Kopfbereich nicht sichtbar.
-
-**`<div slot="header">Inhalt im Kopfbereich</div>`**
-
 ### Inhalt des Accordion
 
 Der Hauptinhalt des Accordions wird über einen eigenen Slot übergeben.

package/doc/alert.md

@@ -83,7 +83,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |
 | ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
 | `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean` \| `undefined`                                                  | `false`     |
-| `_hasCloser` | `_has-closer` | Defines whether the card has a close button.                                                                       | `boolean` \| `undefined`                                                  | `false`     |
+| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                                  | `false`     |
 | `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` \| `undefined`                                                   | `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`         |
 | `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |

package/doc/badge.md

@@ -8,14 +8,14 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
 ### Code
 
 ```html
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="home" _icon-align="right"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icon="home" _icon-align="right"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="codicon codicon-home"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#0c8703" _icon="codicon codicon-home"></kol-badge>
 ```
 
 ### Beispiel
 
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="home" _icon-align="right"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icon="home" _icon-align="right"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="codicon codicon-home"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#0c8703" _icon="codicon codicon-home"></kol-badge>
 
 ## Verwendung
 

package/doc/card.md

@@ -12,29 +12,25 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 ### Code
 
 ```html
-<kol-card _label="Testtitel" _has-footer _max-height="vh2">
-	<div slot="header">Text im Header-Bereich</div>
+<kol-card _label="Testtitel">
 	<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 _label="Testtitel" _has-footer _max-height="vh2">
-	<div slot="header">Text im Header-Bereich</div>
+<kol-card _label="Testtitel">
 	<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
@@ -58,9 +54,7 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 
 ```html
 <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>
 </kol-card>
 ```
 
@@ -82,7 +76,7 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 | `_hasFooter` | `_has-footer` | Shows the slot="footer".                                                                                                                                  | `boolean` \| `undefined`                                          | `false`     |
 | `_heading`   | `_heading`    | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an.                                 | `string` \| `undefined`                                           | `undefined` |
 | `_headline`  | `_headline`   | <span style="color:red">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an. | `string` \| `undefined`                                           | `undefined` |
-| `_label`     | `_label`      | Defines the description of the component.                                                                                                                 | `string` \| `undefined`                                           | `undefined` |
+| `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                        | `string` \| `undefined`                                           | `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`         |
 | `_on`        | --            | Defines the event callback functions for the component.                                                                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
 

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 -->

package/doc/image.md

@@ -18,9 +18,7 @@ Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
 
 ### Beispiele
 
-<kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
-<kol-image _src="nur-dekoratives-bild.jpg" _alt=""></kol-image>
-<kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
+<kol-image _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100"></kol-image>
 
 ## Verwendung
 

package/doc/input-checkbox.md

@@ -7,20 +7,18 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
 ### Code
 
 ```html
-<kol-input-checkbox _id="checkbox"
-	>Ich stimme der <kol-link _href="#" _label="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox
->
-<kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
-<kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
-<kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
+<kol-input-checkbox _label="false">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _variant="switch" _label="Geburtsdatum anzeigen?"></kol-input-checkbox>
+<kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
+<kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
 ```
 
 ### Beispiel
 
-<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
-<kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
-<kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
-<kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
+<kol-input-checkbox _label="false">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _variant="switch" _label="Geburtsdatum anzeigen?"></kol-input-checkbox>
+<kol-input-checkbox _variant="button" _label="Schalter aktiviert" _checked></kol-input-checkbox>
+<kol-input-checkbox _variant="button" _label="Schalter deaktiviert"></kol-input-checkbox>
 
 ## Verwendung
 
@@ -61,28 +59,28 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                              | Type                                                                                                                                                                                                                                                                                                          | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_alert`              | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `true`      |
-| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_error`              | `_error`         | Defines the error message text.                                                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_hideLabel`          | `_hide-label`    | Hides the label and shows the description in a Tooltip instead.                                                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `''`        |
-| `_icon`               | `_icon`          | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                           | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_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` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                      | `undefined` |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                         | `number` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                         | `'top'`     |
-| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_type`               | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Deprecated: Defines which variant should be used for presentation. | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
-| `_value` _(required)_ | `_value`         | Defines the value of the input.                                                                                                                                          | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                                                                                                                                                                                  | `undefined` |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                   | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
+| Property         | Attribute        | Description                                                                                                                                                              | Type                                                                                                                                                                                                                                                                                                          | Default     |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`     | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_alert`         | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `true`      |
+| `_checked`       | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_disabled`      | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_error`         | `_error`         | Defines the error message text.                                                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`     | `_hide-label`    | Hides the label and shows the description in a Tooltip instead.                                                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_hint`          | `_hint`          | Defines the hint text.                                                                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `''`        |
+| `_icon`          | `_icon`          | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                           | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; } & { checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
+| `_id`            | `_id`            | Defines the internal ID of the primary component element.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_label`         | `_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`                                                                                                                                                                                                                                                                              | `undefined` |
+| `_name`          | `_name`          | Defines the technical name of an input field.                                                                                                                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_on`            | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                      | `undefined` |
+| `_required`      | `_required`      | Makes the input element required.                                                                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_tabIndex`      | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                         | `number` \| `undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_tooltipAlign`  | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                         | `'top'`     |
+| `_touched`       | `_touched`       | Shows if the input was touched by a user.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_type`          | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Deprecated: Defines which variant should be used for presentation. | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
+| `_value`         | `_value`         | Defines the value of the input.                                                                                                                                          | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                                                                                                                                                                                  | `true`      |
+| `_variant`       | `_variant`       | Defines which variant should be used for presentation.                                                                                                                   | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                | `undefined` |
 
 
 ## Slots