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

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

@@ -57,21 +57,10 @@ type PTextFieldWrapperProps = {
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextFieldWrapperProps>, {
-    actionLoading: boolean;
-    description: string;
-    hideLabel: boolean;
-    label: string;
-    message: string;
-    showCounter: boolean;
-    showPasswordToggle: boolean;
-    state: string;
-    submitButton: boolean;
-    unit: string;
-    unitPosition: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextFieldWrapperProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextFieldWrapperProps>, {
     actionLoading: boolean;
     description: string;
     hideLabel: boolean;
@@ -83,10 +72,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     submitButton: boolean;
     unit: string;
     unitPosition: string;
-}>>>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     label: string;
     description: string;
-    state: "none" | "success" | "error";
+    state: TextFieldWrapperState;
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     actionLoading: boolean;
@@ -94,10 +83,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showPasswordToggle: boolean;
     submitButton: boolean;
     unit: string;
-    unitPosition: "prefix" | "suffix";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    unitPosition: TextFieldWrapperUnitPosition;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -1,6 +1,8 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -17,15 +17,17 @@ type PTextListProps = {
      */
     type?: TextListType;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextListProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextListProps>, {
     type: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextListProps>, {
     type: string;
 }>>>, {
-    type: "unordered" | "numbered" | "alphabetically";
-}, {}>, {
-    default?(_: {}): any;
-}>;
+    type: TextListType;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -29,7 +29,10 @@ type PTextProps = {
      */
     weight?: TextWeight;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextProps>, {
     align: string;
     color: string;
     ellipsis: boolean;
@@ -44,15 +47,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tag: string;
     weight: string;
 }>>>, {
-    weight: "regular" | "semi-bold" | "bold" | "thin" | "semibold";
-    size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small">;
-    tag: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend";
-    align: "center" | "start" | "end" | "left" | "right";
-    color: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral";
+    weight: TextWeight;
+    size: BreakpointCustomizable<TextSize>;
+    tag: TextTag;
+    align: TextAlign;
+    color: TextColor;
     ellipsis: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -33,7 +33,10 @@ type PTextareaWrapperProps = {
      */
     theme?: Theme;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextareaWrapperProps>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<PTextareaWrapperProps>, {
     description: string;
     hideLabel: boolean;
     label: string;
@@ -50,13 +53,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     description: string;
-    state: "none" | "success" | "error";
+    state: TextareaWrapperState;
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     showCounter: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {

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

@@ -28,8 +28,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: string;
     target: string;
 }>>>, {
-    size: "inherit" | "small";
-    target: string;
+    size: WordmarkSize;
+    target: WordmarkTarget;
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/esm/lib/components/index.d.ts

@@ -35,6 +35,7 @@ export { default as PModal } from './ModalWrapper.vue';
 export { default as PModelSignature } from './ModelSignatureWrapper.vue';
 export { default as PMultiSelect } from './MultiSelectWrapper.vue';
 export { default as PMultiSelectOption } from './MultiSelectOptionWrapper.vue';
+export { default as POptgroup } from './OptgroupWrapper.vue';
 export { default as PPagination } from './PaginationWrapper.vue';
 export { default as PPinCode } from './PinCodeWrapper.vue';
 export { default as PPopover } from './PopoverWrapper.vue';

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 [
@@ -599,9 +606,10 @@ export type ButtonType = typeof BUTTON_TYPES[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
+    "ghost",
     "tertiary"
 ];
-export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
@@ -864,6 +872,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 +1120,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 +1310,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",
+  "version": "3.17.0-rc.1",
   "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"
+    "@porsche-design-system/components-js": "3.17.0-rc.1"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"