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

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

@@ -2,122 +2,122 @@ import type { BaseProps } from '../../BaseProps';
 import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = BaseProps & {
     /**
-     * Alignment of link and description.
+     * Controls the vertical placement of the description and link — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: LinkTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's anchor element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
     /**
-     * Aspect ratio of the link-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the link-tile as compact version with description and link icon only.
+     * Renders only the icon link 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;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file.
+     * Sets the native `download` attribute to trigger a file download.
      */
     download?: string;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * href of the `<a>`.
+     * Sets the URL the tile's anchor element navigates to when clicked.
      */
     href: string;
     /**
-     * Label of the <a />.
+     * Sets the accessible label text of the link rendered inside the tile.
      */
     label: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`).
      */
     rel?: string;
     /**
-     * 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<LinkTileSize>;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: LinkTileTarget;
     /**
-     * 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<LinkTileWeight>;
 };
 export declare const PLinkTile: 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 link and description.
+     * Controls the vertical placement of the description and link — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: LinkTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's anchor element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
     /**
-     * Aspect ratio of the link-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the link-tile as compact version with description and link icon only.
+     * Renders only the icon link 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;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file.
+     * Sets the native `download` attribute to trigger a file download.
      */
     download?: string;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * href of the `<a>`.
+     * Sets the URL the tile's anchor element navigates to when clicked.
      */
     href: string;
     /**
-     * Label of the <a />.
+     * Sets the accessible label text of the link rendered inside the tile.
      */
     label: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`).
      */
     rel?: string;
     /**
-     * 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<LinkTileSize>;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: LinkTileTarget;
     /**
-     * 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<LinkTileWeight>;

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

@@ -2,94 +2,94 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, LinkVariant } from '../types';
 export type PLinkProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the link element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
-     * Displays the link in compact mode.
+     * Reduces the link's padding and height for denser layouts. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file.
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: 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>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed next to the link label. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: LinkIcon;
     /**
-     * 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;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: 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?: LinkTarget;
     /**
-     * The style variant of the link.
+     * Sets the visual style variant of the link (e.g. `primary`, `secondary`, `tertiary`).
      * @default 'primary'
      */
     variant?: LinkVariant;
 };
 export declare const PLink: 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 link element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
-     * Displays the link in compact mode.
+     * Reduces the link's padding and height for denser layouts. Supports responsive breakpoint values.
      * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
-     * Sets the native `download` attribute when the target URL points to a downloadable file.
+     * Sets the native `download` attribute to trigger a file download. Only applies when `href` is set.
      */
     download?: 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>;
     /**
-     * When `href` is provided, the component renders as an `<a>` element.
+     * When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed next to the link label. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: LinkIcon;
     /**
-     * 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;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set.
      */
     rel?: 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?: LinkTarget;
     /**
-     * The style variant of the link.
+     * Sets the visual style variant of the link (e.g. `primary`, `secondary`, `tertiary`).
      * @default 'primary'
      */
     variant?: LinkVariant;

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

@@ -2,96 +2,96 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, ModalBackground, BreakpointCustomizable, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail } from '../types';
 export type PModalProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the dialog element for improved accessibility when no visible heading is present.
      */
     aria?: SelectedAriaAttributes<ModalAriaAttribute>;
     /**
-     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     * Sets the backdrop style. Use `blur` when the modal is opened by user interaction; use `shading` when opened automatically (e.g. Cookie Consent).
      * @default 'blur'
      */
     backdrop?: ModalBackdrop;
     /**
-     * Defines the background color
+     * Sets the background color of the modal panel (`canvas` or `surface`).
      * @default 'canvas'
      */
     background?: ModalBackground;
     /**
-     * If true, the modal will not be closable via backdrop click.
+     * When enabled, clicking the backdrop will not close the modal.
      * @default false
      */
     disableBackdropClick?: boolean;
     /**
-     * If false, the modal will not have a dismiss button.
+     * Shows a dismiss button in the modal header so the user can manually close it.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     * Expands the modal to the full viewport size, intended for mobile use cases. Supports responsive breakpoint values.
      * @default false
      */
     fullscreen?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the modal is closed and the transition is finished.
