@public-ui/components 4.3.0-rc.1 → 4.3.0-rc.2

package/doc/input-radio.md

@@ -9,23 +9,24 @@ The **InputRadio** input type consists of a collection of radio elements, provid
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default      |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_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`                                                                                                              | `''`         |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined`  |
-| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined`  |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                              | `undefined`  |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined`  |
-| `_options`            | `_options`       | Options the user can choose from.                                                                                                                            | `RadioOption<StencilUnknown>[] \| string \| undefined`                                                                             | `undefined`  |
-| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                  | `"horizontal" \| "vertical" \| undefined`                                                                                          | `'vertical'` |
-| `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                             | `false`      |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`      |
-| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`      |
-| `_value`              | `_value`         | Defines the value of the element.                                                                                                                            | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`       |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined`  |
+| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                   | Type                                                                                                                               | Default      |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `_ariaDetails`        | `_aria-details`  | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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`                                                                                                              | `''`         |
+| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                           | `undefined`  |
+| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined`  |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                 | `string \| undefined`                                                                                                              | `undefined`  |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined`  |
+| `_options`            | `_options`       | Options the user can choose from.                                                                                                                                                                                                                                                                             | `RadioOption<StencilUnknown>[] \| string \| undefined`                                                                             | `undefined`  |
+| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                                                                                                                                                                   | `"horizontal" \| "vertical" \| undefined`                                                                                          | `'vertical'` |
+| `_required`           | `_required`      | Makes the input element required.                                                                                                                                                                                                                                                                             | `boolean \| undefined`                                                                                                             | `false`      |
+| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`      |
+| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                                                                                                                                                                     | `boolean \| undefined`                                                                                                             | `false`      |
+| `_value`              | `_value`         | Defines the value of the element.                                                                                                                                                                                                                                                                             | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`       |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                        | `string \| undefined`                                                                                                              | `undefined`  |
 
 
 ## Methods

package/doc/input-range.md

@@ -9,28 +9,29 @@ The **Range** input type creates a slider control for selecting a numeric value
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \| undefined`                                                                                                              | `undefined` |
-| `_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` |
-| `_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 maximum value of the element.                                                                                                                    | `` `${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, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined` |
-| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                              | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined` |
-| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `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 element.                                                                                                                            | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                  | `undefined` |
-| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
+| Property              | Attribute        | Description                                                                                                                                                                                                                                                                                                   | Type                                                                                                                               | Default     |
+| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                                         | `string \| undefined`                                                                                                              | `undefined` |
+| `_ariaDetails`        | `_aria-details`  | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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` |
+| `_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 maximum value of the element.                                                                                                                                                                                                                                                                     | `` `${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, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined` |
+| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                                                                                                                                                                 | `string \| undefined`                                                                                                              | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined` |
+| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                                       | `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 element.                                                                                                                                                                                                                                                                             | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                  | `undefined` |
+| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                        | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/input-text.md

@@ -12,6 +12,7 @@ The **Text** input type creates an input field for plain text, search terms, URL
 | Property              | Attribute              | Description                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |
 | --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
 | `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
+| `_ariaDetails`        | `_aria-details`        | References an external element by ID that provides accessible details for this input.                                                                        | `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`     |

package/doc/select.md

@@ -8,6 +8,7 @@
 | Property                | Attribute        | Description                                                                                                                                                  | Type                                                                                                                               | Default     |
 | ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `_accessKey`            | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \| undefined`                                                                                                              | `undefined` |
+| `_ariaDetails`          | `_aria-details`  | References an external element by ID that provides accessible details for this select.                                                                       | `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`     |

package/doc/single-select.md

@@ -9,28 +9,29 @@ The **SingleSelect** component creates a dropdown list from which exactly one pr
 
 ## Properties
 
