@public-ui/components 2.0.0-rc.9 → 2.0.1

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

@@ -1,34 +1,31 @@
-import { Subject } from 'rxjs';
-import { Generic } from '@a11y-ui/core';
+import { Generic } from 'adopted-style-sheets';
 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;
 type SetStateHooks = {
-  afterPatch?: Generic.Element.StateHooksCallback;
-  beforePatch?: Generic.Element.NextStateHooksCallback;
+    afterPatch?: Generic.Element.StateHooksCallback;
+    beforePatch?: Generic.Element.NextStateHooksCallback;
 };
 export declare const setState: <T>(component: Generic.Element.Component, propName: string, value?: T | null | undefined, hooks?: SetStateHooks) => void;
 export type WatchOptions = {
-  defaultValue?: unknown;
-  hooks?: SetStateHooks;
-  required?: boolean;
+    defaultValue?: unknown;
+    hooks?: SetStateHooks;
+    required?: boolean;
 };
 export type WatchBooleanOptions = WatchOptions & {
-  defaultValue?: boolean | null;
+    defaultValue?: boolean | null;
 };
 export type WatchStringOptions = WatchOptions & {
-  defaultValue?: string | null;
-  maxLength?: number;
-  minLength?: number;
+    defaultValue?: string | null;
+    maxLength?: number;
+    minLength?: number;
 };
 export type WatchNumberOptions = WatchOptions & {
-  defaultValue?: number | null;
-  min?: number;
-  max?: number;
+    defaultValue?: number | null;
+    min?: number;
+    max?: number;
 };
 export declare function watchValidator<T>(component: Generic.Element.Component, propName: string, validationFunction: (value?: T) => boolean, requiredGeneric: Set<string | null | undefined>, value?: T, options?: WatchOptions): void;
 export declare const watchBoolean: (component: Generic.Element.Component, propName: string, value?: boolean, options?: WatchBooleanOptions) => void;
@@ -43,28 +40,24 @@ export declare const mapStringOrBoolean2String: (value?: string | boolean) => st
 export declare const koliBriQuerySelector: <T extends Element>(selector: string, node?: Document | HTMLElement | ShadowRoot) => T | null;
 export declare const koliBriQuerySelectorAll: <T extends Element>(selector: string, node?: Document | HTMLElement | ShadowRoot) => T[];
 interface A11yColorContrast {
-  backgroundColor: string;
-  color: string;
-  domNode: HTMLElement | HTMLSlotElement;
-  level: string;
-  score: number;
+    backgroundColor: string;
+    color: string;
+    domNode: HTMLElement | HTMLSlotElement;
+    level: string;
+    score: number;
 }
 export declare const koliBriA11yColorContrast: (domNode: HTMLElement, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
 export declare const koliBriQuerySelectorColors: (selector: string, a11yColorContrast?: A11yColorContrast) => A11yColorContrast;
 export declare class KoliBriUtils {
-  private static executionLock;
-  private static cache;
-  static queryHtmlElementColors(targetNode: HTMLElement, a11yColorContrast: A11yColorContrast, recursion?: boolean, log?: boolean): A11yColorContrast | null;
+    private static executionLock;
+    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 patchTheme: (name: string, map: Generic.Theming.Map<string, string>, append?: boolean | undefined) => string;
-  static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string, append?: boolean | undefined) => void;
-  static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;
-  static readonly querySelectorAll: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T[];
-  static readonly stringifyJson: (value: unknown) => string;
+    static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>, options?: Generic.Theming.PatchOptions | undefined) => string;
+    static readonly patchThemeTag: (themeName: string, tagName: "GLOBAL" | "PROPERTIES" | `${Uppercase<string>}-${Uppercase<string>}`, css: string, options?: Generic.Theming.PatchOptions | undefined) => void;
+    static readonly querySelector: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T | null;
+    static readonly querySelectorAll: <T extends Element>(selector: string, node?: HTMLElement | ShadowRoot | Document | undefined) => T[];
+    static readonly stringifyJson: (value: unknown) => string;
 }
 export {};

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

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

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

