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

package/esm/lib/components/icon.wrapper.d.ts

@@ -2,51 +2,51 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, BreakpointCustomizable, IconSize } from '../types';
 export type PIconProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the icon — use `aria-label` to make the icon meaningful to screen readers when it conveys information.
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations.
+     * Sets the fill color of the icon using PDS color tokens.
      * @default 'primary'
      */
     color?: IconColor;
     /**
-     * Specifies which icon to use.
+     * Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`).
      * @default 'arrow-right'
      */
     name?: IconName;
     /**
-     * Defines the size of the icon, aligned with the typographic scale used by components such as p-spinner, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * Sets the icon size using the PDS typographic scale. Use `inherit` to derive size from the parent element. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<IconSize>;
     /**
-     * Specifies a whole icon path which can be used for custom icons.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon library.
      */
     source?: string;
 };
 export declare const PIcon: 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 icon — use `aria-label` to make the icon meaningful to screen readers when it conveys information.
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations.
+     * Sets the fill color of the icon using PDS color tokens.
      * @default 'primary'
      */
     color?: IconColor;
     /**
-     * Specifies which icon to use.
+     * Selects an icon from the built-in PDS icon library by name (e.g. `arrow-right`, `close`).
      * @default 'arrow-right'
      */
     name?: IconName;
     /**
-     * Defines the size of the icon, aligned with the typographic scale used by components such as p-spinner, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * Sets the icon size using the PDS typographic scale. Use `inherit` to derive size from the parent element. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<IconSize>;
     /**
-     * Specifies a whole icon path which can be used for custom icons.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon library.
      */
     source?: string;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -2,98 +2,98 @@ import type { BaseProps } from '../../BaseProps';
 import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState } from '../types';
 export type PInlineNotificationProps = BaseProps & {
     /**
-     * Action icon of the inline-notification.
+     * Sets the icon displayed inside the action button using a PDS icon name.
      * @default 'arrow-right'
      */
     actionIcon?: InlineNotificationActionIcon;
     /**
-     * Action label of the inline-notification.
+     * Sets the label text of the optional action button inside the notification.
      */
     actionLabel?: string;
     /**
-     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the action button and shows a spinner to indicate an ongoing operation.
      * @default false
      */
     actionLoading?: boolean;
     /**
-     * Description of the inline-notification.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * If false, the inline-notification will not have a dismiss button.
+     * Shows a dismiss button so the user can manually close the notification.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the inline-notification.
+     * Sets the heading text displayed at the top of the inline notification.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure.
      * @default 'h5'
      */
     headingTag?: InlineNotificationHeadingTag;
     /**
-     * Emitted when the action button is clicked.
+     * Emitted when the user clicks the action button.
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the user clicks the dismiss button.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * State of the inline-notification.
+     * Sets the visual state — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: InlineNotificationState;
 };
 export declare const PInlineNotification: 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"> & {
     /**
-     * Action icon of the inline-notification.
+     * Sets the icon displayed inside the action button using a PDS icon name.
      * @default 'arrow-right'
      */
     actionIcon?: InlineNotificationActionIcon;
     /**
-     * Action label of the inline-notification.
+     * Sets the label text of the optional action button inside the notification.
      */
     actionLabel?: string;
     /**
-     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the action button and shows a spinner to indicate an ongoing operation.
      * @default false
      */
     actionLoading?: boolean;
     /**
-     * Description of the inline-notification.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * If false, the inline-notification will not have a dismiss button.
+     * Shows a dismiss button so the user can manually close the notification.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the inline-notification.
+     * Sets the heading text displayed at the top of the inline notification.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure.
      * @default 'h5'
      */
     headingTag?: InlineNotificationHeadingTag;
     /**
-     * Emitted when the action button is clicked.
+     * Emitted when the user clicks the action button.
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the user clicks the dismiss button.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * State of the inline-notification.
+     * Sets the visual state — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: InlineNotificationState;

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

@@ -2,188 +2,188 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState } from '../types';
 export type PInputDateProps = BaseProps & {
     /**
-     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='bday' for a birthday).
+     * Provides the browser with a date autofill hint (e.g. `autocomplete='bday'` for a birthday field).
      */
     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 date 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., max='2024-12-31').
+     * Sets the latest selectable date in YYYY-MM-DD format. Dates 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., min='2023-01-01').
+     * Sets the earliest selectable date in YYYY-MM-DD format. Dates 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 date input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputDateBlurEventDetail>) => void;
     /**
-     * Emitted when the date input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputDateChangeEventDetail>) => 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 date picker.
      */
     onInput?: (event: CustomEvent<InputDateInputEventDetail>) => 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 date 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 date 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?: InputDateState;
     /**
-     * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
+     * Sets the stepping interval in days. The selected date must align with the `min` date by a multiple of this value.
      * @default 1
      */
     step?: number;
     /**
-     * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
+     * Sets the current date value in YYYY-MM-DD format (e.g. `2025-07-02`).
      * @default ''
      */
     value?: string | null;
 };
 export declare const PInputDate: 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='bday' for a birthday).
+     * Provides the browser with a date autofill hint (e.g. `autocomplete='bday'` for a birthday field).
      */
     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 date 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., max='2024-12-31').
+     * Sets the latest selectable date in YYYY-MM-DD format. Dates 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 date that can be selected. The value must be a date string in YYYY-MM-DD format (e.g., min='2023-01-01').
+     * Sets the earliest selectable date in YYYY-MM-DD format. Dates 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 date input has lost focus.
+     * Emitted when the input loses focus, regardless of whether the value changed.
      */
     onBlur?: (event: CustomEvent<InputDateBlurEventDetail>) => void;
     /**
-     * Emitted when the date input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed.
      */
     onChange?: (event: CustomEvent<InputDateChangeEventDetail>) => 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 date picker.
      */
     onInput?: (event: CustomEvent<InputDateInputEventDetail>) => 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 date 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 date 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?: InputDateState;
     /**
-     * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
+     * Sets the stepping interval in days. The selected date must align with the `min` date by a multiple of this value.
      * @default 1
      */
     step?: number;
     /**
-     * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
+     * Sets the current date value in YYYY-MM-DD format (e.g. `2025-07-02`).
      * @default ''
      */
     value?: string | null;