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

package/esm/public-api.mjs

@@ -1,182 +1,187 @@
-import { componentsReady as r } from "@porsche-design-system/components-js";
+import { componentsReady as o } from "@porsche-design-system/components-js";
 import { default as a } from "./lib/components/AccordionWrapper.vue.mjs";
 import { default as l } from "./lib/components/BannerWrapper.vue.mjs";
-import { default as s } from "./lib/components/ButtonWrapper.vue.mjs";
-import { default as d } from "./lib/components/ButtonGroupWrapper.vue.mjs";
+import { default as u } from "./lib/components/ButtonWrapper.vue.mjs";
+import { default as s } from "./lib/components/ButtonGroupWrapper.vue.mjs";
 import { default as x } from "./lib/components/ButtonPureWrapper.vue.mjs";
 import { default as n } from "./lib/components/ButtonTileWrapper.vue.mjs";
 import { default as T } from "./lib/components/CanvasWrapper.vue.mjs";
-import { default as S } from "./lib/components/CarouselWrapper.vue.mjs";
+import { default as I } from "./lib/components/CarouselWrapper.vue.mjs";
 import { default as g } from "./lib/components/CheckboxWrapper.vue.mjs";
 import { default as C } from "./lib/components/CheckboxWrapperWrapper.vue.mjs";
 import { default as D } from "./lib/components/ContentWrapperWrapper.vue.mjs";
-import { default as L } from "./lib/components/CrestWrapper.vue.mjs";
+import { default as y } from "./lib/components/CrestWrapper.vue.mjs";
 import { default as B } from "./lib/components/DisplayWrapper.vue.mjs";
 import { default as w } from "./lib/components/DividerWrapper.vue.mjs";
 import { default as H } from "./lib/components/DrilldownWrapper.vue.mjs";
-import { default as v } from "./lib/components/DrilldownItemWrapper.vue.mjs";
-import { default as G } from "./lib/components/DrilldownLinkWrapper.vue.mjs";
-import { default as z } from "./lib/components/FieldsetWrapper.vue.mjs";
-import { default as j } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
-import { default as A } from "./lib/components/FlagWrapper.vue.mjs";
-import { default as K } from "./lib/components/FlexWrapper.vue.mjs";
+import { default as R } from "./lib/components/DrilldownItemWrapper.vue.mjs";
+import { default as v } from "./lib/components/DrilldownLinkWrapper.vue.mjs";
+import { default as j } from "./lib/components/FieldsetWrapper.vue.mjs";
+import { default as K } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
+import { default as q } from "./lib/components/FlagWrapper.vue.mjs";
+import { default as E } from "./lib/components/FlexWrapper.vue.mjs";
 import { default as J } from "./lib/components/FlexItemWrapper.vue.mjs";
 import { default as V } from "./lib/components/FlyoutWrapper.vue.mjs";
 import { default as Y } from "./lib/components/GridWrapper.vue.mjs";
 import { default as _ } from "./lib/components/GridItemWrapper.vue.mjs";
 import { default as ee } from "./lib/components/HeadingWrapper.vue.mjs";
-import { default as re } from "./lib/components/HeadlineWrapper.vue.mjs";
+import { default as oe } from "./lib/components/HeadlineWrapper.vue.mjs";
 import { default as ae } from "./lib/components/IconWrapper.vue.mjs";
 import { default as le } from "./lib/components/InlineNotificationWrapper.vue.mjs";
-import { default as se } from "./lib/components/InputDateWrapper.vue.mjs";
-import { default as de } from "./lib/components/InputEmailWrapper.vue.mjs";
+import { default as ue } from "./lib/components/InputDateWrapper.vue.mjs";
+import { default as se } from "./lib/components/InputEmailWrapper.vue.mjs";
 import { default as xe } from "./lib/components/InputNumberWrapper.vue.mjs";
 import { default as ne } from "./lib/components/InputPasswordWrapper.vue.mjs";
 import { default as Te } from "./lib/components/InputSearchWrapper.vue.mjs";
-import { default as Se } from "./lib/components/InputTelWrapper.vue.mjs";
+import { default as Ie } from "./lib/components/InputTelWrapper.vue.mjs";
 import { default as ge } from "./lib/components/InputTextWrapper.vue.mjs";
 import { default as Ce } from "./lib/components/InputTimeWrapper.vue.mjs";
 import { default as De } from "./lib/components/InputUrlWrapper.vue.mjs";
