@porsche-design-system/components-react 3.0.0-alpha.4 → 3.0.0-alpha.6

package/lib/components/carousel.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onChange, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
-    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
     const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
+export type PCrestProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: CrestTarget;
+};
+export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: CrestTarget;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/crest.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PCrest = react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-crest');
+    const propsToSync = [aria, href, target];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCrest = PCrest;

package/lib/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './button-tile.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
+export * from './crest.wrapper';
 export * from './display.wrapper';
 export * from './divider.wrapper';
 export * from './fieldset.wrapper';
@@ -56,3 +57,4 @@ export * from './text-list.wrapper';
 export * from './text-list-item.wrapper';
 export * from './textarea-wrapper.wrapper';
 export * from './toast.wrapper';
+export * from './wordmark.wrapper';

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

@@ -17,6 +17,10 @@ export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color' | 'onCha
      * Description of the inline-notification.
      */
     description?: string;
+    /**
+     * If false, the inline-notification will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * Heading of the inline-notification.
      */
@@ -30,7 +34,7 @@ export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color' | 'onCha
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Defines if the inline-notification can be closed/removed by the user.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
      */
     persistent?: boolean;
     /**
@@ -59,6 +63,10 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
      * Description of the inline-notification.
      */
     description?: string;
+    /**
+     * If false, the inline-notification will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * Heading of the inline-notification.
      */
@@ -72,7 +80,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Defines if the inline-notification can be closed/removed by the user.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
      */
     persistent?: boolean;
     /**

package/lib/components/inline-notification.wrapper.js

@@ -5,15 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'info', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, heading, persistent, state, theme];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -22,6 +22,7 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     trademark?: boolean;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.

package/lib/components/marque.wrapper.js

@@ -5,6 +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. Please use "p-wordmark" instead. */
 const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-marque');

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationChangeEvent, Theme } from '../types';
+import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEvent, Theme } from '../types';
 export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Index of the currently active page.
@@ -34,13 +34,13 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> &
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
-     * Emitted when the page changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */
@@ -84,13 +84,13 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
-     * Emitted when the page changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/pagination.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-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 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, }, onPageChange, onUpdate, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
     const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/segmented-control.wrapper.d.ts

@@ -1,18 +1,18 @@
 import { HTMLAttributes } from 'react';
-import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, SegmentedControlUpdateEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
-     * Emitted when selected element changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
-    onChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * Emitted when selected element changes.
      */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
      * Adapts the segmented-control color depending on the theme.
      */
@@ -28,13 +28,13 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
-     * Emitted when selected element changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
-    onChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * Emitted when selected element changes.
      */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
      * Adapts the segmented-control color depending on the theme.
      */

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

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, onChange, onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
     const propsToSync = [backgroundColor, theme, value];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/stepper-horizontal.wrapper.d.ts

@@ -1,14 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { StepperHorizontalChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
+import type { StepperHorizontalUpdateEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
 export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
-     * Emitted when active step is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */
-    onChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active step is changed.
+     * Emitted when active step is changed.
      */
-    onStepChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -20,13 +20,13 @@ export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChan
 };
 export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
-     * Emitted when active step is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */
-    onChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active step is changed.
+     * Emitted when active step is changed.
      */
-    onStepChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
      * The text size.
      */

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

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PStepperHorizontal = react.forwardRef(({ onChange, onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
     const propsToSync = [size, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, SwitchAlignLabel, SwitchChangeEvent, Theme } from '../types';
+import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEvent, Theme } from '../types';
 export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Aligns the label.
@@ -22,13 +22,13 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     loading?: boolean;
     /**
-     * Emitted when checked status is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
      */
-    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onSwitchChange?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     * Emitted when checked status is changed.
      */
-    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
      * Stretches the contents to max available space.
      */
@@ -60,13 +60,13 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
      */
     loading?: boolean;
     /**
-     * Emitted when checked status is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
      */
-    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onSwitchChange?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     * Emitted when checked status is changed.
      */
-    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
      * Stretches the contents to max available space.
      */

package/lib/components/switch.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onChange, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
     const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,18 +1,18 @@
 import { HTMLAttributes } from 'react';
-import type { TableChangeEvent, Theme } from '../types';
+import type { TableUpdateEvent, Theme } from '../types';
 export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
     /**
-     * Emitted when sorting is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
-    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onSortingChange?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */
@@ -24,13 +24,13 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     caption?: string;
     /**
-     * Emitted when sorting is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
-    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onSortingChange?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/table.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTable = react.forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
     const propsToSync = [caption, theme];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/tabs-bar.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarChangeEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
+import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
 export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -14,13 +14,13 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -48,13 +48,13 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
      * The text size.
      */

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

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
     const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabsGradientColor, TabsGradientColorScheme, TabsChangeEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
+import type { TabsGradientColor, TabsGradientColorScheme, TabsUpdateEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
 export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
@@ -14,13 +14,13 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     gradientColorScheme?: TabsGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -48,13 +48,13 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     gradientColorScheme?: TabsGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
      * The text size.
      */

package/lib/components/tabs.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
     const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
+export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/wordmark.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-wordmark');
+    const propsToSync = [aria, href, size, target, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PWordmark = PWordmark;