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

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getHeadingCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHeadingCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getHeadingTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -17,7 +17,7 @@ class DSRHeading extends Component {
             right: 'end',
         };
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(getComponentCss$Q(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme));
+        const style = minifyCss(getComponentCss$R(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getHeadlineCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHeadlineCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getHeadlineTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
@@ -19,7 +19,7 @@ class DSRHeadline extends Component {
             right: 'end',
         };
         const TagType = getHeadlineTagType(null, this.props.variant, this.props.tag);
-        const style = minifyCss(getComponentCss$P(this.props.variant, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme));
+        const style = minifyCss(getComponentCss$Q(this.props.variant, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getIconCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getIconCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { buildIconUrl, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRIcon extends Component {
@@ -15,7 +15,7 @@ class DSRIcon extends Component {
             'neutral-contrast-high': 'contrast-high',
             'notification-neutral': 'notification-info',
         };
-        const style = minifyCss(getComponentCss$O(this.props.name, this.props.source, (deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme));
+        const style = minifyCss(getComponentCss$P(this.props.name, this.props.source, (deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildIconUrl(this.props.source || this.props.name), width: 24, height: 24, loading: "lazy", alt: parseAndGetAriaAttributes(this.props.aria)?.['aria-label'] ?? '' })] }) }));
     }
 }

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

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getInlineNotificationCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getInlineNotificationCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getInlineNotificationIconName, getContentAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
@@ -24,7 +24,7 @@ class DSRInlineNotification extends Component {
         const labelId = 'label';
         const descriptionId = 'description';
         const Heading = this.props.headingTag;
-        const style = minifyCss(getComponentCss$N(this.props.state, !!this.props.actionLabel, this.hasDismissButton, this.props.theme));
+        const style = minifyCss(getComponentCss$O(this.props.state, !!this.props.actionLabel, this.hasDismissButton, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PIcon, { className: "icon", name: getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxs("div", { id: bannerId, className: "content", ...getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
                                             (this.props.heading ? (jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsx("slot", { name: "heading" }))), jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsx("slot", {}) })] }), this.props.actionLabel && (jsx(PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsx(PButton, { className: "close", type: "button", variant: "ghost", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.mjs';
+import { Label } from './label.mjs';
+import { descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
+
+const InputBase = ({ children, 
+// host,
+id, label, description, required, disabled, state, message, theme, readOnly, type, form, placeholder, maxLength, minLength, max, min, value, step, autoComplete, name, 
+// onInput,
+onWheel, 
+// onChange,
+// onBlur,
+// refElement,
+start, end, }) => {
+    const { namedSlotChildren } = splitChildren(children);
+    return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, id: id, onWheel: onWheel, name: name, form: form, type: type, required: required, placeholder: placeholder, maxLength: maxLength, minLength: minLength, max: max, min: min, step: step, value: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled }), end, jsx("slot", { name: "end" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null })] }));
+};
+
+export { InputBase };

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

@@ -0,0 +1,40 @@
+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 { getInputNumberCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { PButtonPure } from '../components/button-pure.wrapper.mjs';
+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": "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)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
+ */
+class DSRInputNumber extends Component {
+    host;
+    // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
+    // 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.
+    internals;
+    inputElement;
+    defaultValue;
+    formResetCallback() {
+        this.props.internals?.setFormValue(this.props.defaultValue);
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    render() {
+        splitChildren(this.props.children);
+        const style = minifyCss(getComponentCss$N(this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.theme, this.props.controls));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-number", onWheel: (e) => (e.target).blur(), name: this.props.name, form: this.props.form, type: "number", required: this.props.required, placeholder: this.props.placeholder, max: this.props.max, min: this.props.min, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, theme: this.props.theme, step: this.props.step, ...(this.props.controls && {
+                                end: (jsxs(Fragment, { children: [jsxs(PButtonPure, { tabIndex: -1, hideLabel: true, theme: this.props.theme, className: "button", type: "button", icon: "minus", disabled: this.props.disabled || this.props.readOnly, children: ["Decrement value by ", this.props.step] }), jsxs(PButtonPure, { tabIndex: -1, hideLabel: true, theme: this.props.theme, className: "button", type: "button", icon: "plus", disabled: this.props.disabled || this.props.readOnly, children: ["Increment value by ", this.props.step] })] })),
+                            }) })] }), this.props.children] }));
+    }
+}
+
+export { DSRInputNumber };

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

@@ -4,15 +4,15 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getInputPasswordCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-import { Label } from './label.mjs';
-import { messageId, StateMessage } from './state-message.mjs';
+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": "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": "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": "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)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
  */
 class DSRInputPassword extends Component {
     host;
@@ -30,10 +30,9 @@ class DSRInputPassword extends Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const id = 'input-password';
+        splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$M(this.props.disabled, this.props.hideLabel, this.props.state, this.props.toggle, this.props.compact, this.props.readOnly, this.props.theme));
-        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: id, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("input", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, form: this.props.form, type: this.props.showPassword ? 'text' : 'password', required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled }), this.props.toggle && (jsx(PButtonPure, { hideLabel: true, theme: this.props.theme, className: "button", type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: this.props.disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" }))] }), 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 })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-password", name: this.props.name, form: this.props.form, type: this.props.showPassword ? 'text' : 'password', required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.props.value, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, theme: this.props.theme, end: this.props.toggle && (jsx(PButtonPure, { hideLabel: true, theme: this.props.theme, className: "button", type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: this.props.disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) })] }), this.props.children] }));
     }
 }
 

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

@@ -1,7 +1,6 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getMultiSelectOptionCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
@@ -12,10 +11,17 @@ class DSRMultiSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted } = this.props;
-        this.props.disabled || this.props.disabledParent;
-        minifyCss(getComponentCss$D(theme));
-        return (jsx(Fragment, {}));
+        const { theme = 'light', selected: isSelected, highlighted, hidden } = this.props;
+        const isDisabled = this.props.disabled || this.props.disabledParent;
+        const style = minifyCss(getComponentCss$D(theme, isDisabled, isSelected));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } })
+                        // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
+                        , "// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259", jsx(Fragment, { children: jsxs("div", { className: Object.entries({
+                                    option: true,
+                                    'option--selected': isSelected,
+                                    'option--highlighted': highlighted,
+                                    'option--disabled': isDisabled,
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), children: [jsx("span", { className: "checkbox", "aria-hidden": "true" }), jsx("slot", { slot: "label" })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getMultiSelectCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getHasNativePopoverSupport, getSelectedOptionValues, getSelectedOptions } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, getSelectedOptionValues } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
@@ -23,7 +23,6 @@ class DSRMultiSelect extends Component {
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // 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;
-    srHighlightedOptionText = '';
     hasFilterResults = true;
     internals;
     defaultValue;
@@ -56,9 +55,8 @@ class DSRMultiSelect extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const inputId = 'filter';
         const popoverId = 'list';
-        const optionsSelectedId = 'options-selected';
         const style = minifyCss(getComponentCss$C(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));
-        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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", role: "option", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), 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 }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.hasFilterResults ? this.props.srHighlightedOptionText : 'No results found' })] })] }), 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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", role: "option", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), 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 })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,7 +4,6 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSelectOptionCss as getComponentCss$r } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getOptionAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -14,15 +13,17 @@ class DSRSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted, hidden } = this.props;
+        const { theme = 'light', selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
         const style = minifyCss(getComponentCss$r(theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "option", className: {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } })
+                        // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
+                        , "// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259", jsx(Fragment, { children: jsxs("div", { className: Object.entries({
                                     option: true,
-                                    'option--selected': selected,
+                                    'option--selected': isSelected,
                                     'option--highlighted': highlighted,
                                     'option--disabled': isDisabled,
-                                }, ...getOptionAriaAttributes(selected, isDisabled, hidden, !!this.props.value), children: [jsx("slot", {}), selected && (jsx(PIcon, { className: "icon", "aria-hidden": "true", name: "check", color: isDisabled ? 'state-disabled' : 'primary', theme: theme }))] }) })] }), this.props.children] }));
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), children: [jsx("slot", {}), isSelected && (jsx(PIcon, { className: "icon", "aria-hidden": "true", name: "check", color: isDisabled ? 'state-disabled' : 'primary', theme: theme }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -22,7 +22,6 @@ class DSRSelect extends Component {
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // 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;
-    srHighlightedOptionText = '';
     internals;
     defaultValue;
     buttonElement;
@@ -48,11 +47,10 @@ class DSRSelect extends Component {
         const popoverId = 'list';
         const descriptionId = this.props.description ? 'description' : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
-        const initialStatusId = 'initial-status';
-        const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
+        const ariaDescribedBy = [descriptionId, selectMessageId].filter(Boolean).join(' ');
         const selectedOption = getSelectedOptionString(otherChildren);
         const style = minifyCss(getComponentCss$q(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath));
-        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, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: 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 }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), 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, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: 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 })] })] }), this.props.children] }));
     }
     getSelectedOptionImagePath = (options) => {
         return (options

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

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -27,6 +27,7 @@ export { PHeading } from './lib/components/heading.wrapper.mjs';
 export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PInputNumber } from './lib/components/input-number.wrapper.mjs';
 export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
 export { PLink } from './lib/components/link.wrapper.mjs';
 export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';

package/ssr/esm/lib/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
+export * from './input-number.wrapper';
 export * from './input-password.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';

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

@@ -0,0 +1,184 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
+export type PInputNumberProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+};
+export declare const PInputNumber: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The max value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import type { InputBaseState, InputBaseWheelEventDetail } from '@porsche-design-system/components/dist/utils';
+type InputBaseProps = {
+    children?: JSX.Element;
+    host: HTMLElement;
+    id: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    state?: InputBaseState;
+    message?: string;
+    theme?: any;
+    readOnly?: boolean;
+    name: string;
+    form?: string;
+    placeholder?: string;
+    maxLength?: number;
+    minLength?: number;
+    max?: number;
+    min?: number;
+    autoComplete?: string;
+    type: string;
+    value?: string;
+    step?: number;
+    onWheel?: (e: InputBaseWheelEventDetail) => void;
+    start?: JSX.Element;
+    end?: JSX.Element;
+};
+export declare const InputBase: FC<InputBaseProps>;
+export {};

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

@@ -0,0 +1,18 @@
+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": "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)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
+ */
+export declare class DSRInputNumber extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private inputElement;
+    private defaultValue;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    render(): JSX.Element;
+}

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

@@ -1,8 +1,10 @@
 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": "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": "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": "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)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
  */
 export declare class DSRInputPassword extends Component<any> {
     host: HTMLElement;

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

@@ -10,7 +10,6 @@ import { Component } from 'react';
 export declare class DSRMultiSelect extends Component<any> {
     host: HTMLElement;
     private isOpen;
-    private srHighlightedOptionText;
     private hasFilterResults;
     private internals;
     private defaultValue;