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

package/dist/types/types/props/options.d.ts

@@ -0,0 +1,15 @@
+import { Generic } from '@a11y-ui/core';
+import { WatchOptions } from '../../utils/prop.validators';
+import { Stringified } from '../common';
+import { Optgroup, Option } from '../input/types';
+import { W3CInputValue } from '../w3c';
+export type OptionsPropType = Stringified<Option<W3CInputValue>[]>;
+export type OptionsWithOptgroupPropType = Stringified<(Option<W3CInputValue> | Optgroup<W3CInputValue>)[]>;
+export type PropOptions = {
+  options: OptionsPropType;
+};
+export type PropOptionsWithOptgroup = {
+  options: OptionsWithOptgroupPropType;
+};
+export declare const validateOptions: (component: Generic.Element.Component, value: OptionsPropType | undefined, options?: WatchOptions) => void;
+export declare const validateOptionsWithOptgroup: (component: Generic.Element.Component, value: OptionsWithOptgroupPropType | undefined, options?: WatchOptions) => void;

package/dist/types/types/props/read-only.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type ReadOnlyPropType = boolean;
 export type PropReadOnly = {
-  readOnly: boolean;
+  readOnly: ReadOnlyPropType;
 };
-export declare const validateReadOnly: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateReadOnly: (component: Generic.Element.Component, value?: ReadOnlyPropType) => void;

package/dist/types/types/props/required.d.ts

@@ -1,5 +1,7 @@
 import { Generic } from '@a11y-ui/core';
+type RequiredPropType = boolean;
 export type PropRequired = {
-  required: boolean;
+  required: RequiredPropType;
 };
-export declare const validateRequired: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateRequired: (component: Generic.Element.Component, value?: RequiredPropType) => void;
+export {};

package/dist/types/types/props/rows.d.ts

@@ -0,0 +1,6 @@
+import { Generic } from '@a11y-ui/core';
+export type RowsPropType = number;
+export type PropRows = {
+  rows: RowsPropType;
+};
+export declare const validateRows: (component: Generic.Element.Component, value?: RowsPropType) => void;

package/dist/types/types/props/show.d.ts

@@ -1,6 +1,7 @@
 import { Generic } from '@a11y-ui/core';
 import { WatchBooleanOptions } from '../../utils/prop.validators';
+export type ShowPropType = boolean;
 export type PropShow = {
-  show: boolean;
+  show: ShowPropType;
 };
-export declare const validateShow: (component: Generic.Element.Component, value?: boolean, hooks?: WatchBooleanOptions) => void;
+export declare const validateShow: (component: Generic.Element.Component, value?: ShowPropType, hooks?: WatchBooleanOptions) => void;

package/dist/types/types/props/suggestions.d.ts

@@ -0,0 +1,8 @@
+import { Generic } from '@a11y-ui/core';
+import { Stringified } from '../common';
+import { W3CInputValue } from '../w3c';
+export type SuggestionsPropType = Stringified<W3CInputValue[]>;
+export type PropSuggestions = {
+  suggestions: SuggestionsPropType;
+};
+export declare const validateSuggestions: (component: Generic.Element.Component, value?: SuggestionsPropType) => void;

package/dist/types/types/props/sync-value-by-selector.d.ts

@@ -0,0 +1,4 @@
+export type SyncValueBySelectorPropType = string;
+export type PropSyncValueBySelector = {
+  syncValueBySelector: SyncValueBySelectorPropType;
+};

package/dist/types/types/props/tooltip-align.d.ts

@@ -0,0 +1,7 @@
+import { Generic } from '@a11y-ui/core';
+import { AlignPropType } from './align';
+export type TooltipAlignPropType = AlignPropType;
+export type PropTooltipAlign = {
+  tooltipAlign: TooltipAlignPropType;
+};
+export declare const validateTooltipAlign: (component: Generic.Element.Component, value?: TooltipAlignPropType) => void;

package/dist/types/types/props/touched.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
+export type TouchedPropType = boolean;
 export type PropTouched = {
-  touched: boolean;
+  touched: TouchedPropType;
 };
-export declare const validateTouched: (component: Generic.Element.Component, value?: boolean) => void;
+export declare const validateTouched: (component: Generic.Element.Component, value?: TouchedPropType) => void;

package/dist/types/types/props/variant/spin.d.ts

@@ -1,6 +1,6 @@
 import { Generic } from '@a11y-ui/core';
