@public-ui/components 1.5.0-rc.10 → 1.5.0-rc.12

package/doc/card.md

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

package/doc/components.md

@@ -4,5 +4,5 @@
 
 1. Do not use `!important`!
 2. Only alignment/position/layout!
-3. No colors/spacing/font/transform/animation!
+3. No colors/spacing/font/transform/animation/overflow!
 4. padding/margin 0 is allowed! If set, use comment.

package/doc/details.md

@@ -4,17 +4,20 @@ Mit Hilfe der **Detail**-Komponente können weiterführende Informationen zunäc
 durch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.
 
 Die **Detail**-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden,
-kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf das Icon nach unten hin geöffnet. Das Pfeil-Icon ändert dabei
-seine Ausrichtung von **_rechts_** nach **_unten_**.<br/>Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.
+kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei
+seine Ausrichtung von **_rechts_** nach **_unten_**.
+Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.
 
 ## Konstruktion
 
-Der gewünschte Inhalt wird zwischen öffnendem und schließendem Element notiert.
-
 ### Code
 
 ```html
-<kol-details _summary="Ihre Überschrift" _open> Ihr Text im Detail-Bereich </kol-details>
+<kol-details _summary="Nach Laden der Seite geschlossen">
+	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+	vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+	amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
+</kol-details>
 ```
 
 ### Beispiel
@@ -30,16 +33,16 @@ Der gewünschte Inhalt wird zwischen öffnendem und schließendem Element notier
 
 ### Geöffnet anzeigen
 
-Verwenden Sie das Attribut `_open`, um die Komponente beim Anzeigen geöffnet darzustellen.
+Verwenden Sie das Attribut **`_open`**, um die Komponente geöffnet darzustellen.
 
 ### Einleitungstext
 
-Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Überschrift angezeigt werden soll.
+Verwenden Sie das Attribut **`_summary`**, um den Text zu definieren, der als Überschrift angezeigt werden soll.
 
 ### Best practices
 
 - Verwenden Sie die **Detail**-Komponente, um ergänzende Inhalte zu einem Hauptthema platzsparend anzuordnen.
-- Die **Detail**-Komponente eignet sich gut für die Realisierung einer FAQ-Seite, wobei die Frage über das Attribut `_summary` und die Antwort im Inhaltsbereich ausgegeben werden kann.
+- Die **Detail**-Komponente eignet sich gut für die Realisierung einer FAQ-Seite, wobei die Frage über das Attribut **`_summary`** und die Antwort im Inhaltsbereich ausgegeben werden kann.
 - Vermeiden Sie es, wichtige Informationen, die z.B. rechtliche Aspekte betreffen, in einem verborgenen Bereich auszugeben. Es kann nicht sichergestellt werden, dass der Benutzer diese Informationen auch sicher liest.
 - Vermeiden Sie es, zu viele **Detail**-Komponenten zu verwenden, da die Übersichtlichkeit der Seite hierunter leiden kann.
 
@@ -54,7 +57,7 @@ Verwenden Sie das Attribut `_summary`, um den Text zu definieren, der als Übers
       kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
       sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
     </p>
-    <kol-details _summary="Nach Laden der Seite geschlossen">
+    <kol-details _summary="Erst nach Klick offen">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
       kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

package/doc/form.md

@@ -25,10 +25,10 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ## Properties
 
-| Property        | Attribute        | Description                                                   | Type                                                                                                          | Default     |
-| --------------- | ---------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.     | `undefined \| { onSubmit?: EventCallback<Event> \| undefined; onReset?: EventCallback<Event> \| undefined; }` | `undefined` |
-| `_requiredText` | `_required-text` | Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll. | `boolean \| string \| undefined`                                                                              | `true`      |
+| Property        | Attribute        | Description                                                                                             | Type                                                                                                          | Default     |
+| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.                                               | `undefined \| { onSubmit?: EventCallback<Event> \| undefined; onReset?: EventCallback<Event> \| undefined; }` | `undefined` |
+| `_requiredText` | `_required-text` | Gibt an, ob der Pflichtfeld-Hinweis eingeblendet werden soll. Ein String überschreibt den Standardtext. | `boolean \| string \| undefined`                                                                              | `true`      |
 
 
 ## Dependencies

package/doc/heading.md

@@ -7,24 +7,31 @@ Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Übersch
 ### Code
 
 ```html
-<div>
-	<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
-</div>
+<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
+<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
+<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
+<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
+<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
+<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
 ```
 
 ### Beispiel
 
-<kol-heading _level="1">Inhalt einer H1-Überschrift</kol-heading>
+<kol-heading _level="1" _label="Inhalt einer H1-Überschrift"></kol-heading>
+<kol-heading _level="2" _label="Inhalt einer H2-Überschrift"></kol-heading>
+<kol-heading _level="3" _label="Inhalt einer H3-Überschrift"></kol-heading>
+<kol-heading _level="4" _label="Inhalt einer H4-Überschrift"></kol-heading>
+<kol-heading _level="5" _label="Inhalt einer H5-Überschrift"></kol-heading>
+<kol-heading _level="6" _label="Inhalt einer H6-Überschrift"></kol-heading>
 
 ## Verwendung
 
-Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten. Möglich sind H1 bis H6.
+Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
 ### Best practices
 
 - Achten Sie bei der Verwendung von Headings auf die empfohlene Semantik für die Suchmaschinenoptimierung.
 - Setzen Sie Headings in verschiedenen Größen ein, um eine sinnvolle Struktur Ihrer Inhalte zu erzeugen.
-- Kombinieren Sie die **Heading**-Komponente mit allen anderen **KoliBri**-Komponenten. Setzen Sie sie im Inhaltsbereich der Komponenten ein.
 
 ## Barrierefreiheit
 
@@ -35,11 +42,11 @@ Geben Sie mit dem Attribut `_level` das H-Element an, das Sie ausgeben möchten.
 
 ## Properties
 
-| Property                 | Attribute             | Description                                                                                                            | Type                                           | Default     |
-| ------------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
-| `_headline` _(required)_ | `_headline`           | Gibt den Text der Überschrift an.                                                                                      | `string`                                       | `undefined` |
-| `_level`                 | `_level`              | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder ob es keine Überschrift ist, sondern nur fett gedruckt. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
-| `_secondaryHeadline`     | `_secondary-headline` | Gibt den Text der zusätzlichen Überschrift an.                                                                         | `string \| undefined`                          | `undefined` |
+| Property                 | Attribute             | Description                                                                       | Type                                           | Default     |
+| ------------------------ | --------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
+| `_headline` _(required)_ | `_headline`           | Gibt den Text der Überschrift an.                                                 | `string`                                       | `undefined` |
+| `_level`                 | `_level`              | Setzt den H-Level, von 1 bis 6, der Überschrift.                                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1`         |
+| `_secondaryHeadline`     | `_secondary-headline` | Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten. | `string \| undefined`                          | `undefined` |
 
 
 ## Dependencies

package/doc/icon.md

@@ -1,14 +1,10 @@
 # Icon
 
-Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut `_icon` gesteuert werden und erfolgt durch das Attribut `_aria-label` barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
+Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_aria-label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
 
-Folgende Icon-Fonts werden _`out-of-the-box`_ unterstützt.
+Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-lik> unterstützt.
 
-- [Codicons]
-- [Font-Awesome]
-- [Icofont]
-
-<kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateien der Icon-Fonts eingebunden sind.</kol-alert>
+<kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>
 
 ## Konstruktion
 
@@ -24,9 +20,13 @@ Die Komponente **Icon** wird über das HTML-Tag `kol-icon` erzeugt.
 
 <kol-icon _aria-label="Zu Hause" _icon="codicon codicon-home"></kol-icon>
 
-## Verwendung
+### Icon
+
+Das Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
+Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
+Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
 
-### Best practices
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
 
 ## Barrierefreiheit
 
@@ -34,10 +34,6 @@ Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
 
 - https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
 
-### Aria-Hidden
-
-Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.
-
 ### Aria-Label
 
 Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschriftet werden.
@@ -56,7 +52,7 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 | Property                  | Attribute     | Description                                                                                                                                                                                                                           | Type                  | Default     |
 | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
 | `_ariaLabel` _(required)_ | `_aria-label` | Gibt das Aria-Label am Icon an.                                                                                                                                                                                                       | `string`              | `undefined` |
-| `_icon` _(required)_      | `_icon`       | Gibt einen Identifier eines Icons aus den Icon's an.                                                                                                                                                                                  | `string`              | `undefined` |
+| `_icon` _(required)_      | `_icon`       | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                                                           | `string`              | `undefined` |
 | `_part`                   | `_part`       | <span class="text-red-500">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) | `string \| undefined` | `undefined` |
 
 

package/doc/image.md

@@ -4,9 +4,9 @@ Die **Image**-Komponente dient dazu, Bilder darzustellen.
 
 ## Konstruktion
 
-Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
+Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
 
-### Code Beispiele
+### Code
 
 ```html
 <kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
