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

package/cjs/lib/components/TextareaWrapperWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),o=require("../../utils.cjs"),p=e.defineComponent({__name:"TextareaWrapperWrapper",props:{description:{default:""},hideLabel:{default:!1},label:{default:""},message:{default:""},showCharacterCount:{type:Boolean},showCounter:{type:Boolean,default:!0},state:{default:"none"},theme:{default:"light"}},setup(n){const r=n,a=o.getPrefixedTagName("p-textarea-wrapper"),t=e.ref();return e.onMounted(()=>{o.syncProperties(t.value,r)}),e.onUpdated(()=>{o.syncProperties(t.value,r)}),(s,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:t},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"TextareaWrapperWrapper",props:{description:{default:""},hideLabel:{default:!1},label:{default:""},message:{default:""},showCharacterCount:{type:Boolean},showCounter:{type:Boolean,default:!0},state:{default:"none"},theme:{}},setup(p){const c=t.usePrefix("p-textarea-wrapper"),o=p,n=e.ref(),s=e.inject(t.themeInjectionKey),a=()=>t.syncProperties(n,{...o,theme:o.theme||s.value});return e.onMounted(a),e.onUpdated(a),e.watch(s,r=>{t.syncProperties(n,{theme:o.theme||r})}),(r,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},512))}});module.exports=u;

package/cjs/lib/components/ToastWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("../../utils.cjs"),p=e.defineComponent({__name:"ToastWrapper",props:{theme:{default:"light"}},setup(r){const o=r,s=n.getPrefixedTagName("p-toast"),t=e.ref();return e.onMounted(()=>{n.syncProperties(t.value,o)}),e.onUpdated(()=>{n.syncProperties(t.value,o)}),(c,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:t},null,512))}});module.exports=p;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),u=e.defineComponent({__name:"ToastWrapper",props:{theme:{}},setup(p){const m=t.usePrefix("p-toast"),n=p,o=e.ref(),s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(o,{...n,theme:n.theme||s.value});return e.onMounted(r),e.onUpdated(r),e.watch(s,c=>{t.syncProperties(o,{theme:n.theme||c})}),(c,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m)),{ref_key:"pdsComponentRef",ref:o},null,512))}});module.exports=u;

package/cjs/lib/components/WordmarkWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),a=e.defineComponent({__name:"WordmarkWrapper",props:{aria:{},href:{},size:{default:"small"},target:{default:"_self"},theme:{default:"light"}},setup(o){const n=o,s=t.getPrefixedTagName("p-wordmark"),r=e.ref();return e.onMounted(()=>{t.syncProperties(r.value,n)}),e.onUpdated(()=>{t.syncProperties(r.value,n)}),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(s)),{ref_key:"pdsComponentRef",ref:r},null,512))}});module.exports=a;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"WordmarkWrapper",props:{aria:{},href:{},size:{default:"small"},target:{default:"_self"},theme:{}},setup(p){const a=t.usePrefix("p-wordmark"),n=p,o=e.ref(),r=e.inject(t.themeInjectionKey),s=()=>t.syncProperties(o,{...n,theme:n.theme||r.value});return e.onMounted(s),e.onUpdated(s),e.watch(r,c=>{t.syncProperties(o,{theme:n.theme||c})}),(c,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(a)),{ref_key:"pdsComponentRef",ref:o},null,512))}});module.exports=m;

package/cjs/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),n=Symbol("pdsPrefix"),r=t=>{const e=i.inject(n);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},a=(t,e)=>{Object.keys(e).forEach(s=>t[s]=e[s])},c=(t,e,s)=>{t.addEventListener(e,o=>{s(e,o.detail)})},d=()=>{const t=r("p-toast");return{addMessage:e=>{const s=document.body.querySelector(t);customElements.whenDefined(t).then(()=>s.addMessage(e))}}};exports.addEventListenerToElementRef=c;exports.getPrefixedTagName=r;exports.prefixInjectionKey=n;exports.syncProperties=a;exports.useToastManager=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),o=Symbol("pdsPrefix"),c=Symbol("pdsTheme"),r=t=>{const e=i.inject(o);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},a=(t,e)=>{const n=t.value;Object.keys(e).forEach(s=>n[s]=e[s])},d=(t,e,n)=>{t.value.addEventListener(e,s=>{n(e,s.detail)})},u=()=>{const t=r("p-toast");return{addMessage:e=>{const n=document.body.querySelector(t);customElements.whenDefined(t).then(()=>n.addMessage(e))}}};exports.addEventListenerToElementRef=d;exports.prefixInjectionKey=o;exports.syncProperties=a;exports.themeInjectionKey=c;exports.usePrefix=r;exports.useToastManager=u;

