@porsche-design-system/components-vue 4.0.0 → 4.1.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [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 +51,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/InputSearchWrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const e=require(`../../utils.cjs`);let t=require(`vue`);var n=(0,t.defineComponent)({__name:`InputSearchWrapper`,props:{autoComplete:{},clear:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},description:{default:``},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},indicator:{type:Boolean,default:!1},label:{default:``},loading:{type:Boolean,default:!1},maxLength:{},message:{default:``},minLength:{},name:{},placeholder:{default:``},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:`none`},value:{default:``}},emits:[`update:value`,`blur`,`change`,`input`],setup(n,{emit:r}){let i=e.usePrefix(`p-input-search`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`blur`,s),e.addEventListenerToElementRef(o,`change`,s),e.addEventListenerToElementRef(o,`input`,s,e=>{s(`update:value`,e.target.value)})}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;
+const e=require(`../../utils.cjs`);let t=require(`vue`);var n=(0,t.defineComponent)({__name:`InputSearchWrapper`,props:{aria:{},autoComplete:{},clear:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},description:{default:``},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},indicator:{type:Boolean,default:!1},label:{default:``},loading:{type:Boolean,default:!1},maxLength:{},message:{default:``},minLength:{},name:{},placeholder:{default:``},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:`none`},value:{default:``}},emits:[`update:value`,`blur`,`change`,`input`],setup(n,{emit:r}){let i=e.usePrefix(`p-input-search`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`blur`,s),e.addEventListenerToElementRef(o,`change`,s),e.addEventListenerToElementRef(o,`input`,s,e=>{s(`update:value`,e.target.value)})}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;

package/esm/lib/components/InputSearchWrapper.vue.d.ts

@@ -1,5 +1,9 @@
-import type { BreakpointCustomizable, InputSearchState } from '../types';
+import type { SelectedAriaAttributes, InputSearchAriaAttribute, BreakpointCustomizable, InputSearchState } from '../types';
 type PInputSearchProps = {
+    /**
+     * 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/InputSearchWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -4,6 +4,7 @@ import { createBlock as r, defineComponent as i, onMounted as a, onUpdated as o,
 var p = /* @__PURE__ */ i({
 	__name: "InputSearchWrapper",
 	props: {
+		aria: {},
 		autoComplete: {},
 		clear: {
 			type: Boolean,

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-vue",
-  "version": "4.0.0",
+  "version": "4.1.0-rc.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-rc.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 35.0.0 <36.0.0",