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

package/esm/lib/components/input-week.wrapper.d.ts

@@ -2,188 +2,188 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState } from '../types';
 export type PInputWeekProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     * Provides the browser with a week/year autofill hint.
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing week selection. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly 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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     * Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.
      */
     max?: string;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     * Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.
      */
     min?: string;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the week input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
     /**
-     * Emitted when the week input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user interacts with the week picker.
      */
     onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while no week is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputWeekState;
     /**
-     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 week.
+     * Sets the stepping interval in weeks.
      * @default 1
      */
     step?: number;
     /**
-     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27').
+     * Sets the current ISO week value in YYYY-Www format (e.g. `2025-W27`).
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputWeek: 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.
+     * Provides the browser with a week/year autofill hint.
      */
     autoComplete?: string;
     /**
-     * Displays the input field in compact mode.
+     * Reduces the input height and padding for a more compact layout.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the input.
+     * Sets a supplementary description displayed below the label to provide additional context.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the input field. The value will not be submitted with the form.
+     * Disables the field, preventing week selection. The value is not submitted with the form.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     * Associates the field with a form element by its ID when the field is not nested directly 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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the input field.
      * @default ''
      */
     label?: string;
     /**
-     * @experimental Shows a loading indicator.
+     * @experimental Disables the field and displays a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     * Sets the latest selectable week in YYYY-Www format. Weeks after this are disabled in the picker.
      */
     max?: string;
     /**
-     * Dynamic feedback text for validation or status.
+     * Sets the validation feedback message displayed below the field when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     * Sets the earliest selectable week in YYYY-Www format. Weeks before this are disabled in the picker.
      */
     min?: string;
     /**
-     * The name of the input field, used when submitting the form data.
+     * Sets the name submitted with the form data to identify this field's value on the server.
      */
     name: string;
     /**
-     * Emitted when the week input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
     /**
-     * Emitted when the week input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted on every value change as the user interacts with the week picker.
      */
     onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
     /**
-     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     * Makes the field read-only — the value is displayed but cannot be changed. The value is still submitted with the form.
      * @default false
      */
     readOnly?: boolean;
     /**
-     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     * Marks the field as required — form submission is blocked while no week is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * Indicates the validation or overall status of the input component.
+     * Sets the validation state, controlling the visual appearance and style of the feedback message (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: InputWeekState;
     /**
-     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 week.
+     * Sets the stepping interval in weeks.
      * @default 1
      */
     step?: number;
     /**
-     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27').
+     * Sets the current ISO week value in YYYY-Www format (e.g. `2025-W27`).
      * @default ''
      */
     value?: string | null;

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;