@public-ui/components 1.6.0-rc.9 → 1.6.1

package/doc/badge.md

@@ -8,14 +8,14 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
 ### Code
 
 ```html
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="home" _icon-align="right"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icon="home" _icon-align="right"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="codicon codicon-home"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#0c8703" _icon="codicon codicon-home"></kol-badge>
 ```
 
 ### Beispiel
 
-<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="home" _icon-align="right"></kol-badge>
-<kol-badge _label="Beispieltext" _color="#0c8703" _icon="home" _icon-align="right"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#b7e4b4" _icon="codicon codicon-home"></kol-badge>
+<kol-badge _label="Beispieltext" _color="#0c8703" _icon="codicon codicon-home"></kol-badge>
 
 ## Verwendung
 
@@ -38,7 +38,7 @@ Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 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.
 
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
+<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>
 
 ### Nur Icon anzeigen
 
@@ -82,21 +82,19 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 <kol-alert _type="info">Eine explizite Angabe der Textfarbe ist nicht möglich.</kol-alert>
 
-<!--## Links und Referenzen
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute       | Description                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Default     |
-| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_color`              | `_color`        | Setzt die Hintergrundfarbe.                                                                                                                                        | `string` \| `undefined` \| `{ backgroundColor: string; color: string; }` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'#000'`    |
-| `_hideLabel`          | `_hide-label`   | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                          | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`     |
-| `_icon`               | `_icon`         | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                        | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_iconOnly`           | `_icon-only`    | <span class="text-red-500">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_label` _(required)_ | `_label`        | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                        | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined` |
-| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur _hide-label).                                                         | `string` \| `undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| Property              | Attribute       | Description                                                                                                                                                                                                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default     |
+| --------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                                                                                                                                                                                                                                             | `string` \| `undefined` \| `{ backgroundColor: string; color: string; }` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `'#000'`    |
+| `_hideLabel`          | `_hide-label`   | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Deprecated: ⚠️ We do not support the `_hide-label` property for the `kol-badge` element,   since it would not be accessible without visible labeling. A separate tooltip   is not planed, because a badge is not an interactive element. | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `false`     |
+| `_icon`               | `_icon`         | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                                                                                                                                                                                               | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `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` |
+| `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                                                                                                                                                                                                       | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _tabIndex?: number` \| `undefined; _value?: Stringified<StencilUnknown>; _accessKey?: string` \| `undefined; _iconAlign?: AlignPropType` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativeButtonLinkRolePropType` \| `undefined; _ariaControls?: string` \| `undefined; _ariaCurrent?: AriaCurrentPropType` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaLabel?: string` \| `undefined; _ariaSelected?: boolean` \| `undefined; _on?: ButtonCallbacksPropType<StencilUnknown>` \| `undefined; _type?: ButtonTypePropType` \| `undefined; _variant?: ButtonVariantPropType` \| `undefined; _customClass?: string` \| `undefined; _disabled?: boolean` \| `undefined; _hideLabel?: boolean` \| `undefined; _icon?: IconPropType` \| `undefined; _id?: string` \| `undefined; _name?: string` \| `undefined; _syncValueBySelector?: string` \| `undefined; _tooltipAlign?: AlignPropType` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies
@@ -107,18 +105,18 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ### Depends on
 
-- kol-span-wc
 - kol-button-wc
+- kol-span-wc
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-badge --> kol-span-wc
   kol-badge --> kol-button-wc
-  kol-span-wc --> kol-icon
+  kol-badge --> kol-span-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
-  kol-tooltip --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
   kol-version --> kol-badge
   style kol-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/breadcrumb.md

@@ -36,7 +36,7 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 <b>Folgende Eigenschaften stehen zur Verfügung:</b>
 
 - **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-link> zur Verfügung
+- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
 - **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
 
@@ -44,7 +44,7 @@ Beispiel für ein JSON-Objekt, das an das Attribut **`_links`** übergeben wird:
 
 ```JSON
 [
-  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_hide-label _': true },
+  { '_label': 'Startseite', '_href': '#/', '_icon': 'codicon codicon-home', '_hide-label': true },
   { '_label': '1. Unterseite', '_href': '/unterseite_eins' },
   { '_label': '2. Unterseite', '_href': '/unterseite_zwei' }
 ]
