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

package/ssr/esm/lib/components/drilldown-link.wrapper.d.ts

@@ -3,6 +3,7 @@ import type { SelectedAriaAttributes, DrilldownLinkAriaAttribute, DrilldownLinkT
 export type PDrilldownLinkProps = BaseProps & {
     /**
      * Displays the link in its active state.
+     * @default false
      */
     active?: boolean;
     /**
@@ -23,12 +24,14 @@ export type PDrilldownLinkProps = BaseProps & {
     rel?: string;
     /**
      * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     * @default '_self'
      */
     target?: DrilldownLinkTarget;
 };
 export declare const PDrilldownLink: 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"> & {
     /**
      * Displays the link in its active state.
+     * @default false
      */
     active?: boolean;
     /**
@@ -49,6 +52,7 @@ export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<O
     rel?: string;
     /**
      * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     * @default '_self'
      */
     target?: DrilldownLinkTarget;
 } & {

package/ssr/esm/lib/components/drilldown.wrapper.d.ts

@@ -19,6 +19,7 @@ export type PDrilldownProps = BaseProps & {
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
      * If `true`, the drilldown is shown as open.
+     * @default false
      */
     open?: boolean;
 };
@@ -41,6 +42,7 @@ export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
      * If `true`, the drilldown is shown as open.
+     * @default false
      */
     open?: boolean;
 } & {

package/ssr/esm/lib/components/fieldset.wrapper.d.ts

@@ -7,22 +7,27 @@ export type PFieldsetProps = BaseProps & {
     aria?: SelectedAriaRole<"radiogroup">;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * Controls the size of the label text.
+     * @default 'medium'
      */
     labelSize?: FieldsetLabelSize;
     /**
      * The message styled depending on validation state.
+     * @default ''
      */
     message?: string;
     /**
      * Marks the Fieldset as required.
+     * @default false
      */
     required?: boolean;
     /**
      * The validation state.
+     * @default 'none'
      */
     state?: FieldsetState;
 };
@@ -33,22 +38,27 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<i
     aria?: SelectedAriaRole<"radiogroup">;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * Controls the size of the label text.
+     * @default 'medium'
      */
     labelSize?: FieldsetLabelSize;
     /**
      * The message styled depending on validation state.
+     * @default ''
      */
     message?: string;
     /**
      * Marks the Fieldset as required.
+     * @default false
      */
     required?: boolean;
     /**
      * The validation state.
+     * @default 'none'
      */
     state?: FieldsetState;
 } & {

package/ssr/esm/lib/components/flag.wrapper.d.ts

@@ -7,10 +7,12 @@ export type PFlagProps = BaseProps & {
     aria?: SelectedAriaAttributes<FlagAriaAttribute>;
     /**
      * Specifies the country flag to display. Use the two-letter ISO 3166-1 alpha-2 country code. For example, use `us` for the United States, `de` for Germany, `gb` for Great Britain.
+     * @default 'de'
      */
     name?: FlagName;
     /**
      * Defines the size of the flag, aligned with the typographic scale used by components such as p-icon, p-spinner, 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<FlagSize>;
 };
@@ -21,10 +23,12 @@ export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<impor
     aria?: SelectedAriaAttributes<FlagAriaAttribute>;
     /**
      * Specifies the country flag to display. Use the two-letter ISO 3166-1 alpha-2 country code. For example, use `us` for the United States, `de` for Germany, `gb` for Great Britain.
+     * @default 'de'
      */
     name?: FlagName;
     /**
      * Defines the size of the flag, aligned with the typographic scale used by components such as p-icon, p-spinner, 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<FlagSize>;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flyout.wrapper.d.ts

@@ -7,18 +7,22 @@ export type PFlyoutProps = BaseProps & {
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
     /**
      * Defines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).
+     * @default 'blur'
      */
     backdrop?: FlyoutBackdrop;
     /**
      * Defines the background color
+     * @default 'canvas'
      */
     background?: FlyoutBackground;
     /**
      * If true, the flyout will not be closable via backdrop click.
+     * @default false
      */
     disableBackdropClick?: boolean;
     /**
      * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
     /**
@@ -35,10 +39,12 @@ export type PFlyoutProps = BaseProps & {
     onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
+     * @default false
      */
     open: boolean;
     /**
      * The position of the flyout
+     * @default 'end'
      */
     position?: FlyoutPosition;
 };
@@ -49,18 +55,22 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
     /**
      * Defines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).
+     * @default 'blur'
      */
     backdrop?: FlyoutBackdrop;
     /**
      * Defines the background color
+     * @default 'canvas'
      */
     background?: FlyoutBackground;
     /**
      * If true, the flyout will not be closable via backdrop click.
+     * @default false
      */
     disableBackdropClick?: boolean;
     /**
      * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
     /**
@@ -77,10 +87,12 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
     onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
+     * @default false
      */
     open: boolean;
     /**
      * The position of the flyout
+     * @default 'end'
      */
     position?: FlyoutPosition;
 } & {

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