@porsche-design-system/components-react 4.2.0-rc.5 → 4.3.0-rc.0

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

@@ -19,7 +19,7 @@ class DSRScroller extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$s(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", ...parseAndGetAriaAttributes(this.props.aria), tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -24,7 +24,7 @@ class DSRSheet extends Component {
         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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getTabsBarCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getSanitizedActiveTabIndex } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getSanitizedActiveTabIndex, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';
 
 /**
@@ -22,9 +22,14 @@ 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] }));
+        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',
+                                    ...parseAndGetAriaAttributes(this.props.aria),
+                                },
+                            }), 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,12 +16,12 @@ 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);
         const style = minifyCss(getComponentCss$9());
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, activeTabIndex: this.props.activeTabIndex, aria: this.props.aria, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

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;

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

@@ -2,155 +2,155 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 export type PButtonPureProps = BaseProps & {
     /**
-     * Displays the button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @default false
      */
     active?: boolean;
     /**
-     * Aligns the label.
+     * Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * Stretches the area between icon and label to max available space.
+     * Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
 };
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Displays the button in its active state.
+     * Visually marks the button as the currently active or selected item, useful for navigation and toggle patterns.
      * @default false
      */
     active?: boolean;
     /**
-     * Aligns the label.
+     * Sets the label position relative to the icon — `start` places it before, `end` places it after. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the button to improve accessibility for screen readers.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
-     * The color.
+     * Sets the foreground color of the button's icon and label text.
      * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
-     * Disables the button. No events will be triggered while disabled state is active.
+     * Disables the button, preventing all interaction and blocking events.
      * @default false
      */
     disabled?: boolean;
     /**
-     * The id of a form element the button should be associated with.
+     * Associates the button with a form element by its ID, so it can submit or reset that form even when placed outside of it.
      */
     form?: string;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown.
+     * Sets the icon displayed next to the label.
      * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a path to a custom SVG icon, used instead of the built-in icon set.
      */
     iconSource?: string;
     /**
-     * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the button and replaces its icon with a loading spinner to indicate an ongoing operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     * Sets the name submitted with the form data when this button triggers form submission.
      */
     name?: string;
     /**
-     * Size of the button.
+     * Sets the font size of the button label. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
-     * Stretches the area between icon and label to max available space.
+     * Expands the space between icon and label to fill the full container width. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
-     * Specifies the type of the button.
+     * Sets the button's HTML type — `submit` sends the form, `reset` clears it, `button` performs no default action.
      * @default 'submit'
      */
     type?: ButtonPureType;
     /**
-     * Shows an underline under the label.
+     * Adds a text underline to the label to reinforce the button's link-like appearance.
      * @default false
      */
     underline?: boolean;
     /**
-     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     * Sets the value submitted with the form data when this button triggers form submission, paired with `name`.
      */
     value?: string;
 } & {