@porsche-design-system/components-vue 3.15.2 → 3.16.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,56 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.16.0-rc.1] - 2024-06-18
+
+#### Added
+
+- `jsdom-polyfill` Added polyfills for `Popover API` and `ResizeObserver`
+  ([#3334](https://github.com/porsche-design-system/porsche-design-system/pull/3334))
+- `Segmented Control`: Prop `aria` added to `Segmented Control Item` to support ARIA attributes
+  ([#3327](https://github.com/porsche-design-system/porsche-design-system/pull/3327))
+
+#### Changed
+
+- Angular: updated peer dependency to `>=17.0.0 <19.0.0`
+  ([#3346](https://github.com/porsche-design-system/porsche-design-system/pull/3346))
+- React: Improve prop typings for all wrappers of `@porsche-design-system/components-react`
+  ([#3336](https://github.com/porsche-design-system/porsche-design-system/pull/3336))
+
+### [3.16.0-rc.0] - 2024-06-05
+
+#### Added
+
+- `Flyout`:
+  - CSS variable `--p-flyout-sticky-top` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Prop `disableBackdropClick` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`:
+  - CSS variable `--p-modal-width` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Named slot `header` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
+#### Changed
+
+- `Modal`, `Flyout`:
+  - Sticky dismiss button ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Aligned layout, spacing and UX behaviour
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
+    https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
+    https://developer.chrome.com/blog/what-is-the-top-layer
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: `heading` prop and `slot="heading"` are deprecated. Use `slot="header"` instead.
+
+#### Fixed
+
+- Types: Fixed incorrectly allowed type `string` in types `BreakpointCustomizable`, `SelectedAriaAttributes`,
+  `CarouselInternationalization`, `PaginationInternationalization` and `ScrollToPosition`
+- `Modal`, `Flyout`: Dynamically react to adding/removing named slots
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: Uses native `<dialog />` element to resolve focus issues, focus trap
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
 ### [3.15.2] - 2024-05-29
 
 #### Fixed

package/cjs/lib/components/CanvasWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),s=require("../../utils.cjs"),m=e.defineComponent({__name:"CanvasWrapper",props:{sidebarEndOpen:{type:Boolean,default:!1},sidebarEndWidth:{default:"medium"},sidebarStartOpen:{type:Boolean,default:!1},sidebarStartWidth:{default:"medium"}},emits:["dismissSidebarEnd","dismissSidebarStart"],setup(o,{emit:d}){const a=s.usePrefix("p-canvas"),i=o,t=e.ref(),n=d,r=()=>s.syncProperties(t,i);return e.onMounted(()=>{r(),s.addEventListenerToElementRef(t,"dismissSidebarEnd",n),s.addEventListenerToElementRef(t,"dismissSidebarStart",n)}),e.onUpdated(r),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=m;

package/cjs/lib/components/CanvasWrapper.vue2.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./CanvasWrapper.vue.cjs");module.exports=e;

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

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

package/cjs/lib/components/SegmentedControlItemWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),l=e.defineComponent({__name:"SegmentedControlItemWrapper",props:{disabled:{type:Boolean,default:!1},icon:{},iconSource:{},label:{},value:{}},setup(r){const s=t.usePrefix("p-segmented-control-item"),c=r,o=e.ref(),n=()=>t.syncProperties(o,c);return e.onMounted(n),e.onUpdated(n),(p,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),a=e.defineComponent({__name:"SegmentedControlItemWrapper",props:{aria:{},disabled:{type:Boolean,default:!1},icon:{},iconSource:{},label:{},value:{}},setup(r){const s=t.usePrefix("p-segmented-control-item"),c=r,o=e.ref(),n=()=>t.syncProperties(o,c);return e.onMounted(n),e.onUpdated(n),(p,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3},512))}});module.exports=a;

package/cjs/public-api.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),_=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CarouselWrapper.vue.cjs"),n=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),c=require("./lib/components/ContentWrapperWrapper.vue.cjs"),o=require("./lib/components/CrestWrapper.vue.cjs"),l=require("./lib/components/DisplayWrapper.vue.cjs"),v=require("./lib/components/DividerWrapper.vue.cjs"),g=require("./lib/components/FieldsetWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),y=require("./lib/components/FlexWrapper.vue.cjs"),W=require("./lib/components/FlexItemWrapper.vue.cjs"),q=require("./lib/components/FlyoutWrapper.vue.cjs"),d=require("./lib/components/FlyoutNavigationWrapper.vue.cjs"),T=require("./lib/components/FlyoutNavigationItemWrapper.vue.cjs"),S=require("./lib/components/GridWrapper.vue.cjs"),m=require("./lib/components/GridItemWrapper.vue.cjs"),b=require("./lib/components/HeadingWrapper.vue.cjs"),C=require("./lib/components/HeadlineWrapper.vue.cjs"),I=require("./lib/components/IconWrapper.vue.cjs"),k=require("./lib/components/InlineNotificationWrapper.vue.cjs"),x=require("./lib/components/LinkWrapper.vue.cjs"),B=require("./lib/components/LinkPureWrapper.vue.cjs"),F=require("./lib/components/LinkSocialWrapper.vue.cjs"),L=require("./lib/components/LinkTileWrapper.vue.cjs"),M=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),H=require("./lib/components/LinkTileProductWrapper.vue.cjs"),D=require("./lib/components/MarqueWrapper.vue.cjs"),h=require("./lib/components/ModalWrapper.vue.cjs"),R=require("./lib/components/ModelSignatureWrapper.vue.cjs"),w=require("./lib/components/MultiSelectWrapper.vue.cjs"),G=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),N=require("./lib/components/PaginationWrapper.vue.cjs"),O=require("./lib/components/PinCodeWrapper.vue.cjs"),f=require("./lib/components/PopoverWrapper.vue.cjs"),z=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),j=require("./lib/components/ScrollerWrapper.vue.cjs"),A=require("./lib/components/SegmentedControlWrapper.vue.cjs"),J=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),E=require("./lib/components/SelectWrapper.vue.cjs"),K=require("./lib/components/SelectOptionWrapper.vue.cjs"),Q=require("./lib/components/SelectWrapperWrapper.vue.cjs"),U=require("./lib/components/SpinnerWrapper.vue.cjs"),V=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),X=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),Y=require("./lib/components/SwitchWrapper.vue.cjs"),Z=require("./lib/components/TableWrapper.vue.cjs"),$=require("./lib/components/TableBodyWrapper.vue.cjs"),ee=require("./lib/components/TableCellWrapper.vue.cjs"),re=require("./lib/components/TableHeadWrapper.vue.cjs"),te=require("./lib/components/TableHeadCellWrapper.vue.cjs"),_e=require("./lib/components/TableHeadRowWrapper.vue.cjs"),pe=require("./lib/components/TableRowWrapper.vue.cjs"),ue=require("./lib/components/TabsWrapper.vue.cjs"),se=require("./lib/components/TabsBarWrapper.vue.cjs"),ie=require("./lib/components/TabsItemWrapper.vue.cjs"),ae=require("./lib/components/TagWrapper.vue.cjs"),ne=require("./lib/components/TagDismissibleWrapper.vue.cjs"),ce=require("./lib/components/TextWrapper.vue.cjs"),oe=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),le=require("./lib/components/TextListWrapper.vue.cjs"),ve=require("./lib/components/TextListItemWrapper.vue.cjs"),ge=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),Pe=require("./lib/components/ToastWrapper.vue.cjs"),ye=require("./lib/components/WordmarkWrapper.vue.cjs"),We=require("./utils.cjs"),qe=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=t;exports.PBanner=_;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCarousel=a;exports.PCheckboxWrapper=n;exports.PContentWrapper=c;exports.PCrest=o;exports.PDisplay=l;exports.PDivider=v;exports.PFieldset=g;exports.PFieldsetWrapper=P;exports.PFlex=y;exports.PFlexItem=W;exports.PFlyout=q;exports.PFlyoutNavigation=d;exports.PFlyoutNavigationItem=T;exports.PGrid=S;exports.PGridItem=m;exports.PHeading=b;exports.PHeadline=C;exports.PIcon=I;exports.PInlineNotification=k;exports.PLink=x;exports.PLinkPure=B;exports.PLinkSocial=F;exports.PLinkTile=L;exports.PLinkTileModelSignature=M;exports.PLinkTileProduct=H;exports.PMarque=D;exports.PModal=h;exports.PModelSignature=R;exports.PMultiSelect=w;exports.PMultiSelectOption=G;exports.PPagination=N;exports.PPinCode=O;exports.PPopover=f;exports.PRadioButtonWrapper=z;exports.PScroller=j;exports.PSegmentedControl=A;exports.PSegmentedControlItem=J;exports.PSelect=E;exports.PSelectOption=K;exports.PSelectWrapper=Q;exports.PSpinner=U;exports.PStepperHorizontal=V;exports.PStepperHorizontalItem=X;exports.PSwitch=Y;exports.PTable=Z;exports.PTableBody=$;exports.PTableCell=ee;exports.PTableHead=re;exports.PTableHeadCell=te;exports.PTableHeadRow=_e;exports.PTableRow=pe;exports.PTabs=ue;exports.PTabsBar=se;exports.PTabsItem=ie;exports.PTag=ae;exports.PTagDismissible=ne;exports.PText=ce;exports.PTextFieldWrapper=oe;exports.PTextList=le;exports.PTextListItem=ve;exports.PTextareaWrapper=ge;exports.PToast=Pe;exports.PWordmark=ye;exports.useToastManager=We.useToastManager;exports.PorscheDesignSystemProvider=qe;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@porsche-design-system/components-js"),t=require("./lib/components/AccordionWrapper.vue.cjs"),_=require("./lib/components/BannerWrapper.vue.cjs"),p=require("./lib/components/ButtonWrapper.vue.cjs"),u=require("./lib/components/ButtonGroupWrapper.vue.cjs"),s=require("./lib/components/ButtonPureWrapper.vue.cjs"),i=require("./lib/components/ButtonTileWrapper.vue.cjs"),a=require("./lib/components/CanvasWrapper.vue.cjs"),n=require("./lib/components/CarouselWrapper.vue.cjs"),c=require("./lib/components/CheckboxWrapperWrapper.vue.cjs"),o=require("./lib/components/ContentWrapperWrapper.vue.cjs"),l=require("./lib/components/CrestWrapper.vue.cjs"),v=require("./lib/components/DisplayWrapper.vue.cjs"),g=require("./lib/components/DividerWrapper.vue.cjs"),P=require("./lib/components/FieldsetWrapper.vue.cjs"),y=require("./lib/components/FieldsetWrapperWrapper.vue.cjs"),W=require("./lib/components/FlexWrapper.vue.cjs"),q=require("./lib/components/FlexItemWrapper.vue.cjs"),d=require("./lib/components/FlyoutWrapper.vue.cjs"),T=require("./lib/components/FlyoutNavigationWrapper.vue.cjs"),S=require("./lib/components/FlyoutNavigationItemWrapper.vue.cjs"),m=require("./lib/components/GridWrapper.vue.cjs"),b=require("./lib/components/GridItemWrapper.vue.cjs"),C=require("./lib/components/HeadingWrapper.vue.cjs"),I=require("./lib/components/HeadlineWrapper.vue.cjs"),k=require("./lib/components/IconWrapper.vue.cjs"),x=require("./lib/components/InlineNotificationWrapper.vue.cjs"),B=require("./lib/components/LinkWrapper.vue.cjs"),F=require("./lib/components/LinkPureWrapper.vue.cjs"),L=require("./lib/components/LinkSocialWrapper.vue.cjs"),M=require("./lib/components/LinkTileWrapper.vue.cjs"),H=require("./lib/components/LinkTileModelSignatureWrapper.vue.cjs"),D=require("./lib/components/LinkTileProductWrapper.vue.cjs"),h=require("./lib/components/MarqueWrapper.vue.cjs"),R=require("./lib/components/ModalWrapper.vue.cjs"),w=require("./lib/components/ModelSignatureWrapper.vue.cjs"),G=require("./lib/components/MultiSelectWrapper.vue.cjs"),N=require("./lib/components/MultiSelectOptionWrapper.vue.cjs"),O=require("./lib/components/PaginationWrapper.vue.cjs"),f=require("./lib/components/PinCodeWrapper.vue.cjs"),z=require("./lib/components/PopoverWrapper.vue.cjs"),j=require("./lib/components/RadioButtonWrapperWrapper.vue.cjs"),A=require("./lib/components/ScrollerWrapper.vue.cjs"),J=require("./lib/components/SegmentedControlWrapper.vue.cjs"),E=require("./lib/components/SegmentedControlItemWrapper.vue.cjs"),K=require("./lib/components/SelectWrapper.vue.cjs"),Q=require("./lib/components/SelectOptionWrapper.vue.cjs"),U=require("./lib/components/SelectWrapperWrapper.vue.cjs"),V=require("./lib/components/SpinnerWrapper.vue.cjs"),X=require("./lib/components/StepperHorizontalWrapper.vue.cjs"),Y=require("./lib/components/StepperHorizontalItemWrapper.vue.cjs"),Z=require("./lib/components/SwitchWrapper.vue.cjs"),$=require("./lib/components/TableWrapper.vue.cjs"),ee=require("./lib/components/TableBodyWrapper.vue.cjs"),re=require("./lib/components/TableCellWrapper.vue.cjs"),te=require("./lib/components/TableHeadWrapper.vue.cjs"),_e=require("./lib/components/TableHeadCellWrapper.vue.cjs"),pe=require("./lib/components/TableHeadRowWrapper.vue.cjs"),ue=require("./lib/components/TableRowWrapper.vue.cjs"),se=require("./lib/components/TabsWrapper.vue.cjs"),ie=require("./lib/components/TabsBarWrapper.vue.cjs"),ae=require("./lib/components/TabsItemWrapper.vue.cjs"),ne=require("./lib/components/TagWrapper.vue.cjs"),ce=require("./lib/components/TagDismissibleWrapper.vue.cjs"),oe=require("./lib/components/TextWrapper.vue.cjs"),le=require("./lib/components/TextFieldWrapperWrapper.vue.cjs"),ve=require("./lib/components/TextListWrapper.vue.cjs"),ge=require("./lib/components/TextListItemWrapper.vue.cjs"),Pe=require("./lib/components/TextareaWrapperWrapper.vue.cjs"),ye=require("./lib/components/ToastWrapper.vue.cjs"),We=require("./lib/components/WordmarkWrapper.vue.cjs"),qe=require("./utils.cjs"),de=require("./PorscheDesignSystemProvider.vue.cjs"),e=require("./plugin.cjs");Object.defineProperty(exports,"componentsReady",{enumerable:!0,get:()=>r.componentsReady});exports.PAccordion=t;exports.PBanner=_;exports.PButton=p;exports.PButtonGroup=u;exports.PButtonPure=s;exports.PButtonTile=i;exports.PCanvas=a;exports.PCarousel=n;exports.PCheckboxWrapper=c;exports.PContentWrapper=o;exports.PCrest=l;exports.PDisplay=v;exports.PDivider=g;exports.PFieldset=P;exports.PFieldsetWrapper=y;exports.PFlex=W;exports.PFlexItem=q;exports.PFlyout=d;exports.PFlyoutNavigation=T;exports.PFlyoutNavigationItem=S;exports.PGrid=m;exports.PGridItem=b;exports.PHeading=C;exports.PHeadline=I;exports.PIcon=k;exports.PInlineNotification=x;exports.PLink=B;exports.PLinkPure=F;exports.PLinkSocial=L;exports.PLinkTile=M;exports.PLinkTileModelSignature=H;exports.PLinkTileProduct=D;exports.PMarque=h;exports.PModal=R;exports.PModelSignature=w;exports.PMultiSelect=G;exports.PMultiSelectOption=N;exports.PPagination=O;exports.PPinCode=f;exports.PPopover=z;exports.PRadioButtonWrapper=j;exports.PScroller=A;exports.PSegmentedControl=J;exports.PSegmentedControlItem=E;exports.PSelect=K;exports.PSelectOption=Q;exports.PSelectWrapper=U;exports.PSpinner=V;exports.PStepperHorizontal=X;exports.PStepperHorizontalItem=Y;exports.PSwitch=Z;exports.PTable=$;exports.PTableBody=ee;exports.PTableCell=re;exports.PTableHead=te;exports.PTableHeadCell=_e;exports.PTableHeadRow=pe;exports.PTableRow=ue;exports.PTabs=se;exports.PTabsBar=ie;exports.PTabsItem=ae;exports.PTag=ne;exports.PTagDismissible=ce;exports.PText=oe;exports.PTextFieldWrapper=le;exports.PTextList=ve;exports.PTextListItem=ge;exports.PTextareaWrapper=Pe;exports.PToast=ye;exports.PWordmark=We;exports.useToastManager=qe.useToastManager;exports.PorscheDesignSystemProvider=de;exports.createPorscheDesignSystem=e.createPorscheDesignSystem;exports.usePorscheDesignSystemPlugin=e.usePorscheDesignSystemPlugin;

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

@@ -0,0 +1,29 @@
+import { defineComponent as p, ref as m, onMounted as f, onUpdated as l, openBlock as c, createBlock as u, resolveDynamicComponent as b, unref as S, withCtx as C, renderSlot as _ } from "vue";
+import { usePrefix as y, addEventListenerToElementRef as s, syncProperties as E } from "../../utils.mjs";
+const k = /* @__PURE__ */ p({
+  __name: "CanvasWrapper",
+  props: {
+    sidebarEndOpen: { type: Boolean, default: !1 },
+    sidebarEndWidth: { default: "medium" },
+    sidebarStartOpen: { type: Boolean, default: !1 },
+    sidebarStartWidth: { default: "medium" }
+  },
+  emits: ["dismissSidebarEnd", "dismissSidebarStart"],
+  setup(o, { emit: r }) {
+    const a = y("p-canvas"), d = o, e = m(), t = r, n = () => E(e, d);
+    return f(() => {
+      n(), s(e, "dismissSidebarEnd", t), s(e, "dismissSidebarStart", t);
+    }), l(n), (i, h) => (c(), u(b(S(a)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: C(() => [
+        _(i.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  k as default
+};

package/esm/lib/components/CanvasWrapper.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./CanvasWrapper.vue.mjs";
+export {
+  f as default
+};

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

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

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

@@ -3,6 +3,7 @@ import { usePrefix as _, syncProperties as y } from "../../utils.mjs";
 const x = /* @__PURE__ */ s({
   __name: "SegmentedControlItemWrapper",
   props: {
+    aria: {},
     disabled: { type: Boolean, default: !1 },
     icon: {},
     iconSource: {},

package/esm/public-api.mjs

@@ -5,72 +5,73 @@ import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
 import { default as u } from "./lib/components/ButtonGroupWrapper.vue.mjs";
 import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
 import { default as i } from "./lib/components/ButtonTileWrapper.vue.mjs";
-import { default as T } from "./lib/components/CarouselWrapper.vue.mjs";
-import { default as S } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
-import { default as b } from "./lib/components/ContentWrapperWrapper.vue.mjs";
-import { default as C } from "./lib/components/CrestWrapper.vue.mjs";
-import { default as k } from "./lib/components/DisplayWrapper.vue.mjs";
-import { default as F } from "./lib/components/DividerWrapper.vue.mjs";
-import { default as W } from "./lib/components/FieldsetWrapper.vue.mjs";
-import { default as M } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
-import { default as h } from "./lib/components/FlexWrapper.vue.mjs";
-import { default as R } from "./lib/components/FlexItemWrapper.vue.mjs";
-import { default as G } from "./lib/components/FlyoutWrapper.vue.mjs";
-import { default as z } from "./lib/components/FlyoutNavigationWrapper.vue.mjs";
-import { default as q } from "./lib/components/FlyoutNavigationItemWrapper.vue.mjs";
-import { default as j } from "./lib/components/GridWrapper.vue.mjs";
-import { default as J } from "./lib/components/GridItemWrapper.vue.mjs";
-import { default as Q } from "./lib/components/HeadingWrapper.vue.mjs";
-import { default as V } from "./lib/components/HeadlineWrapper.vue.mjs";
-import { default as Y } from "./lib/components/IconWrapper.vue.mjs";
-import { default as _ } from "./lib/components/InlineNotificationWrapper.vue.mjs";
-import { default as ee } from "./lib/components/LinkWrapper.vue.mjs";
-import { default as oe } from "./lib/components/LinkPureWrapper.vue.mjs";
-import { default as ae } from "./lib/components/LinkSocialWrapper.vue.mjs";
-import { default as le } from "./lib/components/LinkTileWrapper.vue.mjs";
-import { default as se } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
-import { default as ue } from "./lib/components/LinkTileProductWrapper.vue.mjs";
-import { default as xe } from "./lib/components/MarqueWrapper.vue.mjs";
-import { default as ie } from "./lib/components/ModalWrapper.vue.mjs";
-import { default as Te } from "./lib/components/ModelSignatureWrapper.vue.mjs";
-import { default as Se } from "./lib/components/MultiSelectWrapper.vue.mjs";
-import { default as be } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
-import { default as Ce } from "./lib/components/PaginationWrapper.vue.mjs";
-import { default as ke } from "./lib/components/PinCodeWrapper.vue.mjs";
-import { default as Fe } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as We } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as Me } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as he } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as Re } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as ze } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as qe } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as je } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as Je } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as Qe } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as Ve } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as Ye } from "./lib/components/TableWrapper.vue.mjs";
-import { default as _e } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as et } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as ot } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as at } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as lt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as st } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as ut } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as xt } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as it } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as St } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as bt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as Ct } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as kt } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as Ft } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as Wt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as Mt } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as ht } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { useToastManager as Rt } from "./utils.mjs";
-import { default as Gt } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as zt, usePorscheDesignSystemPlugin as Ot } from "./plugin.mjs";
+import { default as T } from "./lib/components/CanvasWrapper.vue.mjs";
+import { default as S } from "./lib/components/CarouselWrapper.vue.mjs";
+import { default as b } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
+import { default as y } from "./lib/components/ContentWrapperWrapper.vue.mjs";
+import { default as k } from "./lib/components/CrestWrapper.vue.mjs";
+import { default as F } from "./lib/components/DisplayWrapper.vue.mjs";
+import { default as W } from "./lib/components/DividerWrapper.vue.mjs";
+import { default as M } from "./lib/components/FieldsetWrapper.vue.mjs";
+import { default as D } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
+import { default as R } from "./lib/components/FlexWrapper.vue.mjs";
+import { default as G } from "./lib/components/FlexItemWrapper.vue.mjs";
+import { default as z } from "./lib/components/FlyoutWrapper.vue.mjs";
+import { default as q } from "./lib/components/FlyoutNavigationWrapper.vue.mjs";
+import { default as j } from "./lib/components/FlyoutNavigationItemWrapper.vue.mjs";
+import { default as J } from "./lib/components/GridWrapper.vue.mjs";
+import { default as Q } from "./lib/components/GridItemWrapper.vue.mjs";
+import { default as V } from "./lib/components/HeadingWrapper.vue.mjs";
+import { default as Y } from "./lib/components/HeadlineWrapper.vue.mjs";
+import { default as _ } from "./lib/components/IconWrapper.vue.mjs";
+import { default as ee } from "./lib/components/InlineNotificationWrapper.vue.mjs";
+import { default as oe } from "./lib/components/LinkWrapper.vue.mjs";
+import { default as ae } from "./lib/components/LinkPureWrapper.vue.mjs";
+import { default as le } from "./lib/components/LinkSocialWrapper.vue.mjs";
+import { default as se } from "./lib/components/LinkTileWrapper.vue.mjs";
+import { default as ue } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
+import { default as xe } from "./lib/components/LinkTileProductWrapper.vue.mjs";
+import { default as ie } from "./lib/components/MarqueWrapper.vue.mjs";
+import { default as Te } from "./lib/components/ModalWrapper.vue.mjs";
+import { default as Se } from "./lib/components/ModelSignatureWrapper.vue.mjs";
+import { default as be } from "./lib/components/MultiSelectWrapper.vue.mjs";
+import { default as ye } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
+import { default as ke } from "./lib/components/PaginationWrapper.vue.mjs";
+import { default as Fe } from "./lib/components/PinCodeWrapper.vue.mjs";
+import { default as We } from "./lib/components/PopoverWrapper.vue.mjs";
+import { default as Me } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as De } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as Re } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as Ge } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as ze } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as qe } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as je } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as Je } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as Qe } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as Ve } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as Ye } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as _e } from "./lib/components/TableWrapper.vue.mjs";
+import { default as et } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as ot } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as at } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as lt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as st } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as ut } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as xt } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as it } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as St } from "./lib/components/TagWrapper.vue.mjs";
+import { default as bt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as yt } from "./lib/components/TextWrapper.vue.mjs";
+import { default as kt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as Ft } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as Wt } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as Mt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { useToastManager as Gt } from "./utils.mjs";
+import { default as zt } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as qt, usePorscheDesignSystemPlugin as At } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -78,72 +79,73 @@ export {
   u as PButtonGroup,
   x as PButtonPure,
   i as PButtonTile,
-  T as PCarousel,
-  S as PCheckboxWrapper,
-  b as PContentWrapper,
-  C as PCrest,
-  k as PDisplay,
-  F as PDivider,
-  W as PFieldset,
-  M as PFieldsetWrapper,
-  h as PFlex,
-  R as PFlexItem,
-  G as PFlyout,
-  z as PFlyoutNavigation,
-  q as PFlyoutNavigationItem,
-  j as PGrid,
-  J as PGridItem,
-  Q as PHeading,
-  V as PHeadline,
-  Y as PIcon,
-  _ as PInlineNotification,
-  ee as PLink,
-  oe as PLinkPure,
-  ae as PLinkSocial,
-  le as PLinkTile,
-  se as PLinkTileModelSignature,
-  ue as PLinkTileProduct,
-  xe as PMarque,
-  ie as PModal,
-  Te as PModelSignature,
-  Se as PMultiSelect,
-  be as PMultiSelectOption,
-  Ce as PPagination,
-  ke as PPinCode,
-  Fe as PPopover,
-  We as PRadioButtonWrapper,
-  Me as PScroller,
-  he as PSegmentedControl,
-  Re as PSegmentedControlItem,
-  Ge as PSelect,
-  ze as PSelectOption,
-  qe as PSelectWrapper,
-  je as PSpinner,
-  Je as PStepperHorizontal,
-  Qe as PStepperHorizontalItem,
-  Ve as PSwitch,
-  Ye as PTable,
-  _e as PTableBody,
-  et as PTableCell,
-  ot as PTableHead,
-  at as PTableHeadCell,
-  lt as PTableHeadRow,
-  st as PTableRow,
-  ut as PTabs,
-  xt as PTabsBar,
-  it as PTabsItem,
-  Tt as PTag,
-  St as PTagDismissible,
-  bt as PText,
-  Ct as PTextFieldWrapper,
-  kt as PTextList,
-  Ft as PTextListItem,
-  Wt as PTextareaWrapper,
-  Mt as PToast,
-  ht as PWordmark,
-  Gt as PorscheDesignSystemProvider,
+  T as PCanvas,
+  S as PCarousel,
+  b as PCheckboxWrapper,
+  y as PContentWrapper,
+  k as PCrest,
+  F as PDisplay,
+  W as PDivider,
+  M as PFieldset,
+  D as PFieldsetWrapper,
+  R as PFlex,
+  G as PFlexItem,
+  z as PFlyout,
+  q as PFlyoutNavigation,
+  j as PFlyoutNavigationItem,
+  J as PGrid,
+  Q as PGridItem,
+  V as PHeading,
+  Y as PHeadline,
+  _ as PIcon,
+  ee as PInlineNotification,
+  oe as PLink,
+  ae as PLinkPure,
+  le as PLinkSocial,
+  se as PLinkTile,
+  ue as PLinkTileModelSignature,
+  xe as PLinkTileProduct,
+  ie as PMarque,
+  Te as PModal,
+  Se as PModelSignature,
+  be as PMultiSelect,
+  ye as PMultiSelectOption,
+  ke as PPagination,
+  Fe as PPinCode,
+  We as PPopover,
+  Me as PRadioButtonWrapper,
+  De as PScroller,
+  Re as PSegmentedControl,
+  Ge as PSegmentedControlItem,
+  ze as PSelect,
+  qe as PSelectOption,
+  je as PSelectWrapper,
+  Je as PSpinner,
+  Qe as PStepperHorizontal,
+  Ve as PStepperHorizontalItem,
+  Ye as PSwitch,
+  _e as PTable,
+  et as PTableBody,
+  ot as PTableCell,
+  at as PTableHead,
+  lt as PTableHeadCell,
+  st as PTableHeadRow,
+  ut as PTableRow,
+  xt as PTabs,
+  it as PTabsBar,
+  Tt as PTabsItem,
+  St as PTag,
+  bt as PTagDismissible,
+  yt as PText,
+  kt as PTextFieldWrapper,
+  Ft as PTextList,
+  Wt as PTextListItem,
+  Mt as PTextareaWrapper,
+  Dt as PToast,
+  Rt as PWordmark,
+  zt as PorscheDesignSystemProvider,
   o as componentsReady,
-  zt as createPorscheDesignSystem,
-  Ot as usePorscheDesignSystemPlugin,
-  Rt as useToastManager
+  qt as createPorscheDesignSystem,
+  At as usePorscheDesignSystemPlugin,
+  Gt as useToastManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.15.2",
+  "version": "3.16.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.15.2"
+    "@porsche-design-system/components-js": "3.16.0-rc.1"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"