@porsche-design-system/components-vue 3.20.0 → 3.21.0

package/CHANGELOG.md

@@ -14,6 +14,49 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.21.0] - 2024-11-12
+
+### [3.21.0-rc.0] - 2024-11-11
+
+#### Added
+
+- `Flyout`: Prop `footerBehavior` to always make footer fixed
+  ([3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
+- `Checkbox`, `Textarea`: `formDisabledCallback` and `formStateRestoreCallback` from ElementInternals API and sync
+  validity with form element. ([#3528](https://github.com/porsche-design-system/porsche-design-system/pull/3528))
+- `Link`, `Link Pure`, `Link Tile`: `aria-haspopup` is now supported for `aria` prop
+  ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589))
+- `Button`, `Link`: `compact` prop is breakpoint customizable
+  ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580))
+- `Select`, `Multi-Select`: Added `form` prop to explicitly associate these components with a specific form when they
+  are not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+
+#### Changed
+
+- `Select`, `Multi-Select`:
+  - Remove native select and use ElementInternals API
+    ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+  - **Breaking Change**: `Select` and `Multi-Select` components no longer support native validation due to the removal
+    of the underlying native `<select>` element.
+
+#### Fixed
+
+- `Flyout`: overlapping of scrollbar in iOS/iPadOS Safari when sticky header/footer is used
+  ([#3607](https://github.com/porsche-design-system/porsche-design-system/pull/3607))
+- `Carousel`: dynamic change in `slidesPerPages` when using `focusOnCenterSlide` prop breaks pagination
+  ([#3592](https://github.com/porsche-design-system/porsche-design-system/pull/3592))
+- `Flyout`, `Modal`:
+  - transition not working correctly when using conditionally rendered content
+    ([#3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
+  - dismiss button not sticky in case header slot is not present
+    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
+  - dismiss button overlaps content area
+    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
+- `jsdom-polyfill`: errors from included polyfill packages
+  ([3543](https://github.com/porsche-design-system/porsche-design-system/pull/3543))
+- React: global `hidden` attribute with value `false` not working
+  ([#3555](https://github.com/porsche-design-system/porsche-design-system/pull/3555))
+
 ### [3.20.0] - 2024-10-24
 
 ### [3.20.0-rc.1] - 2024-10-24
@@ -22,8 +65,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - React: better tree-shaking for `@porsche-design-system/components-react`
   ([#3554](https://github.com/porsche-design-system/porsche-design-system/pull/3554))
-- `Icon`: `sidebar`
-  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+- `Icon`: `sidebar` ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
 
 #### Changed
 

package/cjs/lib/components/ButtonWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"ButtonWrapper",props:{aria:{},compact:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},icon:{default:"none"},iconSource:{},loading:{type:Boolean,default:!1},name:{},theme:{},type:{default:"submit"},value:{},variant:{default:"primary"}},setup(c){const l=t.usePrefix("p-button"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(r),e.onUpdated(r),e.watch(s,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),p=e.defineComponent({__name:"ButtonWrapper",props:{aria:{},compact:{default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},icon:{default:"none"},iconSource:{},loading:{type:Boolean,default:!1},name:{},theme:{},type:{default:"submit"},value:{},variant:{default:"primary"}},setup(c){const l=t.usePrefix("p-button"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(r),e.onUpdated(r),e.watch(s,a=>{t.syncProperties(o,{theme:n.theme||a})}),(a,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=p;

package/cjs/lib/components/FlyoutWrapper.vue.cjs

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

package/cjs/lib/components/LinkWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkWrapper",props:{aria:{},compact:{type:Boolean,default:!1},download:{},hideLabel:{default:!1},href:{},icon:{default:"none"},iconSource:{},rel:{},target:{default:"_self"},theme:{},variant:{default:"primary"}},setup(c){const p=t.usePrefix("p-link"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),f=e.defineComponent({__name:"LinkWrapper",props:{aria:{},compact:{default:!1},download:{},hideLabel:{default:!1},href:{},icon:{default:"none"},iconSource:{},rel:{},target:{default:"_self"},theme:{},variant:{default:"primary"}},setup(c){const p=t.usePrefix("p-link"),n=c,o=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(o,{theme:n.theme||r})}),(r,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=f;

package/cjs/lib/components/MultiSelectWrapper.vue.cjs

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

package/cjs/lib/components/SelectWrapper.vue.cjs

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

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

@@ -7,7 +7,7 @@ type PButtonProps = {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -70,7 +70,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     variant: string;
 }>>>, {
     type: ButtonType;
-    compact: boolean;
+    compact: BreakpointCustomizable<boolean>;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: ButtonIcon;

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

@@ -1,10 +1,10 @@
-import { defineComponent as s, ref as f, inject as c, onMounted as m, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as B, renderSlot as C } from "vue";
-import { usePrefix as b, themeInjectionKey as v, syncProperties as r } from "../../utils.mjs";
-const P = /* @__PURE__ */ s({
+import { defineComponent as f, ref as l, inject as c, onMounted as m, onUpdated as u, watch as d, openBlock as i, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as C, renderSlot as b } from "vue";
+import { usePrefix as B, themeInjectionKey as v, syncProperties as r } from "../../utils.mjs";
+const P = /* @__PURE__ */ f({
   __name: "ButtonWrapper",
   props: {
     aria: {},
-    compact: { type: Boolean, default: !1 },
+    compact: { default: !1 },
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
     icon: { default: "none" },
@@ -17,15 +17,15 @@ const P = /* @__PURE__ */ s({
     variant: { default: "primary" }
   },
   setup(p) {
-    const l = b("p-button"), e = p, t = f(), n = c(v), a = () => r(t, { ...e, theme: e.theme || n.value });
+    const s = B("p-button"), e = p, t = l(), n = c(v), a = () => r(t, { ...e, theme: e.theme || n.value });
     return m(a), u(a), d(n, (o) => {
       r(t, { theme: e.theme || o });
-    }), (o, k) => (i(), h(y(_(l)), {
+    }), (o, k) => (i(), h(y(_(s)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
-      default: B(() => [
-        C(o.$slots, "default")
+      default: C(() => [
+        b(o.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutFooterBehavior, FlyoutPosition, Theme } from '../types';
 type PFlyoutProps = {
     /**
      * Add ARIA attributes.
@@ -8,6 +8,10 @@ type PFlyoutProps = {
      * If true, the flyout will not be closable via backdrop click.
      */
     disableBackdropClick?: boolean;
+    /**
+     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     */
+    footerBehavior?: FlyoutFooterBehavior;
     /**
      * If true, the flyout is open.
      */
@@ -26,11 +30,13 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PFlyoutProps>, {
     disableBackdropClick: boolean;
+    footerBehavior: string;
     open: boolean;
     position: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     open: boolean;
     disableBackdropClick: boolean;
+    footerBehavior: FlyoutFooterBehavior;
     position: FlyoutPosition;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,26 +1,27 @@
-import { defineComponent as l, ref as f, inject as c, onMounted as u, onUpdated as h, watch as y, openBlock as C, createBlock as _, resolveDynamicComponent as E, unref as k, withCtx as B, renderSlot as b } from "vue";
-import { usePrefix as R, themeInjectionKey as v, addEventListenerToElementRef as s, syncProperties as d } from "../../utils.mjs";
-const j = /* @__PURE__ */ l({
+import { defineComponent as f, ref as l, inject as c, onMounted as u, onUpdated as h, watch as y, openBlock as C, createBlock as _, resolveDynamicComponent as k, unref as B, withCtx as E, renderSlot as b } from "vue";
+import { usePrefix as v, themeInjectionKey as R, addEventListenerToElementRef as s, syncProperties as d } from "../../utils.mjs";
+const j = /* @__PURE__ */ f({
   __name: "FlyoutWrapper",
   props: {
     aria: {},
     disableBackdropClick: { type: Boolean, default: !1 },
+    footerBehavior: { default: "sticky" },
     open: { type: Boolean, default: !1 },
     position: { default: "end" },
     theme: {}
   },
   emits: ["dismiss", "motionHiddenEnd", "motionVisibleEnd"],
-  setup(r, { emit: p }) {
-    const a = R("p-flyout"), t = r, e = f(), o = p, i = c(v), m = () => d(e, { ...t, theme: t.theme || i.value });
+  setup(m, { emit: a }) {
+    const p = v("p-flyout"), t = m, e = l(), o = a, i = c(R), r = () => d(e, { ...t, theme: t.theme || i.value });
     return u(() => {
-      m(), s(e, "dismiss", o), s(e, "motionHiddenEnd", o), s(e, "motionVisibleEnd", o);
-    }), h(m), y(i, (n) => {
+      r(), s(e, "dismiss", o), s(e, "motionHiddenEnd", o), s(e, "motionVisibleEnd", o);
+    }), h(r), y(i, (n) => {
       d(e, { theme: t.theme || n });
-    }), (n, w) => (C(), _(E(k(a)), {
+    }), (n, w) => (C(), _(k(B(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: B(() => [
+      default: E(() => [
         b(n.$slots, "default")
       ]),
       _: 3

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

@@ -7,7 +7,7 @@ type PLinkProps = {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -61,7 +61,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     target: string;
     variant: string;
 }>>>, {
-    compact: boolean;
+    compact: BreakpointCustomizable<boolean>;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: LinkIcon;
     variant: LinkVariant;

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

@@ -1,10 +1,10 @@
 import { defineComponent as s, ref as c, inject as l, onMounted as m, onUpdated as d, watch as i, openBlock as u, createBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as k } from "vue";
 import { usePrefix as w, themeInjectionKey as v, syncProperties as a } from "../../utils.mjs";
-const R = /* @__PURE__ */ s({
+const b = /* @__PURE__ */ s({
   __name: "LinkWrapper",
   props: {
     aria: {},
-    compact: { type: Boolean, default: !1 },
+    compact: { default: !1 },
     download: {},
     hideLabel: { default: !1 },
     href: {},
@@ -15,11 +15,11 @@ const R = /* @__PURE__ */ s({
     theme: {},
     variant: { default: "primary" }
   },
-  setup(p) {
-    const f = w("p-link"), e = p, t = c(), n = l(v), r = () => a(t, { ...e, theme: e.theme || n.value });
+  setup(f) {
+    const p = w("p-link"), e = f, t = c(), n = l(v), r = () => a(t, { ...e, theme: e.theme || n.value });
     return m(r), d(r), i(n, (o) => {
       a(t, { theme: e.theme || o });
-    }), (o, x) => (u(), h(_(y(f)), {
+    }), (o, x) => (u(), h(_(y(p)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
@@ -31,5 +31,5 @@ const R = /* @__PURE__ */ s({
   }
 });
 export {
-  R as default
+  b as default
 };

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

@@ -12,6 +12,10 @@ type PMultiSelectProps = {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * The id of a form element the multi-select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -37,7 +41,7 @@ type PMultiSelectProps = {
      */
     state?: MultiSelectState;
     /**
-     * Adapts the select color depending on the theme.
+     * Adapts the multi-select color depending on the theme.
      */
     theme?: Theme;
     /**

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

@@ -6,6 +6,7 @@ const j = /* @__PURE__ */ p({
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
     dropdownDirection: { default: "auto" },
+    form: {},
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },

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

@@ -12,6 +12,10 @@ type PSelectProps = {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * The id of a form element the select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -1,11 +1,12 @@
-import { defineComponent as f, ref as m, inject as c, onMounted as u, onUpdated as i, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as b, withCtx as v, renderSlot as w } from "vue";
+import { defineComponent as p, ref as m, inject as c, onMounted as u, onUpdated as i, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as b, withCtx as v, renderSlot as w } from "vue";
 import { usePrefix as B, themeInjectionKey as R, addEventListenerToElementRef as k, syncProperties as s } from "../../utils.mjs";
-const j = /* @__PURE__ */ f({
+const j = /* @__PURE__ */ p({
   __name: "SelectWrapper",
   props: {
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
     dropdownDirection: { default: "auto" },
+    form: {},
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },
@@ -17,9 +18,9 @@ const j = /* @__PURE__ */ f({
   },
   emits: ["update"],
   setup(r, { emit: l }) {
-    const d = B("p-select"), t = r, e = m(), p = l, n = c(R), a = () => s(e, { ...t, theme: t.theme || n.value });
+    const d = B("p-select"), t = r, e = m(), f = l, n = c(R), a = () => s(e, { ...t, theme: t.theme || n.value });
     return u(() => {
-      a(), k(e, "update", p);
+      a(), k(e, "update", f);
     }), i(a), h(n, (o) => {
       s(e, { theme: t.theme || o });
     }), (o, x) => (y(), _(C(b(d)), {

package/esm/lib/types.d.ts

@@ -440,7 +440,8 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
 export type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
-    "aria-current"
+    "aria-current",
+    "aria-haspopup"
 ];
 export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
@@ -885,6 +886,11 @@ declare const FLYOUT_POSITIONS: readonly [
     "right"
 ];
 export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
+    "sticky",
+    "fixed"
+];
+export type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
 declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.20.0",
+  "version": "3.21.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",
@@ -17,13 +17,21 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.20.0"
+    "@porsche-design-system/components-js": "3.21.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",
     "ag-grid-vue3": ">= 32.0.0 <33.0.0",
     "vue": ">=3.0.0 <4.0.0"
   },
+  "peerDependenciesMeta": {
+    "ag-grid-enterprise": {
+      "optional": true
+    },
+    "ag-grid-vue3": {
+      "optional": true
+    }
+  },
   "main": "cjs/public-api.cjs",
   "module": "esm/public-api.mjs",
   "types": "esm/public-api.d.ts",