@porsche-design-system/components-vue 3.24.0 → 3.25.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.25.0-rc.0] - 2025-01-21
+
+#### Added
+
+- `Sheet` ([#3704](https://github.com/porsche-design-system/porsche-design-system/pull/3704))
+- `Button`, `Button-Pure`: Add `form` prop to explicitly associate the component with a form, even when it's not
+  directly nested within it. ([#3648](https://github.com/porsche-design-system/porsche-design-system/pull/3648))
+
+#### Changed
+
+- `Table`: Enable `Table Head Cell` to be used within `Table Row` in addition to `Table Head Row` to further align with
+  table structure defined by W3C ([#3701](https://github.com/porsche-design-system/porsche-design-system/pull/3701))
+
+#### Fixed
+
+- `Textarea`, `Textarea Wrapper`, `Textfield Wrapper`: color contrast of `unit` prop and counter in `readonly` mode
+  meets WCAG 2.2 AA standard ([#3693](https://github.com/porsche-design-system/porsche-design-system/pull/3693))
+
 ### [3.24.0] - 2025-01-08
 
 ### [3.24.0-rc.1] - 2025-01-08

package/cjs/lib/components/ButtonPureWrapper.vue.cjs

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

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:{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},form:{},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(),r=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(s),e.onUpdated(s),e.watch(r,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/SheetWrapper.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"SheetWrapper",props:{aria:{},disableBackdropClick:{type:Boolean,default:!1},dismissButton:{type:Boolean,default:!0},open:{type:Boolean,default:!1},theme:{}},emits:["dismiss","motionHiddenEnd","motionVisibleEnd"],setup(m,{emit:a}){const p=t.usePrefix("p-sheet"),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;

package/cjs/lib/components/SheetWrapper.vue2.cjs

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

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

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

@@ -16,6 +16,10 @@ type PButtonPureProps = {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -7,6 +7,7 @@ const k = /* @__PURE__ */ s({
     alignLabel: { default: "end" },
     aria: {},
     disabled: { type: Boolean, default: !1 },
+    form: {},
     hideLabel: { default: !1 },
     icon: { default: "arrow-right" },
     iconSource: {},

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

@@ -12,6 +12,10 @@ type PButtonProps = {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -1,11 +1,12 @@
-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 { defineComponent as s, ref as l, inject as m, onMounted as c, 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({
+const P = /* @__PURE__ */ s({
   __name: "ButtonWrapper",
   props: {
     aria: {},
     compact: { default: !1 },
     disabled: { type: Boolean, default: !1 },
+    form: {},
     hideLabel: { default: !1 },
     icon: { default: "none" },
     iconSource: {},
@@ -16,11 +17,11 @@ const P = /* @__PURE__ */ f({
     value: {},
     variant: { default: "primary" }
   },
-  setup(p) {
-    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) => {
+  setup(f) {
+    const p = B("p-button"), e = f, t = l(), n = m(v), a = () => r(t, { ...e, theme: e.theme || n.value });
+    return c(a), u(a), d(n, (o) => {
       r(t, { theme: e.theme || o });
-    }), (o, k) => (i(), h(y(_(s)), {
+    }), (o, k) => (i(), h(y(_(p)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {

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

@@ -0,0 +1,38 @@
+import type { SelectedAriaAttributes, SheetAriaAttribute, Theme } from '../types';
+type PSheetProps = {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * If true, the sheet will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If false, the sheet will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * If true, the sheet is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the sheet color depending on the theme.
+     */
+    theme?: Theme;
+};
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    open: boolean;
+    dismissButton: boolean;
+    disableBackdropClick: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

package/esm/lib/components/index.d.ts

@@ -47,6 +47,7 @@ export { default as PSegmentedControlItem } from './SegmentedControlItemWrapper.
 export { default as PSelect } from './SelectWrapper.vue';
 export { default as PSelectOption } from './SelectOptionWrapper.vue';
 export { default as PSelectWrapper } from './SelectWrapperWrapper.vue';
+export { default as PSheet } from './SheetWrapper.vue';
 export { default as PSpinner } from './SpinnerWrapper.vue';
 export { default as PStepperHorizontal } from './StepperHorizontalWrapper.vue';
 export { default as PStepperHorizontalItem } from './StepperHorizontalItemWrapper.vue';

package/esm/lib/types.d.ts

@@ -1250,6 +1250,13 @@ declare const DROPDOWN_DIRECTIONS: readonly [
 ];
 export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
+declare const SHEET_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "role"
+];
+export type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
+export type SheetMotionVisibleEndEventDetail = TransitionEvent;
+export type SheetMotionHiddenEndEventDetail = TransitionEvent;
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",

package/esm/public-api.mjs

@@ -12,7 +12,7 @@ import { default as k } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
 import { default as I } from "./lib/components/ContentWrapperWrapper.vue.mjs";
 import { default as B } from "./lib/components/CrestWrapper.vue.mjs";
 import { default as L } from "./lib/components/DisplayWrapper.vue.mjs";
-import { default as H } from "./lib/components/DividerWrapper.vue.mjs";
+import { default as h } from "./lib/components/DividerWrapper.vue.mjs";
 import { default as v } from "./lib/components/FieldsetWrapper.vue.mjs";
 import { default as R } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
 import { default as G } from "./lib/components/FlexWrapper.vue.mjs";
@@ -39,7 +39,7 @@ import { default as ke } from "./lib/components/MultiSelectWrapper.vue.mjs";
 import { default as Ie } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
 import { default as Be } from "./lib/components/OptgroupWrapper.vue.mjs";
 import { default as Le } from "./lib/components/PaginationWrapper.vue.mjs";
-import { default as He } from "./lib/components/PinCodeWrapper.vue.mjs";
+import { default as he } from "./lib/components/PinCodeWrapper.vue.mjs";
 import { default as ve } from "./lib/components/PopoverWrapper.vue.mjs";
 import { default as Re } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
 import { default as Ge } from "./lib/components/ScrollerWrapper.vue.mjs";
@@ -48,33 +48,34 @@ import { default as Ae } from "./lib/components/SegmentedControlItemWrapper.vue.
 import { default as je } from "./lib/components/SelectWrapper.vue.mjs";
 import { default as Je } from "./lib/components/SelectOptionWrapper.vue.mjs";
 import { default as Qe } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as Ve } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as Ye } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as _e } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as et } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as ot } from "./lib/components/TableWrapper.vue.mjs";
-import { default as at } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as lt } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as st } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as ut } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as xt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as it } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as St } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as bt } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as kt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as It } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as Bt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as Lt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as Ht } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as vt } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as Rt } from "./lib/components/TextareaWrapper.vue.mjs";
-import { default as Gt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as zt } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as At } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { useToastManager as jt } from "./utils.mjs";
-import { default as Jt } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as Qt, usePorscheDesignSystemPlugin as Ut } from "./plugin.mjs";
+import { default as Ve } from "./lib/components/SheetWrapper.vue.mjs";
+import { default as Ye } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as _e } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as et } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as ot } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as at } from "./lib/components/TableWrapper.vue.mjs";
+import { default as lt } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as st } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as ut } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as xt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as it } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as St } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as bt } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as kt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as It } from "./lib/components/TagWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as Lt } from "./lib/components/TextWrapper.vue.mjs";
+import { default as ht } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as vt } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as Gt } from "./lib/components/TextareaWrapper.vue.mjs";
+import { default as zt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as At } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as jt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { useToastManager as Jt } from "./utils.mjs";
+import { default as Qt } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as Vt, usePorscheDesignSystemPlugin as Xt } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -89,7 +90,7 @@ export {
   I as PContentWrapper,
   B as PCrest,
   L as PDisplay,
-  H as PDivider,
+  h as PDivider,
   v as PFieldset,
   R as PFieldsetWrapper,
   G as PFlex,
@@ -116,7 +117,7 @@ export {
   Ie as PMultiSelectOption,
   Be as POptgroup,
   Le as PPagination,
-  He as PPinCode,
+  he as PPinCode,
   ve as PPopover,
   Re as PRadioButtonWrapper,
   Ge as PScroller,
@@ -125,33 +126,34 @@ export {
   je as PSelect,
   Je as PSelectOption,
   Qe as PSelectWrapper,
-  Ve as PSpinner,
-  Ye as PStepperHorizontal,
-  _e as PStepperHorizontalItem,
-  et as PSwitch,
-  ot as PTable,
-  at as PTableBody,
-  lt as PTableCell,
-  st as PTableHead,
-  ut as PTableHeadCell,
-  xt as PTableHeadRow,
-  it as PTableRow,
-  Tt as PTabs,
-  St as PTabsBar,
-  bt as PTabsItem,
-  kt as PTag,
-  It as PTagDismissible,
-  Bt as PText,
-  Lt as PTextFieldWrapper,
-  Ht as PTextList,
-  vt as PTextListItem,
-  Rt as PTextarea,
-  Gt as PTextareaWrapper,
-  zt as PToast,
-  At as PWordmark,
-  Jt as PorscheDesignSystemProvider,
+  Ve as PSheet,
+  Ye as PSpinner,
+  _e as PStepperHorizontal,
+  et as PStepperHorizontalItem,
+  ot as PSwitch,
+  at as PTable,
+  lt as PTableBody,
+  st as PTableCell,
+  ut as PTableHead,
+  xt as PTableHeadCell,
+  it as PTableHeadRow,
+  Tt as PTableRow,
+  St as PTabs,
+  bt as PTabsBar,
+  kt as PTabsItem,
+  It as PTag,
+  Bt as PTagDismissible,
+  Lt as PText,
+  ht as PTextFieldWrapper,
+  vt as PTextList,
+  Rt as PTextListItem,
+  Gt as PTextarea,
+  zt as PTextareaWrapper,
+  At as PToast,
+  jt as PWordmark,
+  Qt as PorscheDesignSystemProvider,
   o as componentsReady,
-  Qt as createPorscheDesignSystem,
-  Ut as usePorscheDesignSystemPlugin,
-  jt as useToastManager
+  Vt as createPorscheDesignSystem,
+  Xt as usePorscheDesignSystemPlugin,
+  Jt as useToastManager
 };

package/package.json

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