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

package/CHANGELOG.md

@@ -9,15 +9,152 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.6] - 2023-04-06
+
+#### Added
+
+- `xxl` breakpoint for all breakpoint customizable component values
+  ([#2454](https://github.com/porsche-design-system/porsche-design-system/pull/2454))
+
+#### Fixed
+
+- Disabled color of `Icon` component ([#2446](https://github.com/porsche-design-system/porsche-design-system/pull/2446))
+- Support of `Radio Button Wrapper` for name value with non-alphanumeric characters
+  ([#2443](https://github.com/porsche-design-system/porsche-design-system/pull/2443))
+
+#### Changed
+
+- `Banner` is a controlled component now and its visibility has to be controlled via the `open` prop
+  ([#2447](https://github.com/porsche-design-system/porsche-design-system/pull/2447))
+
+```diff
+- <p-banner></p-banner>
++ <p-banner open="true"></p-banner>
+```
+
+- Renamed all custom `change` events to `update` because of bad event emissions with native `change` events, e.g. with
+  nested `select` or `input` elements
+
+#### 🤖 Property deprecations 🤖
+
+##### Accordion:
+
+- Event `accordionChange` is deprecated, use `update` event instead.
+
+```diff
+- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
++ <PAccordion onUpdate={(e: CustomEvent<AccordionUPdateEvent>) => {}} />
+```
+
+##### Banner:
+
+- Prop `persistent` is deprecated, use `dismissButton` instead.
+
+```diff
+- <p-banner persistent="true"></p-banner>
++ <p-banner dismiss-button="false"></p-banner>
+```
+
+##### Carousel:
+
+- Event `carouselChange` is deprecated, use `update` event instead.
+
+```diff
+- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
++ <PCarousel onUpdate={(e: CustomEvent<CarouselUpdateEvent>) => {}} />
+```
+
+##### Inline Notification:
+
+- Prop `persistent` is deprecated, use `dismissButton` instead.
+
+```diff
+- <p-inline-notification persistent="true"></p-inline-notification>
++ <p-inline-notification dismiss-button="false"></p-inline-notification>
+```
+
+##### Pagination:
+
+- Event `pageChange` is deprecated, use `update` event instead.
+
+```diff
+- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
++ <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
+```
+
+#### Segmented Control:
+
+- Event `segmentedControlChange` is deprecated, use `update` event instead.
+
+```diff
+- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
++ <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
+```
+
+#### Stepper Horizontal:
+
+- Event `stepChange` is deprecated, use `update` event instead.
+
+```diff
+- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
++ <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
+```
+
+#### Switch:
+
+- Event `switchChange` is deprecated, use `update` event instead.
+
+```diff
+- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
++ <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
+```
+
+#### Table:
+
+- Event `sortingChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
++ <PTable onUpdate={(e: CustomEvent<TableUpdateEvent>) => {}} />
+```
+
+##### Tabs:
+
+- Event `tabChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabs onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
+```
+
+##### Tabs Bar:
+
+- Event `tabChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabsBar onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
+```
+
+### [3.0.0-alpha.5] - 2023-03-30
+
+#### Added
+
+- `Wordmark` ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
+- `Crest` ([#2437](https://github.com/porsche-design-system/porsche-design-system/pull/2437))
+- Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
+  of `Styles` subpackage ([#2436](https://github.com/porsche-design-system/porsche-design-system/pull/2436))
+
 ### [3.0.0-alpha.4] - 2023-03-28
 
 #### Changed
 
-- `Table` matches new design language [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+- `Table` matches new design language
+  ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
 
 #### Added
 
-- Styles: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+- Styles: ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
   - `gridWide`
   - `gridWideColumnStart` and `pds-grid-wide-column-start`
   - `gridWideColumnEnd` and `pds-grid-wide-column-end`
@@ -30,14 +167,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `gridWideOffset`, `gridWideOffsetBase`, `gridWideOffsetS`, `gridWideOffsetXXL` and `$pds-grid-wide-offset-base`,
     `$pds-grid-wide-offset-s`, `$pds-grid-wide-offset-xxl`
   - `gridFullOffset` and `$pds-grid-full-offset`
-- `Button Tile` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2381)
-- `Fieldset` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
-- `Link Tile Model Signature` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2388)
-- Prop `activeSlideIndex` to `Carousel` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
+- `Button Tile` ([#2381](https://github.com/porsche-design-system/porsche-design-system/pull/2381))
+- `Fieldset` ([#2404](https://github.com/porsche-design-system/porsche-design-system/pull/2404))
+- `Link Tile Model Signature` ([#2388](https://github.com/porsche-design-system/porsche-design-system/pull/2388))
+- Prop `activeSlideIndex` to `Carousel`
+  ([#2421](https://github.com/porsche-design-system/porsche-design-system/pull/2421))
 - Prop `slidesPerPage` supports value `auto` of `Carousel`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
-- Prop `scrollbar` for `Scroller` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
-- Prop `theme` for `Table` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+  ([#2421](https://github.com/porsche-design-system/porsche-design-system/pull/2421))
+- Prop `scrollbar` for `Scroller` ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
+- Prop `theme` for `Table` ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
 
 #### Fixed
 
@@ -46,30 +184,37 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Changed
 
 - Styles: `gridStyles` and `pds-grid` are supporting an additional column range called `wide`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - Styles: SCSS version needs to be imported by `@porsche-design-system/components-js/styles` instead of
   `@porsche-design-system/components-js/styles/scss`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### Removed
 
 - `Banner`: CSS variable `--p-banner-position-type`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
 
 ##### Banner:
 
 - Prop `width` has no effect anymore, instead the component is aligned with Porsche Grid "extended" by default.
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤡 Component deprecations 🤡
 
-##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
+##### Marque: ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
+
+```diff
+- <p-marque></p-marque>
++ <p-wordmark></p-wordmark>
+```
+
+##### Fieldset Wrapper: ([#2404](https://github.com/porsche-design-system/porsche-design-system/pull/2404))
 
 ```diff
 - <p-fieldset-wrapper label="Some legend label">

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

@@ -3,10 +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, onChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
-    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'update', onUpdate);
     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(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, heading, persistent, state, theme, width];
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -3,10 +3,10 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCarousel = 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 = 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 = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
-    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
     const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {

package/esm/lib/components/crest.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 PCrest = forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-crest');
+    const propsToSync = [aria, href, target];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCrest };

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

@@ -3,15 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'info', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = 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];
     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/esm/lib/components/marque.wrapper.js

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

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

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

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

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

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

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

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

@@ -3,10 +3,10 @@ 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, onChange, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
-    useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
+    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
     const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
     useBrowserLayoutEffect(() => {

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

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

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

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

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

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

package/esm/lib/components/wordmark.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 PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-wordmark');
+    const propsToSync = [aria, href, size, target, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', 'target', '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 { PWordmark };

package/esm/public-api.js

@@ -8,6 +8,7 @@ export { PButtonTile } from './lib/components/button-tile.wrapper.js';
 export { PCarousel } from './lib/components/carousel.wrapper.js';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.js';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.js';
+export { PCrest } from './lib/components/crest.wrapper.js';
 export { PDisplay } from './lib/components/display.wrapper.js';
 export { PDivider } from './lib/components/divider.wrapper.js';
 export { PFieldset } from './lib/components/fieldset.wrapper.js';
@@ -57,6 +58,7 @@ export { PTextList } from './lib/components/text-list.wrapper.js';
 export { PTextListItem } from './lib/components/text-list-item.wrapper.js';
 export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.js';
 export { PToast } from './lib/components/toast.wrapper.js';
+export { PWordmark } from './lib/components/wordmark.wrapper.js';
 export { PorscheDesignSystemProvider } from './provider.js';
 export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.js';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.js';

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

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

package/lib/components/accordion.wrapper.js

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

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

@@ -5,6 +5,10 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      * Description of the banner.
      */
     description?: string;
+    /**
+     * If false, the banner will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * Heading of the banner.
      */
@@ -14,7 +18,11 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Defines if the banner can be closed/removed by the user.
+     * If true, the banner is open.
+     */
+    open: boolean;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
     persistent?: boolean;
     /**
@@ -36,6 +44,10 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
      * Description of the banner.
      */
     description?: string;
+    /**
+     * If false, the banner will not have a dismiss button.
+     */
+    dismissButton?: boolean;
     /**
      * Heading of the banner.
      */
@@ -45,7 +57,11 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Defines if the banner can be closed/removed by the user.
+     * If true, the banner is open.
+     */
+    open: boolean;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
     persistent?: boolean;
     /**

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(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, heading, persistent, state, theme, width];
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -26,13 +26,13 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     intl?: CarouselInternationalization;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when carousel's content slides.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    onCarouselChange?: (event: CustomEvent<CarouselUpdateEvent>) => void;
     /**
      * Emitted when carousel's content slides.
      */
-    onChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<CarouselUpdateEvent>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */
@@ -85,13 +85,13 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     intl?: CarouselInternationalization;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when carousel's content slides.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    onCarouselChange?: (event: CustomEvent<CarouselUpdateEvent>) => void;
     /**
      * Emitted when carousel's content slides.
      */
-    onChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<CarouselUpdateEvent>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */