@porsche-design-system/components-react 3.28.0-rc.3 → 3.29.0-rc.0

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3273,29 +3273,12 @@ const getComboboxAriaAttributes = (isOpen, isRequired, labelId, descriptionId, d
         'aria-controls': dropdownId,
     };
 };
-// TODO: Change to aria-labelledby
-const getListAriaAttributes = (label, isRequired, hasFilter, isOpen, multiple = false) => {
+const getComboboxFilterAriaAttributes = () => {
     return {
-        role: 'listbox',
-        'aria-label': label,
-        ...(isRequired &&
-            !hasFilter && {
-            'aria-required': 'true',
-        }),
-        ...(!isOpen && {
-            'aria-hidden': 'true',
-        }),
-        ...(multiple && {
-            'aria-multiselectable': 'true',
-        }),
+        'aria-autocomplete': 'list',
+        'aria-expanded': 'true',
     };
 };
-const getOptionAriaAttributes = (isSelected, isDisabled, isHidden, hasValue) => ({
-    ...(!isHidden && { 'aria-selected': isSelected ? 'true' : 'false' }),
-    'aria-disabled': isDisabled ? 'true' : null,
-    'aria-hidden': isHidden ? 'true' : null,
-    'aria-label': hasValue ? null : 'Empty value',
-});
 
 const borderWidthBase = '2px';
 
@@ -3716,7 +3699,6 @@ const buildImgSrc = (innerManifest) => `${getCDNBaseURL()}/marque/${innerManifes
 const getSvgUrl = (model) => {
     return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
-const getSelectedOptions = (options) => options.filter((option) => option.selected);
 const getSelectedOptionValues = (options) => options.filter((option) => option.selected).map((option) => option.value);
 exports.ItemType = void 0;
 (function (ItemType) {
@@ -3938,6 +3920,7 @@ exports.getButtonPureAriaAttributes = getButtonPureAriaAttributes;
 exports.getCDNBaseURL = getCDNBaseURL;
 exports.getClosestHTMLElement = getClosestHTMLElement;
 exports.getComboboxAriaAttributes = getComboboxAriaAttributes;
+exports.getComboboxFilterAriaAttributes = getComboboxFilterAriaAttributes;
 exports.getContentAriaAttributes = getContentAriaAttributes;
 exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
@@ -3949,13 +3932,10 @@ exports.getHeadlineTagType = getHeadlineTagType;
 exports.getIconColor = getIconColor;
 exports.getInlineNotificationIconName = getInlineNotificationIconName;
 exports.getInnerManifest = getInnerManifest;
-exports.getListAriaAttributes = getListAriaAttributes;
-exports.getOptionAriaAttributes = getOptionAriaAttributes;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getSelectedOptionString = getSelectedOptionString;
 exports.getSelectedOptionValues = getSelectedOptionValues;
-exports.getSelectedOptions = getSelectedOptions;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
 exports.getSvgUrl = getSvgUrl;
 exports.getSwitchButtonAriaAttributes = getSwitchButtonAriaAttributes;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/input-number.wrapper.cjs

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var inputNumber = require('../dsr-components/input-number.cjs');
+
+const PInputNumber = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-number');
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(inputNumber.DSRInputNumber, { autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme: theme || hooks.useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputNumber = PInputNumber;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/input-password.wrapper.cjs

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputPassword = require('../dsr-components/input-password.cjs');
 
-const PInputPassword = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, children, ...rest }, ref) => {
+const PInputPassword = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-password');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), toggle, value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), toggle, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inputPassword.DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), toggle, value, children })),
+                children: (jsxRuntime.jsx(inputPassword.DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), toggle, value, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/input-search.wrapper.cjs

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var inputSearch = require('../dsr-components/input-search.cjs');
+
+const PInputSearch = /*#__PURE__*/ react.forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = true, label = '', loading = false, message = '', name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-search');
+    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'message', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(inputSearch.DSRInputSearch, { autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputSearch = PInputSearch;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/input-text.wrapper.cjs

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var inputText = require('../dsr-components/input-text.cjs');
+
+const PInputText = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-text');
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(inputText.DSRInputText, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme: theme || hooks.useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputText = PInputText;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/select.wrapper.cjs

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var select = require('../dsr-components/select.cjs');
 
-const PSelect = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(select.DSRSelect, { compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(select.DSRSelect, { compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/textarea.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textarea = require('../dsr-components/textarea.cjs');
 
-const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
+const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/toast.wrapper.cjs

@@ -19,7 +19,7 @@ const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, re
         // @ts-ignore
         ...(!process.browser
             ? {
-                ...{ "role": "status", "aria-live": "polite" },
+                ...{ "role": "status" },
                 children: (jsxRuntime.jsx(toast.DSRToast, { theme: theme || hooks.useTheme() })),
             }
             : {

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.cjs');
+require('react');
+require('../../provider.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var loadingMessage = require('./loading-message.cjs');
+var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
+var spinner_wrapper = require('../components/spinner.wrapper.cjs');
+
+const InputBase = ({ children, 
+// host,
+id, label: label$1, description, loading, initialLoading, required, disabled, state, message, theme, readOnly, type, form, placeholder, maxLength, minLength, max, min, value, step, spellCheck, autoComplete, name, 
+// onInput,
+// onWheel,
+// onChange,
+// onBlur,
+// refElement,
+start, end, }) => {
+    const { namedSlotChildren } = splitChildren.splitChildren(children);
+    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, value: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+};
+
+exports.InputBase = InputBase;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var minifyCss = require('../../minifyCss.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+var inputBase = require('./input-base.cjs');
+
+/**
+ * @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 react.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;
+    initialLoading = false;
+    inputElement;
+    defaultValue;
+    formResetCallback() {
+        // triggers value watcher
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stylesEntry.getInputNumberCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.theme, this.props.controls));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-number" // prevent React default scroll-to-[increment|decrement] on number inputs
+                            , 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, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.controls && {
+                                end: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(buttonPure_wrapper.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] }), jsxRuntime.jsxs(buttonPure_wrapper.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] }));
+    }
+}
+
+exports.DSRInputNumber = DSRInputNumber;

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

@@ -6,15 +6,15 @@ require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-var label = require('./label.cjs');
-var stateMessage = require('./state-message.cjs');
+var inputBase = require('./input-base.cjs');
 
 /**
- * @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 react.Component {
     host;
@@ -22,20 +22,20 @@ class DSRInputPassword extends react.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.
     internals;
     showPassword = false;
+    initialLoading = false;
     inputElement;
     defaultValue;
     formResetCallback() {
-        this.props.internals?.setFormValue(this.props.defaultValue);
+        // triggers value watcher
     }
     formDisabledCallback() {
     }
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const id = 'input-password';
-        const style = minifyCss.minifyCss(stylesEntry.getInputPasswordCss(this.props.disabled, this.props.hideLabel, this.props.state, this.props.toggle, this.props.compact, this.props.readOnly, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.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 && (jsxRuntime.jsx(buttonPure_wrapper.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" }))] }), jsxRuntime.jsx(stateMessage.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] }));
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stylesEntry.getInputPasswordCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.toggle, this.props.compact, this.props.readOnly, this.props.theme));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.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, loading: this.props.loading, initialLoading: this.props.initialLoading, end: this.props.toggle && (jsxRuntime.jsx(buttonPure_wrapper.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-search.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var minifyCss = require('../../minifyCss.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+var icon_wrapper = require('../components/icon.wrapper.cjs');
+var inputBase = require('./input-base.cjs');
+
+/**
+ * @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. icon)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. search button)."}
+ */
+class DSRInputSearch extends react.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;
+    isClearable = false;
+    initialLoading = false;
+    inputElement;
+    defaultValue;
+    formResetCallback() {
+        // triggers value watcher
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stylesEntry.getInputSearchCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.theme, this.props.clear));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-search", name: this.props.name, form: this.props.form, type: "search", required: this.props.required, placeholder: this.props.placeholder, 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, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+                                start: jsxRuntime.jsx(icon_wrapper.PIcon, { "aria-hidden": "true", name: "search", color: "state-disabled", theme: this.props.theme }),
+                            }), ...(this.props.clear && {
+                                end: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { tabIndex: -1, hideLabel: true, theme: this.props.theme, className: "button", type: "button", icon: "close", hidden: !this.props.isClearable, disabled: this.props.readOnly || this.props.disabled, children: "Clear field" })),
+                            }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRInputSearch = DSRInputSearch;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-text.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var inputBase = require('./input-base.cjs');
+
+/**
+ * @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 DSRInputText extends react.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;
+    initialLoading = false;
+    inputElement;
+    defaultValue;
+    formResetCallback() {
+        // triggers value watcher
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stylesEntry.getInputTextCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.theme, this.props.counter));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(inputBase.InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text" // prevent React default scroll-to-[increment|decrement] on text inputs
+                            , name: this.props.name, form: this.props.form, type: "text", 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, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.counter &&
+                                this.props.maxLength && {
+                                end: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: `You have ${this.props.maxLength - this.props.value.length} out of ${this.props.maxLength} characters left` }), jsxRuntime.jsxs("span", { className: "counter", "aria-hidden": "true", children: [this.props.value.length, "/", this.props.maxLength] })] })),
+                            }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRInputText = DSRInputText;

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

@@ -13,10 +13,17 @@ class DSRMultiSelectOption extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const { theme = 'light', selected: isSelected, highlighted } = this.props;
+        const { theme = 'light', selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme, isDisabled, isSelected));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+        const style = minifyCss.minifyCss(stylesEntry.getMultiSelectOptionCss(theme, isDisabled, isSelected));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.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", jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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: [jsxRuntime.jsx("span", { className: "checkbox", "aria-hidden": "true" }), jsxRuntime.jsx("slot", { slot: "label" })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -25,7 +25,6 @@ class DSRMultiSelect extends react.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;
@@ -58,9 +57,8 @@ class DSRMultiSelect extends react.Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const inputId = 'filter';
         const popoverId = 'list';
-        const optionsSelectedId = 'options-selected';
         const style = minifyCss.minifyCss(stylesEntry.getMultiSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", role: "option", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", role: "option", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] })] }), jsxRuntime.jsx(stateMessage.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.cjs

@@ -6,7 +6,6 @@ require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
@@ -16,15 +15,17 @@ class DSRSelectOption extends react.Component {
     host;
     render() {
         splitChildren.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.minifyCss(stylesEntry.getSelectOptionCss(theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "option", className: {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.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", jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: Object.entries({
                                     option: true,
-                                    'option--selected': selected,
+                                    'option--selected': isSelected,
                                     'option--highlighted': highlighted,
                                     'option--disabled': isDisabled,
-                                }, ...utilsEntry.getOptionAriaAttributes(selected, isDisabled, hidden, !!this.props.value), children: [jsxRuntime.jsx("slot", {}), selected && (jsxRuntime.jsx(icon_wrapper.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: [jsxRuntime.jsx("slot", {}), isSelected && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", "aria-hidden": "true", name: "check", color: isDisabled ? 'state-disabled' : 'primary', theme: theme }))] }) })] }), this.props.children] }));
     }
 }