@porsche-design-system/components-vue 3.0.0-alpha.5 → 3.0.0-alpha.6

package/CHANGELOG.md

@@ -9,24 +9,152 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.6] - 2023-04-06
+
+#### Added
+
+- `xxl` breakpoint for all breakpoint customizable component values
+  ([#2454](https://github.com/porsche-design-system/porsche-design-system/pull/2454))
+
+#### Fixed
+
+- Disabled color of `Icon` component ([#2446](https://github.com/porsche-design-system/porsche-design-system/pull/2446))
+- Support of `Radio Button Wrapper` for name value with non-alphanumeric characters
+  ([#2443](https://github.com/porsche-design-system/porsche-design-system/pull/2443))
+
+#### Changed
+
+- `Banner` is a controlled component now and its visibility has to be controlled via the `open` prop
+  ([#2447](https://github.com/porsche-design-system/porsche-design-system/pull/2447))
+
+```diff
+- <p-banner></p-banner>
++ <p-banner open="true"></p-banner>
+```
+
+- Renamed all custom `change` events to `update` because of bad event emissions with native `change` events, e.g. with
+  nested `select` or `input` elements
+
+#### 🤖 Property deprecations 🤖
+
+##### Accordion:
+
+- Event `accordionChange` is deprecated, use `update` event instead.
+
+```diff
+- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
++ <PAccordion onUpdate={(e: CustomEvent<AccordionUPdateEvent>) => {}} />
+```
+
+##### Banner:
+
+- Prop `persistent` is deprecated, use `dismissButton` instead.
+
+```diff
+- <p-banner persistent="true"></p-banner>
++ <p-banner dismiss-button="false"></p-banner>
+```
+
+##### Carousel:
+
+- Event `carouselChange` is deprecated, use `update` event instead.
+
+```diff
+- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
++ <PCarousel onUpdate={(e: CustomEvent<CarouselUpdateEvent>) => {}} />
+```
+
+##### Inline Notification:
+
+- Prop `persistent` is deprecated, use `dismissButton` instead.
+
+```diff
+- <p-inline-notification persistent="true"></p-inline-notification>
++ <p-inline-notification dismiss-button="false"></p-inline-notification>
+```
+
+##### Pagination:
+
+- Event `pageChange` is deprecated, use `update` event instead.
+
+```diff
+- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
++ <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
+```
+
+#### Segmented Control:
+
+- Event `segmentedControlChange` is deprecated, use `update` event instead.
+
+```diff
+- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
++ <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
+```
+
+#### Stepper Horizontal:
+
+- Event `stepChange` is deprecated, use `update` event instead.
+
+```diff
+- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
++ <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
+```
+
+#### Switch:
+
+- Event `switchChange` is deprecated, use `update` event instead.
+
+```diff
+- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
++ <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
+```
+
+#### Table:
+
+- Event `sortingChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
++ <PTable onUpdate={(e: CustomEvent<TableUpdateEvent>) => {}} />
+```
+
+##### Tabs:
+
+- Event `tabChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabs onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
+```
+
+##### Tabs Bar:
+
+- Event `tabChange` is deprecated, use `update` event instead.
+
+```diff
+- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
++ <PTabsBar onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
+```
+
 ### [3.0.0-alpha.5] - 2023-03-30
 
 #### Added
 
-- `Wordmark` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
-- `Crest` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2437)
+- `Wordmark` ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
+- `Crest` ([#2437](https://github.com/porsche-design-system/porsche-design-system/pull/2437))
 - Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
-  of `Styles` subpackage [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2436)
+  of `Styles` subpackage ([#2436](https://github.com/porsche-design-system/porsche-design-system/pull/2436))
 
 ### [3.0.0-alpha.4] - 2023-03-28
 
 #### Changed
 
-- `Table` matches new design language [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+- `Table` matches new design language
+  ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
 
 #### Added
 
-- Styles: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+- 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`
@@ -39,14 +167,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `gridWideOffset`, `gridWideOffsetBase`, `gridWideOffsetS`, `gridWideOffsetXXL` and `$pds-grid-wide-offset-base`,
     `$pds-grid-wide-offset-s`, `$pds-grid-wide-offset-xxl`
   - `gridFullOffset` and `$pds-grid-full-offset`
-- `Button Tile` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2381)
-- `Fieldset` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
-- `Link Tile Model Signature` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2388)
-- Prop `activeSlideIndex` to `Carousel` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
+- `Button Tile` ([#2381](https://github.com/porsche-design-system/porsche-design-system/pull/2381))
+- `Fieldset` ([#2404](https://github.com/porsche-design-system/porsche-design-system/pull/2404))
+- `Link Tile Model Signature` ([#2388](https://github.com/porsche-design-system/porsche-design-system/pull/2388))
+- Prop `activeSlideIndex` to `Carousel`
+  ([#2421](https://github.com/porsche-design-system/porsche-design-system/pull/2421))
 - Prop `slidesPerPage` supports value `auto` of `Carousel`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2421)
-- Prop `scrollbar` for `Scroller` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
-- Prop `theme` for `Table` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2364/)
+  ([#2421](https://github.com/porsche-design-system/porsche-design-system/pull/2421))
+- Prop `scrollbar` for `Scroller` ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
+- Prop `theme` for `Table` ([#2364](https://github.com/porsche-design-system/porsche-design-system/pull/2364/))
 
 #### Fixed
 
@@ -55,37 +184,37 @@ 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`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#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`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### Removed
 
 - `Banner`: CSS variable `--p-banner-position-type`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
 
 ##### Banner:
 
 - Prop `width` has no effect anymore, instead the component is aligned with Porsche Grid "extended" by default.
-  [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2422)
+  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤡 Component deprecations 🤡
 
-##### Marque [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+##### Marque: ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
 
 ```diff
 - <p-marque></p-marque>
 + <p-wordmark></p-wordmark>
 ```
 
-##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
+##### Fieldset Wrapper: ([#2404](https://github.com/porsche-design-system/porsche-design-system/pull/2404))
 
 ```diff
 - <p-fieldset-wrapper label="Some legend label">

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

@@ -1,4 +1,4 @@
-import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -29,9 +29,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tag: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    accordionChange: (value: AccordionChangeEvent) => void;
+    accordionChange: (value: AccordionUpdateEvent) => void;
 } & {
-    change: (value: AccordionChangeEvent) => void;
+    update: (value: AccordionUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -62,8 +62,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tag: string;
     theme: string;
 }>>> & {
-    onChange?: ((value: AccordionChangeEvent) => any) | undefined;
-    onAccordionChange?: ((value: AccordionChangeEvent) => any) | undefined;
+    onAccordionChange?: ((value: AccordionUpdateEvent) => any) | undefined;
+    onUpdate?: ((value: AccordionUpdateEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<AccordionSize>;
     tag: AccordionTag;

package/lib/components/AccordionWrapper.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as l, ref as d, onMounted as s, onUpdated as f, openBlock as m, createBlock as i, resolveDynamicComponent as u, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { defineComponent as l, ref as c, onMounted as s, onUpdated as f, openBlock as u, createBlock as m, resolveDynamicComponent as i, unref as g, withCtx as h, renderSlot as C } from "vue";
 import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as a } from "../../utils.js";
 const k = /* @__PURE__ */ l({
   __name: "AccordionWrapper",
@@ -10,19 +10,19 @@ const k = /* @__PURE__ */ l({
     tag: { default: "h2" },
     theme: { default: "light" }
   },
-  emits: ["accordionChange", "change"],
+  emits: ["accordionChange", "update"],
   setup(r, { emit: o }) {
-    const n = r, p = _("p-accordion"), e = d();
+    const n = r, p = _("p-accordion"), e = c();
     return s(() => {
-      t(e.value, n), a(e.value, "accordionChange", o), a(e.value, "change", o);
+      t(e.value, n), a(e.value, "accordionChange", o), a(e.value, "update", o);
     }), f(() => {
       t(e.value, n);
-    }), (c, v) => (m(), i(u(g(p)), {
+    }), (d, v) => (u(), m(i(g(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: h(() => [
-        C(c.$slots, "default")
+        C(d.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,15 +1,23 @@
-import type { BannerState, Theme, BannerWidth } from '../types';
+import type { BannerState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Description of the banner.
      */
     description?: string | undefined;
+    /**
+     * If false, the banner will not have a dismiss button.
+     */
+    dismissButton?: boolean | undefined;
     /**
      * Heading of the banner.
      */
     heading?: string | undefined;
     /**
-     * Defines if the banner can be closed/removed by the user.
+     * If true, the banner is open.
+     */
+    open: boolean;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
     persistent?: boolean | undefined;
     /**
@@ -27,11 +35,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
     description: string;
+    dismissButton: boolean;
     heading: string;
-    persistent: boolean;
+    open: boolean;
     state: string;
     theme: string;
-    width: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (value?: void | undefined) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -39,12 +47,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Description of the banner.
      */
     description?: string | undefined;
+    /**
+     * If false, the banner will not have a dismiss button.
+     */
+    dismissButton?: boolean | undefined;
     /**
      * Heading of the banner.
      */
     heading?: string | undefined;
     /**
-     * Defines if the banner can be closed/removed by the user.
+     * If true, the banner is open.
+     */
+    open: boolean;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
     persistent?: boolean | undefined;
     /**
@@ -62,20 +78,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
     description: string;
+    dismissButton: boolean;
     heading: string;
-    persistent: boolean;
+    open: boolean;
     state: string;
     theme: string;
-    width: string;
 }>>> & {
     onDismiss?: ((value?: void | undefined) => any) | undefined;
 }, {
     heading: string;
+    open: boolean;
     theme: Theme;
     description: string;
-    persistent: boolean;
+    dismissButton: boolean;
     state: BannerState;
-    width: BannerWidth;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/BannerWrapper.vue.js

@@ -1,33 +1,35 @@
-import { defineComponent as d, ref as p, onMounted as f, onUpdated as i, openBlock as l, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as h } from "vue";
-import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as g } from "../../utils.js";
-const B = /* @__PURE__ */ d({
+import { defineComponent as p, ref as d, onMounted as l, onUpdated as f, openBlock as i, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as B, renderSlot as _ } from "vue";
+import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as y } from "../../utils.js";
+const k = /* @__PURE__ */ p({
   __name: "BannerWrapper",
   props: {
     description: { default: "" },
+    dismissButton: { type: Boolean, default: !0 },
     heading: { default: "" },
-    persistent: { type: Boolean, default: !1 },
+    open: { type: Boolean, default: !1 },
+    persistent: { type: Boolean },
     state: { default: "info" },
     theme: { default: "light" },
-    width: { default: "extended" }
+    width: null
   },
   emits: ["dismiss"],
   setup(o, { emit: a }) {
-    const t = o, r = C("p-banner"), e = p();
-    return f(() => {
-      n(e.value, t), g(e.value, "dismiss", a);
-    }), i(() => {
+    const t = o, s = h("p-banner"), e = d();
+    return l(() => {
+      n(e.value, t), y(e.value, "dismiss", a);
+    }), f(() => {
       n(e.value, t);
-    }), (s, v) => (l(), m(u(c(r)), {
+    }), (r, C) => (i(), u(m(c(s)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: _(() => [
-        h(s.$slots, "default")
+      default: B(() => [
+        _(r.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  B as default
+  k as default
 };

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

@@ -1,4 +1,4 @@
-import type { CarouselAlignHeader, BreakpointCustomizable, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -58,9 +58,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     width: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    carouselChange: (value: CarouselChangeEvent) => void;
+    carouselChange: (value: CarouselUpdateEvent) => void;
 } & {
-    change: (value: CarouselChangeEvent) => void;
+    update: (value: CarouselUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -120,8 +120,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     width: string;
 }>>> & {
-    onChange?: ((value: CarouselChangeEvent) => any) | undefined;
-    onCarouselChange?: ((value: CarouselChangeEvent) => any) | undefined;
+    onUpdate?: ((value: CarouselUpdateEvent) => any) | undefined;
+    onCarouselChange?: ((value: CarouselUpdateEvent) => any) | undefined;
 }, {
     theme: Theme;
     width: CarouselWidth;

package/lib/components/CarouselWrapper.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, ref as s, onMounted as i, onUpdated as p, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { defineComponent as u, ref as p, onMounted as s, onUpdated as i, 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 a, addEventListenerToElementRef as o } from "../../utils.js";
 const P = /* @__PURE__ */ u({
   __name: "CarouselWrapper",
@@ -16,19 +16,19 @@ const P = /* @__PURE__ */ u({
     width: { default: "basic" },
     wrapContent: { type: Boolean }
   },
-  emits: ["carouselChange", "change"],
-  setup(l, { emit: n }) {
-    const t = l, r = v("p-carousel"), e = s();
-    return i(() => {
-      a(e.value, t), o(e.value, "carouselChange", n), o(e.value, "change", n);
-    }), p(() => {
-      a(e.value, t);
+  emits: ["carouselChange", "update"],
+  setup(l, { emit: t }) {
+    const n = l, r = v("p-carousel"), e = p();
+    return s(() => {
+      a(e.value, n), o(e.value, "carouselChange", t), o(e.value, "update", t);
+    }), i(() => {
+      a(e.value, n);
     }), (d, _) => (f(), c(m(g(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        C(d.$slots, "default")
+      default: C(() => [
+        h(d.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -4,11 +4,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 5 | 2 | 7 | 1 | 8 | 9 | 10 | 11> | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 6 | 1 | 8 | 9 | 10 | 11> | undefined;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<3 | 4 | 6 | 5 | 2 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 6 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
 }>, {
     offset: number;
     size: number;
@@ -16,11 +16,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: BreakpointCustomizable<0 | 3 | 4 | 6 | 5 | 2 | 7 | 1 | 8 | 9 | 10 | 11> | undefined;
+    offset?: BreakpointCustomizable<0 | 3 | 4 | 7 | 5 | 2 | 6 | 1 | 8 | 9 | 10 | 11> | undefined;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<3 | 4 | 6 | 5 | 2 | 7 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
+    size?: BreakpointCustomizable<3 | 4 | 7 | 5 | 2 | 6 | 1 | 12 | 8 | 9 | 10 | 11> | undefined;
 }>, {
     offset: number;
     size: number;

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

@@ -16,12 +16,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Description of the inline-notification.
      */
     description?: string | undefined;
+    /**
+     * If false, the inline-notification will not have a dismiss button.
+     */
+    dismissButton?: boolean | undefined;
     /**
      * Heading of the inline-notification.
      */
     heading?: string | undefined;
     /**
-     * Defines if the inline-notification can be closed/removed by the user.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
      */
     persistent?: boolean | undefined;
     /**
@@ -36,8 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     actionIcon: string;
     actionLoading: boolean;
     description: string;
+    dismissButton: boolean;
     heading: string;
-    persistent: boolean;
     state: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -61,12 +65,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Description of the inline-notification.
      */
     description?: string | undefined;
+    /**
+     * If false, the inline-notification will not have a dismiss button.
+     */
+    dismissButton?: boolean | undefined;
     /**
      * Heading of the inline-notification.
      */
     heading?: string | undefined;
     /**
-     * Defines if the inline-notification can be closed/removed by the user.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
      */
     persistent?: boolean | undefined;
     /**
@@ -81,8 +89,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     actionIcon: string;
     actionLoading: boolean;
     description: string;
+    dismissButton: boolean;
     heading: string;
-    persistent: boolean;
     state: string;
     theme: string;
 }>>> & {
@@ -92,7 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     heading: string;
     theme: Theme;
     description: string;
-    persistent: boolean;
+    dismissButton: boolean;
     state: InlineNotificationState;
     actionIcon: InlineNotificationActionIcon;
     actionLoading: boolean;

package/lib/components/InlineNotificationWrapper.vue.js

@@ -1,25 +1,26 @@
-import { defineComponent as s, ref as f, onMounted as d, onUpdated as p, openBlock as c, createBlock as u, resolveDynamicComponent as m, unref as g, withCtx as _, renderSlot as h } from "vue";
+import { defineComponent as l, ref as d, onMounted as f, onUpdated as p, openBlock as u, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as _, renderSlot as h } from "vue";
 import { getPrefixedTagName as v, syncProperties as o, addEventListenerToElementRef as a } from "../../utils.js";
-const k = /* @__PURE__ */ s({
+const k = /* @__PURE__ */ l({
   __name: "InlineNotificationWrapper",
   props: {
     actionIcon: { default: "arrow-right" },
     actionLabel: null,
     actionLoading: { type: Boolean, default: !1 },
     description: { default: "" },
+    dismissButton: { type: Boolean, default: !0 },
     heading: { default: "" },
-    persistent: { type: Boolean, default: !1 },
+    persistent: { type: Boolean },
     state: { default: "info" },
     theme: { default: "light" }
   },
   emits: ["action", "dismiss"],
   setup(i, { emit: t }) {
-    const n = i, l = v("p-inline-notification"), e = f();
-    return d(() => {
+    const n = i, s = v("p-inline-notification"), e = d();
+    return f(() => {
       o(e.value, n), a(e.value, "action", t), a(e.value, "dismiss", t);
     }), p(() => {
       o(e.value, n);
-    }), (r, C) => (c(), u(m(g(l)), {
+    }), (r, y) => (u(), c(m(g(s)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -76,8 +76,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onClose?: ((value?: void | undefined) => any) | undefined;
 }, {
     open: boolean;
-    disableBackdropClick: boolean;
     dismissButton: boolean;
+    disableBackdropClick: boolean;
     fullscreen: BreakpointCustomizable<boolean>;
 }>, {
     default: (_: {}) => any;

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationChangeEvent, Theme } from '../types';
+import type { BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEvent, Theme } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Index of the currently active page.
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * The maximum number of page links rendered
      */
-    maxNumberOfPageLinks?: BreakpointCustomizable<5 | 7> | undefined;
+    maxNumberOfPageLinks?: BreakpointCustomizable<7 | 5> | undefined;
     /**
      * Adapts the color when used on dark background.
      */
@@ -56,9 +56,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme: string;
     totalItemsCount: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: PaginationChangeEvent) => void;
+    pageChange: (value: PaginationUpdateEvent) => void;
 } & {
-    pageChange: (value: PaginationChangeEvent) => void;
+    update: (value: PaginationUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Index of the currently active page.
@@ -91,7 +91,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /**
      * The maximum number of page links rendered
      */
-    maxNumberOfPageLinks?: BreakpointCustomizable<5 | 7> | undefined;
+    maxNumberOfPageLinks?: BreakpointCustomizable<7 | 5> | undefined;
     /**
      * Adapts the color when used on dark background.
      */
@@ -116,8 +116,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme: string;
     totalItemsCount: number;
 }>>> & {
-    onChange?: ((value: PaginationChangeEvent) => any) | undefined;
-    onPageChange?: ((value: PaginationChangeEvent) => any) | undefined;
+    onUpdate?: ((value: PaginationUpdateEvent) => any) | undefined;
+    onPageChange?: ((value: PaginationUpdateEvent) => any) | undefined;
 }, {
     theme: Theme;
     intl: Partial<Record<"page" | "prev" | "next" | "root", string>>;

package/lib/components/PaginationWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as u, onMounted as s, onUpdated as g, openBlock as f, createBlock as i, resolveDynamicComponent as m, unref as c } from "vue";
-import { getPrefixedTagName as d, syncProperties as t, addEventListenerToElementRef as l } from "../../utils.js";
-const b = /* @__PURE__ */ p({
+import { defineComponent as r, ref as u, onMounted as s, onUpdated as f, openBlock as i, createBlock as g, resolveDynamicComponent as m, unref as d } from "vue";
+import { getPrefixedTagName as c, syncProperties as n, addEventListenerToElementRef as l } from "../../utils.js";
+const b = /* @__PURE__ */ r({
   __name: "PaginationWrapper",
   props: {
     activePage: { default: 1 },
@@ -14,14 +14,14 @@ const b = /* @__PURE__ */ p({
     theme: { default: "light" },
     totalItemsCount: { default: 1 }
   },
-  emits: ["change", "pageChange"],
+  emits: ["pageChange", "update"],
   setup(o, { emit: a }) {
-    const n = o, r = d("p-pagination"), e = u();
+    const t = o, p = c("p-pagination"), e = u();
     return s(() => {
-      t(e.value, n), l(e.value, "change", a), l(e.value, "pageChange", a);
-    }), g(() => {
-      t(e.value, n);
-    }), (P, v) => (f(), i(m(c(r)), {
+      n(e.value, t), l(e.value, "pageChange", a), l(e.value, "update", a);
+    }), f(() => {
+      n(e.value, t);
+    }), (P, v) => (i(), g(m(d(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, null, 512));

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

@@ -1,4 +1,4 @@
-import type { SegmentedControlChangeEvent, Theme } from '../types';
+import type { SegmentedControlUpdateEvent, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
@@ -15,9 +15,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: SegmentedControlChangeEvent) => void;
+    segmentedControlChange: (value: SegmentedControlUpdateEvent) => void;
 } & {
-    segmentedControlChange: (value: SegmentedControlChangeEvent) => void;
+    update: (value: SegmentedControlUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
@@ -34,8 +34,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     theme: string;
 }>>> & {
-    onChange?: ((value: SegmentedControlChangeEvent) => any) | undefined;
-    onSegmentedControlChange?: ((value: SegmentedControlChangeEvent) => any) | undefined;
+    onUpdate?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
+    onSegmentedControlChange?: ((value: SegmentedControlUpdateEvent) => any) | undefined;
 }, {
     theme: Theme;
 }>, {

package/lib/components/SegmentedControlWrapper.vue.js

@@ -1,25 +1,25 @@
-import { defineComponent as s, ref as d, onMounted as m, onUpdated as u, openBlock as c, createBlock as f, resolveDynamicComponent as g, unref as C, withCtx as i, renderSlot as h } from "vue";
-import { getPrefixedTagName as v, syncProperties as t, addEventListenerToElementRef as r } from "../../utils.js";
-const y = /* @__PURE__ */ s({
+import { defineComponent as d, ref as s, onMounted as m, onUpdated as u, openBlock as f, createBlock as c, resolveDynamicComponent as C, unref as g, withCtx as i, renderSlot as v } from "vue";
+import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as r } from "../../utils.js";
+const y = /* @__PURE__ */ d({
   __name: "SegmentedControlWrapper",
   props: {
     backgroundColor: null,
     theme: { default: "light" },
     value: null
   },
-  emits: ["change", "segmentedControlChange"],
+  emits: ["segmentedControlChange", "update"],
   setup(a, { emit: n }) {
-    const o = a, l = v("p-segmented-control"), e = d();
+    const o = a, l = _("p-segmented-control"), e = s();
     return m(() => {
-      t(e.value, o), r(e.value, "change", n), r(e.value, "segmentedControlChange", n);
+      t(e.value, o), r(e.value, "segmentedControlChange", n), r(e.value, "update", n);
     }), u(() => {
       t(e.value, o);
-    }), (p, _) => (c(), f(g(C(l)), {
+    }), (p, h) => (f(), c(C(g(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: i(() => [
-        h(p.$slots, "default")
+        v(p.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { StepperHorizontalChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
+import type { StepperHorizontalUpdateEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     size?: BreakpointCustomizable<"small" | "medium"> | undefined;
     /**
@@ -9,9 +9,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: StepperHorizontalChangeEvent) => void;
+    stepChange: (value: StepperHorizontalUpdateEvent) => void;
 } & {
-    stepChange: (value: StepperHorizontalChangeEvent) => void;
+    update: (value: StepperHorizontalUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     size?: BreakpointCustomizable<"small" | "medium"> | undefined;
     /**
@@ -22,8 +22,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: string;
     theme: string;
 }>>> & {
-    onChange?: ((value: StepperHorizontalChangeEvent) => any) | undefined;
-    onStepChange?: ((value: StepperHorizontalChangeEvent) => any) | undefined;
+    onUpdate?: ((value: StepperHorizontalUpdateEvent) => any) | undefined;
+    onStepChange?: ((value: StepperHorizontalUpdateEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<StepperHorizontalSize>;
     theme: Theme;

package/lib/components/StepperHorizontalWrapper.vue.js

@@ -1,24 +1,24 @@
-import { defineComponent as l, ref as f, onMounted as m, onUpdated as d, openBlock as c, createBlock as u, resolveDynamicComponent as i, unref as h, withCtx as g, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as r } from "../../utils.js";
+import { defineComponent as l, ref as d, onMounted as f, onUpdated as m, openBlock as u, createBlock as i, resolveDynamicComponent as c, unref as C, withCtx as h, renderSlot as _ } from "vue";
+import { getPrefixedTagName as g, syncProperties as n, addEventListenerToElementRef as p } from "../../utils.js";
 const y = /* @__PURE__ */ l({
   __name: "StepperHorizontalWrapper",
   props: {
     size: { default: "small" },
     theme: { default: "light" }
   },
-  emits: ["change", "stepChange"],
-  setup(a, { emit: t }) {
-    const n = a, p = _("p-stepper-horizontal"), e = f();
-    return m(() => {
-      o(e.value, n), r(e.value, "change", t), r(e.value, "stepChange", t);
-    }), d(() => {
-      o(e.value, n);
-    }), (s, v) => (c(), u(i(h(p)), {
+  emits: ["stepChange", "update"],
+  setup(r, { emit: t }) {
+    const o = r, a = g("p-stepper-horizontal"), e = d();
+    return f(() => {
+      n(e.value, o), p(e.value, "stepChange", t), p(e.value, "update", t);
+    }), m(() => {
+      n(e.value, o);
+    }), (s, v) => (u(), i(c(C(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: g(() => [
-        C(s.$slots, "default")
+      default: h(() => [
+        _(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, SwitchAlignLabel, SwitchChangeEvent, Theme } from '../types';
+import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEvent, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Aligns the label.
@@ -37,9 +37,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     stretch: boolean;
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: SwitchChangeEvent) => void;
+    switchChange: (value: SwitchUpdateEvent) => void;
 } & {
-    switchChange: (value: SwitchChangeEvent) => void;
+    update: (value: SwitchUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Aligns the label.
@@ -78,8 +78,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     stretch: boolean;
     theme: string;
 }>>> & {
-    onChange?: ((value: SwitchChangeEvent) => any) | undefined;
-    onSwitchChange?: ((value: SwitchChangeEvent) => any) | undefined;
+    onUpdate?: ((value: SwitchUpdateEvent) => any) | undefined;
+    onSwitchChange?: ((value: SwitchUpdateEvent) => any) | undefined;
 }, {
     stretch: BreakpointCustomizable<boolean>;
     theme: Theme;

package/lib/components/SwitchWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as d, onMounted as p, onUpdated as c, openBlock as i, createBlock as u, resolveDynamicComponent as h, unref as m, withCtx as g, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
-const B = /* @__PURE__ */ r({
+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 { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as n } from "../../utils.js";
+const B = /* @__PURE__ */ f({
   __name: "SwitchWrapper",
   props: {
     alignLabel: { default: "right" },
@@ -11,19 +11,19 @@ const B = /* @__PURE__ */ r({
     stretch: { default: !1 },
     theme: { default: "light" }
   },
-  emits: ["change", "switchChange"],
+  emits: ["switchChange", "update"],
   setup(l, { emit: t }) {
-    const a = l, s = _("p-switch"), e = d();
+    const a = l, s = _("p-switch"), e = r();
     return p(() => {
-      n(e.value, a), o(e.value, "change", t), o(e.value, "switchChange", t);
-    }), c(() => {
-      n(e.value, a);
-    }), (f, v) => (i(), u(h(m(s)), {
+      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)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: g(() => [
-        C(f.$slots, "default")
+        C(d.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -11,9 +11,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: import("../types").TableHeadCellSort) => void;
-} & {
     sortingChange: (value: import("../types").TableHeadCellSort) => void;
+} & {
+    update: (value: import("../types").TableHeadCellSort) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {
     theme: string;
 }>>> & {
-    onChange?: ((value: import("../types").TableHeadCellSort) => any) | undefined;
+    onUpdate?: ((value: import("../types").TableHeadCellSort) => any) | undefined;
     onSortingChange?: ((value: import("../types").TableHeadCellSort) => any) | undefined;
 }, {
     theme: Theme;

package/lib/components/TableWrapper.vue.js

@@ -1,24 +1,24 @@
-import { defineComponent as l, ref as f, onMounted as c, onUpdated as m, openBlock as d, createBlock as u, resolveDynamicComponent as i, unref as g, withCtx as h, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as a } from "../../utils.js";
+import { defineComponent as l, ref as d, onMounted as f, onUpdated as u, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as g, withCtx as C, renderSlot as _ } from "vue";
+import { getPrefixedTagName as h, syncProperties as o, addEventListenerToElementRef as a } from "../../utils.js";
 const k = /* @__PURE__ */ l({
   __name: "TableWrapper",
   props: {
     caption: null,
     theme: { default: "light" }
   },
-  emits: ["change", "sortingChange"],
-  setup(r, { emit: n }) {
-    const t = r, p = _("p-table"), e = f();
-    return c(() => {
-      o(e.value, t), a(e.value, "change", n), a(e.value, "sortingChange", n);
-    }), m(() => {
-      o(e.value, t);
-    }), (s, v) => (d(), u(i(g(p)), {
+  emits: ["sortingChange", "update"],
+  setup(r, { emit: t }) {
+    const n = r, p = h("p-table"), e = d();
+    return f(() => {
+      o(e.value, n), a(e.value, "sortingChange", t), a(e.value, "update", t);
+    }), u(() => {
+      o(e.value, n);
+    }), (s, v) => (m(), c(i(g(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        C(s.$slots, "default")
+      default: C(() => [
+        _(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { TabsBarGradientColor, TabsBarChangeEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
+import type { TabsBarGradientColor, TabsBarUpdateEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -30,9 +30,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     weight: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: TabsBarChangeEvent) => void;
+    tabChange: (value: TabsBarUpdateEvent) => void;
 } & {
-    tabChange: (value: TabsBarChangeEvent) => void;
+    update: (value: TabsBarUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -64,8 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     weight: string;
 }>>> & {
-    onChange?: ((value: TabsBarChangeEvent) => any) | undefined;
-    onTabChange?: ((value: TabsBarChangeEvent) => any) | undefined;
+    onUpdate?: ((value: TabsBarUpdateEvent) => any) | undefined;
+    onTabChange?: ((value: TabsBarUpdateEvent) => any) | undefined;
 }, {
     weight: TabsBarWeight;
     size: BreakpointCustomizable<TabsBarSize>;

package/lib/components/TabsBarWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as d, ref as p, onMounted as u, onUpdated as f, openBlock as c, createBlock as m, resolveDynamicComponent as i, unref as g, withCtx as h, renderSlot as C } from "vue";
-import { getPrefixedTagName as b, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
-const k = /* @__PURE__ */ d({
+import { defineComponent as p, ref as s, onMounted as u, onUpdated as f, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as g, withCtx as C, renderSlot as b } from "vue";
+import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
+const k = /* @__PURE__ */ p({
   __name: "TabsBarWrapper",
   props: {
     activeTabIndex: null,
@@ -10,19 +10,19 @@ const k = /* @__PURE__ */ d({
     theme: { default: "light" },
     weight: { default: "regular" }
   },
-  emits: ["change", "tabChange"],
+  emits: ["tabChange", "update"],
   setup(r, { emit: t }) {
-    const a = r, l = b("p-tabs-bar"), e = p();
+    const a = r, l = h("p-tabs-bar"), e = s();
     return u(() => {
-      n(e.value, a), o(e.value, "change", t), o(e.value, "tabChange", t);
+      n(e.value, a), o(e.value, "tabChange", t), o(e.value, "update", t);
     }), f(() => {
       n(e.value, a);
-    }), (s, v) => (c(), m(i(g(l)), {
+    }), (d, v) => (m(), c(i(g(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        C(s.$slots, "default")
+      default: C(() => [
+        b(d.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -31,9 +31,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     weight: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: import("../types").TabsBarChangeEvent) => void;
+    tabChange: (value: import("../types").TabsBarUpdateEvent) => void;
 } & {
-    tabChange: (value: import("../types").TabsBarChangeEvent) => void;
+    update: (value: import("../types").TabsBarUpdateEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
@@ -66,8 +66,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
     weight: string;
 }>>> & {
-    onChange?: ((value: import("../types").TabsBarChangeEvent) => any) | undefined;
-    onTabChange?: ((value: import("../types").TabsBarChangeEvent) => any) | undefined;
+    onUpdate?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
+    onTabChange?: ((value: import("../types").TabsBarUpdateEvent) => any) | undefined;
 }, {
     weight: TabsWeight;
     size: BreakpointCustomizable<TabsSize>;

package/lib/components/TabsWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as d, ref as p, onMounted as f, onUpdated as u, openBlock as c, createBlock as m, resolveDynamicComponent as i, unref as g, withCtx as h, renderSlot as C } from "vue";
-import { getPrefixedTagName as b, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
-const k = /* @__PURE__ */ d({
+import { defineComponent as p, ref as s, onMounted as u, onUpdated as f, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as g, withCtx as C, renderSlot as b } from "vue";
+import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as o } from "../../utils.js";
+const k = /* @__PURE__ */ p({
   __name: "TabsWrapper",
   props: {
     activeTabIndex: { default: 0 },
@@ -10,19 +10,19 @@ const k = /* @__PURE__ */ d({
     theme: { default: "light" },
     weight: { default: "regular" }
   },
-  emits: ["change", "tabChange"],
+  emits: ["tabChange", "update"],
   setup(r, { emit: t }) {
-    const a = r, l = b("p-tabs"), e = p();
-    return f(() => {
-      n(e.value, a), o(e.value, "change", t), o(e.value, "tabChange", t);
-    }), u(() => {
+    const a = r, l = h("p-tabs"), e = s();
+    return u(() => {
+      n(e.value, a), o(e.value, "tabChange", t), o(e.value, "update", t);
+    }), f(() => {
       n(e.value, a);
-    }), (s, v) => (c(), m(i(g(l)), {
+    }), (d, v) => (m(), c(i(g(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        C(s.$slots, "default")
+      default: C(() => [
+        b(d.$slots, "default")
       ]),
       _: 3
     }, 512));

package/lib/types.d.ts

@@ -194,17 +194,18 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-haspopup"
 ];
 export declare type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
-declare const BREAKPOINTS: readonly [
+declare const breakpoints: readonly [
     "base",
     "xs",
     "s",
     "m",
     "l",
-    "xl"
+    "xl",
+    "xxl"
 ];
-export declare type BreakpointKey = typeof BREAKPOINTS[number];
+export type Breakpoint = (typeof breakpoints)[number];
 export declare type BreakpointValues<T> = {
-    [key in BreakpointKey]?: T;
+    [key in Breakpoint]?: T;
 } & {
     base: T;
 };
@@ -529,8 +530,8 @@ declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type AccordionSize = typeof ACCORDION_SIZES[number];
-export declare type AccordionChangeEvent = {
+export declare type AccordionSize = (typeof ACCORDION_SIZES)[number];
+export declare type AccordionUpdateEvent = {
     open: boolean;
 };
 export declare type AccordionTag = HeadingTag;
@@ -579,7 +580,7 @@ declare const CAROUSEL_ALIGN_HEADERS: readonly [
 ];
 export declare type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
-export declare type CarouselChangeEvent = {
+export declare type CarouselUpdateEvent = {
     activeIndex: number;
     previousIndex: number;
 };
@@ -937,8 +938,8 @@ declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
 ];
-export declare type PaginationMaxNumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
-export declare type PaginationChangeEvent = {
+export declare type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
+export declare type PaginationUpdateEvent = {
     page: number;
     previousPage: number;
 };
@@ -959,8 +960,8 @@ declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
 ];
-export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_BACKGROUND_COLORS[number];
-export declare type SegmentedControlChangeEvent = {
+export declare type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROUND_COLORS)[number];
+export declare type SegmentedControlUpdateEvent = {
     value: string | number;
 };
 export declare type SegmentedControlItemIcon = LinkButtonIconName;
@@ -986,8 +987,8 @@ declare const STEPPER_HORIZONTAL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
-export declare type StepperHorizontalChangeEvent = {
+export declare type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
+export declare type StepperHorizontalUpdateEvent = {
     activeStepIndex: number;
 };
 declare const STEPPER_ITEM_STATES: readonly [
@@ -997,7 +998,7 @@ declare const STEPPER_ITEM_STATES: readonly [
 ];
 export declare type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
 export declare type SwitchAlignLabel = AlignLabel;
-export declare type SwitchChangeEvent = {
+export declare type SwitchUpdateEvent = {
     checked: boolean;
 };
 export declare type Direction = "asc" | "desc";
@@ -1006,19 +1007,19 @@ export declare type TableHeadCellSort = {
     active?: boolean;
     direction?: Direction;
 };
-export declare type TableChangeEvent = TableHeadCellSort;
+export declare type TableUpdateEvent = TableHeadCellSort;
 declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type TabsBarSize = typeof TABS_BAR_SIZES[number];
+export declare type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
 declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
     "semi-bold",
     "semibold"
 ];
-export declare type TabsBarWeight = typeof TABS_BAR_WEIGHTS[number];
-export declare type TabsBarChangeEvent = {
+export declare type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
+export declare type TabsBarUpdateEvent = {
     activeTabIndex: number;
 };
 /** @deprecated */
@@ -1029,7 +1030,7 @@ export declare type TabsWeight = TabsBarWeight;
 /** @deprecated */
 export declare type TabsGradientColorScheme = TabsBarGradientColorScheme;
 export declare type TabsGradientColor = TabsBarGradientColor;
-export declare type TabsChangeEvent = TabsBarChangeEvent;
+export declare type TabsUpdateEvent = TabsBarUpdateEvent;
 declare const TAG_DISMISSIBLE_COLORS: readonly [
     "background-base",
     "background-surface",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "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.0.0-alpha.5"
+    "@porsche-design-system/components-js": "3.0.0-alpha.6"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"