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

package/lib/types.d.ts

@@ -209,12 +209,18 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const GRADIENT_COLOR_THEMES: readonly [
+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 +228,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 +287,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",
@@ -515,11 +524,18 @@ declare const BANNER_WIDTHS: readonly [
     "fluid"
 ];
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
+export declare type ButtonIcon = LinkButtonIconName;
 declare const BUTTON_GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
 export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+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;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
@@ -535,6 +551,7 @@ export declare type CarouselChangeEvent = {
     activeIndex: number;
     previousIndex: number;
 };
+export declare type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
@@ -558,6 +575,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 +596,18 @@ 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];
+export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
+export declare type DividerOrientation = DividerDirection;
 declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
 export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
+export declare type FieldsetWrapperState = FormState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -728,7 +748,6 @@ declare const HEADING_SIZES: readonly [
     "large",
     "x-large",
     "xx-large",
-    "xxx-large",
     "inherit"
 ];
 export declare type HeadingSize = typeof HEADING_SIZES[number];
@@ -786,7 +805,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,13 +816,23 @@ 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;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
+    "semi-bold",
     "semibold"
 ];
 export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
@@ -825,12 +854,15 @@ declare const LINK_TILE_ASPECT_RATIOS: readonly [
     "9:16"
 ];
 export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
 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"
 ];
@@ -838,7 +870,7 @@ 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 ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -869,11 +901,12 @@ 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 +914,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 +927,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 +951,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 +959,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 +970,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 +1004,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 +1038,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.3",
   "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.3"
   },
   "peerDependencies": {
     "vue": ">=3.0.0 <4.0.0"