@porsche-design-system/components-react 3.0.0-alpha.2 → 3.0.0-alpha.3

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
-export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PIconProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -31,7 +31,7 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { IconName, InlineNotificationState, Theme } from '../types';
-export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { InlineNotificationActionIcon, InlineNotificationState, Theme } from '../types';
+export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: IconName;
+    actionIcon?: InlineNotificationActionIcon;
     /**
      * Action label of the inline-notification.
      */
@@ -42,11 +42,11 @@ export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: IconName;
+    actionIcon?: InlineNotificationActionIcon;
     /**
      * Action label of the inline-notification.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonIconName, TextSize, LinkTarget, Theme, TextWeight } from '../types';
-export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
+export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Display link in active state.
      */
@@ -8,11 +8,11 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -28,7 +28,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonIconName;
+    icon?: LinkPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -40,7 +40,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<LinkPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -48,7 +48,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkPureTarget;
     /**
      * Adapts the button color depending on the theme.
      */
@@ -61,9 +61,9 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: TextWeight;
+    weight?: LinkPureWeight;
 };
-export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Display link in active state.
      */
@@ -71,11 +71,11 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -91,7 +91,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonIconName;
+    icon?: LinkPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -103,7 +103,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<LinkPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -111,7 +111,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkPureTarget;
     /**
      * Adapts the button color depending on the theme.
      */
@@ -124,7 +124,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: TextWeight;
+    weight?: LinkPureWeight;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/link-social.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, SocialIconName, LinkTarget, Theme } from '../types';
-export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, LinkSocialIcon, LinkSocialTarget, Theme } from '../types';
+export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Show or hide label.
      */
@@ -12,7 +12,7 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: SocialIconName;
+    icon?: LinkSocialIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -24,14 +24,14 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkSocialTarget;
     /**
      * Adapts the link color when used on dark background.
      */
     theme?: Theme;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
-export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
+export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Show or hide label.
      */
@@ -43,7 +43,7 @@ export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit
     /**
      * The icon shown.
      */
-    icon?: SocialIconName;
+    icon?: LinkSocialIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -55,7 +55,7 @@ export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkSocialTarget;
     /**
      * Adapts the link color when used on dark background.
      */

package/lib/components/link-social.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
-export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Alignment of link and description.
      */
@@ -8,7 +8,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
     /**
      * Aspect ratio of the link-tile.
      */
@@ -48,13 +48,13 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkTileTarget;
     /**
      * Font weight of the description.
      */
     weight?: BreakpointCustomizable<LinkTileWeight>;
 };
-export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Alignment of link and description.
      */
@@ -62,7 +62,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
     /**
      * Aspect ratio of the link-tile.
      */
@@ -102,7 +102,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: LinkTileTarget;
     /**
      * Font weight of the description.
      */

package/lib/components/link-tile.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
+const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkButtonIconName, LinkTarget, Theme, LinkVariant } from '../types';
-export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
+export type PLinkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -20,7 +20,7 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: LinkIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -42,7 +42,7 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: LinkVariant;
 };
-export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
@@ -62,7 +62,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: LinkIcon;
     /**
      * A URL path to a custom icon.
      */

package/lib/components/marque.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, LinkTarget } from '../types';
-export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget } from '../types';
+export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -16,13 +16,13 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: MarqueTarget;
     /**
      * Show/hide trademark sign.
      */
     trademark?: boolean;
 };
-export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
@@ -38,7 +38,7 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Target attribute where the link should be opened.
      */
-    target?: LinkTarget;
+    target?: MarqueTarget;
     /**
      * Show/hide trademark sign.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable } from '../types';
-export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PModalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -10,9 +10,13 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     disableBackdropClick?: boolean;
     /**
-     * If true, the modal will not have a close button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
      */
     disableCloseButton?: boolean;
+    /**
+     * If false, the modal will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * If true the modal uses max viewport height and width. Should only be used for mobile.
      */
