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

package/CHANGELOG.md

@@ -9,6 +9,380 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [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/)
+
+#### Added
+
+- Styles: [PR](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`
+  - `gridNarrowOffset`, `gridNarrowOffsetBase`, `gridNarrowOffsetS`, `gridNarrowOffsetXXL` and
+    `$pds-grid-narrow-offset-base`, `$pds-grid-narrow-offset-s`, `$pds-grid-narrow-offset-xxl`
+  - `gridBasicOffset`, `gridBasicOffsetBase`, `gridBasicOffsetS`, `gridBasicOffsetXXL` and
+    `$pds-grid-basic-offset-base`, `$pds-grid-basic-offset-s`, `$pds-grid-basic-offset-xxl`
+  - `gridExtendedOffset`, `gridExtendedOffsetBase`, `gridExtendedOffsetS`, `gridExtendedOffsetXXL` and
+    `$pds-grid-extended-offset-base`, `$pds-grid-extended-offset-s`, `$pds-grid-extended-offset-xxl`
+  - `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)
+- 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/)
+
+#### Fixed
+
+- React: missing animation of `Carousel` in certain scenarios
+
+#### 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)
+- 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)
+
+#### Removed
+
+- `Banner`: CSS variable `--p-banner-position-type`
+  [PR](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)
+- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+  [PR](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)
+
+#### 🤡 Component deprecations 🤡
+
+##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
+
+```diff
+- <p-fieldset-wrapper label="Some legend label">
++ <p-fieldset label="Some legend label">
+  <p-text-field-wrapper label="Some label">
+    <input type="text" name="some-name" />
+  </p-text-field-wrapper>
+- </p-fieldset-wrapper>
++ </p-fieldset>
+```
+
+### [3.0.0-alpha.3] - 2023-03-17
+
+#### 🤖 Property deprecations 🤖
+
+##### Accordion:
+
+- Event `accordionChange` is deprecated, use `change` event instead.
+
+```diff
+- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
++ <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
+```
+
+#### Banner:
+
+- Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead.
+
+```diff
+<p-banner>
+-  <span slot="title">Some heading</span>
++  <span slot="heading">Some heading</span>
+   <span slot="description">Some notification description.</span>
+</p-banner>
+
+-<p-banner>
++<p-banner heading="Some heading" description="Some notification description.">
+-  <span slot="title">Some heading</span>
+-  <span slot="description">Some notification description.</span>
+</p-banner>
+```
+
+##### Carousel:
+
+- Prop `disablePagination` is deprecated, use `pagination` instead.
+- Event `carouselChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-carousel disable-pagination="true"></p-carousel>
++ <p-carousel pagination="false"></p-carousel>
+
+- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
++ <PCarousel onChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
+```
+
+##### Divider:
+
+- Prop `orientation` is deprecated, use `direction` instead.
+
+```diff
+- <p-divider orientation="horizontal"></p-divider>
++ <p-divider direction="horizontal"></p-divider>
+```
+
+##### Icon:
+
+- Prop `colors`'s value `disabled` is removed, use `state-disabled` instead.
+
+```diff
+- <p-icon color="disabled"></p-icon>
++ <p-icon color="state-disabled"></p-icon>
+```
+
+##### Link Tile:
+
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+
+```diff
+- <p-link-tile weight="semibold"></p-link-tile>
++ <p-link-tile weight="semi-bold"></p-link-tile>
+```
+
+#### Modal:
+
+- Prop `disableCloseButton` is deprecated, use `dismissButton` instead.
+- Event `close` is deprecated, use `dismiss` event instead.
+
+```diff
+- <p-modal disable-close-button="true"></p-modal>
++ <p-modal dismiss-button="false"></p-modal>
+
+- <PModal onClose={(e: CustomEvent<void>) => {}} />
++ <PModal onDismiss={(e: CustomEvent<void>) => {}} />
+```
+
+##### Pagination:
+
+- Props `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` are deprecated.
+- Event `pageChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-pagination ally-label="Paginierung" ally-label-prev="Vorherige Seite" ally-label-next="Nächste Seite" ally-label-page="Seite"></p-pagination>
++ <p-pagination intl="{root: 'Paginierung', prev: 'Vorherige Seite', next: 'Nächste Seite', page: 'Seite'}"></p-pagination>
+
+- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
++ <PPagination onChange={(e: CustomEvent<PaginationChangeEvent>) => {}} />
+```
+
+##### Scroller:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `scrollIndicatorPosition` is deprecated, use `alignScrollIndicator` instead.
+
+```diff
+- <p-scroller gradient-color-scheme="surface"></p-scroller>
++ <p-scroller gradient-color="background-surface"></p-scroller>
+
+- <p-scroller scroll-indicator-position="top"></p-scroller>
++ <p-scroller align-scroll-indicator="top"></p-scroller>
+```
+
+#### Segmented Control:
+
+- Event `segmentedControlChange` is deprecated, use `change` event instead.
+
+```diff
+- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
++ <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
+```
+
+#### Stepper Horizontal:
+
+- Event `stepChange` is deprecated, use `change` event instead.
+
+```diff
+- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
++ <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
+```
+
+#### Switch:
+
+- Event `switchChange` is deprecated, use `change` event instead.
+
+```diff
+- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
++ <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
+```
+
+#### Table:
+
+- Event `sortingChange` is deprecated, use `change` event instead.
+
+```diff
+- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
++ <PTable onChange={(e: CustomEvent<TableChangeEvent>) => {}} />
+```
+
+##### Tabs:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+- Event `tabChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-tabs gradient-color-scheme="surface"></p-tabs>
++ <p-tabs gradient-color="background-surface"></p-tabs>
+
+- <p-tabs weight="semibold"></p-tabs>
++ <p-tabs weight="semi-bold"></p-tabs>
+
+- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabs onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
+```
+
+##### Tabs Bar:
+
+- Prop `gradientColorScheme` is deprecated, use `gradientColor` instead.
+- Prop `weight`'s value `semibold` is deprecated, use `semi-bold` instead.
+- Event `tabChange` is deprecated, use `change` event instead.
+
+```diff
+- <p-tabs-bar gradient-color-scheme="surface"></p-tabs-bar>
++ <p-tabs-bar gradient-color="background-surface"></p-tabs-bar>
+
+- <p-tabs-bar weight="semibold"></p-tabs>
++ <p-tabs-bar weight="semi-bold"></p-tabs>
+
+- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabsBar onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
+```
+
+##### Tag:
+
+- Prop `color`'s value `notification-warning`, `notification-success` and `notification-error` are deprecated, use
+  `notification-warning-soft`, `notification-success-soft` and `notification-error-soft` instead.
+
+```diff
+- <p-tag color="notification-warning"></p-tag>
++ <p-tag color="notification-warning-soft"></p-tag>
+
+- <p-tag color="notification-success"></p-tag>
++ <p-tag color="notification-success-soft"></p-tag>
+
+- <p-tag color="notification-error"></p-tag>
++ <p-tag color="notification-error-soft"></p-tag>
+```
+
+##### Text Field Wrapper:
+
+- Prop `showCharacterCount` is deprecated, use `showCounter` instead.
+
+```diff
+-<p-text-field-wrapper show-character-count="false">
++<p-text-field-wrapper show-counter="false">
+  <input type="text" maxlength="20" />
+</p-text-field-wrapper>
+```
+
+##### Textarea Wrapper:
+
+- Prop `showCharacterCount` is deprecated, use `showCounter` instead.
+
+```diff
+-<p-textarea-wrapper show-character-count="false">
++<p-textarea-wrapper show-counter="false">
+  <textarea maxlength="80"></textarea>
+</p-textarea-wrapper>
+```
+
+##### Text List
+
+- Props `listType` and `orderType` are deprecated, use `type` instead.
+
+```diff
+- <p-text-list list-type="unordered"></p-text-list>
++ <p-text-list type="unordered"></p-text-list>
+
+- <p-text-list list-type="ordered" order-type="numbered"></p-text-list>
++ <p-text-list type="numbered"></p-text-list>
+
+- <p-text-list list-type="ordered" order-type="alphabetically"></p-text-list>
++ <p-text-list type="alphabetically"></p-text-list>
+```
+
+#### Added
+
+- `Text`, `Icon`, `Button Pure` and `Link Pure` support value `xx-small` for prop `size`
+- `Display` supports value `small` for prop `size`
+- Partials: `getInitialStyles` supports multi prefix, e.g.
+  `getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });`
+- Styles: `displaySmallStyle` and `pds-display-small`
+- Styles: `textXXSmallStyle` and `pds-text-xx-small`
+- Styles: `fontSizeDisplaySmall` and `$pds-font-size-display-small`
+- Styles: `fontSizeTextXXSmall` and `$pds-font-size-text-xx-small`
+- Styles: `getHoverStyle` and `pds-hover`
+- `Banner` has `heading` and `description` prop as well as `slot="heading"` and deprecated `slot="title"`
+- Custom events have consistent names across components and deprecated old event names
+  - `Accordion` emits `change` and deprecated `accordionChange` event
+  - `Carousel` emits `change` and deprecated `carouselChange` event
+  - `Modal` emits `dismiss` and deprecated `close` event
+  - `Pagination` emits `change` and deprecated `pageChange` event
+  - `Segmented Control` emits `change` and deprecated `segmentedControlChange` event
+  - `Stepper Horizontal` emits `change` and deprecated `stepChange` event
+  - `Switch` emits `change`and deprecated `switchChange` event
+  - `Table` emits `change`and deprecated `sortingChange` event
+  - `Tabs` emits `change`and deprecated `tabChange` event
+  - `Tabs Bar` emits `change`and deprecated `tabChange` event
+- Props have consistent names across components and deprecated old props
+  - `Carousel` got `pagination` prop and deprecated `disablePagination` prop
+  - `Divider` got `direction` prop and deprecated `orientation` prop
+  - `Modal` got `dismissButton` prop and deprecated `disableCloseButton` prop
+  - `Pagination` got `intl` prop and deprecated `allyLabelNext`, `allyLabelPage`, `allyLabelPrev` and `allyLabel` props
+  - `Scroller` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Scroller` got `alignScrollIndicator` prop and deprecated `scrollIndicatorPosition` prop
+  - `Tabs` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Tabs Bar` got `gradientColor` prop and deprecated `gradientColorScheme` prop
+  - `Text Field Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop
+  - `Textarea Wrapper` got `showCounter` prop and deprecated `showCharacterCount` prop
+  - `Text List` got `type` prop and deprecated `listType` and `orderType` prop
+- Props have consistent values across components and deprecated old values
+  - `Icon` prop `color` got value `state-disabled` and removed `disabled` value
+  - `Link Tile` prop `weight` got value `semi-bold` and deprecated `semibold` value
+  - `Tabs Bar` and `Tabs` prop `weight` got value `semi-bold` and deprecated `semibold` value
+  - `Tag` prop `color` got values `notification-info-soft`, `notification-warning-soft`, `notification-success-soft`,
+    `notification-error-soft` and deprecated `notification-warning`, `notification-success`, `notification-error` values
+
+#### Changed
+
+- `Display` uses font-weight regular and font-style normal
+- Partials: `getInitialStyles` matches new design language
+- Partials: All component related, slotted Light DOM styles have been moved to `getInitialStyles`
+- Styles: `getFocusStyle` and `pds-focus` doesn't need `theme` parameter anymore
+- Styles: `breakpoint{Base|XS|S|M|L|XL|XXL}` and `$pds-breakpoint-{base|xs|s|m|l|xl|xxl}` are provided as number without
+  unit (px)
+- `Link Tile` matches new design language
+- Typings for all component props start with the component name, e.g. `SwitchAlignLabel`, `TabsBarGradientColor` or
+  `LinkPureIcon`
+- `Icon` prop `color` value `disabled` is renamed to `state-disabled`
+- `Tag` prop `color` value `notification-info` is renamed to `notification-info-soft`
+
+#### Fixed
+
+- `Text Field Wrapper` calendar and time indicator icons respect color definition in dark theme
+- `Text Field Wrapper` has correct height when type date or time is used
+- Partials: Typings of return value with and without options parameter
+- `Modal` scrolling behavior on mouse drag
+
+#### Removed
+
+- `Heading`: value `xxx-large` for prop `size`
+- Styles: `headingXXXLargeStyle` and `pds-heading-xxx-large`
+- Styles: `fontSizeHeadingXXLarge` and `$pds-font-size-heading-xx-large`
+
 ### [3.0.0-alpha.2] - 2023-02-27
 
 #### 🤖 Property deprecations 🤖
@@ -162,6 +536,17 @@ possible. Nevertheless, there are a few breaking changes and some more deprecati
 </p-link-pure>
 ```
 
+##### Marque:
+
+- Removed `variant` property.
+
+```diff
+- <p-marque variant="75-years"></p-marque>
++ <p-marque></p-marque>
+// or even better, replace component by wordmark
++ <p-wordmark></p-wordmark>
+```
+
 ##### Switch:
 
 - Removed deprecated prop `tabbable`.

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/button-tile.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 PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-button-tile');
+    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PButtonTile };

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(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+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 elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', '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/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 = '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/fieldset-wrapper.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-fieldset" instead. */
 const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset-wrapper');

package/esm/lib/components/fieldset.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 PFieldset = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-fieldset');
+    const propsToSync = [label, labelSize, message, required, state, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['label', 'labelSize', 'message', 'required', 'state', '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 { PFieldset };

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-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 PLinkTileModelSignature = forwardRef(({ aspectRatio = '3:4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-tile-model-signature');
+    const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTileModelSignature };

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/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, scrollbar = false, 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, scrollbar, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', '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];