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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -75,6 +76,10 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTableCss as getComponentCss$h } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "caption", "description": "Shows a caption that describes the content of the table." }
+ * @slot {"name": "", "description": "Default slot for the table content." }
+ */
 class DSRTable extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -75,6 +76,11 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTabsBarCss as getComponentCss$c } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `button` or `a` tags which will be rendered as tabs." }
+ *
+ * @controlled {"props": ["activeTabIndex"], "event": "update"}
+ */
 class DSRTabsBar extends Component {
     host;
     tabElements = [];

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-item.mjs

@@ -5,6 +5,9 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTabsItemCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the tab content." }
+ */
 class DSRTabsItem extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -75,6 +76,11 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTabsCss as getComponentCss$a } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `p-tabs-item` tags." }
+ *
+ * @controlled { "props": ["activeTabIndex"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRTabs extends Component {
     host;
     tabsItemElements = [];

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -76,6 +77,9 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTagDismissibleCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the tag content." }
+ */
 class DSRTagDismissible extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -74,12 +75,16 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTagCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getDirectChildHTMLElement, getThemeForIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getDirectChildHTMLElement } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the tag content." }
+ */
 class DSRTag extends Component {
     host;
     render() {
         splitChildren(this.props.children);
+        const hasIcon = !!(this.props.icon || this.props.iconSource);
         const deprecationMap = {
             'background-default': 'background-base',
             'neutral-contrast-high': 'primary',
@@ -88,8 +93,8 @@ class DSRTag extends Component {
             'notification-success': 'notification-success-soft',
             'notification-error': 'notification-error-soft',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8((deprecationMap[this.props.color] || this.props.color), !!getDirectChildHTMLElement(null, 'a,button'), this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [(this.props.icon || this.props.iconSource) && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: getThemeForIcon(this.props.color, this.props.theme), "aria-hidden": "true" })), jsx("div", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8((deprecationMap[this.props.color] || this.props.color), this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [hasIcon && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "primary", size: "x-small", theme: this.props.theme, "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -37,6 +37,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -78,6 +79,12 @@ import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isTyp
 import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the input." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRTextFieldWrapper extends Component {
     host;
     showPassword = false;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.mjs

@@ -5,6 +5,9 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextListItemCss as getComponentCss$5 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the content." }
+ */
 class DSRTextListItem extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.mjs

@@ -6,6 +6,9 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextListCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isListTypeOrdered } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the `p-text-list-item` tags or nested `p-text-list` tags." }
+ */
 class DSRTextList extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.mjs

@@ -6,6 +6,9 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getTextTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the text to render." }
+ */
 class DSRText extends Component {
     host;
     render() {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea-wrapper.mjs

@@ -7,6 +7,12 @@ import { getTextareaWrapperCss as getComponentCss$3 } from '../../../../../../co
 import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the textarea." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRTextareaWrapper extends Component {
     host;
     textarea;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -36,6 +36,7 @@ export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
 export { PMultiSelect } from './lib/components/multi-select.wrapper.mjs';
 export { PMultiSelectOption } from './lib/components/multi-select-option.wrapper.mjs';
+export { POptgroup } from './lib/components/optgroup.wrapper.mjs';
 export { PPagination } from './lib/components/pagination.wrapper.mjs';
 export { PPinCode } from './lib/components/pin-code.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';

package/ssr/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 & {
@@ -85,5 +84,5 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<impor
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/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 & {
@@ -87,5 +86,5 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<import("
      */
     width?: BannerWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/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 & {
@@ -13,5 +12,5 @@ export declare const PButtonGroup: import("react").ForwardRefExoticComponent<imp
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/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 & {
@@ -135,5 +134,5 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<impo
      */
     weight?: ButtonPureWeight;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = BaseProps & {
@@ -125,5 +124,5 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<impo
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/button.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = BaseProps & {
@@ -6,6 +5,10 @@ export type PButtonProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -52,6 +55,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -93,5 +100,5 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      */
     variant?: ButtonVariant;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/canvas.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
 export type PCanvasProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PCanvas: import("react").ForwardRefExoticComponent<import("
      */
     sidebarStartWidth?: CanvasSidebarStartWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
@@ -143,5 +142,5 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      */
     wrapContent?: boolean;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
 export type PCheckboxWrapperProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 export type PContentWrapperProps = BaseProps & {
@@ -17,7 +16,6 @@ export type PContentWrapperProps = BaseProps & {
      */
     width?: ContentWrapperWidth;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
@@ -34,5 +32,5 @@ export declare const PContentWrapper: import("react").ForwardRefExoticComponent<
      */
     width?: ContentWrapperWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/crest.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
 export type PCrestProps = BaseProps & {

package/ssr/esm/lib/components/display.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
 export type PDisplayProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<import(
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/divider.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
 export type PDividerProps = BaseProps & {

package/ssr/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
 export type PFieldsetWrapperProps = BaseProps & {
@@ -27,7 +26,6 @@ export type PFieldsetWrapperProps = BaseProps & {
      */
     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<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
@@ -54,5 +52,5 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/fieldset.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
 export type PFieldsetProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<import
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flex-item.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 export type PFlexItemProps = BaseProps & {
@@ -27,7 +26,6 @@ export type PFlexItemProps = BaseProps & {
      */
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
@@ -54,5 +52,5 @@ export declare const PFlexItem: import("react").ForwardRefExoticComponent<import
      */
     width?: BreakpointCustomizable<FlexItemWidth>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flex.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 export type PFlexProps = BaseProps & {
@@ -27,7 +26,6 @@ export type PFlexProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
@@ -54,5 +52,5 @@ export declare const PFlex: import("react").ForwardRefExoticComponent<import("re
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 export type PFlyoutMultilevelItemProps = BaseProps & {
     /**
@@ -20,5 +19,5 @@ export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComp
      */
     label?: string;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
 export type PFlyoutMultilevelProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponen
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flyout.wrapper.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -14,6 +13,14 @@ export type PFlyoutProps = BaseProps & {
      * Emitted when the component requests to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the flyout is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the flyout is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
      */
@@ -40,6 +47,14 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
      * Emitted when the component requests to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the flyout is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the flyout is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
      */
@@ -53,5 +68,5 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/grid-item.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 export type PGridItemProps = BaseProps & {
@@ -11,7 +10,6 @@ export type PGridItemProps = BaseProps & {
      */
     size?: BreakpointCustomizable<GridItemSize>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
@@ -22,5 +20,5 @@ export declare const PGridItem: import("react").ForwardRefExoticComponent<import
      */
     size?: BreakpointCustomizable<GridItemSize>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/grid.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 export type PGridProps = BaseProps & {
@@ -16,7 +15,6 @@ export type PGridProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
@@ -32,5 +30,5 @@ export declare const PGrid: import("react").ForwardRefExoticComponent<import("re
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/heading.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
 export type PHeadingProps = BaseProps & {
@@ -53,5 +52,5 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<import(
      */
     theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/headline.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
 export type PHeadlineProps = BaseProps & {
@@ -27,7 +26,6 @@ export type PHeadlineProps = BaseProps & {
      */
     variant?: HeadlineVariant;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 export declare const PHeadline: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
@@ -54,5 +52,5 @@ export declare const PHeadline: import("react").ForwardRefExoticComponent<import
      */
     variant?: HeadlineVariant;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
 export type PIconProps = BaseProps & {