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

package/esm/lib/components/link-pure.wrapper.d.ts

@@ -2,134 +2,134 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureColor, LinkPureIcon, LinkPureSize, LinkPureTarget } from '../types';
 export type PLinkPureProps = 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;
     /**
-     * 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<LinkPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the link element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the link's icon and label text.
      * @default 'primary'
      */
     color?: LinkPureColor;
     /**
-     * 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 label.
      * @default 'arrow-right'
      */
     icon?: LinkPureIcon;
     /**
-     * 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;
     /**
-     * Size of the link.
+     * Sets the font size of the link label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<LinkPureSize>;
     /**
-     * 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 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?: LinkPureTarget;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce its link-like appearance.
      * @default false
      */
     underline?: boolean;
 };
 export declare const PLinkPure: 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;
     /**
-     * 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<LinkPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the link element to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the link's icon and label text.
      * @default 'primary'
      */
     color?: LinkPureColor;
     /**
-     * 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 label.
      * @default 'arrow-right'
      */
     icon?: LinkPureIcon;
     /**
-     * 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;
     /**
-     * Size of the link.
+     * Sets the font size of the link label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<LinkPureSize>;
     /**
-     * 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 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?: LinkPureTarget;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce its link-like appearance.
      * @default false
      */
     underline?: boolean;

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

@@ -2,100 +2,100 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget } from '../types';
 export type PLinkTileProductProps = BaseProps & {
     /**
-     * Aspect ratio of the link-tile-product.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '3/4'
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description.
+     * Sets an optional short description providing additional product details below the price.
      */
     description?: string;
     /**
-     * Product heading.
+     * Sets the product name displayed prominently at the top of the tile.
      */
     heading: string;
     /**
-     * href of the `<a>`.
+     * Sets the URL the tile navigates to when clicked. Alternatively, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Shows a like button.
+     * Shows a like/bookmark button so users can save the product.
      * @default true
      */
     likeButton?: boolean;
     /**
-     * Indicates whether the product is liked.
+     * Reflects whether the product is currently liked — controls the filled state of the like button.
      * @default false
      */
     liked?: boolean;
     /**
-     * Emitted when the like button is clicked.
+     * Emitted when the user clicks the like button, with the new liked state in the event detail.
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product retail price (with or without discount).
+     * Sets the current retail price of the product, displayed with or without a discount.
      */
     price: string;
     /**
-     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     * Sets the original recommended retail price shown with a strikethrough to indicate a discount. Requires `price` to be set.
      */
     priceOriginal?: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`).
      */
     rel?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: LinkTileProductTarget;
 };
 export declare const PLinkTileProduct: 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"> & {
     /**
-     * Aspect ratio of the link-tile-product.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '3/4'
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description.
+     * Sets an optional short description providing additional product details below the price.
      */
     description?: string;
     /**
-     * Product heading.
+     * Sets the product name displayed prominently at the top of the tile.
      */
     heading: string;
     /**
-     * href of the `<a>`.
+     * Sets the URL the tile navigates to when clicked. Alternatively, provide a slotted anchor element.
      */
     href?: string;
     /**
-     * Shows a like button.
+     * Shows a like/bookmark button so users can save the product.
      * @default true
      */
     likeButton?: boolean;
     /**
-     * Indicates whether the product is liked.
+     * Reflects whether the product is currently liked — controls the filled state of the like button.
      * @default false
      */
     liked?: boolean;
     /**
-     * Emitted when the like button is clicked.
+     * Emitted when the user clicks the like button, with the new liked state in the event detail.
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product retail price (with or without discount).
+     * Sets the current retail price of the product, displayed with or without a discount.
      */
     price: string;
     /**
-     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     * Sets the original recommended retail price shown with a strikethrough to indicate a discount. Requires `price` to be set.
      */
     priceOriginal?: string;
     /**
-     * Sets the `rel` attribute on the link.
+     * Sets the `rel` attribute on the link (e.g. `noopener`).
      */
     rel?: string;
     /**
-     * Specifies where to open the linked document.
+     * Specifies where to open the linked URL (e.g. `_self`, `_blank`).
      * @default '_self'
      */
     target?: LinkTileProductTarget;

package/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/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;