@public-ui/components 2.0.15 → 2.1.1

package/dist/types/schema/tag-names.d.ts

@@ -0,0 +1,55 @@
+export declare enum TagEnum {
+    'abbr' = 0,
+    'accordion' = 1,
+    'accordion-group' = 2,
+    'alert' = 3,
+    'avatar' = 4,
+    'badge' = 5,
+    'breadcrumb' = 6,
+    'button' = 7,
+    'button-group' = 8,
+    'button-link' = 9,
+    'card' = 10,
+    'combobox' = 11,
+    'details' = 12,
+    'form' = 13,
+    'heading' = 14,
+    'icon' = 15,
+    'image' = 16,
+    'indented-text' = 17,
+    'input-checkbox' = 18,
+    'input-color' = 19,
+    'input-date' = 20,
+    'input-email' = 21,
+    'input-file' = 22,
+    'input-number' = 23,
+    'input-password' = 24,
+    'input-radio' = 25,
+    'input-range' = 26,
+    'input-text' = 27,
+    'kolibri' = 28,
+    'link' = 29,
+    'link-button' = 30,
+    'link-group' = 31,
+    'logo' = 32,
+    'modal' = 33,
+    'nav' = 34,
+    'pagination' = 35,
+    'progress' = 36,
+    'select' = 37,
+    'separator' = 38,
+    'skip-nav' = 39,
+    'spin' = 40,
+    'split-button' = 41,
+    'symbol' = 42,
+    'table' = 43,
+    'table-stateless' = 44,
+    'table-stateful' = 45,
+    'tabs' = 46,
+    'textarea' = 47,
+    'toast-container' = 48,
+    'toolbar' = 49,
+    'tooltip' = 50,
+    'tree' = 51,
+    'tree-item' = 52
+}

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

@@ -0,0 +1,23 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { PropButtonCallbacks, PropHideLabel, PropHref, PropIcons, PropLabel, PropLinkTarget } from '../props';
+import type { StencilUnknown } from './unknown';
+type RequiredButtonProps = PropLabel & PropButtonCallbacks<StencilUnknown>;
+type RequiredLinkProps = PropHref;
+type RequiredTextProps = PropLabel;
+type OptionalButtonOrLinkOrTextProps = PropHideLabel & {
+    active: boolean;
+} & PropIcons & PropLinkTarget;
+type OptionalButtonProps = OptionalButtonOrLinkOrTextProps & {
+    disabled: boolean;
+};
+type OptionalButtonOrLinkOrTextWithChildrenProps = OptionalButtonOrLinkOrTextProps & {
+    children: ButtonOrLinkOrTextWithChildrenProps[];
+} & PropLabel;
+type OptionalButtonWithChildrenProps = OptionalButtonProps & {
+    children: ButtonOrLinkOrTextWithChildrenProps[];
+};
+export type ButtonWithChildrenProps = Generic.Element.Members<RequiredButtonProps, OptionalButtonWithChildrenProps>;
+export type LinkWithChildrenProps = Generic.Element.Members<RequiredLinkProps, OptionalButtonOrLinkOrTextWithChildrenProps>;
+type TextWithChildrenProps = Generic.Element.Members<RequiredTextProps, OptionalButtonOrLinkOrTextWithChildrenProps>;
+export type ButtonOrLinkOrTextWithChildrenProps = ButtonWithChildrenProps | LinkWithChildrenProps | TextWithChildrenProps;
+export {};

package/dist/types/schema/types/callbacks.d.ts

@@ -0,0 +1,5 @@
+type Callback<T> = (event: T) => void;
+export type EventCallback<E extends Event> = Callback<E>;
+type EventValueCallback<E extends Event, V> = (event: E, value: V) => void;
+export type EventValueOrEventCallback<E extends Event, V> = EventValueCallback<E, V> | EventCallback<E>;
+export {};

package/dist/types/schema/types/common.d.ts

@@ -0,0 +1 @@
+export type Stringified<T> = string | T;

package/dist/types/schema/types/icons.d.ts

@@ -0,0 +1,19 @@
+export type AnyIconFontClass = string;
+export type KoliBriCustomIcon = {
+    icon: AnyIconFontClass;
+    label?: string;
+    style?: Record<string, string>;
+};
+type IconOrIconClass = AnyIconFontClass | KoliBriCustomIcon;
+export type KoliBriHorizontalIcons = {
+    right?: IconOrIconClass;
+    left?: IconOrIconClass;
+};
+type KoliBriVerticalIcons = {
+    top?: IconOrIconClass;
+    bottom?: IconOrIconClass;
+};
+export type KoliBriAllIcons = KoliBriHorizontalIcons & KoliBriVerticalIcons;
+export type KoliBriIconsProp = AnyIconFontClass | KoliBriAllIcons;
+export type KoliBriIconsState = KoliBriAllIcons;
+export {};

