@public-ui/components 1.5.0-rc.8 → 1.5.0

package/doc/link-button.md

@@ -1,12 +1,7 @@
 # LinkButton
 
 Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
-
-Einen Link kann man nicht deaktivieren und daher gibt es bei einem LinkButton nicht das Property `_disabled`.
-
-Da es die Komponente ButtonLink gibt, die semantisch ein Button und optisch ein Link ist. Ist es nicht mehr notwendig den Click-Callback zu unterstützen. Das Property `_on` wird somit als `deprecated` markiert und wird mit dem nächsten Major-Release entfernt.
-
-Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.). Damit der LinkButton das optisch gleich aussehen kann, wurden die Properties `_customClass` und `_variant` von der Button-Komponente übernommen.
+Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
 
 ## Konstruktion
 
@@ -35,26 +30,27 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default                             |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                         |
-| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                                                                                                                      | `"date" \| "location" \| "page" \| "step" \| "time" \| boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`                         |
-| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                        | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`                         |
-| `_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`                         |
-| `_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 Link deaktiviert ist.                                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                             |
-| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`                         |
-| `_icon`               | `_icon`               | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                                                                                                                                                        | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined`                         |
-| `_iconOnly`           | `_icon-only`          | Gibt an, ob nur das Icon angezeigt wird.                                                                                                                                                                                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                             |
-| `_label` _(required)_ | `_label`              | Gibt einen beschreibenden Text für das Text-Element an.                                                                                                                                                                                                                               | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`                         |
-| `_on`                 | --                    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                          | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| 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`                         |
-| `_target`             | `_target`             | Definiert das Verhalten, bei dem der Link geöffnet werden soll.                                                                                                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                         |
-| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `translate('kol-open-link-in-tab')` |
-| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'right'`                           |
-| `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Button hat.                                                                                                                                                                                                                                            | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `'normal'`                          |
+| Property              | Attribute             | Description                                                                                                                                                                                                                                                                           | Type                                                                                   | Default                             |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------- |
+| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                              | `string` \| `undefined`                                                                  | `undefined`                         |
+| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                                                                                                                      | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`           | `undefined`                         |
+| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                        | `boolean` \| `undefined`                                                                 | `undefined`                         |
+| `_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`                         |
+| `_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 Link deaktiviert ist.                                                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                 | `false`                             |
+| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                                                                                                                  | `boolean` \| `string` \| `undefined`                                                       | `false`                             |
+| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                                                                                                                       | `string`                                                                               | `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`                             |
+| `_label` _(required)_ | `_label`              | Setzt den sichtbaren Text des Elements.                                                                                                                                                                                                                                               | `string`                                                                               | `undefined`                         |
+| `_on`                 | --                    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                                                                                                                          | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined`                         |
+| `_role`               | `_role`               | Setzt die Role der Schaltfläche.                                                                                                                                                                                                                                                      | `"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`                         |
+| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                                                                                                                             | `string` \| `undefined`                                                                  | `undefined`                         |
+| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                                                                                                                      | `string` \| `undefined`                                                                  | `translate('kol-open-link-in-tab')` |
+| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`                           |
+| `_variant`            | `_variant`            | Gibt an, welche Ausprägung der Link-Button hat.                                                                                                                                                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `undefined` | `'normal'`                          |
 
 
 ## Dependencies
@@ -71,11 +67,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-link-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/link-group.md

@@ -1,6 +1,6 @@
 # LinkGroup
 
-Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine listenartige, vertikale oder horizontale Darstellung von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links.
+Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links.
 
 ## Konstruktion
 
@@ -24,25 +24,27 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine listen
 
 ### Links
 
-Die auszugebenden Links werden als JSON-Objekt an das Attribut `_links` übergeben.
+Die auszugebenden Links werden als JSON-Objekt an das Attribut **`_links`** übergeben. Dort können die Attribute des <kol-link _href="" _label="Links"></kol-link> übergeben werden, **`_href`** und **`_label`** sind jedoch Pflicht.
 
-```html
-[ { _label: 'Link 1', _href: 'https://www.w3.org' }, { _label: 'Link 2', _href: 'https://www.w3.org' }, { _label: 'Link 3', _href: 'https://www.w3.org' }, ];
+```js
+[
+	{ _label: 'Link 1', _href: 'https://www.w3.org' },
+	{ _label: 'Link 2', _href: 'https://www.w3.org' },
+	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+];
 ```
 