@@ -81,18 +81,18 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#breadcrumb
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _label="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></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/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`   | `undefined` |
-| `_label`              | `_label`      | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string` \| `undefined`   | `undefined` |
-| `_links` _(required)_ | `_links`      | Gibt die Liste der darzustellenden Button, Links oder Texte an.                                                                                                                                         | `LinkProps[]` \| `string` | `undefined` |
+| 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` |
+| `_label`              | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string` \| `undefined`             | `undefined` |
+| `_links` _(required)_ | `_links`      | Defines the list of links combined with their labels to render.                                                                            | `BreadcrumbLinkProps[]` \| `string` | `undefined` |
 
 
 ## Dependencies
@@ -110,9 +110,9 @@ graph TD;
   kol-link --> kol-link-wc
   kol-link-wc --> kol-span-wc
   kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip
+  kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/button-group.md

@@ -43,7 +43,7 @@ Im einfachsten Fall besteht die **ButtonGroup**-Komponente aus einer Liste besch
 
 Über das Attribut **`_icon="xxx"`** wird festgelegt, ob und welches Icon verwendet werden soll.
 
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie [hier](https://icofont.com/icons).
+Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _label="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
 
 Über das Attribut **`_hide-label`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
 
@@ -82,7 +82,7 @@ Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen i
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#button
+- <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>
 
 <!-- Auto Generated Below -->
 

package/doc/button-link.md

@@ -29,26 +29,27 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                             | Type                                                                                                                                            | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                       | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                         | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                            | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                         | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                               | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                            | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                      | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                         | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string`                                                                                                                                        | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                             | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                      | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                    | `number` \| `undefined`                                                                                                                           | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `'top'`     |
-| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                       | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
-| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                        | `unknown`                                                                                                                                       | `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` |
+| `_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 class="text-red-500">**[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` |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                                                                                                               | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_hideLabel`          | `_hide-label`    | Hides the label and shows the description in a Tooltip instead.                                                                                                                                                                                                                                                                                                                                      | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icon`               | `_icon`          | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                                                                                                                                                                                                                                                       | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `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` |
+| `_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.                                                                                                                                                                                                                                         | `boolean` \| `string`                                                                                                                                    | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                                                                                                        | `string` \| `undefined`                                                                                                                                  | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                                                                                                                                                                                          | `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` |
 
 
 ## Dependencies
@@ -62,9 +63,9 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 graph TD;
   kol-button-link --> kol-button-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   style kol-button-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/button.md

@@ -49,11 +49,11 @@ Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 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.
 
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
+<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>
 
 ### Schaltfläche ohne Text
 
-Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
+Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="#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,36 +91,37 @@ Probleme mit Disabled-Status
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#button
+- <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>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                                                             | Type                                                                                                                                            | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.                                                                                       | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_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 das interaktive Element der Komponente 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 das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                         | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_ariaLabel`          | `_aria-label`    | <span class="text-red-500">**[DEPRECATED]**</span> use _label instead<br/><br/>Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.). | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_ariaSelected`       | `_aria-selected` | Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. 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`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                                                                         | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                                                                               | `boolean` \| `undefined`                                                                                                                          | `false`     |
-| `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                                                                             | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `string` \| `undefined`                                                                            | `undefined` |
-| `_iconAlign`          | `_icon-align`    | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>Deprecated: Gibt an, ob das Icon links oder rechts von der Beschriftung angezeigt werden soll.                                                | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `undefined` |
-| `_iconOnly`           | `_icon-only`     | <span style="color:red">**[DEPRECATED]**</span> use _hide-label<br/><br/>Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                      | `boolean` \| `undefined`                                                                                                                          | `undefined` |
-| `_id`                 | `_id`            | Gibt die interne ID des primären Elements in der Komponente an.                                                                                                                                         | `string` \| `undefined`                                                                                                                           | `undefined` |
-| `_label` _(required)_ | `_label`         | Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).                                                                             | `string`                                                                                                                                        | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                             | `undefined` \| `{ onClick?: EventValueOrEventCallback<MouseEvent, unknown>` \| `undefined; onMouseDown?: EventCallback<MouseEvent>` \| `undefined; }` | `undefined` |
-| `_role`               | `_role`          | Gibt die Rolle des primären Elements in der Komponente an.                                                                                                                                              | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                                                                      | `undefined` |
-| `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                                    | `number` \| `undefined`                                                                                                                           | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                                                                        | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                           | `'top'`     |
-| `_type`               | `_type`          | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                                                                       | `"button"` \| `"reset"` \| `"submit"` \| `undefined`                                                                                                  | `'button'`  |
-| `_value`              | --               | Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.                                                                                                                                        | `unknown`                                                                                                                                       | `undefined` |
-| `_variant`            | `_variant`       | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                            | `'normal'`  |
+| 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 label and shows the description in a Tooltip instead.                                                                                                                                                                                                                                                                                                                                      | `boolean` \| `undefined`                                                                                                                                 | `false`     |
+| `_icon`               | `_icon`          | Defines the icon classnames (e.g. `_icon="fa-solid fa-user"`).                                                                                                                                                                                                                                                                                                                                       | `KoliBriHorizontalIcon & KoliBriVerticalIcon` \| `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` |
+| `_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.                                                                                                                                                                                                                                         | `boolean` \| `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
@@ -140,9 +141,9 @@ Probleme mit Disabled-Status
 graph TD;
   kol-button --> kol-button-wc
   kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip
