@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3268,18 +3268,15 @@ const getComboboxAriaAttributes = (isOpen, isRequired, labelId, descriptionId, d
     };
 };
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 2px instead. */
-const borderWidthBase = '2px';
-
 const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
 const fontFamily = fontPorscheNext;
 
-const leadingNormal = 'calc(6px + 2.125ex)';
+const leadingNormal$1 = 'calc(6px + 2.125ex)';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
-const fontLineHeight = leadingNormal;
+const fontLineHeight = leadingNormal$1;
 
 const typescaleSm = '1rem';
 
@@ -3438,7 +3435,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.4"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3459,64 +3456,6 @@ const supportsNativePopover = () => {
 const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
-
-/*
- Stencil Client Platform v4.23.2 | MIT Licensed | https://stenciljs.com
- */
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/utils/result.ts
-var result_exports = {};
-__export(result_exports, {
-  err: () => err,
-  map: () => map,
-  ok: () => ok,
-  unwrap: () => unwrap,
-  unwrapErr: () => unwrapErr
-});
-var ok = (value) => ({
-  isOk: true,
-  isErr: false,
-  value
-});
-var err = (value) => ({
-  isOk: false,
-  isErr: true,
-  value
-});
-function map(result, fn) {
-  if (result.isOk) {
-    const val = fn(result.value);
-    if (val instanceof Promise) {
-      return val.then((newVal) => ok(newVal));
-    } else {
-      return ok(val);
-    }
-  }
-  if (result.isErr) {
-    const value = result.value;
-    return err(value);
-  }
-  throw "should never get here";
-}
-var unwrap = (result) => {
-  if (result.isOk) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-var unwrapErr = (result) => {
-  if (result.isErr) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3617,6 +3556,15 @@ const internalValidateProps = {
 const breakpointCustomizableTemplate = `value, ${internalValidateProps
     .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
     .replace(/"/g, '')}`;
+const getBannerAriaAttributes = (state, labelId, descriptionId) => {
+    const isAlert = state === 'warning' || state === 'error';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        'aria-live': isAlert ? 'assertive' : 'polite',
+        'aria-labelledby': labelId,
+        'aria-describedby': descriptionId,
+    };
+};
 const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),
@@ -3765,16 +3713,7 @@ const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
     }
     return buildIconUrl(DEFAULT_ICON_NAME);
 };
