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

package/doc/abbr.md

@@ -8,7 +8,10 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 ### Code
 
 ```html
-<kol-abbr _title="Abkürzung" _tooltip-align="top"> Abbr </kol-abbr>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 ```
 
 ### Beispiel
@@ -22,7 +25,7 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 
 ### Angabe der Beschreibung zur Abkürzung
 
-Die eigentliche Beschreibung wird über das Attribut **`_title`** übergeben.
+Der Begriff bzw. die Erklärung wird über das Attribut **`_title`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
 
 ### Ausrichtung des Tooltip
 
@@ -34,7 +37,8 @@ Die eigentliche Beschreibung wird über das Attribut **`_title`** übergeben.
 
 ## Barrierefreiheit
 
-Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. Mittels der KoliBri-Komponente zoomt der Tooltip proportional zu seinem Text mit und wird vorgelesen.
+Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
+Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
 
 ## Links und Referenzen
 
@@ -61,12 +65,8 @@ Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht
 ```mermaid
 graph TD;
   kol-abbr --> kol-tooltip
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
+  kol-tooltip --> kol-span-wc
   kol-span-wc --> kol-icon
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
   style kol-abbr fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/accordion.md

@@ -1,6 +1,6 @@
 # Accordion
 
-Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, öffnet sich ein Textfeld mit zusätzlichen Informationen. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
+Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
 
 Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.
 
@@ -9,36 +9,62 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 ### Code
 
 ```html
-<kol-accordion _heading="Überschrift" _level="1" _open>
-	<div slot="content">Beispieltext</div>
-</kol-accordion>
+<div class="grid gap-2">
+	<kol-accordion _heading="Element 1">
+		<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="header">Inhalt eines Header</div>
+	</kol-accordion>
+	<kol-accordion _heading="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>
 ```
 
 ### Beispiel
 
 <div class="grid gap-2">
-  <kol-accordion _heading="Element 1">
-    <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="header">Inhalt eines Header</div>
-  </kol-accordion>
-  <kol-accordion _heading="Element 2">
-    <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>
-  </kol-accordion>
-  <kol-accordion _heading="Element 3">
-    <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="header">Inhalt eines Header</div>
-  </kol-accordion>
+	<kol-accordion _heading="Element 1">
+		<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="header">Inhalt eines Header</div>
+	</kol-accordion>
+	<kol-accordion _heading="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>
 
 ## Verwendung
 
 ### Überschrift im Accordion-Tab
 
-Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **\_heading** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
+Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_heading`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
 
-### Größe der Überschrift
+### Überschriftenebene
 
-Die Schriftgröße, mit der die Überschrift im Accordion-Tab angezeigt wird, wird durch das Attribut **\_level** übergeben. Möglich sind die Level **1** bis **6**
+Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
 ### Inhalt im Kopfbereich des Accordion
 
@@ -96,12 +122,12 @@ Standardansicht gelegt.
 
 ## Properties
 
-| Property                | Attribute  | Description                                               | Type                                                                                 | Default     |
-| ----------------------- | ---------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
-| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des Accordions an.                   | `string`                                                                             | `undefined` |
-| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
-| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
-| `_open`                 | `_open`    | Gibt an, ob das Accordion geöffnet ist.                   | `boolean \| undefined`                                                               | `false`     |
+| Property                | Attribute  | Description                                      | Type                                                                                 | Default     |
+| ----------------------- | ---------- | ------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
+| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des Accordions an.          | `string`                                                                             | `undefined` |
+| `_level`                | `_level`   | Setzt den H-Level, von 1 bis 6, der Überschrift. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
+| `_on`                   | --         | Gibt die EventCallback-Funktionen an.            | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`                 | `_open`    | Gibt an, ob das Accordion geöffnet ist.          | `boolean \| undefined`                                                               | `false`     |
 
 
 ## Slots
@@ -127,9 +153,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
   style kol-accordion fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/alert.md

@@ -7,12 +7,14 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 ### Code
 
 ```html
