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

package/dist/types/i18n.d.ts

@@ -2,7 +2,7 @@ import { Generic } from '@a11y-ui/core';
 import locale_de from './locales/de';
 type ResourcePrefix = 'Kol';
 type ComponentKeys = keyof typeof locale_de;
-export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "avatar-alt">>;
+export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "close" | "of" | "characters" | "message" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "sort-descending" | "sort-ascending" | "sort-none" | "avatar-alt">>;
 type Options = {
   count?: number;
   placeholders?: {

package/dist/types/locales/de.d.ts

@@ -26,6 +26,9 @@ declare const _default: {
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;
+  'sort-descending': string;
+  'sort-ascending': string;
+  'sort-none': string;
   'avatar-alt': string;
 };
 export default _default;

package/dist/types/locales/en.d.ts

@@ -26,6 +26,9 @@ declare const _default: {
   'logo-description': string;
   'open-link-in-tab': string;
   'kolibri-logo': string;
+  'sort-descending': string;
+  'sort-ascending': string;
+  'sort-none': string;
   'avatar-alt': string;
 };
 export default _default;

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/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/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
 
@@ -38,17 +38,18 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Links und Referenzen
 
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
+- <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 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
 
@@ -115,19 +115,20 @@ Standardansicht gelegt.
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
+- <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/>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
 
@@ -73,7 +73,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
+- <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 -->
 
@@ -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

@@ -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" _target="_blank" _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
 
@@ -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/breadcrumb.md

@@ -36,7 +36,7 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 <b>Folgende Eigenschaften stehen zur Verfügung:</b>
 
 - **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
+- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
 - **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
 
@@ -81,7 +81,7 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 
 ## Links und Referenzen
 
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _label="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
 
 <!-- Auto Generated Below -->
 

package/doc/button-group.md

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