@porsche-design-system/components-react 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -14,6 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.1.0] - 2026-05-06
+
+## [4.1.0-rc.0] - 2026-05-05
+
+### Added
+
+- `Input Search`: `aria` prop provides additional context for screen reader
+  ([#4321](https://github.com/porsche-design-system/porsche-design-system/pull/4321))
+
+### Fixed
+
+- `Tabs Bar`: scrolling page down when below the fold
+  ([#4392](https://github.com/porsche-design-system/porsche-design-system/pull/4392))
+
 ## [4.0.0] - 2026-04-29
 
 ## [4.0.0-rc.2] - 2026-04-28
@@ -39,6 +53,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### Fixed
 
+- `Multi Select`, `Select`: not correctly updating when options within `p-optgroup` change dynamically
+  ([#4278](https://github.com/porsche-design-system/porsche-design-system/pull/4279))
 - `Flyout`, `Modal`, `Sheet`: `overflow: clip` causing issues
   ([#4296](https://github.com/porsche-design-system/porsche-design-system/pull/4296))
 - `Link Pure`: focus border of slotted anchor

package/cjs/lib/components/input-search.wrapper.cjs

@@ -6,16 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PInputSearch = /*#__PURE__*/ react.forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ react.forwardRef(({ aria, autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...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, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
+    const propsToSync = [aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-search.wrapper.d.ts

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
+import type { SelectedAriaAttributes, InputSearchAriaAttribute, BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
 export type PInputSearchProps = BaseProps & {
+    /**
+     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     */
+    aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
@@ -105,6 +109,10 @@ export type PInputSearchProps = BaseProps & {
     value?: string;
 };
 export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     */
+    aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */

package/esm/lib/components/input-search.wrapper.mjs

@@ -4,16 +4,16 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ forwardRef(({ aria, autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-search');
-    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
+    const propsToSync = [aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -1137,6 +1137,15 @@ export type InputSearchState = FormState;
 export type InputSearchChangeEventDetail = Event;
 export type InputSearchBlurEventDetail = Event;
 export type InputSearchInputEventDetail = InputEvent;
+declare const INPUT_SEARCH_ARIA_ATTRIBUTES: readonly [
+    "role",
+    "aria-autocomplete",
+    "aria-controls",
+    "aria-expanded",
+    "aria-haspopup",
+    "aria-label"
+];
+export type InputSearchAriaAttribute = (typeof INPUT_SEARCH_ARIA_ATTRIBUTES)[number];
 export type InputTelState = FormState;
 export type InputTelChangeEventDetail = Event;
 export type InputTelBlurEventDetail = Event;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.0.0"
+    "@porsche-design-system/components-js": "4.1.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",

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

@@ -3775,7 +3775,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.0.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.1.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);

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

@@ -3454,7 +3454,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.1.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3605,6 +3605,11 @@ const isInfinitePagination = (amountOfPages) => {
     return amountOfPages > INFINITE_BULLET_THRESHOLD;
 };
 
+const mergeInputNativeAria = (passthrough, builtIn) => ({
+    ...(parseAndGetAriaAttributes(passthrough) ?? {}),
+    ...builtIn,
+});
+
 const labelId = 'label';
 const descriptionId = 'description';
 
@@ -3987,6 +3992,7 @@ exports.isSortable = isSortable;
 exports.isStateCompleteOrWarning = isStateCompleteOrWarning;
 exports.isUrl = isUrl;
 exports.labelId = labelId;
+exports.mergeInputNativeAria = mergeInputNativeAria;
 exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;

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

@@ -7,23 +7,23 @@ 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 = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ react.forwardRef(({ aria, autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', 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, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
+    const propsToSync = [aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', '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, maxLength, message, minLength, name, placeholder, readOnly, required, state, value, children })),
+                children: (jsxRuntime.jsx(inputSearch.DSRInputSearch, { aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -19,11 +19,17 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 // onBlur,
 // onKeyDown,
 // refElement,
-start, end, }) => {
+start, end, aria, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);
     const inputDescriptionId = (description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? utilsEntry.descriptionId : undefined;
     const inputMessageId = (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state) ? stateMessage.messageId : undefined;
-    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": utilsEntry.setAriaIDREF(loading && loadingMessage.loadingId, inputMessageId, inputDescriptionId), "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 || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This overwrites the default: let the browser now decide in which direction the value should be placed.
+    const inputAria = utilsEntry.mergeInputNativeAria(aria, {
+        'aria-describedby': utilsEntry.setAriaIDREF(loading && loadingMessage.loadingId, inputMessageId, inputDescriptionId),
+        'aria-invalid': state === 'error' ? 'true' : null,
+        'aria-disabled': disabled || loading ? 'true' : null,
+        'aria-readonly': readOnly ? 'true' : null,
+    });
+    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", { ...inputAria, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This overwrites the default: let the browser now decide in which direction the value should be placed.
                      }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { "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, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 

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

@@ -38,7 +38,7 @@ class DSRInputSearch extends react.Component {
     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.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, 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, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        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, 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, loading: this.props.loading, initialLoading: this.props.initialLoading, aria: this.props.aria, ...(this.props.indicator && {
                                 start: jsxRuntime.jsx(icon_wrapper.PIcon, { "aria-hidden": "true", name: "search", color: "contrast-medium" }),
                             }), ...(this.props.clear && {
                                 end: (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { tabIndex: -1, hideLabel: true, className: "button", type: "button", icon: "close", hidden: !this.props.isClearable, disabled: this.props.readOnly || this.props.disabled, children: "Clear field" })),

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -3773,7 +3773,7 @@ const OPTION_LIST_SAFE_ZONE = 6;
 
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
-const prefix = `[Porsche Design System v${"4.0.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.1.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages);

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

@@ -3452,7 +3452,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.1.0"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3603,6 +3603,11 @@ const isInfinitePagination = (amountOfPages) => {
     return amountOfPages > INFINITE_BULLET_THRESHOLD;
 };
 
+const mergeInputNativeAria = (passthrough, builtIn) => ({
+    ...(parseAndGetAriaAttributes(passthrough) ?? {}),
+    ...builtIn,
+});
+
 const labelId = 'label';
 const descriptionId = 'description';
 
@@ -3930,4 +3935,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, setAriaIDREF, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getBannerAriaAttributes, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationAriaAttributes, getListboxAriaAttributes, getSanitizedActiveTabIndex, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, mergeInputNativeAria, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, setAriaIDREF, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

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

@@ -5,23 +5,23 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRInputSearch } from '../dsr-components/input-search.mjs';
 
-const PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ forwardRef(({ aria, autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-search');
-    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
+    const propsToSync = [aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputSearch, { autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value, children })),
+                children: (jsx(DSRInputSearch, { aria, autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import 'react';
 import '../../provider.mjs';
-import { descriptionId, setAriaIDREF } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { descriptionId, mergeInputNativeAria, setAriaIDREF } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
@@ -17,11 +17,17 @@ id, label, description, loading, initialLoading, required, disabled, state, mess
 // onBlur,
 // onKeyDown,
 // refElement,
-start, end, }) => {
+start, end, aria, }) => {
     const { namedSlotChildren } = splitChildren(children);
     const inputDescriptionId = (description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
     const inputMessageId = (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state) ? messageId : undefined;
-    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, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": setAriaIDREF(loading && loadingId, inputMessageId, inputDescriptionId), "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 || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This overwrites the default: let the browser now decide in which direction the value should be placed.
+    const inputAria = mergeInputNativeAria(aria, {
+        'aria-describedby': setAriaIDREF(loading && loadingId, inputMessageId, inputDescriptionId),
+        'aria-invalid': state === 'error' ? 'true' : null,
+        'aria-disabled': disabled || loading ? 'true' : null,
+        'aria-readonly': readOnly ? 'true' : null,
+    });
+    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, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { ...inputAria, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This overwrites the default: let the browser now decide in which direction the value should be placed.
                      }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 

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

@@ -36,7 +36,7 @@ class DSRInputSearch extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$M(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.clear));
-        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-search", name: this.props.name, form: this.props.form, type: "search", 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, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        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-search", name: this.props.name, form: this.props.form, type: "search", 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, loading: this.props.loading, initialLoading: this.props.initialLoading, aria: this.props.aria, ...(this.props.indicator && {
                                 start: jsx(PIcon, { "aria-hidden": "true", name: "search", color: "contrast-medium" }),
                             }), ...(this.props.clear && {
                                 end: (jsx(PButtonPure, { tabIndex: -1, hideLabel: true, className: "button", type: "button", icon: "close", hidden: !this.props.isClearable, disabled: this.props.readOnly || this.props.disabled, children: "Clear field" })),

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

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
+import type { SelectedAriaAttributes, InputSearchAriaAttribute, BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState } from '../types';
 export type PInputSearchProps = BaseProps & {
+    /**
+     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     */
+    aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
@@ -105,6 +109,10 @@ export type PInputSearchProps = BaseProps & {
     value?: string;
 };
 export declare const PInputSearch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Additional ARIA attributes for the native search input (e.g. `role="combobox"`, `aria-expanded`).
+     */
+    aria?: SelectedAriaAttributes<InputSearchAriaAttribute>;
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */

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

@@ -1,6 +1,7 @@
+import type { AriaAttributes } from '../types';
 import type { FC } from 'react';
 import type { JSX } from 'react';
-import type { InputBaseState } from '@porsche-design-system/components/dist/utils';
+import { type InputBaseState } from '@porsche-design-system/components/dist/utils';
 type InputBaseProps = {
     children?: JSX.Element;
     host: HTMLElement;
@@ -30,6 +31,7 @@ type InputBaseProps = {
     spellCheck?: boolean;
     start?: JSX.Element;
     end?: JSX.Element;
+    aria?: AriaAttributes | string;
 };
 export declare const InputBase: FC<InputBaseProps>;
 export {};

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

@@ -1137,6 +1137,15 @@ export type InputSearchState = FormState;
 export type InputSearchChangeEventDetail = Event;
 export type InputSearchBlurEventDetail = Event;
 export type InputSearchInputEventDetail = InputEvent;
+declare const INPUT_SEARCH_ARIA_ATTRIBUTES: readonly [
+    "role",
+    "aria-autocomplete",
+    "aria-controls",
+    "aria-expanded",
+    "aria-haspopup",
+    "aria-label"
+];
+export type InputSearchAriaAttribute = (typeof INPUT_SEARCH_ARIA_ATTRIBUTES)[number];
 export type InputTelState = FormState;
 export type InputTelChangeEventDetail = Event;
 export type InputTelBlurEventDetail = Event;