-export type SpinVariant = 'cycle' | 'dot' | 'none';
+export type SpinVariantPropType = 'cycle' | 'dot' | 'none';
 export type PropSpinVariant = {
-  variant: SpinVariant;
+  variant: SpinVariantPropType;
 };
-export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariant) => void;
+export declare const validateSpinVariant: (component: Generic.Element.Component, value?: SpinVariantPropType) => void;

package/dist/types/types/unknown.d.ts

@@ -0,0 +1 @@
+export type StencilUnknown = object | string | number | boolean | null | undefined;

package/dist/types/utils/a11y.tipps.d.ts

@@ -1,9 +1,14 @@
-export declare const a11yHint: (msg: string) => void;
-export declare const deprecatedHint: (msg: string) => void;
-export declare const devHint: (msg: string) => void;
-export declare const devWarning: (msg: string) => void;
-export declare const featureHint: (msg: string, done?: boolean) => void;
-export declare const uiUxHint: (msg: string) => void;
+type HintOptions = {
+  details?: unknown[];
+  force?: boolean;
+};
+export declare const a11yHint: (msg: string, options?: HintOptions) => void;
+export declare const deprecatedHint: (msg: string, options?: HintOptions) => void;
+export declare const devHint: (msg: string, options?: HintOptions) => void;
+export declare const devWarning: (msg: string, options?: HintOptions) => void;
+export declare const featureHint: (msg: string, done?: boolean, options?: HintOptions) => void;
+export declare const uiUxHint: (msg: string, options?: HintOptions) => void;
 export declare const a11yHintDisabled: () => void;
 export declare const a11yHintLabelingLandmarks: (value: unknown) => void;
 export declare const uiUxHintMillerscheZahl: (className: string, length?: number) => void;
+export {};

package/dist/types/utils/dev.utils.d.ts

@@ -2,7 +2,7 @@ export declare const configKoliBri: (window: Window) => void;
 export declare const getWindow: () => Window;
 export declare const getDocument: () => Document;
 export declare const getDevMode: () => boolean;
-export declare const getExperimalMode: () => boolean;
+export declare const getExperimentalMode: () => boolean;
 export declare const getColorContrastAnalysis: () => boolean;
 type LogShieldOptions = {
   classifier?: string;

package/dist/types/utils/events.d.ts

@@ -0,0 +1,4 @@
+type KoliBriEventType = 'blur' | 'change' | 'click' | 'focus';
+export declare function stopPropagation(event: Event): void;
+export declare function tryToDispatchKoliBriEvent<T>(type: KoliBriEventType, target?: EventTarget, detail?: T): void;
+export {};

package/dist/types/utils/prop.validators.d.ts

@@ -1,5 +1,9 @@
+import { Subject } from 'rxjs';
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
+import { AriaCurrentPropType } from '../types/props/aria-current';
+import { PropHref } from '../types/props/href';
+import { StencilUnknown } from '../types/unknown';
 export declare const objectObjectHandler: (value: unknown, cb: () => void) => void;
 export declare const emptyStringByArrayHandler: (value: unknown, cb: () => void) => void;
 export declare const setEventTarget: (event: Event, target?: HTMLElement) => void;
@@ -31,7 +35,7 @@ export declare const watchBoolean: (component: Generic.Element.Component, propNa
 export declare const watchString: (component: Generic.Element.Component, propName: string, value?: string, options?: WatchStringOptions) => void;
 export declare const watchNumber: (component: Generic.Element.Component, propName: string, value?: number, options?: WatchNumberOptions) => void;
 export declare const watchJsonArrayString: <T>(component: Generic.Element.Component, propName: string, itemValidation: (item: T) => boolean, value?: Stringified<T[]> | undefined, arrayValidation?: (items: T[]) => boolean, options?: WatchOptions) => void;
-export declare const mapString2Unknown: (value: unknown) => unknown;
+export declare const mapString2Unknown: (value: StencilUnknown) => StencilUnknown;
 export declare const stringifyJson: (value: unknown) => string;
 export declare const parseJson: <T>(value: unknown) => T;
 export declare const mapBoolean2String: (value?: boolean) => string | undefined;
@@ -53,7 +57,12 @@ export declare class KoliBriUtils {
   private static cache;
   static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
 }
+type AriaCurrentEventType = {
+  ariaCurrent: AriaCurrentPropType;
+} & PropHref;
+export declare const ariaCurrentSubject: Subject<AriaCurrentEventType>;
 export declare class KoliBriDevHelper {
+  static readonly ariaCurrentSubject: Subject<AriaCurrentEventType>;
   static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>) => string;
   static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string) => void;
   static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;

package/dist/types/utils/validators/alignment.d.ts

@@ -1,3 +1,3 @@
 import { Generic } from '@a11y-ui/core';
-import { Align } from '../../types/props';
-export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: Align) => void;
+import { AlignPropType } from '../../types/props/align';
+export declare const validateAlignment: (component: Generic.Element.Component, propName: string, value?: AlignPropType) => void;