-import { default as Le } from "./lib/components/LinkWrapper.vue.mjs";
+import { default as ye } from "./lib/components/LinkWrapper.vue.mjs";
 import { default as Be } from "./lib/components/LinkPureWrapper.vue.mjs";
 import { default as we } from "./lib/components/LinkSocialWrapper.vue.mjs";
 import { default as He } from "./lib/components/LinkTileWrapper.vue.mjs";
-import { default as ve } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/LinkTileProductWrapper.vue.mjs";
-import { default as ze } from "./lib/components/MarqueWrapper.vue.mjs";
-import { default as je } from "./lib/components/ModalWrapper.vue.mjs";
-import { default as Ae } from "./lib/components/ModelSignatureWrapper.vue.mjs";
-import { default as Ke } from "./lib/components/MultiSelectWrapper.vue.mjs";
+import { default as Re } from "./lib/components/LinkTileModelSignatureWrapper.vue.mjs";
+import { default as ve } from "./lib/components/LinkTileProductWrapper.vue.mjs";
+import { default as je } from "./lib/components/MarqueWrapper.vue.mjs";
+import { default as Ke } from "./lib/components/ModalWrapper.vue.mjs";
+import { default as qe } from "./lib/components/ModelSignatureWrapper.vue.mjs";
+import { default as Ee } from "./lib/components/MultiSelectWrapper.vue.mjs";
 import { default as Je } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
 import { default as Ve } from "./lib/components/OptgroupWrapper.vue.mjs";
 import { default as Ye } from "./lib/components/PaginationWrapper.vue.mjs";
 import { default as _e } from "./lib/components/PinCodeWrapper.vue.mjs";
 import { default as et } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as rt } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as at } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as lt } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as st } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as dt } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as xt } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as nt } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/SheetWrapper.vue.mjs";
-import { default as St } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as gt } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as Ct } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as Dt } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as Lt } from "./lib/components/TableWrapper.vue.mjs";
-import { default as Bt } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as wt } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as Ht } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as vt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as Gt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as zt } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as jt } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as At } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as Kt } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as Jt } from "./lib/components/TagWrapper.vue.mjs";
-import { default as Vt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as Yt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as _t } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as er } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as rr } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as ar } from "./lib/components/TextareaWrapper.vue.mjs";
-import { default as lr } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as sr } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as dr } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { themeInjectionKey as xr, useToastManager as Pr } from "./utils.mjs";
-import { default as ir } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as cr, usePorscheDesignSystemPlugin as Sr } from "./plugin.mjs";
+import { default as ot } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as at } from "./lib/components/RadioGroupWrapper.vue.mjs";
+import { default as lt } from "./lib/components/RadioGroupOptionWrapper.vue.mjs";
+import { default as ut } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as st } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as xt } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as nt } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as It } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as gt } from "./lib/components/SheetWrapper.vue.mjs";
+import { default as Ct } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as yt } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as wt } from "./lib/components/TableWrapper.vue.mjs";
+import { default as Ht } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as vt } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as jt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as Kt } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as qt } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as Et } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as Jt } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as Vt } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as Yt } from "./lib/components/TagWrapper.vue.mjs";
+import { default as _t } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as eo } from "./lib/components/TextWrapper.vue.mjs";
+import { default as oo } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as ao } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as lo } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as uo } from "./lib/components/TextareaWrapper.vue.mjs";
+import { default as mo } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Po } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as io } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { prefixInjectionKey as co, themeInjectionKey as Io, useToastManager as So } from "./utils.mjs";
+import { default as bo } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as ko, usePorscheDesignSystemPlugin as Do } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
-  s as PButton,
-  d as PButtonGroup,
+  u as PButton,
+  s as PButtonGroup,
   x as PButtonPure,
   n as PButtonTile,
   T as PCanvas,
-  S as PCarousel,
+  I as PCarousel,
   g as PCheckbox,
   C as PCheckboxWrapper,
   D as PContentWrapper,
-  L as PCrest,
+  y as PCrest,
   B as PDisplay,
   w as PDivider,
   H as PDrilldown,
-  v as PDrilldownItem,
-  G as PDrilldownLink,
-  z as PFieldset,
-  j as PFieldsetWrapper,
-  A as PFlag,
-  K as PFlex,
+  R as PDrilldownItem,
+  v as PDrilldownLink,
+  j as PFieldset,
+  K as PFieldsetWrapper,
+  q as PFlag,
+  E as PFlex,
   J as PFlexItem,
   V as PFlyout,
   Y as PGrid,
   _ as PGridItem,
   ee as PHeading,
