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

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

@@ -3,6 +3,7 @@ import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../t
 export type PCanvasProps = BaseProps & {
     /**
      * Defines the background color of the main section and auto adjust it for the sidebar
+     * @default 'canvas'
      */
     background?: CanvasBackground;
     /**
@@ -15,16 +16,19 @@ export type PCanvasProps = BaseProps & {
     onSidebarStartUpdate?: (event: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => void;
     /**
      * Open the sidebar on the end side
+     * @default false
      */
     sidebarEndOpen?: boolean;
     /**
      * Open the sidebar on the start side
+     * @default false
      */
     sidebarStartOpen?: boolean;
 };
 export declare const PCanvas: 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"> & {
     /**
      * Defines the background color of the main section and auto adjust it for the sidebar
+     * @default 'canvas'
      */
     background?: CanvasBackground;
     /**
@@ -37,10 +41,12 @@ export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<imp
     onSidebarStartUpdate?: (event: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => void;
     /**
      * Open the sidebar on the end side
+     * @default false
      */
     sidebarEndOpen?: boolean;
     /**
      * Open the sidebar on the start side
+     * @default false
      */
     sidebarStartOpen?: boolean;
 } & {

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

@@ -3,14 +3,17 @@ import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide is active (zero-based numbering).
+     * @default 0
      */
     activeSlideIndex?: number;
     /**
      * Aligns the slotted controls.
+     * @default 'auto'
      */
     alignControls?: CarouselAlignControls;
     /**
      * Aligns the heading and description.
+     * @default 'start'
      */
     alignHeader?: CarouselAlignHeader;
     /**
@@ -23,10 +26,12 @@ export type PCarouselProps = BaseProps & {
     description?: string;
     /**
      * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     * @default false
      */
     focusOnCenterSlide?: boolean;
     /**
      * Fades the slides out.
+     * @default false
      */
     gradient?: boolean;
     /**
@@ -35,6 +40,7 @@ export type PCarouselProps = BaseProps & {
     heading?: string;
     /**
      * Defines the heading size used in the carousel.
+     * @default 'x-large'
      */
     headingSize?: CarouselHeadingSize;
     /**
@@ -47,10 +53,12 @@ export type PCarouselProps = BaseProps & {
     onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
+     * @default false
      */
     pagination?: BreakpointCustomizable<boolean>;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
+     * @default false
      */
     rewind?: boolean;
     /**
@@ -59,28 +67,34 @@ export type PCarouselProps = BaseProps & {
     skipLinkTarget?: string;
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
+     * @default 1
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     * @default false
      */
     trimSpace?: boolean;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
+     * @default 'basic'
      */
     width?: CarouselWidth;
 };
 export declare const PCarousel: 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"> & {
     /**
      * Defines which slide is active (zero-based numbering).
+     * @default 0
      */
     activeSlideIndex?: number;
     /**
      * Aligns the slotted controls.
+     * @default 'auto'
      */
     alignControls?: CarouselAlignControls;
     /**
      * Aligns the heading and description.
+     * @default 'start'
      */
     alignHeader?: CarouselAlignHeader;
     /**
@@ -93,10 +107,12 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
     description?: string;
     /**
      * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     * @default false
      */
     focusOnCenterSlide?: boolean;
     /**
      * Fades the slides out.
+     * @default false
      */
     gradient?: boolean;
     /**
@@ -105,6 +121,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
     heading?: string;
     /**
      * Defines the heading size used in the carousel.
+     * @default 'x-large'
      */
     headingSize?: CarouselHeadingSize;
     /**
@@ -117,10 +134,12 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
     onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
+     * @default false
      */
     pagination?: BreakpointCustomizable<boolean>;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
+     * @default false
      */
     rewind?: boolean;
     /**
@@ -129,14 +148,17 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<i
     skipLinkTarget?: string;
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
+     * @default 1
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     * @default false
      */
     trimSpace?: boolean;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
+     * @default 'basic'
      */
     width?: CarouselWidth;
 } & {

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

@@ -3,14 +3,17 @@ import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEve
 export type PCheckboxProps = BaseProps & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
+     * @default false
      */
     checked?: boolean;
     /**
      * Displays the checkbox in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Marks the checkbox as disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -19,26 +22,32 @@ export type PCheckboxProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Marks the checkbox as indeterminate.
+     * @default false
      */
     indeterminate?: boolean;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Disables the checkbox and shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
      * The message styled depending on validation state.
+     * @default ''
      */
     message?: string;
     /**
      * The name of the checkbox.
+     * @default ''
      */
     name?: string;
     /**
@@ -51,28 +60,34 @@ export type PCheckboxProps = BaseProps & {
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
      * Marks the checkbox as required.
+     * @default false
      */
     required?: boolean;
     /**
      * The validation state.
+     * @default 'none'
      */
     state?: CheckboxState;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     * @default 'on'
      */
     value?: string;
 };
 export declare const PCheckbox: 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"> & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