-<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg"> Textbereich im Alert </kol-alert>
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 ```
 
 ### Beispiel
 
 <kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _alert _heading="Überschrift im Alert" _level="1" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 
 ## Verwendung
 
@@ -20,9 +22,9 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 
 Die **Überschrift** der Alert-Komponente wird über das Attribut `_heading` bestimmt.
 
-### Größe der Überschrift
+### Überschriftenebene
 
-Die **Größe** der Überschrift wird über das Attribut `_level` bestimmt und lässt die Werte 1 - 6 zu.
+Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
 ### Typ des Alert
 
@@ -43,7 +45,7 @@ Der Inhalt des Alert wird zwischen das öffnende Element `<kol-alert>` und das s
 
 ### Variante des Alert
 
-Über das Attribut **`_variant`** kann festgelegt werden, in welcher Darstellungsvariante das Alert angezeigt wird.
+Über das Attribut **`_variant`** kann festgelegt werden, in welcher Darstellungsvariante das Alert angezeigt wird. `msg` lässt die linke, farbig hinterlegte Spalte mit dem Icon über die gesamte Höhe des Alerts gehen, `card` setzt die linke Spalte nur neben die Überchrift.
 
 ### Best practices
 
@@ -83,7 +85,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung vorlesen soll.                           | `boolean \| undefined`                                                  | `false`     |
 | `_hasCloser` | `_has-closer` | Gibt an, ob der Alert ein Schließen-Icon hat.                                     | `boolean \| undefined`                                                  | `false`     |
 | `_heading`   | `_heading`    | Gibt den Titel der Meldung 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`         |
 | `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                  | `undefined \| { onClose?: EventCallback<Event> \| undefined; }`         | `undefined` |
 | `_type`      | `_type`       | Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt. | `"default" \| "error" \| "info" \| "success" \| "warning" \| undefined` | `'default'` |
 | `_variant`   | `_variant`    | Gibt an, welche Benachrichtigungsvariante dargestellt wird.                       | `"card" \| "msg" \| undefined`                                          | `'msg'`     |
@@ -113,9 +115,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-input --> kol-alert
   kol-input-adapter-leanup --> kol-alert
   kol-input-radio --> kol-alert

package/doc/badge.md

@@ -8,12 +8,14 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
 ### Code
 
 ```html
