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

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

@@ -2,206 +2,206 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState } from '../types';
 export type PInputUrlProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='url').
+     * Provides the browser with a URL autofill hint (e.g. `autocomplete='url'`).
      */
     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>;
     /**
-     * Controls the visibility of the URL icon.
+     * Shows a URL/link icon at the start of the field as a visual indicator.
      * @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 URL input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputUrlBlurEventDetail>) => void;
     /**
-     * Emitted when the URL input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputUrlChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user types.
      */
     onInput?: (event: CustomEvent<InputUrlInputEventDetail>) => void;
     /**
-     * Specifies a regular expression that the input's value must match to pass constraint validation. This allows for more specific URL validation rules than the browser's default. If provided, it overrides the browser's default URL validation.
+     * Sets a regular expression the entered value must match to be valid. Overrides the browser's default URL validation.
      */
     pattern?: string;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='https://porsche.com/')
+     * Sets placeholder text shown inside the field when it is empty, such as an example URL.
      * @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?: InputUrlState;
     /**
-     * The URL input value.
+     * Sets the current URL value. Must be an absolute URL (e.g. `https://porsche.com`) to pass browser validation.
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputUrl: 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='url').
+     * Provides the browser with a URL autofill hint (e.g. `autocomplete='url'`).
      */
     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>;
     /**
-     * Controls the visibility of the URL icon.
+     * Shows a URL/link icon at the start of the field as a visual indicator.
      * @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 URL input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputUrlBlurEventDetail>) => void;
     /**
-     * Emitted when the URL input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputUrlChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user types.
      */
     onInput?: (event: CustomEvent<InputUrlInputEventDetail>) => void;
     /**
-     * Specifies a regular expression that the input's value must match to pass constraint validation. This allows for more specific URL validation rules than the browser's default. If provided, it overrides the browser's default URL validation.
+     * Sets a regular expression the entered value must match to be valid. Overrides the browser's default URL validation.
      */
     pattern?: string;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='https://porsche.com/')
+     * Sets placeholder text shown inside the field when it is empty, such as an example URL.
      * @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?: InputUrlState;
     /**
-     * The URL input value.
+     * Sets the current URL value. Must be an absolute URL (e.g. `https://porsche.com`) to pass browser validation.
      * @default ''
      */
     value?: string | null;

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

@@ -2,188 +2,188 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState } from '../types';
 export type PInputWeekProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     * Provides the browser with a week/year autofill hint.
      */
     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 week selection. 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;
     /**
-     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     * Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.
      */
     max?: string;
     /**
-     * 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;
     /**
-     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     * Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.
      */
     min?: string;
     /**
-     * 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 week input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
     /**
-     * Emitted when the week input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user interacts with the week picker.
      */
     onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
     /**
-     * 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 changed. 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 no week is selected.
      * @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?: InputWeekState;
     /**
-     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 week.
+     * Sets the stepping interval in weeks.
      * @default 1
      */
     step?: number;
     /**
-     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27').
+     * Sets the current ISO week value in YYYY-Www format (e.g. `2025-W27`).
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputWeek: 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.
+     * Provides the browser with a week/year autofill hint.
      */
     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 week selection. 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;
     /**
-     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     * Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.
      */
     max?: string;
     /**
-     * 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;
     /**
-     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     * Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.
      */
     min?: string;
     /**
-     * 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 week input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
     /**
-     * Emitted when the week input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user interacts with the week picker.
      */
     onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
     /**
-     * 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 changed. 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 no week is selected.
      * @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?: InputWeekState;
     /**
-     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 week.
+     * Sets the stepping interval in weeks.
      * @default 1
      */
     step?: number;
     /**
-     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27').
+     * Sets the current ISO week value in YYYY-Www format (e.g. `2025-W27`).
      * @default ''
      */
     value?: string | null;