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

package/esm/lib/components/accordion.wrapper.js

@@ -3,9 +3,10 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PAccordion = forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
+    useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-accordion');
     const propsToSync = [compact, heading, open, size, tag, theme];
     useBrowserLayoutEffect(() => {

package/esm/lib/components/banner.wrapper.js

@@ -3,14 +3,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PBanner = forwardRef(({ onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PBanner = forwardRef(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [persistent, state, theme, width];
+    const propsToSync = [description, heading, persistent, state, theme, width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/carousel.wrapper.js

@@ -3,14 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCarousel = forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ alignHeader = 'left', description, disablePagination, heading, intl = {}, onCarouselChange, onChange, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
+    const propsToSync = [alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/content-wrapper.wrapper.js

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme, width];

package/esm/lib/components/divider.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PDivider = forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-divider');
-    const propsToSync = [color, orientation, theme];
+    const propsToSync = [color, direction, orientation, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../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 = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PLinkTile = 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 = 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 = useRef();
     const WebComponentTag = usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];

package/esm/lib/components/modal.wrapper.js

@@ -3,14 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, fullscreen, heading, open];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open];
     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/esm/lib/components/model-signature.wrapper.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+
+const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-model-signature');
+    const propsToSync = [color, model, size, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PModelSignature };

package/esm/lib/components/pagination.wrapper.js

@@ -3,14 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PPagination = 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 = 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 = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'pageChange', onPageChange);
     const WebComponentTag = 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];
     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/esm/lib/components/scroller.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PScroller = forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+const PScroller = forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/segmented-control.wrapper.js

@@ -3,8 +3,9 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PSegmentedControl = forwardRef(({ backgroundColor, onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = forwardRef(({ backgroundColor, onChange, onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     const WebComponentTag = usePrefix('p-segmented-control');
     const propsToSync = [backgroundColor, theme, value];

package/esm/lib/components/stepper-horizontal.wrapper.js

@@ -3,8 +3,9 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PStepperHorizontal = forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = forwardRef(({ onChange, onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'stepChange', onStepChange);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
     const propsToSync = [size, theme];

package/esm/lib/components/switch.wrapper.js

@@ -3,8 +3,9 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PSwitch = forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onChange, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     const WebComponentTag = usePrefix('p-switch');
     const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];

package/esm/lib/components/table.wrapper.js

@@ -3,8 +3,9 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTable = forwardRef(({ caption, onSortingChange, className, ...rest }, ref) => {
+const PTable = forwardRef(({ caption, onChange, onSortingChange, className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     const WebComponentTag = usePrefix('p-table');
     useBrowserLayoutEffect(() => {

package/esm/lib/components/tabs-bar.wrapper.js

@@ -3,14 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTabsBar = forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/tabs.wrapper.js

@@ -3,14 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTabs = forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/text-field-wrapper.wrapper.js

@@ -3,14 +3,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/text-list.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTextList = forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
+const PTextList = forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme];
+    const propsToSync = [listType, orderType, theme, type];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['listType', 'orderType', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/textarea-wrapper.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/public-api.js

@@ -24,6 +24,7 @@ export { PLinkSocial } from './lib/components/link-social.wrapper.js';
 export { PLinkTile } from './lib/components/link-tile.wrapper.js';
 export { PMarque } from './lib/components/marque.wrapper.js';
 export { PModal } from './lib/components/modal.wrapper.js';
+export { PModelSignature } from './lib/components/model-signature.wrapper.js';
 export { PPagination } from './lib/components/pagination.wrapper.js';
 export { PPopover } from './lib/components/popover.wrapper.js';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.js';

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
-export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -10,9 +10,13 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     heading?: string;
     /**
-     * Emitted when accordion state is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when accordion state is changed.
      */
     onAccordionChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
+    /**
+     * Emitted when accordion state is changed.
+     */
+    onChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
     /**
      * Defines if accordion is open.
      */
@@ -30,7 +34,7 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
@@ -40,9 +44,13 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     heading?: string;
     /**
-     * Emitted when accordion state is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when accordion state is changed.
      */
     onAccordionChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
+    /**
+     * Emitted when accordion state is changed.
+     */
+    onChange?: (event: CustomEvent<AccordionChangeEvent>) => void;
     /**
      * Defines if accordion is open.
      */

package/lib/components/accordion.wrapper.js

@@ -5,9 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
+    hooks.useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = hooks.usePrefix('p-accordion');
     const propsToSync = [compact, heading, open, size, tag, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,6 +1,14 @@
 import { HTMLAttributes } from 'react';
 import type { BannerState, Theme, BannerWidth } from '../types';
-export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Description of the banner.
+     */
+    description?: string;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string;
     /**
      * Emitted when the close button is clicked.
      */
@@ -22,7 +30,15 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: BannerWidth;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Description of the banner.
+     */
+    description?: string;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string;
     /**
      * Emitted when the close button is clicked.
      */

package/lib/components/banner.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PBanner = react.forwardRef(({ onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [persistent, state, theme, width];
+    const propsToSync = [description, heading, persistent, state, theme, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/button-group.wrapper.d.ts

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttribute, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
-export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
+export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Display button in active state.
      */
@@ -8,11 +8,11 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -24,7 +24,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -36,7 +36,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -48,14 +48,14 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonType;
+    type?: ButtonPureType;
     /**
      * 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?: ButtonPureWeight;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Display button in active state.
      */
@@ -63,11 +63,11 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -79,7 +79,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonPureIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -91,7 +91,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<TextSize>;
+    size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -103,12 +103,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonType;
+    type?: ButtonPureType;
     /**
      * 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?: ButtonPureWeight;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
-export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
+export type PButtonProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -16,7 +16,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -38,7 +38,7 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */
@@ -54,7 +54,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName;
+    icon?: ButtonIcon;
     /**
      * A URL path to a custom icon.
      */