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

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

@@ -2,148 +2,148 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState } from '../types';
 export type PCheckboxProps = BaseProps & {
     /**
-     * Reflects the checkbox current checked state and allows setting the initial checked state.
+     * Reflects the checkbox's current checked state and allows setting the initial checked value on load.
      * @default false
      */
     checked?: boolean;
     /**
-     * Displays the checkbox in compact mode.
+     * Reduces the checkbox size and spacing for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Marks the checkbox as disabled.
+     * Disables the checkbox, preventing all interaction. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the checkbox should be associated with.
+     * Associates the checkbox with a form element by its ID when not directly nested inside 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>;
     /**
-     * Marks the checkbox as indeterminate.
+     * Puts the checkbox into an indeterminate state, indicating that a group of child items is only partially selected.
      * @default false
      */
     indeterminate?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed next to the checkbox.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Disables the checkbox and shows a loading indicator.
+     * @experimental Disables the checkbox and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the checkbox when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * The name of the checkbox.
+     * Sets the name submitted with the form data to identify this checkbox's value on the server.
      * @default ''
      */
     name?: string;
     /**
-     * Emitted when the checkbox has lost focus.
+     * Emitted when the checkbox loses focus.
      */
     onBlur?: (event: CustomEvent<CheckboxBlurEventDetail>) => void;
     /**
-     * Emitted when checkbox checked property is changed.
+     * Emitted when the user changes the checked state of the checkbox.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
-     * Marks the checkbox as required.
+     * Marks the checkbox as required — form submission is blocked unless the checkbox is checked.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: CheckboxState;
     /**
-     * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     * Sets the value submitted with the form data when the checkbox is checked. Unchecked checkboxes are excluded from form submissions.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Reflects the checkbox current checked state and allows setting the initial checked state.
+     * Reflects the checkbox's current checked state and allows setting the initial checked value on load.
      * @default false
      */
     checked?: boolean;
     /**
-     * Displays the checkbox in compact mode.
+     * Reduces the checkbox size and spacing for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Marks the checkbox as disabled.
+     * Disables the checkbox, preventing all interaction. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the checkbox should be associated with.
+     * Associates the checkbox with a form element by its ID when not directly nested inside 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>;
     /**
-     * Marks the checkbox as indeterminate.
+     * Puts the checkbox into an indeterminate state, indicating that a group of child items is only partially selected.
      * @default false
      */
     indeterminate?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed next to the checkbox.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Disables the checkbox and shows a loading indicator.
+     * @experimental Disables the checkbox and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the checkbox when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * The name of the checkbox.
+     * Sets the name submitted with the form data to identify this checkbox's value on the server.
      * @default ''
      */
     name?: string;
     /**
-     * Emitted when the checkbox has lost focus.
+     * Emitted when the checkbox loses focus.
      */
     onBlur?: (event: CustomEvent<CheckboxBlurEventDetail>) => void;
     /**
-     * Emitted when checkbox checked property is changed.
+     * Emitted when the user changes the checked state of the checkbox.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
-     * Marks the checkbox as required.
+     * Marks the checkbox as required — form submission is blocked unless the checkbox is checked.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: CheckboxState;
     /**
-     * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     * Sets the value submitted with the form data when the checkbox is checked. Unchecked checkboxes are excluded from form submissions.
      * @default 'on'
      */
     value?: string;

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

@@ -2,30 +2,30 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
 export type PCrestProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the anchor element to improve accessibility when the crest is used as a link.
      */
     aria?: SelectedAriaAttributes<CrestAriaAttribute>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, renders the crest as an anchor element navigating to this URL when clicked.
      */
     href?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @default '_self'
      */
     target?: CrestTarget;
 };
 export declare const PCrest: 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 anchor element to improve accessibility when the crest is used as a link.
      */
     aria?: SelectedAriaAttributes<CrestAriaAttribute>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, renders the crest as an anchor element navigating to this URL when clicked.
      */
     href?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @default '_self'
      */
     target?: CrestTarget;

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

