@porsche-design-system/components-vue 3.8.0 → 3.9.0-rc.0

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

@@ -1,31 +1,31 @@
-import { defineComponent as p, ref as f, onMounted as l, onUpdated as d, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as y } from "vue";
-import { getPrefixedTagName as C, syncProperties as o, addEventListenerToElementRef as v } from "../../utils.mjs";
-const x = /* @__PURE__ */ p({
+import { defineComponent as f, ref as c, inject as d, onMounted as l, onUpdated as u, watch as h, openBlock as y, createBlock as _, resolveDynamicComponent as C, unref as R, withCtx as k, renderSlot as v } from "vue";
+import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as B, syncProperties as r } from "../../utils.mjs";
+const T = /* @__PURE__ */ f({
   __name: "FlyoutWrapper",
   props: {
     aria: {},
     open: { type: Boolean, default: !1 },
     position: { default: "end" },
-    theme: { default: "light" }
+    theme: {}
   },
   emits: ["dismiss"],
-  setup(n, { emit: r }) {
-    const t = n, s = C("p-flyout"), e = f();
+  setup(m, { emit: p }) {
+    const a = w("p-flyout"), t = m, e = c(), i = p, n = d(x), s = () => r(e, { ...t, theme: t.theme || n.value });
     return l(() => {
-      o(e.value, t), v(e.value, "dismiss", r);
-    }), d(() => {
-      o(e.value, t);
-    }), (a, g) => (i(), m(u(c(s)), {
+      s(), B(e, "dismiss", i);
+    }), u(s), h(n, (o) => {
+      r(e, { theme: t.theme || o });
+    }), (o, P) => (y(), _(C(R(a)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: _(() => [
-        y(a.$slots, "default")
+      default: k(() => [
+        v(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  x as default
+  T as default
 };

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

@@ -1,30 +1,45 @@
-import type { BreakpointCustomizable } from '../types';
+import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
+type PGridItemProps = {
+    /**
+     * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    offset?: BreakpointCustomizable<GridItemOffset>;
+    /**
+     * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<GridItemSize>;
+};
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 2 | 7 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
-        default: number;
-    };
-    offset: {
-        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 2 | 7 | 5 | 1 | 6 | 8 | 9 | 10 | 11>>;
-        default: number;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<3 | 4 | 2 | 7 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>>;
-        default: number;
-    };
-    offset: {
-        type: import("vue").PropType<BreakpointCustomizable<0 | 3 | 4 | 2 | 7 | 5 | 1 | 6 | 8 | 9 | 10 | 11>>;
-        default: number;
-    };
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PGridItemProps>, {
+    offset: number;
+    size: number;
+}>, {}, 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<PGridItemProps>, {
+    offset: number;
+    size: number;
+}>>>, {
     size: BreakpointCustomizable<3 | 4 | 2 | 7 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11>;
     offset: BreakpointCustomizable<0 | 3 | 4 | 2 | 7 | 5 | 1 | 6 | 8 | 9 | 10 | 11>;
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,22 +1,18 @@
-import { defineComponent as a, ref as f, onMounted as s, onUpdated as d, openBlock as m, createBlock as c, resolveDynamicComponent as i, unref as l, withCtx as u, renderSlot as _ } from "vue";
-import { getPrefixedTagName as C, syncProperties as t } from "../../utils.mjs";
-const x = /* @__PURE__ */ a({
+import { defineComponent as s, ref as f, onMounted as a, onUpdated as c, openBlock as d, createBlock as m, resolveDynamicComponent as i, unref as u, withCtx as l, renderSlot as _ } from "vue";
+import { usePrefix as C, syncProperties as y } from "../../utils.mjs";
+const g = /* @__PURE__ */ s({
   __name: "GridItemWrapper",
   props: {
     offset: { default: 0 },
     size: { default: 1 }
   },
-  setup(n) {
-    const o = n, r = C("p-grid-item"), e = f();
-    return s(() => {
-      t(e.value, o);
-    }), d(() => {
-      t(e.value, o);
-    }), (p, g) => (m(), c(i(l(r)), {
+  setup(t) {
+    const n = C("p-grid-item"), r = t, e = f(), o = () => y(e, r);
+    return a(o), c(o), (p, k) => (d(), m(i(u(n)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: u(() => [
+      default: l(() => [
         _(p.$slots, "default")
       ]),
       _: 3
@@ -24,5 +20,5 @@ const x = /* @__PURE__ */ a({
   }
 });
 export {
-  x as default
+  g as default
 };

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

@@ -1,40 +1,37 @@
-import type { BreakpointCustomizable } from '../types';
+import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
+type PGridProps = {
+    /**
+     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
+     */
+    direction?: BreakpointCustomizable<GridDirection>;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    gutter?: BreakpointCustomizable<GridGutter>;
+    /**
+     * Handles wrapping behaviour of elements.
+     */
+    wrap?: BreakpointCustomizable<GridWrap>;
+};
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    wrap: {
-        type: import("vue").PropType<BreakpointCustomizable<"nowrap" | "wrap">>;
-        default: string;
-    };
-    direction: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse">>;
-        default: string;
-    };
-    gutter: {
-        type: import("vue").PropType<BreakpointCustomizable<16 | 24 | 36>>;
-        default: () => {
-            base: number;
-            s: number;
-            m: number;
-        };
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    wrap: {
-        type: import("vue").PropType<BreakpointCustomizable<"nowrap" | "wrap">>;
-        default: string;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PGridProps>, {
+    direction: string;
+    gutter: () => {
+        base: number;
+        s: number;
+        m: number;
     };
-    direction: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse">>;
-        default: string;
+    wrap: 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<PGridProps>, {
+    direction: string;
+    gutter: () => {
+        base: number;
+        s: number;
+        m: number;
     };
-    gutter: {
-        type: import("vue").PropType<BreakpointCustomizable<16 | 24 | 36>>;
-        default: () => {
-            base: number;
-            s: number;
-            m: number;
-        };
-    };
-}>>, {
+    wrap: string;
+}>>>, {
     wrap: BreakpointCustomizable<"nowrap" | "wrap">;
     direction: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse">;
     gutter: BreakpointCustomizable<16 | 24 | 36>;
@@ -42,6 +39,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,23 +1,19 @@
-import { defineComponent as a, ref as s, onMounted as d, onUpdated as f, openBlock as m, createBlock as u, resolveDynamicComponent as c, unref as l, withCtx as i, renderSlot as _ } from "vue";
-import { getPrefixedTagName as C, syncProperties as t } from "../../utils.mjs";
-const v = /* @__PURE__ */ a({
+import { defineComponent as s, ref as a, onMounted as f, onUpdated as d, openBlock as c, createBlock as m, resolveDynamicComponent as u, unref as i, withCtx as l, renderSlot as _ } from "vue";
+import { usePrefix as C, syncProperties as w } from "../../utils.mjs";
+const x = /* @__PURE__ */ s({
   __name: "GridWrapper",
   props: {
     direction: { default: "row" },
     gutter: { default: () => ({ base: 16, s: 24, m: 36 }) },
     wrap: { default: "wrap" }
   },
-  setup(r) {
-    const o = r, n = C("p-grid"), e = s();
-    return d(() => {
-      t(e.value, o);
-    }), f(() => {
-      t(e.value, o);
-    }), (p, g) => (m(), u(c(l(n)), {
+  setup(t) {
+    const r = C("p-grid"), n = t, e = a(), o = () => w(e, n);
+    return f(o), d(o), (p, y) => (c(), m(u(i(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: i(() => [
+      default: l(() => [
         _(p.$slots, "default")
       ]),
       _: 3
@@ -25,5 +21,5 @@ const v = /* @__PURE__ */ a({
   }
 });
 export {
-  v as default
+  x as default
 };

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

@@ -1,55 +1,42 @@
-import type { BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large">>;
-        default: string;
-    };
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    align: {
-        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"inherit" | "primary">;
-        default: string;
-    };
-    ellipsis: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large">>;
-        default: string;
-    };
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    align: {
-        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"inherit" | "primary">;
-        default: string;
-    };
-    ellipsis: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
+import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
+type PHeadingProps = {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadingAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadingColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. 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<HeadingSize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    tag?: HeadingTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PHeadingProps>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: 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<PHeadingProps>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    size: string;
+}>>>, {
     size: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large">;
-    theme: "light" | "dark" | "auto";
     align: "center" | "start" | "end" | "left" | "right";
     color: "inherit" | "primary";
     ellipsis: boolean;
@@ -57,6 +44,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as g } from "vue";
-import { getPrefixedTagName as _, syncProperties as o } from "../../utils.mjs";
-const y = /* @__PURE__ */ p({
+import { defineComponent as f, ref as l, inject as m, onMounted as c, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as g, renderSlot as C } from "vue";
+import { usePrefix as x, themeInjectionKey as k, syncProperties as a } from "../../utils.mjs";
+const R = /* @__PURE__ */ f({
   __name: "HeadingWrapper",
   props: {
     align: { default: "start" },
@@ -8,25 +8,23 @@ const y = /* @__PURE__ */ p({
     ellipsis: { type: Boolean, default: !1 },
     size: { default: "xx-large" },
     tag: {},
-    theme: { default: "light" }
+    theme: {}
   },
-  setup(n) {
-    const t = n, a = _("p-heading"), e = l();
-    return s(() => {
-      o(e.value, t);
-    }), f(() => {
-      o(e.value, t);
-    }), (r, C) => (d(), i(m(u(a)), {
+  setup(s) {
+    const p = x("p-heading"), e = s, t = l(), n = m(k), r = () => a(t, { ...e, theme: e.theme || n.value });
+    return c(r), i(r), d(n, (o) => {
+      a(t, { theme: e.theme || o });
+    }), (o, w) => (u(), h(y(_(p)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: c(() => [
-        g(r.$slots, "default")
+      default: g(() => [
+        C(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  y as default
+  R as default
 };

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

@@ -1,55 +1,42 @@
-import type { HeadlineVariant } from '../types';
+import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
+type PHeadlineProps = {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadlineAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadlineColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Sets a custom HTML tag depending on the usage of the headline component.
+     */
+    tag?: HeadlineTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+    /**
+     * Predefined style of the headline.
+     */
+    variant?: HeadlineVariant;
+};
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    align: {
-        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
-        default: string;
-    };
-    variant: {
-        type: import("vue").PropType<HeadlineVariant>;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"default" | "inherit" | "primary">;
-        default: string;
-    };
-    ellipsis: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    align: {
-        type: import("vue").PropType<"center" | "start" | "end" | "left" | "right">;
-        default: string;
-    };
-    variant: {
-        type: import("vue").PropType<HeadlineVariant>;
-        default: string;
-    };
-    color: {
-        type: import("vue").PropType<"default" | "inherit" | "primary">;
-        default: string;
-    };
-    ellipsis: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
-    theme: "light" | "dark" | "auto";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PHeadlineProps>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    variant: 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<PHeadlineProps>, {
+    align: string;
+    color: string;
+    ellipsis: boolean;
+    variant: string;
+}>>>, {
     align: "center" | "start" | "end" | "left" | "right";
     variant: HeadlineVariant;
     color: "default" | "inherit" | "primary";
@@ -58,6 +45,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,32 +1,30 @@
-import { defineComponent as l, ref as p, onMounted as f, onUpdated as s, openBlock as d, createBlock as i, resolveDynamicComponent as m, unref as u, withCtx as c, renderSlot as _ } from "vue";
-import { getPrefixedTagName as g, syncProperties as o } from "../../utils.mjs";
-const v = /* @__PURE__ */ l({
+import { defineComponent as l, ref as f, inject as m, onMounted as c, onUpdated as i, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as y, unref as _, withCtx as C, renderSlot as g } from "vue";
+import { usePrefix as k, themeInjectionKey as v, syncProperties as a } from "../../utils.mjs";
+const P = /* @__PURE__ */ l({
   __name: "HeadlineWrapper",
   props: {
     align: { default: "start" },
     color: { default: "primary" },
     ellipsis: { type: Boolean, default: !1 },
     tag: {},
-    theme: { default: "light" },
+    theme: {},
     variant: { default: "headline-1" }
   },
-  setup(n) {
-    const t = n, a = g("p-headline"), e = p();
-    return f(() => {
-      o(e.value, t);
-    }), s(() => {
-      o(e.value, t);
-    }), (r, h) => (d(), i(m(u(a)), {
+  setup(p) {
+    const s = k("p-headline"), e = p, t = f(), o = m(v), r = () => a(t, { ...e, theme: e.theme || o.value });
+    return c(r), i(r), d(o, (n) => {
+      a(t, { theme: e.theme || n });
+    }), (n, w) => (u(), h(y(_(s)), {
       ref_key: "pdsComponentRef",
-      ref: e
+      ref: t
     }, {
-      default: c(() => [
-        _(r.$slots, "default")
+      default: C(() => [
+        g(n.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  v as default
+  P as default
 };