@porsche-design-system/components-react 3.0.0-alpha.0 → 3.0.0-alpha.2

package/ssr/lib/components/carousel.wrapper.d.ts

@@ -1,6 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: CarouselAlignHeader;
     /**
      * Defines the description used in the carousel.
      */
@@ -34,11 +38,20 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
     /**
-     * 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?: CarouselWidth;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean;
 };
 export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: CarouselAlignHeader;
     /**
      * Defines the description used in the carousel.
      */
@@ -72,7 +85,12 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     theme?: Theme;
     /**
-     * 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?: CarouselWidth;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean;
 } & {

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

@@ -23,6 +23,7 @@ export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
+export * from './model-signature.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';

package/ssr/lib/components/model-signature.wrapper.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Adapts the color of the component.
+     */
+    color?: ModelSignatureColor;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: ModelSignatureModel;
+    /**
+     * Adapts the size of the component.
+     */
+    size?: ModelSignatureSize;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Adapts the color of the component.
+     */
+    color?: ModelSignatureColor;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: ModelSignatureModel;
+    /**
+     * Adapts the size of the component.
+     */
+    size?: ModelSignatureSize;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/text-list.wrapper.d.ts

@@ -2,29 +2,29 @@ import { HTMLAttributes } from 'react';
 import type { ListType, OrderType, Theme } from '../types';
 export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * The type of the text list.
+     * The type of the list.
      */
     listType?: ListType;
     /**
-     * The list style type of an ordered list.
+     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
     orderType?: OrderType;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the text color depending on the theme.
      */
     theme?: Theme;
 };
 export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * The type of the text list.
+     * The type of the list.
      */
     listType?: ListType;
     /**
-     * The list style type of an ordered list.
+     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
     orderType?: OrderType;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the text color depending on the theme.
      */
     theme?: Theme;
 } & {

package/ssr/lib/dsr-components/model-signature.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRModelSignature extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/text-list-item.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'react';
-import type { TextListItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 export declare class DSRTextListItem extends Component<any> {
-    host: HTMLElement & TextListItemInternalHTMLProps;
+    host: HTMLElement;
     render(): JSX.Element;
 }

package/ssr/lib/types.d.ts

@@ -262,20 +262,20 @@ declare const TEXT_ALIGNS: readonly [
 export declare type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
     "primary",
-    "brand",
-    "default",
     "contrast-low",
-    "neutral-contrast-low",
     "contrast-medium",
-    "neutral-contrast-medium",
     "contrast-high",
-    "neutral-contrast-high",
     "notification-success",
     "notification-warning",
     "notification-error",
     "notification-info",
-    "notification-neutral",
-    "inherit"
+    "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TextColor = typeof TEXT_COLORS[number];
 declare const TEXT_SIZES: readonly [
@@ -288,11 +288,11 @@ declare const TEXT_SIZES: readonly [
 ];
 export declare type TextSize = typeof TEXT_SIZES[number];
 declare const TEXT_WEIGHTS: readonly [
-    "thin",
     "regular",
-    "semibold",
     "semi-bold",
-    "bold"
+    "bold",
+    "thin",
+    "semibold"
 ];
 export declare type TextWeight = typeof TEXT_WEIGHTS[number];
 declare const LINK_TARGETS: readonly [
@@ -503,15 +503,15 @@ export declare type AccordionChangeEvent = {
 };
 export declare type AccordionTag = HeadingTag;
 declare const BANNER_STATES: readonly [
-    "error",
-    "warning",
     "info",
+    "warning",
+    "error",
     "neutral"
 ];
 export declare type BannerState = typeof BANNER_STATES[number];
 declare const BANNER_WIDTHS: readonly [
-    "basic",
     "extended",
+    "basic",
     "fluid"
 ];
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
@@ -520,6 +520,16 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
     "column"
 ];
 export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+declare const CAROUSEL_WIDTHS: readonly [
+    "basic",
+    "extended"
+];
+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 CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 export declare type CarouselChangeEvent = {
     activeIndex: number;
@@ -560,6 +570,9 @@ declare const DISPLAY_COLORS: readonly [
 export declare type DisplayColor = typeof DISPLAY_COLORS[number];
 export declare type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
     "neutral-contrast-high",
     "neutral-contrast-medium",
     "neutral-contrast-low"
@@ -757,13 +770,31 @@ declare const ICON_ARIA_ATTRIBUTES: readonly [
 ];
 export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
 export declare type IconSize = TextSize;
-export declare type IconColor = TextColor;
+declare const ICON_COLORS: readonly [
+    "primary",
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
+    "notification-success",
+    "notification-warning",
+    "notification-error",
+    "notification-info",
+    "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral",
+    "disabled"
+];
+export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
-    "error",
-    "warning",
+    "success",
     "info",
-    "neutral",
-    "success"
+    "warning",
+    "error",
+    "neutral"
 ];
 export declare type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
@@ -808,6 +839,32 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
+declare const MODEL_SIGNATURES_MANIFEST: {
+    "718": string;
+    "911": string;
+    boxster: string;
+    cayenne: string;
+    cayman: string;
+    macan: string;
+    panamera: string;
+    taycan: string;
+    "turbo-s": string;
+    turbo: string;
+};
+declare const MODEL_SIGNATURE_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type ModelSignatureSize = typeof MODEL_SIGNATURE_SIZES[number];
+export declare type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
+declare const MODEL_SIGNATURE_COLORS: readonly [
+    "primary",
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
+    "inherit"
+];
+export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
@@ -887,29 +944,29 @@ export declare type TabChangeEvent = {
     activeTabIndex: number;
 };
 export declare type TabGradientColorTheme = GradientColorTheme;
+declare const TAG_DISMISSIBLE_COLORS: readonly [
+    "background-surface",
+    "background-base",
+    "background-default"
+];
+export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
+declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TAG_COLORS: readonly [
     "background-surface",
-    "background-default",
     "background-base",
-    "neutral-contrast-high",
+    "background-default",
     "primary",
-    "notification-neutral",
     "notification-info",
     "notification-warning",
     "notification-success",
-    "notification-error"
+    "notification-error",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TagColor = typeof TAG_COLORS[number];
-declare const TAG_DISMISSIBLE_COLORS: readonly [
-    "background-surface",
-    "background-default",
-    "background-base"
-];
-export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
-declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TEXT_TAGS: readonly [
     "p",
     "span",