@porsche-design-system/components-react 4.2.0-rc.5 → 4.2.0

package/esm/lib/components/input-password.wrapper.d.ts

@@ -2,58 +2,58 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, InputPasswordBlurEventDetail, InputPasswordChangeEventDetail, InputPasswordInputEventDetail, InputPasswordState } from '../types';
 export type PInputPasswordProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
+     * Provides the browser with a password autofill hint (e.g. `autocomplete='current-password'` or `autocomplete='new-password'`).
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
@@ -69,90 +69,90 @@ export type PInputPasswordProps = BaseProps & {
      */
     onInput?: (event: CustomEvent<InputPasswordInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter your password'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputPasswordState;
     /**
-     * Show or hide password toggle for `input type="password"`.
+     * Shows a toggle button that switches the password between masked and plain text visibility.
      * @default false
      */
     toggle?: boolean;
     /**
-     * The password input value.
+     * Sets the current password value of the field.
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputPassword: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
+     * Provides the browser with a password autofill hint (e.g. `autocomplete='current-password'` or `autocomplete='new-password'`).
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
@@ -168,32 +168,32 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<O
      */
     onInput?: (event: CustomEvent<InputPasswordInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter your password'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputPasswordState;
     /**
-     * Show or hide password toggle for `input type="password"`.
+     * Shows a toggle button that switches the password between masked and plain text visibility.
      * @default false
      */
     toggle?: boolean;
     /**
-     * The password input value.
+     * Sets the current password value of the field.
      * @default ''
      */
     value?: string | null;

package/esm/lib/components/input-search.wrapper.d.ts

@@ -2,80 +2,80 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, InputSearchAriaAttribute, BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
 export type PInputSearchProps = BaseProps & {
     /**
-     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     * Sets additional ARIA attributes on the search input, useful for combobox patterns (e.g. `role="combobox"`, `aria-expanded`).
      */
     aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
+     * Provides the browser with a data type hint to enable relevant autofill suggestions.
      */
     autoComplete?: string;
     /**
-     * Show clear input value button
+     * Shows a clear button (×) inside the field that resets the value to empty when clicked.
      * @default false
      */
     clear?: boolean;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Show search indicator icon
+     * Shows a magnifying glass icon inside the field as a visual affordance for search input.
      * @default false
      */
     indicator?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the search input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputSearchBlurEventDetail>) => void;
     /**
-     * Emitted when the search input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputSearchChangeEventDetail>) => void;
     /**
@@ -83,107 +83,107 @@ export type PInputSearchProps = BaseProps & {
      */
     onInput?: (event: CustomEvent<InputSearchInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Search...'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputSearchState;
     /**
-     * The search input value.
+     * Sets the current search query value of the field.
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     * Sets additional ARIA attributes on the search input, useful for combobox patterns (e.g. `role="combobox"`, `aria-expanded`).
      */
     aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
+     * Provides the browser with a data type hint to enable relevant autofill suggestions.
      */
     autoComplete?: string;
     /**
-     * Show clear input value button
+     * Shows a clear button (×) inside the field that resets the value to empty when clicked.
      * @default false
      */
     clear?: boolean;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing all input. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly inside it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Show search indicator icon
+     * Shows a magnifying glass icon inside the field as a visual affordance for search input.
      * @default false
      */
     indicator?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     * Sets the maximum number of characters the user can enter.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     * Sets the minimum number of characters required for the field to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the search input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputSearchBlurEventDetail>) => void;
     /**
-     * Emitted when the search input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputSearchChangeEventDetail>) => void;
     /**
@@ -191,27 +191,27 @@ export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omi
      */
     onInput?: (event: CustomEvent<InputSearchInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Search...'). This text is displayed when the input field is empty.
+     * Sets placeholder text shown inside the field when it is empty.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be edited. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputSearchState;
     /**
-     * The search input value.
+     * Sets the current search query value of the field.
      * @default ''
      */
     value?: string | null;