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

package/CHANGELOG.md

@@ -9,6 +9,94 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.5] - 2023-03-30
+
+#### Added
+
+- `Wordmark` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+- `Crest` [PR](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 [PR](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/)
+
+#### 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 🤡
+
+##### Marque [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+
+```diff
+- <p-marque></p-marque>
++ <p-wordmark></p-wordmark>
+```
+
+##### 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 🤖
@@ -464,6 +552,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/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,15 +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, 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, 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, pagination, 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', 'pagination', '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/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/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-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/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/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(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, 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 = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', '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/table.wrapper.js

@@ -3,14 +3,16 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTable = forwardRef(({ caption, onChange, onSortingChange, className, ...rest }, ref) => {
+const PTable = forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     const WebComponentTag = usePrefix('p-table');
+    const propsToSync = [caption, theme];
     useBrowserLayoutEffect(() => {
-        elementRef.current.caption = caption;
-    }, [caption]);
+        const { current } = elementRef;
+        ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),

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

@@ -4,11 +4,14 @@ export { PBanner } from './lib/components/banner.wrapper.js';
 export { PButton } from './lib/components/button.wrapper.js';
 export { PButtonGroup } from './lib/components/button-group.wrapper.js';
 export { PButtonPure } from './lib/components/button-pure.wrapper.js';
+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';
 export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.js';
 export { PFlex } from './lib/components/flex.wrapper.js';
 export { PFlexItem } from './lib/components/flex-item.wrapper.js';
@@ -22,6 +25,7 @@ export { PLink } from './lib/components/link.wrapper.js';
 export { PLinkPure } from './lib/components/link-pure.wrapper.js';
 export { PLinkSocial } from './lib/components/link-social.wrapper.js';
 export { PLinkTile } from './lib/components/link-tile.wrapper.js';
+export { PLinkTileModelSignature } from './lib/components/link-tile-model-signature.wrapper.js';
 export { PMarque } from './lib/components/marque.wrapper.js';
 export { PModal } from './lib/components/modal.wrapper.js';
 export { PModelSignature } from './lib/components/model-signature.wrapper.js';
@@ -54,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/banner.wrapper.d.ts

@@ -26,7 +26,8 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     theme?: Theme;
     /**
-     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     width?: BannerWidth;
 };
@@ -56,7 +57,8 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
      */
     theme?: Theme;
     /**
-     * Defines the width of the banner corresponding to the `content-wrapper` dimensions
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     width?: BannerWidth;
 } & {

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

@@ -0,0 +1,120 @@
+import { HTMLAttributes } from 'react';
+import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
+export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Alignment of button and description.
+     */
+    align?: ButtonTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
+    /**
+     * Aspect ratio of the button-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Displays the button-tile as compact version with description and button icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: ButtonTileIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Label of the button.
+     */
+    label: string;
+    /**
+     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<ButtonTileSize>;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonTileType;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<ButtonTileWeight>;
+};
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Alignment of button and description.
+     */
+    align?: ButtonTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
+    /**
+     * Aspect ratio of the button-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    /**
+     * Displays the button-tile as compact version with description and button icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: ButtonTileIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Label of the button.
+     */
+    label: string;
+    /**
+     * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<ButtonTileSize>;
+    /**
+     * Specifies the type of the button.
+     */
+    type?: ButtonTileType;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<ButtonTileWeight>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/button-tile.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 PButtonTile = react.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 = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-button-tile');
+    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    hooks.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: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PButtonTile = PButtonTile;

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

@@ -1,6 +1,10 @@
 import { HTMLAttributes } from 'react';
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Defines which slide to be active (zero-based numbering).
+     */
+    activeSlideIndex?: number;
     /**
      * Alignment of heading and description
      */
@@ -38,9 +42,9 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     rewind?: boolean;
     /**
-     * Sets the amount of slides visible at the same time.
+     * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number>;
+    slidesPerPage?: BreakpointCustomizable<number> | "auto";
     /**
      * Adapts the color when used on dark background.
      */
@@ -56,6 +60,10 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     wrapContent?: boolean;
 };
 export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Defines which slide to be active (zero-based numbering).
+     */
+    activeSlideIndex?: number;
     /**
      * Alignment of heading and description
      */
@@ -93,9 +101,9 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     rewind?: boolean;
     /**
-     * Sets the amount of slides visible at the same time.
+     * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number>;
+    slidesPerPage?: BreakpointCustomizable<number> | "auto";
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/carousel.wrapper.js

@@ -5,15 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = react.forwardRef(({ 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, onChange, 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);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', '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/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/fieldset-wrapper.wrapper.d.ts

@@ -26,6 +26,7 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
      */
     theme?: Theme;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * The label text.

package/lib/components/fieldset-wrapper.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-fieldset" instead. */
 const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');