+     * @default false
      */
     checked?: boolean;
     /**
      * Displays the checkbox in compact mode.
+     * @default false
      */
     compact?: boolean;
     /**
      * Marks the checkbox as disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -81,26 +96,32 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * Marks the checkbox as indeterminate.
+     * @default false
      */
     indeterminate?: boolean;
     /**
      * Text content for a user-facing label.
+     * @default ''
      */
     label?: string;
     /**
      * @experimental Disables the checkbox and shows a loading indicator.
+     * @default false
      */
     loading?: boolean;
     /**
      * The message styled depending on validation state.
+     * @default ''
      */
     message?: string;
     /**
      * The name of the checkbox.
+     * @default ''
      */
     name?: string;
     /**
@@ -113,14 +134,17 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
      * Marks the checkbox as required.
+     * @default false
      */
     required?: boolean;
     /**
      * The validation state.
+     * @default 'none'
      */
     state?: CheckboxState;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     * @default 'on'
      */
     value?: string;
 } & {

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

@@ -11,6 +11,7 @@ export type PCrestProps = BaseProps & {
     href?: string;
     /**
      * Specifies where to open the linked document.
+     * @default '_self'
      */
     target?: CrestTarget;
 };
@@ -25,6 +26,7 @@ export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<impo
     href?: string;
     /**
      * Specifies where to open the linked document.
+     * @default '_self'
      */
     target?: CrestTarget;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -3,18 +3,22 @@ import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, D
 export type PDisplayProps = BaseProps & {
     /**
      * Text alignment of the component.
+     * @default 'start'
      */
     align?: DisplayAlign;
     /**
      * Basic text color variations.
+     * @default 'primary'
      */
     color?: DisplayColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
+     * @default false
      */
     ellipsis?: boolean;
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     * @default 'large'
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**
@@ -26,18 +30,22 @@ export type PDisplayProps = BaseProps & {
 export declare const PDisplay: 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 component.
+     * @default 'start'
      */
     align?: DisplayAlign;
     /**
      * Basic text color variations.
+     * @default 'primary'
      */
     color?: DisplayColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
+     * @default false
      */
     ellipsis?: boolean;
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     * @default 'large'
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**

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

@@ -3,20 +3,24 @@ import type { DividerColor, BreakpointCustomizable, DividerDirection } from '../
 export type PDividerProps = BaseProps & {
     /**
      * Defines color.
+     * @default 'contrast-lower'
      */
     color?: DividerColor;
     /**
      * Defines direction.
+     * @default 'horizontal'
      */
     direction?: BreakpointCustomizable<DividerDirection>;
 };
 export declare const PDivider: 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"> & {
     /**
      * Defines color.
+     * @default 'contrast-lower'
      */
     color?: DividerColor;
     /**
      * Defines direction.
+     * @default 'horizontal'
      */
     direction?: BreakpointCustomizable<DividerDirection>;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/drilldown-item.wrapper.d.ts

@@ -2,6 +2,7 @@ import type { BaseProps } from '../../BaseProps';
 export type PDrilldownItemProps = BaseProps & {
     /**
      * Private property set by the component itself.
+     * @default false
      */
     cascade?: boolean;
     /**
@@ -14,16 +15,19 @@ export type PDrilldownItemProps = BaseProps & {
     label?: string;
     /**
      * Private property set by the component itself.
+     * @default false
      */
     primary?: boolean;
     /**
      * Private property set by the component itself.
+     * @default false
      */
     secondary?: boolean;
 };
 export declare const PDrilldownItem: 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"> & {
     /**
      * Private property set by the component itself.
+     * @default false
      */
     cascade?: boolean;
     /**
@@ -36,10 +40,12 @@ export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<O
     label?: string;
     /**
      * Private property set by the component itself.
+     * @default false
      */
     primary?: boolean;
     /**
      * Private property set by the component itself.
+     * @default false
      */
     secondary?: boolean;
 } & {

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