@porsche-design-system/components-react 4.2.0-rc.5 → 4.3.0-rc.0

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

@@ -2,136 +2,136 @@ import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = BaseProps & {
     /**
-     * Alignment of button and description.
+     * Controls the vertical placement of the description and button — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's action button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
-     * Aspect ratio of the button-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
-     * Displays the button-tile as compact version with description and button icon only.
+     * Renders only the icon button without the full label. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Description text.
+     * Sets the description text displayed in the tile's content area.
      */
     description: string;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the tile, preventing button interaction.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed in the tile's action button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Label of the button.
+     * Sets the accessible label text of the action button rendered inside the tile.
      */
     label: string;
     /**
-     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the tile and shows a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Font size of the description.
+     * Sets the font size of the description text in the tile content area. Supports responsive breakpoint values.
      * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonTileType;
     /**
-     * Font weight of the description.
+     * Sets the font weight of the description text in the tile content area. Supports responsive breakpoint values.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Alignment of button and description.
+     * Controls the vertical placement of the description and button — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's action button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
-     * Aspect ratio of the button-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
-     * Displays the button-tile as compact version with description and button icon only.
+     * Renders only the icon button without the full label. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Description text.
+     * Sets the description text displayed in the tile's content area.
      */
     description: string;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the tile, preventing button interaction.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed in the tile's action button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Label of the button.
+     * Sets the accessible label text of the action button rendered inside the tile.
      */
     label: string;
     /**
-     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the tile and shows a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Font size of the description.
+     * Sets the font size of the description text in the tile content area. Supports responsive breakpoint values.
      * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonTileType;
     /**
-     * Font weight of the description.
+     * Sets the font weight of the description text in the tile content area. Supports responsive breakpoint values.
      * @default 'semi-bold'
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;

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

@@ -2,114 +2,114 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
-     * Displays the button in compact mode.
+     * Reduces the button's height and padding for denser layouts. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed inside the button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its content with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonType;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
     /**
-     * The style variant of the button.
+     * Sets the visual style variant of the button (e.g. `primary`, `secondary`, `tertiary`).
      * @default 'primary'
      */
     variant?: ButtonVariant;
 };
 export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
-     * Displays the button in compact mode.
+     * Reduces the button's height and padding for denser layouts. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed inside the button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its content with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonType;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
     /**
-     * The style variant of the button.
+     * Sets the visual style variant of the button (e.g. `primary`, `secondary`, `tertiary`).
      * @default 'primary'
      */
     variant?: ButtonVariant;

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

