@public-ui/components 1.7.2 → 2.0.0-rc.0

package/doc/button.md

@@ -43,17 +43,17 @@ Disabled
 Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut **`_label`**.
 `_label="Schaltflächenbeschriftung"`
 
-### Icon
+### Icons
 
-Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
+Icons (**`_icons`**) kann entweder als String angegeben werden, oder als Objekt.
 Als String übergeben Sie die Iconklasse (z.B.: `_icons="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.
 
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 
 ### Schaltfläche ohne Text
 
-Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="#icon" _label="siehe icon"></kol-link>)
+Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
 
 <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>
 
@@ -91,45 +91,38 @@ Probleme mit Disabled-Status
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _label="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                                                                                                          | Type                                                                                                                                                   | Default     |
-| --------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`    | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                                                                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaControls`       | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                                                                                                                                                                                  | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaCurrent`        | `_aria-current`  | <span style="color:red">**[DEPRECATED]**</span> aria-current is not necessary for buttons. will be removed in version 2.<br/><br/>Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date`` \| ``location`` \| ``page`` \| ``step`` \| ``time`` \| ``true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                                                                           | `undefined` |
-| `_ariaExpanded`       | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                                                                                                                                                                              | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | <span style="color:red">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente.                                                                                                                                                                                                                                                           | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                                                                                                                                                                                     | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_customClass`        | `_custom-class`  | Defines the custom class attribute if _variant="custom" is set.                                                                                                                                                                                                                                                                                                                                      | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |
-| `_icon`               | `_icon`          | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                                                                                                                                                                                                                                                | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
-| `_iconAlign`          | `_icon-align`    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Deprecated: Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                                      | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Deprecated: Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                                                                                 | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
-| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                                                                                                                      | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                                                                                                                                                                                                                                            | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                                                                                                         | `string`                                                                                                                                               | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
-| `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                                                                                                                                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                                                                                                                                                                                                                                                  | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                                                                                                                                                                                                                     | `number` \| `undefined`                                                                                                                                  | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                                                                                                            | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
-| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                                                                                                                                                                                                                                                   | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
-| `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                                                                                                                                                                                                                                    | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                                                                                                               | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
+| Property              | Attribute        | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |
+| --------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_ariaControls`       | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_ariaExpanded`       | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)          | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_ariaSelected`       | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean` \| `undefined`                                                                                                                                 | `undefined` |
+| `_customClass`        | `_custom-class`  | Defines the custom class attribute if _variant="custom" is set.                                                                                                                  | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                                                                                 | `undefined` |
+| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                    | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --               | Defines the callback functions for button events.                                                                                                                                | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
+| `_role`               | `_role`          | Defines the role of the components primary element.                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                             | `undefined` |
+| `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number` \| `undefined`                                                                                                                                  | `undefined` |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                  | `'top'`     |
+| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                                               | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                         | `'button'`  |
+| `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
 
 
 ## Dependencies
 
 ### Used by
 
- - [kol-nav](../nav)
  - [kol-pagination](../pagination)
  - [kol-table](../table)
  - [kol-toast-container](../toast-container)
@@ -146,7 +139,6 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  kol-nav --> kol-button
   kol-pagination --> kol-button
   kol-table --> kol-button
   kol-toast-container --> kol-button

package/doc/card.md

@@ -2,10 +2,9 @@
 
 Um einzelne Bereiche Ihrer Webseite optisch hervorzuheben, bietet sich die **Card**-Komponente an. Mit ihrer Hilfe können Sie Ihre Inhalte sehr einfach strukturieren.
 
-Die **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_** und einem **_Fuß-Bereich_**.
+Die **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_**.
 
 Der **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalts-Bereich** ist optisch durch eine horizontale Trennlinie unterhalb des Titel-Bereichs abgetrennt und wird in der Standardschrift ausgegeben.
-Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktiviert und stellt dann Platz für weitere Inhalte, z.B. eine **Button**-Komponente bereit. Der Fuß-Bereich ist optisch durch eine horizontale Trennlinie vom Inhalts-Bereich abgetrennt.
 
 ## Konstruktion
 
@@ -13,7 +12,7 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 
 ```html
 <kol-card _label="Testtitel">
-	<div slot="content">
+	<div>
 		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
@@ -25,7 +24,7 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 ### Beispiel
 
 <kol-card _label="Testtitel">
-	<div slot="content">
+	<div>
 		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
@@ -48,13 +47,13 @@ Die Überschriftenebene des Titels wird durch das Attribut **`_level`** übergeb
 
 ### Inhalts-Container
 
-Die Inhalte im Header/Content/Footer-Bereich der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Der Container muss als Attribut **slot="header/coontent/footer"** enthalten. Hier können Sie beliebigen **HTML-Code** einfügen.
+Die Inhalte im Content-Bereich der Card bestimmen Sie durch Einfügen eines **Inhalts-Containers** innerhalb des `<kol-card></kol-card>-Elements`. Hier können Sie beliebigen **HTML-Code** einfügen.
 
 Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
 
 ```html
 <kol-card _label="Beispiel" _level="1">
-	<div slot="content">Text im Inhalts-Bereich</div>
+	<div>Text im Inhalts-Bereich</div>
 </kol-card>
 ```
 
@@ -70,25 +69,19 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                                                                                               | Type                                                            | Default     |
-| ------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
-| `_hasCloser` | `_has-closer` | Defines whether the element can be closed.                                                                                                                | `boolean` \| `undefined`                                          | `false`     |
-| `_hasFooter` | `_has-footer` | Shows the slot="footer".                                                                                                                                  | `boolean` \| `undefined`                                          | `false`     |
-| `_heading`   | `_heading`    | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an.                                 | `string` \| `undefined`                                           | `undefined` |
-| `_headline`  | `_headline`   | <span style="color:red">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Deprecated: Gibt die Beschriftung der Komponente an. | `string` \| `undefined`                                           | `undefined` |
-| `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                        | `string` \| `undefined`                                           | `undefined` |
-| `_level`     | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                         | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                  | `1`         |
-| `_on`        | --            | Defines the event callback functions for the component.                                                                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| Property              | Attribute     | Description                                                                                                        | Type                                                            | Default     |
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ----------- |
+| `_hasCloser`          | `_has-closer` | Defines whether the element can be closed.                                                                         | `boolean` \| `undefined`                                          | `false`     |
+| `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                        | `undefined` |
+| `_level`              | `_level`      | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                  | `1`         |
+| `_on`                 | --            | Defines the event callback functions for the component.                                                            | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }` | `undefined` |
 
 
 ## Slots
 
-| Slot        | Description                                                                                                                |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------- |
-|             | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.                                                  |
-| `"content"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.                                                  |
-| `"footer"`  | Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.                            |
-| `"header"`  | Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card. |
+| Slot | Description                                                               |
+| ---- | ------------------------------------------------------------------------- |
+|      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card. |
 
 
 ## Dependencies

package/doc/details.md

@@ -84,19 +84,18 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _label="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                          | Type                                                                                  | Default     |
-| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- |
-| `_label`   | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                   | `string` \| `undefined`                                                                 | `undefined` |
-| `_on`      | --         | Defines the callback functions for details.                                                                                          | `undefined` \| `{ onToggle?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
-| `_open`    | `_open`    | If set (to true) opens/expands the element, closes if not set (or set to false).                                                     | `boolean` \| `undefined`                                                                | `false`     |
-| `_summary` | `_summary` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Gibt die Zusammenfassung der Detailbeschreibung an. | `string` \| `undefined`                                                                 | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                                                                                  | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                              | `undefined` |
+| `_on`                 | --        | Defines the callback functions for details.                                                                        | `undefined` \| `{ onToggle?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
+| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                                | `false`     |
 
 
 ## Slots

package/doc/heading.md

@@ -60,7 +60,6 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
  - [kol-alert-wc](../alert)
  - [kol-card](../card)
  - [kol-heading](.)
- - [kol-link-group](../link-group)
 
 ### Graph
 ```mermaid
@@ -69,7 +68,6 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-card --> kol-heading-wc
   kol-heading --> kol-heading-wc
-  kol-link-group --> kol-heading-wc
   style kol-heading-wc fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/icon.md

@@ -2,7 +2,7 @@
 
 Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
 
-Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> unterstützt.
+Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> unterstützt.
 
 <kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>
 
@@ -13,49 +13,44 @@ Die Komponente **Icon** wird über das HTML-Tag `kol-icon` erzeugt.
 ### Code
 
 ```html
-<kol-icon _label="Zu Hause" _icon="codicon codicon-home"></kol-icon>
+<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
 ```
 
 ### Beispiel
 
-<kol-icon _label="Zu Hause" _icon="codicon codicon-home"></kol-icon>
+<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
 
-### Icon
+### Icons
 
-Das Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
-Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
-Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
+Die Property `_icons` erwartet einen String mit den Klassennamen der zu zeigenden Icons (z.B.: `_icons="codicon codicon-home`).
 
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 
 ## Barrierefreiheit
 
 Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
 
-- <kol-link _href="" _label=""></kol-link>https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
+- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"></kol-link>
 
-### Aria-Label
+### Label
 
-Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschriftet werden.
+Mittels der Property `_label` muss ein Kontext-relevantes Icon beschriftet werden.
 
 ## Links und Referenzen
 
-- <kol-link _href="https://github.com/microsoft/vscode-codicons" _label="https://github.com/microsoft/vscode-codicons" _target="_blank" _label="Codicons"></kol-link>
-- <kol-link _href="https://fontawesome.com" _label="https://fontawesome.com" _target="_blank" _label="Font-Awesome"></kol-link>
-- <kol-link _href="https://icofont.com" _label="https://icofont.com" _target="_blank" _label="Icofont"></kol-link>
+- <kol-link _href="https://github.com/microsoft/vscode-codicons" _target="_blank" _label="Codicons"></kol-link>
+- <kol-link _href="https://fontawesome.com" _target="_blank" _label="Font-Awesome"></kol-link>
+- <kol-link _href="https://icofont.com"  _target="_blank" _label="Icofont"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                                                                                                                                                                                       | Type                  | Default     |
-| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `_ariaLabel` | `_aria-label` | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Deprecated: Setzt die semantische Beschriftung der Komponente.                                                                                                        | `string` \| `undefined` | `undefined` |
-| `_icon`      | `_icon`       | <span style="color:red">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                                                                                             | `string` \| `undefined` | `undefined` |
-| `_icons`     | `_icons`      | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                   | `string` \| `undefined` | `undefined` |
-| `_label`     | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                                | `string` \| `undefined` | `undefined` |
-| `_part`      | `_part`       | <span style="color:red">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) | `string` \| `undefined` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type     | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
+| `_icons` _(required)_ | `_icons`  | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `string` | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
 
 
 ## Shadow Parts
@@ -72,8 +67,6 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
  - [kol-alert-wc](../alert)
  - [kol-breadcrumb](../breadcrumb)
  - [kol-details](../details)
- - [kol-icon-font-awesome](../icon-font-awesome)
- - [kol-icon-icofont](../icon-icofont)
  - kol-input
  - [kol-input-checkbox](../input-checkbox)
  - kol-link-wc
@@ -85,8 +78,6 @@ graph TD;
   kol-alert-wc --> kol-icon
   kol-breadcrumb --> kol-icon
   kol-details --> kol-icon
-  kol-icon-font-awesome --> kol-icon
-  kol-icon-icofont --> kol-icon
   kol-input --> kol-icon
   kol-input-checkbox --> kol-icon
   kol-link-wc --> kol-icon

package/doc/image.md

@@ -27,15 +27,15 @@ Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
 Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
 Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
 Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _target="_blank" _label="MDN Artikel zu srcset"></kol-link>
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _target="_blank" _label="MDN Artikel zu sizes"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _target="_blank" _label="MDN Artikel zu srcset"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _target="_blank" _label="MDN Artikel zu sizes"></kol-link>
 Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
 
 ### Ladeverhalten
 
 Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
 `eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _target="_blank" _label="MDN Artikel zu loading"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _target="_blank" _label="MDN Artikel zu loading"></kol-link>
 
 ## Barrierefreiheit
 
@@ -46,7 +46,7 @@ Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt,
 
 ## Links und Referenzen
 
-Ausführliche Erklärung zu `_srcset` und `_sizes`: <kol-link _href="https://www.mediaevent.de/html/srcset.html" _label="https://www.mediaevent.de/html/srcset.html" _target="_blank"></kol-link>
+Ausführliche Erklärung zu `_srcset` und `_sizes`: <kol-link _href="https://www.mediaevent.de/html/srcset.html" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/input-checkbox.md

@@ -51,45 +51,43 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#checkbox" _label="https://www.w3.org/TR/wai-aria-practices/#checkbox" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#checkbox" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property         | Attribute        | Description                                                                                                                                                              | Type                                                                                                                                                                                                                                                                                                            | Default     |
-| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`     | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_alert`         | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `true`      |
-| `_checked`       | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                                 | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_disabled`      | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_error`         | `_error`         | Defines the error message text.                                                                                                                                          | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_hideError`     | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_hideLabel`     | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                               | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_hint`          | `_hint`          | Defines the hint text.                                                                                                                                                   | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `''`        |
-| `_icon`          | `_icon`          | <span class="text-red-500">**[DEPRECATED]**</span> Use _icons.<br/><br/>                                                                                                    | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
-| `_icons`         | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                          | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
-| `_id`            | `_id`            | Defines the internal ID of the primary component element.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_label`         | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.             | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_name`          | `_name`          | Defines the technical name of an input field.                                                                                                                            | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_on`            | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                        | `undefined` |
-| `_required`      | `_required`      | Makes the input element required.                                                                                                                                        | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_tabIndex`      | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                         | `number` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_tooltipAlign`  | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                           | `'top'`     |
-| `_touched`       | `_touched`       | Shows if the input was touched by a user.                                                                                                                                | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
-| `_type`          | `_type`          | <span style="color:red">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Deprecated: Defines which variant should be used for presentation. | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                  | `undefined` |
-| `_value`         | `_value`         | Defines the value of the input.                                                                                                                                          | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                                                                                                                                                                                    | `true`      |
-| `_variant`       | `_variant`       | Defines which variant should be used for presentation.                                                                                                                   | `"button"` \| `"checkbox"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                  | `undefined` |
+| Property         | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                            | Default     |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`     | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_alert`         | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `true`      |
+| `_checked`       | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                     | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_disabled`      | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_error`         | `_error`         | Defines the error message text.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_hideError`     | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_hideLabel`     | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_hint`          | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `''`        |
+| `_icons`         | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ checked: string; indeterminate?: string` \| `undefined; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate: string; unchecked?: string` \| `undefined; }` \| `{ checked?: string` \| `undefined; indeterminate?: string` \| `undefined; unchecked: string; }` | `undefined` |
+| `_id`            | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_label`         | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_name`          | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_on`            | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                                                                                                                                                                                                                        | `undefined` |
+| `_required`      | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_tabIndex`      | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_tooltipAlign`  | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                           | `'top'`     |
+| `_touched`       | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_value`         | `_value`         | Defines the value of the input.                                                                                                                              | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                                                                                                                                                                                    | `true`      |
+| `_variant`       | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `"button"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                                | `'default'` |
 
 
 ## Slots
 
-| Slot | Description                    |
-| ---- | ------------------------------ |
-|      | Die Beschriftung der Checkbox. |
+| Slot       | Description                    |
+| ---------- | ------------------------------ |
+| `"expert"` | Die Beschriftung der Checkbox. |
 
 
 ## Dependencies