+  kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
-  kol-tooltip --> kol-span-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-nav --> kol-button
   kol-pagination --> kol-button
   kol-table --> kol-button

package/doc/card.md

@@ -12,29 +12,25 @@ Der **Fuß-Bereich** wird optional durch das Attribut **`_has-footer`** aktivier
 ### Code
 
 ```html
-<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
-	<div slot="header">Text im Header-Bereich</div>
+<kol-card _label="Testtitel">
 	<div slot="content">
 		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
 		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
 		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 	</div>
-	<div slot="footer">Weiterer Beispieltext im Fuß-Bereich</div>
 </kol-card>
 ```
 
 ### Beispiel
 
-<kol-card _heading="Testtitel" _has-footer _max-height="vh2">
-	<div slot="header">Text im Header-Bereich</div>
+<kol-card _label="Testtitel">
 	<div slot="content">
 		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
 		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
 		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 	</div>
-	<div slot="footer">Weiterer Beispieltext im Fuß-Bereich</div>
 </kol-card>
 
 ## Verwendung
@@ -46,7 +42,7 @@ Die horizontale Trennlinie zwischen beiden Bereichen setzt KoliBri automatisch.
 
 ### Titel der Card-Komponente
 
-Den Titel der Card bestimmen Sie durch Setzen des Attributs **`_heading`**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
+Den Titel der Card bestimmen Sie durch Setzen des Attributs **`_label`**. Hier können Sie beliebigen Text, auch Sonderzeichen und Umlaute, eingeben.
 Beachten Sie, dass **HTML-Code** nicht erlaubt ist. Sofern nicht gesetzt werden drei Punkte dargestellt.
 Die Überschriftenebene des Titels wird durch das Attribut **`_level`** übergeben. Möglich sind die Level **1** bis **6**
 
@@ -57,10 +53,8 @@ Die Inhalte im Header/Content/Footer-Bereich der Card bestimmen Sie durch Einfü
 Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container verwenden können, es aber empfohlen wird ein `<div></div>`-Tag zu verwenden.
 
 ```html
-<kol-card _heading="Beispiel" _level="1">
-	<div slot="header">Text im Header-Bereich</div>
+<kol-card _label="Beispiel" _level="1">
 	<div slot="content">Text im Inhalts-Bereich</div>
-	<div slot="footer">Text im Fuß-Bereich</div>
 </kol-card>
 ```
 
@@ -76,12 +70,15 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 
 ## Properties
 
-| Property                | Attribute     | Description                                                                                                                                           | Type                                           | Default     |
-| ----------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
-| `_hasFooter`            | `_has-footer` | Macht den Footerbereich der Card sichtbar.                                                                                                            | `boolean` \| `undefined`                         | `false`     |
-| `_heading` _(required)_ | `_heading`    | Gibt die Beschriftung der Komponente an.                                                                                                              | `string`                                       | `undefined` |
-| `_headline`             | `_headline`   | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Property _heading.<br/><br/>Gibt die Beschriftung der Komponente an.         | `string` \| `undefined`                          | `undefined` |
-| `_level`                | `_level`      | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll. | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined` | `1`         |
+| 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` |
 
 
 ## Slots
@@ -99,11 +96,17 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 ### Depends on
 
 - [kol-heading-wc](../heading)
+- kol-button-wc
 
 ### Graph
 ```mermaid
 graph TD;
   kol-card --> kol-heading-wc
+  kol-card --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
   style kol-card fill:#f9f,stroke:#333,stroke-width:4px
 ```