@porsche-design-system/components-react 4.0.0-alpha.0 → 4.0.0-beta.1

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

@@ -5,7 +5,6 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getLinkTileCss as getComponentCss$E } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PLink } from '../components/link.wrapper.mjs';
-import { PLinkPure } from '../components/link-pure.wrapper.mjs';
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
@@ -17,6 +16,8 @@ class DSRLinkTile extends Component {
     hasFooterSlot = false;
     render() {
         splitChildren(this.props.children);
+        // TODO: BreakpointCustomizable breaks stencils boolean conversion from string to boolean
+        const parsedCompact = this.props.compact === 'true' ? true : this.props.compact === 'false' ? false : this.props.compact;
         const linkProps = {
             variant: 'secondary',
             aria: this.props.aria,
@@ -28,9 +29,9 @@ class DSRLinkTile extends Component {
             rel: this.props.rel,
         };
         const link = (createElement(PLink, { ...sharedLinkProps, ...linkProps, key: "link-or-button", className: "link-or-button" }, this.props.label));
-        const linkPure = (createElement(PLinkPure, { ...sharedLinkProps, ...linkProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: "arrow-right" }, this.props.label));
-        const style = minifyCss(getComponentCss$E(this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, this.props.compact, this.props.gradient, this.props.hasFooterSlot));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), jsx("slot", { name: "footer" }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
+        const linkCompact = (createElement(PLink, { ...sharedLinkProps, ...linkProps, hideLabel: true, icon: "arrow-right", key: "link-or-button-pure", compact: true, className: "link-or-button-pure" }, this.props.label));
+        const style = minifyCss(getComponentCss$E(this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, parsedCompact, this.props.gradient, this.props.hasFooterSlot));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), jsx("slot", { name: "footer" }), typeof parsedCompact === 'boolean' ? (parsedCompact ? linkCompact : link) : [linkCompact, link]] })] })] }), this.props.children] }));
     }
 }
 

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." }
@@ -21,7 +22,7 @@ import { NoResultsOption } from './no-results-option.mjs';
  * @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": "filter", "description": "Optional slot for providing a custom `p-input-search` input. When used, the default filter input is replaced and the built-in filter logic is disabled, giving full control over filtering behavior." }
  *
- * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ * @controlled { "props": ["value"], "event": "change", "isInternallyMutated": true }
  */
 class DSRMultiSelect extends Component {
     host;
@@ -69,7 +70,7 @@ class DSRMultiSelect extends Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const ariaDescribedBy = [descriptionId, selectMessageId].filter(Boolean).join(' ');
         const style = minifyCss(getComponentCss$y(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { 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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => option.textContent).join(', ') })), this.props.value.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, onBlur: (e) => e.stopPropagation(), role: "dialog", "aria-label": this.props.label, "aria-hidden": this.props.isOpen ? null : 'true', children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxs("div", { className: "options", role: "listbox", "aria-label": this.props.label, "aria-multiselectable": "true", onPointerMove: this.props.onPointerMove, children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { 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, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, onBlur: (e) => e.stopPropagation(), role: "dialog", "aria-label": this.props.label, "aria-hidden": this.props.isOpen ? null : 'true', children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), jsxs("div", { className: "options", role: "listbox", "aria-label": this.props.label, "aria-multiselectable": "true", onPointerMove: this.props.onPointerMove, children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,18 +4,19 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getPinCodeCss as getComponentCss$w } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { labelId, descriptionId, isCurrentInput } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { LoadingMessage } from './loading-message.mjs';
+import { labelId, descriptionId, getFieldsetAriaAttributes, isCurrentInput } 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';
 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." }
  *
- * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ * @controlled { "props": ["value"], "event": "change", "isInternallyMutated": true }
  */
 class DSRPinCode extends Component {
     host;
@@ -39,7 +40,7 @@ class DSRPinCode extends Component {
         this.inputElements = [];
         const currentInputId = 'current-input';
         const style = minifyCss(getComponentCss$w(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { 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, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
+        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'), "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, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", dir: "ltr", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
                                             , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required, onBlur: this.props.onInputBlur }, index))), this.props.loading && jsx(PSpinner, { className: "spinner", size: "inherit", "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, 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/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$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
@@ -8,20 +9,27 @@ import { Label } from './label.mjs';
 import { messageId } from './state-message.mjs';
 import { PSpinner } from '../components/spinner.wrapper.mjs';
 
+// Though "description" and "message" slots are technically available (provided by the "label" component),
+// they are not documented here to avoid confusion since they are not intended for use within radio group options.
+/**
+ * @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 { 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$u(isDisabled, isLoading, state));
-        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", "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", "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$t } 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$t(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction));
-        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", "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, 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", "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, 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/scroller.mjs

@@ -19,7 +19,8 @@ class DSRScroller extends Component {
     render() {
         splitChildren(this.props.children);
         const renderPrevNextButton = (direction) => {
-            return (jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsx(PButton, { className: "action-button", variant: "secondary", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, children: direction }) }, direction));
+            return (jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsx(PButton, { className: "action-button", variant: "secondary", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
+                    , children: direction }) }, direction));
         };
         const style = minifyCss(getComponentCss$s(this.isNextHidden, this.isPrevHidden, this.props.alignScrollIndicator, this.props.scrollbar));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: scrollAreaClass, children: jsxs("div", { className: "scroll-wrapper", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsx("slot", {}), jsx("div", { className: "trigger" }), jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));

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

@@ -3,16 +3,18 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSegmentedControlCss as getComponentCss$q } 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."}
  *
- * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ * @controlled { "props": ["value"], "event": "change", "isInternallyMutated": true }
  */
 class DSRSegmentedControl extends Component {
     host;
@@ -33,7 +35,7 @@ class DSRSegmentedControl extends Component {
             : child);
         const { minWidth, maxWidth } = { minWidth: 100, maxWidth: 100 };
         const style = minifyCss(getComponentCss$q(minWidth, maxWidth, this.props.columns, this.props.disabled, this.props.hideLabel, this.props.state));
-        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, host: null })] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-labelledby": labelId, "aria-describedby": descriptionId, 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, 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." }
@@ -20,7 +21,7 @@ import { NoResultsOption } from './no-results-option.mjs';
  * @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": "filter", "description": "Optional slot for providing a custom `p-input-search` input. When used, the default filter input is replaced and the built-in filter logic is disabled, giving full control over filtering behavior." }
  *
- * @controlled { "props": ["value"], "event": "update", "isInternallyMutated": true }
+ * @controlled { "props": ["value"], "event": "change", "isInternallyMutated": true }
  */
 class DSRSelect extends Component {
     host;

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

@@ -16,7 +16,7 @@ class DSRTag extends Component {
         splitChildren(this.props.children);
         const hasIcon = this.props.icon !== 'none' || !!this.props.iconSource;
         const style = minifyCss(getComponentCss$7(this.props.variant, this.props.compact, !!getDirectChildHTMLElement(null, 'a,button'), hasIcon));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [hasIcon && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "inherit", size: "x-small", "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [hasIcon && (jsx(PIcon, { className: "icon", ...(this.props.icon !== 'none' && { name: this.props.icon }), source: this.props.iconSource, color: "inherit", size: "x-small", "aria-hidden": "true" })), jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

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/accordion.wrapper.d.ts

@@ -1,16 +1,24 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
+import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
-     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     * Aligns the marker within the summary section.
+     */
+    alignMarker?: AccordionAlignMarker;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: AccordionBackground;
+    /**
+     * Displays the accordion in compact mode.
      */
     compact?: boolean;
     /**
-     * Defines the heading used in accordion.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @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.
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -18,29 +26,37 @@ export type PAccordionProps = BaseProps & {
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
-     * Defines if accordion is open.
+     * Controls whether the accordion is open or closed.
      */
     open?: boolean;
     /**
-     * The text size.
+     * @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).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     * @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
      */
     sticky?: boolean;
 };
 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"> & {
     /**
-     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     * Aligns the marker within the summary section.
+     */
+    alignMarker?: AccordionAlignMarker;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: AccordionBackground;
+    /**
+     * Displays the accordion in compact mode.
      */
     compact?: boolean;
     /**
-     * Defines the heading used in accordion.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @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.
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -48,15 +64,15 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
-     * Defines if accordion is open.
+     * Controls whether the accordion is open or closed.
      */
     open?: boolean;
     /**
-     * The text size.
+     * @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).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     * @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
      */
     sticky?: boolean;
 } & {

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

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarStartUpdateEventDetail } from '../types';
+import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../types';
 export type PCanvasProps = BaseProps & {
+    /**
+     * Defines the background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */
@@ -19,6 +23,10 @@ export type PCanvasProps = BaseProps & {
     sidebarStartOpen?: boolean;
 };
 export declare const PCanvas: 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 background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */

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

@@ -6,7 +6,7 @@ export type PDisplayProps = BaseProps & {
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**
@@ -28,7 +28,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**

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

@@ -2,7 +2,7 @@ import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection } from '../types';
 export type PDividerProps = BaseProps & {
     /**
-     * Defines color depending on theme.
+     * Defines color.
      */
     color?: DividerColor;
     /**
@@ -12,7 +12,7 @@ export type PDividerProps = BaseProps & {
 };
 export declare const PDivider: 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 color depending on theme.
+     * Defines color.
      */
     color?: DividerColor;
     /**

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

@@ -6,7 +6,7 @@ export type PHeadingProps = BaseProps & {
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**
@@ -28,7 +28,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**

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

@@ -6,7 +6,7 @@ export type PIconProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     color?: IconColor;
     /**
@@ -28,7 +28,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     color?: IconColor;
     /**

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/components/text.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PTextProps = BaseProps & {
      */
     align?: TextAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: TextColor;
     /**
@@ -32,7 +32,7 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<impor
      */
     align?: TextAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: TextColor;
     /**

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

@@ -78,7 +78,7 @@ export type PTextareaProps = BaseProps & {
      */
     resize?: TextareaResize;
     /**
-     * The number of rows of the textarea.
+     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
      */
     rows?: number;
     /**
@@ -176,7 +176,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      */
     resize?: TextareaResize;
     /**
-     * The number of rows of the textarea.
+     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
      */
     rows?: number;
     /**

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

@@ -1,11 +1,17 @@
 import { Component } from 'react';
 /**
- * @slot {"name": "heading", "description": "Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup." }
- * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "summary", "description": "Content for the accordion's summary section. Clicking toggles the accordion open and closed." }
+ * @slot {"name": "summary-before", "description": "Content or interactive elements placed before the accordion's summary section." }
+ * @slot {"name": "summary-after", "description": "Content or interactive elements placed after the accordion's summary section." }
+ * @slot {"name": "heading", "description": "Content for the accordion's heading section. Clicking toggles the accordion open and closed.", "isDeprecated": true }
+ * @slot {"name": "", "description": "Main content displayed when the accordion is expanded." }
  *
  * @controlled {"props": ["open"], "event": "update"}
  */
 export declare class DSRAccordion extends Component<any> {
     host: HTMLElement;
+    private hasSummary;
+    private hasSummaryBefore;
+    private hasSummaryAfter;
     render(): JSX.Element;
 }

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

@@ -14,11 +14,8 @@ import { Component } from 'react';
  */
 export declare class DSRCanvas extends Component<any> {
     host: HTMLElement;
-    private isMediaQueryS;
-    private isMediaQueryM;
     private hasTitle;
     private hasSidebarEnd;
-    private hasSidebarEndHeader;
     private hasFooter;
     private hasBackground;
     render(): JSX.Element;

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

@@ -1,7 +1,8 @@
 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": "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": "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> {
     host: HTMLElement;
@@ -9,6 +10,7 @@ export declare class DSRCheckbox extends Component<any> {
     private initialLoading;
     private defaultChecked;
     private checkboxInputElement;
+    private externalLabel;
     formResetCallback(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;

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)."}