package/dist/types/utils/validators/options.d.ts

@@ -0,0 +1,2 @@
+import { SelectOption } from '../../types/input/types';
+export declare const validateInputSelectOptions: <T>(option: SelectOption<T>) => boolean;

package/doc/abbr.md

@@ -8,33 +8,29 @@ Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Kompone
 ### Code
 
 ```html
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 ```
 
 ### Beispiel
 
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
+<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
 
 ## Verwendung
 
 ### Angabe der Beschreibung zur Abkürzung
 
-Der Begriff bzw. die Erklärung wird über das Attribut **`_title`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
+Der Begriff bzw. die Erklärung wird über das Attribut **`_label`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
 
 ### Ausrichtung des Tooltip
 
 Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
 
-<!--### Best practices
-
-### Anwendungsfälle-->
-
 ## Barrierefreiheit
 
 Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
@@ -42,17 +38,18 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Links und Referenzen
 
-- https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                      | Type                                                  | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_title` _(required)_ | `_title`         | Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.                         | `string`                                              | `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'`     |
+| 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` |
+| `_title`        | `_title`         | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Deprecated: Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an. | `string` \| `undefined`                                 | `undefined` |
+| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                 | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined` | `'top'`     |
 
 
 ## Slots
@@ -66,13 +63,13 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ### Depends on
 
-- [kol-tooltip](../tooltip)
+- [kol-tooltip-wc](../tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
-  kol-abbr --> kol-tooltip
-  kol-tooltip --> kol-span-wc
+  kol-abbr --> kol-tooltip-wc
+  kol-tooltip-wc --> kol-span-wc
   kol-span-wc --> kol-icon
   style kol-abbr fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/accordion.md

@@ -10,7 +10,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 ```html
 <div class="grid gap-2">
-	<kol-accordion _heading="Element 1">
+	<kol-accordion _label="Element 1">
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -19,7 +19,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 		<div slot="header">Inhalt eines Header</div>
 	</kol-accordion>
-	<kol-accordion _heading="Element 2">
+	<kol-accordion _label="Element 2">
 		<div slot="header">Inhalt im Header</div>
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -35,7 +35,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 ### Beispiel
 
 <div class="grid gap-2">
-	<kol-accordion _heading="Element 1">
+	<kol-accordion _label="Element 1">
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 			voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -44,7 +44,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 		</div>
 		<div slot="header">Inhalt eines Header</div>
 	</kol-accordion>
-	<kol-accordion _heading="Element 2">
+	<kol-accordion _label="Element 2">
 		<div slot="header">Inhalt im Header</div>
 		<div slot="content">
 			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
@@ -60,7 +60,7 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
 
 ### Überschrift im Accordion-Tab
 
-Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_heading`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
+Der Text, der als Überschrift im Accordion-Tab angezeigt werden soll, wird durch das Attribut **`_label`** übergeben. Der Text kann neben Sonderzeichen auch Umlaute oder Leerzeichen enthalten.
 
 ### Überschriftenebene
 
@@ -115,19 +115,20 @@ Standardansicht gelegt.
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#accordion
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _label="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property                | Attribute  | Description                                                                                                                                           | Type                                                                                 | Default     |
-| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
-| `_heading` _(required)_ | `_heading` | Gibt die Beschriftung der Komponente an.                                                                                                              | `string`                                                                             | `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`         |
-| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                                                                                                                 | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, boolean>` \| `undefined; }` | `undefined` |
-| `_open`                 | `_open`    | Gibt an, ob die Komponente entweder geöffnet oder geschlossen ist.                                                                                    | `boolean` \| `undefined`                                                               | `false`     |
+| Property   | Attribute  | Description                                                                                                               | Type                                                                                 | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
+| `_heading` | `_heading` | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<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`      | --         | Gibt die EventCallback-Funktionen an.                                                                                     | `undefined` \| `{ onClick?: 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
@@ -152,9 +153,9 @@ graph TD;
   kol-accordion --> kol-heading-wc
   kol-accordion --> 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-accordion fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

package/doc/alert.md

@@ -20,7 +20,7 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 
 ### Überschrift
 
-Die **Überschrift** der Alert-Komponente wird über das Attribut `_heading` bestimmt.
+Die **Überschrift** der Alert-Komponente wird über das Attribut `_label` bestimmt.
 
 ### Überschriftenebene
 
@@ -73,22 +73,22 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ## Links und Referenzen
 
-- https://www.w3.org/TR/wai-aria-practices/#alert
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _label="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                                                                                           | Type                                                                    | Default     |
-| ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
-| `_alert`     | `_alert`      | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                         | `boolean` \| `undefined`                                                  | `false`     |
-| `_hasCloser` | `_has-closer` | Gibt an, ob die Komponente einen Schließen-Schalter hat.                                                                                              | `boolean` \| `undefined`                                                  | `false`     |
-| `_heading`   | `_heading`    | 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`         |
-| `_on`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                                                      | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
-| `_type`      | `_type`       | Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.                                                                     | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
-| `_variant`   | `_variant`    | Gibt an, welche Variante der Darstellung genutzt werden soll.                                                                                         | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |
+| Property     | Attribute     | Description                                                                                                        | Type                                                                    | Default     |
+| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
+| `_alert`     | `_alert`      | Defines whether the screen-readers should read out the notification.                                               | `boolean` \| `undefined`                                                  | `false`     |
+| `_hasCloser` | `_has-closer` | Defines whether the card has a close button.                                                                       | `boolean` \| `undefined`                                                  | `false`     |
+| `_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`        | --            | Gibt die EventCallback-Function für das Schließen des Alerts an.                                                   | `undefined` \| `{ onClose?: EventCallback<Event>` \| `undefined; }`         | `undefined` |
+| `_type`      | `_type`       | Defines either the type of the component or of the components interactive element.                                 | `"default"` \| `"error"` \| `"info"` \| `"success"` \| `"warning"` \| `undefined` | `'default'` |
+| `_variant`   | `_variant`    | Defines which variant should be used for presentation.                                                             | `"card"` \| `"msg"` \| `undefined`                                          | `'msg'`     |
 
 
 ## Slots
