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

package/esm/lib/components/heading.wrapper.d.ts

@@ -3,22 +3,27 @@ import type { HeadingAlign, HeadingColor, HeadingHyphens, BreakpointCustomizable
 export type PHeadingProps = BaseProps & {
     /**
      * Text alignment of the heading. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
+     * @default 'start'
      */
     align?: HeadingAlign;
     /**
      * Text color of the heading. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, or 'inherit' to adopt the parent's color.
+     * @default 'primary'
      */
     color?: HeadingColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
+     * @default false
      */
     ellipsis?: boolean;
     /**
      * Controls the hyphenation behavior of the heading. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
+     * @default 'none'
      */
     hyphens?: HeadingHyphens;
     /**
      * Size of the heading. Also defines the size for specific breakpoints, like {base: "md", l: "2xl"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
+     * @default '2xl'
      */
     size?: BreakpointCustomizable<HeadingSize>;
     /**
@@ -27,28 +32,34 @@ export type PHeadingProps = BaseProps & {
     tag?: HeadingTag;
     /**
      * The font weight of the heading. Use 'normal' for regular weight, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis. For `size` values of 'sm' or smaller, it's recommended to use 'semibold' for better readability.
+     * @default 'normal'
      */
     weight?: HeadingWeight;
 };
 export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the heading. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
+     * @default 'start'
      */
     align?: HeadingAlign;
     /**
      * Text color of the heading. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, or 'inherit' to adopt the parent's color.
+     * @default 'primary'
      */
     color?: HeadingColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
+     * @default false
      */
     ellipsis?: boolean;
     /**
      * Controls the hyphenation behavior of the heading. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `&shy;`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
+     * @default 'none'
      */
     hyphens?: HeadingHyphens;
     /**
      * Size of the heading. Also defines the size for specific breakpoints, like {base: "md", l: "2xl"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
+     * @default '2xl'
      */
     size?: BreakpointCustomizable<HeadingSize>;
     /**
@@ -57,6 +68,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<im
     tag?: HeadingTag;
     /**
      * The font weight of the heading. Use 'normal' for regular weight, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis. For `size` values of 'sm' or smaller, it's recommended to use 'semibold' for better readability.
+     * @default 'normal'
      */
     weight?: HeadingWeight;
 } & {

package/esm/lib/components/icon.wrapper.d.ts

@@ -7,14 +7,17 @@ export type PIconProps = BaseProps & {
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations.
+     * @default 'primary'
      */
     color?: IconColor;
     /**
      * Specifies which icon to use.
+     * @default 'arrow-right'
      */
     name?: IconName;
     /**
      * Defines the size of the icon, aligned with the typographic scale used by components such as p-spinner, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<IconSize>;
     /**
@@ -29,14 +32,17 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations.
+     * @default 'primary'
      */
     color?: IconColor;
     /**
      * Specifies which icon to use.
+     * @default 'arrow-right'
      */
     name?: IconName;
     /**
      * Defines the size of the icon, aligned with the typographic scale used by components such as p-spinner, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<IconSize>;
     /**

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -3,6 +3,7 @@ import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, Inline
 export type PInlineNotificationProps = BaseProps & {
     /**
      * Action icon of the inline-notification.
+     * @default 'arrow-right'
      */
     actionIcon?: InlineNotificationActionIcon;
     /**
@@ -11,22 +12,27 @@ export type PInlineNotificationProps = BaseProps & {
     actionLabel?: string;
     /**
      * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     actionLoading?: boolean;
     /**
      * Description of the inline-notification.
+     * @default ''
      */
     description?: string;
     /**
      * If false, the inline-notification will not have a dismiss button.
+     * @default true
      */
     dismissButton?: boolean;
     /**
      * Heading of the inline-notification.
+     * @default ''
      */
     heading?: string;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @default 'h5'
      */
     headingTag?: InlineNotificationHeadingTag;
     /**
@@ -39,12 +45,14 @@ export type PInlineNotificationProps = BaseProps & {
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * State of the inline-notification.
+     * @default 'info'
      */
     state?: InlineNotificationState;
 };
 export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon of the inline-notification.
+     * @default 'arrow-right'
      */
     actionIcon?: InlineNotificationActionIcon;
     /**
@@ -53,22 +61,27 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     actionLabel?: string;
     /**
      * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     actionLoading?: boolean;
     /**
      * Description of the inline-notification.
+     * @default ''
      */
     description?: string;
     /**
      * If false, the inline-notification will not have a dismiss button.
+     * @default true
      */
     dismissButton?: boolean;
     /**
      * Heading of the inline-notification.
+     * @default ''
      */
     heading?: string;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @default 'h5'
      */
     headingTag?: InlineNotificationHeadingTag;
     /**
@@ -81,6 +94,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * State of the inline-notification.
+     * @default 'info'
      */
     state?: InlineNotificationState;
 } & {

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

@@ -7,14 +7,17 @@ export type PInputDateProps = 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 PInputDateProps = 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 PInputDateProps = BaseProps & {
     max?: string;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -63,22 +70,27 @@ export type PInputDateProps = BaseProps & {
     onInput?: (event: CustomEvent<InputDateInputEventDetail>) => 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?: InputDateState;
     /**
      * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
+     * @default 1
      */
     step?: number;
     /**
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
+     * @default ''
      */
     value?: string;
 };
@@ -89,14 +101,17 @@ export declare const PInputDate: 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 PInputDate: 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 PInputDate: import("react").ForwardRefExoticComponent<Omit<
     max?: string;
     /**
      * Dynamic feedback text for validation or status.
+     * @default ''
      */
     message?: string;
     /**
@@ -145,22 +164,27 @@ export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<
     onInput?: (event: CustomEvent<InputDateInputEventDetail>) => 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?: InputDateState;
     /**
      * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
+     * @default 1
      */
     step?: number;
     /**
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
+     * @default ''
      */
     value?: string;
 } & {

package/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/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;
 } & {