@porsche-design-system/components-react 3.32.0-rc.0 → 3.32.0-rc.2

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -9,6 +9,7 @@ import { InputBase } from './input-base.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -10,6 +10,7 @@ import { InputBase } from './input-base.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

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

@@ -1,12 +1,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
 import { labelId, descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Required } from './required.mjs';
 
-const Label = ({ hasLabel, hasDescription, 
+const Label = ({ hasLabel, hasDescription, children, 
 // host,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
+    const { namedSlotChildren } = splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxs(Fragment, { children: [hasLabel && (jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
+    return (jsxs(Fragment, { children: [hasLabel && (jsxs("div", { className: "label-wrapper", children: [jsx(TagType, { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxs(Fragment, { children: [label || jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsx(Required, {})] }) }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'label-after').length > 0 && jsx("slot", { name: "label-after" })] })), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
 };
 
 export { Label };

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

@@ -6,7 +6,7 @@ const LegacyLabel = ({ hasLabel, hasDescription,
 label, description, isLoading, isDisabled,
 // formElement,
  }) => {
-    return (jsxs(Fragment, { children: [jsx("label", { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: hasLabel && (jsx(Fragment, { children: label || jsx("slot", { name: "label" }) })) }), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "label-wrapper", children: jsx("label", { className: "label", id: labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: hasLabel && (jsx(Fragment, { children: label || jsx("slot", { name: "label" }) })) }) }), hasDescription && (jsx("span", { className: "label", id: descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsx("slot", { name: "description" }) }))] }));
 };
 
 export { LegacyLabel };

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

@@ -14,6 +14,7 @@ import { NoResultsOption } from './no-results-option.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "selected", "description": "Use this slot to provide custom markup for the selected options display in the button area." }
  * @slot {"name": "", "description": "Default slot for the p-multi-select-option tags." }

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

@@ -12,6 +12,7 @@ import { PSpinner } from '../components/spinner.wrapper.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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." }
  *

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

@@ -1,6 +1,7 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.mjs';
+import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getRadioGroupOptionCss as getComponentCss$y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
@@ -8,20 +9,25 @@ import { Label } from './label.mjs';
 import { messageId } from './state-message.mjs';
 import { PSpinner } from '../components/spinner.wrapper.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)." }
+ */
 class DSRRadioGroupOption extends Component {
     host;
     initialLoading = false;
     inputElement;
     render() {
+        splitChildren(this.props.children);
         const { theme = 'light', selected: isSelected, name, state } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
         const isOptionLoading = this.props.loading && !isSelected;
         const isLoading = isOptionLoading || this.props.loadingParent;
         const id = 'radio-group-option';
         const style = minifyCss(getComponentCss$y(isDisabled, isLoading, state, theme));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
-                                                e.stopPropagation();
-                                            }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }) }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" }))] }), jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getRadioGroupCss as getComponentCss$x } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { labelId, descriptionId, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
@@ -12,8 +12,9 @@ import { PSpinner } from '../components/spinner.wrapper.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 p-radio-group-option tags." }
+ * @slot {"name": "", "description": "Default slot for the p-radio-group-option tags."}
  * @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 DSRRadioGroup extends Component {
@@ -36,9 +37,7 @@ class DSRRadioGroup extends Component {
     render() {
         const { namedSlotChildren} = splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$x(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", 
-                            // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: radiogroup is the correct role for a fieldset containing radio buttons
-                            role: "radiogroup", "aria-required": this.props.required ? 'true' : null, "aria-describedby": this.props.loading ? loadingId : `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "legend", label: this.props.label, description: this.props.description, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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, theme: this.props.theme, host: null }), 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("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', { role: 'radiogroup' }), "aria-describedby": this.props.loading ? loadingId : `${descriptionId} ${messageId}`, "aria-labelledby": labelId, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), 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, theme: this.props.theme, host: null }), 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/segmented-control.mjs

@@ -3,11 +3,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSegmentedControlCss as getComponentCss$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { descriptionId, labelId, getFieldsetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 `p-segmented-control-item` tags." }
  * @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."}
@@ -33,7 +35,7 @@ class DSRSegmentedControl extends Component {
             : child);
         const { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
         const style = minifyCss(getComponentCss$u(minWidth, maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { inert: this.props.disabled, "aria-invalid": this.props.state === 'error' ? 'true' : null, className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "legend", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), 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, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { inert: this.props.disabled, disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": labelId, "aria-describedby": descriptionId, className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), 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, theme: this.props.theme, host: null })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -13,6 +13,7 @@ import { NoResultsOption } from './no-results-option.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "selected", "description": "Use this slot to provide custom markup for the selected option display in the button area." }
  * @slot {"name": "", "description": "Default slot for the `p-select-option` tags." }

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

@@ -9,6 +9,7 @@ import { messageId, StateMessage } from './state-message.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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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." }
  */

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

@@ -6,6 +6,7 @@ export type PButtonGroupProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
+/** @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead. */
 export declare const PButtonGroup: 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"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.

package/ssr/esm/lib/components/radio-group-option.wrapper.d.ts

@@ -34,4 +34,6 @@ export declare const PRadioGroupOption: import("react").ForwardRefExoticComponen
      * The value for the input.
      */
     value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/button-group.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ * @deprecated since v3.32.0, will be removed with next major release. Use simple styles instead.
  */
 export declare class DSRButtonGroup extends Component<any> {
     host: HTMLElement;

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

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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." }
  */
 export declare class DSRCheckbox extends Component<any> {

package/ssr/esm/lib/dsr-components/input-date.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-email.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-month.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-number.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-password.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-search.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. icon)."}

package/ssr/esm/lib/dsr-components/input-tel.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-text.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-time.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-url.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/input-week.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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."}
  * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}

package/ssr/esm/lib/dsr-components/label.d.ts

@@ -3,6 +3,7 @@ import { type LabelTag } from '@porsche-design-system/components/dist/utils';
 type LabelProps = {
     hasLabel: boolean;
     hasDescription: boolean;
+    children?: JSX.Element;
     htmlFor?: string;
     tag?: LabelTag;
     isRequired?: boolean;

package/ssr/esm/lib/dsr-components/multi-select.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "selected", "description": "Use this slot to provide custom markup for the selected options display in the button area." }
  * @slot {"name": "", "description": "Default slot for the p-multi-select-option tags." }

package/ssr/esm/lib/dsr-components/pin-code.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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." }
  *

package/ssr/esm/lib/dsr-components/radio-group-option.d.ts

@@ -1,5 +1,9 @@
 import { Component } from 'react';
 import type { RadioGroupOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+/**
+ * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)." }
+ */
 export declare class DSRRadioGroupOption extends Component<any> {
     host: HTMLElement & RadioGroupOptionInternalHTMLProps;
     private initialLoading;

package/ssr/esm/lib/dsr-components/radio-group.d.ts

@@ -1,8 +1,9 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 p-radio-group-option tags." }
+ * @slot {"name": "", "description": "Default slot for the p-radio-group-option tags."}
  * @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."}
  */
 export declare class DSRRadioGroup extends Component<any> {

package/ssr/esm/lib/dsr-components/segmented-control.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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 `p-segmented-control-item` tags." }
  * @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."}

package/ssr/esm/lib/dsr-components/select.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "selected", "description": "Use this slot to provide custom markup for the selected option display in the button area." }
  * @slot {"name": "", "description": "Default slot for the `p-select-option` tags." }

package/ssr/esm/lib/dsr-components/textarea.d.ts

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 /**
  * @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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}
  * @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": "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." }
  */

package/ssr/esm/lib/types.d.ts

@@ -924,7 +924,9 @@ export type CanvasSidebarStartUpdateEventDetail = {
 };
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
-    "extended"
+    "extended",
+    "wide",
+    "full"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];