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

package/CHANGELOG.md

@@ -14,10 +14,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0] - 2026-06-22
+
 ## [4.2.0-rc.5] - 2026-06-12
 
 ### Added
 
+- `Angular`: Bumped peer dependency to support Angular new major version 22
+  ([#4505](https://github.com/porsche-design-system/porsche-design-system/pull/4505))
 - `Flyout`: Prop `fullscreen` to stretch the flyout to the full viewport width with squared corners, useful for smaller
   viewports ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))
 

package/emotion/package.json

@@ -2,12 +2,5 @@
   "main": "cjs/index.cjs",
   "module": "esm/index.mjs",
   "types": "esm/index.d.ts",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.mjs",
-      "default": "./cjs/index.cjs"
-    }
-  }
+  "sideEffects": false
 }

package/esm/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';
+import { useEffect, useContext, useLayoutEffect, useRef, useMemo } from 'react';
 import { PorscheDesignSystemContext } from './provider.mjs';
 import { getMergedClassName } from './utils.mjs';
 

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

@@ -2,17 +2,17 @@ import type { BaseProps } from '../../BaseProps';
 import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, BreakpointCustomizable, AccordionUpdateEventDetail, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
-     * Aligns the marker within the summary section.
+     * Positions the expand/collapse marker icon at the start or end of the summary section.
      * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
      * @default 'none'
      */
     background?: AccordionBackground;
     /**
-     * Displays the accordion in compact mode.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
      */
     compact?: boolean;
     /**
@@ -30,7 +30,7 @@ export type PAccordionProps = BaseProps & {
      */
     indent?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the accordion state changes.
+     * Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
@@ -49,17 +49,17 @@ export type PAccordionProps = BaseProps & {
 };
 export declare const PAccordion: 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"> & {
     /**
-     * Aligns the marker within the summary section.
+     * Positions the expand/collapse marker icon at the start or end of the summary section.
      * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
      * @default 'none'
      */
     background?: AccordionBackground;
     /**
-     * Displays the accordion in compact mode.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
      */
     compact?: boolean;
     /**
@@ -77,7 +77,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     indent?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the accordion state changes.
+     * Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**

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

@@ -2,82 +2,82 @@ import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BreakpointCustomizable, BannerPosition, BannerState } from '../types';
 export type PBannerProps = BaseProps & {
     /**
-     * Sets the description text of the banner.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * Shows a dismiss button allowing the banner to be closed.
+     * Shows a dismiss button so the user can manually close the banner.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Sets the heading text of the banner.
+     * Sets the heading text displayed at the top of the banner.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets the heading tag for proper semantic structure within the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure for the heading.
      * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the banner is requested to be dismissed.
+     * Emitted when the user closes the banner via the dismiss button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Controls whether the banner is open or closed.
+     * Controls whether the banner is visible. Set to `true` to show it and `false` to hide it.
      * @default false
      */
     open: boolean;
     /**
-     * Sets the position of the banner.
+     * Sets the position of the banner on screen — `top` or `bottom`. Supports responsive breakpoint values.
      * @default { base: 'bottom', s: 'top' }
      */
     position?: BreakpointCustomizable<BannerPosition>;
     /**
-     * Defines the visual state of the banner.
+     * Sets the visual state of the banner — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: BannerState;
 };
 export declare const PBanner: 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 the description text of the banner.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * Shows a dismiss button allowing the banner to be closed.
+     * Shows a dismiss button so the user can manually close the banner.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Sets the heading text of the banner.
+     * Sets the heading text displayed at the top of the banner.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets the heading tag for proper semantic structure within the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure for the heading.
      * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the banner is requested to be dismissed.
+     * Emitted when the user closes the banner via the dismiss button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Controls whether the banner is open or closed.
+     * Controls whether the banner is visible. Set to `true` to show it and `false` to hide it.
      * @default false
      */
     open: boolean;
     /**
-     * Sets the position of the banner.
+     * Sets the position of the banner on screen — `top` or `bottom`. Supports responsive breakpoint values.
      * @default { base: 'bottom', s: 'top' }
      */
     position?: BreakpointCustomizable<BannerPosition>;
     /**
-     * Defines the visual state of the banner.
+     * Sets the visual state of the banner — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: BannerState;

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

@@ -2,155 +2,155 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 export type PButtonPureProps = BaseProps & {
     /**
-     * Displays the button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @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<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of 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>;
     /**
-     * The icon shown.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * 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;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * 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 the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
 };
 export declare const PButtonPure: 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 button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @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<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of 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>;
     /**
-     * The icon shown.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * 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;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * 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 the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
 } & {

package/esm/lib/components/button-tile.wrapper.d.ts

@@ -2,136 +2,136 @@ import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = BaseProps & {
     /**
-     * Alignment of button and description.
+     * Controls the vertical placement of the description and button — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's action button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
-     * Aspect ratio of the button-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
-     * Displays the button-tile as compact version with description and button icon only.
+     * Renders only the icon button 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;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the tile, preventing button interaction.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed in the tile's action button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Label of the button.
+     * Sets the accessible label text of the action button rendered inside the tile.
      */
     label: string;
     /**
-     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the tile and shows a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * 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<ButtonTileSize>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonTileType;
     /**
-     * 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<ButtonTileWeight>;
 };
 export declare const PButtonTile: 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 button and description.
+     * Controls the vertical placement of the description and button — `top` or `bottom`.
      * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the tile's action button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
-     * Aspect ratio of the button-tile.
+     * Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values.
      * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
-     * Displays the button-tile as compact version with description and button icon only.
+     * Renders only the icon button 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;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the tile, preventing button interaction.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Show gradient.
+     * Shows a gradient overlay over the media slot to improve text legibility on bright images or videos.
      * @default false
      */
     gradient?: boolean;
     /**
-     * The icon shown. By choosing 'none', no icon is displayed.
+     * Sets the icon displayed in the tile's action button. Use `none` to show no icon.
      * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon for the action button, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Label of the button.
+     * Sets the accessible label text of the action button rendered inside the tile.
      */
     label: string;
     /**
-     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the tile and shows a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * 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<ButtonTileSize>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonTileType;
     /**
-     * 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<ButtonTileWeight>;