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

package/README.md

@@ -22,8 +22,8 @@ yarn add @porsche-design-system/components-vue
 
 ### Usage
 
-After adding the `@porsche-design-system/components-vue` package to your project, you've to extend your standard
-vue setup by the `PorscheDesignSystemProvider` by adding it to your `App.vue` file.
+After adding the `@porsche-design-system/components-vue` package to your project, you've to extend your standard vue
+setup by the `PorscheDesignSystemProvider` by adding it to your `App.vue` file.
 
 ```tsx
 // App.vue
@@ -52,6 +52,29 @@ vue setup by the `PorscheDesignSystemProvider` by adding it to your `App.vue` fi
 </template>
 ```
 
+### Plugin
+
+You can also use the `PorscheDesignSystemPlugin` to extend your vue setup.
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { createPorscheDesignSystem } from '@porsche-design-system/components-vue';
+
+const app = createApp(App);
+app.use(createPorscheDesignSystem({ prefix: 'my-prefix' }));
+app.mount('#app');
+```
+
+### Composable
+
+The `usePorscheDesignSystemPlugin` composable provides access to the `PorscheDesignSystemPlugin` context.
+
+```ts
+import { usePorscheDesignSystemPlugin } from '@porsche-design-system/components-vue';
+
+const { isPorscheDesignSystemLoaded, componentsReady } = usePorscheDesignSystemPlugin();
+```
 
 ## Methodology
 

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

@@ -30,6 +30,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     accordionChange: (value: AccordionChangeEvent) => void;
+} & {
+    change: (value: AccordionChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -60,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tag: string;
     theme: string;
 }>>> & {
+    onChange?: ((value: AccordionChangeEvent) => any) | undefined;
     onAccordionChange?: ((value: AccordionChangeEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<AccordionSize>;

package/lib/components/AccordionWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as c, ref as l, onMounted as d, onUpdated as s, openBlock as f, createBlock as m, resolveDynamicComponent as i, unref as u, withCtx as g, renderSlot as h } from "vue";
-import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as _ } from "../../utils.js";
-const k = /* @__PURE__ */ c({
+import { defineComponent as l, ref as d, onMounted as s, onUpdated as f, openBlock as m, createBlock as i, resolveDynamicComponent as u, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as t, addEventListenerToElementRef as a } from "../../utils.js";
+const k = /* @__PURE__ */ l({
   __name: "AccordionWrapper",
   props: {
     compact: { type: Boolean },
@@ -10,19 +10,19 @@ const k = /* @__PURE__ */ c({
     tag: { default: "h2" },
     theme: { default: "light" }
   },
-  emits: ["accordionChange"],
-  setup(t, { emit: a }) {
-    const o = t, r = C("p-accordion"), e = l();
-    return d(() => {
-      n(e.value, o), _(e.value, "accordionChange", a);
-    }), s(() => {
-      n(e.value, o);
-    }), (p, v) => (f(), m(i(u(r)), {
+  emits: ["accordionChange", "change"],
+  setup(r, { emit: o }) {
+    const n = r, p = _("p-accordion"), e = d();
+    return s(() => {
+      t(e.value, n), a(e.value, "accordionChange", o), a(e.value, "change", o);
+    }), f(() => {
+      t(e.value, n);
+    }), (c, v) => (m(), i(u(g(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: g(() => [
-        h(p.$slots, "default")
+      default: h(() => [
+        C(c.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,5 +1,16 @@
 import type { BannerState, Theme, BannerWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Description of the banner.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
     persistent?: boolean | undefined;
     /**
      * State of the banner.
@@ -12,8 +23,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines the width of the banner corresponding to the `content-wrapper` dimensions
      */
-    width?: "basic" | "extended" | "fluid" | undefined;
+    width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
+    description: string;
+    heading: string;
     persistent: boolean;
     state: string;
     theme: string;
@@ -21,6 +34,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (value?: void | undefined) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Description of the banner.
+     */
+    description?: string | undefined;
+    /**
+     * Heading of the banner.
+     */
+    heading?: string | undefined;
+    /**
+     * Defines if the banner can be closed/removed by the user.
+     */
     persistent?: boolean | undefined;
     /**
      * State of the banner.
@@ -33,8 +57,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines the width of the banner corresponding to the `content-wrapper` dimensions
      */
-    width?: "basic" | "extended" | "fluid" | undefined;
+    width?: "extended" | "basic" | "fluid" | undefined;
 }>, {
+    description: string;
+    heading: string;
     persistent: boolean;
     state: string;
     theme: string;
@@ -42,7 +68,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     onDismiss?: ((value?: void | undefined) => any) | undefined;
 }, {
+    heading: string;
     theme: Theme;
+    description: string;
     persistent: boolean;
     state: BannerState;
     width: BannerWidth;

package/lib/components/BannerWrapper.vue.js

@@ -1,26 +1,28 @@
-import { defineComponent as p, ref as d, onMounted as f, onUpdated as l, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as C } from "vue";
-import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as v } from "../../utils.js";
-const B = /* @__PURE__ */ p({
+import { defineComponent as d, ref as p, onMounted as f, onUpdated as i, openBlock as l, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as h } from "vue";
+import { getPrefixedTagName as C, syncProperties as n, addEventListenerToElementRef as g } from "../../utils.js";
+const B = /* @__PURE__ */ d({
   __name: "BannerWrapper",
   props: {
+    description: { default: "" },
+    heading: { default: "" },
     persistent: { type: Boolean, default: !1 },
     state: { default: "info" },
     theme: { default: "light" },
     width: { default: "extended" }
   },
   emits: ["dismiss"],
-  setup(o, { emit: r }) {
-    const t = o, s = h("p-banner"), e = d();
+  setup(o, { emit: a }) {
+    const t = o, r = C("p-banner"), e = p();
     return f(() => {
-      n(e.value, t), v(e.value, "dismiss", r);
-    }), l(() => {
+      n(e.value, t), g(e.value, "dismiss", a);
+    }), i(() => {
       n(e.value, t);
-    }), (a, g) => (i(), m(u(c(s)), {
+    }), (s, v) => (l(), m(u(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: _(() => [
-        C(a.$slots, "default")
+        h(s.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Display button in active state.
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -35,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -52,7 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
+    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -89,7 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -101,7 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -118,7 +118,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
+    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -132,16 +132,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     weight: string;
 }>>>, {
-    weight: TextWeight;
+    weight: ButtonPureWeight;
     stretch: BreakpointCustomizable<boolean>;
-    disabled: boolean;
-    size: BreakpointCustomizable<TextSize>;
+    size: BreakpointCustomizable<ButtonPureSize>;
     theme: Theme;
-    type: ButtonType;
+    type: ButtonPureType;
     active: boolean;
-    alignLabel: BreakpointCustomizable<AlignLabel>;
+    alignLabel: BreakpointCustomizable<ButtonPureAlignLabel>;
+    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonIconName;
+    icon: ButtonPureIcon;
     loading: boolean;
 }>, {
     default: (_: {}) => any;

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

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
+import type { SelectedAriaAttributes, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Add ARIA attributes.
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -60,7 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: LinkButtonIconName | undefined;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -90,11 +90,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     type: string;
     variant: string;
 }>>>, {
-    disabled: boolean;
     theme: Theme;
     type: ButtonType;
+    disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonIconName;
+    icon: ButtonIcon;
     loading: boolean;
     variant: ButtonVariant;
 }>, {

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

@@ -1,11 +1,15 @@
-import type { BreakpointCustomizable, CarouselChangeEvent, Theme } from '../types';
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: "center" | "left" | undefined;
     /**
      * Defines the description used in the carousel.
      */
     description?: string | undefined;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean> | undefined;
     /**
@@ -16,6 +20,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
@@ -29,24 +37,37 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     theme?: "light" | "dark" | undefined;
     /**
-     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     * Defines the outer spacings between the carousel and the left and right screen sides.
+     */
+    width?: "extended" | "basic" | undefined;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean | undefined;
 }>, {
-    disablePagination: boolean;
+    alignHeader: string;
     intl: () => {};
+    pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
     theme: string;
+    width: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     carouselChange: (value: CarouselChangeEvent) => void;
+} & {
+    change: (value: CarouselChangeEvent) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: "center" | "left" | undefined;
     /**
      * Defines the description used in the carousel.
      */
     description?: string | undefined;
     /**
-     * If true, the carousel will not show pagination bullets at the bottom.
+     * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean> | undefined;
     /**
@@ -57,6 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
     intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    /**
+     * If false, the carousel will not show pagination bullets at the bottom.
+     */
+    pagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
@@ -70,21 +95,31 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     theme?: "light" | "dark" | undefined;
     /**
-     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     * Defines the outer spacings between the carousel and the left and right screen sides.
+     */
+    width?: "extended" | "basic" | undefined;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean | undefined;
 }>, {
-    disablePagination: boolean;
+    alignHeader: string;
     intl: () => {};
+    pagination: boolean;
     rewind: boolean;
     slidesPerPage: number;
     theme: string;
+    width: string;
 }>>> & {
+    onChange?: ((value: CarouselChangeEvent) => any) | undefined;
     onCarouselChange?: ((value: CarouselChangeEvent) => any) | undefined;
 }, {
     theme: Theme;
-    disablePagination: BreakpointCustomizable<boolean>;
+    width: CarouselWidth;
+    alignHeader: CarouselAlignHeader;
     intl: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
+    pagination: BreakpointCustomizable<boolean>;
     rewind: boolean;
     slidesPerPage: BreakpointCustomizable<number>;
 }>, {

package/lib/components/CarouselWrapper.vue.js

@@ -1,35 +1,38 @@
-import { defineComponent as s, ref as p, onMounted as d, onUpdated as u, openBlock as f, createBlock as i, resolveDynamicComponent as c, unref as m, withCtx as C, renderSlot as g } from "vue";
-import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as _ } from "../../utils.js";
-const w = /* @__PURE__ */ s({
+import { defineComponent as d, ref as s, onMounted as p, onUpdated as i, openBlock as f, createBlock as c, resolveDynamicComponent as m, unref as g, withCtx as h, renderSlot as C } from "vue";
+import { getPrefixedTagName as _, syncProperties as a, addEventListenerToElementRef as o } from "../../utils.js";
+const P = /* @__PURE__ */ d({
   __name: "CarouselWrapper",
   props: {
+    alignHeader: { default: "left" },
     description: null,
-    disablePagination: { default: !1 },
+    disablePagination: null,
     heading: null,
     intl: { default: () => ({}) },
+    pagination: { default: !0 },
     rewind: { type: Boolean, default: !0 },
     slidesPerPage: { default: 1 },
     theme: { default: "light" },
+    width: { default: "basic" },
     wrapContent: { type: Boolean }
   },
-  emits: ["carouselChange"],
-  setup(o, { emit: a }) {
-    const t = o, r = h("p-carousel"), e = p();
-    return d(() => {
-      n(e.value, t), _(e.value, "carouselChange", a);
-    }), u(() => {
-      n(e.value, t);
-    }), (l, v) => (f(), i(c(m(r)), {
+  emits: ["carouselChange", "change"],
+  setup(l, { emit: t }) {
+    const n = l, r = _("p-carousel"), e = s();
+    return p(() => {
+      a(e.value, n), o(e.value, "carouselChange", t), o(e.value, "change", t);
+    }), i(() => {
+      a(e.value, n);
+    }), (u, v) => (f(), c(m(g(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        g(l.$slots, "default")
+      default: h(() => [
+        C(u.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  w as default
+  P as default
 };

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState, Theme } from '../types';
+import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     label: string;
     theme: Theme;
-    state: FormState;
+    state: CheckboxWrapperState;
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
 }>, {

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

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: "basic" | "extended" | "fluid" | "narrow" | "full" | undefined;
+    width?: "extended" | "basic" | "fluid" | "narrow" | "full" | undefined;
 }>, {
     backgroundColor: string;
     theme: string;
@@ -33,7 +33,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: "basic" | "extended" | "fluid" | "narrow" | "full" | undefined;
+    width?: "extended" | "basic" | "fluid" | "narrow" | "full" | undefined;
 }>, {
     backgroundColor: string;
     theme: string;

package/lib/components/ContentWrapperWrapper.vue.js

@@ -1,19 +1,19 @@
-import { defineComponent as a, ref as s, onMounted as f, onUpdated as d, openBlock as c, createBlock as l, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as C } from "vue";
+import { defineComponent as a, ref as d, onMounted as f, onUpdated as s, openBlock as l, createBlock as c, resolveDynamicComponent as m, unref as u, withCtx as i, renderSlot as C } from "vue";
 import { getPrefixedTagName as _, syncProperties as o } from "../../utils.js";
 const w = /* @__PURE__ */ a({
   __name: "ContentWrapperWrapper",
   props: {
     backgroundColor: { default: "transparent" },
     theme: { default: "light" },
-    width: { default: "basic" }
+    width: { default: "extended" }
   },
   setup(n) {
-    const t = n, r = _("p-content-wrapper"), e = s();
+    const t = n, r = _("p-content-wrapper"), e = d();
     return f(() => {
       o(e.value, t);
-    }), d(() => {
+    }), s(() => {
       o(e.value, t);
-    }), (p, g) => (c(), l(m(u(r)), {
+    }), (p, g) => (l(), c(m(u(r)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "medium" | "large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the display component.
      */
@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "medium" | "large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the display component.
      */

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

@@ -1,11 +1,15 @@
-import type { DividerColor, BreakpointCustomizable, DividerOrientation, Theme } from '../types';
+import type { DividerColor, BreakpointCustomizable, DividerDirection, Theme } from '../types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Defines color depending on theme.
      */
-    color?: "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
+    color?: "contrast-low" | "contrast-medium" | "contrast-high" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
     /**
-     * Defines orientation.
+     * Defines direction.
+     */
+    direction?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
      */
     orientation?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
     /**
@@ -14,15 +18,19 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
-    orientation: string;
+    direction: 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<{
     /**
      * Defines color depending on theme.
      */
-    color?: "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
+    color?: "contrast-low" | "contrast-medium" | "contrast-high" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
+    /**
+     * Defines direction.
+     */
+    direction?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
     /**
-     * Defines orientation.
+     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
      */
     orientation?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
     /**
@@ -31,12 +39,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     theme?: "light" | "dark" | undefined;
 }>, {
     color: string;
-    orientation: string;
+    direction: string;
     theme: string;
 }>>>, {
     theme: Theme;
+    direction: BreakpointCustomizable<DividerDirection>;
     color: DividerColor;
-    orientation: BreakpointCustomizable<DividerOrientation>;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;