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

package/CHANGELOG.md

@@ -14,6 +14,89 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.17.0-rc.1] - 2024-07-31
+
+#### Added
+
+- `Button`, `Link`:
+  - Prop `variant` extended by value `ghost`
+    ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+  - Prop `compact` ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
+
+#### Fixed
+
+- `Tabs Bar`: fixed tabindex issue when `Tabs Bar` is rendered with the `Scroller` component
+  ([#3421](https://github.com/porsche-design-system/porsche-design-system/pull/3421))
+
+### [3.17.0-rc.0] - 2024-07-29
+
+#### Added
+
+- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
+  - Named slot `header` ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+- `Link Tile`, `Button Tile`: Prop `size` extended by value `large`
+  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+- `Tag`:
+  - Prop `compact` ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
+  - Prop `color` extended by value `background-frosted`
+    ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
+- Styles: `theme{Light|Dark}BackgroundFrosted` and `$pds-theme-{light|dark}-background-frosted` color
+  ([#3409](https://github.com/porsche-design-system/porsche-design-system/pull/3409))
+- `Optgroup`: Usable in combination with `Select` and `Multi Select`
+  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
+- `Flyout`, `Modal`: Add custom events `motionVisibleEnd` and `motionHiddenEnd` to notify when opening and closing
+  transitions are complete ([#3418](https://github.com/porsche-design-system/porsche-design-system/pull/3418))
+
+#### Changed
+
+- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
+  - Layout behaviour is able to break out of its aspect ratio in case content overflows to be a11y compliant and/or to
+    improve visual alignment in CSS Grid context
+    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+  - Values `1:1 | 4:3 | 3:4 | 16:9 | 9:16` of prop `aspect-ratio` are deprecated and mapped to new values
+    `1/1 | 4/3 | 3/4 | 16/9 | 9/16` to be aligned with CSS spec
+    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+
+```diff
+- <p-link-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile>
++ <p-link-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile>
+
+- <p-button-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-button-tile>
++ <p-button-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-button-tile>
+
+- <p-link-tile-model-signature aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile-model-signature>
++ <p-link-tile-model-signature aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile-model-signature>
+```
+
+- `Link Tile`, `Button Tile`: Value `default` of prop `size` is deprecated and mapped to new value `medium` to be in
+  sync with typography sizing definition
+  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
+
+```diff
+- <p-link-tile size="default"></p-link-tile>
++ <p-link-tile size="medium"></p-link-tile>
+
+- <p-button-tile size="default"></p-button-tile>
++ <p-button-tile size="medium"></p-button-tile>
+```
+
+- `Icon`: All icons are up-to-date with the One UI look
+- Shorten asset filenames
+- `Carousel`: Slides and `controls` slot are centered if `alignHeader` prop is set to `center` and amount of slides is
+  less than `slidesPerPage` ([#3372](https://github.com/porsche-design-system/porsche-design-system/pull/3372))
+
+#### Fixed
+
+- `Link Pure`: Broken with `alignLabel="start"`, hidden label & nested anchor
+  ([#3379](https://github.com/porsche-design-system/porsche-design-system/pull/3379))
+- `Textfield Wrapper`, `Textarea Wrapper`: Conditionally rendered component throws
+  `TypeError: Cannot read properties of undefined (reading 'type')`
+  ([#3383](https://github.com/porsche-design-system/porsche-design-system/pull/3383))
+- `Link Tile`: Broken word-break & hyphens Safari
+  ([#3397](https://github.com/porsche-design-system/porsche-design-system/pull/3397))
+- `Select Wrapper`: `optgroup` styling and behavior
+  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
+
 ### [3.16.0] - 2024-07-02
 
 ### [3.16.0-rc.2] - 2024-07-02
@@ -26,7 +109,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 #### Changed
 
-- `Flyout Navigation`, `Flyout Navigation Item`: renamed (experimental) component to `Flyout Multilevel` and
+- `Flyout Navigation`, `Flyout Navigation Item`: Renamed (experimental) component to `Flyout Multilevel` and
   `Flyout Multilevel Item` ([#3351](https://github.com/porsche-design-system/porsche-design-system/pull/3351))
 - `Toast`: 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

package/cjs/lib/components/ButtonTileWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonTileWrapper",props:{align:{default:"bottom"},aria:{},aspectRatio:{default:"4:3"},background:{default:"dark"},compact:{default:!1},description:{},disabled:{type:Boolean,default:!1},gradient:{type:Boolean,default:!0},icon:{default:"none"},iconSource:{},label:{},loading:{type:Boolean,default:!1},size:{default:"default"},type:{default:"submit"},weight:{default:"semi-bold"}},setup(a){const l=n.usePrefix("p-button-tile"),s=a,t=e.ref(),o=()=>n.syncProperties(t,s);return e.onMounted(o),e.onUpdated(o),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(l)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonTileWrapper",props:{align:{default:"bottom"},aria:{},aspectRatio:{default:"4/3"},background:{default:"dark"},compact:{default:!1},description:{},disabled:{type:Boolean,default:!1},gradient:{type:Boolean,default:!0},icon:{default:"none"},iconSource:{},label:{},loading:{type:Boolean,default:!1},size:{default:"medium"},type:{default:"submit"},weight:{default:"semi-bold"}},setup(a){const s=n.usePrefix("p-button-tile"),l=a,t=e.ref(),o=()=>n.syncProperties(t,l);return e.onMounted(o),e.onUpdated(o),(r,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

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

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ButtonWrapper",props:{aria:{},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 p=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,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=u;
+"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;

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

@@ -1 +1 @@
-"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;
+"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;

package/cjs/lib/components/LinkSocialWrapper.vue.cjs

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

package/cjs/lib/components/LinkTileModelSignatureWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkTileModelSignatureWrapper",props:{aspectRatio:{default:"3:4"},description:{},heading:{},headingTag:{default:"h2"},linkDirection:{default:()=>({base:"column",xs:"row"})},model:{default:"911"},weight:{default:"semi-bold"}},setup(r){const s=o.usePrefix("p-link-tile-model-signature"),i=r,t=e.ref(),n=()=>o.syncProperties(t,i);return e.onMounted(n),e.onUpdated(n),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"LinkTileModelSignatureWrapper",props:{aspectRatio:{default:"3/4"},description:{},heading:{},headingTag:{default:"h2"},linkDirection:{default:()=>({base:"column",xs:"row"})},model:{default:"911"},weight:{default:"semi-bold"}},setup(r){const s=o.usePrefix("p-link-tile-model-signature"),i=r,t=e.ref(),n=()=>o.syncProperties(t,i);return e.onMounted(n),e.onUpdated(n),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/LinkTileWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"LinkTileWrapper",props:{align:{default:"bottom"},aria:{},aspectRatio:{default:"4:3"},background:{default:"dark"},compact:{default:!1},description:{},download:{},gradient:{type:Boolean,default:!0},href:{},label:{},rel:{},size:{default:"default"},target:{default:"_self"},weight:{default:"semi-bold"}},setup(r){const a=n.usePrefix("p-link-tile"),s=r,t=e.ref(),o=()=>n.syncProperties(t,s);return e.onMounted(o),e.onUpdated(o),(l,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=d;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"LinkTileWrapper",props:{align:{default:"bottom"},aria:{},aspectRatio:{default:"4/3"},background:{default:"dark"},compact:{default:!1},description:{},download:{},gradient:{type:Boolean,default:!0},href:{},label:{},rel:{},size:{default:"medium"},target:{default:"_self"},weight:{default:"semi-bold"}},setup(r){const a=n.usePrefix("p-link-tile"),s=r,t=e.ref(),o=()=>n.syncProperties(t,s);return e.onMounted(o),e.onUpdated(o),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=d;

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

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),i=e.defineComponent({__name:"LinkWrapper",props:{aria:{},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=i;
+"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;

package/cjs/lib/components/ModalWrapper.vue.cjs

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

package/cjs/lib/components/OptgroupWrapper.vue.cjs

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

package/cjs/lib/components/OptgroupWrapper.vue2.cjs

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

package/cjs/lib/components/TagWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),a=e.defineComponent({__name:"TagWrapper",props:{color:{default:"background-surface"},icon:{},iconSource:{},theme:{}},setup(p){const u=t.usePrefix("p-tag"),o=p,n=e.ref(),s=e.inject(t.themeInjectionKey),c=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(c),e.onUpdated(c),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(u)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=a;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TagWrapper",props:{color:{default:"background-surface"},compact:{type:Boolean,default:!1},icon:{},iconSource:{},theme:{}},setup(p){const a=t.usePrefix("p-tag"),o=p,n=e.ref(),c=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(n,{...o,theme:o.theme||c.value});return e.onMounted(s),e.onUpdated(s),e.watch(c,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

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

package/esm/PorscheDesignSystemProvider.vue.d.ts

@@ -4,7 +4,10 @@ type Props = {
     cdn?: 'auto' | 'cn';
     theme?: Theme;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     prefix: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
@@ -12,10 +15,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
 }>>>, {
     prefix: string;
-    theme: "light" | "dark" | "auto";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    theme: Theme;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 
 type __VLS_WithDefaults<P, D> = {

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

@@ -33,7 +33,10 @@ type PAccordionProps = {
      */
     theme?: Theme;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PAccordionProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PAccordionProps>, {
     headingTag: string;
     size: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -46,11 +49,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onAccordionChange?: ((value: import("../types").AccordionUpdateEvent) => any) | undefined;
     onUpdate?: ((value: import("../types").AccordionUpdateEvent) => any) | undefined;
 }, {
-    headingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    size: BreakpointCustomizable<"small" | "medium">;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    headingTag: AccordionHeadingTag;
+    size: BreakpointCustomizable<AccordionSize>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -38,32 +38,25 @@ type PBannerProps = {
      */
     width?: BannerWidth;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PBannerProps>, {
-    description: string;
-    dismissButton: boolean;
-    heading: string;
-    headingTag: string;
-    open: boolean;
-    state: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PBannerProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PBannerProps>, {
     description: string;
     dismissButton: boolean;
     heading: string;
     headingTag: string;
     open: boolean;
     state: string;
-}>>>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     heading: string;
     description: string;
-    headingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    headingTag: BannerHeadingTag;
     open: boolean;
     dismissButton: boolean;
-    state: "warning" | "error" | "info" | "neutral";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    state: BannerState;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -5,7 +5,10 @@ type PButtonGroupProps = {
      */
     direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonGroupProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonGroupProps>, {
     direction: () => {
         base: string;
         xs: string;
@@ -16,10 +19,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         xs: string;
     };
 }>>>, {
-    direction: BreakpointCustomizable<"row" | "column">;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    direction: BreakpointCustomizable<ButtonGroupDirection>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -66,7 +66,10 @@ type PButtonPureProps = {
      */
     weight?: ButtonPureWeight;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonPureProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonPureProps>, {
     active: boolean;
     alignLabel: string;
     disabled: boolean;
@@ -91,20 +94,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     underline: boolean;
     weight: string;
 }>>>, {
-    weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
+    weight: ButtonPureWeight;
     stretch: BreakpointCustomizable<boolean>;
-    type: "button" | "reset" | "submit";
-    size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small">;
+    type: ButtonPureType;
+    size: BreakpointCustomizable<ButtonPureSize>;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: import("../types").LinkButtonIconName;
+    icon: ButtonPureIcon;
     loading: boolean;
     active: boolean;
-    alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
+    alignLabel: BreakpointCustomizable<ButtonPureAlignLabel>;
     underline: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -61,7 +61,10 @@ type PButtonTileProps = {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonTileProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonTileProps>, {
     align: string;
     aspectRatio: string;
     background: string;
@@ -86,20 +89,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     weight: string;
 }>>>, {
-    weight: BreakpointCustomizable<"regular" | "semi-bold">;
-    type: "button" | "reset" | "submit";
+    weight: BreakpointCustomizable<ButtonTileWeight>;
+    type: ButtonTileType;
     compact: BreakpointCustomizable<boolean>;
-    size: BreakpointCustomizable<"default" | "inherit">;
+    size: BreakpointCustomizable<ButtonTileSize>;
     disabled: boolean;
-    icon: import("../types").LinkButtonIconName;
+    icon: ButtonTileIcon;
     loading: boolean;
-    align: "top" | "bottom";
-    aspectRatio: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16">;
-    background: "light" | "dark" | "auto";
+    align: ButtonTileAlign;
+    aspectRatio: BreakpointCustomizable<ButtonTileAspectRatio>;
+    background: ButtonTileBackground;
     gradient: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -1,11 +1,11 @@
-import { defineComponent as r, ref as d, onMounted as f, onUpdated as p, openBlock as s, createBlock as u, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
+import { defineComponent as r, ref as d, onMounted as p, onUpdated as s, openBlock as f, createBlock as u, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as b } from "vue";
 import { usePrefix as y, syncProperties as _ } from "../../utils.mjs";
 const k = /* @__PURE__ */ r({
   __name: "ButtonTileWrapper",
   props: {
     align: { default: "bottom" },
     aria: {},
-    aspectRatio: { default: "4:3" },
+    aspectRatio: { default: "4/3" },
     background: { default: "dark" },
     compact: { default: !1 },
     description: {},
@@ -15,13 +15,13 @@ const k = /* @__PURE__ */ r({
     iconSource: {},
     label: {},
     loading: { type: Boolean, default: !1 },
-    size: { default: "default" },
+    size: { default: "medium" },
     type: { default: "submit" },
     weight: { default: "semi-bold" }
   },
   setup(o) {
     const n = y("p-button-tile"), a = o, e = d(), t = () => _(e, a);
-    return f(t), p(t), (l, g) => (s(), u(i(c(n)), {
+    return p(t), s(t), (l, g) => (f(), u(i(c(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -4,6 +4,10 @@ type PButtonProps = {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -45,7 +49,11 @@ type PButtonProps = {
      */
     variant?: ButtonVariant;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonProps>, {
+    compact: boolean;
     disabled: boolean;
     hideLabel: boolean;
     icon: string;
@@ -53,6 +61,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PButtonProps>, {
+    compact: boolean;
     disabled: boolean;
     hideLabel: boolean;
     icon: string;
@@ -60,15 +69,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>>>, {
-    type: "button" | "reset" | "submit";
+    type: ButtonType;
+    compact: boolean;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: import("../types").LinkButtonIconName;
+    icon: ButtonIcon;
     loading: boolean;
-    variant: "primary" | "secondary" | "tertiary";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    variant: ButtonVariant;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

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

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

@@ -14,26 +14,21 @@ type PCanvasProps = {
      */
     sidebarStartWidth?: CanvasSidebarStartWidth;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
-    sidebarEndOpen: boolean;
-    sidebarEndWidth: string;
-    sidebarStartOpen: boolean;
-    sidebarStartWidth: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCanvasProps>, {
     sidebarEndOpen: boolean;
     sidebarEndWidth: string;
     sidebarStartOpen: boolean;
     sidebarStartWidth: string;
-}>>>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     sidebarEndOpen: boolean;
-    sidebarEndWidth: "medium" | "large";
+    sidebarEndWidth: CanvasSidebarEndWidth;
     sidebarStartOpen: boolean;
-    sidebarStartWidth: "medium" | "large";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    sidebarStartWidth: CanvasSidebarStartWidth;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -62,7 +62,10 @@ type PCarouselProps = {
      */
     wrapContent?: boolean;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCarouselProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PCarouselProps>, {
     activeSlideIndex: number;
     alignHeader: string;
     headingSize: string;
@@ -85,16 +88,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onUpdate?: ((value: import("../types").CarouselUpdateEvent) => any) | undefined;
     onCarouselChange?: ((value: import("../types").CarouselUpdateEvent) => any) | undefined;
 }, {
-    width: "extended" | "basic";
+    width: CarouselWidth;
     activeSlideIndex: number;
-    alignHeader: "center" | "start" | "left";
+    alignHeader: CarouselAlignHeader;
     headingSize: CarouselHeadingSize;
     pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
-    slidesPerPage: "auto" | BreakpointCustomizable<number>;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    slidesPerPage: BreakpointCustomizable<number> | "auto";
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {