@porsche-design-system/components-react 4.2.0-rc.4 → 4.2.0

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

@@ -15,7 +15,7 @@ import { messageId, StateMessage } from './state-message.mjs';
 class DSRFieldset extends Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss(getComponentCss$X(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', this.props.aria), children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));

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

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getFlagCss as getComponentCss$W } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { buildFlagUrl, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { parseAndGetAriaAttributes, buildFlagUrl } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRFlag extends Component {
     host;

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getFlyoutCss as getComponentCss$V } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -23,12 +23,18 @@ class DSRFlyout extends Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior));
+        const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },

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

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getIconCss as getComponentCss$T } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { buildIconUrl, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { parseAndGetAriaAttributes, buildIconUrl } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRIcon extends Component {
     host;

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

@@ -17,7 +17,7 @@ class DSRInlineNotification extends Component {
     host;
     hasHeadingSlot;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
         const headingText = this.props.heading ? this.props.heading : namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children;
         const style = minifyCss(getComponentCss$S(this.props.state, !!this.props.actionLabel, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getLinkCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { hasVisibleIcon, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getModalCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -20,8 +20,14 @@ class DSRModal extends Component {
     footer;
     hasHeader;
     hasFooter;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         this.props.disableCloseButton ? false : this.props.dismissButton;

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

@@ -66,7 +66,7 @@ class DSRMultiSelect extends Component {
         // triggers value watcher which syncs form value
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasCustomFilterSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'filter').length > 0;
         const hasCustomSelectedSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'selected').length > 0;
         const buttonId = 'button';

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

@@ -4,8 +4,8 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getPinCodeCss as getComponentCss$w } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { labelId, descriptionId, getFieldsetAriaAttributes, setAriaIDREF, isCurrentInput } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { loadingId, LoadingMessage } from './loading-message.mjs';
+import { labelId, descriptionId, setAriaIDREF, isCurrentInput, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { LoadingMessage, loadingId } from './loading-message.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PSpinner } from '../components/spinner.wrapper.mjs';
@@ -35,7 +35,7 @@ class DSRPinCode extends Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         // reset array of input elements
         this.inputElements = [];
         const currentInputId = 'current-input';

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

@@ -9,7 +9,7 @@ import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the popover content." }
- * @slot {"name": "button", "description": "Slot for custom button." }
+ * @slot {"name": "button", "description": "Renders a custom trigger button. When used, the default info button is replaced." }
  */
 class DSRPopover extends Component {
     host;
@@ -23,7 +23,7 @@ class DSRPopover extends Component {
     // TODO: This should be updated when slot is changed
     hasSlottedButton;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss(getComponentCss$v()).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4');
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsxs("button", { type: "button", ...parseAndGetAriaAttributes({

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

@@ -4,8 +4,8 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getRadioGroupCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { descriptionId, getFieldsetAriaAttributes, setAriaIDREF, labelId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { loadingId, LoadingMessage } from './loading-message.mjs';
+import { descriptionId, labelId, setAriaIDREF, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { LoadingMessage, loadingId } from './loading-message.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PSpinner } from '../components/spinner.wrapper.mjs';
@@ -35,7 +35,7 @@ class DSRRadioGroup extends Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const inputDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const inputMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$t(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction));

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

@@ -13,7 +13,7 @@ import { PIcon } from '../components/icon.wrapper.mjs';
 class DSRSegmentedControlItem extends Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children} = splitChildren(this.props.children);
         // this additional validation is still needed because undefined is allowed with current propTypes
         const hasIcon = !!this.props.icon || !!this.props.iconSource;
         const hasSlottedContent = !!children.length;

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSegmentedControlCss as getComponentCss$q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { descriptionId, getFieldsetAriaAttributes, labelId, setAriaIDREF } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { descriptionId, labelId, setAriaIDREF, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';

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

@@ -61,7 +61,7 @@ class DSRSelect extends Component {
         // triggers value watcher which syncs form value
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasCustomFilterSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'filter').length > 0;
         const hasCustomSelectedSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'selected').length > 0;
         const buttonId = 'button';

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSheetCss as getComponentCss$n } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -17,8 +17,14 @@ class DSRSheet extends Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss(getComponentCss$n(this.props.open, this.props.background, this.props.dismissButton));

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

@@ -16,7 +16,7 @@ class DSRStepperHorizontal extends Component {
     slot;
     resizeObserver;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme } }
             : child);

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

@@ -13,7 +13,7 @@ import { PScroller } from '../components/scroller.wrapper.mjs';
 class DSRTable extends Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasSlottedCaption = namedSlotChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
         const captionId = 'caption';
         const tableAttr = this.props.caption

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

@@ -22,7 +22,7 @@ class DSRTabsBar extends Component {
     isTabList;
     resizeObserver;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children} = splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$b(this.props.background, this.props.size, this.props.compact, getSanitizedActiveTabIndex(this.props.activeTabIndex, children)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && { aria: { role: 'tablist' } }), children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }

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

@@ -16,7 +16,7 @@ class DSRTabs extends Component {
     tabsItems = [];
     slot;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);

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

@@ -33,7 +33,7 @@ class DSRTextarea extends Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const id = 'textarea';
         const textareaDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const textareaMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;

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

@@ -2,17 +2,17 @@ import type { BaseProps } from '../../BaseProps';
 import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, BreakpointCustomizable, AccordionUpdateEventDetail, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
-     * Aligns the marker within the summary section.
+     * Positions the expand/collapse marker icon at the start or end of the summary section.
      * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
      * @default 'none'
      */
     background?: AccordionBackground;
     /**
-     * Displays the accordion in compact mode.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
      */
     compact?: boolean;
     /**
@@ -30,7 +30,7 @@ export type PAccordionProps = BaseProps & {
      */
     indent?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the accordion state changes.
+     * Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
@@ -49,17 +49,17 @@ export type PAccordionProps = BaseProps & {
 };
 export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Aligns the marker within the summary section.
+     * Positions the expand/collapse marker icon at the start or end of the summary section.
      * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
      * @default 'none'
      */
     background?: AccordionBackground;
     /**
-     * Displays the accordion in compact mode.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
      */
     compact?: boolean;
     /**
@@ -77,7 +77,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     indent?: BreakpointCustomizable<boolean>;
     /**
-     * Emitted when the accordion state changes.
+     * Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**

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

@@ -2,82 +2,82 @@ import type { BaseProps } from '../../BaseProps';
 import type { BannerHeadingTag, BreakpointCustomizable, BannerPosition, BannerState } from '../types';
 export type PBannerProps = BaseProps & {
     /**
-     * Sets the description text of the banner.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * Shows a dismiss button allowing the banner to be closed.
+     * Shows a dismiss button so the user can manually close the banner.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Sets the heading text of the banner.
+     * Sets the heading text displayed at the top of the banner.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets the heading tag for proper semantic structure within the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure for the heading.
      * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the banner is requested to be dismissed.
+     * Emitted when the user closes the banner via the dismiss button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Controls whether the banner is open or closed.
+     * Controls whether the banner is visible. Set to `true` to show it and `false` to hide it.
      * @default false
      */
     open: boolean;
     /**
-     * Sets the position of the banner.
+     * Sets the position of the banner on screen — `top` or `bottom`. Supports responsive breakpoint values.
      * @default { base: 'bottom', s: 'top' }
      */
     position?: BreakpointCustomizable<BannerPosition>;
     /**
-     * Defines the visual state of the banner.
+     * Sets the visual state of the banner — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: BannerState;
 };
 export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Sets the description text of the banner.
+     * Sets the supporting description text shown below the heading.
      * @default ''
      */
     description?: string;
     /**
-     * Shows a dismiss button allowing the banner to be closed.
+     * Shows a dismiss button so the user can manually close the banner.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Sets the heading text of the banner.
+     * Sets the heading text displayed at the top of the banner.
      * @default ''
      */
     heading?: string;
     /**
-     * Sets the heading tag for proper semantic structure within the page.
+     * Sets the HTML heading tag (e.g. h2, h3) to maintain correct document structure for the heading.
      * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the banner is requested to be dismissed.
+     * Emitted when the user closes the banner via the dismiss button or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Controls whether the banner is open or closed.
+     * Controls whether the banner is visible. Set to `true` to show it and `false` to hide it.
      * @default false
      */
     open: boolean;
     /**
-     * Sets the position of the banner.
+     * Sets the position of the banner on screen — `top` or `bottom`. Supports responsive breakpoint values.
      * @default { base: 'bottom', s: 'top' }
      */
     position?: BreakpointCustomizable<BannerPosition>;
     /**
-     * Defines the visual state of the banner.
+     * Sets the visual state of the banner — controls the icon and color scheme (`info`, `warning`, `error`, `success`).
      * @default 'info'
      */
     state?: BannerState;