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

package/doc/input-range.md

@@ -5,28 +5,28 @@
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_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`     |
-| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
-| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_id`                 | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
-| `_max`                | `_max`           | Defines the largest possible input value.                                                                                                                    | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                                                                                                                                                                                                                                                                           | `100`       |
-| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                   | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                                                                                                                                                                                                                                                                           | `0`         |
-| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                 | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_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.                                                                                                                              | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                                                                                                                                                                                                                                                                           | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                        | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                       | `string \| undefined`                                                                                       | `undefined` |
+| `_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`     |
+| `_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` |
+| `_max`                | `_max`           | Defines the largest possible input value.                                                                                                                     | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                           | `100`       |
+| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                           | `0`         |
+| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`               | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                       | `undefined` |
+| `_on`                 | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
+| `_shortKey`           | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                | `string \| undefined`                                                                                       | `undefined` |
+| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                           | `undefined` |
+| `_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.                                                                                                                               | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                           | `undefined` |
 
 
 ## Methods

package/doc/input-text.md

@@ -5,35 +5,35 @@
 
 ## Properties
 
-| Property              | Attribute              | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
-| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`          | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_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`     |
-| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
-| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
-| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |
-| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_id`                 | `_id`                  | Defines the internal ID of the primary component element.                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                              | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                  | `"hard" \| "soft" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |
-| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_on`                 | `_on`                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
-| `_required`           | `_required`            | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
-| `_shortKey`           | `_short-key`           | Adds a visual short key hint to the component.                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                       | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: StencilUnknown; _ariaExpanded?: boolean \| undefined; _accessKey?: string \| undefined; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
-| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_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`     |
-| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                           | `"search" \| "tel" \| "text" \| "url" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'text'`    |
-| `_value`              | `_value`               | Defines the value of the input.                                                                                                                              | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |
+| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`          | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_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`     |
+| `_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` |
+| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `"hard" \| "soft" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |
+| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
+| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_on`                 | `_on`                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
+| `_shortKey`           | `_short-key`           | Adds a visual short key hint to the component.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
+| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: StencilUnknown; _ariaExpanded?: boolean \| undefined; _accessKey?: string \| undefined; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
+| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
+| `_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`     |
+| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                            | `"search" \| "tel" \| "text" \| "url" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'text'`    |
+| `_value`              | `_value`               | Defines the value of the input.                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 
 
 ## Methods

package/doc/popover-button.md

@@ -15,7 +15,6 @@
 | `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \| undefined`                                                                                                                                 | `false`     |
 | `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \| undefined`                                                                                                                                 | `false`     |
 | `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                 | `undefined` |
-| `_id`                 | `_id`               | Defines the internal ID of the primary component element.                                                                                                                        | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |
 | `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string \| undefined`                                                                                                                                  | `undefined` |
 | `_on`                 | `_on`               | Defines the callback functions for button events.                                                                                                                                | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` |

package/doc/select.md

@@ -5,28 +5,28 @@
 
 ## Properties
 
