@public-ui/components 4.0.0-alpha.8 → 4.0.0-beta.0

package/dist/types/core/component-names.d.ts

@@ -43,6 +43,7 @@ export declare let KolPopoverButtonWcTag: "kol-popover-button-wc";
 export declare let KolProgressTag: "kol-progress";
 export declare let KolQuoteTag: "kol-quote";
 export declare let KolSelectTag: "kol-select";
+export declare let KolSelectWcTag: "kol-select-wc";
 export declare let KolSingleSelectTag: "kol-single-select";
 export declare let KolSkipNavTag: "kol-skip-nav";
 export declare let KolSpinTag: "kol-spin";

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

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

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

@@ -1,4 +1,4 @@
-import type { MsgPropType, Stringified, TouchedPropType } from '../../schema';
+import { type MsgPropType, type Stringified, type TouchedPropType } from '../../schema';
 export declare const getRenderStates: (state: {
     _msg?: Stringified<MsgPropType>;
     _hint?: string;

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

@@ -2,6 +2,7 @@ import { type FunctionalComponent as FC } from '../../stencil-public-runtime';
 import type { JSXBase } from '../../stencil-public-runtime';
 import type { W3CInputValue } from '../../schema';
 export type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {
+    disabled: boolean;
     index: number;
     option: W3CInputValue;
     selected: boolean;

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

@@ -2,7 +2,7 @@ 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, MaxLengthBehaviorPropType, MsgPropType, Stringified } from '../../schema';
-export type FormFieldProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
+export type FormFieldProps = JSXBase.HTMLAttributes<HTMLElement> & {
     component?: 'div' | 'fieldset';
     id: string;
     alert?: boolean;
@@ -37,8 +37,6 @@ export type FormFieldProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
     formFieldTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;
     formFieldMsgProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
     formFieldInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
-} & {
-    [key: `data-${string}`]: unknown;
 };
 declare const KolFormFieldFc: FC<FormFieldProps>;
 export default KolFormFieldFc;

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

@@ -27,6 +27,7 @@ declare const _default: {
     'open-link-in-tab': string;
     'kolibri-logo': string;
     'table-pagination-label': string;
+    'table-sort-order': string;
     'avatar-alt': string;
     'split-button-dropdown-label-open': string;
     'split-button-dropdown-label-close': string;

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

@@ -27,6 +27,7 @@ declare const _default: {
     'open-link-in-tab': string;
     'kolibri-logo': string;
     'table-pagination-label': string;
+    'table-sort-order': string;
     'avatar-alt': string;
     'split-button-dropdown-label-open': string;
     'split-button-dropdown-label-close': string;

package/dist/types/schema/components/combobox.d.ts

@@ -3,7 +3,7 @@ import type { MsgPropType, PropAccessKey, PropDisabled, PropHideLabel, PropHideM
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified, W3CInputValue } from '../types';
 type RequiredProps = PropLabelWithExpertSlot & PropSuggestions;
 type OptionalProps = {
-    hideClearButton: boolean;
+    hasClearButton: boolean;
     msg: Stringified<MsgPropType>;
     on: InputTypeOnDefault;
     placeholder: string;
@@ -11,7 +11,7 @@ type OptionalProps = {
 } & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropShortKey & PropSyncValueBySelector & PropTouched;
 type RequiredStates = {
     hasValue: boolean;
-    hideClearButton: boolean;
+    hasClearButton: boolean;
     suggestions: W3CInputValue[];
     value: string;
 } & PropId & PropHideMsg & PropLabelWithExpertSlot;

package/dist/types/schema/components/single-select.d.ts

@@ -7,7 +7,7 @@ type OptionalProps = {
     on: InputTypeOnDefault;
     placeholder: string;
     value: StencilUnknown;
-    hideClearButton: boolean;
+    hasClearButton: boolean;
 } & PropAccessKey & PropDisabled & PropHideMsg & PropHideLabel & PropHint & PropHorizontalIcons & PropName & PropRequired & PropRows & PropSyncValueBySelector & PropShortKey & PropTouched;
 type RequiredStates = {
     options: Option<StencilUnknown>[];
@@ -15,7 +15,7 @@ type RequiredStates = {
 type OptionalStates = {
     on: InputTypeOnDefault;
     placeholder: string;
-    hideClearButton: boolean;
+    hasClearButton: boolean;
 } & PropAccessKey & PropDisabled & PropHideLabel & KoliBriHIcons & PropHint & PropId & PropName & PropRequired & PropRows & PropMsg & PropShortKey & PropTouched;
 export type SingleSelectProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type SingleSelectStates = Generic.Element.Members<RequiredStates, OptionalStates>;

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

@@ -2,7 +2,6 @@ import type { Generic } from 'adopted-style-sheets';
 import type { PropHasSettingsMenu, PropLabel, PropTableData, PropTableDataFoot, PropTableSelection, StatefulPropTableCallbacks } from '../props';
 import type { PropMinWidth } from '../props/min-width';
 import type { PropPaginationPosition } from '../props/pagination-position';
-import type { PropTableSettings } from '../props/table-settings';
 import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableSelection, Stringified } from '../types';
 import type { KoliBriPaginationProps } from './pagination';
 export type KoliBriTableSelectedHead = {
@@ -33,7 +32,7 @@ type RequiredProps = {
 type OptionalProps = {
     allowMultiSort: boolean;
     pagination: boolean | Stringified<KoliBriTablePaginationProps>;
-} & PropTableDataFoot & PropPaginationPosition & PropTableSelection & StatefulPropTableCallbacks & PropTableSettings & PropHasSettingsMenu;
+} & PropTableDataFoot & PropPaginationPosition & PropTableSelection & StatefulPropTableCallbacks & PropHasSettingsMenu;
 type RequiredStates = {
     allowMultiSort: boolean;
     data: KoliBriTableDataType[];
@@ -45,7 +44,7 @@ type RequiredStates = {
 type OptionalStates = {
     sortDirection: KoliBriSortDirection;
     selection: KoliBriTableSelection;
-} & StatefulPropTableCallbacks & PropTableSettings & PropHasSettingsMenu;
+} & StatefulPropTableCallbacks & PropHasSettingsMenu;
 export type TableStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type TableAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
 export {};

package/dist/types/schema/components/tableStateless.d.ts

@@ -3,10 +3,9 @@ import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, P
 import type { PropHasSettingsMenu } from '../props/has-settings-menu';
 import type { PropMinWidth } from '../props/min-width';
 import type { PropTableHeaderCells } from '../props/table-header-cells';
-import type { PropTableSettings } from '../props/table-settings';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
 type RequiredProps = PropLabel & PropMinWidth & PropTableData & PropTableHeaderCells;
-type OptionalProps = PropTableCallbacks & PropTableDataFoot & PropTableSelection & PropTableSettings & PropHasSettingsMenu;
+type OptionalProps = PropTableCallbacks & PropTableDataFoot & PropTableSelection & PropHasSettingsMenu;
 type RequiredStates = {
     headerCells: TableHeaderCells;
     data: KoliBriTableDataType[];
@@ -14,7 +13,7 @@ type RequiredStates = {
 type OptionalStates = {
     dataFoot: KoliBriTableDataType[];
     selection: KoliBriTableSelection;
-} & PropTableCallbacks & PropTableSettings & PropHasSettingsMenu;
+} & PropHasSettingsMenu & PropTableCallbacks;
 export type TableStatelessProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TableStatelessStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type TableStatelessAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;

package/dist/types/schema/enums/callback.d.ts

@@ -1,6 +1,7 @@
 export declare enum Callback {
     onBlur = "onBlur",
     onChange = "onChange",
+    onChangeHeaderCells = "onChangeHeaderCells",
     onChangePage = "onChangePage",
     onClick = "onClick",
     onClose = "onClose",

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

@@ -8,5 +8,7 @@ export type PropMsg = {
     msg: Stringified<MsgPropType>;
 };
 export declare const validateMsg: (component: Generic.Element.Component, value?: Stringified<MsgPropType>) => void;
-export declare function checkHasMsg(msg?: Stringified<MsgPropType>, touched?: boolean): boolean;
+export declare function isMsgDefinedAndInputTouched(msg?: Stringified<MsgPropType>, touched?: boolean): boolean;
+export declare const checkHasMsg: typeof isMsgDefinedAndInputTouched;
 export declare function normalizeMsg(msg?: Stringified<MsgPropType>): MsgPropType | undefined;
+export declare function getMsgType(msg?: Stringified<MsgPropType>): MsgPropType['_type'] | 'error';

package/dist/types/schema/props/table-callbacks.d.ts

@@ -2,15 +2,18 @@ import type { Callback } from '../enums';
 import type { EventValueOrEventCallback } from '../types/callbacks';
 import type { Generic } from 'adopted-style-sheets';
 import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableSelectionKeys } from '../types';
+import type { TableHeaderCells } from './table-header-cells';
 export type SortEventPayload = {
     key: string;
     currentSortDirection: KoliBriSortDirection;
 };
 export type SelectionChangeEventPayload = KoliBriTableSelectionKeys;
 export type StatefulSelectionChangeEventPayload = KoliBriTableDataType[] | null;
+export type ChangeHeaderCellsEventPayload = TableHeaderCells;
 export type TableCallbacksPropType = {
     [Callback.onSort]?: EventValueOrEventCallback<MouseEvent, SortEventPayload>;
     [Callback.onSelectionChange]?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>;
+    [Callback.onChangeHeaderCells]?: EventValueOrEventCallback<Event, ChangeHeaderCellsEventPayload>;
 };
 export type TableStatefulCallbacksPropType = {
     [Callback.onSelectionChange]?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload>;

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

@@ -1 +1 @@
-export*from"./aria";export*from"./button-link-text";export*from"./callbacks";export*from"./common";export*from"./icons";export*from"./input/iso8601";export*from"./input/numberString";export*from"./input/types";export*from"./modal";export*from"./table";export*from"./table-settings";export*from"./unknown";export*from"./w3c";
+export*from"./aria";export*from"./button-link-text";export*from"./callbacks";export*from"./common";export*from"./icons";export*from"./input/iso8601";export*from"./input/numberString";export*from"./input/types";export*from"./modal";export*from"./table";export*from"./unknown";export*from"./w3c";

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

@@ -18,7 +18,9 @@ export type KoliBriTableHeaderCell = KoliBriTableCell & {
     sortDirection?: KoliBriSortDirection;
     hidable?: boolean;
     sortable?: boolean;
+    sortOrder?: number;
     resizable?: boolean;
+    visible?: boolean;
 };
 export type KoliBriTableSelection = {
     label: (row: KoliBriTableDataType) => string;

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

@@ -1,6 +1,7 @@
 declare enum KolEvent {
     blur = "kolBlur",
     change = "kolChange",
+    changeHeaderCells = "changeHeaderCells",
     changePage = "kolChangePage",
     changePageSize = "kolChangePageSize",
     click = "kolClick",
@@ -13,7 +14,6 @@ declare enum KolEvent {
     reset = "kolReset",
     select = "kolSelect",
     selectionChange = "kolSelectionChange",
-    settingsChange = "settingsChange",
     sort = "kolSort",
     submit = "kolSubmit",
     toggle = "kolToggle"

package/doc/button-link.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
 | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                                                                                 | `undefined` |
@@ -24,7 +24,7 @@
 | `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `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'`  |
-| `_value`              | `_value`            | Defines the value that the button emits on click.                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 
 
 ## Methods

package/doc/button.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |
 | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
+| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \| undefined`                                                                                                                                 | `undefined` |
@@ -25,7 +25,7 @@
 | `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `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'`  |
-| `_value`              | `_value`            | Defines the value that the button emits on click.                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
+| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \| null \| number \| object \| string \| undefined`                                                                                           | `undefined` |
 | `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined`                                                   | `'normal'`  |
 
 

package/doc/combobox.md

@@ -5,27 +5,27 @@
 
 ## Properties
 
-| Property                    | Attribute            | Description                                                                                                                                                   | Type                                                                                                                               | Default     |
-| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`                | `_access-key`        | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                              | `undefined` |
-| `_disabled`                 | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                                             | `false`     |
-| `_hideClearButton`          | `_hide-clear-button` | Hides the clear button.                                                                                                                                       | `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, "_on" \| "_hasCloser" \| "_label" \| "_level" \| "_variant"> & { _description: string; } \| string \| undefined` | `undefined` |
-| `_name`                     | `_name`              | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                              | `undefined` |
-| `_on`                       | --                   | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| 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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `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 the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \| undefined`                                                                                                              | `undefined` |
+| `_disabled`                 | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                                             | `false`     |
+| `_hasClearButton`           | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                            | `boolean \| undefined`                                                                                                             | `true`      |
+| `_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, "_on" \| "_hasCloser" \| "_label" \| "_level" \| "_variant"> & { _description: string; } \| string \| undefined` | `undefined` |
+| `_name`                     | `_name`             | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                              | `undefined` |
+| `_on`                       | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| 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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `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 element.                                                                                                                             | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-checkbox.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                            | Default     |
 | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
+| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `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`     |
@@ -25,7 +25,7 @@
 | `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `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`      |
+| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `boolean \| null \| number \| object \| string \| undefined`                                                                                                                                                                                                                                                    | `true`      |
 | `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                        | `"button" \| "default" \| "switch" \| undefined`                                                                                                                                                                                                                                                                | `'default'` |
 
 

package/doc/input-color.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
 | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |
 | `_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`     |
@@ -24,7 +24,7 @@
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| 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.                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 
 
 ## Methods

package/doc/input-date.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
 | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |
 | `_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`     |
@@ -16,7 +16,7 @@
 | `_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` |
-| `_max`                | `_max`           | Defines the largest possible input value.                                                                                                                     | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
+| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 | `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 | `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_on" \| "_hasCloser" \| "_label" \| "_level" \| "_variant"> & { _description: string; } \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
@@ -30,7 +30,7 @@
 | `_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`     |
 | `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                            | `"date" \| "datetime-local" \| "month" \| "time" \| "week"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `'date'`    |
-| `_value`              | `_value`         | Defines the value of the input.                                                                                                                               | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |
 
 
 ## Methods

package/doc/input-email.md

@@ -7,7 +7,7 @@
 
 | Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
 | --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |
 | `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
@@ -32,7 +32,7 @@
 | `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| 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.                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 
 
 ## Methods

package/doc/input-file.md

@@ -8,7 +8,7 @@
 | Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
 | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `_accept`             | `_accept`        | Defines which file formats are accepted.                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `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`     |