-Die Konstruktion der einzelnen **Links**, die innerhalb der JSON-Struktur über das Attribut **\_links** übergeben wird, ist im Abschnitt **Links** beschrieben.
-
 ### Überschrift
 
-Die Überschrift der LinkGroup wird über das Attribut `_caption` übergeben.
+Die Überschrift der LinkGroup wird über das Attribut **`_heading`** übergeben.
 
 ### Ausrichtung
 
-Über das Attribut `_orientation` kann die Ausrichtung der LinkGroup bestimmt werden. Standardwert ist `_orientation="vertical"`. Für eine horizontale Anzeige den Wert `horizontal` verwenden.
+Über das Attribut **`_orientation`** kann die Ausrichtung der LinkGroup bestimmt werden. Mögliche Werte sind `horizontal` und `vertical` (Standard).
 
 ### List-Style-Type
 
-Über das Attribut `_list-style-type` kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen vier Möglichkeiten zur Auswahl.
+Über das Attribut **`_list-style-type`** kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen diese vier Möglichkeiten zur Auswahl:
 
 - `disc`
 - `circle`
@@ -82,15 +84,15 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 
 ## Properties
 
-| Property                  | Attribute          | Description                                                                                                                                                                                           | Type                                                                                                                                                                                                                  | Default      |
-| ------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_ariaLabel` _(required)_ | `_aria-label`      | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.                                                                                                                          | `string`                                                                                                                                                                                                              | `undefined`  |
-| `_heading`                | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                    | `string \| undefined`                                                                                                                                                                                                 | `undefined`  |
-| `_level`                  | `_level`           | Gibt die geordnete Liste der Seitenhierarchie in Links an.                                                                                                                                            | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                                                                                                                                        | `undefined`  |
-| `_links` _(required)_     | `_links`           | Gibt die geordnete Liste der Seitenhierarchie in Links an.                                                                                                                                            | `LinkProps[] \| string`                                                                                                                                                                                               | `undefined`  |
-| `_listStyleType`          | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                          | `"circle" \| "decimal" \| "decimal-leading-zero" \| "disc" \| "lower-alpha" \| "lower-greek" \| "lower-latin" \| "lower-roman" \| "none" \| "square" \| "upper-alpha" \| "upper-latin" \| "upper-roman" \| undefined` | `undefined`  |
-| `_ordered`                | `_ordered`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert. Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.<br/><br/> | `boolean \| undefined`                                                                                                                                                                                                | `undefined`  |
-| `_orientation`            | `_orientation`     | Gibt die Ausrichtung der LinkList an.                                                                                                                                                                 | `"horizontal" \| "vertical" \| undefined`                                                                                                                                                                             | `'vertical'` |
+| Property                  | Attribute          | Description                                                                                                                                                                                          | Type                                                                                                                                                                                                                  | Default      |
+| ------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `_ariaLabel` _(required)_ | `_aria-label`      | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.                                                                                                                         | `string`                                                                                                                                                                                                              | `undefined`  |
+| `_heading`                | `_heading`         | Gibt die optionale Überschrift zur Link-Gruppe an.                                                                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                 | `undefined`  |
+| `_level`                  | `_level`           | Setzt den H-Level, von 1 bis 6, der Überschrift.                                                                                                                                                     | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                                                                                                                                                                        | `undefined`  |
+| `_links` _(required)_     | `_links`           | Setzt die Liste der darzustellenden Links.                                                                                                                                                           | `LinkProps[]` \| `string`                                                                                                                                                                                               | `undefined`  |
+| `_listStyleType`          | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet                                                                                         | `"circle"` \| `"decimal"` \| `"decimal-leading-zero"` \| `"disc"` \| `"lower-alpha"` \| `"lower-greek"` \| `"lower-latin"` \| `"lower-roman"` \| `"none"` \| `"square"` \| `"upper-alpha"` \| `"upper-latin"` \| `"upper-roman"` \| `undefined` | `undefined`  |
+| `_ordered`                | `_ordered`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert.<br/><br/>Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll. | `boolean` \| `undefined`                                                                                                                                                                                                | `undefined`  |
+| `_orientation`            | `_orientation`     | Gibt die Ausrichtung der LinkList an.                                                                                                                                                                | `"horizontal"` \| `"vertical"` \| `undefined`                                                                                                                                                                             | `'vertical'` |
 
 
 ## Dependencies
@@ -110,11 +112,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-link-group fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/link.md

@@ -1,9 +1,6 @@
 # Link
 
 Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann.
-Möglich ist auch die Ausgabe eines versteckten Links.
-
-Der Link wird standardmäßig in klassischer Form mit Unterstrich ausgegeben, der jedoch über ein Attribut auch ohne CSS entfernt werden kann. Weitere Informationen zu Custom Styles finden Sie weiter unten.
 
 Beachten Sie, dass die Komponente automatisch ein Padding links und rechts zum umgebenden Text erzeugt. Sie kann daher im Fließtext ohne
 Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern den Abstand zum umgebenden Text.
@@ -13,62 +10,44 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 ### Code
 
 ```html
