@porsche-design-system/components-vue 3.29.0-rc.3 → 3.29.0-rc.5

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

@@ -1,32 +1,32 @@
-import { defineComponent as s, ref as p, inject as i, onMounted as m, onUpdated as f, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as C, unref as _, withCtx as y, renderSlot as g } from "vue";
-import { usePrefix as P, themeInjectionKey as b, syncProperties as a } from "../../utils.mjs";
-const x = /* @__PURE__ */ s({
+import { defineComponent as a, ref as p, inject as i, onMounted as m, onUpdated as f, watch as d, openBlock as u, createBlock as h, resolveDynamicComponent as C, unref as _, withCtx as y, renderSlot as P } from "vue";
+import { usePrefix as g, themeInjectionKey as S, syncProperties as c } from "../../utils.mjs";
+const B = /* @__PURE__ */ a({
   __name: "ScrollerWrapper",
   props: {
     alignScrollIndicator: { default: "center" },
     aria: {},
-    gradientColor: { default: "background-base" },
+    gradientColor: {},
     gradientColorScheme: {},
     scrollIndicatorPosition: {},
     scrollToPosition: {},
     scrollbar: { type: Boolean, default: !1 },
     theme: {}
   },
-  setup(c) {
-    const l = P("p-scroller"), e = c, o = p(), n = i(b), r = () => a(o, { ...e, theme: e.theme || n.value });
+  setup(l) {
+    const s = g("p-scroller"), e = l, o = p(), n = i(S), r = () => c(o, { ...e, theme: e.theme || n.value });
     return m(r), f(r), d(n, (t) => {
-      a(o, { theme: e.theme || t });
-    }), (t, k) => (u(), h(C(_(l)), {
+      c(o, { theme: e.theme || t });
+    }), (t, k) => (u(), h(C(_(s)), {
       ref_key: "pdsComponentRef",
       ref: o
     }, {
       default: y(() => [
-        g(t.$slots, "default")
+        P(t.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  x as default
+  B as default
 };

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

@@ -51,6 +51,7 @@ declare const __VLS_component: import("vue").DefineComponent<PSelectWrapperProps
     dropdownDirection: SelectWrapperDropdownDirection;
     native: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -5,11 +5,11 @@ type PTabsBarProps = {
      */
     activeTabIndex?: number | undefined;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColor?: TabsBarGradientColor;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
@@ -38,7 +38,6 @@ declare const __VLS_component: import("vue").DefineComponent<PTabsBarProps, void
 }>, {
     weight: TabsBarWeight;
     size: BreakpointCustomizable<TabsBarSize>;
-    gradientColor: TabsBarGradientColor;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,10 +1,10 @@
-import { defineComponent as f, ref as i, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as b, createBlock as g, resolveDynamicComponent as _, unref as y, withCtx as k, renderSlot as v } from "vue";
-import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
-const P = /* @__PURE__ */ f({
+import { defineComponent as i, ref as f, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as b, createBlock as g, resolveDynamicComponent as _, unref as y, withCtx as v, renderSlot as w } from "vue";
+import { usePrefix as x, themeInjectionKey as R, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
+const P = /* @__PURE__ */ i({
   __name: "TabsBarWrapper",
   props: {
     activeTabIndex: {},
-    gradientColor: { default: "background-base" },
+    gradientColor: {},
     gradientColorScheme: {},
     size: { default: "small" },
     theme: {},
@@ -12,17 +12,17 @@ const P = /* @__PURE__ */ f({
   },
   emits: ["tabChange", "update"],
   setup(p, { emit: c }) {
-    const d = w("p-tabs-bar"), t = p, e = i(), o = c, a = l(x), r = () => m(e, { ...t, theme: t.theme || a.value });
+    const d = x("p-tabs-bar"), t = p, e = f(), o = c, r = l(R), a = () => m(e, { ...t, theme: t.theme || r.value });
     return u(() => {
-      r(), s(e, "tabChange", o), s(e, "update", o);
-    }), h(r), C(a, (n) => {
+      a(), s(e, "tabChange", o), s(e, "update", o);
+    }), h(a), C(r, (n) => {
       m(e, { theme: t.theme || n });
-    }), (n, R) => (b(), g(_(y(d)), {
+    }), (n, T) => (b(), g(_(y(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: k(() => [
-        v(n.$slots, "default")
+      default: v(() => [
+        w(n.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -5,7 +5,7 @@ type PTabsProps = {
      */
     activeTabIndex?: number;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColor?: TabsGradientColor;
     /**
@@ -38,7 +38,6 @@ declare const __VLS_component: import("vue").DefineComponent<PTabsProps, void, {
 }>, {
     weight: TabsWeight;
     size: BreakpointCustomizable<TabsSize>;
-    gradientColor: TabsGradientColor;
     activeTabIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,10 +1,10 @@
-import { defineComponent as f, ref as i, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as b, createBlock as g, resolveDynamicComponent as _, unref as y, withCtx as k, renderSlot as v } from "vue";
-import { usePrefix as w, themeInjectionKey as x, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
+import { defineComponent as f, ref as i, inject as l, onMounted as u, onUpdated as h, watch as C, openBlock as g, createBlock as _, resolveDynamicComponent as b, unref as y, withCtx as v, renderSlot as w } from "vue";
+import { usePrefix as x, themeInjectionKey as R, addEventListenerToElementRef as s, syncProperties as m } from "../../utils.mjs";
 const j = /* @__PURE__ */ f({
   __name: "TabsWrapper",
   props: {
     activeTabIndex: { default: 0 },
-    gradientColor: { default: "background-base" },
+    gradientColor: {},
     gradientColorScheme: {},
     size: { default: "small" },
     theme: {},
@@ -12,17 +12,17 @@ const j = /* @__PURE__ */ f({
   },
   emits: ["tabChange", "update"],
   setup(p, { emit: c }) {
-    const d = w("p-tabs"), t = p, e = i(), o = c, a = l(x), r = () => m(e, { ...t, theme: t.theme || a.value });
+    const d = x("p-tabs"), t = p, e = i(), o = c, a = l(R), r = () => m(e, { ...t, theme: t.theme || a.value });
     return u(() => {
       r(), s(e, "tabChange", o), s(e, "update", o);
     }), h(r), C(a, (n) => {
       m(e, { theme: t.theme || n });
-    }), (n, R) => (b(), g(_(y(d)), {
+    }), (n, T) => (g(), _(b(y(d)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: k(() => [
-        v(n.$slots, "default")
+      default: v(() => [
+        w(n.$slots, "default")
       ]),
       _: 3
     }, 512));

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

@@ -80,6 +80,7 @@ declare const __VLS_component: import("vue").DefineComponent<PTextFieldWrapperPr
     unit: string;
     unitPosition: TextFieldWrapperUnitPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -108,8 +108,8 @@ declare const __VLS_component: import("vue").DefineComponent<PTextareaProps, voi
     hideLabel: BreakpointCustomizable<boolean>;
     value: string;
     message: string;
-    placeholder: string;
     readOnly: boolean;
+    placeholder: string;
     counter: boolean;
     rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -45,6 +45,7 @@ declare const __VLS_component: import("vue").DefineComponent<PTextareaWrapperPro
     message: string;
     showCounter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -17,6 +17,7 @@ export { default as PDrilldownItem } from './DrilldownItemWrapper.vue';
 export { default as PDrilldownLink } from './DrilldownLinkWrapper.vue';
 export { default as PFieldset } from './FieldsetWrapper.vue';
 export { default as PFieldsetWrapper } from './FieldsetWrapperWrapper.vue';
+export { default as PFlag } from './FlagWrapper.vue';
 export { default as PFlex } from './FlexWrapper.vue';
 export { default as PFlexItem } from './FlexItemWrapper.vue';
 export { default as PFlyout } from './FlyoutWrapper.vue';
@@ -26,11 +27,15 @@ export { default as PHeading } from './HeadingWrapper.vue';
 export { default as PHeadline } from './HeadlineWrapper.vue';
 export { default as PIcon } from './IconWrapper.vue';
 export { default as PInlineNotification } from './InlineNotificationWrapper.vue';
+export { default as PInputDate } from './InputDateWrapper.vue';
 export { default as PInputEmail } from './InputEmailWrapper.vue';
 export { default as PInputNumber } from './InputNumberWrapper.vue';
 export { default as PInputPassword } from './InputPasswordWrapper.vue';
 export { default as PInputSearch } from './InputSearchWrapper.vue';
+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 PLink } from './LinkWrapper.vue';
 export { default as PLinkPure } from './LinkPureWrapper.vue';
 export { default as PLinkSocial } from './LinkSocialWrapper.vue';

package/esm/lib/types.d.ts

@@ -493,6 +493,116 @@ declare const ICON_NAMES: readonly [
     "zoom-out"
 ];
 export type IconName = typeof ICON_NAMES[number];
+declare const FLAG_NAMES: readonly [
+    "ae",
+    "am",
+    "ar",
+    "at",
+    "au",
+    "az",
+    "ba",
+    "be",
+    "bg",
+    "bh",
+    "bn",
+    "bo",
+    "br",
+    "by",
+    "ca",
+    "ch",
+    "cl",
+    "cn",
+    "co",
+    "cr",
+    "cw",
+    "cy",
+    "cz",
+    "de",
+    "dk",
+    "do",
+    "dz",
+    "ec",
+    "ee",
+    "eg",
+    "es",
+    "fi",
+    "fr",
+    "gb",
+    "ge",
+    "gh",
+    "gr",
+    "gt",
+    "hk",
+    "hn",
+    "hr",
+    "ht",
+    "hu",
+    "id",
+    "ie",
+    "il",
+    "in",
+    "is",
+    "it",
+    "jm",
+    "jo",
+    "jp",
+    "ke",
+    "kh",
+    "kr",
+    "kw",
+    "kz",
+    "lb",
+    "lk",
+    "lt",
+    "lu",
+    "lv",
+    "ma",
+    "md",
+    "mk",
+    "mn",
+    "mo",
+    "mq",
+    "mt",
+    "mu",
+    "mx",
+    "my",
+    "ng",
+    "nl",
+    "no",
+    "nz",
+    "om",
+    "pa",
+    "pe",
+    "pf",
+    "ph",
+    "pk",
+    "pl",
+    "pr",
+    "pt",
+    "py",
+    "qa",
+    "ro",
+    "rs",
+    "ru",
+    "sa",
+    "se",
+    "sg",
+    "si",
+    "sk",
+    "sv",
+    "th",
+    "tn",
+    "tr",
+    "tt",
+    "ua",
+    "us",
+    "uy",
+    "uz",
+    "ve",
+    "vn",
+    "za"
+];
+export type FlagName = typeof FLAG_NAMES[number];
 declare const FORM_STATES: readonly [
     "none",
     "error",
@@ -586,6 +696,7 @@ declare const GRADIENT_COLORS: readonly [
     "background-base",
     "background-surface"
 ];
+/** @deprecated */
 export type ScrollerGradientColor = (typeof GRADIENT_COLORS)[number];
 export type ScrollerScrollToPosition = {
     scrollPosition: number;
@@ -598,6 +709,20 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
+/** @deprecated */
+export type MultiSelectUpdateEvent = {
+    name: string;
+    value: string[];
+};
+export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectUpdateEventDetail = {
+    name: string;
+    value: string;
+};
 declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
@@ -702,6 +827,9 @@ export type PorscheDesignSystem = {
     };
 };
 export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
+export type SelectedAriaRole<T> = {
+    role: Extract<AriaRole, T>;
+};
 declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
@@ -881,6 +1009,11 @@ export type FieldsetLabelSize = (typeof FIELDSET_LABEL_SIZES)[number];
 export type FieldsetState = FormState;
 export type FieldsetWrapperLabelSize = FieldsetLabelSize;
 export type FieldsetWrapperState = FieldsetState;
+declare const FLAG_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlagAriaAttribute = (typeof FLAG_ARIA_ATTRIBUTES)[number];
+export type FlagSize = TextSize;
 export type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -1090,6 +1223,10 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputDateState = FormState;
+export type InputDateChangeEventDetail = Event;
+export type InputDateBlurEventDetail = Event;
+export type InputDateInputEventDetail = InputEvent;
 export type InputEmailState = FormState;
 export type InputEmailChangeEventDetail = Event;
 export type InputEmailBlurEventDetail = Event;
@@ -1106,10 +1243,22 @@ export type InputSearchState = FormState;
 export type InputSearchChangeEventDetail = Event;
 export type InputSearchBlurEventDetail = Event;
 export type InputSearchInputEventDetail = InputEvent;
+export type InputTelState = FormState;
+export type InputTelChangeEventDetail = Event;
+export type InputTelBlurEventDetail = Event;
+export type InputTelInputEventDetail = InputEvent;
 export type InputTextState = FormState;
 export type InputTextChangeEventDetail = Event;
 export type InputTextBlurEventDetail = Event;
 export type InputTextInputEventDetail = InputEvent;
+export type InputTimeState = FormState;
+export type InputTimeChangeEventDetail = Event;
+export type InputTimeBlurEventDetail = Event;
+export type InputTimeInputEventDetail = InputEvent;
+export type InputUrlState = FormState;
+export type InputUrlChangeEventDetail = Event;
+export type InputUrlBlurEventDetail = Event;
+export type InputUrlInputEventDetail = InputEvent;
 export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;
@@ -1264,14 +1413,6 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
-export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
-/** @deprecated */
-export type MultiSelectUpdateEvent = {
-    name: string;
-    value: string[];
-};
-export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
@@ -1335,12 +1476,6 @@ declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
-export type SelectState = FormState;
-export type SelectDropdownDirection = SelectComponentsDropdownDirection;
-export type SelectUpdateEventDetail = {
-    name: string;
-    value: string;
-};
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",