-  re as PHeadline,
+  oe as PHeadline,
   ae as PIcon,
   le as PInlineNotification,
-  se as PInputDate,
-  de as PInputEmail,
+  ue as PInputDate,
+  se as PInputEmail,
   xe as PInputNumber,
   ne as PInputPassword,
   Te as PInputSearch,
-  Se as PInputTel,
+  Ie as PInputTel,
   ge as PInputText,
   Ce as PInputTime,
   De as PInputUrl,
-  Le as PLink,
+  ye as PLink,
   Be as PLinkPure,
   we as PLinkSocial,
   He as PLinkTile,
-  ve as PLinkTileModelSignature,
-  Ge as PLinkTileProduct,
-  ze as PMarque,
-  je as PModal,
-  Ae as PModelSignature,
-  Ke as PMultiSelect,
+  Re as PLinkTileModelSignature,
+  ve as PLinkTileProduct,
+  je as PMarque,
+  Ke as PModal,
+  qe as PModelSignature,
+  Ee as PMultiSelect,
   Je as PMultiSelectOption,
   Ve as POptgroup,
   Ye as PPagination,
   _e as PPinCode,
   et as PPopover,
-  rt as PRadioButtonWrapper,
-  at as PScroller,
-  lt as PSegmentedControl,
-  st as PSegmentedControlItem,
-  dt as PSelect,
-  xt as PSelectOption,
-  nt as PSelectWrapper,
-  Tt as PSheet,
-  St as PSpinner,
-  gt as PStepperHorizontal,
-  Ct as PStepperHorizontalItem,
-  Dt as PSwitch,
-  Lt as PTable,
-  Bt as PTableBody,
-  wt as PTableCell,
-  Ht as PTableHead,
-  vt as PTableHeadCell,
-  Gt as PTableHeadRow,
-  zt as PTableRow,
-  jt as PTabs,
-  At as PTabsBar,
-  Kt as PTabsItem,
-  Jt as PTag,
-  Vt as PTagDismissible,
-  Yt as PText,
-  _t as PTextFieldWrapper,
-  er as PTextList,
-  rr as PTextListItem,
-  ar as PTextarea,
-  lr as PTextareaWrapper,
-  sr as PToast,
-  dr as PWordmark,
-  ir as PorscheDesignSystemProvider,
-  r as componentsReady,
-  cr as createPorscheDesignSystem,
-  xr as themeInjectionKey,
-  Sr as usePorscheDesignSystemPlugin,
-  Pr as useToastManager
+  ot as PRadioButtonWrapper,
+  at as PRadioGroup,
+  lt as PRadioGroupOption,
+  ut as PScroller,
+  st as PSegmentedControl,
+  xt as PSegmentedControlItem,
+  nt as PSelect,
+  Tt as PSelectOption,
+  It as PSelectWrapper,
+  gt as PSheet,
+  Ct as PSpinner,
+  Dt as PStepperHorizontal,
+  yt as PStepperHorizontalItem,
+  Bt as PSwitch,
+  wt as PTable,
+  Ht as PTableBody,
+  Rt as PTableCell,
+  vt as PTableHead,
+  jt as PTableHeadCell,
+  Kt as PTableHeadRow,
+  qt as PTableRow,
+  Et as PTabs,
+  Jt as PTabsBar,
+  Vt as PTabsItem,
+  Yt as PTag,
+  _t as PTagDismissible,
+  eo as PText,
+  oo as PTextFieldWrapper,
+  ao as PTextList,
+  lo as PTextListItem,
+  uo as PTextarea,
+  mo as PTextareaWrapper,
+  Po as PToast,
+  io as PWordmark,
+  bo as PorscheDesignSystemProvider,
+  o as componentsReady,
+  ko as createPorscheDesignSystem,
+  co as prefixInjectionKey,
+  Io as themeInjectionKey,
+  Do as usePorscheDesignSystemPlugin,
+  So as useToastManager
 };

package/esm/utils.d.ts

@@ -4,7 +4,7 @@ export declare const prefixInjectionKey: InjectionKey<string>;
 export declare const themeInjectionKey: InjectionKey<Ref<Theme>>;
 export declare const usePrefix: (tagName: string) => string;
 export declare const syncProperties: <T extends HTMLElement>(elementRef: Ref<T | undefined>, props: Partial<T>) => void;