-<kol-link _href="https://www.w3.org" _target="_self" _underline="false"> Hier steht ein Link </kol-link>
+<p>
+	In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
+	<kol-link _href="https://www.w3.org">Hier steht ein Link</kol-link>Er wird standardmäßig als
+	<i>
+		<b>inline-Element</b>
+	</i>
+	ausgegeben.
+</p>
 ```
 
 ### Beispiel
 
 <p>
    In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-  <kol-link _href="https://www.w3.org">Hier steht ein Link</kol-link> Er wird standardmäßig als <i>
+  <kol-link _href="https://www.w3.org">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
     <b>inline-Element</b>
     </i> ausgegeben.
 </p>
 
 ## Verwendung
 
-### Link innerhalb eines Fließtextes, mit unterschiedlichen **\_display**-Werten
-
- <p>
-    In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.
-    <kol-link _display="inline-block">
-      Ich bin ein Link als <b>inline-block-Element</b>
-    </kol-link>, damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere Eigenschaften zuweisen.
-    Danach folgt ein Link, der als block-Element ausgegeben wird.
-  <kol-link _display="block">
-      Ich bin ein Link als <b>block-Element</b>
-    </kol-link>,
-    daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
-</p>
-
 ### Link innerhalb eines Fließtextes mit Icon und Text
 
   <p>
-    <kol-link _icon="home">Ich bin ein Link mit Icon links</kol-link><br/>
-    <kol-link _icon="home" _icon-align="right">
+    <kol-link _icon="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link><br/>
+    <kol-link _icon="codicon codicon-home" _icon-align="right">
       Ich bin ein Link mit Icon rechts
     </kol-link>
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea optio deleniti fuga quos molestias, voluptate nobis
     nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-    <kol-link _icon="home">Ich bin ein Link mit Icon links</kol-link>. Lorem, ipsum dolor sit amet consectetur adipisicing
-    elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi <kol-link
-      _icon="home"
+    <kol-link _icon="codicon codicon-home">Ich bin ein Link mit Icon links</kol-link>. Lorem, ipsum dolor sit amet consectetur adipisicing
+    elit. Ea optio deleniti fuga quos molestias, voluptate nobis nemo, incidunt excepturi<kol-link
+      _icon="codicon codicon-home"
       _icon-align="right"
     >
       Ich bin ein Link mit Icon rechts
     </kol-link>
     facilis, amet ducimus minus quae corporis eligendi cum distinctio. Fugit, repellendus.
-
-  </p>
-
-### Link mit und ohne Unterstrich
-
-  <p>
-    <kol-link _icon="home">Ich bin ein Link in Standardausgabe mit Unterstrich</kol-link><br/>
-    <kol-link _icon="home" _underline="false">
-      Ich bin ein Link in Standardausgabe ohne Unterstrich
-    </kol-link>
-
   </p>
 
 <!--### Best practices
@@ -91,37 +70,29 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                                                                                           | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default                                        |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
-| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
-| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                      | `"date" \| "location" \| "page" \| "step" \| "time" \| boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `undefined`                                    |
-| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                        | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`                                    |
-| `_ariaLabel`          | `_aria-label`         | Gibt einen beschreibenden Text des Links an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
-| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`                                    |
-| `_disabled`           | `_disabled`           | Gibt an, ob der Link deaktiviert ist.                                                                                                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                        |
-| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`                                    |
-| `_icon`               | `_icon`               | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/)                                                                                        | `string \| undefined \| { top: string \| KoliBriCustomIcon; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right: string \| KoliBriCustomIcon; bottom?: string \| KoliBriCustomIcon \| undefined; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom: string \| KoliBriCustomIcon; left?: string \| KoliBriCustomIcon \| undefined; } \| { top?: string \| KoliBriCustomIcon \| undefined; right?: string \| KoliBriCustomIcon \| undefined; bottom?: string \| KoliBriCustomIcon \| undefined; left: string \| KoliBriCustomIcon; }` | `undefined`                                    |
-| `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<br/><br/>Gibt an, ob das Icon entweder 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`                                        |
-| `_label` _(required)_ | `_label`              | Gibt den Label für die Beschriftung der Schaltfläche an.                                                                                                                              | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`                                    |
-| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                          | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined`                                    |
-| `_role`               | `_role`               | Gibt an, welche Role der Schalter hat.                                                                                                                                                | `"button" \| "link" \| "tab" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`                                    |
-| `_selector`           | `_selector`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
-| `_stealth`            | `_stealth`            | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt an, ob der Link nur beim Fokus sichtbar ist.                                | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                        |
-| `_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`                                    |
-| `_target`             | `_target`             | Definiert das Verhalten, bei dem der Link geöffnet werden soll.                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`                                    |
-| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'Der Link wird in einem neuen Tab geöffnet.'` |
-| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'right'`                                      |
-| `_useCase`            | `_use-case`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Verwendungsfall des Links an.                                           | `"image" \| "nav" \| "text" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `'text'`                                       |
-
-
-## Shadow Parts
-
-| Part       | Description                               |
-| ---------- | ----------------------------------------- |
-| `"hidden"` | Ermöglicht das Ausblenden des Linktextes. |
-| `"link"`   | Ermöglicht das Stylen des Links.          |
-| `"span"`   | Ermöglicht das Stylen des Linktextes.     |
+| Property              | Attribute             | Description                                                                                                                                                                           | Type                                                                                | Default                                        |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- |
+| `_ariaControls`       | `_aria-controls`      | Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                              | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_ariaCurrent`        | `_aria-current`       | Gibt an, welchen aktuellen Auswahlstatus der Link hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)                                      | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`        | `undefined`                                    |
+| `_ariaExpanded`       | `_aria-expanded`      | Gibt an, ob durch den Link etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                        | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_ariaLabel`          | `_aria-label`         | Gibt einen beschreibenden Text des Links an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)                                                 | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_ariaSelected`       | `_aria-selected`      | Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                | `boolean` \| `undefined`                                                              | `undefined`                                    |
+| `_disabled`           | `_disabled`           | Gibt an, ob der Link deaktiviert ist.                                                                                                                                                 | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_download`           | `_download`           | Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.                                                                                  | `boolean` \| `string` \| `undefined`                                                    | `false`                                        |
+| `_href` _(required)_  | `_href`               | Gibt die Ziel-Url des Links an.                                                                                                                                                       | `string`                                                                            | `undefined`                                    |
+| `_icon`               | `_icon`               | Iconklasse (z.B.: "codicon codicon-home")                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                | `undefined`                                    |
+| `_iconAlign`          | `_icon-align`         | <span class="text-red-500">**[DEPRECATED]**</span> Wird durch das neue flexibleren Icon-Typ abgedeckt.<br/><br/>Gibt an, ob das Icon entweder 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`                                        |
+| `_label` _(required)_ | `_label`              | Setzt den sichtbaren Text des Elements.                                                                                                                                               | `string`                                                                            | `undefined`                                    |
+| `_on`                 | --                    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an.                                                                          | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }` | `undefined`                                    |
+| `_role`               | `_role`               | Gibt an, welche Rolle das Element hat.                                                                                                                                                | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                          | `undefined`                                    |
+| `_selector`           | `_selector`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.              | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_stealth`            | `_stealth`            | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt an, ob der Link nur beim Fokus sichtbar ist.                                | `boolean` \| `undefined`                                                              | `false`                                        |
+| `_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`                                    |
+| `_target`             | `_target`             | Gibt an wo der Link geöffnet werden soll.                                                                                                                                             | `string` \| `undefined`                                                               | `undefined`                                    |
+| `_targetDescription`  | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.                                                                                                      | `string` \| `undefined`                                                               | `'Der Link wird in einem neuen Tab geöffnet.'` |
+| `_tooltipAlign`       | `_tooltip-align`      | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                               | `'right'`                                      |
+| `_useCase`            | `_use-case`           | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Verwendungsfall des Links an.                                           | `"image"` \| `"nav"` \| `"text"` \| `undefined`                                           | `'text'`                                       |
 
 
 ## Dependencies
@@ -146,11 +117,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
   kol-breadcrumb --> kol-link
   kol-input-adapter-leanup --> kol-link
   kol-link-group --> kol-link

package/doc/logo.md

@@ -1,26 +1,22 @@
 # Logo
 
-Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen Logos ausgegeben werden. Die zur Verfügung stehenden Logos entstammen aus dem Umfeld
-der Bundesinstitutionen. Die **Logo**-Komponente rendert an beliebiger Position auf der Webseite ein Logo, das über ein Attribut definiert wird. Das Logo wird dabei aus einer
-Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen. Die Ausgabe des Logos kann über das Attribut **style** definiert werden.
+Mit Hilfe der **Logo**-Komponente können an beliebigen Positionen die Logos verschiedener Bundesinstitutionen ausgegeben werden. Das Logo wird dabei aus einer Sammlung von SVG-Grafiken zusammengesetzt, die fertig konstruiert vorliegen.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<div>
-	<kol-logo _abbr="BReg"></kol-logo>
-</div>
+<kol-logo _org_="BReg"></kol-logo>
 ```
 
 ### Beispiel
 
