@public-ui/components 1.6.0-rc.18 → 1.6.0-rc.19

package/dist/types/stencil-public-runtime.d.ts

@@ -1289,7 +1289,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;

package/dist/types/types/button-link-text.d.ts

@@ -1,5 +1,6 @@
 import { Generic } from '@a11y-ui/core';
 import { KoliBriButtonCallbacks, LinkTarget } from './button-link';
+import { PropHideLabel } from './props/hide-label';
 import { PropHref } from './props/href';
 import { PropIcon } from './props/icon';
 import { PropLabel } from './props/label';
@@ -8,7 +9,7 @@ type RequiredButtonProps = PropLabel & {
 };
 type RequiredLinkProps = PropHref;
 type RequiredTextProps = PropLabel;
-type OptionalButtonOrLinkOrTextProps = PropIcon & {
+type OptionalButtonOrLinkOrTextProps = PropHideLabel & PropIcon & {
   active: boolean;
   target: LinkTarget;
   targetDescription: string;

package/dist/types/types/button-link.d.ts

@@ -4,7 +4,8 @@ import { EventCallback, EventValueOrEventCallback } from './callbacks';
 import { Stringified } from './common';
 import { KoliBriAllIcon, KoliBriIconProp } from './icon';
 import { Align } from './props/align';
-import { PropAriaCurrent } from './props/aria-current';
+import { PropAriaControls } from './props/aria-controls';
+import { PropAriaCurrent, PropListenAriaCurrent } from './props/aria-current';
 import { PropAriaExpanded } from './props/aria-expanded';
 import { PropAriaLabel } from './props/aria-label';
 import { PropAriaSelected } from './props/aria-selected';
@@ -17,24 +18,30 @@ import { PropStealth } from './props/stealth';
 export type AlternativButtonLinkRole = 'button' | 'link' | 'tab';
 type OptionalButtonAndLinkProps = {
   ariaControls: string;
+  ariaExpanded: boolean;
+  ariaSelected: boolean;
+  disabled: boolean;
   icon: Stringified<KoliBriIconProp>;
   iconAlign: Align;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: Align;
-} & PropAriaCurrent & PropAriaExpanded & PropAriaLabel & PropAriaSelected & PropDisabled & PropHideLabel;
+} & PropAriaCurrent & PropAriaLabel & PropHideLabel;
 type RequiredButtonAndLinkStates = {
   icon: KoliBriAllIcon;
 };
 type OptionalButtonAndLinkStates = {
   ariaControls: string;
+  ariaExpanded: boolean;
+  ariaSelected: boolean;
+  disabled: boolean;
   iconAlign: Align;
   iconOnly: boolean;
   role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: Align;
-} & PropAriaCurrent & PropAriaExpanded & PropAriaSelected & PropDisabled & PropHideLabel;
+} & PropAriaCurrent & PropHideLabel;
 export type KoliBriButtonType = 'button' | 'reset' | 'submit';
 export type KoliBriButtonVariant = 'primary' | 'secondary' | 'normal' | 'tertiary' | 'danger' | 'ghost' | 'custom';
 export type KoliBriButtonCallbacks<T> = {
@@ -67,38 +74,34 @@ type OptionalButtonLinkStates = OptionalButtonAndLinkStates & KoliBriButtonCusto
   value: unknown;
 };
 export type RequiredButtonProps = RequiredButtonLinkProps & PropLabelWithExpertSlot;
-export type OptionalButtonProps = OptionalButtonLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
+export type OptionalButtonProps = OptionalButtonLinkProps & PropAriaControls & PropAriaExpanded & PropAriaSelected & PropDisabled & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
 export type ButtonProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonProps>;
 export type RequiredButtonStates = RequiredButtonLinkStates & KoliBriButtonVariantPropState & PropLabelWithExpertSlot;
-export type OptionalButtonStates = OptionalButtonLinkStates & KoliBriButtonCustomClassPropState;
+export type OptionalButtonStates = OptionalButtonLinkStates & PropAriaControls & PropAriaExpanded & PropAriaSelected & PropDisabled & KoliBriButtonCustomClassPropState;
 export type ButtonStates = Generic.Element.Members<RequiredButtonStates, OptionalButtonStates>;
 export type LinkOnCallbacks = {
   [Events.onClick]?: EventValueOrEventCallback<Event, string>;
 };
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | string;
 export type LinkUseCase = 'text' | 'image' | 'nav';
-export type RequiredLinkProps = PropHref;
-export type OptionalLinkProps = OptionalButtonAndLinkProps & {
-  disabled: boolean;
+type RequiredLinkProps = PropHref;
+type OptionalLinkProps = OptionalButtonAndLinkProps & {
   on: LinkOnCallbacks;
   selector: string;
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-} & PropDownload & PropLabelWithExpertSlot & PropStealth;
+} & PropDownload & PropLabelWithExpertSlot & PropListenAriaCurrent & PropStealth;
 export type LinkProps = Generic.Element.Members<RequiredLinkProps, OptionalLinkProps>;
 type RequiredLinkStates = RequiredButtonAndLinkStates & PropHref & PropLabelWithExpertSlot;
 type OptionalLinkStates = OptionalButtonAndLinkStates & {
-  ariaSelected: boolean;
   on: LinkOnCallbacks;
   selector: string;
   target: LinkTarget;
   targetDescription: string;
   useCase: LinkUseCase;
-} & PropAriaSelected & PropDownload & PropStealth;
+} & PropDownload & PropListenAriaCurrent & PropStealth;
 export type LinkStates = Generic.Element.Members<RequiredLinkStates, OptionalLinkStates>;
 export type KoliBriLinkAPI = Generic.Element.ComponentApi<RequiredLinkProps, OptionalLinkProps, RequiredLinkStates, OptionalLinkStates>;
-export type RequiredLinkButtonProps = RequiredLinkProps;
-export type OptionalLinkButtonProps = OptionalLinkProps & KoliBriButtonVariantPropState & KoliBriButtonCustomClassPropState;
 export declare const watchTooltipAlignment: (component: Generic.Element.Component, propName: string, value?: Align) => void;
 export {};

package/dist/types/types/props/aria-controls.d.ts

@@ -0,0 +1,5 @@
+import { Generic } from '@a11y-ui/core';
+export type PropAriaControls = {
+  ariaControls: string;
+};
+export declare const validateAriaControls: (component: Generic.Element.Component, value?: string) => void;

package/dist/types/types/props/aria-current.d.ts

@@ -3,4 +3,8 @@ export type AriaCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | boole
 export type PropAriaCurrent = {
   ariaCurrent: AriaCurrent;
 };
+export type PropListenAriaCurrent = {
+  listenAriaCurrent: AriaCurrent;
+};
 export declare const validateAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;
+export declare const validateListenAriaCurrent: (component: Generic.Element.Component, value?: AriaCurrent) => void;

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

@@ -1,5 +1,3 @@
-import { Generic } from '@a11y-ui/core';
 export type PropCompact = {
   compact: boolean;
 };
-export declare const validateCompact: (component: Generic.Element.Component, value?: boolean) => void;

package/dist/types/types/props/hide-label.d.ts

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

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/suggestions.d.ts

@@ -0,0 +1,8 @@
+import { Stringified } from '../common';
+import { Generic } from '@a11y-ui/core';
+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/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/prop.validators.d.ts

@@ -1,5 +1,8 @@
+import { Subject } from 'rxjs';
 import { Generic } from '@a11y-ui/core';
 import { Stringified } from '../types/common';
+import { AriaCurrent } from '../types/props/aria-current';
+import { PropHref } from '../types/props/href';
 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;
@@ -53,7 +56,12 @@ export declare class KoliBriUtils {
   private static cache;
   static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
 }
+type AriaCurrentEventType = {
+  ariaCurrent: AriaCurrent;
+} & 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/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,24 +8,24 @@ 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
 
@@ -45,10 +45,11 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## 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 abbreviation title and tooltip content                                                                                            | `string` \| `undefined`                                 | `undefined` |
+| `_title`        | `_title`         | <span class="text-red-500">**[DEPRECATED]**</span> Use _label.<br/><br/>Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an. | `string` \| `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'`     |
 
 
 ## Slots

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
 
@@ -122,12 +122,13 @@ Standardansicht gelegt.
 
 ## 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/>Gibt die Beschriftung der Komponente an.                                         | `string` \| `undefined`                                                                | `undefined` |
+| `_label`   | `_label`   | Defines the button label                                                                                                                              | `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-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`     |
 
 
 ## Slots

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
 
@@ -84,7 +84,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | ------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------- |
 | `_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` |
+| `_label`     | `_label`      | Defines the description of the component.                                                                                                             | `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'` |

package/doc/avatar.md

@@ -1,4 +1,47 @@
-# kol-avatar-wc
+# 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 dem Namen des Users als aria-label ausgezeichnet.
+- Falls vorhanden, wird das Avatar-Bild mit einem Alternativtext beschrieben.
+- 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 -->
 

package/doc/badge.md

@@ -94,7 +94,7 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 | `_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: LabelWithExpertSlotPropType; } & { _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; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button` | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur _hide-label).                                                         | `string` \| `undefined` \| `{ _label: LabelWithExpertSlotPropType; } & { _ariaControls?: string` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Align` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Align` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaLabel?: string` \| `undefined; _hideLabel?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _label?: LabelWithExpertSlotPropType` \| `undefined; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }` | `undefined` |
 
 
 ## Dependencies

package/doc/button-link.md

@@ -29,26 +29,26 @@ 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.).                                                                             | `boolean` \| `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`    | 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`  | <span class="text-red-500">**[DEPRECATED]**</span> aria-current is not necessary for buttons. will be removed in version 2.<br/><br/>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 style="color:red">**[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.).                                                                                                                                                                                      | `boolean` \| `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` |
 
 
 ## Dependencies