@public-ui/components 3.0.5 → 3.0.6-rc.1

package/dist/types/e2e/input-msg.d.ts

@@ -1,5 +1,5 @@
-import type { MsgPropType } from '../schema';
+import type { MsgPropType, Stringified } from '../schema';
 declare const testInputMessage: <ElementType extends {
-    _msg?: MsgPropType;
+    _msg?: Stringified<MsgPropType>;
 } & HTMLElement>(componentName: string) => void;
 export { testInputMessage };

package/dist/types/functional-component-wrappers/_helpers/getRenderStates.d.ts

@@ -1,9 +1,10 @@
-import type { MsgPropType, TouchedPropType } from '../../schema';
+import type { MsgPropType, Stringified, TouchedPropType } from '../../schema';
 export declare const getRenderStates: (state: {
-    _msg?: MsgPropType;
+    _msg?: Stringified<MsgPropType>;
     _hint?: string;
     _id: string;
     _touched?: TouchedPropType;
+    _hideMsg?: boolean;
 }) => {
     hasError: boolean;
     hasHint: boolean;

package/dist/types/functional-components/FieldControl/FieldControl.d.ts

@@ -1,6 +1,6 @@
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
-import { type AlignPropType, type LabelAlignPropType, type InternMsgPropType } from '../../schema';
+import { type AlignPropType, type LabelAlignPropType, type MsgPropType, type Stringified } from '../../schema';
 export type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
     id: string;
     hint?: string;
@@ -11,7 +11,7 @@ export type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'>
     shortKey?: string;
     tooltipAlign?: AlignPropType;
     disabled?: boolean;
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
     touched?: boolean;
     required?: boolean;
     readonly?: boolean;

package/dist/types/functional-components/FormField/FormField.d.ts

@@ -1,13 +1,13 @@
 import type { JSX } from '../../stencil-public-runtime';
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
-import type { AlignPropType, InternMsgPropType, MaxLengthBehaviorPropType } from '../../schema';
+import type { AlignPropType, MsgPropType, MaxLengthBehaviorPropType, Stringified } from '../../schema';
 export type FormFieldProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
     component?: 'div' | 'fieldset';
     id: string;
     alert?: boolean;
     disabled?: boolean;
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
     tooltipAlign?: AlignPropType;
     hint?: string;
     label: string;

package/dist/types/functional-components/FormFieldMsg/FormFieldMsg.d.ts

@@ -1,10 +1,9 @@
-import type { AlertPropType, HideMsgPropType, IdPropType, InternMsgPropType } from '../../schema';
-import type { FunctionalComponent } from '../../stencil-public-runtime';
+import { type FunctionalComponent } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
+import { type AlertPropType, type IdPropType, type MsgPropType, type Stringified } from '../../schema';
 type FormFieldMsgProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
     alert?: AlertPropType;
-    msg?: InternMsgPropType;
-    hideMsg?: HideMsgPropType;
+    msg?: Stringified<MsgPropType>;
     id: IdPropType;
 };
 declare const FormFieldMsgFc: FunctionalComponent<FormFieldMsgProps>;

package/dist/types/functional-components/InputContainer/InputContainer.d.ts

@@ -1,12 +1,12 @@
 import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase, VNode } from '../../stencil-public-runtime';
