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

package/dist/types/components.d.ts

@@ -223,6 +223,7 @@ export namespace Components {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -319,6 +320,7 @@ export namespace Components {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -557,6 +559,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -790,6 +793,7 @@ export namespace Components {
         "_icons"?: Stringified<InputCheckboxIconsProp>;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -901,6 +905,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -998,6 +1003,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1133,6 +1139,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1264,6 +1271,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1369,6 +1377,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1499,6 +1508,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1613,6 +1623,7 @@ export namespace Components {
         "_hint"?: string;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1715,6 +1726,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -1827,6 +1839,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -2385,6 +2398,7 @@ export namespace Components {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -2635,6 +2649,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -2747,6 +2762,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -2885,6 +2901,7 @@ export namespace Components {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -3147,6 +3164,7 @@ export namespace Components {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4023,6 +4041,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -4107,6 +4126,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4190,10 +4210,6 @@ declare namespace LocalJSX {
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
          */
         "_icons"?: IconsPropType;
-        /**
-          * Defines the internal ID of the primary component element.
-         */
-        "_id"?: string;
         /**
           * 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.
          */
@@ -4308,6 +4324,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4513,6 +4530,7 @@ declare namespace LocalJSX {
         "_icons"?: Stringified<InputCheckboxIconsProp>;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4612,6 +4630,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4697,6 +4716,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4816,6 +4836,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -4935,6 +4956,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5024,6 +5046,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5142,6 +5165,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5244,6 +5268,7 @@ declare namespace LocalJSX {
         "_hint"?: string;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5334,6 +5359,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5434,6 +5460,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -5951,6 +5978,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -6039,10 +6067,6 @@ declare namespace LocalJSX {
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
          */
         "_icons"?: IconsPropType;
-        /**
-          * Defines the internal ID of the primary component element.
-         */
-        "_id"?: string;
         /**
           * 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.
          */
@@ -6185,6 +6209,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -6285,6 +6310,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -6411,6 +6437,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: string;
         /**
@@ -6653,6 +6680,7 @@ declare namespace LocalJSX {
         "_icons"?: IconsHorizontalPropType;
         /**
           * Defines the internal ID of the primary component element.
+          * @deprecated Will be removed in the next major version.
          */
         "_id"?: IdPropType;
         /**
@@ -6755,10 +6783,6 @@ declare namespace LocalJSX {
           * Defines the elements badge text.
          */
         "_badgeText"?: BadgeTextPropType;
-        /**
-          * Defines the internal ID of the primary component element.
-         */
-        "_id"?: IdPropType;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */

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/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/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