@porsche-design-system/components-vue 4.0.0-beta.0 → 4.0.0-beta.1

package/CHANGELOG.md

@@ -14,6 +14,127 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-beta.1] - 2026-03-02
+
+### Added
+
+- `SCSS`, `Emotion`, `Vanilla Extract`: bring back PDS v3 import paths for better DX and backward compatibility.
+- `Accordion`:
+  - Slot `summary` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Slot `summary-before` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Slot `summary-after` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Prop `background` with values `canvas | surface | frosted | none (default)`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Prop `align-marker` with values `start | end (default)`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-px` to control the horizontal padding
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-py` to control the vertical padding
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-summary-top` to control the optional sticky top position
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+
+### Changed
+
+- `Accordion`:
+  - Modernize visual appearance ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Use semantic HTML element `<details>` and `<summary>` internally (instead of divs and buttons) for better
+    accessibility and native behavior
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: `value` sync with the underlying native `<input />` or `<textarea />` element
+- `Checkbox`, `Input-*`, `Multi-Select`, `Pin Code`, `Radio Button Group`, `Segmented-Control`, `Select`, `Textarea`:
+  Slot `label-after` is not affected by `disbaled` states anymore
+  ([#4181](https://github.com/porsche-design-system/porsche-design-system/pull/4181))
+- **Vue:** All component events now emit the full `CustomEvent` instead of just the event detail. The event detail must
+  be accessed via `event.detail`. Props and other component data can be accessed directly via `event.target`.
+
+```diff
+<script setup lang="ts">
+import { type AccordionUpdateEventDetail, PAccordion } from '@porsche-design-system/components-vue';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+- const onUpdate = (event: AccordionUpdateEventDetail): void => {
++ const onUpdate = (event: CustomEvent<AccordionUpdateEventDetail>): void => {
+-  isOpen1.value = event.open;
++  isOpen1.value = event.detail.open; // You can also access the value from the component itself via e.target, e.g. e.target.open
+};
+</script>
+
+<template>
+  <PAccordion :open="isOpen" @update="onUpdate">
+    ...
+  </PAccordion>
+</template>
+```
+
+### Removed
+
+- `Accordion`:
+  - Prop `tag` use `heading-tag` (deprecated with v4 now) instead or make use of `slot="summary"` for more flexibility
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    - <p-acccordion heading="Some summary" tag="h3">
+        <p-text>Some details</p-text>
+    </p-accordion>
+    + <p-accordion>
+    +   <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+        <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+
+### Deprecated
+
+- `SCSS`: Import path for npm package:
+
+```diff
+- @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;
++ @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;
+```
+
+- `Emotion`: Import path for npm package:
+
+```diff
+- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
++ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/emotion';
+```
+
+- `Vanilla Extract`: Import path for npm package:
+
+```diff
+- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';
++ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/vanilla-extract';
+```
+
+- `Accordion`:
+  - Prop `heading`, `heading-tag` and `size` in favor of `slot="summary"` for more flexibility
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    - <p-acccordion heading="Some summary" heading-tag="h3" size="small">
+        <p-text>Some details</p-text>
+    </p-accordion>
+    + <p-accordion>
+    +   <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+        <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+  - Slot `heading` in favor of `slot="summary"`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    <p-acccordion>
+    - <span slot="heading">Some summary</span>
+      <p-text>Some details</p-text>
+    </p-accordion>
+    <p-accordion>
+    + <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+      <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+  - CSS Variable `--p-accordion-position-sticky-top`, use `--p-accordion-summary-top` instead
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+
 ## [4.0.0-beta.0] - 2026-02-12
 
 ### Added
@@ -401,6 +522,17 @@ and migration steps.
 - `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
   ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
   ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
+- `Multi Select`: trim whitespace of selected options text
+  ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
+
+## [3.32.1] - 2026-02-24
+
+## [3.32.1-rc.0] - 2026-02-20
+
+### Fixed
+
+- `Input Email`, `Input Password`, `Input Tel`, `Pin Code`: optimize input direction and behavior in RTL mode
+  ([#4209](https://github.com/porsche-design-system/porsche-design-system/pull/4209))
 
 ## [3.32.0] - 2026-02-04
 
@@ -435,12 +567,37 @@ and migration steps.
 
 ### Added
 
+- `Multi Select, Select`:
+  - `selected` slot for custom selection rendering and enabling complex options
+  - `options-status` slot for loading, error and no results states when using custom filtering
+    ([#4111](https://github.com/porsche-design-system/porsche-design-system/pull/4111))
+- `Multi Select, Select`:
+  - `filter` slot to allow custom asynchronous filtering
+  - `toggle` event when opening/closing the dropdown
+    ([#4089](https://github.com/porsche-design-system/porsche-design-system/pull/4089))
+- `Segmented Control`: add `state` and `message` props to enable visual validation states
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023)) `Segmented Control`: add `label`,
+- `Segmented Control`: `label`, `desription`, `hideLabel` and `required` props for better form integration
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023))
+- `Textarea`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4102](https://github.com/porsche-design-system/porsche-design-system/pull/4102))
+- `Tag Dismissible`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4114](https://github.com/porsche-design-system/porsche-design-system/pull/4114))
+- Flags: added `AL, BD, RE` flags ([#4128](https://github.com/porsche-design-system/porsche-design-system/pull/4128))
+- `Input Month`, `Input Week`: ([#4126](https://github.com/porsche-design-system/porsche-design-system/pull/4126))
+- `Input Search`: `maxLength` & `minLength` prop to specify the maximum and minimum number of characters the user can
+  enter ([#4131](https://github.com/porsche-design-system/porsche-design-system/pull/4131))
 - `Textarea`: add CSS Variables for `fieldSizing`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight` to control the
   intrinsic sizing behavior ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
-- `Canvas`: prop `background` to set the background color to `canvas | surface`
 
 ### Fixed
 
+- `Checkbox`: missing deprecation for `CheckboxUpdateEventDetail` event & disabled prop is not mutable
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: disabled prop is not mutable & error when disabled and invalid
+- `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
+  ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
+  ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
 - `Multi Select`: trim whitespace of selected options text
   ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
 

package/cjs/lib/components/AccordionWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),d=e.defineComponent({__name:"AccordionWrapper",props:{compact:{type:Boolean},heading:{},headingTag:{default:"h2"},open:{type:Boolean},size:{default:"small"},sticky:{type:Boolean}},emits:["update"],setup(s,{emit:r}){const p=t.usePrefix("p-accordion"),c=s,o=e.ref(),a=r,n=()=>t.syncProperties(o,c);return e.onMounted(()=>{n(),t.addEventListenerToElementRef(o,"update",a)}),e.onUpdated(n),(i,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:o},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},512))}});module.exports=d;
+"use strict";const e=require("vue"),o=require("../../utils.cjs"),i=e.defineComponent({__name:"AccordionWrapper",props:{alignMarker:{default:"end"},background:{default:"none"},compact:{type:Boolean},heading:{},headingTag:{default:"h2"},open:{type:Boolean},size:{default:"small"},sticky:{type:Boolean}},emits:["update"],setup(r,{emit:s}){const a=o.usePrefix("p-accordion"),p=r,n=e.ref(),c=s,t=()=>o.syncProperties(n,p);return e.onMounted(()=>{t(),o.addEventListenerToElementRef(n,"update",c)}),e.onUpdated(t),(d,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default")]),_:3},512))}});module.exports=i;

package/cjs/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),o=Symbol("pdsPrefix"),i=t=>{const e=a.inject(o);if(e===void 0)throw new Error("It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.");return e?e+"-"+t:t},c=(t,e)=>{const s=t.value;Object.keys(e).forEach(n=>s[n]=e[n])},d=(t,e,s,n)=>{t.value.addEventListener(e,r=>{s(e,r.detail),n?.(r)})},u=()=>{const t=i("p-toast");return{addMessage:e=>{const s=document.body.querySelector(t);customElements.whenDefined(t).then(()=>s.addMessage(e))}}};exports.addEventListenerToElementRef=d;exports.prefixInjectionKey=o;exports.syncProperties=c;exports.usePrefix=i;exports.useToastManager=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),o=Symbol("pdsPrefix"),i=t=>{const e=a.inject(o);if(e===void 0)throw new Error("It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.");return e?e+"-"+t:t},c=(t,e)=>{const s=t.value;Object.keys(e).forEach(n=>s[n]=e[n])},d=(t,e,s,n)=>{t.value.addEventListener(e,r=>{s(e,r),n?.(r)})},u=()=>{const t=i("p-toast");return{addMessage:e=>{const s=document.body.querySelector(t);customElements.whenDefined(t).then(()=>s.addMessage(e))}}};exports.addEventListenerToElementRef=d;exports.prefixInjectionKey=o;exports.syncProperties=c;exports.usePrefix=i;exports.useToastManager=u;

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

@@ -1,27 +1,35 @@
-import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
+import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
 type PAccordionProps = {
     /**
-     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     * Aligns the marker within the summary section.
+     */
+    alignMarker?: AccordionAlignMarker;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: AccordionBackground;
+    /**
+     * Displays the accordion in compact mode.
      */
     compact?: boolean;
     /**
-     * Defines the heading used in accordion.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
-     * Defines if accordion is open.
+     * Controls whether the accordion is open or closed.
      */
     open?: boolean;
     /**
-     * The text size.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     * @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
      */
     sticky?: boolean;
 };
@@ -30,10 +38,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PAccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (value: AccordionUpdateEventDetail) => any;
+    update: (value: CustomEvent<AccordionUpdateEventDetail>) => any;
 }, string, import("vue").PublicProps, Readonly<PAccordionProps> & Readonly<{
-    onUpdate?: ((value: AccordionUpdateEventDetail) => any) | undefined;
+    onUpdate?: ((value: CustomEvent<AccordionUpdateEventDetail>) => any) | undefined;
 }>, {
+    alignMarker: AccordionAlignMarker;
+    background: AccordionBackground;
     headingTag: AccordionHeadingTag;
     size: BreakpointCustomizable<AccordionSize>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,8 +1,10 @@
-import { defineComponent as c, ref as d, onMounted as i, onUpdated as m, createBlock as f, openBlock as l, resolveDynamicComponent as u, unref as y, withCtx as _, renderSlot as C } from "vue";
-import { usePrefix as h, syncProperties as B, addEventListenerToElementRef as g } from "../../utils.mjs";
-const R = /* @__PURE__ */ c({
+import { defineComponent as d, ref as c, onMounted as f, onUpdated as i, createBlock as l, openBlock as m, resolveDynamicComponent as u, unref as y, withCtx as _, renderSlot as g } from "vue";
+import { usePrefix as k, syncProperties as C, addEventListenerToElementRef as h } from "../../utils.mjs";
+const R = /* @__PURE__ */ d({
   __name: "AccordionWrapper",
   props: {
+    alignMarker: { default: "end" },
+    background: { default: "none" },
     compact: { type: Boolean },
     heading: {},
     headingTag: { default: "h2" },
@@ -11,16 +13,16 @@ const R = /* @__PURE__ */ c({
     sticky: { type: Boolean }
   },
   emits: ["update"],
-  setup(t, { emit: n }) {
-    const p = h("p-accordion"), r = t, e = d(), a = n, o = () => B(e, r);
-    return i(() => {
-      o(), g(e, "update", a);
-    }), m(o), (s, k) => (l(), f(u(y(p)), {
+  setup(n, { emit: t }) {
+    const a = k("p-accordion"), r = n, e = c(), p = t, o = () => C(e, r);
+    return f(() => {
+      o(), h(e, "update", p);
+    }), i(o), (s, B) => (m(), l(u(y(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: _(() => [
-        C(s.$slots, "default")
+        g(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -30,9 +30,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    [x: string]: any;
+    dismiss: (value: CustomEvent<void>) => any;
 }, string, import("vue").PublicProps, Readonly<PBannerProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    onDismiss?: ((value: CustomEvent<void>) => any) | undefined;
 }>, {
     heading: string;
     headingTag: BannerHeadingTag;

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

@@ -1,4 +1,4 @@
-import type { CanvasBackground } from '../types';
+import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../types';
 type PCanvasProps = {
     /**
      * Defines the background color of the main section and auto adjust it for the sidebar
@@ -18,9 +18,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    [x: string]: any;
+    sidebarEndDismiss: (value: CustomEvent<void>) => any;
+    sidebarStartUpdate: (value: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => any;
 }, string, import("vue").PublicProps, Readonly<PCanvasProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    onSidebarEndDismiss?: ((value: CustomEvent<void>) => any) | undefined;
+    onSidebarStartUpdate?: ((value: CustomEvent<CanvasSidebarStartUpdateEventDetail>) => any) | undefined;
 }>, {
     background: CanvasBackground;
     sidebarEndOpen: boolean;

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

@@ -70,9 +70,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PCarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (value: CarouselUpdateEventDetail) => any;
+    update: (value: CustomEvent<CarouselUpdateEventDetail>) => any;
 }, string, import("vue").PublicProps, Readonly<PCarouselProps> & Readonly<{
-    onUpdate?: ((value: CarouselUpdateEventDetail) => any) | undefined;
+    onUpdate?: ((value: CustomEvent<CarouselUpdateEventDetail>) => any) | undefined;
 }>, {
     gradient: boolean;
     activeSlideIndex: number;

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

@@ -58,12 +58,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PCheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
     "update:checked": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<PCheckboxProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string;

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, DrilldownAriaAttribute } from '../types';
+import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail } from '../types';
 type PDrilldownProps = {
     /**
      * Defines which drilldown-item to be visualized as opened.
@@ -18,9 +18,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PDrilldownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    [x: string]: any;
+    update: (value: CustomEvent<DrilldownUpdateEventDetail>) => any;
+    dismiss: (value: CustomEvent<void>) => any;
 }, string, import("vue").PublicProps, Readonly<PDrilldownProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    onUpdate?: ((value: CustomEvent<DrilldownUpdateEventDetail>) => any) | undefined;
+    onDismiss?: ((value: CustomEvent<void>) => any) | undefined;
 }>, {
     open: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -34,12 +34,16 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PFlyoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    [x: string]: any;
+    dismiss: (value: CustomEvent<void>) => any;
+    motionHiddenEnd: (value: CustomEvent<TransitionEvent>) => any;
+    motionVisibleEnd: (value: CustomEvent<TransitionEvent>) => any;
 }, string, import("vue").PublicProps, Readonly<PFlyoutProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    onDismiss?: ((value: CustomEvent<void>) => any) | undefined;
+    onMotionHiddenEnd?: ((value: CustomEvent<TransitionEvent>) => any) | undefined;
+    onMotionVisibleEnd?: ((value: CustomEvent<TransitionEvent>) => any) | undefined;
 }>, {
-    open: boolean;
     background: FlyoutBackground;
+    open: boolean;
     backdrop: FlyoutBackdrop;
     disableBackdropClick: boolean;
     footerBehavior: FlyoutFooterBehavior;

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

@@ -38,9 +38,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInlineNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    [x: string]: any;
+    dismiss: (value: CustomEvent<void>) => any;
+    action: (value: CustomEvent<void>) => any;
 }, string, import("vue").PublicProps, Readonly<PInlineNotificationProps> & Readonly<{
-    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    onDismiss?: ((value: CustomEvent<void>) => any) | undefined;
+    onAction?: ((value: CustomEvent<void>) => any) | undefined;
 }>, {
     heading: string;
     headingTag: InlineNotificationHeadingTag;

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

@@ -74,14 +74,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputDateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputDateProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     step: number;

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

@@ -86,14 +86,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputEmailProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputEmailProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     label: string;

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

@@ -74,14 +74,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputMonthProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputMonthProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     step: number;

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

@@ -82,14 +82,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputNumberProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     step: number;

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

@@ -78,14 +78,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputPasswordProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputPasswordProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     toggle: boolean;

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

@@ -82,14 +82,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputSearchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputSearchProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     label: string;

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

@@ -82,14 +82,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputTelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputTelProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     label: string;

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

@@ -82,14 +82,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputTextProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     label: string;

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

@@ -74,14 +74,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PInputTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    blur: (value: Event) => any;
-    change: (value: Event) => any;
-    input: (value: InputEvent) => any;
+    blur: (value: CustomEvent<Event>) => any;
+    change: (value: CustomEvent<Event>) => any;
+    input: (value: CustomEvent<InputEvent>) => any;
     "update:value": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<PInputTimeProps> & Readonly<{
-    onBlur?: ((value: Event) => any) | undefined;
-    onChange?: ((value: Event) => any) | undefined;
-    onInput?: ((value: InputEvent) => any) | undefined;
+    onBlur?: ((value: CustomEvent<Event>) => any) | undefined;
+    onChange?: ((value: CustomEvent<Event>) => any) | undefined;
+    onInput?: ((value: CustomEvent<InputEvent>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     step: number;