-<kol-badge _label="Beispieltext" _color="#000000" _icon="home" _icon-align="right" style={{ fontWeight: '600' }}></kol-badge>
+<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>
 ```
 
 ### Beispiel
 
-<kol-badge _label="Beispieltext" _color="#000000" _icon="home" _icon-align="right"></kol-badge>
+<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>
 
 ## Verwendung
 
@@ -30,16 +32,13 @@ Die Angabe der gewünschten Hintergrundfarbe erfolgt in hexadezimaler Schreibwei
 
 Die Textfarbe wird automatisch als Kontrastfarbe zur gewählten Hintergrundfarbe errechnet.
 
-### Anzeige eines Icon im Badge
+### Icon
 
-KoliBri stellt die komplette Bibliothek von **Icofont** zur Verfügung. Sie können daher optional im Badge ein Icon aus Icofont anzeigen lassen. Bestimmen Sie das Icon über das Attribut **\_icon="_Name des Icon_"**.
+Ein 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.
 
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie [hier](https://icofont.com/icons)
-
-### Position des Icon
-
-Das Icon kann zusätzlich entweder links oder rechts vom Text angezeigt werden. Verwenden Sie für die Angabe der Ausgabeposition das Attribut **\_icon-align=""**.
-Als Wert können Sie `_icon-align="left"` oder `_icon-align="right"` angeben.
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-lik>
 
 ### Nur Icon anzeigen
 
@@ -47,8 +46,7 @@ Mit dem Attribut **`_icon-only`** kann festgelegt werden, dass nur das mit dem A
 
 ### Schriftschnitt
 
-Über Stylinganweisungen im Attribut **style** können Sie den Schriftschnitt im Badge festlegen. Das Attribut **style** erwartet als Wert ein Objekt.
-`style={{ fontWeight: '600' }}`
+Der Schriftschnitt wird vom Host übernommen, kann also via CSS von außen gesetzt werden.
 
 ### Best practices
 
@@ -64,21 +62,15 @@ Mit dem Attribut **`_icon-only`** kann festgelegt werden, dass nur das mit dem A
 <ul class="m-0 p-0">
   <li class="flex gap-2">
     <kol-badge _label="1" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2">
-    Auswahl Anliegen
-    </kol-heading>
+    <kol-heading _level="2" _headline="Auswahl Anliegen"></kol-heading>
   </li>
   <li class="flex gap-2">
     <kol-badge _label="2" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2">
-    Auswahl Amtsstelle
-    </kol-heading>
+    <kol-heading _level="2" _headline="Auswahl Amtsstelle"></kol-heading>
   </li>
   <li class="flex gap-2">
     <kol-badge _label="3" _color="#0747a6"></kol-badge>
-    <kol-heading _level="2">
-    Terminauswahl
-    </kol-heading>
+    <kol-heading _level="2" _headline="Terminauswahl"></kol-heading>
   </li>
 </ul>
 
@@ -99,10 +91,10 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 | Property              | Attribute       | Description                                                                                              | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default     |
 | --------------------- | --------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_color`              | `_color`        | Gibt die Farbe des Hintergrundes bzw. der Schrift an.                                                    | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'#000'`    |
-| `_icon`               | `_icon`         | Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)                           | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
+| `_color`              | `_color`        | Setzt die Hintergrundfarbe.                                                                              | `string \| undefined \| { backgroundColor: string; color: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `'#000'`    |
+| `_icon`               | `_icon`         | Iconklasse (z.B.: "codicon codicon-home")                                                                | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
 | `_iconOnly`           | `_icon-only`    | Gibt an, ob nur das Icon angezeigt wird.                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `false`     |
-| `_label` _(required)_ | `_label`        | Gibt den Label-Text des Badges an.                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_label` _(required)_ | `_label`        | Setzt den sichtbaren Text des Elements.                                                                  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
 | `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `string \| undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
 
 
@@ -110,7 +102,6 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ### Used by
 
- - [kol-tooltip](../tooltip)
  - [kol-version](../version)
 
 ### Depends on
@@ -126,7 +117,7 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-button-wc --> kol-span-wc
   kol-button-wc --> kol-tooltip
-  kol-tooltip --> kol-badge
+  kol-tooltip --> kol-span-wc
   kol-version --> kol-badge
   style kol-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/breadcrumb.md

@@ -36,19 +36,21 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 <b>Folgende Eigenschaften stehen zur Verfügung:</b>
 
 - **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen alle Icons aus der **Icofont-Bibliothek** zur Verfügung
+- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-lik> zur Verfügung
 - **`_iconOnly`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
-- **`_links`** übergibt den Pfadaufbau der Komponente als JSON-Objekt.
 
-Beispiel für ein JSON-Objekt, das an das Attribut **\_links** übergeben wird:
+Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
 
-```html
-[ { _label: 'Startseite', _href: '#/', _icon: 'home', _iconOnly: true, }, { _label: '1. Unterseite', _href: '/1_unterseite', }, { _label: '2. Unterseite',
-_href: '/2_unterseite', }, ];
+```JSON
+[
+  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_iconOnly': true },
+  { '_label': '1. Unterseite', '_href': '/unterseite_eins' },
+  { '_label': '2. Unterseite', '_href': '/unterseite_zwei' }
+]
 ```
 
-<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icon":"home","_icon-only": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
+<kol-breadcrumb _links='[{"_label":"Startseite","_href":"#/","_icon":"codicon codicon-home","_icon-only": "true"},{"_label":"1. Unterseite","_href":"#/1_unterseite"},{"_label":"2. Unterseite","_href":"#/2_unterseite"}]'></kol-breadcrumb>
 
 ### Best practices
 
@@ -89,7 +91,7 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 | Property                  | Attribute     | Description                                                                  | Type                    | Default     |
 | ------------------------- | ------------- | ---------------------------------------------------------------------------- | ----------------------- | ----------- |
 | `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string`                | `undefined` |
-| `_links` _(required)_     | `_links`      | Gibt die geordnete Liste der Seitenhierarchie in Links an.                   | `LinkProps[] \| string` | `undefined` |
+| `_links` _(required)_     | `_links`      | Setzt die Liste der darzustellenden Links.                                   | `LinkProps[] \| string` | `undefined` |
 
 
 ## Dependencies
@@ -109,11 +111,7 @@ graph TD;
   kol-link-wc --> kol-icon
   kol-link-wc --> kol-tooltip
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-badge
-  kol-badge --> kol-span-wc
-  kol-badge --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-tooltip --> kol-span-wc
   style kol-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/button-link.md

@@ -38,10 +38,10 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 | `_ariaLabel`          | `_aria-label`    | Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label | `string \| undefined`                                                                                                                           | `undefined` |
 | `_ariaSelected`       | `_aria-selected` | Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                             | `boolean \| undefined`                                                                                                                          | `undefined` |
 | `_disabled`           | `_disabled`      | Gibt an, ob der Button deaktiviert ist.                                                                                                                                                                                                                                               | `boolean \| undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                                                                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                            | `undefined` |
+| `_icon`               | `_icon`          | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                            | `undefined` |
 | `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean \| undefined`                                                                                                                          | `false`     |
 | `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                                                                                                                                                                 | `string \| undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Gibt einen beschreibenden Text für das Text-Element an.                                                                                                                                                                                                                               | `string`                                                                                                                                        | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                                                                                        | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                           | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
 | `_role`               | `_role`          | Gibt an, welche Role der Schalter hat.                                                                                                                                                                                                                                                | `"button" \| "link" \| "tab" \| undefined`                                                                                                      | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                             | `number \| undefined`                                                                                                                           | `undefined` |
@@ -63,9 +63,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
   style kol-button-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/button.md

@@ -7,12 +7,15 @@
 ### Code
 
 ```html
-<kol-button _label="Primary" _variant="primary"></kol-button>
-<kol-button _label="Secondary" _variant="secondary"></kol-button>
-<kol-button _label="Normal" _variant="normal"></kol-button>
-<kol-button _label="Secondary" _variant="danger"></kol-button>
-<kol-button _label="Ghost" _variant="ghost"></kol-button>
-<kol-button _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
+<kol-button class="clickme" _label="Primary" _variant="primary"></kol-button>
+<kol-button class="clickme" _label="Secondary" _variant="secondary"></kol-button>
+<kol-button class="clickme" _label="Normal" _variant="normal"></kol-button>
+<kol-button class="clickme" _label="Danger" _variant="danger"></kol-button>
+<kol-button class="clickme" _label="Ghost" _variant="ghost"></kol-button>
+<kol-button class="clickme" _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
+<script>
+	document.querySelectorAll('.clickme').forEach((b) => (b._on = { onClick: console.log }));
+</script>
 ```
 
 ### Beispiel
@@ -20,13 +23,16 @@
 Default
 
 <div class="flex gap-2">
-  <kol-button _label="Primary" _variant="primary"></kol-button>
-  <kol-button _label="Secondary" _variant="secondary"></kol-button>
-  <kol-button _label="Normal" _variant="normal"></kol-button>
-  <kol-button _label="Danger" _variant="danger"></kol-button>
-  <kol-button _label="Ghost" _variant="ghost"></kol-button>
-  <kol-button _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
+  <kol-button class="clickme" _label="Primary" _variant="primary"></kol-button>
+  <kol-button class="clickme" _label="Secondary" _variant="secondary"></kol-button>
+  <kol-button class="clickme" _label="Normal" _variant="normal"></kol-button>
+  <kol-button class="clickme" _label="Danger" _variant="danger"></kol-button>
+  <kol-button class="clickme" _label="Ghost" _variant="ghost"></kol-button>
+  <kol-button class="clickme" _label="Custom" _variant="custom" _custom-class="myClass"></kol-button>
 </div>
+<script>
+  document.querySelectorAll('.clickme').forEach(b => b._on = { onClick: console.log });
+</script>
 
 Disabled
 
@@ -44,59 +50,27 @@ Disabled
 ### Beschriftung
 
 Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut **`_label`**.
-`_label="Buttonbeschriftung"`
+`_label="Schaltflächenbeschriftung"`
 
-### Button mit Icon
+### Icon
 
-Über das Attribut **`_icon`** wird eine JSON-Struktur übergeben, mit der alle Paramater zu Anzeige des Icon im Button festgelegt wird.
+Ein 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.
 
-```html
-_icon = "{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'codicon codicon-arrow-up'},'right': {'icon': 'fa-solid
-fa-arrow-right'},'bottom': {'icon': 'codicon codicon-arrow-down'},'left': {'icon': 'codicon codicon-arrow-left'}}";
-```
-
-Es ist möglich, ein Icon an jeder Position des Button anzuzeigen, sowie die Ausgabe mehrerer Icons im Button. Jedes Icon erhält in der JSON-Struktur einen eigenen Abschnitt, in dem seine Properties festgelegt werden.
-
-Jeder Abschnitt beginnt mit der gewünschten Position des Icon im Button:
-
-- top
-- bottom
-- right
-- left
-
-```html
-"{'top': {weitere Properties}";
-```
-
-Als weitere Properties zur Konfiguration des Icon stehen zur Verfügung:
-
-- icon: legt das anzuzeigende Icon aus der Icofont-Bibliothek fest.
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
 
-```html
-"{'top': {'icon':'codicon codicon-arrow-up'}";
-```
-
-- style: übergibt ggfls. eigene CSS-Stylinganweisungen an das Icon, wie z.B. font-size, transform oder color.
-
-```html
-"{'top': {'style': {'font-size':'200%','color':'#040404','transform':'rotate(45deg)'},'icon':'codicon codicon-arrow-up'}";
-```
-
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie [hier](https://icofont.com/icons)
-
-### Nur Icon im Button anzeigen
+### Schaltfläche ohne Text
 
-In der **Button**-Komponente kann auf die Beschriftung auch verzichtet werden. Hierzu wird das Attribut **`_iconOnly`** gesetzt.
+Mittels **`_iconOnly`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
 
-Beachten Sie, dass das Attribut **`_label`** auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll. Die Komponente gibt in diesem Fall drei Punkte (...) als Platzhalter aus.
+<kol-alert _type="info">Beachten Sie, dass das Attribut **`_label`** auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll, dieses wird von Screenreadern vorgelesen und in den Tooltip gesetzt.</kol-alert>
 
-`_icon-only="true"`
+### Darstellung angeben
 
-### Style angeben
+Zur Steuerung der Darstellung verwenden Sie das Attribut **`_variant`**. Der Standardwert ist `primary`, alternativ kann auch `primary`, `secondary`, `normal`, `danger`, `ghost`, oder `custom` gesetzt werden.<br/>
 
-Die Button-Komponente kann als primärer oder sekundärer Button ausgegeben werden. Zur Steuerung verwenden Sie das Attribut `_variant="primary/secondary/normal/danger/ghost/custom"`. Als Default-Wert wird ein Button als **primary** gerendert.<br/>
-
-Bei Verwendung des Attribut **\_variant="custom"** kann der Entwickler für den Button eigene Styles realisieren. Verpflichtend ist in diesem Fall das Setzen des Attribut **\_custom-class**, damit das Button-Element im Shadow-Dom mittels CSS selektiert werden kann.
+Über die Verwendung des Wertes `custom` kann eine eigene Darstellung gewählt werden. Verpflichtend ist in diesem Fall das Setzen des Attribut **`_custom-class`**, damit die Schaltfläche im Shadow-Dom mittels CSS selektiert werden kann.
 
 ### Best practices
 
@@ -105,15 +79,12 @@ Bei Verwendung des Attribut **\_variant="custom"** kann der Entwickler für den
 - Verwenden Sie nur eine primäre Schaltfläche je Viewport. Auf der gesamten Seite kann ein Button-Style beliebig oft auftreten.
 - Die Beschriftung des Button muss die Aktion beschreiben, die die Schaltfläche ausführt. Sie sollte ein Verb enthalten (z.B. Speichern). Verwenden Sie prägnante, spezifische, selbsterklärende Beschriftungen.
 - Schaltflächenbeschriftungen sollten immer dann auch ein Nomen enthalten, wenn es Raum für Interpretationen darüber gibt, wofür das Verb zuständig ist. Verwenden Sie keine generischen Bezeichnungen wie "OK", insbesondere nicht im Fehlerfall. Fehler sind nie "OK".
-- Wenn Sie mehrere Buttons kombinieren oder anordnen möchten, verwenden Sie die **ButtonGroup**-Komponente.
-- Verwenden Sie nicht mehrere Buttons im Style "primär" in einer **ButtonGroup**.
+- Verwenden Sie nicht mehrere Buttons im Style "primär" innerhalb einer Gruppierung.
 - Verwenden Sie Buttons nicht als Link oder als Navigationselement.
 
 ## Barrierefreiheit
 
-Für Menschen mit einem eingeschränkten Sichtfeld ist die Positionierung des **Icons** im Button links von der Beschriftung optimal (**`_icon-align="left"`**, bzw. kein **`_icon-align`**).
-
-Ebenfalls aus Gründen optimaler Barrierefreiheit verzichtet KoliBri bei der **Button**-Komponente auf den Status **disabled**.
+Für Menschen mit einem eingeschränkten Sichtfeld ist die Positionierung des **Icons** im Button links von der Beschriftung optimal.
 
 Probleme mit Disabled-Status
 
@@ -122,10 +93,10 @@ Probleme mit Disabled-Status
 
 ### Tastatursteuerung
 
-| Taste   | Funktion                                                                       |
-| ------- | ------------------------------------------------------------------------------ |
-| `Tab`   | Springt den einzelnen Button an und fokussiert ihn.                            |
-| `Enter` | Öffnet den Link des fokussierten Button oder führt dessen onClick-Methode aus. |
+| Taste   | Funktion                                                     |
+| ------- | ------------------------------------------------------------ |
+| `Tab`   | Springt den einzelnen Button an und fokussiert ihn.          |
+| `Enter` | Führt die onClick-Methode der fokussierten Schaltfläche aus. |
 
 ## Links und Referenzen
 
@@ -146,11 +117,11 @@ Probleme mit Disabled-Status
 | `_ariaSelected`       | `_aria-selected` | Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)          | `boolean \| undefined`                                                                                                                          | `undefined` |
 | `_customClass`        | `_custom-class`  | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.                                                            | `string \| undefined`                                                                                                                           | `undefined` |
 | `_disabled`           | `_disabled`      | Gibt an, ob der Button deaktiviert ist.                                                                                                            | `boolean \| undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                     | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                            | `undefined` |
+| `_icon`               | `_icon`          | Iconklasse (z.B.: "codicon codicon-home")                                                                                                          | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined`                                                                            | `undefined` |
 | `_iconAlign`          | `_icon-align`    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt an, ob das Icon links oder rechts dargestellt werden soll.                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                           | `undefined` |
 | `_iconOnly`           | `_icon-only`     | Gibt an, ob nur das Icon angezeigt wird.                                                                                                           | `boolean \| undefined`                                                                                                                          | `false`     |
-| `_id`                 | `_id`            | Gibt die ID der Schaltfläche an. (Selection, Testing)                                                                                              | `string \| undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Gibt den Label für die Beschriftung der Schaltfläche an.                                                                                           | `string`                                                                                                                                        | `undefined` |
+| `_id`                 | `_id`            | Gibt die ID der Schaltfläche an.                                                                                                                   | `string \| undefined`                                                                                                                           | `undefined` |
+| `_label` _(required)_ | `_label`         | Setzt den sichtbaren Text des Elements.                                                                                                            | `string`                                                                                                                                        | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                        | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, unknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
 | `_role`               | `_role`          | Gibt an, welche Role der Schalter hat.                                                                                                             | `"button" \| "link" \| "tab" \| undefined`                                                                                                      | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                          | `number \| undefined`                                                                                                                           | `undefined` |
@@ -179,9 +150,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-nav --> kol-button
   kol-pagination --> kol-button
   kol-table --> kol-button