-| Property                | Attribute           | Description                                                                                                                                                  | Type                                                                                                                               | Default     |
-| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`            | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                        | `string \| undefined`                                                                                                              | `undefined` |
-| `_disabled`             | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                       | `boolean \| undefined`                                                                                                             | `false`     |
-| `_hasClearButton`       | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                           | `boolean \| undefined`                                                                                                             | `true`      |
-| `_hideLabel`            | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                   | `boolean \| undefined`                                                                                                             | `false`     |
-| `_hideMsg`              | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                           | `boolean \| undefined`                                                                                                             | `false`     |
-| `_hint`                 | `_hint`             | Defines the hint text.                                                                                                                                       | `string \| undefined`                                                                                                              | `''`        |
-| `_icons`                | `_icons`            | Defines the icon classnames (e.g. `icons="fa-solid fa-user"`).                                                                                               | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                            | `undefined` |
-| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                           | `undefined` |
-| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                            | `Omit<AlertProps, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined` |
-| `_name`                 | `_name`             | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                              | `undefined` |
-| `_on`                   | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined` |
-| `_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 of the element.                                                                                                               | `number \| undefined`                                                                                                              | `undefined` |
-| `_shortKey`             | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                      | `string \| undefined`                                                                                                              | `undefined` |
-| `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
-| `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
-| `_value`                | `_value`            | Defines the value of the element.                                                                                                                            | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`      |
-| `_variant`              | `_variant`          | Defines which variant should be used for presentation.                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
+| Property                | Attribute           | Description                                                                                                                                                                                                                                                                                                   | Type                                                                                                                               | Default     |
+| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`            | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                                         | `string \| undefined`                                                                                                              | `undefined` |
+| `_ariaDetails`          | `_aria-details`     | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \| undefined`                                                                                                              | `undefined` |
+| `_disabled`             | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                                        | `boolean \| undefined`                                                                                                             | `false`     |
+| `_hasClearButton`       | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                                                                                                                                                                            | `boolean \| undefined`                                                                                                             | `true`      |
+| `_hideLabel`            | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                                    | `boolean \| undefined`                                                                                                             | `false`     |
+| `_hideMsg`              | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                            | `boolean \| undefined`                                                                                                             | `false`     |
+| `_hint`                 | `_hint`             | Defines the hint text.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                                                                                              | `''`        |
+| `_icons`                | `_icons`            | Defines the icon classnames (e.g. `icons="fa-solid fa-user"`).                                                                                                                                                                                                                                                | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                            | `undefined` |
+| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                                  | `string`                                                                                                                           | `undefined` |
+| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                             | `Omit<AlertProps, "_on" \| "_label" \| "_level" \| "_variant" \| "_hasCloser"> & { _description: string; } \| string \| undefined` | `undefined` |
+| `_name`                 | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                                                                                                 | `string \| undefined`                                                                                                              | `undefined` |
+| `_on`                   | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`   | `undefined` |
+| `_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 of the element.                                                                                                                                                                                                                                                                | `number \| undefined`                                                                                                              | `undefined` |
+| `_shortKey`             | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                                       | `string \| undefined`                                                                                                              | `undefined` |
+| `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                              | `'top'`     |
+| `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                                                                                                                                                                     | `boolean \| undefined`                                                                                                             | `false`     |
+| `_value`                | `_value`            | Defines the value of the element.                                                                                                                                                                                                                                                                             | `boolean \| null \| number \| object \| string \| undefined`                                                                       | `null`      |
+| `_variant`              | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                                                                                        | `string \| undefined`                                                                                                              | `undefined` |
 
 
 ## Methods

package/doc/textarea.md