package/dist/types/schema/types/index.d.ts

@@ -0,0 +1 @@
+export*from"./button-link-text";export*from"./callbacks";export*from"./common";export*from"./icons";export*from"./input/control/number";export*from"./input/control/text";export*from"./input/iso8601";export*from"./input/types";export*from"./modal";export*from"./orientation";export*from"./progress";export*from"./unknown";export*from"./w3c";export*from"./table";

package/dist/types/schema/types/input/control/number.d.ts

@@ -0,0 +1,27 @@
+import type { Stringified } from '../../common';
+import type { KoliBriHorizontalIcons } from '../../icons';
+import type { ButtonProps } from '../../../components';
+import type { InputTypeOnDefault, InputTypeOnOff } from '../types';
+export declare const inputDateTypeOptions: readonly ["date", "datetime-local", "month", "time", "week"];
+export type InputDateType = (typeof inputDateTypeOptions)[number];
+export type OptionalInputProps<T> = {
+    accessKey: string;
+    alert: boolean;
+    autoComplete: InputTypeOnOff;
+    disabled: boolean;
+    error: string;
+    hideLabel: boolean;
+    hint: string;
+    icons: Stringified<KoliBriHorizontalIcons>;
+    max: T;
+    min: T;
+    name: string;
+    on: InputTypeOnDefault;
+    readOnly: boolean;
+    required: boolean;
+    smartButton: Stringified<ButtonProps>;
+    step: number;
+    tabIndex: number;
+    touched: boolean;
+    value: T | null;
+};

package/dist/types/schema/types/input/control/text.d.ts

@@ -0,0 +1,2 @@
+export declare const inputTextTypeOptions: readonly ["text", "search", "url", "tel"];
+export type InputTextType = (typeof inputTextTypeOptions)[number];

package/dist/types/schema/types/input/iso8601.d.ts

@@ -0,0 +1,14 @@
+type Hour = `${number}`;
+type Minute = `${number}`;
+type Second = `${number}`;
+type Year = `${number}`;
+type Month = `${number}`;
+type Day = `${number}`;
+type CalendarWeek = `${number}`;
+type IsoDate = `${Year}-${Month}-${Day}`;
+type IsoTime = `${Hour}:${Minute}` | `${Hour}:${Minute}:${Second}`;
+type IsoLocalDateTime = `${IsoDate}T${IsoTime}`;
+type IsoMonth = `${Year}-${Month}`;
+type IsoWeek = `${Year}-W${CalendarWeek}`;
+export type Iso8601 = IsoDate | IsoTime | IsoLocalDateTime | IsoMonth | IsoWeek;
+export {};

package/dist/types/schema/types/input/types.d.ts

@@ -0,0 +1,32 @@
+import type { EventCallback, EventValueOrEventCallback } from '../callbacks';
+import type { Events } from '../../enums';
+export declare const inputTypeOnOffOptions: readonly ["on", "off"];
+export type InputTypeOnOff = (typeof inputTypeOnOffOptions)[number];
+type InputTypeOnBlur = {
+    [Events.onBlur]?: EventCallback<Event>;
+};
+type InputTypeOnClick = {
+    [Events.onClick]?: EventCallback<Event>;
+};
+type InputTypeOnChange = {
+    [Events.onChange]?: EventValueOrEventCallback<Event, unknown>;
+};
+type InputTypeOnFocus = {
+    [Events.onFocus]?: EventCallback<Event>;
+};
+type InputTypeOnInput = {
+    [Events.onInput]?: EventValueOrEventCallback<Event, unknown>;
+};
+export type Option<T> = {
+    disabled?: boolean;
+    label: string | number;
+    value: T;
+};
+export type Optgroup<T> = {
+    disabled?: boolean;
+    label: string;
+    options: Option<T>[];
+};
+export type SelectOption<T> = Option<T> | Optgroup<T>;
+export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput;
+export {};

package/dist/types/schema/types/modal.d.ts

@@ -0,0 +1,3 @@
+export type KoliBriModalEventCallbacks = {
+    onClose?: () => void;
+};

package/dist/types/schema/types/orientation.d.ts

@@ -0,0 +1,2 @@
+export declare const orientationOptions: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof orientationOptions)[number];

package/dist/types/schema/types/progress.d.ts

@@ -0,0 +1,5 @@
+export declare enum KoliBriProgressVariantEnum {
+    'bar' = "bar",
+    'cycle' = "cycle"
+}
+export type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;

package/dist/types/schema/types/table.d.ts

@@ -0,0 +1,23 @@
+export type KoliBriTableRender = <T>(domNode: HTMLElement, cell: KoliBriTableCell, tupel: T, data: T[]) => string | void;
+export type KoliBriTableCellTextAlign = 'center' | 'left' | 'right' | 'justify';
+export type KoliBriSortDirection = 'ASC' | 'DESC' | 'NOS';
+export type KoliBriTableDataType = Record<string, unknown>;
+export type KoliBriTableCell = {
+    asTd?: boolean;
+    colSpan?: number;
+    label: string;
+    render?: KoliBriTableRender;
+    rowSpan?: number;
+    textAlign?: KoliBriTableCellTextAlign;
+    width?: string;
+    data?: KoliBriTableDataType;
+};
+export type KoliBriTableHeaderCell = KoliBriTableCell & {
+    key?: string;
+    sortDirection?: KoliBriSortDirection;
+};
+export type KoliBriTableSelection = {
+    label: (row: KoliBriTableDataType) => string;
+    keyPropertyName?: string;
+    selectedKeys?: string[];
+};

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

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

package/dist/types/schema/types/w3c.d.ts

@@ -0,0 +1 @@
+export type W3CInputValue = string | number;

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

@@ -0,0 +1,14 @@
+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/schema/utils/contrast/color-rgba.d.ts

@@ -0,0 +1 @@
+import rgba from"color-rgba";export{rgba as colorRgba};

package/dist/types/schema/utils/contrast/contrast.d.ts

@@ -0,0 +1,13 @@
+import type { RGB } from 'color-convert/conversions';
+export declare const getContrastYIQ: (r: number, g: number, b: number) => number;
+type ColorPair<T> = {
+    background: T;
+    foreground: T;
+};
+export type ColorContrast<T> = ColorPair<T> & {
+    contrast: number;
+};
+export declare const calcColorContrast: (baseColor: RGB, contrastColor: RGB, ratio: number, dir?: number) => ColorContrast<RGB>;
+export declare const getColorContrast: (baseColor: RGB, contrastColor: RGB, ratio: number, dir?: number) => ColorContrast<RGB>;
+export declare const createContrastColorPair: (color: string | ColorPair<string>, contrastRatio?: number) => ColorContrast<string>;
+export {};

package/dist/types/schema/utils/contrast/index.d.ts

@@ -0,0 +1 @@
+export*from"./color-rgba";export*from"./contrast";export*from"./rgba-convert";

package/dist/types/schema/utils/contrast/rgba-convert.d.ts

@@ -0,0 +1 @@
+import rgba from"rgba-convert";export{rgba as rgbaConvert};

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

@@ -0,0 +1,29 @@
+type GetModeFn = () => boolean;
+export declare const getWindow: () => Window;
+export declare const setWindow: (value: Window) => void;
+export declare const getDocument: () => Document;
+export declare const setDocument: (value: Document) => void;
+export declare const getDevMode: () => boolean;
+export declare const setDevMode: (value: boolean) => void;
+export declare const getExperimentalMode: () => boolean;
+export declare const setExperimentalMode: (value: boolean) => void;
+export declare const getColorContrastAnalysis: () => boolean;
+export declare const setColorContrastAnalysis: (value: boolean) => void;
+type LogShieldOptions = {
+    classifier?: string;
+    forceLog?: boolean;
+    overwriteStyle?: string;
+};
+export declare class Logger {
+    private readonly label;
+    private readonly devMode;
+    constructor(label: string, devMode: GetModeFn);
+    debug(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    info(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    trace(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    warn(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    error(msg: unknown | unknown[], options?: LogShieldOptions): void;
+    throw(msg: unknown | unknown[], options?: LogShieldOptions): void;
+}
+export declare const Log: Logger;
+export {};

package/dist/types/schema/utils/index.d.ts

@@ -0,0 +1 @@
+export*from"./a11y.tipps";export*from"./contrast";export*from"./dev.utils";export*from"./prop.validators";export*from"./reuse";

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

@@ -0,0 +1,63 @@
+import type { Generic } from 'adopted-style-sheets';
+import type { Stringified } from '../types/common';
+import type { 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;
+export type SetStateHooks = {
+    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;
+};
+export type WatchBooleanOptions = WatchOptions & {
+    defaultValue?: boolean | null;
+};
+export type WatchStringOptions = WatchOptions & {
+    defaultValue?: string | null;
+    maxLength?: number;
+    minLength?: number;
+};
+export type WatchNumberOptions = WatchOptions & {
+    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;
+export declare const watchString: (component: Generic.Element.Component, propName: string, value?: string, options?: WatchStringOptions) => void;
+export declare const watchNumber: (component: Generic.Element.Component, propName: string, value?: number, options?: WatchNumberOptions) => void;
+export declare const watchJsonArrayString: <T>(component: Generic.Element.Component, propName: string, itemValidation: (item: T) => boolean, value?: Stringified<T[]>, arrayValidation?: (items: T[]) => boolean, options?: WatchOptions) => void;
+export declare const mapString2Unknown: (value: StencilUnknown) => StencilUnknown;
+export declare const stringifyJson: (value: unknown) => string;
+export declare const parseJson: <T>(value: unknown) => T;
+export declare const mapBoolean2String: (value?: boolean) => string | undefined;
+export declare const mapStringOrBoolean2String: (value?: string | boolean) => string | undefined;
+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;
+}
+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;
+}
+export declare class KoliBriDevHelper {
+    static readonly patchTheme: (name: string, map: Generic.Theming.Map<string, string>, options?: Generic.Theming.PatchOptions | undefined, registerOptions?: import("adopted-style-sheets").RegisterOptions | 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?: Document | HTMLElement | ShadowRoot | undefined) => T | null;
+    static readonly querySelectorAll: <T extends Element>(selector: string, node?: Document | HTMLElement | ShadowRoot | undefined) => T[];
+    static readonly stringifyJson: (value: unknown) => string;
+}
+export {};

package/dist/types/schema/utils/reuse.d.ts

@@ -0,0 +1,7 @@
+export declare const propagateFocus: <H extends HTMLElement, R extends HTMLElement>(host?: H, ref?: R) => void;
+declare const PROCESS_ENVS: readonly ["development", "production", "test"];
+type ProcessEnv = (typeof PROCESS_ENVS)[number];
+export declare let processEnv: ProcessEnv;
+export declare const handleSlotContent: (hostRef: HTMLElement, slotRef: HTMLElement, slotName: string) => void;
+export declare const showExpertSlot: (label: unknown) => boolean;
+export {};

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

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

package/dist/types/schema/validators/common.d.ts

@@ -0,0 +1,4 @@
+export declare const isObject: (value: unknown) => boolean;
+export declare const isString: (value: unknown, minLength?: number) => boolean;
+export declare const isStyle: (style?: Record<string, string>) => boolean;
+export declare const STATE_CHANGE_EVENT: Event;

package/dist/types/schema/validators/index.d.ts

@@ -0,0 +1 @@
+export*from"./alignment";export*from"./common";export*from"./options";export*from"./tab-index";

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

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

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

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

package/dist/types/utils/align-floating-elements.d.ts

@@ -1,4 +1,4 @@
-import type { AlignPropType } from '@public-ui/schema';
+import type { AlignPropType } from '../schema';
 type Arguments = {
     floatingElement: HTMLElement;
     referenceElement: Element;

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

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

package/doc/button-link.md

@@ -18,6 +18,29 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 <kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onClick: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event       | Auslöser                                                       | Value                |
+| ----------- | -------------------------------------------------------------- | -------------------- |
+| onFocus     | Element wird fokussiert                                        | -                    |
+| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
+| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
+| onBlur      | Element verliert Fokus                                         | -                    |
+
 ### Beispiel
 
 <div class="flex gap-2">

package/doc/button.md

@@ -14,6 +14,29 @@
 <kol-button _label="Ghost" _variant="ghost"></kol-button>
 ```
 
+### Events
+
+Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
+
+```js
+kolibriElement._on = {
+	onFocus: (event) => {
+		/* Do something on focus */
+	},
+	onClick: (event, value) => {
+		/* Do something with value or event */
+	},
+	// ...
+};
+```
+
+| Event       | Auslöser                                                       | Value                |
+| ----------- | -------------------------------------------------------------- | -------------------- |
+| onFocus     | Element wird fokussiert                                        | -                    |
+| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | -                    |
+| onClick     | Element wird angeklickt (entspricht nativem `click`-Event)     | Definierter `_value` |
+| onBlur      | Element verliert Fokus                                         | -                    |
+
 ### Beispiel
 
 Default

package/doc/combobox.md

@@ -0,0 +1,100 @@
+# Combobox `preview`
+
+<kol-alert _type="warning">
+  Komponente ist ein Entwurf - Vorläufig nicht in Produktion verwenden.
+</kol-alert>
+
+Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert.
+
+## Konstruktion
+
+### Code
+
+```html
+<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+```
+
+### Beispiel
+
+<kol-combobox  _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
+
+## Verwendung
+
+Die Auswahlmöglichkeiten werden über das Attribut **`_suggestions`** als JSON-Array an die Komponente übergeben.
+
+Beispiel für die Konstruktion des JSON-Array:
+
+```json
+["Herr", "Frau", "Firma"]
+```
+
+<!--### Best practices-->
+
+<!-- ## Barrierefreiheit -->
+
+### Tastatursteuerung
+
+| Taste                          | Funktion                                                                                                                                                                                            |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`                          | Fokussiert das Auswahlfeld.                                                                                                                                                                         |
+| `Enter`                        | Wenn die Listbox geöffnet ist und eine Option fokussiert ist, wählt diese Funktion die fokussierte Option aus und schließt die Listbox. Wenn keine Optionfokussiert ist, öffnet es nur die Listbox. |
+| `Pfeil nach unten (ArrowDown)` | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach unten, wenn die Listbox geöffnet ist.                                                              |
+| `Pfeil nach oben (ArrowUp)`    | Öffnet die Listbox, wenn sie geschlossen ist, und bewegt den visuellen Fokus um eine Option nach oben, wenn die Listbox geöffnet ist.                                                               |
+| `Escape (Esc)`                 | Schlißt die Listbox und entfernt den visuellen Fokus von der Combobox, ohne eine Auswahl zu treffen.                                                                                                |
+| `Home`                         | Bewegt den visuellen Fokus auf die erste Option in der Listbox.                                                                                                                                     |
+| `End`                          | Bewegt den visuellen Fokus auf die letzte Option in der Listbox.                                                                                                                                    |
+| `Seite mach oben(PageUp)`      | Springt zehn Optionen nach oben in der Listbox und fokussiert die entsprechende Option.                                                                                                             |
+| `Seite mach unten(PageDown)`   | Springt zehn Optionen nach unten in der Listbox und fokussiert die entsprechende Option.                                                                                                            |
+| `Druckbare Zeichen`            | Fokussiert die erste Option, die mit dem gedrückten Zeichen beginnt.                                                                                                                                |
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                    | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`                | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_alert`                    | `_alert`         | Defines whether the screen-readers should read out the notification.                                                                                         | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `true`      |
+| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_hideError`                | `_hide-error`    | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_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`     |
+| `_hint`                     | `_hint`          | Defines the hint text.                                                                                                                                       | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `''`        |
+| `_icons`                    | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`                                                                                                                                                                                                                                                                           | `undefined` |
+| `_id`                       | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_label` _(required)_       | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
+| `_msg`                      | --               | Defines the properties for a message rendered as Alert component.                                                                                            | `undefined` \| `{} & { _level?: 0` \| `2` \| `1` \| `4` \| `3` \| `5` \| `6` \| `undefined; _on?: KoliBriAlertEventCallbacks` \| `undefined; _type?: "default"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `undefined; _variant?: "card"` \| `"msg"` \| `undefined; _label?: string` \| `undefined; _alert?: boolean` \| `undefined; _hasCloser?: boolean` \| `undefined; } & { _description: string; }` | `undefined` |
+| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_on`                       | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput` \| `undefined`                                                                                                                                                                                                                                                                       | `undefined` |
+| `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_required`                 | `_required`      | Makes the input element required.                                                                                                                            | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_suggestions` _(required)_ | --               | Suggestions the user can choose from.                                                                                                                        | `string[]`                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |
+| `_tabIndex`                 | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_tooltipAlign`             | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                                                                                                                                             | `'top'`     |
+| `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean` \| `undefined`                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_value`                    | `_value`         | Defines the value of the input.                                                                                                                              | `string` \| `undefined`                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+
+
+## Methods
+
+### `getValue() => Promise<string | undefined>`
+
+
+
+#### Returns
+
+Type: `Promise<string | undefined>`
+
+
+
+
+## Slots
+
+| Slot | Description                         |
+| ---- | ----------------------------------- |
+|      | Die Beschriftung des Eingabefeldes. |
+
+
+----------------------------------------------
+
+