@porsche-design-system/components-vue 3.7.0-rc.2 → 3.8.0-rc.0

package/CHANGELOG.md

@@ -14,11 +14,119 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
-### [3.7.0-rc.2] - 2023-09-28
+### 3.8.0-rc.0 - 2023-10-23
 
 #### Added
 
-- Styles: `gridStyles` and `pds-grid` support basic usage inside `Flyout` component
+- RTL (right-to-left) support for all components
+  ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+- `Popover` and `Modal` support theme dark and auto
+  ([#2789](https://github.com/porsche-design-system/porsche-design-system/pull/2789))
+- Styles: `getSkeletonStyle()` and `pds-skeleton()`
+  ([#2796](https://github.com/porsche-design-system/porsche-design-system/pull/2796))
+- Styles: `motionDuration{Short|Moderate|Long|VeryLong}`, `motionEasing{Base|In|Out}`, and
+  `$pds-motion-duration-{short|moderate|long|very-long}`, `$pds-motion-easing-{base|in|out}`
+  ([#2791](https://github.com/porsche-design-system/porsche-design-system/pull/2791))
+
+#### Changed
+
+- Styles: `themeDarkBackgroundShading` and `$pds-theme-dark-background-shading` color
+  ([#2789](https://github.com/porsche-design-system/porsche-design-system/pull/2789))
+- `Spinner` animation was optimized to consume less CPU
+  ([#2825](https://github.com/porsche-design-system/porsche-design-system/pull/2825))
+
+- `Text`, `Display`, `Heading`, `Headline`: Prop values `left | right` of `align` prop are deprecated and mapped to new
+  values `start | end` for correct RTL (right-to-left) support
+  ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <p-text align="left"></p-text>
++ <p-text align="start"></p-text>
+
+- <p-text align="right"></p-text>
++ <p-text align="end"></p-text>
+
+- <p-display align="left"></p-display>
++ <p-display align="start"></p-display>
+
+- <p-display align="right"></p-display>
++ <p-display align="end"></p-display>
+
+- <p-heading align="left"></p-heading>
++ <p-heading align="start"></p-heading>
+
+- <p-heading align="right"></p-heading>
++ <p-heading align="end"></p-heading>
+
+- <p-headline align="left"></p-headline>
++ <p-headline align="start"></p-headline>
+
+- <p-headline align="right"></p-headline>
++ <p-headline align="end"></p-headline>
+```
+
+- `Button Pure`, `Link Pure`, `Switch`: Prop values `left | right` of `align-label` prop are deprecated and mapped to
+  new values `start | end` for correct RTL (right-to-left) support
+  ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <p-button-pure align-label="left"></p-button-pure>
++ <p-button-pure align-label="start"></p-button-pure>
+
+- <p-button-pure align-label="right"></p-button-pure>
++ <p-button-pure align-label="end"></p-button-pure>
+
+- <p-link-pure align-label="left"></p-link-pure>
++ <p-link-pure align-label="start"></p-link-pure>
+
+- <p-link-pure align-label="right"></p-link-pure>
++ <p-link-pure align-label="end"></p-link-pure>
+
+- <p-switch align-label="left"></p-switch>
++ <p-switch align-label="start"></p-switch>
+
+- <p-switch align-label="right"></p-switch>
++ <p-switch align-label="end"></p-switch>
+```
+
+- `Flyout`: Prop values `left | right` of `position` prop are deprecated and mapped to new values `start | end` for
+  correct RTL (right-to-left) support
+  ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <p-flyout position="left"></p-flyout>
++ <p-flyout-pure position="start"></p-flyout>
+
+- <p-flyout-pure position="right"></p-flyout>
++ <p-flyout-pure position="end"></p-flyout>
+```
+
+- `Carousel`: Prop value `left` of `align-header` prop is deprecated and mapped to new value `start` for correct RTL
+  (right-to-left) support ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <p-carousel align-header="left"></p-carousel>
++ <p-carousel-pure align-header="start"></p-carousel>
+```
+
+#### Fixed
+
+- `Popover` doesn't get cut off when used within the `Table` component
+  ([#2814](https://github.com/porsche-design-system/porsche-design-system/pull/2814))
+- `Flyout` and `Modal` with `open="false"` and nested `Accordion` with `open="true"` containing focusable elements like
+  links can't be focused anymore ([#2818](https://github.com/porsche-design-system/porsche-design-system/pull/2818))
+- Background for open `Flyout` and `Modal` on iOS Mobile Safari with collapsed address bar is no longer scrollable
+  ([#2822](https://github.com/porsche-design-system/porsche-design-system/pull/2822))
+- `Tabs Bar` works with translated page content
+  ([#2847](https://github.com/porsche-design-system/porsche-design-system/pull/2847))
+
+### [3.7.0] - 2023-10-04
+
+### [3.7.0-rc.2] - 2023-10-04
+
+#### Added
+
+- Styles: `gridStyles` and `pds-grid()` support basic usage inside `Flyout` component
   ([#2756](https://github.com/porsche-design-system/porsche-design-system/pull/2756))
 
 #### Fixed
@@ -346,7 +454,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Wordmark`, `Crest` and `Model Signature` respect parent width/height
   ([#2479](https://github.com/porsche-design-system/porsche-design-system/pull/2479))
 - `Button Tile`, `Link Tile` and `Link Tile Model Signature` are using correct border radius of
-  `pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
+  `$pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
 - `Text Field Wrapper` with `input type="search"` has better accessibility for clear button
   ([#2476](https://github.com/porsche-design-system/porsche-design-system/pull/2476))
 - `Accordion` layout shift with nested accordions
@@ -358,7 +466,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
-- Styles: `borderRadiusLarge` and `pds-border-radius-large` are exposing correct value
+- Styles: `borderRadiusLarge` and `$pds-border-radius-large` are exposing correct value
   ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2463))
 
 ### [3.0.0-alpha.6] - 2023-04-06
@@ -511,8 +619,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Styles: ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
   - `gridWide`
-  - `gridWideColumnStart` and `pds-grid-wide-column-start`
-  - `gridWideColumnEnd` and `pds-grid-wide-column-end`
+  - `gridWideColumnStart` and `$pds-grid-wide-column-start`
+  - `gridWideColumnEnd` and `$pds-grid-wide-column-end`
   - `gridNarrowOffset`, `gridNarrowOffsetBase`, `gridNarrowOffsetS`, `gridNarrowOffsetXXL` and
     `$pds-grid-narrow-offset-base`, `$pds-grid-narrow-offset-s`, `$pds-grid-narrow-offset-xxl`
   - `gridBasicOffset`, `gridBasicOffsetBase`, `gridBasicOffsetS`, `gridBasicOffsetXXL` and
@@ -538,7 +646,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Changed
 
-- Styles: `gridStyles` and `pds-grid` are supporting an additional column range called `wide`
+- Styles: `gridStyles` and `pds-grid()` are supporting an additional column range called `wide`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - Styles: SCSS version needs to be imported by `@porsche-design-system/components-js/styles` instead of
   `@porsche-design-system/components-js/styles/scss`
@@ -548,9 +656,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Banner`: CSS variable `--p-banner-position-type`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
-  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `$pds-grid-safe-zone-base`,
+  `$pds-grid-safe-zone-xxl` ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
+- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `$pds-grid-width-min`, `$pds-grid-width-max`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
@@ -820,11 +928,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Display` supports value `small` for prop `size`
 - Partials: `getInitialStyles` supports multi prefix, e.g.
   `getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });`
-- Styles: `displaySmallStyle` and `pds-display-small`
-- Styles: `textXXSmallStyle` and `pds-text-xx-small`
+- Styles: `displaySmallStyle` and `$pds-display-small`
+- Styles: `textXXSmallStyle` and `$pds-text-xx-small`
 - Styles: `fontSizeDisplaySmall` and `$pds-font-size-display-small`
 - Styles: `fontSizeTextXXSmall` and `$pds-font-size-text-xx-small`
-- Styles: `getHoverStyle` and `pds-hover`
+- Styles: `getHoverStyle` and `pds-hover()`
 - `Banner` has `heading` and `description` prop as well as `slot="heading"` and deprecated `slot="title"`
 - Custom events have consistent names across components and deprecated old event names
   - `Accordion` emits `change` and deprecated `accordionChange` event
@@ -861,7 +969,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Display` uses font-weight regular and font-style normal
 - Partials: `getInitialStyles` matches new design language
 - Partials: All component related, slotted Light DOM styles have been moved to `getInitialStyles`
-- Styles: `getFocusStyle` and `pds-focus` doesn't need `theme` parameter anymore
+- Styles: `getFocusStyle` and `pds-focus()` doesn't need `theme` parameter anymore
 - Styles: `breakpoint{Base|XS|S|M|L|XL|XXL}` and `$pds-breakpoint-{base|xs|s|m|l|xl|xxl}` are provided as number without
   unit (px)
 - `Link Tile` matches new design language
@@ -880,7 +988,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Removed
 
 - `Heading`: value `xxx-large` for prop `size`
-- Styles: `headingXXXLargeStyle` and `pds-heading-xxx-large`
+- Styles: `headingXXXLargeStyle` and `$pds-heading-xxx-large`
 - Styles: `fontSizeHeadingXXLarge` and `$pds-font-size-heading-xx-large`
 
 ### [3.0.0-alpha.2] - 2023-02-27
@@ -942,8 +1050,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Stepper Horizontal` matches new design language
 - Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package
   `@porsche-design-system/components-{js|angular|react|vue}/styles`
-- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid` (SCSS)
-- Styles: `gridStyle` (JS) and `pds-grid` (SCSS) uses optimized grid gap
+- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid()` (SCSS)
+- Styles: `gridStyle` (JS) and `pds-grid()` (SCSS) uses optimized grid gap
 
 ### [3.0.0-alpha.0] - 2023-02-08
 

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

@@ -1 +1 @@
-"use strict";const e=require("vue"),a=require("../../utils.cjs"),s=e.defineComponent({__name:"ButtonPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"right"},aria:{},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},icon:{default:"arrow-right"},iconSource:{},loading:{type:Boolean,default:!1},size:{default:"small"},stretch:{default:!1},theme:{default:"light"},type:{default:"submit"},weight:{default:"regular"}},setup(n){const o=n,l=a.getPrefixedTagName("p-button-pure"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,o)}),e.onUpdated(()=>{a.syncProperties(t.value,o)}),(r,u)=>(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=s;
+"use strict";const e=require("vue"),a=require("../../utils.cjs"),s=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},size:{default:"small"},stretch:{default:!1},theme:{default:"light"},type:{default:"submit"},weight:{default:"regular"}},setup(n){const o=n,l=a.getPrefixedTagName("p-button-pure"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,o)}),e.onUpdated(()=>{a.syncProperties(t.value,o)}),(r,u)=>(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=s;

package/cjs/lib/components/CarouselWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"CarouselWrapper",props:{activeSlideIndex:{default:0},alignHeader:{default:"left"},description:{},disablePagination:{},heading:{},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{default:"light"},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(r,{emit:a}){const o=r,s=n.getPrefixedTagName("p-carousel"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o),n.addEventListenerToElementRef(t.value,"carouselChange",a),n.addEventListenerToElementRef(t.value,"update",a)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{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:"CarouselWrapper",props:{activeSlideIndex:{default:0},alignHeader:{default:"start"},description:{},disablePagination:{},heading:{},intl:{},pagination:{default:!0},rewind:{type:Boolean,default:!0},skipLinkTarget:{},slidesPerPage:{default:1},theme:{default:"light"},width:{default:"basic"},wrapContent:{type:Boolean}},emits:["carouselChange","update"],setup(r,{emit:a}){const o=r,s=n.getPrefixedTagName("p-carousel"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o),n.addEventListenerToElementRef(t.value,"carouselChange",a),n.addEventListenerToElementRef(t.value,"update",a)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(l,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=d;

package/cjs/lib/components/DisplayWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"DisplayWrapper",props:{align:{default:"left"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"large"},tag:{},theme:{default:"light"}},setup(r){const n=r,s=o.getPrefixedTagName("p-display"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,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:"DisplayWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"large"},tag:{},theme:{default:"light"}},setup(r){const n=r,s=o.getPrefixedTagName("p-display"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,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/FlyoutWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),i=e.defineComponent({__name:"FlyoutWrapper",props:{aria:{},open:{type:Boolean,default:!1},position:{default:"right"},theme:{default:"light"}},emits:["dismiss"],setup(s,{emit:r}){const n=s,a=o.getPrefixedTagName("p-flyout"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n),o.addEventListenerToElementRef(t.value,"dismiss",r)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(p,l)=>(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=i;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),i=e.defineComponent({__name:"FlyoutWrapper",props:{aria:{},open:{type:Boolean,default:!1},position:{default:"end"},theme:{default:"light"}},emits:["dismiss"],setup(s,{emit:r}){const n=s,a=o.getPrefixedTagName("p-flyout"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n),o.addEventListenerToElementRef(t.value,"dismiss",r)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(p,l)=>(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=i;

package/cjs/lib/components/HeadingWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadingWrapper",props:{align:{default:"left"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"xx-large"},tag:{},theme:{default:"light"}},setup(r){const o=r,a=n.getPrefixedTagName("p-heading"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=l;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadingWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"xx-large"},tag:{},theme:{default:"light"}},setup(r){const o=r,a=n.getPrefixedTagName("p-heading"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/HeadlineWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),s=e.defineComponent({__name:"HeadlineWrapper",props:{align:{default:"left"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},tag:{},theme:{default:"light"},variant:{default:"headline-1"}},setup(r){const o=r,a=n.getPrefixedTagName("p-headline"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o)}),e.onUpdated(()=>{n.syncProperties(t.value,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=s;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),l=e.defineComponent({__name:"HeadlineWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},tag:{},theme:{default:"light"},variant:{default:"headline-1"}},setup(r){const o=r,a=n.getPrefixedTagName("p-headline"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=l;

package/cjs/lib/components/LinkPureWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),r=require("../../utils.cjs"),s=e.defineComponent({__name:"LinkPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"right"},aria:{},download:{},hideLabel:{default:!1},href:{},icon:{default:"arrow-right"},iconSource:{},rel:{},size:{default:"small"},stretch:{default:!1},target:{default:"_self"},theme:{default:"light"},underline:{type:Boolean,default:!1},weight:{default:"regular"}},setup(n){const a=n,o=r.getPrefixedTagName("p-link-pure"),t=e.ref();return e.onMounted(()=>{r.syncProperties(t.value,a)}),e.onUpdated(()=>{r.syncProperties(t.value,a)}),(l,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=s;
+"use strict";const e=require("vue"),a=require("../../utils.cjs"),s=e.defineComponent({__name:"LinkPureWrapper",props:{active:{type:Boolean,default:!1},alignLabel:{default:"end"},aria:{},download:{},hideLabel:{default:!1},href:{},icon:{default:"arrow-right"},iconSource:{},rel:{},size:{default:"small"},stretch:{default:!1},target:{default:"_self"},theme:{default:"light"},underline:{type:Boolean,default:!1},weight:{default:"regular"}},setup(r){const n=r,o=a.getPrefixedTagName("p-link-pure"),t=e.ref();return e.onMounted(()=>{a.syncProperties(t.value,n)}),e.onUpdated(()=>{a.syncProperties(t.value,n)}),(l,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},512))}});module.exports=s;

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

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

package/cjs/lib/components/SwitchWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"SwitchWrapper",props:{alignLabel:{default:"right"},checked:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},loading:{type:Boolean,default:!1},stretch:{default:!1},theme:{default:"light"}},emits:["switchChange","update"],setup(s,{emit:a}){const o=s,l=n.getPrefixedTagName("p-switch"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o),n.addEventListenerToElementRef(t.value,"switchChange",a),n.addEventListenerToElementRef(t.value,"update",a)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(r,f)=>(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=d;
+"use strict";const e=require("vue"),n=require("../../utils.cjs"),d=e.defineComponent({__name:"SwitchWrapper",props:{alignLabel:{default:"end"},checked:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideLabel:{default:!1},loading:{type:Boolean,default:!1},stretch:{default:!1},theme:{default:"light"}},emits:["switchChange","update"],setup(s,{emit:a}){const o=s,l=n.getPrefixedTagName("p-switch"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o),n.addEventListenerToElementRef(t.value,"switchChange",a),n.addEventListenerToElementRef(t.value,"update",a)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(r,f)=>(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=d;

package/cjs/lib/components/TextWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),s=e.defineComponent({__name:"TextWrapper",props:{align:{default:"left"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"small"},tag:{default:"p"},theme:{default:"light"},weight:{default:"regular"}},setup(r){const n=r,a=o.getPrefixedTagName("p-text"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,n)}),e.onUpdated(()=>{o.syncProperties(t.value,n)}),(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=s;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),l=e.defineComponent({__name:"TextWrapper",props:{align:{default:"start"},color:{default:"primary"},ellipsis:{type:Boolean,default:!1},size:{default:"small"},tag:{default:"p"},theme:{default:"light"},weight:{default:"regular"}},setup(n){const r=n,a=o.getPrefixedTagName("p-text"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,r)}),e.onUpdated(()=>{o.syncProperties(t.value,r)}),(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=l;

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

@@ -31,7 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"extended" | "basic" | "fluid">;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (value?: void | undefined) => void;
+    [x: string]: (...args: unknown[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: import("vue").PropType<string>;
@@ -64,9 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     width: {
         type: import("vue").PropType<"extended" | "basic" | "fluid">;
     };
-}>> & {
-    onDismiss?: ((value?: void | undefined) => any) | undefined;
-}, {
+}>>, {
     heading: string;
     open: boolean;
     theme: "light" | "dark" | "auto";

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

@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     aria: {
@@ -76,7 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     aria: {
@@ -108,7 +108,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
     theme: "light" | "dark" | "auto";
     active: boolean;
-    alignLabel: BreakpointCustomizable<"left" | "right">;
+    alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: import("../types").LinkButtonIconName;

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

@@ -4,7 +4,7 @@ const B = /* @__PURE__ */ r({
   __name: "ButtonPureWrapper",
   props: {
     active: { type: Boolean, default: !1 },
-    alignLabel: { default: "right" },
+    alignLabel: { default: "end" },
     aria: {},
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },

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

@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: number;
     };
     alignHeader: {
-        type: import("vue").PropType<"center" | "left">;
+        type: import("vue").PropType<"center" | "start" | "left">;
         default: string;
     };
     disablePagination: {
@@ -69,7 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: number;
     };
     alignHeader: {
-        type: import("vue").PropType<"center" | "left">;
+        type: import("vue").PropType<"center" | "start" | "left">;
         default: string;
     };
     disablePagination: {
@@ -103,7 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     theme: "light" | "dark" | "auto";
     width: "extended" | "basic";
     activeSlideIndex: number;
-    alignHeader: "center" | "left";
+    alignHeader: "center" | "start" | "left";
     pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
     slidesPerPage: BreakpointCustomizable<number>;

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

@@ -1,10 +1,10 @@
-import { defineComponent as p, ref as i, onMounted as s, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as C, renderSlot as h } from "vue";
+import { defineComponent as p, ref as s, onMounted as i, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as C, renderSlot as h } from "vue";
 import { getPrefixedTagName as v, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.mjs";
 const y = /* @__PURE__ */ p({
   __name: "CarouselWrapper",
   props: {
     activeSlideIndex: { default: 0 },
-    alignHeader: { default: "left" },
+    alignHeader: { default: "start" },
     description: {},
     disablePagination: {},
     heading: {},
@@ -19,8 +19,8 @@ const y = /* @__PURE__ */ p({
   },
   emits: ["carouselChange", "update"],
   setup(r, { emit: t }) {
-    const a = r, l = v("p-carousel"), e = i();
-    return s(() => {
+    const a = r, l = v("p-carousel"), e = s();
+    return i(() => {
       n(e.value, a), o(e.value, "carouselChange", t), o(e.value, "update", t);
     }), u(() => {
       n(e.value, a);

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

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -36,7 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>>, {
     size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large">;
     theme: "light" | "dark" | "auto";
-    align: "center" | "left" | "right";
+    align: "center" | "start" | "end" | "left" | "right";
     color: "inherit" | "primary";
     ellipsis: boolean;
 }, {}>, {

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

@@ -1,9 +1,9 @@
-import { defineComponent as l, ref as p, onMounted as s, onUpdated as f, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as g } from "vue";
+import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as g } from "vue";
 import { getPrefixedTagName as y, syncProperties as o } from "../../utils.mjs";
-const k = /* @__PURE__ */ l({
+const k = /* @__PURE__ */ p({
   __name: "DisplayWrapper",
   props: {
-    align: { default: "left" },
+    align: { default: "start" },
     color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     size: { default: "large" },
@@ -11,7 +11,7 @@ const k = /* @__PURE__ */ l({
     theme: { default: "light" }
   },
   setup(a) {
-    const t = a, n = y("p-display"), e = p();
+    const t = a, n = y("p-display"), e = l();
     return s(() => {
       o(e.value, t);
     }), f(() => {

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

@@ -13,11 +13,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
     };
     position: {
-        type: import("vue").PropType<"left" | "right">;
+        type: import("vue").PropType<"start" | "end" | "left" | "right">;
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (value?: void | undefined) => void;
+    [x: string]: (...args: unknown[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     open: {
         type: import("vue").PropType<boolean>;
@@ -32,15 +32,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<SelectedAriaAttributes<"aria-label">>;
     };
     position: {
-        type: import("vue").PropType<"left" | "right">;
+        type: import("vue").PropType<"start" | "end" | "left" | "right">;
         default: string;
     };
-}>> & {
-    onDismiss?: ((value?: void | undefined) => any) | undefined;
-}, {
+}>>, {
     open: boolean;
     theme: "light" | "dark" | "auto";
-    position: "left" | "right";
+    position: "start" | "end" | "left" | "right";
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -1,21 +1,21 @@
-import { defineComponent as p, ref as f, onMounted as l, onUpdated as i, openBlock as d, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as y } from "vue";
-import { getPrefixedTagName as C, syncProperties as o, addEventListenerToElementRef as g } from "../../utils.mjs";
+import { defineComponent as p, ref as f, onMounted as l, onUpdated as d, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as y } from "vue";
+import { getPrefixedTagName as C, syncProperties as o, addEventListenerToElementRef as v } from "../../utils.mjs";
 const x = /* @__PURE__ */ p({
   __name: "FlyoutWrapper",
   props: {
     aria: {},
     open: { type: Boolean, default: !1 },
-    position: { default: "right" },
+    position: { default: "end" },
     theme: { default: "light" }
   },
   emits: ["dismiss"],
   setup(n, { emit: r }) {
     const t = n, s = C("p-flyout"), e = f();
     return l(() => {
-      o(e.value, t), g(e.value, "dismiss", r);
-    }), i(() => {
+      o(e.value, t), v(e.value, "dismiss", r);
+    }), d(() => {
       o(e.value, t);
-    }), (a, h) => (d(), m(u(c(s)), {
+    }), (a, g) => (i(), m(u(c(s)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -36,7 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>>, {
     size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large">;
     theme: "light" | "dark" | "auto";
-    align: "center" | "left" | "right";
+    align: "center" | "start" | "end" | "left" | "right";
     color: "inherit" | "primary";
     ellipsis: boolean;
 }, {}>, {

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

@@ -1,9 +1,9 @@
-import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as g } from "vue";
+import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as g } from "vue";
 import { getPrefixedTagName as _, syncProperties as o } from "../../utils.mjs";
-const y = /* @__PURE__ */ l({
+const y = /* @__PURE__ */ p({
   __name: "HeadingWrapper",
   props: {
-    align: { default: "left" },
+    align: { default: "start" },
     color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     size: { default: "xx-large" },
@@ -11,10 +11,10 @@ const y = /* @__PURE__ */ l({
     theme: { default: "light" }
   },
   setup(n) {
-    const t = n, a = _("p-heading"), e = p();
-    return f(() => {
+    const t = n, a = _("p-heading"), e = l();
+    return s(() => {
       o(e.value, t);
-    }), s(() => {
+    }), f(() => {
       o(e.value, t);
     }), (r, C) => (d(), i(m(u(a)), {
       ref_key: "pdsComponentRef",

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

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     variant: {
@@ -33,7 +33,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     variant: {
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     theme: "light" | "dark" | "auto";
-    align: "center" | "left" | "right";
+    align: "center" | "start" | "end" | "left" | "right";
     variant: HeadlineVariant;
     color: "default" | "inherit" | "primary";
     ellipsis: boolean;

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

@@ -1,9 +1,9 @@
-import { defineComponent as l, ref as p, onMounted as f, onUpdated as d, openBlock as s, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as _ } from "vue";
+import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as _ } from "vue";
 import { getPrefixedTagName as g, syncProperties as o } from "../../utils.mjs";
 const v = /* @__PURE__ */ l({
   __name: "HeadlineWrapper",
   props: {
-    align: { default: "left" },
+    align: { default: "start" },
     color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     tag: {},
@@ -14,9 +14,9 @@ const v = /* @__PURE__ */ l({
     const t = n, a = g("p-headline"), e = p();
     return f(() => {
       o(e.value, t);
-    }), d(() => {
+    }), s(() => {
       o(e.value, t);
-    }), (r, h) => (s(), i(m(u(a)), {
+    }), (r, h) => (d(), i(m(u(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -34,8 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (value?: void | undefined) => void;
-    dismiss: (value?: void | undefined) => void;
+    [x: string]: (...args: unknown[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: import("vue").PropType<string>;
@@ -71,10 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-}>> & {
-    onDismiss?: ((value?: void | undefined) => any) | undefined;
-    onAction?: ((value?: void | undefined) => any) | undefined;
-}, {
+}>>, {
     heading: string;
     theme: "light" | "dark" | "auto";
     description: string;

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

@@ -24,7 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     aria: {
@@ -80,7 +80,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     aria: {
@@ -117,7 +117,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
     theme: "light" | "dark" | "auto";
     active: boolean;
-    alignLabel: BreakpointCustomizable<"left" | "right">;
+    alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
     hideLabel: BreakpointCustomizable<boolean>;
     icon: import("../types").LinkButtonIconName;
     target: string;

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

@@ -1,10 +1,10 @@
-import { defineComponent as n, ref as f, onMounted as d, onUpdated as u, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
+import { defineComponent as r, ref as f, onMounted as d, onUpdated as u, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
 import { getPrefixedTagName as h, syncProperties as a } from "../../utils.mjs";
-const w = /* @__PURE__ */ n({
+const w = /* @__PURE__ */ r({
   __name: "LinkPureWrapper",
   props: {
     active: { type: Boolean, default: !1 },
-    alignLabel: { default: "right" },
+    alignLabel: { default: "end" },
     aria: {},
     download: {},
     hideLabel: { default: !1 },
@@ -20,17 +20,17 @@ const w = /* @__PURE__ */ n({
     weight: { default: "regular" }
   },
   setup(o) {
-    const t = o, r = h("p-link-pure"), e = f();
+    const t = o, l = h("p-link-pure"), e = f();
     return d(() => {
       a(e.value, t);
     }), u(() => {
       a(e.value, t);
-    }), (l, _) => (p(), s(i(c(r)), {
+    }), (n, _) => (p(), s(i(c(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: m(() => [
-        g(l.$slots, "default")
+        g(n.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -8,6 +8,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
         default: boolean;
     };
+    theme: {
+        type: import("vue").PropType<"light" | "dark" | "auto">;
+        default: string;
+    };
     dismissButton: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -27,8 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (value?: void | undefined) => void;
-    dismiss: (value?: void | undefined) => void;
+    [x: string]: (...args: unknown[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: import("vue").PropType<string>;
@@ -38,6 +41,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
         default: boolean;
     };
+    theme: {
+        type: import("vue").PropType<"light" | "dark" | "auto">;
+        default: string;
+    };
     dismissButton: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -56,11 +63,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<BreakpointCustomizable<boolean>>;
         default: boolean;
     };
-}>> & {
-    onDismiss?: ((value?: void | undefined) => any) | undefined;
-    onClose?: ((value?: void | undefined) => any) | undefined;
-}, {
+}>>, {
     open: boolean;
+    theme: "light" | "dark" | "auto";
     dismissButton: boolean;
     disableBackdropClick: boolean;
     fullscreen: BreakpointCustomizable<boolean>;

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

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as d, onMounted as f, onUpdated as i, openBlock as u, createBlock as m, resolveDynamicComponent as c, unref as B, withCtx as C, renderSlot as y } from "vue";
-import { getPrefixedTagName as _, syncProperties as n, addEventListenerToElementRef as a } from "../../utils.mjs";
-const b = /* @__PURE__ */ p({
+import { defineComponent as d, ref as p, onMounted as f, onUpdated as i, openBlock as u, createBlock as m, resolveDynamicComponent as c, unref as B, withCtx as C, renderSlot as y } from "vue";
+import { getPrefixedTagName as _, syncProperties as a, addEventListenerToElementRef as n } from "../../utils.mjs";
+const k = /* @__PURE__ */ d({
   __name: "ModalWrapper",
   props: {
     aria: {},
@@ -9,16 +9,17 @@ const b = /* @__PURE__ */ p({
     dismissButton: { type: Boolean, default: !0 },
     fullscreen: { default: !1 },
     heading: {},
-    open: { type: Boolean, default: !1 }
+    open: { type: Boolean, default: !1 },
+    theme: { default: "light" }
   },
   emits: ["close", "dismiss"],
-  setup(s, { emit: o }) {
-    const t = s, l = _("p-modal"), e = d();
+  setup(l, { emit: o }) {
+    const t = l, s = _("p-modal"), e = p();
     return f(() => {
-      n(e.value, t), a(e.value, "close", o), a(e.value, "dismiss", o);
+      a(e.value, t), n(e.value, "close", o), n(e.value, "dismiss", o);
     }), i(() => {
-      n(e.value, t);
-    }), (r, v) => (u(), m(c(B(l)), {
+      a(e.value, t);
+    }), (r, v) => (u(), m(c(B(s)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -30,5 +31,5 @@ const b = /* @__PURE__ */ p({
   }
 });
 export {
-  b as default
+  k as default
 };

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

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     disabled: {
@@ -41,7 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     alignLabel: {
-        type: import("vue").PropType<BreakpointCustomizable<"left" | "right">>;
+        type: import("vue").PropType<BreakpointCustomizable<"start" | "end" | "left" | "right">>;
         default: string;
     };
     disabled: {
@@ -66,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     stretch: BreakpointCustomizable<boolean>;
     theme: "light" | "dark" | "auto";
-    alignLabel: BreakpointCustomizable<"left" | "right">;
+    alignLabel: BreakpointCustomizable<"start" | "end" | "left" | "right">;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;

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

@@ -1,9 +1,9 @@
-import { defineComponent as f, ref as r, onMounted as p, onUpdated as u, openBlock as c, createBlock as i, resolveDynamicComponent as m, unref as h, withCtx as g, renderSlot as C } from "vue";
+import { defineComponent as f, ref as p, onMounted as r, onUpdated as u, openBlock as c, createBlock as i, resolveDynamicComponent as m, unref as h, withCtx as g, renderSlot as C } from "vue";
 import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as n } from "../../utils.mjs";
 const B = /* @__PURE__ */ f({
   __name: "SwitchWrapper",
   props: {
-    alignLabel: { default: "right" },
+    alignLabel: { default: "end" },
     checked: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
@@ -13,17 +13,17 @@ const B = /* @__PURE__ */ f({
   },
   emits: ["switchChange", "update"],
   setup(l, { emit: t }) {
-    const a = l, s = _("p-switch"), e = r();
-    return p(() => {
+    const a = l, d = _("p-switch"), e = p();
+    return r(() => {
       o(e.value, a), n(e.value, "switchChange", t), n(e.value, "update", t);
     }), u(() => {
       o(e.value, a);
-    }), (d, v) => (c(), i(m(h(s)), {
+    }), (s, v) => (c(), i(m(h(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: g(() => [
-        C(d.$slots, "default")
+        C(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -51,7 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (value?: void | undefined) => void;
+    [x: string]: (...args: unknown[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -103,9 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<"prefix" | "suffix">;
         default: string;
     };
-}>> & {
-    onAction?: ((value?: void | undefined) => any) | undefined;
-}, {
+}>>, {
     label: string;
     theme: "light" | "dark" | "auto";
     description: string;

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

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     align: {
-        type: import("vue").PropType<"center" | "left" | "right">;
+        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
         default: string;
     };
     color: {
@@ -62,7 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
     tag: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend";
     theme: "light" | "dark" | "auto";
-    align: "center" | "left" | "right";
+    align: "center" | "start" | "end" | "left" | "right";
     color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral";
     ellipsis: boolean;
 }, {}>, {

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

@@ -3,7 +3,7 @@ import { getPrefixedTagName as _, syncProperties as o } from "../../utils.mjs";
 const y = /* @__PURE__ */ l({
   __name: "TextWrapper",
   props: {
-    align: { default: "left" },
+    align: { default: "start" },
     color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     size: { default: "small" },
@@ -12,17 +12,17 @@ const y = /* @__PURE__ */ l({
     weight: { default: "regular" }
   },
   setup(a) {
-    const t = a, n = _("p-text"), e = p();
+    const t = a, r = _("p-text"), e = p();
     return f(() => {
       o(e.value, t);
     }), s(() => {
       o(e.value, t);
-    }), (r, C) => (d(), u(m(i(n)), {
+    }), (n, C) => (d(), u(m(i(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: c(() => [
-        g(r.$slots, "default")
+        g(n.$slots, "default")
       ]),
       _: 3
     }, 512));

package/esm/lib/types.d.ts

@@ -508,11 +508,21 @@ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "auto"
 ];
 export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
+declare const TYPOGRAPHY_ALIGNS: readonly [
+    "start",
+    "center",
+    "end",
+    "left",
+    "right"
+];
+export type TypographyAlign = (typeof TYPOGRAPHY_ALIGNS)[number];
 declare const ALIGN_LABELS: readonly [
+    "start",
+    "end",
     "left",
     "right"
 ];
-export type AlignLabel = typeof ALIGN_LABELS[number];
+export type AlignLabel = (typeof ALIGN_LABELS)[number];
 declare const BUTTON_TYPES: readonly [
     "button",
     "submit",
@@ -534,12 +544,6 @@ declare const LINK_BUTTON_VARIANTS: readonly [
     "tertiary"
 ];
 export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
-declare const TEXT_ALIGNS: readonly [
-    "left",
-    "center",
-    "right"
-];
-export type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
     "primary",
     "contrast-low",
@@ -557,7 +561,7 @@ declare const TEXT_COLORS: readonly [
     "neutral-contrast-high",
     "notification-neutral"
 ];
-export type TextColor = typeof TEXT_COLORS[number];
+export type TextColor = (typeof TEXT_COLORS)[number];
 declare const TEXT_SIZES: readonly [
     "xx-small",
     "x-small",
@@ -567,7 +571,7 @@ declare const TEXT_SIZES: readonly [
     "x-large",
     "inherit"
 ];
-export type TextSize = typeof TEXT_SIZES[number];
+export type TextSize = (typeof TEXT_SIZES)[number];
 declare const TEXT_WEIGHTS: readonly [
     "regular",
     "semi-bold",
@@ -575,7 +579,7 @@ declare const TEXT_WEIGHTS: readonly [
     "thin",
     "semibold"
 ];
-export type TextWeight = typeof TEXT_WEIGHTS[number];
+export type TextWeight = (typeof TEXT_WEIGHTS)[number];
 declare const LINK_TARGETS: readonly [
     "_self",
     "_blank",
@@ -637,8 +641,9 @@ declare const CAROUSEL_WIDTHS: readonly [
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
-    "left",
-    "center"
+    "start",
+    "center",
+    "left"
 ];
 export type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | string;
@@ -683,7 +688,7 @@ declare const DISPLAY_COLORS: readonly [
     "inherit"
 ];
 export type DisplayColor = (typeof DISPLAY_COLORS)[number];
-export type DisplayAlign = TextAlign;
+export type DisplayAlign = TypographyAlign;
 declare const DIVIDER_COLORS: readonly [
     "contrast-low",
     "contrast-medium",
@@ -794,6 +799,8 @@ declare const FLEX_ITEM_FLEXS: readonly [
 ];
 export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
 declare const FLYOUT_POSITIONS: readonly [
+    "start",
+    "end",
     "left",
     "right"
 ];
@@ -864,7 +871,7 @@ declare const HEADING_COLORS: readonly [
     "inherit"
 ];
 export type HeadingColor = (typeof HEADING_COLORS)[number];
-export type HeadingAlign = TextAlign;
+export type HeadingAlign = TypographyAlign;
 declare const HEADLINE_VARIANTS: readonly [
     "large-title",
     "headline-1",
@@ -891,7 +898,7 @@ declare const HEADLINE_COLORS: readonly [
     "inherit"
 ];
 export type HeadlineColor = (typeof HEADLINE_COLORS)[number];
-export type HeadlineAlign = TextAlign;
+export type HeadlineAlign = TypographyAlign;
 declare const ICON_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -970,6 +977,18 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
 export type LinkTileModelSignatureWeight = TileWeight;
 export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
 export type LinkTileModelSignatureLinkDirection = GroupDirection;
+declare const MODEL_SIGNATURES_MANIFEST: {
+    "718": string;
+    "911": string;
+    boxster: string;
+    cayenne: string;
+    cayman: string;
+    macan: string;
+    panamera: string;
+    taycan: string;
+    "turbo-s": string;
+    turbo: string;
+};
 declare const MARQUE_VARIANTS: readonly [
     "75-years",
     "default"
@@ -987,18 +1006,6 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
-declare const MODEL_SIGNATURES_MANIFEST: {
-    "718": string;
-    "911": string;
-    boxster: string;
-    cayenne: string;
-    cayman: string;
-    macan: string;
-    panamera: string;
-    taycan: string;
-    "turbo-s": string;
-    turbo: string;
-};
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"
@@ -1171,7 +1178,8 @@ declare const TEXT_TAGS: readonly [
     "time",
     "legend"
 ];
-export type TextTag = typeof TEXT_TAGS[number];
+export type TextTag = (typeof TEXT_TAGS)[number];
+export type TextAlign = TypographyAlign;
 declare const UNIT_POSITIONS: readonly [
     "prefix",
     "suffix"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.7.0-rc.2",
+  "version": "3.8.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.7.0-rc.2"
+    "@porsche-design-system/components-js": "3.8.0-rc.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"