@@ -1,4 +1,4 @@
-import { Generic } from '@a11y-ui/core';
+import type { Generic } from 'adopted-style-sheets';
 declare const loadingOptions: readonly ["eager", "lazy"];
 export type Loading = (typeof loadingOptions)[number];
 export declare function validateLoading(component: Generic.Element.Component, value?: Loading): void;

package/dist/types/utils/validators/tab-index.d.ts

@@ -1,2 +1,2 @@
-import { Generic } from '@a11y-ui/core';
+import type { Generic } from 'adopted-style-sheets';
 export declare const validateTabIndex: (component: Generic.Element.Component, value?: number) => void;

package/doc/alert.md

@@ -7,13 +7,13 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
 ### Code
 
 ```html
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success">Textbereich im Alert</kol-alert>
 <kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 ```
 
 ### Beispiel
 
-<kol-alert _label="Überschrift im Alert" _level="1" _type="success" _variant="msg">Textbereich im Alert</kol-alert>
+<kol-alert _label="Überschrift im Alert" _level="1" _type="success" >Textbereich im Alert</kol-alert>
 <kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
 
 ## Verwendung

package/doc/badge.md

@@ -17,6 +17,23 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
 <kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
 <kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
 
+## Kontext für Badges
+
+Um die Benutzerfreundlichkeit und die Zugänglichkeit zu verbessern, sollten Badges
+immer im Kontext einer aussagekräftigen Überschrift verwendet werden.
+
+Stellen Sie sicher, dass jede Gruppe von Badges durch eine Überschrift ergänzt wird, die den gemeinsamen Kontext oder das Thema beschreibt. Vermeiden Sie es, Badges ohne solche beschreibenden Überschriften zu präsentieren.
+
+### Beispiel
+
+```html
+<kol-heading _label="Beispielüberschrift" _level="2"></kol-heading>
+<div>
+	<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>
+	<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
+</div>
+```
+
 ## Verwendung
 
 ### Label im Badge

package/doc/button-link.md

@@ -49,6 +49,19 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 | `_value`              | `_value`         | Defines the value that the button emits on click.                                                                                                                                | `boolean` \| `null` \| `number` \| `object` \| `string` \| `undefined`                                                                                           | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<Stringified<StencilUnknown>>`
+
+
+
+
 ## Dependencies
 
 ### Depends on

package/doc/button.md

@@ -120,6 +120,19 @@ Probleme mit Disabled-Status
 | `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                           | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined`                                                   | `'normal'`  |
 
 
+## Methods
+
+### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<Stringified<StencilUnknown>>`
+
+
+
+
 ## Dependencies
 
 ### Used by

package/doc/components.md

@@ -1,6 +1,44 @@
-# Development hints
+# KoliBri - Components
 