-import { type InternMsgPropType } from '../../schema';
+import { type MsgPropType, type Stringified } from '../../schema';
 type InputAdornmentType = VNode | VNode[] | null;
 export type InputContainerProps = JSXBase.HTMLAttributes & {
     startAdornment?: InputAdornmentType;
     endAdornment?: InputAdornmentType;
     disabled?: boolean;
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
     touched?: boolean;
     containerProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
     startAdornmentProps?: JSXBase.HTMLAttributes<HTMLDivElement>;

package/dist/types/functional-components/inputs/Input/Input.d.ts

@@ -1,9 +1,9 @@
 import { type FunctionalComponent as FC } from '../../../stencil-public-runtime';
 import type { JSXBase, VNode } from '../../../stencil-public-runtime';
-import { type InternMsgPropType } from '../../../schema';
+import { type MsgPropType, type Stringified } from '../../../schema';
 import type { DefaultInputProps } from '../_types';
 export type InputProps = DefaultInputProps<JSXBase.InputHTMLAttributes<HTMLInputElement>> & {
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
     touched?: boolean;
     spellcheck?: boolean;
     suggestions?: VNode;

package/dist/types/functional-components/inputs/NativeSelect/NativeSelect.d.ts

@@ -2,11 +2,11 @@ import { type FunctionalComponent as FC } from '../../../stencil-public-runtime'
 import type { JSXBase } from '../../../stencil-public-runtime';
 import type { DefaultInputProps } from '../_types';
 import { type NativeOptionListProps } from '../NativeOptionList';
-import { type InternMsgPropType } from '../../../schema';
+import { type MsgPropType, type Stringified } from '../../../schema';
 type SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
 export type SelectProps = DefaultInputProps<SelectAttributes> & NativeOptionListProps & {
     touched?: boolean;
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
 };
 declare const NativeSelectFc: FC<SelectProps>;
 export default NativeSelectFc;

package/dist/types/functional-components/inputs/TextArea/TextArea.d.ts

@@ -1,11 +1,11 @@
 import { type FunctionalComponent as FC } from '../../../stencil-public-runtime';
 import type { JSXBase } from '../../../stencil-public-runtime';
 import type { DefaultInputProps } from '../_types';
-import { type InternMsgPropType } from '../../../schema';
+import { type MsgPropType, type Stringified } from '../../../schema';
 export type TextAreaProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {
     value: string;
     touched?: boolean;
-    msg?: InternMsgPropType;
+    msg?: Stringified<MsgPropType>;
 };
 declare const TextAreaFc: FC<TextAreaProps>;
 export default TextAreaFc;

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

@@ -1,5 +1,5 @@
 import { Theme } from 'adopted-style-sheets';
-export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "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" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "abbr" | "button" | "details" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "accordion-group" | "avatar" | "badge" | "breadcrumb" | "button-link" | "combobox" | "drawer" | "heading" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "logo" | "modal" | "pagination" | "popover-button" | "separator" | "single-select" | "skip-nav" | "spin" | "split-button" | "table-stateful" | "table-stateless" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
+export declare const KoliBri: Theme<"kol", "info" | "success" | "warning" | "error" | "message" | "close" | "form-description" | "of" | "characters" | "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" | "logo-description" | "open-link-in-tab" | "kolibri-logo", "symbol" | "abbr" | "button" | "details" | "form" | "link" | "nav" | "progress" | "select" | "table" | "textarea" | "image" | "icon" | "alert" | "card" | "accordion" | "avatar" | "badge" | "breadcrumb" | "button-link" | "combobox" | "drawer" | "heading" | "input-checkbox" | "input-color" | "input-date" | "input-email" | "input-file" | "input-number" | "input-password" | "input-radio" | "input-range" | "input-text" | "kolibri" | "link-button" | "logo" | "modal" | "pagination" | "popover-button" | "quote" | "single-select" | "skip-nav" | "spin" | "split-button" | "table-stateful" | "table-stateless" | "tabs" | "toast-container" | "toolbar" | "tooltip" | "tree" | "tree-item">;
 export * from './components';
 export * from './props';
 export * from './types';

package/dist/types/schema/props/msg.d.ts

@@ -1,15 +1,12 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { AlertProps, InternalAlertProps } from '../components';
+import type { AlertProps } from '../components';
 import type { Stringified } from '../types';
-export type MsgPropType = (AlertProps & {
+export type MsgPropType = Omit<AlertProps, '_label' | '_variant'> & {
     _description: string;
-}) | string;
-export type InternMsgPropType = Partial<InternalAlertProps & {
-    description: string;
-}>;
+};
 export type PropMsg = {
-    msg: MsgPropType;
+    msg: Stringified<MsgPropType>;
 };
 export declare const validateMsg: (component: Generic.Element.Component, value?: Stringified<MsgPropType>) => void;
-export declare function convertMsgToInternMsg(msg?: MsgPropType): InternMsgPropType | undefined;
-export declare function checkHasMsg(msg?: InternMsgPropType, touched?: boolean): boolean;
+export declare function checkHasMsg(msg?: Stringified<MsgPropType>, touched?: boolean): boolean;
+export declare function normalizeMsg(msg?: Stringified<MsgPropType>): MsgPropType | undefined;

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

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

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

@@ -1,4 +1,6 @@
 declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+type MixinFactory = <TBase extends abstract new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -349,6 +351,25 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```
+ * const AWrap = (Base) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = (Base) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = (Base) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

package/doc/button-link.md

@@ -15,11 +15,11 @@
 | `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `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`     |
 | `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | Defines the internal ID of the primary component element.                                                                                                                                                                                | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>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` |
 | `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | `_on`               | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
-| `_role`               | `_role`             | <span class="text-red-500">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
+| `_role`               | `_role`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
 | `_shortKey`           | `_short-key`        | Adds a visual short key hint to the component.                                                                                                                                                                                           | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'top'`     |
 | `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `"button" \| "reset" \| "submit" \| undefined`                                                                                                         | `'button'`  |

package/doc/button.md

@@ -16,11 +16,11 @@
 | `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `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`     |
 | `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | Defines the internal ID of the primary component element.                                                                                                                                                                                | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_id`                 | `_id`               | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>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` |
 | `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | `_on`               | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |
-| `_role`               | `_role`             | <span class="text-red-500">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
+| `_role`               | `_role`             | <span style="color:red">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `"tab" \| "treeitem" \| undefined`                                                                                                                     | `undefined` |
 | `_shortKey`           | `_short-key`        | Adds a visual short key hint to the component.                                                                                                                                                                                           | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                  | `'top'`     |
 | `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `"button" \| "reset" \| "submit" \| undefined`                                                                                                         | `'button'`  |

package/doc/combobox.md

@@ -5,26 +5,26 @@
 
 ## 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` |
-| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `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`     |
-| `_hideMsg`                  | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `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`                      | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined` |
-| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                       | `_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`     |
-| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string`                                                                                                                                                                                                                                                                                                                                                                 | `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` |
+| 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` |
+| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `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`     |
+| `_hideMsg`                  | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `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`            | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>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`                      | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`               | `undefined` |
+| `_name`                     | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                       | `undefined` |
+| `_on`                       | `_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`     |
+| `_shortKey`                 | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                | `string \| undefined`                                                                                       | `undefined` |
+| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| string`                                                                                 | `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

package/doc/input-checkbox.md

@@ -5,28 +5,28 @@
 
 ## 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` |
-| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                     | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `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`     |
-| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `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 \| { checked: string; indeterminate?: string \| undefined; unchecked?: string \| undefined; } \| { checked?: string \| undefined; indeterminate: string; unchecked?: string \| undefined; } \| { checked?: string \| undefined; indeterminate?: string \| undefined; unchecked: string; }`                                                                             | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                         | `boolean \| 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` |
-| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                     | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                            | `'right'`   |
-| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                 | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string \| 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.                                                                                                                              | `boolean \| null \| number \| object \| string \| undefined`                                                                                                                                                                                                                                                                                                                                | `true`      |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `"button" \| "default" \| "switch" \| undefined`                                                                                                                                                                                                                                                                                                                                            | `'default'` |
+| 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` |
+| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                      | `boolean \| undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `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`     |
+| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `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 \| { checked: string; indeterminate?: string \| undefined; unchecked?: string \| undefined; } \| { checked?: string \| undefined; indeterminate: string; unchecked?: string \| undefined; } \| { checked?: string \| undefined; indeterminate?: string \| undefined; unchecked: string; }` | `undefined` |
+| `_id`                 | `_id`            | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                          | `boolean \| 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` |
+| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                      | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |
+| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`                                                                                                                                                                                                                   | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_on`                 | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                     | `undefined` |
+| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                          | `false`     |
+| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                | `string \| 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.                                                                                                                               | `boolean \| null \| number \| object \| string \| undefined`                                                                                                                                                                                                                                                    | `true`      |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                        | `"button" \| "default" \| "switch" \| undefined`                                                                                                                                                                                                                                                                | `'default'` |
 
 
 ## Methods