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

package/ssr/esm/lib/components/button-tile.wrapper.d.ts

@@ -3,6 +3,7 @@ import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute,
 export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
+     * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
@@ -11,10 +12,12 @@ export type PButtonTileProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
      * Aspect ratio of the button-tile.
+     * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
      * Displays the button-tile as compact version with description and button icon only.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -23,14 +26,17 @@ export type PButtonTileProps = BaseProps & {
     description: string;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
      * Show gradient.
+     * @default false
      */
     gradient?: boolean;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
@@ -43,24 +49,29 @@ export type PButtonTileProps = BaseProps & {
     label: string;
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
      * Font size of the description.
+     * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonTileType;
     /**
      * Font weight of the description.
+     * @default 'semi-bold'
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
 export declare const PButtonTile: 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"> & {
     /**
      * Alignment of button and description.
+     * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
@@ -69,10 +80,12 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
      * Aspect ratio of the button-tile.
+     * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
      * Displays the button-tile as compact version with description and button icon only.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -81,14 +94,17 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     description: string;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
      * Show gradient.
+     * @default false
      */
     gradient?: boolean;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
@@ -101,18 +117,22 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     label: string;
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
      * Font size of the description.
+     * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonTileType;
     /**
      * Font weight of the description.
+     * @default 'semi-bold'
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 } & {

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

@@ -7,10 +7,12 @@ export type PButtonProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Displays the button in compact mode.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -19,10 +21,12 @@ export type PButtonProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonIcon;
     /**
@@ -31,6 +35,7 @@ export type PButtonProps = BaseProps & {
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -39,6 +44,7 @@ export type PButtonProps = BaseProps & {
     name?: string;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonType;
     /**
@@ -47,6 +53,7 @@ export type PButtonProps = BaseProps & {
     value?: string;
     /**
      * The style variant of the button.
+     * @default 'primary'
      */
     variant?: ButtonVariant;
 };
@@ -57,10 +64,12 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Displays the button in compact mode.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -69,10 +78,12 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonIcon;
     /**
@@ -81,6 +92,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -89,6 +101,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     name?: string;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonType;
     /**
@@ -97,6 +110,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     value?: string;
     /**
      * The style variant of the button.
+     * @default 'primary'
      */
     variant?: ButtonVariant;
 } & {

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