@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

package/ssr/esm/lib/components/input-email.wrapper.d.ts

@@ -7,14 +7,17 @@ export type PInputEmailProps = BaseProps & {
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -23,18 +26,22 @@ export type PInputEmailProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Controls the visibility of the email icon.
+     * @default false
      */
     indicator?: boolean;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -43,6 +50,7 @@ export type PInputEmailProps = BaseProps & {
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -51,6 +59,7 @@ export type PInputEmailProps = BaseProps & {
     minLength?: number;
     /**
      * Allows the user to enter a list of email addresses separated by commas (and optional whitespace). The browser validates each email address in the list.
+     * @default false
      */
     multiple?: boolean;
     /**
@@ -75,22 +84,27 @@ export type PInputEmailProps = BaseProps & {
     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='you@example.com'). This text is displayed when the input field 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputEmailState;
     /**
      * The default email address (or comma-separated list of addresses) for the input.
+     * @default ''
      */
     value?: string;
 };
@@ -101,14 +115,17 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -117,18 +134,22 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Controls the visibility of the email icon.
+     * @default false
      */
     indicator?: boolean;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -137,6 +158,7 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -145,6 +167,7 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
     minLength?: number;
     /**
      * Allows the user to enter a list of email addresses separated by commas (and optional whitespace). The browser validates each email address in the list.
+     * @default false
      */
     multiple?: boolean;
     /**
@@ -169,22 +192,27 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
     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='you@example.com'). This text is displayed when the input field 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputEmailState;
     /**
      * The default email address (or comma-separated list of addresses) for the input.
+     * @default ''
      */
     value?: string;
 } & {

package/ssr/esm/lib/components/input-month.wrapper.d.ts

@@ -7,14 +7,17 @@ export type PInputMonthProps = BaseProps & {
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -23,14 +26,17 @@ export type PInputMonthProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -39,6 +45,7 @@ export type PInputMonthProps = BaseProps & {
     max?: string;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -63,22 +70,27 @@ export type PInputMonthProps = BaseProps & {
     onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputMonthState;
     /**
      * Defines the stepping interval in months. For example, step="1" increments by 1 month, step="12" by 1 year. The default is 1 month.
+     * @default 1
      */
     step?: number;
     /**
      * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
+     * @default ''
      */
     value?: string;
 };
@@ -89,14 +101,17 @@ export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -105,14 +120,17 @@ export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -121,6 +139,7 @@ export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit
     max?: string;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -145,22 +164,27 @@ export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit
     onInput?: (event: CustomEvent<InputMonthInputEventDetail>) => 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputMonthState;
     /**
      * Defines the stepping interval in months. For example, step="1" increments by 1 month, step="12" by 1 year. The default is 1 month.
+     * @default 1
      */
     step?: number;
     /**
      * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
+     * @default ''
      */
     value?: string;
 } & {

package/ssr/esm/lib/components/input-number.wrapper.d.ts

@@ -7,18 +7,22 @@ export type PInputNumberProps = BaseProps & {
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Show or hide the increment/decrement stepper controls.
+     * @default false
      */
     controls?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -27,14 +31,17 @@ export type PInputNumberProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -43,6 +50,7 @@ export type PInputNumberProps = BaseProps & {
     max?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -67,26 +75,32 @@ export type PInputNumberProps = BaseProps & {
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => 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 a number'). This text is displayed when the input field 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputNumberState;
     /**
      * The granularity that the value must adhere to.
+     * @default 1
      */
     step?: number;
     /**
      * The value of the number input.
+     * @default ''
      */
     value?: string;
 };
@@ -97,18 +111,22 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Show or hide the increment/decrement stepper controls.
+     * @default false
      */
     controls?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -117,14 +135,17 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -133,6 +154,7 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
     max?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -157,26 +179,32 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => 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 a number'). This text is displayed when the input field 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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputNumberState;
     /**
      * The granularity that the value must adhere to.
+     * @default 1
      */
     step?: number;
     /**
      * The value of the number input.
+     * @default ''
      */
     value?: string;
 } & {

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

@@ -7,14 +7,17 @@ export type PInputPasswordProps = BaseProps & {
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -23,14 +26,17 @@ export type PInputPasswordProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -39,6 +45,7 @@ export type PInputPasswordProps = BaseProps & {
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -63,26 +70,32 @@ 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.
+     * @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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputPasswordState;
     /**
      * Show or hide password toggle for `input type="password"`.
+     * @default false
      */
     toggle?: boolean;
     /**
      * The password input value.
+     * @default ''
      */
     value?: string;
 };
@@ -93,14 +106,17 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<O
     autoComplete?: string;
     /**
      * Displays the input field in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Supplementary text providing more context or explanation for the input.
+     * @default ''
      */
     description?: string;
     /**
      * Disables the input field. The value will not be submitted with the form.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -109,14 +125,17 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<O
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -125,6 +144,7 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<O
     maxLength?: number;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -149,26 +169,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.
+     * @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.
+     * @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.
+     * @default false
      */
     required?: boolean;
     /**
      * Indicates the validation or overall status of the input component.
+     * @default 'none'
      */
     state?: InputPasswordState;
     /**
      * Show or hide password toggle for `input type="password"`.
+     * @default false
      */
     toggle?: boolean;
     /**
      * The password input value.
+     * @default ''
      */
     value?: string;
 } & {