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

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

@@ -1,13 +1,13 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTabsItemProps = BaseProps & {
     /**
-     * Defines the label used in tabs.
+     * Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content.
      */
     label: string;
 };
 export declare const PTabsItem: 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 label used in tabs.
+     * Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content.
      */
     label: string;
 } & {

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

@@ -2,25 +2,25 @@ import type { BaseProps } from '../../BaseProps';
 import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
-     * Defines which tab is shown as selected (zero-based numbering).
+     * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user switches to a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsSize>;
@@ -32,25 +32,25 @@ export type PTabsProps = BaseProps & {
 };
 export declare const PTabs: 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 tab is shown as selected (zero-based numbering).
+     * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user switches to a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsSize>;

package/ssr/esm/lib/components/tag-dismissible.wrapper.d.ts

@@ -2,31 +2,31 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
 export type PTagDismissibleProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * Displays the dismissible tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed inside the tag alongside the dismiss button.
      */
     label?: string;
 };
 export declare const PTagDismissible: 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 dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * Displays the dismissible tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed inside the tag alongside the dismiss button.
      */
     label?: string;
 } & {

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

@@ -2,42 +2,42 @@ import type { BaseProps } from '../../BaseProps';
 import type { TagIcon, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
     /**
-     * Displays the tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * The icon shown.
+     * Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon.
      * @default 'none'
      */
     icon?: TagIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed.
      */
     iconSource?: string;
     /**
-     * Background color variations.
+     * Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`).
      * @default 'secondary'
      */
     variant?: TagVariant;
 };
 export declare const PTag: 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 tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * The icon shown.
+     * Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon.
      * @default 'none'
      */
     icon?: TagIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed.
      */
     iconSource?: string;
     /**
-     * Background color variations.
+     * Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`).
      * @default 'secondary'
      */
     variant?: TagVariant;

package/ssr/esm/lib/components/text-list.wrapper.d.ts

@@ -2,14 +2,14 @@ import type { BaseProps } from '../../BaseProps';
 import type { TextListType } from '../types';
 export type PTextListProps = BaseProps & {
     /**
-     * The list style type.
+     * Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`).
      * @default 'unordered'
      */
     type?: TextListType;
 };
 export declare const PTextList: 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"> & {
     /**
-     * The list style type.
+     * Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`).
      * @default 'unordered'
      */
     type?: TextListType;

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

@@ -2,226 +2,226 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap } from '../types';
 export type PTextareaProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
+     * Provides the browser with a hint to enable text autofill suggestions for the textarea (e.g. `autocomplete='on'`).
      */
     autoComplete?: string;
     /**
-     * Displays the textarea in compact mode.
+     * Reduces the textarea's initial height and padding for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Show or hide the character counter.
+     * Shows a live character counter below the textarea indicating how many characters the user has typed relative to `maxLength`.
      * @default false
      */
     counter?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the textarea.
+     * Sets a supplementary description displayed below the label to give users additional guidance about the textarea.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the textarea. The value will not be submitted with the form.
+     * Prevents user interaction with the textarea and excludes its value from form submissions.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the textarea belongs to (useful if the textarea is not a direct descendant of the form).
+     * Associates the textarea with a form element by its ID when the textarea is not a direct descendant of that form.
      */
     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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the textarea to identify its purpose.
      * @default ''
      */
     label?: string;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the textarea.
+     * Sets the maximum number of characters the user is allowed to enter into the textarea.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the textarea when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the textarea's value to be considered valid.
+     * Sets the minimum number of characters required for the textarea's value to pass constraint validation.
      */
     minLength?: number;
     /**
-     * The name of the textarea, used when submitting the form data.
+     * Sets the name of the textarea submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the textarea has lost focus.
+     * Emitted when the textarea element loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<TextareaBlurEventDetail>) => void;
     /**
-     * Emitted when the textarea loses focus after its value was changed.
+     * Emitted when the textarea loses focus after its value was changed, equivalent to the native `change` event.
      */
     onChange?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every keystroke or value change as a direct result of user interaction, equivalent to the native `input` event.
      */
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
+     * Sets placeholder text displayed inside the textarea when it is empty to hint at the expected content format.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
+     * Makes the textarea read-only so users cannot modify the value, while still including it in form submissions.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
+     * Marks the textarea as required so the form cannot be submitted while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Controls whether the textarea is resizable and in which direction.
+     * Controls whether and in which direction the user can resize the textarea (`horizontal`, `vertical`, `both`, or `none`).
      * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