@@ -22,15 +26,19 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     heading?: string;
     /**
-     * Emitted when the component requests to be closed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismiss` event instead. Emitted when the component requests to be dismissed.
      */
     onClose?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * If true, the modal is open.
      */
     open: boolean;
 };
-export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
@@ -40,9 +48,13 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     disableBackdropClick?: boolean;
     /**
-     * If true, the modal will not have a close button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
      */
     disableCloseButton?: boolean;
+    /**
+     * If false, the modal will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * If true the modal uses max viewport height and width. Should only be used for mobile.
      */
@@ -52,9 +64,13 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     heading?: string;
     /**
-     * Emitted when the component requests to be closed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismiss` event instead. Emitted when the component requests to be dismissed.
      */
     onClose?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * If true, the modal is open.
      */

package/lib/components/modal.wrapper.js

@@ -5,14 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, fullscreen, heading, open];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
-export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Adapts the color of the component.
      */
@@ -18,7 +18,7 @@ export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Adapts the color of the component.
      */

package/lib/components/pagination.wrapper.d.ts

@@ -1,26 +1,30 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, NumberOfPageLinks, PageChangeEvent, Theme } from '../types';
-export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationChangeEvent, Theme } from '../types';
+export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Index of the currently active page.
      */
     activePage: number;
     /**
-     * Aria label what the pagination is used for.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.root` instead. Aria label what the pagination is used for.
      */
     allyLabel?: string;
     /**
-     * Aria label for next page icon.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.next` instead. Aria label for next page icon.
      */
     allyLabelNext?: string;
     /**
-     * Aria label for page navigation.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.page` instead. Aria label for page navigation.
      */
     allyLabelPage?: string;
     /**
-     * Aria label for previous page icon.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.prev` instead. Aria label for previous page icon.
      */
     allyLabelPrev?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
+     */
+    intl?: PaginationInternationalization;
     /**
      * The total count of items which should be shown per page.
      */
@@ -28,11 +32,15 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The maximum number of page links rendered
      */
-    maxNumberOfPageLinks?: BreakpointCustomizable<NumberOfPageLinks>;
+    maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
      * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PageChangeEvent>) => void;
+    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     */
+    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */
@@ -42,27 +50,31 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     totalItemsCount: number;
 };
-export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Index of the currently active page.
      */
     activePage: number;
     /**
-     * Aria label what the pagination is used for.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.root` instead. Aria label what the pagination is used for.
      */
     allyLabel?: string;
     /**
-     * Aria label for next page icon.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.next` instead. Aria label for next page icon.
      */
     allyLabelNext?: string;
     /**
-     * Aria label for page navigation.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.page` instead. Aria label for page navigation.
      */
     allyLabelPage?: string;
     /**
-     * Aria label for previous page icon.
+     * @deprecated since v3.0.0, will be removed with next major release, use `intl.prev` instead. Aria label for previous page icon.
      */
     allyLabelPrev?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
+     */
+    intl?: PaginationInternationalization;
     /**
      * The total count of items which should be shown per page.
      */
@@ -70,11 +82,15 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * The maximum number of page links rendered
      */
-    maxNumberOfPageLinks?: BreakpointCustomizable<NumberOfPageLinks>;
+    maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
      * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PageChangeEvent>) => void;
+    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     */
+    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/pagination.wrapper.js

@@ -5,14 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel = 'Pagination', allyLabelNext = 'Next page', allyLabelPage = 'Page', allyLabelPrev = 'Previous page', itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onChange, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     const WebComponentTag = hooks.usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/popover.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, PopoverDirection, Theme } from '../types';
-export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectedAriaAttributes, PopoverAriaAttribute, PopoverDirection, Theme } from '../types';
+export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label">;
+    aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
      * Descriptive text to show additional information when popover is open
      */
@@ -18,11 +18,11 @@ export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label">;
+    aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
      * Descriptive text to show additional information when popover is open
      */