@porsche-design-system/components-react 3.10.0-rc.3 → 3.10.0-rc.5

package/CHANGELOG.md

@@ -14,6 +14,81 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.10.0-rc.5] - 2024-01-16
+
+#### Changed
+
+- `visibility` css property can be overridden on all components, e.g. to make use of `visibility: hidden;`  
+  ([#2988](https://github.com/porsche-design-system/porsche-design-system/pull/2988))
+- `Carousel`: Named slot `header` renamed to `controls`
+  ([#2992](https://github.com/porsche-design-system/porsche-design-system/pull/2992))
+
+### [3.10.0-rc.4] - 2024-01-15
+
+#### Added
+
+- `Icon`: Auto-flipping icons (certain ones only) in RTL (right-to-left) mode
+  ([#2957](https://github.com/porsche-design-system/porsche-design-system/pull/2957))
+- `Carousel`: Prop `heading-size`, named slot `header`
+  ([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915))
+- `Accordion`: support for custom click area for `compact` variant
+  ([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920))
+- `@font-face` supports Middle East languages
+  ([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946))
+- Partials: `getFontLinks` supports preloading `arabic`, `pashto` and `urdu` subsets
+  ([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946))
+
+#### Changed
+
+- `Flyout Navigation`: Improved validation and `activeIdentifier` isn't automatically updated anymore
+  ([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935))
+- `Carousel`: Position and width of heading and description
+  ([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915))
+- `Model Signature` asset for `model="macan"`
+- Aligned naming of all `CustomEvent<T>` types and deprecated old ones since they are in fact typing the `detail: T`
+  property of the event
+
+```diff
+- AccordionUpdateEvent
++ AccordionUpdateEventDetail
+- CarouselUpdateEvent
++ CarouselUpdateEventDetail
+- FlyoutNavigationUpdateEvent
++ FlyoutNavigationUpdateEventDetail
+- LinkTileProductLikeEvent
++ LinkTileProductLikeEventDetail
+- MultiSelectUpdateEvent
++ MultiSelectUpdateEventDetail
+- PaginationUpdateEvent
++ PaginationUpdateEventDetail
+- PinCodeUpdateEvent
++ PinCodeUpdateEventDetail
+- SegmentedControlUpdateEvent
++ SegmentedControlUpdateEventDetail
+- StepperHorizontalUpdateEvent
++ StepperHorizontalUpdateEventDetail
+- SwitchUpdateEvent
++ SwitchUpdateEventDetail
+- TableUpdateEvent
++ TableUpdateEventDetail
+- TabsUpdateEvent
++ TabsUpdateEventDetail
+- TabsBarUpdateEvent
++ TabsBarUpdateEventDetail
+```
+
+#### Fixed
+
+- `Pin Code`: Focus correct input when clicking on label
+  ([#2985](https://github.com/porsche-design-system/porsche-design-system/pull/2985))
+- `Flyout Navigation`: Focus dismiss button after opening
+  ([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935))
+- `Accordion`: Alignment of slotted heading with custom padding
+  ([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920))
+- `Modal`: Scrollbar is hidden ([#2907](https://github.com/porsche-design-system/porsche-design-system/pull/2907))
+- `Toast`: `max-width` when used in scale mode
+  ([#2960](https://github.com/porsche-design-system/porsche-design-system/pull/2960))
+
 ### [3.10.0-rc.3] - 2023-12-12
 
 ### [3.10.0-rc.2] - 2023-12-12

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/public-api.cjs

@@ -74,7 +74,7 @@ var utils = require('./utils.cjs');
 
 
 
-Object.defineProperty(exports, 'componentsReady', {
+Object.defineProperty(exports, "componentsReady", {
 	enumerable: true,
 	get: function () { return componentsJs.componentsReady; }
 });

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+import type { AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -12,11 +12,11 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @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<AccordionUpdateEvent>) => void;
+    onAccordionChange?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Emitted when accordion state is changed.
      */
-    onUpdate?: (event: CustomEvent<AccordionUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
      * Defines if accordion is open.
      */
@@ -46,11 +46,11 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     /**
      * @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<AccordionUpdateEvent>) => void) | undefined;
+    onAccordionChange?: ((event: CustomEvent<AccordionUpdateEventDetail>) => void) | undefined;
     /**
      * Emitted when accordion state is changed.
      */
-    onUpdate?: ((event: CustomEvent<AccordionUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<AccordionUpdateEventDetail>) => void) | undefined;
     /**
      * Defines if accordion is open.
      */

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

@@ -103,7 +103,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -9,6 +9,10 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Alignment of heading and description
      */
     alignHeader?: CarouselAlignHeader;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
     /**
      * Defines the description used in the carousel.
      */
@@ -21,6 +25,10 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Defines the heading used in the carousel.
      */
     heading?: string;
+    /**
+     * Defines the heading size used in the carousel.
+     */
+    headingSize?: CarouselHeadingSize;
     /**
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
@@ -28,11 +36,11 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: (event: CustomEvent<CarouselUpdateEvent>) => void;
+    onCarouselChange?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * Emitted when carousel's content slides.
      */
-    onUpdate?: (event: CustomEvent<CarouselUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */
@@ -72,6 +80,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      * Alignment of heading and description
      */
     alignHeader?: "center" | "start" | "left" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
     /**
      * Defines the description used in the carousel.
      */
@@ -84,6 +96,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      * Defines the heading used in the carousel.
      */
     heading?: string | undefined;
+    /**
+     * Defines the heading size used in the carousel.
+     */
+    headingSize?: CarouselHeadingSize | undefined;
     /**
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
@@ -91,11 +107,11 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: ((event: CustomEvent<CarouselUpdateEvent>) => void) | undefined;
+    onCarouselChange?: ((event: CustomEvent<CarouselUpdateEventDetail>) => void) | undefined;
     /**
      * Emitted when carousel's content slides.
      */
-    onUpdate?: ((event: CustomEvent<CarouselUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<CarouselUpdateEventDetail>) => void) | undefined;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */

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

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -10,7 +10,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     label?: string;
     /**
-     * __Experimental__: Disables the checkbox and shows a loading indicator.
+     * @experimental Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean;
     /**
@@ -36,7 +36,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      */
     label?: string | undefined;
     /**
-     * __Experimental__: Disables the checkbox and shows a loading indicator.
+     * @experimental Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean | undefined;
     /**

package/esm/lib/components/flyout-navigation-item.wrapper.d.ts

@@ -1,10 +1,22 @@
 import { type HTMLAttributes } from 'react';
 export type PFlyoutNavigationItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-navigation is set to this value.
+     */
     identifier: string;
+    /**
+     * Label of the item.
+     */
     label?: string;
 };
 export declare const PFlyoutNavigationItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-navigation is set to this value.
+     */
     identifier: string;
+    /**
+     * Label of the item.
+     */
     label?: string | undefined;
 } & {
     children?: import("react").ReactNode;

package/esm/lib/components/flyout-navigation.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, FlyoutNavigationAriaAttribute, FlyoutNavigationUpdateEvent, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutNavigationAriaAttribute, FlyoutNavigationUpdateEventDetail, Theme } from '../types';
 export type PFlyoutNavigationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which flyout-navigation-item to be visualized as opened.
@@ -16,7 +16,7 @@ export type PFlyoutNavigationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when activeIdentifier is changed.
      */
-    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEventDetail>) => void;
     /**
      * If true, the flyout-navigation is visualized as opened.
      */
@@ -42,7 +42,7 @@ export declare const PFlyoutNavigation: import("react").ForwardRefExoticComponen
     /**
      * Emitted when activeIdentifier is changed.
      */
-    onUpdate?: ((event: CustomEvent<FlyoutNavigationUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<FlyoutNavigationUpdateEventDetail>) => void) | undefined;
     /**
      * If true, the flyout-navigation is visualized as opened.
      */

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

@@ -52,7 +52,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * The size of the icon.
      */
-    size?: "inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | undefined;
+    size?: "inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small" | undefined;
     /**
      * Specifies a whole icon path which can be used for custom icons.
      */

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

@@ -103,7 +103,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */

package/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEvent, LinkTileProductTarget, Theme } from '../types';
+import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, Theme } from '../types';
 export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aspect ratio of the link-tile-product.
@@ -28,7 +28,7 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when the like button is clicked.
      */
-    onLike?: (event: CustomEvent<LinkTileProductLikeEvent>) => void;
+    onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
      * Product price
      */
@@ -74,7 +74,7 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
     /**
      * Emitted when the like button is clicked.
      */
-    onLike?: ((event: CustomEvent<LinkTileProductLikeEvent>) => void) | undefined;
+    onLike?: ((event: CustomEvent<LinkTileProductLikeEventDetail>) => void) | undefined;
     /**
      * Product price
      */

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEvent, MultiSelectState, Theme } from '../types';
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
 export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The description text.
@@ -32,7 +32,7 @@ export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when the selection is changed.
      */
-    onUpdate?: (event: CustomEvent<MultiSelectUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<MultiSelectUpdateEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
@@ -82,7 +82,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
     /**
      * Emitted when the selection is changed.
      */
-    onUpdate?: ((event: CustomEvent<MultiSelectUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<MultiSelectUpdateEventDetail>) => void) | undefined;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEvent, Theme } from '../types';
+import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEventDetail, Theme } from '../types';
 export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Index of the currently active page.
@@ -37,11 +37,11 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PaginationUpdateEvent>) => void;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEventDetail>) => void;
     /**
      * Emitted when the page changes.
      */
-    onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEventDetail>) => void;
     /**
      * Show or hide the button to jump to the last page.
      */
@@ -92,11 +92,11 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onPageChange?: ((event: CustomEvent<PaginationUpdateEvent>) => void) | undefined;
+    onPageChange?: ((event: CustomEvent<PaginationUpdateEventDetail>) => void) | undefined;
     /**
      * Emitted when the page changes.
      */
-    onUpdate?: ((event: CustomEvent<PaginationUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<PaginationUpdateEventDetail>) => void) | undefined;
     /**
      * Show or hide the button to jump to the last page.
      */

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEvent, PinCodeState, Theme, PinCodeType } from '../types';
+import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEventDetail, PinCodeState, Theme, PinCodeType } from '../types';
 export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The description text.
@@ -36,7 +36,7 @@ export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when selected element changes.
      */
-    onUpdate?: (event: CustomEvent<PinCodeUpdateEvent>) => void;
+    onUpdate?: (event: CustomEvent<PinCodeUpdateEventDetail>) => void;
     /**
      * Marks the Pin Code as required.
      */
@@ -94,7 +94,7 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Emitted when selected element changes.
      */
-    onUpdate?: ((event: CustomEvent<PinCodeUpdateEvent>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<PinCodeUpdateEventDetail>) => void) | undefined;
     /**
      * Marks the Pin Code as required.
      */

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

@@ -10,7 +10,7 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     label?: string;
     /**
-     * __Experimental__: Disables the radio button and shows a loading indicator.
+     * @experimental Disables the radio button and shows a loading indicator.
      */
     loading?: boolean;
     /**
@@ -36,7 +36,7 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      */
     label?: string | undefined;
     /**
-     * __Experimental__: Disables the radio button and shows a loading indicator.
+     * @experimental Disables the radio button and shows a loading indicator.
      */
     loading?: boolean | undefined;
     /**

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

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

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

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

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

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

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

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