@@ -14,27 +14,34 @@ Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
 <kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
 ```
 
-## Verwendung
+### 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>
 
-### Best practices
+## Verwendung
 
-#### \_srcset
+### Bilder in unterschiedlicher Auflösung und/oder Seitenverhältnis
 
-Mittels `_srcset` (und `_sizes`) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
-Desweiteren können mittels `_srcset` auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
-Auch bei Verwendung von `_srcset` sollte `_src` genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) `srcset` nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
-Für weitere Infos zu `_srcset` siehe [Links und Referenzen](#links-und-referenzen)
+Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
+Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
+Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _label="MDN Artikel zu srcset"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _label="MDN Artikel zu sizes"></kol-link>
+Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
 
-#### \_loading
+### Ladeverhalten
 
-Dieses Attribut ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
+Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
 `eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _label="MDN Artikel zu loading"></kol-link>
 
 ## Barrierefreiheit
 
-### \_alt
+### Alternativtext
 
-Dieses Attribut ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
+Das Attribut **`_alt`** ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
 Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt, wenn das Bild nicht geladen werden kann/soll.
 
 ## Links und Referenzen
@@ -46,13 +53,13 @@ Ausführliche Erklärung zu `_srcset` und `_sizes`: https://www.mediaevent.de/ht
 
 ## Properties
 
-| Property            | Attribute  | Description                                               | Type                             | Default     |
-| ------------------- | ---------- | --------------------------------------------------------- | -------------------------------- | ----------- |
-| `_alt` _(required)_ | `_alt`     | Gibt den alternativen Text an.                            | `string`                         | `undefined` |
-| `_loading`          | `_loading` | Gibt den Lademodus an.                                    | `"eager" \| "lazy" \| undefined` | `'lazy'`    |
-| `_sizes`            | `_sizes`   | ...                                                       | `string \| undefined`            | `undefined` |
-| `_src` _(required)_ | `_src`     | Gibt die Quell-URL an.                                    | `string`                         | `undefined` |
-| `_srcset`           | `_srcset`  | Gibt eine Liste von Quell-URLs mit Breiten der Bilder an. | `string \| undefined`            | `undefined` |
+| Property            | Attribute  | Description                                                               | Type                             | Default     |
+| ------------------- | ---------- | ------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `_alt` _(required)_ | `_alt`     | Setzt den alternativen Text.                                              | `string`                         | `undefined` |
+| `_loading`          | `_loading` | Setzt den Lademodus.                                                      | `"eager" \| "lazy" \| undefined` | `'lazy'`    |
+| `_sizes`            | `_sizes`   | Setzt Größen für unterschiedliche Auflösungen, unterstützend für _srcset. | `string \| undefined`            | `undefined` |
+| `_src` _(required)_ | `_src`     | Setzt die Quell-URL des Bildes.                                           | `string`                         | `undefined` |
+| `_srcset`           | `_srcset`  | Setzt eine Liste von Quell-URLs mit Breiten der Bilder.                   | `string \| undefined`            | `undefined` |
 
 
 ----------------------------------------------

package/doc/indented-text.md

@@ -1,8 +1,6 @@
 # IndentedText
 
-Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate.
-
-In der Komponente kann beliebiger HTML-Code verwendet werden.
+Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die <kol-link _href="/docs/components/quote/" _label="kol-quote-Komponente"></kol-link> verwendet werden.).
 
 ## Konstruktion
 
@@ -37,10 +35,6 @@ Die Komponente besitzt keine weiteren Attribute. Der hervorzuhebende Text wird z
 
 Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informationen optisch hervorzuheben.
 
-## Barrierefreiheit
-
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 

package/doc/input-adapter-leanup.md

@@ -23,9 +23,7 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon

package/doc/input-checkbox.md

@@ -2,8 +2,6 @@
 
 Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.
 
-Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch_** dar. Hierbei wird die Checkbox zu einem Schieberegler gewandelt, der bei Anklicken nach rechts (aktiv) bzw. nach links (inaktiv) verschoben wird.
-
 ## Konstruktion
 
 ### Code
@@ -26,15 +24,21 @@ Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch
 
 Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.
 
+### Varianten
+
+Mittels des Attributs **`_variant`** können folgende Varianten ausgewählt werden (Beispiele siehe oben):
+
+- `button`: wechselt das Icon je nach Zustand (Beispiel 3+4)
+- `switch`: verwandelt die Checkbox in einen horizontalen Schalter, hierbei gilt rechts als aktiv und links als inaktiv. (Beispiel 2)
+
 ### Best practices
 
 - Verwenden Sie eine einzelne Checkbox, wenn Sie von den Nutzer:innen eine einfach Bestätigung wünschen, z.B. Akzeptieren der Datenschutzerklärung.
 - Verwenden Sie eine Gruppe von Checkboxen, um den Nutzer:innen die Möglichkeit zu geben einen oder mehrere Werte auszuwählen.
-- Vermeiden Sie zu viele Checkboxen, da hierdurch die Übersichtlichkeit verloren geht. Verwenden Sie in diesem Fall eine Select-Box.
 
 ## Barrierefreiheit
 
-Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <a href="?path=/story/react-select-beschreibung--page">Select-Box</a>.
+Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <kol-link _href="/docs/components/select">Select-Box mit **`_multiple`**</kol-link>.
 
 Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
 
@@ -55,26 +59,26 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Properties
 
-| Property           | Attribute        | Description                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                          | Default     |
-| ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`       | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_alert`           | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `true`      |
-| `_checked`         | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht.                                                                                               | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_disabled`        | `_disabled`      | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_error`           | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_hideLabel`       | `_hide-label`    | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_hint`            | `_hint`          | Gibt den Text für eine Hinweistext an.                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                         | `''`        |
-| `_icon`            | `_icon`          | Ermöglicht das Überschreiben der Icons für die Checkbox.                                                                                          | `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` _(required)_ | `_id`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string`                                                                                                                                                                                                                                                                                                      | `undefined` |
-| `_indeterminate`   | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_name`            | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_on`              | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                      | `undefined` |
-| `_required`        | `_required`      | Gibt an, ob die Checkbox ein Pflichtfeld ist.                                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
-| `_tabIndex`        | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_touched`         | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
-| `_type`            | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
-| `_value`           | `_value`         | Gibt den Wert der Checkbox an.                                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
-| `_variant`         | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
+| Property         | Attribute        | Description                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                          | Default     |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`     | `_access-key`    | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_alert`         | `_alert`         | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `true`      |
+| `_checked`       | `_checked`       | Gibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden)                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_disabled`      | `_disabled`      | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.                                                                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_error`         | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_hideLabel`     | `_hide-label`    | Versteckt das sichtbare Label des Elements.                                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_hint`          | `_hint`          | Gibt den Hinweistext an.                                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                         | `''`        |
+| `_icon`          | `_icon`          | Ermöglicht das Überschreiben der Icons für die Checkbox.                                                                                          | `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`            | Gibt die technische ID des Eingabefeldes an.                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_indeterminate` | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist.                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_name`          | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_on`            | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                         | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                      | `undefined` |
+| `_required`      | `_required`      | Macht das Eingabeelement zu einem Pflichtfeld.                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_tabIndex`      | `_tab-index`     | Gibt an, welchen Tab-Index dieses Input hat.                                                                                                      | `number \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_touched`       | `_touched`       | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                        | `false`     |
+| `_type`          | `_type`          | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
+| `_value`         | `_value`         | Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] })                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_variant`       | `_variant`       | Gibt an, welchen Type das Input haben soll.                                                                                                       | `"button" \| "checkbox" \| "switch" \| undefined`                                                                                                                                                                                                                                                             | `undefined` |
 
 
 ## Dependencies
@@ -95,9 +99,7 @@ graph TD;
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-alert --> kol-heading-wc
   kol-alert --> kol-button-wc
   kol-alert --> kol-icon