@porsche-design-system/components-react 4.2.0-rc.4 → 4.2.0

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

@@ -2,155 +2,155 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 export type PButtonPureProps = BaseProps & {
     /**
-     * Displays the button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @default false
      */
     active?: boolean;
     /**
-     * Aligns the label.
+     * Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * 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.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * 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 icon 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;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * Stretches the area between icon and label to max available space.
+     * Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
-     * 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?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * 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;
 };
 export declare const PButtonPure: 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"> & {
     /**
-     * Displays the button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @default false
      */
     active?: boolean;
     /**
-     * Aligns the label.
+     * Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * 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.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * 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 icon 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;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * Stretches the area between icon and label to max available space.
+     * Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
-     * 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?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * 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;
 } & {

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;