-<kol-logo _abbr="BReg"></kol-logo>
+<kol-logo _org_="BReg"></kol-logo>
 
 ## Verwendung
 
-Das Attribut `_abbr` wird für die Definition des gewünschten Logos verwendet. Es sind folgende Parameter möglich:
+Das Attribut **`_org`** wird für die Definition des gewünschten Logos verwendet. Es sind folgende Parameter möglich:
 
 **BReg** = **_Die Bundesregierung_**
 
@@ -67,8 +63,8 @@ Das Attribut `_abbr` wird für die Definition des gewünschten Logos verwendet.
 
 | Property            | Attribute | Description                                                                                                                                                                     | Type                                                           | Default     |
 | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
-| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt \| Bundesanstalt \| Bundesministerium \| undefined` | `undefined` |
-| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt \| Bundesanstalt \| Bundesministerium`              | `undefined` |
+| `_abbr`             | `_abbr`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _org.<br/><br/>Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an. | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium` \| `undefined` | `undefined` |
+| `_org` _(required)_ | `_org`    | Gibt die Abkürzung eines Ministeriums, eines Amts oder einer Bundesanstalt an.                                                                                                  | `Bundesamt` \| `Bundesanstalt` \| `Bundesministerium`              | `undefined` |
 
 
 ----------------------------------------------