-const getInlineNotificationIconName = (state) => {
-    const iconMap = {
-        info: 'information-filled',
-        warning: 'warning-filled',
-        success: 'success-filled',
-        error: 'error-filled',
-    };
-    return iconMap[state];
-};
-const getContentAriaAttributes = (state, labelId, descriptionId) => {
+const getInlineNotificationAriaAttributes = (state, labelId, descriptionId) => {
     const isAlert = state === 'warning' || state === 'error';
     return {
         role: isAlert ? 'alert' : 'status',
@@ -3917,7 +3856,7 @@ const tempDiv = hasDocument ? document.createElement('div') : undefined;
 if (tempDiv) {
     tempDiv.style.position = 'absolute';
     tempDiv.style.visibility = 'hidden';
-    tempDiv.style.border = `${borderWidthBase} solid`;
+    tempDiv.style.border = '1px solid';
     tempDiv.style.boxSizing = 'border-box';
     tempDiv.style.font = BUTTON_FONT.replace(fontFamily, tempFont);
 }
@@ -3959,4 +3898,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationIconName, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -5,22 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRBanner } from '../dsr-components/banner.mjs';
 
-const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, children, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, position = { base: 'bottom', s: 'top' }, state = 'info', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, position, state];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                ...{ "popover": "manual" },
-                children: (jsx(DSRBanner, { description, dismissButton, heading, headingTag, open, state, children })),
+                children: (jsx(DSRBanner, { description, dismissButton, heading, headingTag, open, position, state, children })),
             }
             : {
                 children,

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

@@ -4,7 +4,8 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getBannerCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { PInlineNotification } from '../components/inline-notification.wrapper.mjs';
+import { getBannerAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { PButton } from '../components/button.wrapper.mjs';
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
@@ -14,12 +15,16 @@ import { PInlineNotification } from '../components/inline-notification.wrapper.m
  */
 class DSRBanner extends Component {
     host;
-    inlineNotificationElement;
-    closeBtn;
+    refPopover;
+    refDismiss;
     render() {
-        const { namedSlotChildren} = splitChildren(this.props.children);
-        const style = minifyCss(getComponentCss$18(this.props.open));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.props.dismissButton, "aria-hidden": this.props.open ? 'false' : 'true', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 && jsx("slot", { name: "heading", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+        splitChildren(this.props.children);
+        const bannerId = 'banner';
+        const labelId = 'heading';
+        const descriptionId = 'description';
+        const Heading = this.props.headingTag;
+        const style = minifyCss(getComponentCss$18(this.props.open, this.props.position, this.props.state, this.props.dismissButton));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { id: bannerId, popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...getBannerAriaAttributes(this.props.state, labelId, descriptionId), children: jsxs("div", { className: "banner", children: [this.props.heading ? jsx(Heading, { id: labelId, children: this.props.heading }) : jsx("slot", { name: "heading" }), this.props.description ? jsx("p", { id: descriptionId, children: this.props.description }) : jsx("slot", { name: "description" }), this.props.dismissButton && (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, "aria-controls": bannerId, children: "Close banner" }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -20,7 +20,7 @@ class DSRButton extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$15(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading && jsx(PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" }), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,10 +4,9 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getInlineNotificationCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getInlineNotificationIconName, getContentAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getInlineNotificationAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
  * @slot {"name": "heading", "description": "Shows a heading. Can be used to render rich markup." }
@@ -16,14 +15,13 @@ import { PIcon } from '../components/icon.wrapper.mjs';
 class DSRInlineNotification extends Component {
     host;
     render() {
-        const { namedSlotChildren} = splitChildren(this.props.children);
-        const bannerId = 'banner';
-        const labelId = 'label';
+        splitChildren(this.props.children);
+        const notificationId = 'notification';
+        const labelId = 'heading';
         const descriptionId = 'description';
         const Heading = this.props.headingTag;
         const style = minifyCss(getComponentCss$S(this.props.state, !!this.props.actionLabel, this.props.dismissButton));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PIcon, { className: "icon", name: getInlineNotificationIconName(this.props.state), color: this.props.state, "aria-hidden": "true" }), jsxs("div", { id: bannerId, className: "content", ...getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
-                                            (this.props.heading ? (jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsx("slot", { name: "heading" }))), jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsx("slot", {}) })] }), this.props.actionLabel && (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.props.dismissButton && (jsx(PButton, { className: "close", type: "button", variant: "secondary", icon: "close", hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { id: notificationId, className: "notification", ...getInlineNotificationAriaAttributes(this.props.state, labelId, descriptionId), children: [this.props.heading ? jsx(Heading, { id: labelId, children: this.props.heading }) : jsx("slot", { name: "heading" }), this.props.description ? jsx("p", { id: descriptionId, children: this.props.description }) : jsx("slot", {}), this.props.actionLabel && (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.props.dismissButton && (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, "aria-controls": notificationId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'react';
 import '../../provider.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
@@ -8,10 +8,7 @@ const StateMessage = ({ hasMessage, state, message }) => {
     const isErrorState = state === 'error';
     return (
     // needs to be rendered always to have correct behaviour for screen readers
-    jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && [
-            jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'error' : 'success', "aria-hidden": "true" }),
-            message || jsx("slot", { name: "message" }),
-        ] }));
+    jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && (jsxs(Fragment, { children: [jsx(PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'error' : 'success', "aria-hidden": "true" }), message || jsx("slot", { name: "message" })] })) }));
 };
 
 export { StateMessage, messageId };

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

@@ -3,10 +3,12 @@ import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, Ac
 export type PAccordionProps = BaseProps & {
     /**
      * Aligns the marker within the summary section.
+     * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
      * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * @default 'none'
      */
     background?: AccordionBackground;
     /**
@@ -19,6 +21,7 @@ export type PAccordionProps = BaseProps & {
     heading?: string;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -31,6 +34,7 @@ export type PAccordionProps = BaseProps & {
     open?: boolean;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @default 'small'
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
@@ -41,10 +45,12 @@ 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" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the marker within the summary section.
+     * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
      * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * @default 'none'
      */
     background?: AccordionBackground;
     /**
@@ -57,6 +63,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     heading?: string;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -69,6 +76,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     open?: boolean;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @default 'small'
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**

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

@@ -1,62 +1,84 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BannerHeadingTag, BannerState } from '../types';
+import type { BannerHeadingTag, BreakpointCustomizable, BannerPosition, BannerState } from '../types';
 export type PBannerProps = BaseProps & {
     /**
-     * Description of the banner.
+     * Sets the description text of the banner.
+     * @default ''
      */
     description?: string;
     /**
-     * If false, the banner will not have a dismiss button.
+     * Shows a dismiss button allowing the banner to be closed.
+     * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the banner.
+     * Sets the heading text of the banner.
+     * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the heading tag for proper semantic structure within the page.
+     * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the banner is requested to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * If true, the banner is open.
+     * Controls whether the banner is open or closed.
+     * @default false
      */
     open: boolean;
     /**
-     * State of the banner.
+     * Sets the position of the banner.
+     * @default { base: 'bottom', s: 'top' }
+     */
+    position?: BreakpointCustomizable<BannerPosition>;
+    /**
+     * Defines the visual state of the banner.
+     * @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" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Description of the banner.
+     * Sets the description text of the banner.
+     * @default ''
      */
     description?: string;
     /**
-     * If false, the banner will not have a dismiss button.
+     * Shows a dismiss button allowing the banner to be closed.
+     * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the banner.
+     * Sets the heading text of the banner.
+     * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the heading tag for proper semantic structure within the page.
+     * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the banner is requested to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * If true, the banner is open.
+     * Controls whether the banner is open or closed.
+     * @default false
      */
     open: boolean;
     /**
-     * State of the banner.
+     * Sets the position of the banner.
+     * @default { base: 'bottom', s: 'top' }
+     */
+    position?: BreakpointCustomizable<BannerPosition>;
+    /**
+     * Defines the visual state of the banner.
+     * @default 'info'
      */
     state?: BannerState;
 } & {

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

@@ -3,10 +3,12 @@ import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttribut
 export type PButtonPureProps = BaseProps & {
     /**
      * Displays the button in its active state.
+     * @default false
      */
     active?: boolean;
     /**
      * Aligns the label.
+     * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
@@ -15,10 +17,12 @@ export type PButtonPureProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * The color.
+     * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -27,10 +31,12 @@ export type PButtonPureProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown.
+     * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
@@ -39,6 +45,7 @@ export type PButtonPureProps = BaseProps & {
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -47,18 +54,22 @@ export type PButtonPureProps = BaseProps & {
     name?: string;
     /**
      * Size of the button.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
+     * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonPureType;
     /**
      * Shows an underline under the label.
+     * @default false
      */
     underline?: boolean;
     /**
@@ -69,10 +80,12 @@ export type PButtonPureProps = BaseProps & {
 export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the button in its active state.
+     * @default false
      */
     active?: boolean;
     /**
      * Aligns the label.
+     * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
@@ -81,10 +94,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * The color.
+     * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -93,10 +108,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown.
+     * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
@@ -105,6 +122,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -113,18 +131,22 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     name?: string;
     /**
      * Size of the button.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
+     * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonPureType;
     /**
      * Shows an underline under the label.
+     * @default false
      */
     underline?: boolean;
     /**