-     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
+     * Sets the initial visible height of the textarea in lines of text. Has no effect when the `--p-textarea-field-sizing` CSS variable is set to `content`.
      * @default 7
      */
     rows?: number;
     /**
-     * Specifies whether the textarea should have its spelling and grammar checked
+     * Controls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content.
      */
     spellCheck?: boolean;
     /**
-     * Indicates the validation or overall status of the textarea component.
+     * Sets the validation state of the textarea, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: TextareaState;
     /**
-     * The textarea value.
+     * Sets the current multi-line text value of the textarea and reflects any changes made by the user.
      * @default ''
      */
     value?: string | null;
     /**
-     * Handles wrapping behavior of elements.
+     * Controls how the submitted text wraps in the form data: `soft` wraps only visually, `hard` inserts line breaks at the textarea width.
      * @default 'soft'
      */
     wrap?: TextareaWrap;
 };
 export declare const PTextarea: 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"> & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
+     * Provides the browser with a hint to enable text autofill suggestions for the textarea (e.g. `autocomplete='on'`).
      */
     autoComplete?: string;
     /**
-     * Displays the textarea in compact mode.
+     * Reduces the textarea's initial height and padding for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Show or hide the character counter.
+     * Shows a live character counter below the textarea indicating how many characters the user has typed relative to `maxLength`.
      * @default false
      */
     counter?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the textarea.
+     * Sets a supplementary description displayed below the label to give users additional guidance about the textarea.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the textarea. The value will not be submitted with the form.
+     * Prevents user interaction with the textarea and excludes its value from form submissions.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the textarea belongs to (useful if the textarea is not a direct descendant of the form).
+     * Associates the textarea with a form element by its ID when the textarea is not a direct descendant of that form.
      */
     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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the textarea to identify its purpose.
      * @default ''
      */
     label?: string;
     /**
-     * A non-negative integer specifying the maximum number of characters the user can enter into the textarea.
+     * Sets the maximum number of characters the user is allowed to enter into the textarea.
      */
     maxLength?: number;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the textarea when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * A non-negative integer specifying the minimum number of characters required for the textarea's value to be considered valid.
+     * Sets the minimum number of characters required for the textarea's value to pass constraint validation.
      */
     minLength?: number;
     /**
-     * The name of the textarea, used when submitting the form data.
+     * Sets the name of the textarea submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the textarea has lost focus.
+     * Emitted when the textarea element loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<TextareaBlurEventDetail>) => void;
     /**
-     * Emitted when the textarea loses focus after its value was changed.
+     * Emitted when the textarea loses focus after its value was changed, equivalent to the native `change` event.
      */
     onChange?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every keystroke or value change as a direct result of user interaction, equivalent to the native `input` event.
      */
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
-     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
+     * Sets placeholder text displayed inside the textarea when it is empty to hint at the expected content format.
      * @default ''
      */
     placeholder?: string;
     /**
-     * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
+     * Makes the textarea read-only so users cannot modify the value, while still including it in form submissions.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
+     * Marks the textarea as required so the form cannot be submitted while this field is empty.
      * @default false
      */
     required?: boolean;
     /**
-     * Controls whether the textarea is resizable and in which direction.
+     * Controls whether and in which direction the user can resize the textarea (`horizontal`, `vertical`, `both`, or `none`).
      * @default 'vertical'
      */
     resize?: TextareaResize;
     /**
-     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
+     * Sets the initial visible height of the textarea in lines of text. Has no effect when the `--p-textarea-field-sizing` CSS variable is set to `content`.
      * @default 7
      */
     rows?: number;
     /**
-     * Specifies whether the textarea should have its spelling and grammar checked
+     * Controls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content.
      */
     spellCheck?: boolean;
     /**
-     * Indicates the validation or overall status of the textarea component.
+     * Sets the validation state of the textarea, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: TextareaState;
     /**
-     * The textarea value.
+     * Sets the current multi-line text value of the textarea and reflects any changes made by the user.
      * @default ''
      */
     value?: string | null;
     /**
-     * Handles wrapping behavior of elements.
+     * Controls how the submitted text wraps in the form data: `soft` wraps only visually, `hard` inserts line breaks at the textarea width.
      * @default 'soft'
      */
     wrap?: TextareaWrap;

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

@@ -2,40 +2,40 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget } from '../types';
 export type PWordmarkProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the anchor element to improve accessibility when the wordmark is used as a link.
      */
     aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, wraps the wordmark in an anchor element that navigates to the given URL on click.
      */
     href?: string;
     /**
-     * Controls the size of the wordmark.
+     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`).
      * @default 'small'
      */
     size?: WordmarkSize;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: WordmarkTarget;
 };
 export declare const PWordmark: 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 wordmark is used as a link.
      */
     aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, wraps the wordmark in an anchor element that navigates to the given URL on click.
      */
     href?: string;
     /**
-     * Controls the size of the wordmark.
+     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`).
      * @default 'small'
      */
     size?: WordmarkSize;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: WordmarkTarget;

package/ssr/esm/lib/dsr-components/popover.d.ts

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the popover content." }
- * @slot {"name": "button", "description": "Slot for custom button." }
+ * @slot {"name": "button", "description": "Renders a custom trigger button. When used, the default info button is replaced." }
  */
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;