@@ -2,50 +2,50 @@ import type { BaseProps } from '../../BaseProps';
 import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../types';
 export type PCanvasProps = BaseProps & {
     /**
-     * Defines the background color of the main section and auto adjust it for the sidebar
+     * Sets the background color of the main content area and automatically applies a matching color to the sidebar.
      * @default 'canvas'
      */
     background?: CanvasBackground;
     /**
-     * Emitted when the sidebar end requests to be dismissed.
+     * Emitted when the user dismisses the end sidebar via the close button.
      */
     onSidebarEndDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the sidebar start requests to be opened or dismissed.
+     * Emitted when the user toggles the start sidebar, with the new open state in the event detail.
      */
     onSidebarStartUpdate?: (event: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => void;
     /**
-     * Open the sidebar on the end side
+     * Controls whether the utility sidebar on the end side (right in LTR) is open or collapsed.
      * @default false
      */
     sidebarEndOpen?: boolean;
     /**
-     * Open the sidebar on the start side
+     * Controls whether the navigation sidebar on the start side (left in LTR) is open or collapsed.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines the background color of the main section and auto adjust it for the sidebar
+     * Sets the background color of the main content area and automatically applies a matching color to the sidebar.
      * @default 'canvas'
      */
     background?: CanvasBackground;
     /**
-     * Emitted when the sidebar end requests to be dismissed.
+     * Emitted when the user dismisses the end sidebar via the close button.
      */
     onSidebarEndDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the sidebar start requests to be opened or dismissed.
+     * Emitted when the user toggles the start sidebar, with the new open state in the event detail.
      */
     onSidebarStartUpdate?: (event: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => void;
     /**
-     * Open the sidebar on the end side
+     * Controls whether the utility sidebar on the end side (right in LTR) is open or collapsed.
      * @default false
      */
     sidebarEndOpen?: boolean;
     /**
-     * Open the sidebar on the start side
+     * Controls whether the navigation sidebar on the start side (left in LTR) is open or collapsed.
      * @default false
      */
     sidebarStartOpen?: boolean;

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

@@ -2,162 +2,162 @@ import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, BreakpointCustomizable, CarouselSlidesPerPage, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
-     * Defines which slide is active (zero-based numbering).
+     * Sets the zero-based index of the currently visible slide. Update this to navigate programmatically.
      * @default 0
      */
     activeSlideIndex?: number;
     /**
-     * Aligns the slotted controls.
+     * Controls the alignment of custom slotted controls within the header area.
      * @default 'auto'
      */
     alignControls?: CarouselAlignControls;
     /**
-     * Aligns the heading and description.
+     * Controls the horizontal alignment of the heading and description.
      * @default 'start'
      */
     alignHeader?: CarouselAlignHeader;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the carousel region element for improved accessibility.
      */
     aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
     /**
-     * Defines the description used in the carousel.
+     * Sets the description text displayed below the heading for additional context.
      */
     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.
+     * When enabled, each slide is individually focusable and the carousel navigates one slide at a time instead of one page.
      * @default false
      */
     focusOnCenterSlide?: boolean;
     /**
-     * Fades the slides out.
+     * Shows a gradient fade at the start and end edges to visually indicate more slides beyond the viewport.
      * @default false
      */
     gradient?: boolean;
     /**
-     * Defines the heading used in the carousel.
+     * Sets the heading text displayed above the carousel. Also used as the accessible label when no `aria` prop is set.
      */
     heading?: string;
     /**
-     * Defines the heading size used in the carousel.
+     * Sets the font size of the carousel heading.
      * @default 'x-large'
      */
     headingSize?: CarouselHeadingSize;
     /**
-     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     * Overrides the default label strings used for the previous, next, and page indicators — useful for localization.
      */
     intl?: CarouselInternationalization;
     /**
-     * Emitted when carousel's content slides.
+     * Emitted when the carousel navigates to a new slide, with the active and previous slide indexes in the event detail.
      */
     onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
-     * If false, the carousel will not show pagination bullets at the bottom.
+     * Shows pagination dot indicators below the carousel. Supports responsive breakpoint values.
      * @default false
      */
     pagination?: BreakpointCustomizable<boolean>;
     /**
-     * Whether the slides should rewind from last to first slide and vice versa.
+     * Enables infinite looping — navigating past the last slide wraps back to the first, and vice versa.
      * @default false
      */
     rewind?: boolean;
     /**
-     * Defines the skip link target used to skip carousel entries.
+     * Sets the `href` of an in-page skip link that lets keyboard users jump past the carousel slides.
      */
     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.
+     * Sets how many slides are visible at once. Use `auto` to control each slide's width via CSS. Supports responsive breakpoint values.
      * @default 1
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
-     * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     * Removes whitespace before the first and after the last slide when `focusOnCenterSlide` is enabled.
      * @default false
      */
     trimSpace?: boolean;
     /**
-     * Defines the outer spacings between the carousel and the left and right screen sides.
+     * Sets the maximum width and outer spacing of the carousel, aligned to PDS grid widths.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines which slide is active (zero-based numbering).
+     * Sets the zero-based index of the currently visible slide. Update this to navigate programmatically.
      * @default 0
      */
     activeSlideIndex?: number;
     /**
-     * Aligns the slotted controls.
+     * Controls the alignment of custom slotted controls within the header area.
      * @default 'auto'
      */
     alignControls?: CarouselAlignControls;
     /**
-     * Aligns the heading and description.
+     * Controls the horizontal alignment of the heading and description.
      * @default 'start'
      */
     alignHeader?: CarouselAlignHeader;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the carousel region element for improved accessibility.
      */
     aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
     /**
-     * Defines the description used in the carousel.
+     * Sets the description text displayed below the heading for additional context.
      */
     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.
+     * When enabled, each slide is individually focusable and the carousel navigates one slide at a time instead of one page.
      * @default false
      */
     focusOnCenterSlide?: boolean;
     /**
-     * Fades the slides out.
+     * Shows a gradient fade at the start and end edges to visually indicate more slides beyond the viewport.
      * @default false
      */
     gradient?: boolean;
     /**
-     * Defines the heading used in the carousel.
+     * Sets the heading text displayed above the carousel. Also used as the accessible label when no `aria` prop is set.
      */
     heading?: string;
     /**
-     * Defines the heading size used in the carousel.
+     * Sets the font size of the carousel heading.
      * @default 'x-large'
      */
     headingSize?: CarouselHeadingSize;
     /**
-     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     * Overrides the default label strings used for the previous, next, and page indicators — useful for localization.
      */
     intl?: CarouselInternationalization;
     /**
-     * Emitted when carousel's content slides.
+     * Emitted when the carousel navigates to a new slide, with the active and previous slide indexes in the event detail.
      */
     onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
-     * If false, the carousel will not show pagination bullets at the bottom.
+     * Shows pagination dot indicators below the carousel. Supports responsive breakpoint values.
      * @default false
      */
     pagination?: BreakpointCustomizable<boolean>;
     /**
-     * Whether the slides should rewind from last to first slide and vice versa.
+     * Enables infinite looping — navigating past the last slide wraps back to the first, and vice versa.
      * @default false
      */
     rewind?: boolean;
     /**
-     * Defines the skip link target used to skip carousel entries.
+     * Sets the `href` of an in-page skip link that lets keyboard users jump past the carousel slides.
      */
     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.
+     * Sets how many slides are visible at once. Use `auto` to control each slide's width via CSS. Supports responsive breakpoint values.
      * @default 1
      */
     slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
-     * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     * Removes whitespace before the first and after the last slide when `focusOnCenterSlide` is enabled.
      * @default false
      */
     trimSpace?: boolean;
     /**
-     * Defines the outer spacings between the carousel and the left and right screen sides.
+     * Sets the maximum width and outer spacing of the carousel, aligned to PDS grid widths.
      * @default 'basic'
      */
     width?: CarouselWidth;