package/esm/PorscheDesignSystemProvider.vue.d.ts

@@ -1,25 +1,39 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    prefix: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    cdn: {
-        type: import("vue").PropType<"auto" | "cn">;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    prefix: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    cdn: {
-        type: import("vue").PropType<"auto" | "cn">;
-    };
-}>>, {
+import type { Theme } from './lib/types';
+type Props = {
+    prefix?: string;
+    cdn?: 'auto' | 'cn';
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     prefix: 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<Props>, {
+    prefix: string;
+    theme: string;
+}>>>, {
+    prefix: string;
+    theme: "light" | "dark" | "auto";
 }, {}>, {
     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/PorscheDesignSystemProvider.vue.mjs

@@ -1,17 +1,20 @@
-import { defineComponent as t, provide as n, renderSlot as p } from "vue";
-import { load as i } from "@porsche-design-system/components-js";
-import { prefixInjectionKey as s } from "./utils.mjs";
-const c = /* @__PURE__ */ t({
+import { defineComponent as i, ref as p, onUpdated as f, provide as o, renderSlot as m } from "vue";
+import { load as s } from "@porsche-design-system/components-js";
+import { prefixInjectionKey as d, themeInjectionKey as a } from "./utils.mjs";
+const _ = /* @__PURE__ */ i({
   __name: "PorscheDesignSystemProvider",
   props: {
     prefix: { default: "" },
-    cdn: {}
+    cdn: {},
+    theme: { default: "light" }
   },
   setup(r) {
-    const e = r;
-    return i(e), n(s, e.prefix), (o, f) => p(o.$slots, "default");
+    const t = p("light"), e = r;
+    return f(() => {
+      t.value = e.theme;
+    }), s(e), o(d, e.prefix), o(a, t), (n, c) => m(n.$slots, "default");
   }
 });
 export {
-  c as default
+  _ as default
 };

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

@@ -1,62 +1,66 @@
-import type { AccordionUpdateEvent, BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    compact: {
-        type: import("vue").PropType<boolean>;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+type PAccordionProps = {
+    /**
+     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     */
+    compact?: boolean;
+    /**
+     * Defines the heading used in accordion.
+     */
+    heading?: string;
+    /**
+     * Defines if accordion is open.
+     */
+    open?: boolean;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<AccordionSize>;
+    /**
+     * Sets a headline tag, so it fits correctly within the outline of the page.
+     */
+    tag?: AccordionTag;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PAccordionProps>, {
+    size: string;
+    tag: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     accordionChange: (value: AccordionUpdateEvent) => void;
     update: (value: AccordionUpdateEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    heading: {
-        type: import("vue").PropType<string>;
-    };
-    compact: {
-        type: import("vue").PropType<boolean>;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<BreakpointCustomizable<"small" | "medium">>;
-        default: string;
-    };
-    tag: {
-        type: import("vue").PropType<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-        default: string;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-}>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PAccordionProps>, {
+    size: string;
+    tag: string;
+}>>> & {
     onAccordionChange?: ((value: AccordionUpdateEvent) => any) | undefined;
     onUpdate?: ((value: AccordionUpdateEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<"small" | "medium">;
     tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    theme: "light" | "dark" | "auto";
 }, {}>, {
     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/AccordionWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as l, onMounted as s, onUpdated as f, openBlock as m, createBlock as u, resolveDynamicComponent as i, unref as g, withCtx as h, renderSlot as C } from "vue";
-import { getPrefixedTagName as _, syncProperties as n, addEventListenerToElementRef as a } from "../../utils.mjs";
-const k = /* @__PURE__ */ c({
+import { defineComponent as i, ref as f, inject as l, onMounted as h, onUpdated as u, watch as C, openBlock as y, createBlock as _, resolveDynamicComponent as g, unref as B, withCtx as R, renderSlot as k } from "vue";
+import { usePrefix as v, themeInjectionKey as w, addEventListenerToElementRef as c, syncProperties as p } from "../../utils.mjs";
+const E = /* @__PURE__ */ i({
   __name: "AccordionWrapper",
   props: {
     compact: { type: Boolean },
@@ -8,26 +8,26 @@ const k = /* @__PURE__ */ c({
     open: { type: Boolean },
     size: { default: "small" },
     tag: { default: "h2" },
-    theme: { default: "light" }
+    theme: {}
   },
   emits: ["accordionChange", "update"],
-  setup(r, { emit: o }) {
-    const t = r, p = _("p-accordion"), e = l();
-    return s(() => {
-      n(e.value, t), a(e.value, "accordionChange", o), a(e.value, "update", o);
-    }), f(() => {
-      n(e.value, t);
-    }), (d, v) => (m(), u(i(g(p)), {
+  setup(s, { emit: m }) {
+    const d = v("p-accordion"), t = s, e = f(), n = m, a = l(w), r = () => p(e, { ...t, theme: t.theme || a.value });
+    return h(() => {
+      r(), c(e, "accordionChange", n), c(e, "update", n);
+    }), u(r), C(a, (o) => {
+      p(e, { theme: t.theme || o });
+    }), (o, x) => (y(), _(g(B(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: h(() => [
-        C(d.$slots, "default")
+      default: R(() => [
+        k(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  k as default
+  E as default
 };

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

@@ -1,73 +1,56 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    heading: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-        required: true;
-        default: boolean;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
-    state: {
-        type: import("vue").PropType<"warning" | "error" | "info" | "neutral">;
-        default: string;
-    };
-    width: {
-        type: import("vue").PropType<"extended" | "basic" | "fluid">;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+import type { BannerState, Theme, BannerWidth } from '../types';
+type PBannerProps = {
+    /**
+     * Description of the banner.
+     */
+    description?: string;
+    /**
+     * If false, the banner will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string;
+    /**
+     * If true, the banner is open.
+     */
+    open: boolean;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the banner.
+     */
+    state?: BannerState;
+    /**
+     * Adapts the banner color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    width?: BannerWidth;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PBannerProps>, {
+    description: string;
+    dismissButton: boolean;
+    heading: string;
+    open: boolean;
+    state: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     [x: string]: (...args: unknown[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    heading: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-        required: true;
-        default: boolean;
-    };
-    theme: {
-        type: import("vue").PropType<"light" | "dark" | "auto">;
-        default: string;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    dismissButton: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    persistent: {
-        type: import("vue").PropType<boolean>;
-    };
-    state: {
-        type: import("vue").PropType<"warning" | "error" | "info" | "neutral">;
-        default: string;
-    };
-    width: {
-        type: import("vue").PropType<"extended" | "basic" | "fluid">;
-    };
-}>>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PBannerProps>, {
+    description: string;
+    dismissButton: boolean;
+    heading: string;
+    open: boolean;
+    state: string;
+}>>>, {
     heading: string;
     open: boolean;
-    theme: "light" | "dark" | "auto";
     description: string;
     dismissButton: boolean;
     state: "warning" | "error" | "info" | "neutral";
@@ -75,6 +58,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/BannerWrapper.vue.mjs

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

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

@@ -1,26 +1,43 @@
-import type { BreakpointCustomizable } from '../types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    direction: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column">>;
-        default: () => {
-            base: string;
-            xs: string;
-        };
+import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
+type PButtonGroupProps = {
+    /**
+     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
+     */
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PButtonGroupProps>, {
+    direction: () => {
+        base: string;
+        xs: string;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: import("vue").PropType<BreakpointCustomizable<"row" | "column">>;
-        default: () => {
-            base: string;
-            xs: 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<PButtonGroupProps>, {
+    direction: () => {
+        base: string;
+        xs: string;
     };
-}>>, {
+}>>>, {
     direction: BreakpointCustomizable<"row" | "column">;
 }, {}>, {
     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/ButtonGroupWrapper.vue.mjs

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