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

package/esm/lib/types.d.ts

@@ -466,6 +466,11 @@ declare const THEMES: readonly [
 ];
 export type Theme = (typeof THEMES)[number];
 declare const TILE_ASPECT_RATIOS: readonly [
+    "1/1",
+    "4/3",
+    "3/4",
+    "16/9",
+    "9/16",
     "1:1",
     "4:3",
     "3:4",
@@ -474,8 +479,10 @@ declare const TILE_ASPECT_RATIOS: readonly [
 ];
 export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
 declare const TILE_SIZES: readonly [
-    "default",
-    "inherit"
+    "medium",
+    "large",
+    "inherit",
+    "default"
 ];
 export type TileSize = (typeof TILE_SIZES)[number];
 declare const TILE_WEIGHTS: readonly [
@@ -864,6 +871,8 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
+export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
+export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
 declare const FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -1110,6 +1119,8 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 export type ModalBackdrop = Backdrop;
+export type ModalMotionVisibleEndEventDetail = TransitionEvent;
+export type ModalMotionHiddenEndEventDetail = TransitionEvent;
 declare const MODEL_SIGNATURE_FETCH_PRIORITY: readonly [
     "low",
     "high",
@@ -1298,6 +1309,7 @@ declare const TAG_COLORS: readonly [
     "background-base",
     "background-surface",
     "background-default",
+    "background-frosted",
     "primary",
     "notification-info-soft",
     "notification-warning-soft",

package/esm/public-api.mjs

@@ -16,7 +16,7 @@ import { default as H } from "./lib/components/FieldsetWrapper.vue.mjs";
 import { default as D } from "./lib/components/FieldsetWrapperWrapper.vue.mjs";
 import { default as R } from "./lib/components/FlexWrapper.vue.mjs";
 import { default as G } from "./lib/components/FlexItemWrapper.vue.mjs";
-import { default as O } from "./lib/components/FlyoutWrapper.vue.mjs";
+import { default as z } from "./lib/components/FlyoutWrapper.vue.mjs";
 import { default as A } from "./lib/components/FlyoutMultilevelWrapper.vue.mjs";
 import { default as j } from "./lib/components/FlyoutMultilevelItemWrapper.vue.mjs";
 import { default as J } from "./lib/components/GridWrapper.vue.mjs";
@@ -36,42 +36,43 @@ import { default as Te } from "./lib/components/ModalWrapper.vue.mjs";
 import { default as Se } from "./lib/components/ModelSignatureWrapper.vue.mjs";
 import { default as be } from "./lib/components/MultiSelectWrapper.vue.mjs";
 import { default as ye } from "./lib/components/MultiSelectOptionWrapper.vue.mjs";
-import { default as Me } from "./lib/components/PaginationWrapper.vue.mjs";
-import { default as Be } from "./lib/components/PinCodeWrapper.vue.mjs";
-import { default as Le } from "./lib/components/PopoverWrapper.vue.mjs";
-import { default as He } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
-import { default as De } from "./lib/components/ScrollerWrapper.vue.mjs";
-import { default as Re } from "./lib/components/SegmentedControlWrapper.vue.mjs";
-import { default as Ge } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
-import { default as Oe } from "./lib/components/SelectWrapper.vue.mjs";
-import { default as Ae } from "./lib/components/SelectOptionWrapper.vue.mjs";
-import { default as je } from "./lib/components/SelectWrapperWrapper.vue.mjs";
-import { default as Je } from "./lib/components/SpinnerWrapper.vue.mjs";
-import { default as Qe } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
-import { default as Ve } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
-import { default as Ye } from "./lib/components/SwitchWrapper.vue.mjs";
-import { default as _e } from "./lib/components/TableWrapper.vue.mjs";
-import { default as et } from "./lib/components/TableBodyWrapper.vue.mjs";
-import { default as ot } from "./lib/components/TableCellWrapper.vue.mjs";
-import { default as at } from "./lib/components/TableHeadWrapper.vue.mjs";
-import { default as lt } from "./lib/components/TableHeadCellWrapper.vue.mjs";
-import { default as st } from "./lib/components/TableHeadRowWrapper.vue.mjs";
-import { default as ut } from "./lib/components/TableRowWrapper.vue.mjs";
-import { default as xt } from "./lib/components/TabsWrapper.vue.mjs";
-import { default as it } from "./lib/components/TabsBarWrapper.vue.mjs";
-import { default as Tt } from "./lib/components/TabsItemWrapper.vue.mjs";
-import { default as St } from "./lib/components/TagWrapper.vue.mjs";
-import { default as bt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
-import { default as yt } from "./lib/components/TextWrapper.vue.mjs";
-import { default as Mt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
-import { default as Bt } from "./lib/components/TextListWrapper.vue.mjs";
-import { default as Lt } from "./lib/components/TextListItemWrapper.vue.mjs";
-import { default as Ht } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
-import { default as Dt } from "./lib/components/ToastWrapper.vue.mjs";
-import { default as Rt } from "./lib/components/WordmarkWrapper.vue.mjs";
-import { useToastManager as Gt } from "./utils.mjs";
-import { default as Ot } from "./PorscheDesignSystemProvider.vue.mjs";
-import { createPorscheDesignSystem as At, usePorscheDesignSystemPlugin as Nt } from "./plugin.mjs";
+import { default as Me } from "./lib/components/OptgroupWrapper.vue.mjs";
+import { default as Be } from "./lib/components/PaginationWrapper.vue.mjs";
+import { default as Le } from "./lib/components/PinCodeWrapper.vue.mjs";
+import { default as He } from "./lib/components/PopoverWrapper.vue.mjs";
+import { default as De } from "./lib/components/RadioButtonWrapperWrapper.vue.mjs";
+import { default as Re } from "./lib/components/ScrollerWrapper.vue.mjs";
+import { default as Ge } from "./lib/components/SegmentedControlWrapper.vue.mjs";
+import { default as ze } from "./lib/components/SegmentedControlItemWrapper.vue.mjs";
+import { default as Ae } from "./lib/components/SelectWrapper.vue.mjs";
+import { default as je } from "./lib/components/SelectOptionWrapper.vue.mjs";
+import { default as Je } from "./lib/components/SelectWrapperWrapper.vue.mjs";
+import { default as Qe } from "./lib/components/SpinnerWrapper.vue.mjs";
+import { default as Ve } from "./lib/components/StepperHorizontalWrapper.vue.mjs";
+import { default as Ye } from "./lib/components/StepperHorizontalItemWrapper.vue.mjs";
+import { default as _e } from "./lib/components/SwitchWrapper.vue.mjs";
+import { default as et } from "./lib/components/TableWrapper.vue.mjs";
+import { default as ot } from "./lib/components/TableBodyWrapper.vue.mjs";
+import { default as at } from "./lib/components/TableCellWrapper.vue.mjs";
+import { default as lt } from "./lib/components/TableHeadWrapper.vue.mjs";
+import { default as st } from "./lib/components/TableHeadCellWrapper.vue.mjs";
+import { default as ut } from "./lib/components/TableHeadRowWrapper.vue.mjs";
+import { default as xt } from "./lib/components/TableRowWrapper.vue.mjs";
+import { default as it } from "./lib/components/TabsWrapper.vue.mjs";
+import { default as Tt } from "./lib/components/TabsBarWrapper.vue.mjs";
+import { default as St } from "./lib/components/TabsItemWrapper.vue.mjs";
+import { default as bt } from "./lib/components/TagWrapper.vue.mjs";
+import { default as yt } from "./lib/components/TagDismissibleWrapper.vue.mjs";
+import { default as Mt } from "./lib/components/TextWrapper.vue.mjs";
+import { default as Bt } from "./lib/components/TextFieldWrapperWrapper.vue.mjs";
+import { default as Lt } from "./lib/components/TextListWrapper.vue.mjs";
+import { default as Ht } from "./lib/components/TextListItemWrapper.vue.mjs";
+import { default as Dt } from "./lib/components/TextareaWrapperWrapper.vue.mjs";
+import { default as Rt } from "./lib/components/ToastWrapper.vue.mjs";
+import { default as Gt } from "./lib/components/WordmarkWrapper.vue.mjs";
+import { useToastManager as zt } from "./utils.mjs";
+import { default as At } from "./PorscheDesignSystemProvider.vue.mjs";
+import { createPorscheDesignSystem as jt, usePorscheDesignSystemPlugin as Et } from "./plugin.mjs";
 export {
   a as PAccordion,
   l as PBanner,
@@ -90,7 +91,7 @@ export {
   D as PFieldsetWrapper,
   R as PFlex,
   G as PFlexItem,
-  O as PFlyout,
+  z as PFlyout,
   A as PFlyoutMultilevel,
   j as PFlyoutMultilevelItem,
   J as PGrid,
@@ -110,42 +111,43 @@ export {
   Se as PModelSignature,
   be as PMultiSelect,
   ye as PMultiSelectOption,
-  Me as PPagination,
-  Be as PPinCode,
-  Le as PPopover,
-  He as PRadioButtonWrapper,
-  De as PScroller,
-  Re as PSegmentedControl,
-  Ge as PSegmentedControlItem,
-  Oe as PSelect,
-  Ae as PSelectOption,
-  je as PSelectWrapper,
-  Je as PSpinner,
-  Qe as PStepperHorizontal,
-  Ve as PStepperHorizontalItem,
-  Ye as PSwitch,
-  _e as PTable,
-  et as PTableBody,
-  ot as PTableCell,
-  at as PTableHead,
-  lt as PTableHeadCell,
-  st as PTableHeadRow,
-  ut as PTableRow,
-  xt as PTabs,
-  it as PTabsBar,
-  Tt as PTabsItem,
-  St as PTag,
-  bt as PTagDismissible,
-  yt as PText,
-  Mt as PTextFieldWrapper,
-  Bt as PTextList,
-  Lt as PTextListItem,
-  Ht as PTextareaWrapper,
-  Dt as PToast,
-  Rt as PWordmark,
-  Ot as PorscheDesignSystemProvider,
+  Me as POptgroup,
+  Be as PPagination,
+  Le as PPinCode,
+  He as PPopover,
+  De as PRadioButtonWrapper,
+  Re as PScroller,
+  Ge as PSegmentedControl,
+  ze as PSegmentedControlItem,
+  Ae as PSelect,
+  je as PSelectOption,
+  Je as PSelectWrapper,
+  Qe as PSpinner,
+  Ve as PStepperHorizontal,
+  Ye as PStepperHorizontalItem,
+  _e as PSwitch,
+  et as PTable,
+  ot as PTableBody,
+  at as PTableCell,
+  lt as PTableHead,
+  st as PTableHeadCell,
+  ut as PTableHeadRow,
+  xt as PTableRow,
+  it as PTabs,
+  Tt as PTabsBar,
+  St as PTabsItem,
+  bt as PTag,
+  yt as PTagDismissible,
+  Mt as PText,
+  Bt as PTextFieldWrapper,
+  Lt as PTextList,
+  Ht as PTextListItem,
+  Dt as PTextareaWrapper,
+  Rt as PToast,
+  Gt as PWordmark,
+  At as PorscheDesignSystemProvider,
   o as componentsReady,
-  At as createPorscheDesignSystem,
-  Nt as usePorscheDesignSystemPlugin,
-  Gt as useToastManager
+  jt as createPorscheDesignSystem,
+  Et as usePorscheDesignSystemPlugin,
+  zt as useToastManager
 };

package/esm/utils.d.ts

@@ -1,7 +1,7 @@
 import type { InjectionKey, Ref } from 'vue';
-import type { ToastMessage } from './lib/types';
+import type { Theme, ToastMessage } from './lib/types';
 export declare const prefixInjectionKey: InjectionKey<string>;
-export declare const themeInjectionKey: InjectionKey<Ref<"light" | "dark" | "auto">>;
+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;

package/jsdom-polyfill/index.d.ts

@@ -1,2 +1 @@
-/// <reference types="@porsche-design-system/components-js/jsdom-polyfill" />
 export * from '@porsche-design-system/components-js/jsdom-polyfill';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.16.0-rc.2",
+  "version": "3.17.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.16.0-rc.2"
+    "@porsche-design-system/components-js": "3.17.0-rc.0"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"