@porsche-design-system/components-vue 2.20.0 → 3.0.0-alpha.1

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, TagDismissibleColor } from '../types';
+import type { SelectedAriaAttributes, TagDismissibleColor, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -7,13 +7,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Background color variations
      */
-    color?: "background-surface" | "background-default" | undefined;
+    color?: "background-surface" | "background-default" | "background-base" | undefined;
     /**
      * The label text.
      */
     label?: string | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
+    theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -22,14 +27,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Background color variations
      */
-    color?: "background-surface" | "background-default" | undefined;
+    color?: "background-surface" | "background-default" | "background-base" | undefined;
     /**
      * The label text.
      */
     label?: string | undefined;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
+    theme: string;
 }>>>, {
+    theme: Theme;
     color: TagDismissibleColor;
 }>, {
     default: (_: {}) => any;

package/lib/components/TagDismissibleWrapper.vue.js

@@ -1,29 +1,30 @@
-import { defineComponent as s, ref as p, onMounted as l, onUpdated as f, openBlock as c, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as d, renderSlot as _ } from "vue";
-import { getPrefixedTagName as g, syncProperties as n } from "../../utils.js";
-const v = /* @__PURE__ */ s({
+import { defineComponent as s, ref as l, onMounted as p, onUpdated as f, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as d, renderSlot as g } from "vue";
+import { getPrefixedTagName as _, syncProperties as t } from "../../utils.js";
+const k = /* @__PURE__ */ s({
   __name: "TagDismissibleWrapper",
   props: {
     aria: null,
     color: { default: "background-surface" },
-    label: null
+    label: null,
+    theme: { default: "light" }
   },
-  setup(t) {
-    const o = t, r = g("p-tag-dismissible"), e = p();
-    return l(() => {
-      n(e.value, o);
+  setup(n) {
+    const o = n, r = _("p-tag-dismissible"), e = l();
+    return p(() => {
+      t(e.value, o);
     }), f(() => {
-      n(e.value, o);
-    }), (a, C) => (c(), i(m(u(r)), {
+      t(e.value, o);
+    }), (a, C) => (i(), m(u(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: d(() => [
-        _(a.$slots, "default")
+        g(a.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  v as default
+  k as default
 };

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

@@ -1,13 +1,13 @@
-import type { TagColor, IconName, Theme } from '../types';
+import type { TagColor, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Background color variations depending on theme property.
      */
-    color?: "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | "background-surface" | "background-default" | undefined;
+    color?: "primary" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "background-surface" | "background-default" | "background-base" | undefined;
     /**
      * The icon shown.
      */
-    icon?: IconName | undefined;
+    icon?: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -23,11 +23,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Background color variations depending on theme property.
      */
-    color?: "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | "background-surface" | "background-default" | undefined;
+    color?: "primary" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "background-surface" | "background-default" | "background-base" | undefined;
     /**
      * The icon shown.
      */
-    icon?: IconName | undefined;
+    icon?: "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * A URL path to a custom icon.
      */

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState, TextFieldWrapperUnitPosition } from '../types';
+import type { BreakpointCustomizable, FormState, Theme, TextFieldWrapperUnitPosition } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
@@ -32,6 +32,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
     /**
      * The unit text.
      */
@@ -48,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     message: string;
     showCharacterCount: boolean;
     state: string;
+    theme: string;
     unit: string;
     unitPosition: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -85,6 +90,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
     /**
      * The unit text.
      */
@@ -101,12 +110,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     message: string;
     showCharacterCount: boolean;
     state: string;
+    theme: string;
     unit: string;
     unitPosition: string;
 }>>> & {
     onAction?: ((value?: void | undefined) => any) | undefined;
 }, {
     label: string;
+    theme: Theme;
     state: FormState;
     hideLabel: BreakpointCustomizable<boolean>;
     description: string;

package/lib/components/TextFieldWrapperWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as f, onMounted as d, onUpdated as s, openBlock as i, createBlock as u, resolveDynamicComponent as c, unref as m, withCtx as C, renderSlot as _ } from "vue";
-import { getPrefixedTagName as x, syncProperties as o, addEventListenerToElementRef as g } from "../../utils.js";
-const w = /* @__PURE__ */ p({
+import { defineComponent as f, ref as p, onMounted as d, onUpdated as i, openBlock as s, createBlock as u, resolveDynamicComponent as c, unref as m, withCtx as C, renderSlot as h } from "vue";
+import { getPrefixedTagName as _, syncProperties as o, addEventListenerToElementRef as g } from "../../utils.js";
+const w = /* @__PURE__ */ f({
   __name: "TextFieldWrapperWrapper",
   props: {
     actionIcon: null,
@@ -11,22 +11,23 @@ const w = /* @__PURE__ */ p({
     message: { default: "" },
     showCharacterCount: { type: Boolean, default: !0 },
     state: { default: "none" },
+    theme: { default: "light" },
     unit: { default: "" },
     unitPosition: { default: "prefix" }
   },
   emits: ["action"],
   setup(n, { emit: a }) {
-    const t = n, r = x("p-text-field-wrapper"), e = f();
+    const t = n, l = _("p-text-field-wrapper"), e = p();
     return d(() => {
       o(e.value, t), g(e.value, "action", a);
-    }), s(() => {
+    }), i(() => {
       o(e.value, t);
-    }), (l, h) => (i(), u(c(m(r)), {
+    }), (r, x) => (s(), u(c(m(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: C(() => [
-        _(l.$slots, "default")
+        h(r.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    color?: "default" | "primary" | "brand" | "contrast-low" | "neutral-contrast-low" | "contrast-medium" | "neutral-contrast-medium" | "contrast-high" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "inherit" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
@@ -15,9 +15,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
-     * Sets a custom HTML tag depending of the usage of the text component.
+     * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend" | undefined;
     /**
@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The weight of the text.
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     align: string;
     color: string;
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "brand" | "neutral-contrast-high" | "neutral-contrast-medium" | "neutral-contrast-low" | "notification-success" | "notification-warning" | "notification-error" | "notification-neutral" | undefined;
+    color?: "default" | "primary" | "brand" | "contrast-low" | "neutral-contrast-low" | "contrast-medium" | "neutral-contrast-medium" | "contrast-high" | "neutral-contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "notification-neutral" | "inherit" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
@@ -52,9 +52,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
-     * Sets a custom HTML tag depending of the usage of the text component.
+     * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend" | undefined;
     /**
@@ -64,7 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The weight of the text.
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     align: string;
     color: string;
@@ -78,8 +78,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: BreakpointCustomizable<TextSize>;
     tag: TextTag;
     theme: Theme;
-    color: TextColor;
     align: TextAlign;
+    color: TextColor;
     ellipsis: boolean;
 }>, {
     default: (_: {}) => any;

package/lib/components/TextWrapper.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as r, ref as f, onMounted as p, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as i, withCtx as c, renderSlot as g } from "vue";
+import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as i, withCtx as c, renderSlot as g } from "vue";
 import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
-const y = /* @__PURE__ */ r({
+const y = /* @__PURE__ */ l({
   __name: "TextWrapper",
   props: {
     align: { default: "left" },
-    color: { default: "default" },
+    color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     size: { default: "small" },
     tag: { default: "p" },
@@ -12,17 +12,17 @@ const y = /* @__PURE__ */ r({
     weight: { default: "regular" }
   },
   setup(a) {
-    const t = a, l = _("p-text"), e = f();
-    return p(() => {
+    const t = a, n = _("p-text"), e = p();
+    return f(() => {
       o(e.value, t);
     }), s(() => {
       o(e.value, t);
-    }), (n, C) => (d(), u(m(i(l)), {
+    }), (r, C) => (d(), u(m(i(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: c(() => [
-        g(n.$slots, "default")
+        g(r.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * The description text.
@@ -24,6 +24,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     description: string;
     hideLabel: boolean;
@@ -31,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     message: string;
     showCharacterCount: boolean;
     state: string;
+    theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * The description text.
@@ -56,6 +61,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The validation state.
      */
     state?: "success" | "none" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
 }>, {
     description: string;
     hideLabel: boolean;
@@ -63,8 +72,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     message: string;
     showCharacterCount: boolean;
     state: string;
+    theme: string;
 }>>>, {
     label: string;
+    theme: Theme;
     state: FormState;
     hideLabel: BreakpointCustomizable<boolean>;
     description: string;

package/lib/components/TextareaWrapperWrapper.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as p, ref as s, onMounted as f, onUpdated as l, openBlock as d, createBlock as u, resolveDynamicComponent as c, unref as m, withCtx as i, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
+import { defineComponent as p, ref as l, onMounted as f, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as h, syncProperties as a } from "../../utils.js";
 const w = /* @__PURE__ */ p({
   __name: "TextareaWrapperWrapper",
   props: {
@@ -8,15 +8,16 @@ const w = /* @__PURE__ */ p({
     label: { default: "" },
     message: { default: "" },
     showCharacterCount: { type: Boolean, default: !0 },
-    state: { default: "none" }
+    state: { default: "none" },
+    theme: { default: "light" }
   },
-  setup(a) {
-    const t = a, r = _("p-textarea-wrapper"), e = s();
+  setup(o) {
+    const t = o, r = h("p-textarea-wrapper"), e = l();
     return f(() => {
-      o(e.value, t);
-    }), l(() => {
-      o(e.value, t);
-    }), (n, h) => (d(), u(c(m(r)), {
+      a(e.value, t);
+    }), s(() => {
+      a(e.value, t);
+    }), (n, _) => (d(), u(m(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

package/lib/components/index.d.ts

@@ -6,12 +6,14 @@ export { default as PButtonPure } from './ButtonPureWrapper.vue';
 export { default as PCarousel } from './CarouselWrapper.vue';
 export { default as PCheckboxWrapper } from './CheckboxWrapperWrapper.vue';
 export { default as PContentWrapper } from './ContentWrapperWrapper.vue';
+export { default as PDisplay } from './DisplayWrapper.vue';
 export { default as PDivider } from './DividerWrapper.vue';
 export { default as PFieldsetWrapper } from './FieldsetWrapperWrapper.vue';
 export { default as PFlex } from './FlexWrapper.vue';
 export { default as PFlexItem } from './FlexItemWrapper.vue';
 export { default as PGrid } from './GridWrapper.vue';
 export { default as PGridItem } from './GridItemWrapper.vue';
+export { default as PHeading } from './HeadingWrapper.vue';
 export { default as PHeadline } from './HeadlineWrapper.vue';
 export { default as PIcon } from './IconWrapper.vue';
 export { default as PInlineNotification } from './InlineNotificationWrapper.vue';