+     * Emitted after the modal's close transition completes and the dialog is fully hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<ModalMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the modal is opened and the transition is finished.
+     * Emitted after the modal's open transition completes and the dialog is fully visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<ModalMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the modal is open.
+     * Controls whether the modal dialog is visible.
      * @default false
      */
     open: boolean;
 };
 export declare const PModal: 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 dialog element for improved accessibility when no visible heading is present.
      */
     aria?: SelectedAriaAttributes<ModalAriaAttribute>;
     /**
-     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     * Sets the backdrop style. Use `blur` when the modal is opened by user interaction; use `shading` when opened automatically (e.g. Cookie Consent).
      * @default 'blur'
      */
     backdrop?: ModalBackdrop;
     /**
-     * Defines the background color
+     * Sets the background color of the modal panel (`canvas` or `surface`).
      * @default 'canvas'
      */
     background?: ModalBackground;
     /**
-     * If true, the modal will not be closable via backdrop click.
+     * When enabled, clicking the backdrop will not close the modal.
      * @default false
      */
     disableBackdropClick?: boolean;
     /**
-     * If false, the modal will not have a dismiss button.
+     * Shows a dismiss button in the modal header so the user can manually close it.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     * Expands the modal to the full viewport size, intended for mobile use cases. Supports responsive breakpoint values.
      * @default false
      */
     fullscreen?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the modal is closed and the transition is finished.
+     * Emitted after the modal's close transition completes and the dialog is fully hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<ModalMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the modal is opened and the transition is finished.
+     * Emitted after the modal's open transition completes and the dialog is fully visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<ModalMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the modal is open.
+     * Controls whether the modal dialog is visible.
      * @default false
      */
     open: boolean;

package/ssr/esm/lib/components/model-signature.wrapper.d.ts

@@ -2,64 +2,64 @@ import type { BaseProps } from '../../BaseProps';
 import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize } from '../types';
 export type PModelSignatureProps = BaseProps & {
     /**
-     * Adapts the color of the component.
+     * Sets the fill color of the signature using PDS color tokens.
      * @default 'primary'
      */
     color?: ModelSignatureColor;
     /**
-     * Sets the browser's fetch priority hint for the model signature asset.
+     * Sets the browser's fetch priority hint for the signature asset (`auto`, `high`, `low`).
      * @default 'auto'
      */
     fetchPriority?: ModelSignatureFetchPriority;
     /**
-     * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
+     * Defers loading the signature until it enters the viewport to improve initial page performance.
      * @default false
      */
     lazy?: boolean;
     /**
-     * Adapts the model of the component.
+     * Selects the Porsche model whose typographic signature SVG is displayed.
      * @default '911'
      */
     model?: ModelSignatureModel;
     /**
-     * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
+     * When enabled, adds invisible padding so all model signatures visually align to a consistent baseline.
      * @default true
      */
     safeZone?: boolean;
     /**
-     * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
+     * Sets the display size of the signature using predefined PDS sizes. Use `inherit` with a CSS `width` or `height` on the host for custom sizing.
      * @default 'small'
      */
     size?: ModelSignatureSize;
 };
 export declare const PModelSignature: 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"> & {
     /**
-     * Adapts the color of the component.
+     * Sets the fill color of the signature using PDS color tokens.
      * @default 'primary'
      */
     color?: ModelSignatureColor;
     /**
-     * Sets the browser's fetch priority hint for the model signature asset.
+     * Sets the browser's fetch priority hint for the signature asset (`auto`, `high`, `low`).
      * @default 'auto'
      */
     fetchPriority?: ModelSignatureFetchPriority;
     /**
-     * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
+     * Defers loading the signature until it enters the viewport to improve initial page performance.
      * @default false
      */
     lazy?: boolean;
     /**
-     * Adapts the model of the component.
+     * Selects the Porsche model whose typographic signature SVG is displayed.
      * @default '911'
      */
     model?: ModelSignatureModel;
     /**
-     * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
+     * When enabled, adds invisible padding so all model signatures visually align to a consistent baseline.
      * @default true
      */
     safeZone?: boolean;
     /**
-     * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
+     * Sets the display size of the signature using predefined PDS sizes. Use `inherit` with a CSS `width` or `height` on the host for custom sizing.
      * @default 'small'
      */
     size?: ModelSignatureSize;

package/ssr/esm/lib/components/multi-select-option.wrapper.d.ts

@@ -1,23 +1,23 @@
 import type { BaseProps } from '../../BaseProps';
 export type PMultiSelectOptionProps = BaseProps & {
     /**
-     * Disables the option.
+     * Disables the option, preventing it from being selected.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The option value.
+     * Sets the value submitted with the form data when this option is selected in the parent multi-select.
      */
     value: string | number;
 };
 export declare const PMultiSelectOption: 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"> & {
     /**
-     * Disables the option.
+     * Disables the option, preventing it from being selected.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The option value.
+     * Sets the value submitted with the form data when this option is selected in the parent multi-select.
      */
     value: string | number;
 } & {