-| Property                | Attribute        | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
-| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`            | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
-| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_id`                   | `_id`            | Defines the internal ID of the primary component element.                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
-| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined` |
-| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                      | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                   | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_options` _(required)_ | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                  | `(Option<StencilUnknown> \| Optgroup<StencilUnknown>)[] \| string`                                                                                                                                                                                                                                                                                                                          | `undefined` |
-| `_required`             | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_rows`                 | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                         | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_shortKey`             | `_short-key`     | Adds a visual short key hint to the component.                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_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.                                                                                                                              | `StencilUnknown[] \| boolean \| null \| number \| object \| string \| undefined`                                                                                                                                                                                                                                                                                                            | `undefined` |
+| Property                | Attribute        | Description                                                                                                                                                   | Type                                                                                                        | Default     |
+| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`            | `_access-key`    | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                       | `string \| undefined`                                                                                       | `undefined` |
+| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                      | `false`     |
+| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \| undefined`                                                                                      | `false`     |
+| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \| undefined`                                                                                      | `false`     |
+| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                        | `string \| undefined`                                                                                       | `''`        |
+| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                               | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`     | `undefined` |
+| `_id`                   | `_id`            | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \| undefined`                                                                                       | `undefined` |
+| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                    | `undefined` |
+| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`               | `undefined` |
+| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                       | `boolean \| undefined`                                                                                      | `false`     |
+| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                       | `undefined` |
+| `_on`                   | `_on`            | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
+| `_options` _(required)_ | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                   | `(Option<StencilUnknown> \| Optgroup<StencilUnknown>)[] \| string`                                          | `undefined` |
+| `_required`             | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                      | `false`     |
+| `_rows`                 | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                          | `number \| undefined`                                                                                       | `undefined` |
+| `_shortKey`             | `_short-key`     | Adds a visual short key hint to the component.                                                                                                                | `string \| undefined`                                                                                       | `undefined` |
+| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)              | `number \| undefined`                                                                                       | `undefined` |
+| `_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.                                                                                                                               | `StencilUnknown[] \| boolean \| null \| number \| object \| string \| undefined`                            | `undefined` |
 
 
 ## Methods

package/doc/single-select.md

@@ -5,28 +5,28 @@
 
 ## Properties
 
-| Property                | Attribute            | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default     |
-| ----------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`            | `_access-key`        | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_disabled`             | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideClearButton`      | `_hide-clear-button` | Defines the whether the clear button should be hidden.                                                                                                       | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideLabel`            | `_hide-label`        | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hideMsg`              | `_hide-msg`          | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`     |
-| `_hint`                 | `_hint`              | Defines the hint text.                                                                                                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`        |
-| `_icons`                | `_icons`             | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                              | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                     | `undefined` |
-| `_id`                   | `_id`                | Defines the internal ID of the primary component element.                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_label` _(required)_   | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined` |
-| `_msg`                  | `_msg`               | Defines the properties for a message rendered as Alert component.                                                                                            | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined` |
-| `_name`                 | `_name`              | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_on`                   | `_on`                | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                 | `undefined` |
-| `_options` _(required)_ | `_options`           | Options the user can choose from.                                                                                                                            | `Option<StencilUnknown>[] \| string`                                                                                                                                                                                                                                                                                                                                                        | `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`     |
-| `_rows`                 | `_rows`              | Maximum number of visible rows in the options dropdown before scrolling.                                                                                     | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_shortKey`             | `_short-key`         | Adds a visual short key hint to the component.                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
-| `_tooltipAlign`         | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                       | `'top'`     |
-| `_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`                                                                                                                                                                                                                                                                                                                                | `null`      |
+| Property                | Attribute            | Description                                                                                                                                                   | Type                                                                                                        | Default     |
+| ----------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`            | `_access-key`        | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                       | `string \| undefined`                                                                                       | `undefined` |
+| `_disabled`             | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                      | `false`     |
+| `_hideClearButton`      | `_hide-clear-button` | Defines the whether the clear button should be hidden.                                                                                                        | `boolean \| undefined`                                                                                      | `false`     |
+| `_hideLabel`            | `_hide-label`        | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \| undefined`                                                                                      | `false`     |
+| `_hideMsg`              | `_hide-msg`          | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \| undefined`                                                                                      | `false`     |
+| `_hint`                 | `_hint`              | Defines the hint text.                                                                                                                                        | `string \| undefined`                                                                                       | `''`        |
+| `_icons`                | `_icons`             | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                               | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`     | `undefined` |
+| `_id`                   | `_id`                | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \| undefined`                                                                                       | `undefined` |
+| `_label` _(required)_   | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                    | `undefined` |
+| `_msg`                  | `_msg`               | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`               | `undefined` |
+| `_name`                 | `_name`              | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                       | `undefined` |
+| `_on`                   | `_on`                | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
+| `_options` _(required)_ | `_options`           | Options the user can choose from.                                                                                                                             | `Option<StencilUnknown>[] \| string`                                                                        | `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`     |
+| `_rows`                 | `_rows`              | Maximum number of visible rows in the options dropdown before scrolling.                                                                                      | `number \| undefined`                                                                                       | `undefined` |
+| `_shortKey`             | `_short-key`         | Adds a visual short key hint to the component.                                                                                                                | `string \| undefined`                                                                                       | `undefined` |
+| `_tooltipAlign`         | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                       | `'top'`     |
+| `_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`                                                | `null`      |
 
 
 ## Methods

package/doc/split-button.md

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