@porsche-design-system/components-vue 3.31.0 → 3.32.0-rc.1

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

@@ -1,5 +1,5 @@
-import { defineComponent as f, ref as c, inject as m, onMounted as i, onUpdated as h, watch as y, createBlock as b, openBlock as v, resolveDynamicComponent as _, unref as B, withCtx as C, renderSlot as g } from "vue";
-import { usePrefix as w, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
+import { defineComponent as f, ref as c, inject as m, onMounted as i, onUpdated as h, watch as g, createBlock as y, openBlock as b, resolveDynamicComponent as v, unref as _, withCtx as B, renderSlot as C } from "vue";
+import { usePrefix as w, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as a } from "../../utils.mjs";
 const P = /* @__PURE__ */ f({
   __name: "MultiSelectWrapper",
   props: {
@@ -17,21 +17,21 @@ const P = /* @__PURE__ */ f({
     theme: {},
     value: { default: () => [] }
   },
-  emits: ["update:value", "blur", "change", "update"],
+  emits: ["update:value", "blur", "change", "toggle", "update"],
   setup(u, { emit: d }) {
-    const p = w("p-multi-select"), a = u, e = c(), o = d, l = m(R), r = () => s(e, { ...a, theme: a.theme || l.value });
+    const p = w("p-multi-select"), n = u, e = c(), t = d, l = m(R), r = () => s(e, { ...n, theme: n.theme || l.value });
     return i(() => {
-      r(), n(e, "blur", o), n(e, "change", o, (t) => {
-        o("update:value", t.target.value);
-      }), n(e, "update", o);
-    }), h(r), y(l, (t) => {
-      s(e, { theme: a.theme || t });
-    }), (t, j) => (v(), b(_(B(p)), {
+      r(), a(e, "blur", t), a(e, "change", t, (o) => {
+        t("update:value", o.target.value);
+      }), a(e, "toggle", t), a(e, "update", t);
+    }), h(r), g(l, (o) => {
+      s(e, { theme: n.theme || o });
+    }), (o, j) => (b(), y(v(_(p)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        g(t.$slots, "default")
+      default: B(() => [
+        C(o.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -16,9 +16,19 @@ type PRadioGroupOptionProps = {
      */
     value?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<PRadioGroupOptionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PRadioGroupOptionProps> & Readonly<{}>, {
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<PRadioGroupOptionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PRadioGroupOptionProps> & Readonly<{}>, {
     disabled: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as a, onMounted as s, onUpdated as l, createBlock as f, openBlock as c, resolveDynamicComponent as d, unref as i } from "vue";
-import { usePrefix as u, syncProperties as m } from "../../utils.mjs";
-const b = /* @__PURE__ */ r({
+import { defineComponent as a, ref as s, onMounted as l, onUpdated as f, createBlock as d, openBlock as c, resolveDynamicComponent as i, unref as u, withCtx as m, renderSlot as _ } from "vue";
+import { usePrefix as y, syncProperties as C } from "../../utils.mjs";
+const k = /* @__PURE__ */ a({
   __name: "RadioGroupOptionWrapper",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -9,13 +9,18 @@ const b = /* @__PURE__ */ r({
     value: {}
   },
   setup(n) {
-    const p = u("p-radio-group-option"), t = n, e = a(), o = () => m(e, t);
-    return s(o), l(o), (_, y) => (c(), f(d(i(p)), {
+    const t = y("p-radio-group-option"), p = n, e = s(), o = () => C(e, p);
+    return l(o), f(o), (r, B) => (c(), d(i(u(t)), {
       ref_key: "pdsComponentRef",
       ref: e
-    }, null, 512));
+    }, {
+      default: m(() => [
+        _(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
   }
 });
 export {
-  b as default
+  k as default
 };

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

@@ -1,4 +1,4 @@
-import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlState, Theme } from '../types';
 type PSegmentedControlProps = {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
@@ -12,6 +12,10 @@ type PSegmentedControlProps = {
      * A boolean value that, if present, renders the segmented-control as a compact version.
      */
     compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the segmented-control.
+     */
+    description?: string;
     /**
      * Disables the segmented-control.
      */
@@ -20,10 +24,30 @@ type PSegmentedControlProps = {
      * The id of a form element the segmented-control should be associated with.
      */
     form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
     /**
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * A boolean value that specifies a selection must be made from the group before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the component.
+     */
+    state?: SegmentedControlState;
     /**
      * Adapts the segmented-control color depending on the theme.
      */
@@ -42,8 +66,14 @@ declare const __VLS_base: import("vue").DefineComponent<PSegmentedControlProps,
 }, string, import("vue").PublicProps, Readonly<PSegmentedControlProps> & Readonly<{
     [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
+    label: string;
     compact: boolean;
+    description: string;
+    state: SegmentedControlState;
+    required: boolean;
     disabled: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    message: string;
     columns: BreakpointCustomizable<SegmentedControlColumns>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,37 +1,43 @@
-import { defineComponent as d, ref as u, inject as f, onMounted as i, onUpdated as h, watch as C, createBlock as g, openBlock as v, resolveDynamicComponent as y, unref as _, withCtx as b, renderSlot as k } from "vue";
-import { usePrefix as B, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
-const j = /* @__PURE__ */ d({
+import { defineComponent as p, ref as f, inject as c, onMounted as i, onUpdated as h, watch as g, createBlock as C, openBlock as y, resolveDynamicComponent as b, unref as v, withCtx as _, renderSlot as B } from "vue";
+import { usePrefix as k, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
+const P = /* @__PURE__ */ p({
   __name: "SegmentedControlWrapper",
   props: {
     backgroundColor: {},
     columns: { default: "auto" },
     compact: { type: Boolean, default: !1 },
+    description: { default: "" },
     disabled: { type: Boolean, default: !1 },
     form: {},
+    hideLabel: { type: [Boolean, Object], default: !1 },
+    label: { default: "" },
+    message: { default: "" },
     name: {},
+    required: { type: Boolean, default: !1 },
+    state: { default: "none" },
     theme: {},
     value: {}
   },
   emits: ["update:value", "blur", "change", "segmentedControlChange", "update"],
-  setup(l, { emit: p }) {
-    const c = B("p-segmented-control"), a = l, e = u(), t = p, r = f(R), m = () => s(e, { ...a, theme: a.theme || r.value });
+  setup(d, { emit: u }) {
+    const m = k("p-segmented-control"), a = d, e = f(), t = u, l = c(R), r = () => s(e, { ...a, theme: a.theme || l.value });
     return i(() => {
-      m(), n(e, "blur", t), n(e, "change", t, (o) => {
+      r(), n(e, "blur", t), n(e, "change", t, (o) => {
         t("update:value", o.target.value);
       }), n(e, "segmentedControlChange", t), n(e, "update", t);
-    }), h(m), C(r, (o) => {
+    }), h(r), g(l, (o) => {
       s(e, { theme: a.theme || o });
-    }), (o, w) => (v(), g(y(_(c)), {
+    }), (o, j) => (y(), C(b(v(m)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: b(() => [
-        k(o.$slots, "default")
+      default: _(() => [
+        B(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  j as default
+  P as default
 };

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

@@ -17,7 +17,7 @@ type PSelectProps = {
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered.
+     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
      */
     filter?: boolean;
     /**

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

@@ -1,5 +1,5 @@
-import { defineComponent as u, ref as c, inject as m, onMounted as i, onUpdated as h, watch as y, createBlock as b, openBlock as v, resolveDynamicComponent as B, unref as _, withCtx as C, renderSlot as g } from "vue";
-import { usePrefix as w, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
+import { defineComponent as u, ref as c, inject as m, onMounted as i, onUpdated as h, watch as y, createBlock as g, openBlock as b, resolveDynamicComponent as v, unref as B, withCtx as _, renderSlot as C } from "vue";
+import { usePrefix as w, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as a } from "../../utils.mjs";
 const P = /* @__PURE__ */ u({
   __name: "SelectWrapper",
   props: {
@@ -18,21 +18,21 @@ const P = /* @__PURE__ */ u({
     theme: {},
     value: {}
   },
-  emits: ["update:value", "blur", "change", "update"],
+  emits: ["update:value", "blur", "change", "toggle", "update"],
   setup(p, { emit: d }) {
-    const f = w("p-select"), a = p, e = c(), o = d, l = m(R), r = () => s(e, { ...a, theme: a.theme || l.value });
+    const f = w("p-select"), n = p, e = c(), t = d, l = m(R), r = () => s(e, { ...n, theme: n.theme || l.value });
     return i(() => {
-      r(), n(e, "blur", o), n(e, "change", o, (t) => {
-        o("update:value", t.target.value);
-      }), n(e, "update", o);
-    }), h(r), y(l, (t) => {
-      s(e, { theme: a.theme || t });
-    }), (t, j) => (v(), b(B(_(f)), {
+      r(), a(e, "blur", t), a(e, "change", t, (o) => {
+        t("update:value", o.target.value);
+      }), a(e, "toggle", t), a(e, "update", t);
+    }), h(r), y(l, (o) => {
+      s(e, { theme: n.theme || o });
+    }), (o, j) => (b(), g(v(B(f)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: C(() => [
-        g(t.$slots, "default")
+      default: _(() => [
+        C(o.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -8,6 +8,10 @@ type PTagDismissibleProps = {
      * Background color variations
      */
     color?: TagDismissibleColor;
+    /**
+     * A boolean value that, if present, renders the tag dismissible as a compact version.
+     */
+    compact?: boolean;
     /**
      * The label text.
      */
@@ -22,6 +26,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PTagDismissibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PTagDismissibleProps> & Readonly<{}>, {
+    compact: boolean;
     color: TagDismissibleColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,28 +1,29 @@
-import { defineComponent as c, ref as m, inject as f, onMounted as i, onUpdated as l, watch as d, createBlock as u, openBlock as h, resolveDynamicComponent as _, unref as C, withCtx as b, renderSlot as y } from "vue";
+import { defineComponent as c, ref as m, inject as f, onMounted as l, onUpdated as i, watch as d, createBlock as u, openBlock as h, resolveDynamicComponent as _, unref as y, withCtx as C, renderSlot as b } from "vue";
 import { usePrefix as g, themeInjectionKey as k, syncProperties as s } from "../../utils.mjs";
-const R = /* @__PURE__ */ c({
+const P = /* @__PURE__ */ c({
   __name: "TagDismissibleWrapper",
   props: {
     aria: {},
     color: { default: "background-surface" },
+    compact: { type: Boolean, default: !1 },
     label: {},
     theme: {}
   },
   setup(a) {
     const p = g("p-tag-dismissible"), e = a, t = m(), n = f(k), r = () => s(t, { ...e, theme: e.theme || n.value });
-    return i(r), l(r), d(n, (o) => {
+    return l(r), i(r), d(n, (o) => {
       s(t, { theme: e.theme || o });
-    }), (o, w) => (h(), u(_(C(p)), {
+    }), (o, w) => (h(), u(_(y(p)), {
       ref_key: "pdsComponentRef",
       ref: t
     }, {
-      default: b(() => [
-        y(o.$slots, "default")
+      default: C(() => [
+        b(o.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  R as default
+  P as default
 };

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

@@ -4,6 +4,10 @@ type PTextareaProps = {
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
     autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the textarea as a compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide the character counter.
      */
@@ -61,7 +65,7 @@ type PTextareaProps = {
      */
     resize?: TextareaResize;
     /**
-     * The number of rows of the textarea.
+     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
      */
     rows?: number;
     /**
@@ -103,6 +107,7 @@ declare const __VLS_base: import("vue").DefineComponent<PTextareaProps, {}, {},
     wrap: TextareaWrap;
     resize: TextareaResize;
     label: string;
+    compact: boolean;
     placeholder: string;
     description: string;
     state: TextareaState;

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

@@ -1,9 +1,10 @@
-import { defineComponent as d, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, createBlock as v, openBlock as B, resolveDynamicComponent as C, unref as b, withCtx as g, renderSlot as _ } from "vue";
-import { usePrefix as x, themeInjectionKey as w, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
+import { defineComponent as d, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, createBlock as B, openBlock as v, resolveDynamicComponent as C, unref as b, withCtx as g, renderSlot as _ } from "vue";
+import { usePrefix as x, themeInjectionKey as w, syncProperties as f, addEventListenerToElementRef as n } from "../../utils.mjs";
 const j = /* @__PURE__ */ d({
   __name: "TextareaWrapper",
   props: {
     autoComplete: {},
+    compact: { type: Boolean, default: !1 },
     counter: { type: Boolean, default: !1 },
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
@@ -26,15 +27,15 @@ const j = /* @__PURE__ */ d({
     wrap: { default: "soft" }
   },
   emits: ["update:value", "blur", "change", "input"],
-  setup(f, { emit: p }) {
-    const u = x("p-textarea"), o = f, e = m(), a = p, l = c(w), r = () => s(e, { ...o, theme: o.theme || l.value });
+  setup(p, { emit: s }) {
+    const u = x("p-textarea"), o = p, e = m(), a = s, l = c(w), r = () => f(e, { ...o, theme: o.theme || l.value });
     return i(() => {
       r(), n(e, "blur", a), n(e, "change", a), n(e, "input", a, (t) => {
         a("update:value", t.target.value);
       });
     }), h(r), y(l, (t) => {
-      s(e, { theme: o.theme || t });
-    }), (t, k) => (B(), v(C(b(u)), {
+      f(e, { theme: o.theme || t });
+    }), (t, k) => (v(), B(C(b(u)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {

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

@@ -29,6 +29,7 @@ export { default as PIcon } from './IconWrapper.vue';
 export { default as PInlineNotification } from './InlineNotificationWrapper.vue';
 export { default as PInputDate } from './InputDateWrapper.vue';
 export { default as PInputEmail } from './InputEmailWrapper.vue';
+export { default as PInputMonth } from './InputMonthWrapper.vue';
 export { default as PInputNumber } from './InputNumberWrapper.vue';
 export { default as PInputPassword } from './InputPasswordWrapper.vue';
 export { default as PInputSearch } from './InputSearchWrapper.vue';
@@ -36,6 +37,7 @@ export { default as PInputTel } from './InputTelWrapper.vue';
 export { default as PInputText } from './InputTextWrapper.vue';
 export { default as PInputTime } from './InputTimeWrapper.vue';
 export { default as PInputUrl } from './InputUrlWrapper.vue';
+export { default as PInputWeek } from './InputWeekWrapper.vue';
 export { default as PLink } from './LinkWrapper.vue';
 export { default as PLinkPure } from './LinkPureWrapper.vue';
 export { default as PLinkSocial } from './LinkSocialWrapper.vue';

package/esm/lib/types.d.ts

@@ -504,12 +504,14 @@ export type IconName = typeof ICON_NAMES[number];
 declare const FLAG_NAMES: readonly [
     "ad",
     "ae",
+    "al",
     "am",
     "ar",
     "at",
     "au",
     "az",
     "ba",
+    "bd",
     "be",
     "bg",
     "bh",
@@ -594,6 +596,7 @@ declare const FLAG_NAMES: readonly [
     "pt",
     "py",
     "qa",
+    "re",
     "ro",
     "rs",
     "ru",
@@ -736,6 +739,9 @@ export type MultiSelectUpdateEvent = {
 /** @deprecated */
 export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
 export type MultiSelectChangeEventDetail = MultiSelectUpdateEventDetail;
+export type MultiSelectToggleEventDetail = {
+    open: boolean;
+};
 export type SelectState = FormState;
 export type SelectDropdownDirection = SelectComponentsDropdownDirection;
 /** @deprecated */
@@ -744,6 +750,9 @@ export type SelectUpdateEventDetail = {
     value: string;
 };
 export type SelectChangeEventDetail = SelectUpdateEventDetail;
+export type SelectToggleEventDetail = {
+    open: boolean;
+};
 declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
@@ -951,6 +960,7 @@ declare const CAROUSEL_ALIGN_CONTROLS: readonly [
 ];
 export type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
 export type CheckboxState = FormState;
+/** @deprecated */
 export type CheckboxUpdateEventDetail = {
     name: string;
     value?: string;
@@ -1259,6 +1269,10 @@ export type InputEmailState = FormState;
 export type InputEmailChangeEventDetail = Event;
 export type InputEmailBlurEventDetail = Event;
 export type InputEmailInputEventDetail = InputEvent;
+export type InputMonthState = FormState;
+export type InputMonthChangeEventDetail = Event;
+export type InputMonthBlurEventDetail = Event;
+export type InputMonthInputEventDetail = InputEvent;
 export type InputNumberState = FormState;
 export type InputNumberChangeEventDetail = Event;
 export type InputNumberBlurEventDetail = Event;
@@ -1287,6 +1301,10 @@ export type InputUrlState = FormState;
 export type InputUrlChangeEventDetail = Event;
 export type InputUrlBlurEventDetail = Event;
 export type InputUrlInputEventDetail = InputEvent;
+export type InputWeekState = FormState;
+export type InputWeekChangeEventDetail = Event;
+export type InputWeekBlurEventDetail = Event;
+export type InputWeekInputEventDetail = InputEvent;
 export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;
@@ -1519,6 +1537,7 @@ export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
 export type SegmentedControlChangeEventDetail = SegmentedControlUpdateEventDetail;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
+export type SegmentedControlState = FormState;
 export type SegmentedControlItemIcon = LinkButtonIconName;
 declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
     "aria-label"