@porsche-design-system/components-vue 3.29.0-rc.0 → 3.29.0-rc.1

package/CHANGELOG.md

@@ -14,9 +14,50 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.29.0-rc.1] - 2025-07-15
+
+### Added
+
+- `Popover`: support for custom slotted button
+  ([#3861](https://github.com/porsche-design-system/porsche-design-system/pull/3861))
+- `Icon`: `ai-spark` and `ai-spark-filled`
+  ([#3916](https://github.com/porsche-design-system/porsche-design-system/pull/3916))
+- `Input Text`: `counter` prop functions independently of `max-length`, allowing character count display even when no
+  limit is set ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))
+
+### Changed
+
+- `Input Search`: `indicator` prop now defaults to `false`
+  ([#3917](https://github.com/porsche-design-system/porsche-design-system/pull/3917))
+- Angular: updated peer dependency to `>=20.0.0 <21.0.0`
+- **Breaking Change** `Textarea`:
+
+  - Renamed the `showCounter` prop to `counter`.
+  - Changed default behavior: the `counter` is now disabled by default (`false` instead of `true`).
+
+  ```diff
+  - <p-textarea name="some-name" showCounter="false"></p-textarea>
+  + <p-textarea name="some-name"></p-textarea>
+  ```
+
+  To enable the counter explicitly:
+
+  ```diff
+  - <p-textarea name="some-name"></p-textarea>
+  + <p-textarea name="some-name" counter="true"></p-textarea>
+  ```
+
+  ⚠️ This is a breaking change — you must update all instances using `showCounter`.
+  ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))
+
+### Fixed
+
+- `Carousel`: component does not work correctly if an invalid `lang` value is provided
+  ([#3924](https://github.com/porsche-design-system/porsche-design-system/pull/3924))
+
 ## [3.29.0-rc.0] - 2025-06-27
 
-#### Added
+### Added
 
 - `Input Search`: ([#3874](https://github.com/porsche-design-system/porsche-design-system/pull/3874))
 - `Input Number`, `Input Password`: added loading state
@@ -29,11 +70,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [3.28.0] - 2025-06-02
 
-#### Added
+### Added
 
 - `Input Number`: ([#3855](https://github.com/porsche-design-system/porsche-design-system/pull/3855))
 
-#### Fixed
+### Fixed
 
 - `Select Wrapper`: update of scroll position if dropdown is navigated with keyboard
   ([#3858](https://github.com/porsche-design-system/porsche-design-system/pull/3858))

package/cjs/lib/components/InputSearchWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputSearchWrapper",props:{autoComplete:{},clear:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},indicator:{type:Boolean,default:!0},label:{default:""},loading:{type:Boolean,default:!1},message:{default:""},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:""}},emits:["blur","change","input"],setup(d,{emit:u}){const f=t.usePrefix("p-input-search"),a=d,n=e.ref(),o=u,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o),t.addEventListenerToElementRef(n,"input",o)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:a.theme||l})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"InputSearchWrapper",props:{autoComplete:{},clear:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},indicator:{type:Boolean,default:!1},label:{default:""},loading:{type:Boolean,default:!1},message:{default:""},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{default:""}},emits:["blur","change","input"],setup(d,{emit:f}){const u=t.usePrefix("p-input-search"),a=d,n=e.ref(),o=f,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o),t.addEventListenerToElementRef(n,"input",o)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:a.theme||l})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/lib/components/PopoverWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"PopoverWrapper",props:{aria:{},description:{},direction:{default:"bottom"},theme:{}},setup(c){const i=t.usePrefix("p-popover"),o=c,n=e.ref(),s=e.inject(t.themeInjectionKey),p=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(p),e.onUpdated(p),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(i)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=m;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),d=e.defineComponent({__name:"PopoverWrapper",props:{aria:{},description:{},direction:{default:"bottom"},open:{type:Boolean,default:!1},theme:{}},emits:["dismiss"],setup(i,{emit:c}){const m=t.usePrefix("p-popover"),n=i,o=e.ref(),a=c,r=e.inject(t.themeInjectionKey),p=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(()=>{p(),t.addEventListenerToElementRef(o,"dismiss",a)}),e.onUpdated(p),e.watch(r,s=>{t.syncProperties(o,{theme:n.theme||s})}),(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=d;

package/cjs/lib/components/TextareaWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"TextareaWrapper",props:{autoComplete:{},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},maxLength:{},message:{default:""},minLength:{},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},resize:{default:"vertical"},rows:{default:7},showCounter:{type:Boolean,default:!0},spellCheck:{type:Boolean},state:{default:"none"},theme:{},value:{default:""},wrap:{default:"soft"}},emits:["blur","change","input"],setup(u,{emit:d}){const f=t.usePrefix("p-textarea"),o=u,n=e.ref(),a=d,r=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(n,{...o,theme:o.theme||r.value});return e.onMounted(()=>{s(),t.addEventListenerToElementRef(n,"blur",a),t.addEventListenerToElementRef(n,"change",a),t.addEventListenerToElementRef(n,"input",a)}),e.onUpdated(s),e.watch(r,l=>{t.syncProperties(n,{theme:o.theme||l})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(f)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"TextareaWrapper",props:{autoComplete:{},counter:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{default:!1},label:{default:""},maxLength:{},message:{default:""},minLength:{},name:{},placeholder:{default:""},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},resize:{default:"vertical"},rows:{default:7},spellCheck:{type:Boolean},state:{default:"none"},theme:{},value:{default:""},wrap:{default:"soft"}},emits:["blur","change","input"],setup(d,{emit:f}){const u=t.usePrefix("p-textarea"),a=d,n=e.ref(),o=f,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...a,theme:a.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o),t.addEventListenerToElementRef(n,"input",o)}),e.onUpdated(r),e.watch(s,l=>{t.syncProperties(n,{theme:a.theme||l})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=p;

package/esm/lib/components/InputSearchWrapper.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as c, inject as m, onMounted as i, onUpdated as h, watch as y, openBlock as B, createBlock as C, resolveDynamicComponent as _, unref as b, withCtx as g, renderSlot as v } from "vue";
-import { usePrefix as R, themeInjectionKey as k, addEventListenerToElementRef as n, syncProperties as f } from "../../utils.mjs";
+import { usePrefix as R, themeInjectionKey as k, addEventListenerToElementRef as n, syncProperties as r } from "../../utils.mjs";
 const j = /* @__PURE__ */ u({
   __name: "InputSearchWrapper",
   props: {
@@ -10,7 +10,7 @@ const j = /* @__PURE__ */ u({
     disabled: { type: Boolean, default: !1 },
     form: {},
     hideLabel: { default: !1 },
-    indicator: { type: Boolean, default: !0 },
+    indicator: { type: Boolean, default: !1 },
     label: { default: "" },
     loading: { type: Boolean, default: !1 },
     message: { default: "" },
@@ -23,12 +23,12 @@ const j = /* @__PURE__ */ u({
     value: { default: "" }
   },
   emits: ["blur", "change", "input"],
-  setup(p, { emit: s }) {
-    const d = R("p-input-search"), t = p, e = c(), a = s, l = m(k), r = () => f(e, { ...t, theme: t.theme || l.value });
+  setup(s, { emit: p }) {
+    const d = R("p-input-search"), t = s, e = c(), a = p, l = m(k), f = () => r(e, { ...t, theme: t.theme || l.value });
     return i(() => {
-      r(), n(e, "blur", a), n(e, "change", a), n(e, "input", a);
-    }), h(r), y(l, (o) => {
-      f(e, { theme: t.theme || o });
+      f(), n(e, "blur", a), n(e, "change", a), n(e, "input", a);
+    }), h(f), y(l, (o) => {
+      r(e, { theme: t.theme || o });
     }), (o, w) => (B(), C(_(b(d)), {
       ref_key: "pdsComponentRef",
       ref: e

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

@@ -12,6 +12,10 @@ type PPopoverProps = {
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * If true, the popover is open.
+     */
+    open?: boolean;
     /**
      * Adapts the popover color depending on the theme.
      */
@@ -20,7 +24,8 @@ type PPopoverProps = {
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
-declare const __VLS_component: import("vue").DefineComponent<PPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PPopoverProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<PPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    open: boolean;
     direction: PopoverDirection;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/esm/lib/components/PopoverWrapper.vue.mjs

@@ -1,28 +1,32 @@
-import { defineComponent as m, ref as a, inject as f, onMounted as i, onUpdated as d, watch as u, openBlock as h, createBlock as l, resolveDynamicComponent as _, unref as C, withCtx as y, renderSlot as v } from "vue";
-import { usePrefix as P, themeInjectionKey as k, syncProperties as p } from "../../utils.mjs";
-const b = /* @__PURE__ */ m({
+import { defineComponent as c, ref as f, inject as d, onMounted as l, onUpdated as u, watch as h, openBlock as _, createBlock as y, resolveDynamicComponent as C, unref as v, withCtx as P, renderSlot as R } from "vue";
+import { usePrefix as k, themeInjectionKey as w, addEventListenerToElementRef as x, syncProperties as r } from "../../utils.mjs";
+const E = /* @__PURE__ */ c({
   __name: "PopoverWrapper",
   props: {
     aria: {},
     description: {},
     direction: { default: "bottom" },
+    open: { type: Boolean, default: !1 },
     theme: {}
   },
-  setup(s) {
-    const c = P("p-popover"), e = s, o = a(), n = f(k), r = () => p(o, { ...e, theme: e.theme || n.value });
-    return i(r), d(r), u(n, (t) => {
-      p(o, { theme: e.theme || t });
-    }), (t, w) => (h(), l(_(C(c)), {
+  emits: ["dismiss"],
+  setup(p, { emit: m }) {
+    const i = k("p-popover"), t = p, e = f(), a = m, n = d(w), s = () => r(e, { ...t, theme: t.theme || n.value });
+    return l(() => {
+      s(), x(e, "dismiss", a);
+    }), u(s), h(n, (o) => {
+      r(e, { theme: t.theme || o });
+    }), (o, B) => (_(), y(C(v(i)), {
       ref_key: "pdsComponentRef",
-      ref: o
+      ref: e
     }, {
-      default: y(() => [
-        v(t.$slots, "default")
+      default: P(() => [
+        R(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  b as default
+  E as default
 };

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

@@ -4,6 +4,10 @@ type PTextareaProps = {
      * Specifies whether the input can be autofilled by the browser
      */
     autoComplete?: TextareaAutoComplete;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
     /**
      * The description text.
      */
@@ -60,10 +64,6 @@ type PTextareaProps = {
      * The number of rows of the textarea.
      */
     rows?: number;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
     /**
      * Specifies whether the input should have its spelling and grammar checked
      */
@@ -109,7 +109,7 @@ declare const __VLS_component: import("vue").DefineComponent<PTextareaProps, {},
     message: string;
     placeholder: string;
     readOnly: boolean;
-    showCounter: boolean;
+    counter: boolean;
     rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/esm/lib/components/TextareaWrapper.vue.mjs

@@ -1,9 +1,10 @@
-import { defineComponent as u, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as C, createBlock as B, resolveDynamicComponent as _, unref as b, withCtx as g, renderSlot as w } from "vue";
-import { usePrefix as x, themeInjectionKey as v, addEventListenerToElementRef as n, syncProperties as s } from "../../utils.mjs";
+import { defineComponent as u, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as C, createBlock as B, resolveDynamicComponent as _, unref as b, withCtx as g, renderSlot as x } from "vue";
+import { usePrefix as v, themeInjectionKey as w, addEventListenerToElementRef as n, syncProperties as s } from "../../utils.mjs";
 const P = /* @__PURE__ */ u({
   __name: "TextareaWrapper",
   props: {
     autoComplete: {},
+    counter: { type: Boolean, default: !1 },
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
     form: {},
@@ -18,7 +19,6 @@ const P = /* @__PURE__ */ u({
     required: { type: Boolean, default: !1 },
     resize: { default: "vertical" },
     rows: { default: 7 },
-    showCounter: { type: Boolean, default: !0 },
     spellCheck: { type: Boolean },
     state: { default: "none" },
     theme: {},
@@ -27,7 +27,7 @@ const P = /* @__PURE__ */ u({
   },
   emits: ["blur", "change", "input"],
   setup(f, { emit: p }) {
-    const d = x("p-textarea"), t = f, e = m(), a = p, l = c(v), r = () => s(e, { ...t, theme: t.theme || l.value });
+    const d = v("p-textarea"), t = f, e = m(), a = p, l = c(w), r = () => s(e, { ...t, theme: t.theme || l.value });
     return i(() => {
       r(), n(e, "blur", a), n(e, "change", a), n(e, "input", a);
     }), h(r), y(l, (o) => {
@@ -37,7 +37,7 @@ const P = /* @__PURE__ */ u({
       ref: e
     }, {
       default: g(() => [
-        w(o.$slots, "default")
+        x(o.$slots, "default")
       ]),
       _: 3
     }, 512));

package/esm/lib/types.d.ts

@@ -221,6 +221,8 @@ declare const ICON_NAMES: readonly [
     "add",
     "adjust",
     "aggregation",
+    "ai-spark",
+    "ai-spark-filled",
     "arrow-compact-down",
     "arrow-compact-left",
     "arrow-compact-right",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.29.0-rc.0",
+  "version": "3.29.0-rc.1",
   "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",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.29.0-rc.0"
+    "@porsche-design-system/components-js": "3.29.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 33.0.0 <34.0.0",