@porsche-design-system/components-react 4.6.0-rc.1 → 4.6.0-rc.2

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

@@ -26,8 +26,12 @@ class DSRPinCode extends Component {
     initialLoading = false;
     defaultValue;
     inputElements = [];
+    // Coerce number/null/undefined to string for internal handling
+    get parsedValue() {
+        return String(this.props.value ?? '');
+    }
     formResetCallback() {
-        this.props.internals?.setFormValue(this.props.defaultValue);
+        this.props.internals?.setFormValue(String(this.props.defaultValue ?? '')); // coerce defaultValue to string for form value
     }
     formDisabledCallback() {
         // Called when a parent fieldset is disabled or enabled
@@ -43,8 +47,8 @@ class DSRPinCode extends Component {
         const inputDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const inputMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$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("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-describedby": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : 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, 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": setAriaIDREF(inputLabelId, inputMessageId), "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] }));
+        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": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : 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, 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.parsedValue, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": setAriaIDREF(inputLabelId, inputMessageId), "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.parsedValue[index] === ' ' ? null : this.parsedValue[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.mjs

@@ -26,6 +26,10 @@ class DSRRadioGroup extends Component {
     defaultValue;
     radioGroupOptions = [];
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
+    setFormValue() {
+        // `null`/`undefined` → `undefined`, removing the radio group from form submission
+        this.props.internals?.setFormValue(this.props.value === null || this.props.value === undefined ? undefined : String(this.props.value));
+    }
     formResetCallback() {
         // triggers value watcher
     }

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

@@ -22,8 +22,12 @@ class DSRSegmentedControl extends Component {
     host;
     internals;
     defaultValue;
+    setFormValue() {
+        // `null`/`undefined` → `undefined`, removing the segmented-control from form submission
+        this.props.internals?.setFormValue(this.props.value === null || this.props.value === undefined ? undefined : String(this.props.value));
+    }
     formResetCallback() {
-        this.props.internals?.setFormValue(this.props.defaultValue?.toString());
+        // triggers value watcher
     }
     formDisabledCallback() {
         // Called when a parent fieldset is disabled or enabled

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

@@ -9,6 +9,7 @@ import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 import { PInputSearch } from '../components/input-search.wrapper.mjs';
+import { FilterStatusAnnouncer } from './filter-status-announcer.mjs';
 import { NoResultsOption } from './no-results-option.mjs';
 
 /**
@@ -29,6 +30,7 @@ class DSRSelect extends Component {
     // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
     isOpen = false;
     hasFilterResults = true;
+    filterStatusMessage = '';
     selectedOption;
     internals;
     defaultValue;
@@ -45,9 +47,6 @@ class DSRSelect extends Component {
     hasNativePopoverSupport = getHasNativePopoverSupport();
     cleanUpAutoUpdate;
     currentlyHighlightedOption = null;
-    get hasFilter() {
-        return !!(this.props.filter || this.props.filterSlot);
-    }
     setFormValue() {
         // `null`/`undefined` → `undefined`, removing the select from form submission (mirrors native behavior)
         this.props.internals?.setFormValue(this.props.value === null || this.props.value === undefined ? undefined : String(this.props.value));
@@ -71,7 +70,7 @@ class DSRSelect extends Component {
         const style = minifyCss(getComponentCss$o(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, 
                                     // only needed for Safari to recognize focus state on click
-                                    tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), "aria-autocomplete": "none", disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsxs(Fragment, { children: [this.selectedOption?.querySelector?.('img') && (jsx("img", { src: this.selectedOption.querySelector('img').src, alt: "" })), jsx("span", { children: this.selectedOption?.textContent ?? '' })] })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [this.props.filter && !hasCustomFilterSlot && (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() })), hasCustomFilterSlot && jsx("slot", { name: "filter" }), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, false), tabIndex: -1, onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [this.props.filter && !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] }));
+                                    tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), "aria-autocomplete": "none", disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsxs(Fragment, { children: [this.selectedOption?.querySelector?.('img') && (jsx("img", { src: this.selectedOption.querySelector('img').src, alt: "" })), jsx("span", { children: this.selectedOption?.textContent ?? '' })] })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [this.props.filter && !hasCustomFilterSlot && (jsxs(Fragment, { children: [jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() }), jsx(FilterStatusAnnouncer, { message: this.props.filterStatusMessage })] })), hasCustomFilterSlot && jsx("slot", { name: "filter" }), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, false), tabIndex: -1, onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [this.props.filter && !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/lib/components/ai-tag.wrapper.d.ts

@@ -2,8 +2,8 @@ import type { BaseProps } from '../../BaseProps';
 import type { AiTagLocale, AiTagVariant } from '../types';
 export type PAiTagProps = BaseProps & {
     /**
-     * Locale for the AI text (ISO format, e.g. "de_DE").
-     * @default 'en_US'
+     * Market locale for the AI text (BCP47, e.g. `en-US`). Language-only `en` is supported for international markets. POSIX forms (e.g. `en_US`) are deprecated but still accepted. Copy is resolved by language; unknown languages fall back to English.
+     * @default 'en-US'
      */
     locale?: AiTagLocale;
     /**
@@ -14,8 +14,8 @@ export type PAiTagProps = BaseProps & {
 };
 export declare const PAiTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Locale for the AI text (ISO format, e.g. "de_DE").
-     * @default 'en_US'
+     * Market locale for the AI text (BCP47, e.g. `en-US`). Language-only `en` is supported for international markets. POSIX forms (e.g. `en_US`) are deprecated but still accepted. Copy is resolved by language; unknown languages fall back to English.
+     * @default 'en-US'
      */
     locale?: AiTagLocale;
     /**

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

@@ -66,11 +66,11 @@ export type PInputNumberProps = BaseProps & {
      */
     onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
     /**
-     * Emitted when the number input loses focus after its value was changed.
+     * Emitted when the number input loses focus after its value was changed. The component value and native event target value are strings after user input.
      */
     onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted when the value has been changed as a direct result of a user action. The component value and native event target value are strings.
      */
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
     /**
@@ -99,7 +99,7 @@ export type PInputNumberProps = BaseProps & {
      */
     step?: number;
     /**
-     * Sets the current numeric value of the field.
+     * Sets the current numeric value. Strings and numbers are accepted for programmatic assignment, but user input updates the value as a string to mirror native input behavior.
      * @default ''
      */
     value?: string | number | null;
@@ -170,11 +170,11 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
      */
     onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
     /**
-     * Emitted when the number input loses focus after its value was changed.
+     * Emitted when the number input loses focus after its value was changed. The component value and native event target value are strings after user input.
      */
     onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
     /**
-     * Emitted when the value has been changed as a direct result of a user action.
+     * Emitted when the value has been changed as a direct result of a user action. The component value and native event target value are strings.
      */
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
     /**
@@ -203,7 +203,7 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<Omi
      */
     step?: number;
     /**
-     * Sets the current numeric value of the field.
+     * Sets the current numeric value. Strings and numbers are accepted for programmatic assignment, but user input updates the value as a string to mirror native input behavior.
      * @default ''
      */
     value?: string | number | null;

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

@@ -66,11 +66,11 @@ export type PInputTextProps = BaseProps & {
      */
     onBlur?: (event: CustomEvent<InputTextBlurEventDetail>) => void;
     /**
-     * Emitted when the input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed. The component value and native event target value are strings after user input.
      */
     onChange?: (event: CustomEvent<InputTextChangeEventDetail>) => void;
     /**
-     * Emitted on every value change as the user types.
+     * Emitted on every value change as the user types. The component value and native event target value are strings.
      */
     onInput?: (event: CustomEvent<InputTextInputEventDetail>) => void;
     /**
@@ -98,7 +98,7 @@ export type PInputTextProps = BaseProps & {
      */
     state?: InputTextState;
     /**
-     * Sets the current text value of the input field.
+     * Sets the current text value. Numbers are accepted for programmatic assignment, but user input updates the value as a string.
      * @default ''
      */
     value?: string | number | null;
@@ -169,11 +169,11 @@ export declare const PInputText: import("react").ForwardRefExoticComponent<Omit<
      */
     onBlur?: (event: CustomEvent<InputTextBlurEventDetail>) => void;
     /**
-     * Emitted when the input loses focus after its value was changed.
+     * Emitted when the input loses focus after its value was changed. The component value and native event target value are strings after user input.
      */
     onChange?: (event: CustomEvent<InputTextChangeEventDetail>) => void;
     /**
-     * Emitted on every value change as the user types.
+     * Emitted on every value change as the user types. The component value and native event target value are strings.
      */
     onInput?: (event: CustomEvent<InputTextInputEventDetail>) => void;
     /**
@@ -201,7 +201,7 @@ export declare const PInputText: import("react").ForwardRefExoticComponent<Omit<
      */
     state?: InputTextState;
     /**
-     * Sets the current text value of the input field.
+     * Sets the current text value. Numbers are accepted for programmatic assignment, but user input updates the value as a string.
      * @default ''
      */
     value?: string | number | null;

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

@@ -6,7 +6,7 @@ export type PMultiSelectOptionProps = BaseProps & {
      */
     disabled?: boolean;
     /**
-     * Sets the value submitted with the form data when this option is selected in the parent multi-select.
+     * Sets the required option value submitted with the form data when selected. Must be a string or number.
      */
     value: string | number;
 };
@@ -17,7 +17,7 @@ export declare const PMultiSelectOption: import("react").ForwardRefExoticCompone
      */
     disabled?: boolean;
     /**
-     * Sets the value submitted with the form data when this option is selected in the parent multi-select.
+     * Sets the required option value submitted with the form data when selected. Must be a string or number.
      */
     value: string | number;
 } & {

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

@@ -54,7 +54,7 @@ export type PPinCodeProps = BaseProps & {
      */
     onBlur?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail.
+     * Emitted when the pin code value changes as the user types, carrying `{ value: string; isComplete: boolean }` in the event detail.
      */
     onChange?: (event: CustomEvent<PinCodeChangeEventDetail>) => void;
     /**
@@ -73,10 +73,10 @@ export type PPinCodeProps = BaseProps & {
      */
     type?: PinCodeType;
     /**
-     * Sets the current concatenated value of all pin code fields and allows setting the initial value.
+     * Sets the current concatenated value. Numbers are accepted for programmatic assignment, but user input updates the value as a string.
      * @default ''
      */
-    value?: string;
+    value?: string | number | null;
 };
 export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -132,7 +132,7 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<im
      */
     onBlur?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail.
+     * Emitted when the pin code value changes as the user types, carrying `{ value: string; isComplete: boolean }` in the event detail.
      */
     onChange?: (event: CustomEvent<PinCodeChangeEventDetail>) => void;
     /**
@@ -151,10 +151,10 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<im
      */
     type?: PinCodeType;
     /**
-     * Sets the current concatenated value of all pin code fields and allows setting the initial value.
+     * Sets the current concatenated value. Numbers are accepted for programmatic assignment, but user input updates the value as a string.
      * @default ''
      */
-    value?: string;
+    value?: string | number | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -15,9 +15,9 @@ export type PRadioGroupOptionProps = BaseProps & {
      */
     loading?: boolean;
     /**
-     * Sets the value submitted with the form data when this radio option is selected within its parent group.
+     * Sets the required option value. Must be a string or number and is selected when it strictly matches the parent `p-radio-group` value by type and value.
      */
-    value?: string;
+    value: string | number;
 };
 export declare const PRadioGroupOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -35,9 +35,9 @@ export declare const PRadioGroupOption: import("react").ForwardRefExoticComponen
      */
     loading?: boolean;
     /**
-     * Sets the value submitted with the form data when this radio option is selected within its parent group.
+     * Sets the required option value. Must be a string or number and is selected when it strictly matches the parent `p-radio-group` value by type and value.
      */
-    value?: string;
+    value: string | number;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -68,10 +68,9 @@ export type PRadioGroupProps = BaseProps & {
      */
     state?: RadioGroupState;
     /**
-     * Sets the currently selected value that pre-selects the matching radio option and reflects user changes.
-     * @default ''
+     * Sets the currently selected value that pre-selects the matching radio option and reflects user changes. Matches an option strictly by type and value, meaning string or number only match an option whose value has the same type and equal value. Use undefined or null for no preselection; these values never match an option because every option requires a string or number value.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
      */
-    value?: string;
+    value?: string | number | null;
 };
 export declare const PRadioGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -141,10 +140,9 @@ export declare const PRadioGroup: import("react").ForwardRefExoticComponent<Omit
      */
     state?: RadioGroupState;
     /**
-     * Sets the currently selected value that pre-selects the matching radio option and reflects user changes.
-     * @default ''
+     * Sets the currently selected value that pre-selects the matching radio option and reflects user changes. Matches an option strictly by type and value, meaning string or number only match an option whose value has the same type and equal value. Use undefined or null for no preselection; these values never match an option because every option requires a string or number value.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
      */
-    value?: string;
+    value?: string | number | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -68,9 +68,9 @@ export type PSegmentedControlProps = BaseProps & {
      */
     state?: SegmentedControlState;
     /**
-     * Sets the currently selected item's value and pre-selects the matching option when the component renders.
+     * Sets the currently selected item's value and pre-selects the matching option when the component renders. Matches an item strictly by type and value, meaning string or number only match an item whose value has the same type and equal value. Use undefined or null for no preselection.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed item. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
      */
-    value?: string | number;
+    value?: string | number | null;
 };
 export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -140,9 +140,9 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      */
     state?: SegmentedControlState;
     /**
-     * Sets the currently selected item's value and pre-selects the matching option when the component renders.
+     * Sets the currently selected item's value and pre-selects the matching option when the component renders. Matches an item strictly by type and value, meaning string or number only match an item whose value has the same type and equal value. Use undefined or null for no preselection.  Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed item. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end.
      */
-    value?: string | number;
+    value?: string | number | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -10,7 +10,7 @@ export type PWordmarkProps = BaseProps & {
      */
     href?: string;
     /**
-     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`).
+     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens.
      * @default 'small'
      */
     size?: WordmarkSize;
@@ -30,7 +30,7 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<i
      */
     href?: string;
     /**
-     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`).
+     * Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens.
      * @default 'small'
      */
     size?: WordmarkSize;

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

@@ -16,7 +16,10 @@ export declare class DSRCarousel extends Component<any> {
     private btnPrev;
     private btnNext;
     private paginationEl;
+    private slideStatusEl;
     private slides;
+    /** Skips the next live-region update when navigation was caused by focusing a slide. */
+    private suppressNextStatusAnnounce;
     private get splideSlides();
     private get hasNavigation();
     render(): JSX.Element;

package/ssr/esm/lib/dsr-components/filter-status-announcer.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+type FilterStatusAnnouncerProps = {
+    message: string;
+};
+export declare const FilterStatusAnnouncer: FC<FilterStatusAnnouncerProps>;
+export {};

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

@@ -16,6 +16,7 @@ export declare class DSRMultiSelect extends Component<any> {
     host: HTMLElement;
     private isOpen;
     private hasFilterResults;
+    private filterStatusMessage;
     private selectedOptions;
     private internals;
     private defaultValue;

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

@@ -14,6 +14,7 @@ export declare class DSRPinCode extends Component<any> {
     private initialLoading;
     private defaultValue;
     private inputElements;
+    private get parsedValue();
     formResetCallback(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;

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

@@ -14,6 +14,7 @@ export declare class DSRRadioGroup extends Component<any> {
     private defaultValue;
     private radioGroupOptions;
     private preventOptionUpdate;
+    setFormValue(): void;
     formResetCallback(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;

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

@@ -13,6 +13,7 @@ export declare class DSRSegmentedControl extends Component<any> {
     host: HTMLElement;
     private internals;
     private defaultValue;
+    setFormValue(): void;
     formResetCallback(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;

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

@@ -16,6 +16,7 @@ export declare class DSRSelect extends Component<any> {
     host: HTMLElement;
     private isOpen;
     private hasFilterResults;
+    private filterStatusMessage;
     private selectedOption;
     private internals;
     private defaultValue;
@@ -32,7 +33,6 @@ export declare class DSRSelect extends Component<any> {
     private hasNativePopoverSupport;
     private cleanUpAutoUpdate;
     private currentlyHighlightedOption;
-    private get hasFilter();
     setFormValue(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;