@@ -13,6 +13,7 @@ The **Textarea** component provides a larger input field for content. Unlike Inp
 | --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |
 | `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                              | `string \| undefined`                                                                                                              | `undefined`  |
 | `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \| undefined`                                                                                                             | `false`      |
+| `_ariaDetails`        | `_aria-details`        | References an external element by ID that provides accessible details for this textarea.                                                                                                                                                                                                           | `string \| undefined`                                                                                                              | `undefined`  |
 | `_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`      |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "4.3.0-rc.1",
+  "version": "4.3.0-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -17,6 +17,9 @@
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
+  "bin": {
+    "kolibri-copy-assets": "./copy-assets.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -78,18 +81,15 @@
     "wcag-contrast": "3.0.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.5",
-    "@eslint/js": "9.39.4",
     "@playwright/test": "1.60.0",
     "@public-ui/stencil-angular-output-target": "0.9.0",
     "@public-ui/stencil-react-output-target": "0.6.0",
     "@public-ui/stencil-solid-output-target": "0.2.0",
     "@public-ui/stencil-vue-output-target": "0.9.0",
     "@revolist/svelte-output-target": "0.0.7",
-    "@stencil-community/eslint-plugin": "0.10.0",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/core": "4.38.3",
-    "@stencil/playwright": "0.2.3",
+    "@stencil/playwright": "0.4.3",
     "@stencil/sass": "3.2.3",
     "@types/color-convert": "2.0.4",
     "@types/jest": "29.5.14",
@@ -99,31 +99,28 @@
     "@types/pug": "2.0.10",
     "@types/twig": "1.12.17",
     "@types/wcag-contrast": "3.0.3",
-    "@typescript-eslint/eslint-plugin": "8.58.2",
-    "@typescript-eslint/parser": "8.58.2",
     "adopted-style-sheets": "1.1.9-rc.22",
     "autoprefixer": "10.5.0",
     "cross-env": "10.1.0",
-    "cssnano": "8.0.1",
+    "cssnano": "8.0.2",
     "eslint": "9.39.4",
-    "eslint-plugin-boundaries": "6.0.2",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-perfectionist": "5.9.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
-    "knip": "6.15.0",
+    "knip": "6.16.1",
     "mustache": "4.2.0",
     "postcss": "8.5.15",
     "postcss-sorting": "10.0.0",
-    "prettier": "3.8.3",
+    "prettier": "3.8.4",
     "prettier-plugin-organize-imports": "4.3.0",
     "pug": "3.0.4",
     "rimraf": "6.1.3",
     "stencil-awesome-test": "1.0.6",
-    "stylelint": "17.12.0",
+    "stylelint": "17.13.0",
     "terser": "5.48.0",
     "twig": "3.0.0",
     "typescript": "5.9.3",
+    "@public-ui/eslint-config": "4.3.0-rc.1",
     "@public-ui/stylelint-rules": "4.1.2-rc.1"
   },
   "peerDependencies": {
@@ -131,6 +128,7 @@
   },
   "files": [
     "assets",
+    "copy-assets.mjs",
     "dist",
     "doc",
     "custom-elements.json",

package/vscode-custom-data.json

@@ -450,6 +450,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this combobox."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."
@@ -745,6 +749,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_checked",
           "description": "Defines whether the checkbox is checked or not. Can be read and written."
@@ -870,6 +878,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -983,6 +995,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -1137,6 +1153,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -1294,6 +1314,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."
@@ -1403,6 +1427,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -1540,6 +1568,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -1685,6 +1717,10 @@
         "value": "The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle."
       },
       "attributes": [
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."
@@ -1787,6 +1823,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -1897,6 +1937,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input."
+        },
         {
           "name": "_auto-complete",
           "description": "Defines whether the input can be auto-completed."
@@ -2731,6 +2775,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this select."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."
@@ -2841,6 +2889,10 @@
           "name": "_access-key",
           "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."
@@ -3310,6 +3362,10 @@
           "name": "_adjust-height",
           "description": "Adjusts the height of the element to its content."
         },
+        {
+          "name": "_aria-details",
+          "description": "References an external element by ID that provides accessible details for this textarea."
+        },
         {
           "name": "_disabled",
           "description": "Makes the element not focusable and ignore all events."