@@ -117,9 +117,9 @@ graph TD;
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
   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-alert --> kol-alert-wc
   style kol-alert-wc fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/doc/avatar.md

@@ -0,0 +1,71 @@
+# Avatar
+
+Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.
+
+## Konstruktion
+
+### Code
+
+```html
+<kol-avatar _label="Erika Maria Mustermann"></kol-avatar>
+<kol-avatar _label="Erika"></kol-avatar>
+<kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar>
+```
+
+### Beispiele
+
+<kol-avatar _label="Erika Maria Mustermann"></kol-avatar>
+<kol-avatar _label="Erika"></kol-avatar>
+<kol-avatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Erika Maria Mustermann"></kol-avatar>
+
+## Verwendung
+
+### Mit Bild
+
+In der Standard-Ansicht zeigt die **Avatar**-Komponente ein Avatar-Bild. Hierzu muss das Attribut `_src` mit einer URL zum Bild angegeben werden.  
+Zusätzlich ist es notwendig, das `_label`-Attribut mit dem Namen des Benutzers anzugeben, damit ein Alternativtext ausgezeichnet werden kann.
+
+### Ohne Bild
+
+Die **Avatar**-Komponente kann auch ohne `_src`-Attribut verwendet werden und zeigt in diesem Fall die Initialen des Benutzers, basierend auf dem
+`_label`-Attribut.
+
+### Anwendungsfälle
+
+Verwenden Sie die **Avatar**-Komponente, um das Bild eines Users anzuzeigen.
+
+## Barrierefreiheit
+
+Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefreiheit betrachtet:
+
+- Die Komponente ist mit einem Beschreibungstext, der den Namen des Users beinhaltet, als aria-label ausgezeichnet.
+- Die Initialen, die alternativ zum Avatar-Bild gezeigt werden, werden als rein visuelles, semantisch nicht relevantes Element betrachtet und für Screenreader
+  entsprechend versteckt.
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| 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` |
+| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string` \| `undefined` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [kol-avatar](.)
+
+### Graph
+```mermaid
+graph TD;
+  kol-avatar --> kol-avatar-wc
+  style kol-avatar-wc fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+

package/doc/badge.md

@@ -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
 ```