@porsche-design-system/components-react 3.16.0 → 3.17.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,89 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.17.0-rc.1] - 2024-07-31
+
+#### Added
+
+- `Button`, `Link`:
+  - Prop `variant` extended by value `ghost`
+    ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+  - Prop `compact` ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+
+#### Fixed
+
+- `Tabs Bar`: fixed tabindex issue when `Tabs Bar` is rendered with the `Scroller` component
+  ([#3421](https://github.com/porsche-design-system/porsche-design-system/pull/3421))
+
+### [3.17.0-rc.0] - 2024-07-29
+
+#### Added
+
+- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
+  - Named slot `header` ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+- `Link Tile`, `Button Tile`: Prop `size` extended by value `large`
+  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+- `Tag`:
+  - Prop `compact` ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
+  - Prop `color` extended by value `background-frosted`
+    ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
+- Styles: `theme{Light|Dark}BackgroundFrosted` and `$pds-theme-{light|dark}-background-frosted` color
+  ([#3409](https://github.com/porsche-design-system/porsche-design-system/pull/3409))
+- `Optgroup`: Usable in combination with `Select` and `Multi Select`
+  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
+- `Flyout`, `Modal`: Add custom events `motionVisibleEnd` and `motionHiddenEnd` to notify when opening and closing
+  transitions are complete ([#3418](https://github.com/porsche-design-system/porsche-design-system/pull/3418))
+
+#### Changed
+
+- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
+  - Layout behaviour is able to break out of its aspect ratio in case content overflows to be a11y compliant and/or to
+    improve visual alignment in CSS Grid context
+    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+  - Values `1:1 | 4:3 | 3:4 | 16:9 | 9:16` of prop `aspect-ratio` are deprecated and mapped to new values
+    `1/1 | 4/3 | 3/4 | 16/9 | 9/16` to be aligned with CSS spec
+    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+
+```diff
+- <p-link-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile>
++ <p-link-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile>
+
+- <p-button-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-button-tile>
++ <p-button-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-button-tile>
+
+- <p-link-tile-model-signature aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile-model-signature>
++ <p-link-tile-model-signature aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile-model-signature>
+```
+
+- `Link Tile`, `Button Tile`: Value `default` of prop `size` is deprecated and mapped to new value `medium` to be in
+  sync with typography sizing definition
+  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+
+```diff
+- <p-link-tile size="default"></p-link-tile>
++ <p-link-tile size="medium"></p-link-tile>
+
+- <p-button-tile size="default"></p-button-tile>
++ <p-button-tile size="medium"></p-button-tile>
+```
+
+- `Icon`: All icons are up-to-date with the One UI look
+- Shorten asset filenames
+- `Carousel`: Slides and `controls` slot are centered if `alignHeader` prop is set to `center` and amount of slides is
+  less than `slidesPerPage` ([#3372](https://github.com/porsche-design-system/porsche-design-system/pull/3372))
+
+#### Fixed
+
+- `Link Pure`: Broken with `alignLabel="start"`, hidden label & nested anchor
+  ([#3379](https://github.com/porsche-design-system/porsche-design-system/pull/3379))
+- `Textfield Wrapper`, `Textarea Wrapper`: Conditionally rendered component throws
+  `TypeError: Cannot read properties of undefined (reading 'type')`
+  ([#3383](https://github.com/porsche-design-system/porsche-design-system/pull/3383))
+- `Link Tile`: Broken word-break & hyphens Safari
+  ([#3397](https://github.com/porsche-design-system/porsche-design-system/pull/3397))
+- `Select Wrapper`: `optgroup` styling and behavior
+  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
+
 ### [3.16.0] - 2024-07-02
 
 ### [3.16.0-rc.2] - 2024-07-02
@@ -26,7 +109,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 #### Changed
 
-- `Flyout Navigation`, `Flyout Navigation Item`: renamed (experimental) component to `Flyout Multilevel` and
+- `Flyout Navigation`, `Flyout Navigation Item`: Renamed (experimental) component to `Flyout Multilevel` and
   `Flyout Multilevel Item` ([#3351](https://github.com/porsche-design-system/porsche-design-system/pull/3351))
 - `Toast`: Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
   https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and

package/cjs/lib/components/button-tile.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];

package/cjs/lib/components/button.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/content-wrapper.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-content-wrapper');

package/cjs/lib/components/fieldset-wrapper.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @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, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');

package/cjs/lib/components/flex-item.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlexItem = react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flex-item');

package/cjs/lib/components/flex.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlex = react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flex');

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,9 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
     const propsToSync = [aria, disableBackdropClick, open, position, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {

package/cjs/lib/components/grid-item.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGridItem = react.forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-grid-item');

package/cjs/lib/components/grid.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGrid = react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-grid');

package/cjs/lib/components/headline.wrapper.cjs

@@ -6,7 +6,6 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 const PHeadline = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-headline');

package/cjs/lib/components/link-social.wrapper.cjs

@@ -6,14 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkSocial = react.forwardRef(({ compact = false, hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [compact, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/link-tile-model-signature.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkTileModelSignature = react.forwardRef(({ aspectRatio = '3:4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTileModelSignature = react.forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile-model-signature');
     const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];

package/cjs/lib/components/link-tile.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];

package/cjs/lib/components/link.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/modal.wrapper.cjs

@@ -6,10 +6,12 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModal = react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-modal');
     const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {

package/cjs/lib/components/optgroup.wrapper.cjs

@@ -0,0 +1,26 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const POptgroup = react.forwardRef(({ disabled = false, label, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-optgroup');
+    const propsToSync = [disabled, label];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.POptgroup = POptgroup;

package/cjs/lib/components/tag.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, ...rest }, ref) => {
+const PTag = react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme || hooks.useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/public-api.cjs

@@ -38,6 +38,7 @@ var modal_wrapper = require('./lib/components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.cjs');
 var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
 var multiSelectOption_wrapper = require('./lib/components/multi-select-option.wrapper.cjs');
+var optgroup_wrapper = require('./lib/components/optgroup.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
 var pinCode_wrapper = require('./lib/components/pin-code.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
@@ -118,6 +119,7 @@ exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
 exports.PMultiSelectOption = multiSelectOption_wrapper.PMultiSelectOption;
+exports.POptgroup = optgroup_wrapper.POptgroup;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPinCode = pinCode_wrapper.PPinCode;
 exports.PPopover = popover_wrapper.PPopover;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 export type PAccordionProps = BaseProps & {
@@ -47,43 +46,43 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<impor
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
-    compact?: boolean | undefined;
+    compact?: boolean;
     /**
      * Defines the heading used in accordion.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    headingTag?: AccordionHeadingTag;
     /**
      * @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<AccordionUpdateEventDetail>) => void) | undefined;
+    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
-    onUpdate?: ((event: CustomEvent<AccordionUpdateEventDetail>) => void) | undefined;
+    onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Defines if accordion is open.
      */
-    open?: boolean | undefined;
+    open?: boolean;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
+    size?: BreakpointCustomizable<AccordionSize>;
     /**
      * @experimental Sticks the Accordion heading at the top, fixed while scrolling
      */
-    sticky?: boolean | undefined;
+    sticky?: boolean;
     /**
      * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    tag?: AccordionTag;
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
 export type PBannerProps = BaseProps & {
@@ -48,23 +47,23 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<import("
     /**
      * Description of the banner.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * If false, the banner will not have a dismiss button.
      */
-    dismissButton?: boolean | undefined;
+    dismissButton?: boolean;
     /**
      * Heading of the banner.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    headingTag?: BannerHeadingTag;
     /**
      * Emitted when the close button is clicked.
      */
-    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * If true, the banner is open.
      */
@@ -72,20 +71,20 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<import("
     /**
      * @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 | undefined;
+    persistent?: boolean;
     /**
      * State of the banner.
      */
-    state?: "warning" | "error" | "info" | "neutral" | undefined;
+    state?: BannerState;
     /**
      * Adapts the banner color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    width?: "extended" | "basic" | "fluid" | undefined;
+    width?: BannerWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
 export type PButtonPureProps = BaseProps & {
@@ -72,68 +71,68 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<impo
     /**
      * Display button in active state.
      */
-    active?: boolean | undefined;
+    active?: boolean;
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<"start" | "end" | "left" | "right"> | undefined;
+    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
+    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown.
      */
-    icon?: import("../types").LinkButtonIconName | undefined;
+    icon?: ButtonPureIcon;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string | undefined;
+    iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean | undefined;
+    loading?: boolean;
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      */
-    name?: string | undefined;
+    name?: string;
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small"> | undefined;
+    size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
-    stretch?: BreakpointCustomizable<boolean> | undefined;
+    stretch?: BreakpointCustomizable<boolean>;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
-    type?: "button" | "reset" | "submit" | undefined;
+    type?: ButtonPureType;
     /**
      * Shows an underline under the label.
      */
-    underline?: boolean | undefined;
+    underline?: boolean;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
-    value?: string | undefined;
+    value?: string;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
+    weight?: ButtonPureWeight;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;