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

package/dist/types/components.d.ts

@@ -133,6 +133,11 @@ export namespace Components {
         "_variant"?: AlertVariantPropType;
     }
     interface KolAvatar {
+        /**
+          * Defines the backgroundColor and foregroundColor.
+          * @default '#d3d3d3'
+         */
+        "_color"?: Stringified<PropColor>;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -143,6 +148,11 @@ export namespace Components {
         "_src"?: string;
     }
     interface KolAvatarWc {
+        /**
+          * Defines the backgroundColor and foregroundColor.
+          * @default '#d3d3d3'
+         */
+        "_color"?: Stringified<PropColor>;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -540,6 +550,11 @@ export namespace Components {
           * @default false
          */
         "_disabled"?: boolean;
+        /**
+          * Hides the clear button.
+          * @default false
+         */
+        "_hideClearButton"?: boolean;
         /**
           * 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.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
@@ -2500,6 +2515,14 @@ export namespace Components {
           * Hides the popover programmatically by forwarding the call to the web component.
          */
         "hidePopover": () => Promise<void>;
+        /**
+          * Sets focus on the internal element.
+         */
+        "kolFocus": () => Promise<void>;
+        /**
+          * Shows the popover programmatically by forwarding the call to the web component.
+         */
+        "showPopover": () => Promise<void>;
     }
     interface KolPopoverButtonWc {
         /**
@@ -2597,6 +2620,14 @@ export namespace Components {
           * Hides the popover programmatically by calling the native hidePopover method.
          */
         "hidePopover": () => Promise<void>;
+        /**
+          * Sets focus on the internal element.
+         */
+        "kolFocus": () => Promise<void>;
+        /**
+          * Show the popover programmatically by calling the native showPopover method.
+         */
+        "showPopover": () => Promise<void>;
     }
     interface KolPopoverWc {
         /**
@@ -2768,7 +2799,7 @@ export namespace Components {
     }
     interface KolSingleSelect {
         /**
-          * Defines the key combination that can be used to trigger or focus the component’s interactive element.
+          * Defines the key combination that can be used to trigger or focus the component's interactive element.
          */
         "_accessKey"?: string;
         /**
@@ -2883,6 +2914,7 @@ export namespace Components {
           * Defines the list of links combined with their labels to render.
          */
         "_links": Stringified<LinkProps[]>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolSpin {
         /**
@@ -3675,21 +3707,29 @@ declare global {
         prototype: HTMLKolPaginationWcElement;
         new (): HTMLKolPaginationWcElement;
     };
-    interface HTMLKolPopoverButtonElement extends Omit<Components.KolPopoverButton, "hidePopover">, HTMLStencilElement {
+    interface HTMLKolPopoverButtonElement extends Omit<Components.KolPopoverButton, "hidePopover" | "showPopover">, HTMLStencilElement {
         /**
           * Hides the popover programmatically by forwarding the call to the web component.
          */
         "hidePopover": () => Promise<void>;
+        /**
+          * Shows the popover programmatically by forwarding the call to the web component.
+         */
+        "showPopover": () => Promise<void>;
     }
     var HTMLKolPopoverButtonElement: {
         prototype: HTMLKolPopoverButtonElement;
         new (): HTMLKolPopoverButtonElement;
     };
-    interface HTMLKolPopoverButtonWcElement extends Omit<Components.KolPopoverButtonWc, "hidePopover">, HTMLStencilElement {
+    interface HTMLKolPopoverButtonWcElement extends Omit<Components.KolPopoverButtonWc, "hidePopover" | "showPopover">, HTMLStencilElement {
         /**
           * Hides the popover programmatically by calling the native hidePopover method.
          */
         "hidePopover": () => Promise<void>;
+        /**
+          * Show the popover programmatically by calling the native showPopover method.
+         */
+        "showPopover": () => Promise<void>;
     }
     var HTMLKolPopoverButtonWcElement: {
         prototype: HTMLKolPopoverButtonWcElement;
@@ -4005,6 +4045,11 @@ declare namespace LocalJSX {
         "_variant"?: AlertVariantPropType;
     }
     interface KolAvatar {
+        /**
+          * Defines the backgroundColor and foregroundColor.
+          * @default '#d3d3d3'
+         */
+        "_color"?: Stringified<PropColor>;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -4015,6 +4060,11 @@ declare namespace LocalJSX {
         "_src"?: string;
     }
     interface KolAvatarWc {
+        /**
+          * Defines the backgroundColor and foregroundColor.
+          * @default '#d3d3d3'
+         */
+        "_color"?: Stringified<PropColor>;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -4355,6 +4405,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "_disabled"?: boolean;
+        /**
+          * Hides the clear button.
+          * @default false
+         */
+        "_hideClearButton"?: boolean;
         /**
           * 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.
           * @TODO : Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.
@@ -6346,7 +6401,7 @@ declare namespace LocalJSX {
     }
     interface KolSingleSelect {
         /**
-          * Defines the key combination that can be used to trigger or focus the component’s interactive element.
+          * Defines the key combination that can be used to trigger or focus the component's interactive element.
          */
         "_accessKey"?: string;
         /**

package/dist/types/index.d.ts

@@ -7,6 +7,6 @@ export * from './enums/bund';
 export { BEM_ALERT } from './functional-components/Alert/bem';
 export * from './kolibri';
 export { KoliBri, KoliBriDevHelper } from './schema';
-export type { FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableSelection, Optgroup, Option, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
+export type { FocusableElement, KoliBriTableCell, KoliBriTableHeaderCell, KoliBriTableHeaderCellWithLogic, KoliBriTableSelection, Optgroup, Option, SelectOption, Toast, ToasterOptions, W3CInputValue, } from './schema';
 export { KolEvent } from './utils/events';
 export { isTooltipOpen } from './utils/tooltip-open-tracking';

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

@@ -1,7 +1,10 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropImageSource, PropLabel } from '../props';
+import type { PropColor, PropImageSource, PropLabel } from '../props';
+import type { Stringified } from '../types';
 type RequiredAvatarProps = PropLabel;
-type OptionalAvatarProps = PropImageSource;
+type OptionalAvatarProps = PropImageSource & {
+    color: Stringified<PropColor>;
+};
 type RequiredAvatarStates = RequiredAvatarProps;
 type OptionalAvatarStates = OptionalAvatarProps;
 export type AvatarProps = Generic.Element.Members<RequiredAvatarProps, OptionalAvatarProps>;

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

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

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

@@ -5,9 +5,16 @@ import type { PropPaginationPosition } from '../props/pagination-position';
 import type { PropTableSettings } from '../props/table-settings';
 import type { KoliBriSortDirection, KoliBriTableDataType, KoliBriTableHeaderCell, KoliBriTableSelection, Stringified } from '../types';
 import type { KoliBriPaginationProps } from './pagination';
-export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType) => number;
+export type KoliBriTableSelectedHead = {
+    key: string;
+    label: string;
+    sortDirection: KoliBriSortDirection;
+};
+export type KoliBriSortFunction = (data: KoliBriTableDataType[]) => KoliBriTableDataType[];
+export type KoliBriDataCompareFn = (a: KoliBriTableDataType, b: KoliBriTableDataType, sortDirection?: KoliBriSortDirection) => number;
 export type KoliBriTableHeaderCellWithLogic = KoliBriTableHeaderCell & {
     compareFn?: KoliBriDataCompareFn;
+    _sort?: KoliBriSortFunction;
     sortDirection?: KoliBriSortDirection;
     headerCell?: true;
 };

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

@@ -15,6 +15,9 @@ type InputTypeOnFocus = {
 type InputTypeOnInput = {
     [Callback.onInput]?: EventValueOrEventCallback<Event, unknown>;
 };
+type InputTypeOnKeyDown = {
+    [Callback.onKeyDown]?: EventCallback<KeyboardEvent>;
+};
 export type Option<T> = {
     disabled?: boolean;
     label: string | number;
@@ -29,5 +32,5 @@ export type Optgroup<T> = {
     options: Option<T>[];
 };
 export type SelectOption<T> = Option<T> | Optgroup<T> | RadioOption<T>;
-export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput;
+export type InputTypeOnDefault = InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown;
 export {};

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

@@ -8,6 +8,7 @@ declare enum KolEvent {
     create = "kolCreate",
     focus = "kolFocus",
     input = "kolInput",
+    keydown = "kolKeydown",
     mousedown = "kolMousedown",
     reset = "kolReset",
     select = "kolSelect",

package/doc/avatar.md

@@ -5,10 +5,11 @@
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                  | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`              | `undefined` |
-| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \| undefined` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                                                                                                      | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------- |
+| `_color`              | `_color`  | Defines the backgroundColor and foregroundColor.                                                                   | `string \| undefined \| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#d3d3d3'` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                  | `undefined` |
+| `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \| undefined`                                                                                     | `undefined` |
 
 
 ----------------------------------------------

package/doc/combobox.md

@@ -5,26 +5,27 @@
 
 ## Properties
 
-| Property                    | Attribute        | Description                                                                                                                                                   | Type                                                                                                        | Default     |
-| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`                | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                       | `undefined` |
-| `_disabled`                 | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                      | `false`     |
-| `_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`                       | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined` |
-| `_placeholder`              | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \| undefined`                                                                                       | `undefined` |
-| `_required`                 | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                      | `false`     |
-| `_shortKey`                 | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \| undefined`                                                                                       | `undefined` |
-| `_suggestions` _(required)_ | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| string`                                                                                 | `undefined` |
-| `_tooltipAlign`             | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                       | `'top'`     |
-| `_touched`                  | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \| undefined`                                                                                      | `false`     |
-| `_value`                    | `_value`         | Defines the value of the input.                                                                                                                               | `string \| undefined`                                                                                       | `undefined` |
+| Property                    | Attribute            | Description                                                                                                                                                   | Type                                                                                                                             | Default     |
+| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_accessKey`                | `_access-key`        | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \| undefined`                                                                                                            | `undefined` |
+| `_disabled`                 | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \| undefined`                                                                                                           | `false`     |
+| `_hideClearButton`          | `_hide-clear-button` | Hides the clear button.                                                                                                                                       | `boolean \| undefined`                                                                                                           | `false`     |
+| `_hideLabel`                | `_hide-label`        | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \| undefined`                                                                                                           | `false`     |
+| `_hideMsg`                  | `_hide-msg`          | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \| undefined`                                                                                                           | `false`     |
+| `_hint`                     | `_hint`              | Defines the hint text.                                                                                                                                        | `string \| undefined`                                                                                                            | `''`        |
+| `_icons`                    | `_icons`             | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                               | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                          | `undefined` |
+| `_id`                       | `_id`                | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \| undefined`                                                                                                            | `undefined` |
+| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined` |
+| `_msg`                      | `_msg`               | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`                                    | `undefined` |
+| `_name`                     | `_name`              | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                            | `undefined` |
+| `_on`                       | --                   | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined` | `undefined` |
+| `_placeholder`              | `_placeholder`       | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \| undefined`                                                                                                            | `undefined` |
+| `_required`                 | `_required`          | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                           | `false`     |
+| `_shortKey`                 | `_short-key`         | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \| undefined`                                                                                                            | `undefined` |
+| `_suggestions` _(required)_ | `_suggestions`       | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| string`                                                                                                      | `undefined` |
+| `_tooltipAlign`             | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                            | `'top'`     |
+| `_touched`                  | `_touched`           | Shows if the input was touched by a user.                                                                                                                     | `boolean \| undefined`                                                                                                           | `false`     |
+| `_value`                    | `_value`             | Defines the value of the input.                                                                                                                               | `string \| undefined`                                                                                                            | `undefined` |
 
 
 ## Methods

package/doc/input-checkbox.md

@@ -20,7 +20,7 @@
 | `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                      | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |
 | `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`                                                                                                                                                                                                                   | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                     | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`                                                                                                                                                                                | `undefined` |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                          | `false`     |
 | `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                           | `'top'`     |

package/doc/input-color.md

@@ -18,7 +18,7 @@
 | `_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`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| 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` |
 | `_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` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |

package/doc/input-date.md

@@ -20,7 +20,7 @@
 | `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |
 | `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
-| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| 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 shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |

package/doc/input-email.md

@@ -22,7 +22,7 @@
 | `_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`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| 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`     |

package/doc/input-file.md

@@ -19,7 +19,7 @@
 | `_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`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_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` |

package/doc/input-number.md

@@ -20,7 +20,7 @@
 | `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \| `${number}` \| number \| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `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`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |
 | `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |

package/doc/input-password.md

@@ -21,7 +21,7 @@
 | `_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`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined` |
+| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \| 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`     |

package/doc/input-radio.md

@@ -5,23 +5,23 @@
 
 ## 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`                                                                                       | `''`         |
-| `_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`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| 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 input.                                                                                                                               | `boolean \| null \| number \| object \| string \| undefined`                                                | `null`       |
+| 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`                                                                                                            | `''`         |
+| `_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`                 | --               | 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 input.                                                                                                                               | `boolean \| null \| number \| object \| string \| undefined`                                                                     | `null`       |
 
 
 ## Methods