@@ -2,54 +2,54 @@ import type { BaseProps } from '../../BaseProps';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag } from '../types';
 export type PDisplayProps = BaseProps & {
     /**
-     * Text alignment of the component.
+     * Sets the horizontal text alignment (`start`, `center`, `end`, or `inherit`).
      * @default 'start'
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations.
+     * Sets the text color using PDS color tokens.
      * @default 'primary'
      */
     color?: DisplayColor;
     /**
-     * Adds an ellipsis to a single line of text if it overflows.
+     * Truncates the text with an ellipsis when it overflows the container on a single line.
      * @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.
+     * Sets the visual text size. Supports responsive breakpoint values.
      * @default 'large'
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the HTML heading tag (h1–h6) for correct document outline placement. When omitted, the tag is inferred from `size`.
      */
     tag?: DisplayTag;
 };
 /** @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead. */
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Text alignment of the component.
+     * Sets the horizontal text alignment (`start`, `center`, `end`, or `inherit`).
      * @default 'start'
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations.
+     * Sets the text color using PDS color tokens.
      * @default 'primary'
      */
     color?: DisplayColor;
     /**
-     * Adds an ellipsis to a single line of text if it overflows.
+     * Truncates the text with an ellipsis when it overflows the container on a single line.
      * @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.
+     * Sets the visual text size. Supports responsive breakpoint values.
      * @default 'large'
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the HTML heading tag (h1–h6) for correct document outline placement. When omitted, the tag is inferred from `size`.
      */
     tag?: DisplayTag;
 } & {

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

@@ -2,24 +2,24 @@ import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection } from '../types';
 export type PDividerProps = BaseProps & {
     /**
-     * Defines color.
+     * Sets the color of the divider line using PDS contrast tokens.
      * @default 'contrast-lower'
      */
     color?: DividerColor;
     /**
-     * Defines direction.
+     * Sets the orientation of the divider to `horizontal` or `vertical`. Supports responsive breakpoint values.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines color.
+     * Sets the color of the divider line using PDS contrast tokens.
      * @default 'contrast-lower'
      */
     color?: DividerColor;
     /**
-     * Defines direction.
+     * Sets the orientation of the divider to `horizontal` or `vertical`. Supports responsive breakpoint values.
      * @default 'horizontal'
      */
     direction?: BreakpointCustomizable<DividerDirection>;

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

@@ -6,11 +6,11 @@ export type PDrilldownItemProps = BaseProps & {
      */
     cascade?: boolean;
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the drilldown is set to this value.
+     * Sets the unique identifier matched against the drilldown's `activeIdentifier` to determine if this item is shown.
      */
     identifier: string;
     /**
-     * Renders back button, header section on mobile view and cascade button to reach a deeper level of the navigation structure.
+     * Sets the text used for the back button, sticky header, and cascade button that navigates into this navigation level.
      */
     label?: string;
     /**
@@ -31,11 +31,11 @@ export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<O
      */
     cascade?: boolean;
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the drilldown is set to this value.
+     * Sets the unique identifier matched against the drilldown's `activeIdentifier` to determine if this item is shown.
      */
     identifier: string;
     /**
-     * Renders back button, header section on mobile view and cascade button to reach a deeper level of the navigation structure.
+     * Sets the text used for the back button, sticky header, and cascade button that navigates into this navigation level.
      */
     label?: string;
     /**

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

@@ -2,56 +2,56 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, DrilldownLinkAriaAttribute, DrilldownLinkTarget } from '../types';
 export type PDrilldownLinkProps = BaseProps & {
     /**
-     * Displays the link in its active state.
+     * Visually marks the link as the currently active navigation item, e.g. the current page.
      * @default false
      */
     active?: boolean;
     /**
-     * Add ARIA attributes (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets ARIA attributes on the link for improved accessibility. Only applies when `href` is set.
      */
     aria?: SelectedAriaAttributes<DrilldownLinkAriaAttribute>;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: string;
     /**
-     * When `href` is provided, the component renders as an `<a>` element. Otherwise, provide a slotted anchor element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Sets the `rel` attribute on the link (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the `rel` attribute on the link element (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: string;
     /**
-     * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Displays the link in its active state.
+     * Visually marks the link as the currently active navigation item, e.g. the current page.
      * @default false
      */
     active?: boolean;
     /**
-     * Add ARIA attributes (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets ARIA attributes on the link for improved accessibility. Only applies when `href` is set.
      */
     aria?: SelectedAriaAttributes<DrilldownLinkAriaAttribute>;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: string;
     /**
-     * When `href` is provided, the component renders as an `<a>` element. Otherwise, provide a slotted anchor element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Sets the `rel` attribute on the link (only has effect when `href` is defined and no slotted anchor is used).
+     * Sets the `rel` attribute on the link element (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: string;
     /**
-     * Target attribute where the link should be opened (only has effect when `href` is defined and no slotted anchor is used).
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`). Only applies when `href` is set.
      * @default '_self'
      */
     target?: DrilldownLinkTarget;

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

@@ -2,46 +2,46 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail } from '../types';
 export type PDrilldownProps = BaseProps & {
     /**
-     * Defines which `p-drilldown-item` is shown as open.
+     * Sets which `p-drilldown-item` (by `identifier`) is currently expanded to show its sub-navigation level.
      */
     activeIdentifier?: string | undefined;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the drilldown dialog element for improved screen reader accessibility.
      */
     aria?: SelectedAriaAttributes<DrilldownAriaAttribute>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the drilldown via the close button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when `activeIdentifier` changes.
+     * Emitted when the active navigation level changes, with the new `activeIdentifier` in the event detail.
      */
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
-     * If `true`, the drilldown is shown as open.
+     * Controls whether the drilldown navigation panel is visible.
      * @default false
      */
     open?: boolean;
 };
 export declare const PDrilldown: 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 `p-drilldown-item` is shown as open.
+     * Sets which `p-drilldown-item` (by `identifier`) is currently expanded to show its sub-navigation level.
      */
     activeIdentifier?: string | undefined;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the drilldown dialog element for improved screen reader accessibility.
      */
     aria?: SelectedAriaAttributes<DrilldownAriaAttribute>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the drilldown via the close button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when `activeIdentifier` changes.
+     * Emitted when the active navigation level changes, with the new `activeIdentifier` in the event detail.
      */
     onUpdate?: (event: CustomEvent<DrilldownUpdateEventDetail>) => void;
     /**
-     * If `true`, the drilldown is shown as open.
+     * Controls whether the drilldown navigation panel is visible.
      * @default false
      */
     open?: boolean;

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

@@ -2,62 +2,62 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState } from '../types';
 export type PFieldsetProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Overrides the ARIA role on the fieldset — use `radiogroup` when grouping radio buttons.
      */
     aria?: SelectedAriaRole<"radiogroup">;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible legend text displayed above the grouped form controls.
      * @default ''
      */
     label?: string;
     /**
-     * Controls the size of the label text.
+     * Sets the font size of the fieldset label (`small`, `medium`, or `large`).
      * @default 'medium'
      */
     labelSize?: FieldsetLabelSize;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the fieldset when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Marks the Fieldset as required.
+     * Marks all controls within the fieldset as required and adds a required indicator to the label.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state of the fieldset, controlling the color and style of the feedback message.
      * @default 'none'
      */
     state?: FieldsetState;
 };
 export declare const PFieldset: 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.
+     * Overrides the ARIA role on the fieldset — use `radiogroup` when grouping radio buttons.
      */
     aria?: SelectedAriaRole<"radiogroup">;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible legend text displayed above the grouped form controls.
      * @default ''
      */
     label?: string;
     /**
-     * Controls the size of the label text.
+     * Sets the font size of the fieldset label (`small`, `medium`, or `large`).
      * @default 'medium'
      */
     labelSize?: FieldsetLabelSize;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the fieldset when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Marks the Fieldset as required.
+     * Marks all controls within the fieldset as required and adds a required indicator to the label.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state of the fieldset, controlling the color and style of the feedback message.
      * @default 'none'
      */
     state?: FieldsetState;