-export declare const addEventListenerToElementRef: <T extends HTMLElement, E extends string>(elementRef: Ref<T | undefined>, eventName: E, emit: (eventName: E, detail: any) => void) => void;
+export declare const addEventListenerToElementRef: <T extends HTMLElement, E extends string>(elementRef: Ref<T | undefined>, eventName: E, emit: (eventName: E, detail: any) => void, cb?: (event: CustomEvent) => void) => void;
 export declare const useToastManager: () => {
     addMessage: (message: ToastMessage) => void;
 };

package/esm/utils.mjs

@@ -1,18 +1,18 @@
-import { inject as o } from "vue";
-const r = Symbol("pdsPrefix"), a = Symbol("pdsTheme"), i = (t) => {
-  const e = o(r);
+import { inject as r } from "vue";
+const i = Symbol("pdsPrefix"), d = Symbol("pdsTheme"), c = (t) => {
+  const e = r(i);
   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;
-}, d = (t, e) => {
+}, m = (t, e) => {
   const s = t.value;
   Object.keys(e).forEach((n) => s[n] = e[n]);
-}, m = (t, e, s) => {
-  t.value.addEventListener(e, (n) => {
-    s(e, n.detail);
+}, u = (t, e, s, n) => {
+  t.value.addEventListener(e, (o) => {
+    s(e, o.detail), n?.(o);
   });
-}, u = () => {
-  const t = i("p-toast");
+}, y = () => {
+  const t = c("p-toast");
   return {
     addMessage: (e) => {
       const s = document.body.querySelector(t);
@@ -21,10 +21,10 @@ const r = Symbol("pdsPrefix"), a = Symbol("pdsTheme"), i = (t) => {
   };
 };
 export {
-  m as addEventListenerToElementRef,
-  r as prefixInjectionKey,
-  d as syncProperties,
-  a as themeInjectionKey,
-  i as usePrefix,
-  u as useToastManager
+  u as addEventListenerToElementRef,
+  i as prefixInjectionKey,
+  m as syncProperties,
+  d as themeInjectionKey,
+  c as usePrefix,
+  y as useToastManager
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.30.0-rc.0",
+  "version": "3.30.0-rc.2",
   "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.30.0-rc.0"
+    "@porsche-design-system/components-js": "3.30.0-rc.2"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 33.0.0 <35.0.0",

package/tailwindcss/index.css

@@ -3,7 +3,7 @@
 @theme {
   /* Color */
   --color-primary: #010205;
-  --color-base: #FFF;
+  --color-canvas: #FFF;
   --color-surface: #EEEFF2;
   --color-shading: rgba(1,2,5,.67);
   --color-frosted: hsl(240 4% 85%/35%);
@@ -25,7 +25,7 @@
   --color-skeleton: #f7f7f7;
 
   --color-primary-light: #010205;
-  --color-base-light: #FFF;
+  --color-canvas-light: #FFF;
   --color-surface-light: #EEEFF2;
   --color-shading-light: rgba(1,2,5,.67);
   --color-frosted-light: hsl(240 4% 85%/35%);
@@ -47,7 +47,7 @@
   --color-skeleton-light: #f7f7f7;
 
   --color-primary-dark: #FBFCFF;
-  --color-base-dark: #0E0E12;
+  --color-canvas-dark: #0E0E12;
   --color-surface-dark: #212225;
   --color-shading-dark: rgba(38,38,41,.67);
   --color-frosted-dark: hsl(240 3% 26%/35%);
@@ -167,7 +167,7 @@
 @layer theme {
   .light {
     --color-primary: #010205;
-    --color-base: #FFF;
+    --color-canvas: #FFF;
     --color-surface: #EEEFF2;
     --color-shading: rgba(1,2,5,.67);
     --color-frosted: hsl(240 4% 85%/35%);
@@ -191,7 +191,7 @@
 
   .dark {
     --color-primary: #FBFCFF;
-    --color-base: #0E0E12;
+    --color-canvas: #0E0E12;
     --color-surface: #212225;
     --color-shading: rgba(38,38,41,.67);
     --color-frosted: hsl(240 3% 26%/35%);
@@ -216,7 +216,7 @@
   .auto {
     @media (prefers-color-scheme: dark) {
       --color-primary: #FBFCFF;
-      --color-base: #0E0E12;
+      --color-canvas: #0E0E12;
       --color-surface: #212225;
       --color-shading: rgba(38,38,41,.67);
       --color-frosted: hsl(240 3% 26%/35%);