-## Styling
+## Installation
+
+You can install the KoliBri components with `npm`, `pnpm` or `yarn`:
+
+```bash
+npm i -g @public-ui/components
+pnpm i -g @public-ui/components
+yarn add -g @public-ui/components
+```
+
+## Usage
+
+First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) of your choice:
+
+```ts
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { register } from '@public-ui/components';
+import { DEFAULT } from '@public-ui/themes';
+
+register(DEFAULT, defineCustomElements)
+	.then(() => {
+		/* KoliBri ready */
+	})
+	.catch((error) => {
+		/* Handle errors */
+	});
+```
+
+Then, you can use the components in your HTML:
+
+```html
+<kol-button _label="Hello World"></kol-button>
+```
+
+Consider using one of the [framework integrations](https://public-ui.github.io/en/docs/get-started/frameworks) for a better developer experience.
+
+## Development hints
+
+### Styling
 
 1. Do not use `!important`!
 2. Only alignment/position/layout!

package/doc/heading.md

@@ -38,11 +38,12 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 
 ## 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.). Set to `false` to enable the expert slot. | `string`                                       | `undefined` |
-| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined` | `1`         |
-| `_secondaryHeadline`  | `_secondary-headline` | Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.                                                                            | `string` \| `undefined`                          | `undefined` |
+| Property              | Attribute             | Description                                                                                                                                                  | Type                                                                    | Default     |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ----------- |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                | `undefined` |
+| `_level`              | `_level`              | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                                                            | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `undefined`                          | `1`         |
+| `_secondaryHeadline`  | `_secondary-headline` | Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten.                                                                            | `string` \| `undefined`                                                   | `undefined` |
+| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` \| `"strong"` \| `undefined` | `undefined` |
 
 
 ## Slots

package/doc/input-checkbox.md

@@ -83,6 +83,19 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 | `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `"button"` \| `"default"` \| `"switch"` \| `undefined`                                                                                                                                                                                                                                                                | `'default'` |
 
 
+## Methods
+
+### `getValue() => Promise<boolean | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<boolean | undefined>`
+
+
+
+
 ## Slots
 
 | Slot       | Description                    |

package/doc/input-color.md

@@ -24,7 +24,8 @@ Stellen Sie die Default-Farbe über das Attribut `_value` ein. Verwenden Sie hie
 
 ## Barrierefreiheit
 
-Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei ist. Die Auswahl einer Farbe ist über Tastatursteuerung möglich. Die Ausgabe der gewählten Farbe über Screenreader ist jedoch technisch eingeschränkt.
+Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei ist. Die Auswahl einer Farbe ist über Tastatursteuerung möglich. Die Ausgabe der gewählten Farbe über Screenreader ist jedoch technisch eingeschränkt.  
+Siehe auch: [https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md#input-color](Known Issues).
 
 Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
 
@@ -70,6 +71,19 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-date.md

@@ -106,6 +106,19 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `Date` \| ``${number}-${number}-${number}T${number}:${number}:${number}`` \| ``${number}-${number}-${number}T${number}:${number}`` \| ``${number}-${number}-${number}`` \| ``${number}-${number}`` \| ``${number}-W${number}`` \| ``${number}:${number}:${number}`` \| ``${number}:${number}`` \| `null` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-email.md

@@ -75,6 +75,19 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-file.md

@@ -66,6 +66,19 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<FileList | null | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<FileList | null | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-number.md

@@ -65,6 +65,19 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | ``${number}-${number}-${number}T${number}:${number}:${number}`` \| ``${number}-${number}-${number}T${number}:${number}`` \| ``${number}-${number}-${number}`` \| ``${number}-${number}`` \| ``${number}-W${number}`` \| ``${number}:${number}:${number}`` \| ``${number}:${number}`` \| `null` \| `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-password.md

@@ -65,6 +65,19 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/input-radio.md

@@ -99,6 +99,19 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `number` \| `string` \| `undefined`                                                          | `undefined`  |
 
 
+## Methods
+
+### `getValue() => Promise<W3CInputValue | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<W3CInputValue | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                               |

package/doc/input-range.md

@@ -76,6 +76,19 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `number` \| `undefined`                                                                                   | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<number | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<number | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                           |

package/doc/input-text.md

@@ -86,6 +86,19 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_value`              | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 
 
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
 ## Slots
 
 | Slot | Description                         |

package/doc/kolibri.md

@@ -7,17 +7,12 @@ Diese Komponente implementiert das Logo von KoliBri.
 ### Code
 
 ```html
-<kol-kolibri />
-<kol-kolibri _animate />
-<kol-kolibri _animate _labeled="false" />
-<kol-kolibri _labeled="false" />
+<kol-kolibri /> <kol-kolibri _labeled="false" />
 ```
 
 ## Beispiele
 
 <kol-kolibri />
-<kol-kolibri _animate />
-<kol-kolibri _animate _labeled="false" /> 
 <kol-kolibri _labeled="false" />
 
 ## Barrierefreiheit
@@ -27,11 +22,10 @@ Diese Komponente implementiert das Logo von KoliBri.
 
 ## Properties
 
-| Property   | Attribute  | Description                                                              | Type                                                                                                      | Default     |
-| ---------- | ---------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------- |
-| `_animate` | `_animate` | Gibt an, ob das Bild-Logo farblich animiert werden soll.                 | `boolean` \| `undefined`                                                                                    | `false`     |
-| `_color`   | `_color`   | Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll. | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#003c78'` |
-| `_labeled` | `_labeled` | Defines whether the component has a label.                               | `boolean` \| `undefined`                                                                                    | `undefined` |
+| Property   | Attribute  | Description                                | Type                                                                                                      | Default     |
+| ---------- | ---------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`   | `_color`   | Defines the color of the logo and label.   | `string` \| `undefined` \| `{ backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#003c78'` |
+| `_labeled` | `_labeled` | Defines whether the component has a label. | `boolean` \| `undefined`                                                                                    | `undefined` |
 
 
 ----------------------------------------------

package/doc/link-button.md

@@ -30,23 +30,23 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 
 ## Properties
 
-| Property              | Attribute              | Description                                                                                                                                                                                   | Type                                                                                                 | Default                             |
-| --------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| `_accessKey`          | `_access-key`          | Defines the elements access key.                                                                                                                                                              | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_customClass`        | `_custom-class`        | Defines the custom class attribute if _variant="custom" is set.                                                                                                                               | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_download`           | `_download`            | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                    | `boolean` \| `undefined`                                                                               | `false`                             |
-| `_href` _(required)_  | `_href`                | Defines the target URI of the link.                                                                                                                                                           | `string`                                                                                             | `undefined`                         |
-| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                               | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                               | `undefined`                         |
-| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                  | `string`                                                                                             | `undefined`                         |
-| `_listenAriaCurrent`  | `_listen-aria-current` | Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value. | `"date"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `boolean` \| `undefined`                         | `undefined`                         |
-| `_on`                 | --                     | Defines the callback functions for links.                                                                                                                                                     | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined`                         |
-| `_role`               | `_role`                | Defines the role of the components primary element.                                                                                                                                           | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined`                         |
-| `_tabIndex`           | `_tab-index`           | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                              | `number` \| `undefined`                                                                                | `undefined`                         |
-| `_target`             | `_target`              | Defines where to open the link.                                                                                                                                                               | `string` \| `undefined`                                                                                | `undefined`                         |
-| `_targetDescription`  | `_target-description`  | Defines the description to use when the link is going to be opened in another application.                                                                                                    | `string` \| `undefined`                                                                                | `translate('kol-open-link-in-tab')` |
-| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`                           |
-| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                                                        | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`                          |
+| Property              | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default                             |
+| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `_accessKey`          | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_ariaCurrentValue`   | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined`                         |
+| `_customClass`        | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_download`           | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                               | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_hideLabel`          | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean` \| `undefined`                                                                               | `false`                             |
+| `_href` _(required)_  | `_href`               | Defines the target URI of the link.                                                                                                                          | `string`                                                                                             | `undefined`                         |
+| `_icons`              | `_icons`              | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `KoliBriHorizontalIcons & KoliBriVerticalIcons` \| `string` \| `undefined`                               | `undefined`                         |
+| `_label` _(required)_ | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                             | `undefined`                         |
+| `_on`                 | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`                  | `undefined`                         |
+| `_role`               | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `undefined`                                                           | `undefined`                         |
+| `_tabIndex`           | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                | `undefined`                         |
+| `_target`             | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                                | `undefined`                         |
+| `_targetDescription`  | `_target-description` | Defines the description to use when the link is going to be opened in another application.                                                                   | `string` \| `undefined`                                                                                | `translate('kol-open-link-in-tab')` |
+| `_tooltipAlign`       | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                | `'right'`                           |
+| `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom"` \| `"danger"` \| `"ghost"` \| `"normal"` \| `"primary"` \| `"secondary"` \| `"tertiary"` \| `undefined` | `'normal'`                          |
 
 
 ## Dependencies