@porsche-design-system/components-vue 3.0.0-alpha.2 → 3.0.0-alpha.4

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

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "inherit" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | undefined;
+    color?: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the text component.
      */
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "inherit" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | undefined;
+    color?: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | undefined;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
@@ -52,7 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the text component.
      */

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

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, FormState, Theme } from '../types';
+import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * The description text.
@@ -17,9 +17,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     message?: string | undefined;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean | undefined;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean | undefined;
     /**
      * The validation state.
      */
@@ -33,7 +37,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     label: string;
     message: string;
-    showCharacterCount: boolean;
+    showCounter: boolean;
     state: 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<{
@@ -54,9 +58,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      */
     message?: string | undefined;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean | undefined;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean | undefined;
     /**
      * The validation state.
      */
@@ -70,17 +78,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     hideLabel: boolean;
     label: string;
     message: string;
-    showCharacterCount: boolean;
+    showCounter: boolean;
     state: string;
     theme: string;
 }>>>, {
     label: string;
     theme: Theme;
-    state: FormState;
-    hideLabel: BreakpointCustomizable<boolean>;
     description: string;
+    state: TextareaWrapperState;
+    hideLabel: BreakpointCustomizable<boolean>;
     message: string;
-    showCharacterCount: boolean;
+    showCounter: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/TextareaWrapperWrapper.vue.js

@@ -1,22 +1,23 @@
-import { defineComponent as p, ref as l, onMounted as f, onUpdated as s, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as C } from "vue";
-import { getPrefixedTagName as h, syncProperties as a } from "../../utils.js";
-const w = /* @__PURE__ */ p({
+import { defineComponent as p, ref as l, onMounted as s, onUpdated as f, openBlock as d, createBlock as u, resolveDynamicComponent as m, unref as c, withCtx as i, renderSlot as C } from "vue";
+import { getPrefixedTagName as h, syncProperties as o } from "../../utils.js";
+const x = /* @__PURE__ */ p({
   __name: "TextareaWrapperWrapper",
   props: {
     description: { default: "" },
     hideLabel: { default: !1 },
     label: { default: "" },
     message: { default: "" },
-    showCharacterCount: { type: Boolean, default: !0 },
+    showCharacterCount: { type: Boolean },
+    showCounter: { type: Boolean, default: !0 },
     state: { default: "none" },
     theme: { default: "light" }
   },
-  setup(o) {
-    const t = o, r = h("p-textarea-wrapper"), e = l();
-    return f(() => {
-      a(e.value, t);
-    }), s(() => {
-      a(e.value, t);
+  setup(a) {
+    const t = a, r = h("p-textarea-wrapper"), e = l();
+    return s(() => {
+      o(e.value, t);
+    }), f(() => {
+      o(e.value, t);
     }), (n, _) => (d(), u(m(c(r)), {
       ref_key: "pdsComponentRef",
       ref: e
@@ -29,5 +30,5 @@ const w = /* @__PURE__ */ p({
   }
 });
 export {
-  w as default
+  x as default
 };

package/lib/components/index.d.ts

@@ -3,11 +3,13 @@ export { default as PBanner } from './BannerWrapper.vue';
 export { default as PButton } from './ButtonWrapper.vue';
 export { default as PButtonGroup } from './ButtonGroupWrapper.vue';
 export { default as PButtonPure } from './ButtonPureWrapper.vue';
+export { default as PButtonTile } from './ButtonTileWrapper.vue';
 export { default as PCarousel } from './CarouselWrapper.vue';
 export { default as PCheckboxWrapper } from './CheckboxWrapperWrapper.vue';
 export { default as PContentWrapper } from './ContentWrapperWrapper.vue';
 export { default as PDisplay } from './DisplayWrapper.vue';
 export { default as PDivider } from './DividerWrapper.vue';
+export { default as PFieldset } from './FieldsetWrapper.vue';
 export { default as PFieldsetWrapper } from './FieldsetWrapperWrapper.vue';
 export { default as PFlex } from './FlexWrapper.vue';
 export { default as PFlexItem } from './FlexItemWrapper.vue';
@@ -21,6 +23,7 @@ export { default as PLink } from './LinkWrapper.vue';
 export { default as PLinkPure } from './LinkPureWrapper.vue';
 export { default as PLinkSocial } from './LinkSocialWrapper.vue';
 export { default as PLinkTile } from './LinkTileWrapper.vue';
+export { default as PLinkTileModelSignature } from './LinkTileModelSignatureWrapper.vue';
 export { default as PMarque } from './MarqueWrapper.vue';
 export { default as PModal } from './ModalWrapper.vue';
 export { default as PModelSignature } from './ModelSignatureWrapper.vue';

package/lib/types.d.ts

@@ -209,12 +209,41 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const GRADIENT_COLOR_THEMES: readonly [
+declare const TILE_ASPECT_RATIOS: readonly [
+    "1:1",
+    "4:3",
+    "3:4",
+    "16:9",
+    "9:16"
+];
+export declare type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "default",
+    "inherit"
+];
+export declare type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export declare type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export declare type TileAlign = (typeof TILE_ALIGNS)[number];
+declare const GRADIENT_COLOR_SCHEMES: readonly [
     "default",
     "surface"
 ];
-export declare type GradientColorTheme = typeof GRADIENT_COLOR_THEMES[number];
-export declare type ScrollToPosition = {
+/** @deprecated */
+export declare type ScrollerGradientColorScheme = typeof GRADIENT_COLOR_SCHEMES[number];
+declare const GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface"
+];
+export declare type ScrollerGradientColor = typeof GRADIENT_COLORS[number];
+export declare type ScrollerScrollToPosition = {
     scrollPosition: number;
     isSmooth?: boolean;
 } | string;
@@ -222,7 +251,9 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
     "top",
     "center"
 ];
-export declare type ScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
+/** @deprecated */
+export declare type ScrollerScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
+export declare type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
 declare const THEMES: readonly [
     "light",
     "dark"
@@ -279,6 +310,7 @@ declare const TEXT_COLORS: readonly [
 ];
 export declare type TextColor = typeof TEXT_COLORS[number];
 declare const TEXT_SIZES: readonly [
+    "xx-small",
     "x-small",
     "small",
     "medium",
@@ -514,27 +546,44 @@ declare const BANNER_WIDTHS: readonly [
     "basic",
     "fluid"
 ];
+/** @deprecated */
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
-declare const BUTTON_GROUP_DIRECTIONS: readonly [
+export declare type ButtonIcon = LinkButtonIconName;
+declare const GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
-export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+export declare type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
+export declare type ButtonGroupDirection = GroupDirection;
+export declare type ButtonPureType = ButtonType;
+export declare type ButtonPureIcon = LinkButtonIconName;
+export declare type ButtonPureAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonPureAlignLabel = AlignLabel;
+export declare type ButtonPureWeight = TextWeight;
+export declare type ButtonPureSize = TextSize;
+export declare type ButtonTileAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonTileIcon = LinkButtonIconName;
+export declare type ButtonTileType = ButtonType;
+export declare type ButtonTileAspectRatio = TileAspectRatio;
+export declare type ButtonTileSize = TileSize;
+export declare type ButtonTileWeight = TileWeight;
+export declare type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
-export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+export declare type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "left",
     "center"
 ];
-export declare type CarouselAlignHeader = typeof CAROUSEL_ALIGN_HEADERS[number];
+export declare type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 export declare type CarouselChangeEvent = {
     activeIndex: number;
     previousIndex: number;
 };
+export declare type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
@@ -558,6 +607,7 @@ declare const DISPLAY_TAGS: readonly [
 ];
 export declare type DisplayTag = typeof DISPLAY_TAGS[number];
 declare const DISPLAY_SIZES: readonly [
+    "small",
     "medium",
     "large",
     "inherit"
@@ -578,16 +628,20 @@ declare const DIVIDER_COLORS: readonly [
     "neutral-contrast-low"
 ];
 export declare type DividerColor = typeof DIVIDER_COLORS[number];
-declare const DIVIDER_ORIENTATIONS: readonly [
+declare const DIVIDER_DIRECTIONS: readonly [
     "vertical",
     "horizontal"
 ];
-export declare type DividerOrientation = typeof DIVIDER_ORIENTATIONS[number];
-declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
+export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
+export declare type DividerOrientation = DividerDirection;
+declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
+export declare type FieldsetLabelSize = typeof FIELDSET_LABEL_SIZES[number];
+export declare type FieldsetState = FormState;
+export declare type FieldsetWrapperLabelSize = FieldsetLabelSize;
+export declare type FieldsetWrapperState = FieldsetState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -728,7 +782,6 @@ declare const HEADING_SIZES: readonly [
     "large",
     "x-large",
     "xx-large",
-    "xxx-large",
     "inherit"
 ];
 export declare type HeadingSize = typeof HEADING_SIZES[number];
@@ -786,7 +839,7 @@ declare const ICON_COLORS: readonly [
     "neutral-contrast-medium",
     "neutral-contrast-high",
     "notification-neutral",
-    "disabled"
+    "state-disabled"
 ];
 export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
@@ -797,48 +850,31 @@ declare const INLINE_NOTIFICATION_STATES: readonly [
     "neutral"
 ];
 export declare type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
+export declare type InlineNotificationActionIcon = IconName;
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type LinkAriaAttribute = typeof LINK_ARIA_ATTRIBUTES[number];
-export declare type SocialIconName = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
+export declare type LinkIcon = LinkButtonIconName;
+export declare type LinkPureIcon = LinkButtonIconName;
+export declare type LinkPureAriaAttribute = LinkAriaAttribute;
+export declare type LinkPureAlignLabel = AlignLabel;
+export declare type LinkPureWeight = TextWeight;
+export declare type LinkPureSize = TextSize;
+export declare type LinkPureTarget = LinkTarget;
+export declare type LinkSocialIcon = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
+export declare type LinkSocialTarget = LinkTarget;
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
+export declare type LinkTileAspectRatio = TileAspectRatio;
+export declare type LinkTileSize = TileSize;
+export declare type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
+    "semi-bold",
     "semibold"
 ];
-export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
-declare const LINK_TILE_SIZES: readonly [
-    "default",
-    "inherit"
-];
-export declare type LinkTileSize = typeof LINK_TILE_SIZES[number];
-declare const LINK_TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export declare type LinkTileAlign = typeof LINK_TILE_ALIGNS[number];
-declare const LINK_TILE_ASPECT_RATIOS: readonly [
-    "1:1",
-    "4:3",
-    "3:4",
-    "16:9",
-    "9:16"
-];
-export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
-declare const MARQUE_SIZES: readonly [
-    "responsive",
-    "small",
-    "medium"
-];
-export declare type MarqueSize = typeof MARQUE_SIZES[number];
-declare const MARQUE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
-declare const MODAL_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
+export declare type LinkTileWeight = (typeof LINK_TILE_WEIGHTS)[number];
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -865,15 +901,43 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
+export declare type LinkTileModelSignatureModel = ModelSignatureModel;
+declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS)[number];
+export declare type LinkTileModelSignatureWeight = TileWeight;
+export declare type LinkTileModelSignatureAspectRatio = TileAspectRatio;
+export declare type LinkTileModelSignatureLinkDirection = GroupDirection;
+declare const MARQUE_SIZES: readonly [
+    "responsive",
+    "small",
+    "medium"
+];
+export declare type MarqueSize = typeof MARQUE_SIZES[number];
+export declare type MarqueTarget = LinkTarget;
+declare const MARQUE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
+declare const MODAL_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
 ];
-export declare type NumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
-export declare type PageChangeEvent = {
+export declare type PaginationMaxNumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
+export declare type PaginationChangeEvent = {
     page: number;
     previousPage: number;
 };
+export declare type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
     "right",
@@ -881,6 +945,11 @@ declare const POPOVER_DIRECTIONS: readonly [
     "left"
 ];
 export declare type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
+declare const POPOVER_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type PopoverAriaAttribute = typeof POPOVER_ARIA_ATTRIBUTES[number];
+export declare type RadioButtonWrapperState = FormState;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
@@ -889,12 +958,14 @@ export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_B
 export declare type SegmentedControlChangeEvent = {
     value: string | number;
 };
+export declare type SegmentedControlItemIcon = LinkButtonIconName;
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
     "auto"
 ];
-export declare type DropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export declare type SelectWrapperDropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export declare type SelectWrapperState = FormState;
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",
@@ -911,7 +982,7 @@ declare const STEPPER_HORIZONTAL_SIZES: readonly [
     "medium"
 ];
 export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
-export declare type StepChangeEvent = {
+export declare type StepperHorizontalChangeEvent = {
     activeStepIndex: number;
 };
 declare const STEPPER_ITEM_STATES: readonly [
@@ -919,7 +990,8 @@ declare const STEPPER_ITEM_STATES: readonly [
     "complete",
     "warning"
 ];
-export declare type StepperState = typeof STEPPER_ITEM_STATES[number];
+export declare type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
+export declare type SwitchAlignLabel = AlignLabel;
 export declare type SwitchChangeEvent = {
     checked: boolean;
 };
@@ -929,24 +1001,33 @@ export declare type TableHeadCellSort = {
     active?: boolean;
     direction?: Direction;
 };
-export declare type SortingChangeEvent = TableHeadCellSort;
-declare const TAB_SIZES: readonly [
+export declare type TableChangeEvent = TableHeadCellSort;
+declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type TabSize = typeof TAB_SIZES[number];
-declare const TAB_WEIGHTS: readonly [
+export declare type TabsBarSize = typeof TABS_BAR_SIZES[number];
+declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
+    "semi-bold",
     "semibold"
 ];
-export declare type TabWeight = typeof TAB_WEIGHTS[number];
-export declare type TabChangeEvent = {
+export declare type TabsBarWeight = typeof TABS_BAR_WEIGHTS[number];
+export declare type TabsBarChangeEvent = {
     activeTabIndex: number;
 };
-export declare type TabGradientColorTheme = GradientColorTheme;
+/** @deprecated */
+export declare type TabsBarGradientColorScheme = ScrollerGradientColorScheme;
+export declare type TabsBarGradientColor = ScrollerGradientColor;
+export declare type TabsSize = TabsBarSize;
+export declare type TabsWeight = TabsBarWeight;
+/** @deprecated */
+export declare type TabsGradientColorScheme = TabsBarGradientColorScheme;
+export declare type TabsGradientColor = TabsBarGradientColor;
+export declare type TabsChangeEvent = TabsBarChangeEvent;
 declare const TAG_DISMISSIBLE_COLORS: readonly [
-    "background-surface",
     "background-base",
+    "background-surface",
     "background-default"
 ];
 export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
@@ -954,17 +1035,21 @@ declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
+export declare type TagIcon = IconName;
 declare const TAG_COLORS: readonly [
-    "background-surface",
     "background-base",
+    "background-surface",
     "background-default",
     "primary",
-    "notification-info",
+    "notification-info-soft",
+    "notification-warning-soft",
+    "notification-success-soft",
+    "notification-error-soft",
+    "neutral-contrast-high",
+    "notification-neutral",
     "notification-warning",
     "notification-success",
-    "notification-error",
-    "neutral-contrast-high",
-    "notification-neutral"
+    "notification-error"
 ];
 export declare type TagColor = typeof TAG_COLORS[number];
 declare const TEXT_TAGS: readonly [
@@ -984,16 +1069,27 @@ declare const UNIT_POSITIONS: readonly [
     "suffix"
 ];
 export declare type TextFieldWrapperUnitPosition = typeof UNIT_POSITIONS[number];
+export declare type TextFieldWrapperActionIcon = Extract<IconName, "locate">;
+export declare type TextFieldWrapperState = FormState;
 declare const LIST_TYPES: readonly [
     "unordered",
     "ordered"
 ];
-export declare type ListType = typeof LIST_TYPES[number];
+/** @deprecated */
+export declare type TextListListType = typeof LIST_TYPES[number];
 declare const ORDER_TYPES: readonly [
     "numbered",
     "alphabetically"
 ];
-export declare type OrderType = typeof ORDER_TYPES[number];
+/** @deprecated */
+export declare type TextListOrderType = typeof ORDER_TYPES[number];
+declare const TEXT_LIST_TYPES: readonly [
+    "unordered",
+    "numbered",
+    "alphabetically"
+];
+export declare type TextListType = typeof TEXT_LIST_TYPES[number];
+export declare type TextareaWrapperState = FormState;
 declare const TOAST_STATES: readonly [
     "info",
     "success",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-alpha.2"
+    "@porsche-design-system/components-js": "3.0.0-alpha.4"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"