@porsche-design-system/components-vue 3.1.0 → 3.2.0-rc.0

package/CHANGELOG.md

@@ -2,26 +2,57 @@
 
 ## Porsche Design System
 
-
 All notable changes to this project will be documented in this file and published as following npm packages:
 
-* `@porsche-design-system/components-js`
-* `@porsche-design-system/components-angular`
-* `@porsche-design-system/components-react`
-* `@porsche-design-system/components-vue`
+- `@porsche-design-system/components-js`
+- `@porsche-design-system/components-angular`
+- `@porsche-design-system/components-react`
+- `@porsche-design-system/components-vue`
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### [Unreleased]
 
+### [3.2.0-rc.0] - 2023-06-19
+
+#### Added
+
+- `skipLinkTarget` property to `Carousel` component to enhance keyboard functionality
+  ([#2557](https://github.com/porsche-design-system/porsche-design-system/pull/2557))
+- `showLastPage` property to `Pagination` component
+  ([#2606](https://github.com/porsche-design-system/porsche-design-system/pull/2606))
+
+#### Fixed
+
+- Partials: `getInitialStyles` supports `Flyout` component
+  ([#2598](https://github.com/porsche-design-system/porsche-design-system/pull/2598))
+- `Popover` content can be selected/highlighted
+  ([#2599](https://github.com/porsche-design-system/porsche-design-system/pull/2599))
+
+#### Changed
+
+- `Carousel` pagination now shows 5 "infinite bullets" when using more than 5 slides
+  ([#2600](https://github.com/porsche-design-system/porsche-design-system/pull/2600))
+- `Carousel` supports click events on non-active slides and changed keyboard navigation
+  ([#2557](https://github.com/porsche-design-system/porsche-design-system/pull/2557))
+- Unified wordings of all console warnings, errors and exceptions
+  ([#2602](https://github.com/porsche-design-system/porsche-design-system/pull/2602))
+- Angular: increased peer dependency to `>=15.0.0 <17.0.0`
+  ([#2602](https://github.com/porsche-design-system/porsche-design-system/pull/2602))
+- `Toast` allows line break markups within toast message
+  ([#2584](https://github.com/porsche-design-system/porsche-design-system/pull/2584))
+- `Toast` shows always the latest toast message and clears its queue immediately if a new message is added
+  ([#2584](https://github.com/porsche-design-system/porsche-design-system/pull/2584))
+
 ### [3.1.0] - 2023-06-09
 
 ### [3.1.0-rc.2] - 2023-06-09
 
 #### Changed
 
-- `Crest` replaced final assets and meta icons
+- `Crest` updated assets ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
+- Partials: `getMetaTagsAndIconLinks` updated assets
   ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
 
 #### Added
@@ -1650,7 +1681,7 @@ accessible regarding its color contrast and might even be removed in an upcoming
 
 #### Changed
 
-- Angular: Increased peer dependency to `>=12.0.0 <14.0.0`
+- Angular: increased peer dependency to `>=12.0.0 <14.0.0`
 
 ### [2.7.0] - 2021-12-14
 
@@ -1944,7 +1975,7 @@ color contrast and might even be removed in an upcoming major release again.
 
 #### Fixed
 
-- Angular: Events firing twice in `Pagination`, `Modal`, `Tabs`, `Tabs Bar` and `Banner` component
+- Angular: events firing twice in `Pagination`, `Modal`, `Tabs`, `Tabs Bar` and `Banner` component
 
 ### [2.0.2] - 2021-04-21
 
@@ -1961,7 +1992,7 @@ color contrast and might even be removed in an upcoming major release again.
 - Visual appearance of `Checkbox Wrapper` in iOS Safari
 - A bug where `Text Field Wrapper` would throw an error when reattaching to DOM too quickly
 - Visual bug in Firefox when zooming out `Text Field Wrapper`, `Checkbox Wrapper` and `Textarea Wrapper`
-- Angular: Streamline component styles in dark theme
+- Angular: streamline component styles in dark theme
 
 #### Changed
 

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

@@ -81,7 +81,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
     stretch: BreakpointCustomizable<boolean>;
-    type: "reset" | "button" | "submit";
+    type: "button" | "reset" | "submit";
     size: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large">;
     theme: "light" | "dark";
     active: boolean;

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

@@ -81,7 +81,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     weight: string;
 }>>>, {
     weight: BreakpointCustomizable<"regular" | "semi-bold">;
-    type: "reset" | "button" | "submit";
+    type: "button" | "reset" | "submit";
     compact: BreakpointCustomizable<boolean>;
     size: BreakpointCustomizable<"default" | "inherit">;
     disabled: boolean;

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

@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>>>, {
-    type: "reset" | "button" | "submit";
+    type: "button" | "reset" | "submit";
     theme: "light" | "dark";
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;

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

@@ -32,6 +32,10 @@ type PCarouselProps = {
      * Whether the slides should rewind from last to first slide and vice versa.
      */
     rewind?: boolean;
+    /**
+     * Defines target of skip link (to skip carousel entries).
+     */
+    skipLinkTarget?: string;
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */

package/lib/components/CarouselWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as s, onMounted as u, onUpdated as i, 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 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 { getPrefixedTagName as v, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
-const P = /* @__PURE__ */ p({
+const y = /* @__PURE__ */ p({
   __name: "CarouselWrapper",
   props: {
     activeSlideIndex: { default: 0 },
@@ -11,6 +11,7 @@ const P = /* @__PURE__ */ p({
     intl: {},
     pagination: { default: !0 },
     rewind: { type: Boolean, default: !0 },
+    skipLinkTarget: {},
     slidesPerPage: { default: 1 },
     theme: { default: "light" },
     width: { default: "basic" },
@@ -18,10 +19,10 @@ const P = /* @__PURE__ */ p({
   },
   emits: ["carouselChange", "update"],
   setup(r, { emit: t }) {
-    const a = r, l = v("p-carousel"), e = s();
-    return u(() => {
+    const a = r, l = v("p-carousel"), e = i();
+    return s(() => {
       n(e.value, a), o(e.value, "carouselChange", t), o(e.value, "update", t);
-    }), i(() => {
+    }), u(() => {
       n(e.value, a);
     }), (d, _) => (f(), c(m(g(l)), {
       ref_key: "pdsComponentRef",
@@ -35,5 +36,5 @@ const P = /* @__PURE__ */ p({
   }
 });
 export {
-  P as default
+  y as default
 };

package/lib/components/CheckboxWrapperWrapper.vue.d.ts

@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     theme: "light" | "dark";
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     loading: boolean;
     message: string;

package/lib/components/FieldsetWrapper.vue.d.ts

@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     theme: "light" | "dark";
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     required: boolean;
     message: string;
     labelSize: "small" | "medium";

package/lib/components/FieldsetWrapperWrapper.vue.d.ts

@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     theme: "light" | "dark";
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     required: boolean;
     message: string;
     labelSize: "small" | "medium";

package/lib/components/IconWrapper.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: "inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large";
     theme: "light" | "dark";
     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" | "state-disabled";
-    name: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "copy" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
+    name: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -65,7 +65,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     description: string;
     dismissButton: boolean;
     state: "success" | "warning" | "error" | "info" | "neutral";
-    actionIcon: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "copy" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
+    actionIcon: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
     actionLoading: boolean;
 }, {}>, {
     default?(_: {}): any;

package/lib/components/PaginationWrapper.vue.d.ts

@@ -29,9 +29,13 @@ type PPaginationProps = {
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered
+     * The maximum number of page links rendered.
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
+    /**
+     * Show or hide the button to jump to the last page.
+     */
+    showLastPage?: boolean;
     /**
      * Adapts the color when used on dark background.
      */
@@ -54,6 +58,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         base: number;
         xs: number;
     };
+    showLastPage: boolean;
     theme: string;
     totalItemsCount: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -72,6 +77,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
         base: number;
         xs: number;
     };
+    showLastPage: boolean;
     theme: string;
     totalItemsCount: number;
 }>>> & {
@@ -83,6 +89,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     activePage: number;
     itemsPerPage: number;
     maxNumberOfPageLinks: BreakpointCustomizable<7 | 5>;
+    showLastPage: boolean;
     totalItemsCount: number;
 }, {}>;
 export default _default;

package/lib/components/PaginationWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as s, onMounted as u, onUpdated as f, openBlock as i, createBlock as g, resolveDynamicComponent as m, unref as d } from "vue";
+import { defineComponent as r, ref as s, onMounted as u, onUpdated as f, openBlock as g, createBlock as i, resolveDynamicComponent as d, unref as m } from "vue";
 import { getPrefixedTagName as c, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
-const b = /* @__PURE__ */ r({
+const C = /* @__PURE__ */ r({
   __name: "PaginationWrapper",
   props: {
     activePage: { default: 1 },
@@ -11,6 +11,7 @@ const b = /* @__PURE__ */ r({
     intl: { default: () => ({ root: "Pagination", prev: "Previous page", next: "Next page", page: "Page" }) },
     itemsPerPage: { default: 1 },
     maxNumberOfPageLinks: { default: () => ({ base: 5, xs: 7 }) },
+    showLastPage: { type: Boolean, default: !0 },
     theme: { default: "light" },
     totalItemsCount: { default: 1 }
   },
@@ -21,12 +22,12 @@ const b = /* @__PURE__ */ r({
       n(e.value, t), o(e.value, "pageChange", a), o(e.value, "update", a);
     }), f(() => {
       n(e.value, t);
-    }), (P, v) => (i(), g(m(d(p)), {
+    }), (P, v) => (g(), i(d(m(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, null, 512));
   }
 });
 export {
-  b as default
+  C as default
 };

package/lib/components/RadioButtonWrapperWrapper.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     theme: "light" | "dark";
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
 }, {}>, {

package/lib/components/SelectWrapperWrapper.vue.d.ts

@@ -62,7 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     theme: "light" | "dark";
     description: string;
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     dropdownDirection: "auto" | "down" | "up";

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

@@ -85,7 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     theme: "light" | "dark";
     description: string;
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     actionLoading: boolean;

package/lib/components/TextareaWrapperWrapper.vue.d.ts

@@ -53,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label: string;
     theme: "light" | "dark";
     description: string;
-    state: "success" | "none" | "error";
+    state: "none" | "success" | "error";
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     showCounter: boolean;

package/lib/types.d.ts

@@ -1,3 +1,193 @@
+export type Booleanish = boolean | "true" | "false";
+export type AriaAttributes = {
+    /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+    "aria-activedescendant"?: string | undefined;
+    /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+    "aria-atomic"?: Booleanish | undefined;
+    /**
+     * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+     * presented if they are made.
+     */
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+    "aria-busy"?: Booleanish | undefined;
+    /**
+     * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+     * @see aria-pressed @see aria-selected.
+     */
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    /**
+     * Defines the total number of columns in a table, grid, or treegrid.
+     * @see aria-colindex.
+     */
+    "aria-colcount"?: number | undefined;
+    /**
+     * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+     * @see aria-colcount @see aria-colspan.
+     */
+    "aria-colindex"?: number | undefined;
+    /**
+     * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+     * @see aria-colindex @see aria-rowspan.
+     */
+    "aria-colspan"?: number | undefined;
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+     * @see aria-owns.
+     */
+    "aria-controls"?: string | undefined;
+    /** Indicates the element that represents the current item within a container or set of related elements. */
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     * @see aria-labelledby
+     */
+    "aria-describedby"?: string | undefined;
+    /**
+     * Identifies the element that provides a detailed, extended description for the object.
+     * @see aria-describedby.
+     */
+    "aria-details"?: string | undefined;
+    /**
+     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+     * @see aria-hidden @see aria-readonly.
+     */
+    "aria-disabled"?: Booleanish | undefined;
+    /**
+     * Indicates what functions can be performed when a dragged object is released on the drop target.
+     * @deprecated in ARIA 1.1
+     */
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    /**
+     * Identifies the element that provides an error message for the object.
+     * @see aria-invalid @see aria-describedby.
+     */
+    "aria-errormessage"?: string | undefined;
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    "aria-expanded"?: Booleanish | undefined;
+    /**
+     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+     * allows assistive technology to override the general default of reading in document source order.
+     */
+    "aria-flowto"?: string | undefined;
+    /**
+     * Indicates an element's "grabbed" state in a drag-and-drop operation.
+     * @deprecated in ARIA 1.1
+     */
+    "aria-grabbed"?: Booleanish | undefined;
+    /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    /**
+     * Indicates whether the element is exposed to an accessibility API.
+     * @see aria-disabled.
+     */
+    "aria-hidden"?: Booleanish | undefined;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     * @see aria-errormessage.
+     */
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+    "aria-keyshortcuts"?: string | undefined;
+    /**
+     * Defines a string value that labels the current element.
+     * @see aria-labelledby.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     * @see aria-describedby.
+     */
+    "aria-labelledby"?: string | undefined;
+    /** Defines the hierarchical level of an element within a structure. */
+    "aria-level"?: number | undefined;
+    /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    /** Indicates whether an element is modal when displayed. */
+    "aria-modal"?: Booleanish | undefined;
+    /** Indicates whether a text box accepts multiple lines of input or only a single line. */
+    "aria-multiline"?: Booleanish | undefined;
+    /** Indicates that the user may select more than one item from the current selectable descendants. */
+    "aria-multiselectable"?: Booleanish | undefined;
+    /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    /**
+     * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+     * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+     * @see aria-controls.
+     */
+    "aria-owns"?: string | undefined;
+    /**
+     * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+     * A hint could be a sample value or a brief description of the expected format.
+     */
+    "aria-placeholder"?: string | undefined;
+    /**
+     * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+     * @see aria-setsize.
+     */
+    "aria-posinset"?: number | undefined;
+    /**
+     * Indicates the current "pressed" state of toggle buttons.
+     * @see aria-checked @see aria-selected.
+     */
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    /**
+     * Indicates that the element is not editable, but is otherwise operable.
+     * @see aria-disabled.
+     */
+    "aria-readonly"?: Booleanish | undefined;
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     * @see aria-atomic.
+     */
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    /** Indicates that user input is required on the element before a form may be submitted. */
+    "aria-required"?: Booleanish | undefined;
+    /** Defines a human-readable, author-localized description for the role of an element. */
+    "aria-roledescription"?: string | undefined;
+    /**
+     * Defines the total number of rows in a table, grid, or treegrid.
+     * @see aria-rowindex.
+     */
+    "aria-rowcount"?: number | undefined;
+    /**
+     * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+     * @see aria-rowcount @see aria-rowspan.
+     */
+    "aria-rowindex"?: number | undefined;
+    /**
+     * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+     * @see aria-rowindex @see aria-colspan.
+     */
+    "aria-rowspan"?: number | undefined;
+    /**
+     * Indicates the current "selected" state of various widgets.
+     * @see aria-checked @see aria-pressed.
+     */
+    "aria-selected"?: Booleanish | undefined;
+    /**
+     * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+     * @see aria-posinset.
+     */
+    "aria-setsize"?: number | undefined;
+    /** Indicates if items in a table or grid are sorted in ascending or descending order. */
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    /** Defines the maximum allowed value for a range widget. */
+    "aria-valuemax"?: number | undefined;
+    /** Defines the minimum allowed value for a range widget. */
+    "aria-valuemin"?: number | undefined;
+    /**
+     * Defines the current value for a range widget.
+     * @see aria-valuetext.
+     */
+    "aria-valuenow"?: number | undefined;
+    /** Defines the human readable text alternative of aria-valuenow for a range widget. */
+    "aria-valuetext"?: string | undefined;
+    /** All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions */
+    role?: AriaRole;
+};
+export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
 declare const ICON_NAMES: readonly [
     "360",
     "accessibility",
@@ -355,196 +545,6 @@ declare const LINK_TARGETS: readonly [
     "_top"
 ];
 export type LinkTarget = typeof LINK_TARGETS[number] | string;
-export type Booleanish = boolean | "true" | "false";
-export type AriaAttributes = {
-    /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
-    "aria-activedescendant"?: string | undefined;
-    /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
-    "aria-atomic"?: Booleanish | undefined;
-    /**
-     * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
-     * presented if they are made.
-     */
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-    /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
-    "aria-busy"?: Booleanish | undefined;
-    /**
-     * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
-     * @see aria-pressed @see aria-selected.
-     */
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-    /**
-     * Defines the total number of columns in a table, grid, or treegrid.
-     * @see aria-colindex.
-     */
-    "aria-colcount"?: number | undefined;
-    /**
-     * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
-     * @see aria-colcount @see aria-colspan.
-     */
-    "aria-colindex"?: number | undefined;
-    /**
-     * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
-     * @see aria-colindex @see aria-rowspan.
-     */
-    "aria-colspan"?: number | undefined;
-    /**
-     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
-     * @see aria-owns.
-     */
-    "aria-controls"?: string | undefined;
-    /** Indicates the element that represents the current item within a container or set of related elements. */
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-    /**
-     * Identifies the element (or elements) that describes the object.
-     * @see aria-labelledby
-     */
-    "aria-describedby"?: string | undefined;
-    /**
-     * Identifies the element that provides a detailed, extended description for the object.
-     * @see aria-describedby.
-     */
-    "aria-details"?: string | undefined;
-    /**
-     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-     * @see aria-hidden @see aria-readonly.
-     */
-    "aria-disabled"?: Booleanish | undefined;
-    /**
-     * Indicates what functions can be performed when a dragged object is released on the drop target.
-     * @deprecated in ARIA 1.1
-     */
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-    /**
-     * Identifies the element that provides an error message for the object.
-     * @see aria-invalid @see aria-describedby.
-     */
-    "aria-errormessage"?: string | undefined;
-    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
-    "aria-expanded"?: Booleanish | undefined;
-    /**
-     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
-     * allows assistive technology to override the general default of reading in document source order.
-     */
-    "aria-flowto"?: string | undefined;
-    /**
-     * Indicates an element's "grabbed" state in a drag-and-drop operation.
-     * @deprecated in ARIA 1.1
-     */
-    "aria-grabbed"?: Booleanish | undefined;
-    /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    /**
-     * Indicates whether the element is exposed to an accessibility API.
-     * @see aria-disabled.
-     */
-    "aria-hidden"?: Booleanish | undefined;
-    /**
-     * Indicates the entered value does not conform to the format expected by the application.
-     * @see aria-errormessage.
-     */
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
-    "aria-keyshortcuts"?: string | undefined;
-    /**
-     * Defines a string value that labels the current element.
-     * @see aria-labelledby.
-     */
-    "aria-label"?: string | undefined;
-    /**
-     * Identifies the element (or elements) that labels the current element.
-     * @see aria-describedby.
-     */
-    "aria-labelledby"?: string | undefined;
-    /** Defines the hierarchical level of an element within a structure. */
-    "aria-level"?: number | undefined;
-    /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    /** Indicates whether an element is modal when displayed. */
-    "aria-modal"?: Booleanish | undefined;
-    /** Indicates whether a text box accepts multiple lines of input or only a single line. */
-    "aria-multiline"?: Booleanish | undefined;
-    /** Indicates that the user may select more than one item from the current selectable descendants. */
-    "aria-multiselectable"?: Booleanish | undefined;
-    /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    /**
-     * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
-     * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
-     * @see aria-controls.
-     */
-    "aria-owns"?: string | undefined;
-    /**
-     * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
-     * A hint could be a sample value or a brief description of the expected format.
-     */
-    "aria-placeholder"?: string | undefined;
-    /**
-     * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
-     * @see aria-setsize.
-     */
-    "aria-posinset"?: number | undefined;
-    /**
-     * Indicates the current "pressed" state of toggle buttons.
-     * @see aria-checked @see aria-selected.
-     */
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    /**
-     * Indicates that the element is not editable, but is otherwise operable.
-     * @see aria-disabled.
-     */
-    "aria-readonly"?: Booleanish | undefined;
-    /**
-     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
-     * @see aria-atomic.
-     */
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    /** Indicates that user input is required on the element before a form may be submitted. */
-    "aria-required"?: Booleanish | undefined;
-    /** Defines a human-readable, author-localized description for the role of an element. */
-    "aria-roledescription"?: string | undefined;
-    /**
-     * Defines the total number of rows in a table, grid, or treegrid.
-     * @see aria-rowindex.
-     */
-    "aria-rowcount"?: number | undefined;
-    /**
-     * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
-     * @see aria-rowcount @see aria-rowspan.
-     */
-    "aria-rowindex"?: number | undefined;
-    /**
-     * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
-     * @see aria-rowindex @see aria-colspan.
-     */
-    "aria-rowspan"?: number | undefined;
-    /**
-     * Indicates the current "selected" state of various widgets.
-     * @see aria-checked @see aria-pressed.
-     */
-    "aria-selected"?: Booleanish | undefined;
-    /**
-     * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
-     * @see aria-posinset.
-     */
-    "aria-setsize"?: number | undefined;
-    /** Indicates if items in a table or grid are sorted in ascending or descending order. */
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    /** Defines the maximum allowed value for a range widget. */
-    "aria-valuemax"?: number | undefined;
-    /** Defines the minimum allowed value for a range widget. */
-    "aria-valuemin"?: number | undefined;
-    /**
-     * Defines the current value for a range widget.
-     * @see aria-valuetext.
-     */
-    "aria-valuenow"?: number | undefined;
-    /** Defines the human readable text alternative of aria-valuenow for a range widget. */
-    "aria-valuetext"?: string | undefined;
-    /** All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions */
-    role?: AriaRole;
-};
-export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
@@ -634,19 +634,19 @@ declare const DISPLAY_TAGS: readonly [
     "h5",
     "h6"
 ];
-export type DisplayTag = typeof DISPLAY_TAGS[number];
+export type DisplayTag = (typeof DISPLAY_TAGS)[number];
 declare const DISPLAY_SIZES: readonly [
     "small",
     "medium",
     "large",
     "inherit"
 ];
-export type DisplaySize = typeof DISPLAY_SIZES[number];
+export type DisplaySize = (typeof DISPLAY_SIZES)[number];
 declare const DISPLAY_COLORS: readonly [
     "primary",
     "inherit"
 ];
-export type DisplayColor = typeof DISPLAY_COLORS[number];
+export type DisplayColor = (typeof DISPLAY_COLORS)[number];
 export type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
     "contrast-low",
@@ -822,12 +822,12 @@ declare const HEADING_SIZES: readonly [
     "xx-large",
     "inherit"
 ];
-export type HeadingSize = typeof HEADING_SIZES[number];
+export type HeadingSize = (typeof HEADING_SIZES)[number];
 declare const HEADING_COLORS: readonly [
     "primary",
     "inherit"
 ];
-export type HeadingColor = typeof HEADING_COLORS[number];
+export type HeadingColor = (typeof HEADING_COLORS)[number];
 export type HeadingAlign = TextAlign;
 declare const HEADLINE_VARIANTS: readonly [
     "large-title",
@@ -999,11 +999,11 @@ declare const POPOVER_DIRECTIONS: readonly [
     "bottom",
     "left"
 ];
-export type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
+export type PopoverDirection = (typeof POPOVER_DIRECTIONS)[number];
 declare const POPOVER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type PopoverAriaAttribute = typeof POPOVER_ARIA_ATTRIBUTES[number];
+export type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
 export type RadioButtonWrapperState = FormState;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
@@ -1045,7 +1045,7 @@ declare const STEPPER_ITEM_STATES: readonly [
     "complete",
     "warning"
 ];
-export type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
+export type StepperHorizontalItemState = (typeof STEPPER_ITEM_STATES)[number];
 export type SwitchAlignLabel = AlignLabel;
 export type SwitchUpdateEvent = {
     checked: boolean;
@@ -1123,7 +1123,7 @@ declare const UNIT_POSITIONS: readonly [
     "prefix",
     "suffix"
 ];
-export type TextFieldWrapperUnitPosition = typeof UNIT_POSITIONS[number];
+export type TextFieldWrapperUnitPosition = (typeof UNIT_POSITIONS)[number];
 export type TextFieldWrapperActionIcon = Extract<IconName, "locate">;
 export type TextFieldWrapperState = FormState;
 declare const LIST_TYPES: readonly [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.1.0",
+  "version": "3.2.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.1.0"
+    "@porsche-design-system/components-js": "3.2.0-rc.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"