@porsche-design-system/components-react 4.0.0-beta.2 → 4.0.0-beta.4

package/esm/lib/types.d.ts

@@ -1,3 +1,34 @@
+declare const ACCORDIONS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
+declare const ACCORDION_ALIGN_MARKERS: readonly [
+    "start",
+    "end"
+];
+export type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
+export type AccordionUpdateEventDetail = {
+    open: boolean;
+};
+declare const ACCORDION_HEADINGS_DEPRECATED: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+/** @deprecated */
+export type AccordionHeadingTag = (typeof ACCORDION_HEADINGS_DEPRECATED)[number];
+declare const ACCORDION_SIZES: readonly [
+    "small",
+    "medium"
+];
+/** @deprecated */
+export type AccordionSize = (typeof ACCORDION_SIZES)[number];
 export type Booleanish = boolean | "true" | "false";
 export type AriaAttributes = {
     /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
@@ -240,6 +271,8 @@ declare const ICON_NAMES: readonly [
     "arrow-double-right",
     "arrow-double-up",
     "arrow-down",
+    "arrow-down-left",
+    "arrow-down-right",
     "arrow-first",
     "arrow-head-down",
     "arrow-head-left",
@@ -249,6 +282,8 @@ declare const ICON_NAMES: readonly [
     "arrow-left",
     "arrow-right",
     "arrow-up",
+    "arrow-up-left",
+    "arrow-up-right",
     "arrows",
     "attachment",
     "augmented-reality",
@@ -418,6 +453,7 @@ declare const ICON_NAMES: readonly [
     "pin-filled",
     "pivot",
     "play",
+    "play-filled",
     "plug",
     "plus",
     "preheating",
@@ -621,6 +657,27 @@ declare const FLAG_NAMES: readonly [
     "za"
 ];
 export type FlagName = typeof FLAG_NAMES[number];
+declare const FORM_STATES: readonly [
+    "none",
+    "error",
+    "success"
+];
+export type FormState = (typeof FORM_STATES)[number];
+declare const BUTTON_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-expanded",
+    "aria-pressed",
+    "aria-haspopup"
+];
+export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
+declare const LINK_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-current",
+    "aria-haspopup"
+];
+export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
     "base",
     "xs",
@@ -637,75 +694,6 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const HEADING_SIZES: readonly [
-    "small",
-    "medium",
-    "large",
-    "x-large",
-    "xx-large",
-    "inherit"
-];
-export type HeadingSize = (typeof HEADING_SIZES)[number];
-declare const HEADING_TAGS: readonly [
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6"
-];
-export type HeadingTag = (typeof HEADING_TAGS)[number];
-declare const TEXT_SIZES: readonly [
-    "xx-small",
-    "x-small",
-    "small",
-    "medium",
-    "large",
-    "x-large",
-    "inherit"
-];
-export type TextSize = (typeof TEXT_SIZES)[number];
-declare const TYPOGRAPHY_ALIGNS: readonly [
-    "start",
-    "center",
-    "end",
-    "inherit"
-];
-export type TypographyAlign = (typeof TYPOGRAPHY_ALIGNS)[number];
-declare const TYPOGRAPHY_TEXT_COLORS: readonly [
-    "primary",
-    "contrast-high",
-    "contrast-medium",
-    "contrast-low",
-    "success",
-    "warning",
-    "error",
-    "info",
-    "inherit"
-];
-export type TypographyTextColor = (typeof TYPOGRAPHY_TEXT_COLORS)[number];
-declare const TYPOGRAPHY_TEXT_WEIGHTS: readonly [
-    "regular",
-    "semi-bold",
-    "bold"
-];
-export type TypographyTextWeight = (typeof TYPOGRAPHY_TEXT_WEIGHTS)[number];
-declare const LINK_BUTTON_VARIANTS: readonly [
-    "primary",
-    "secondary"
-];
-export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
-declare const BUTTON_TYPES: readonly [
-    "button",
-    "submit",
-    "reset"
-];
-export type ButtonType = (typeof BUTTON_TYPES)[number];
-declare const ALIGN_LABELS: readonly [
-    "start",
-    "end"
-];
-export type AlignLabel = (typeof ALIGN_LABELS)[number];
 declare const LINK_TARGETS: readonly [
     "_self",
     "_blank",
@@ -713,45 +701,6 @@ declare const LINK_TARGETS: readonly [
     "_top"
 ];
 export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
-export type LinkButtonIconName = IconName | "none";
-export type ButtonVariant = LinkButtonVariant;
-export type LinkVariant = LinkButtonVariant;
-export type PorscheDesignSystem = {
-    [key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
-        prefixes: string[];
-        isReady: () => Promise<void>;
-        readyResolve: () => void;
-    };
-    cdn: {
-        url: string;
-        prefixes: string[];
-    };
-};
-export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
-export type SelectedAriaRole<T> = {
-    role: Extract<AriaRole, T>;
-};
-declare const FORM_STATES: readonly [
-    "none",
-    "error",
-    "success"
-];
-export type FormState = (typeof FORM_STATES)[number];
-declare const BUTTON_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-expanded",
-    "aria-pressed",
-    "aria-haspopup"
-];
-export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
-declare const LINK_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-current",
-    "aria-haspopup"
-];
-export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 export type MultiSelectState = FormState;
 export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
 export type MultiSelectChangeEventDetail = {
@@ -801,29 +750,40 @@ declare const TILE_ALIGNS: readonly [
     "bottom"
 ];
 export type TileAlign = (typeof TILE_ALIGNS)[number];
-declare const ACCORDIONS_BACKGROUNDS: readonly [
-    "canvas",
-    "surface",
-    "frosted",
-    "none"
-];
-export type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
-declare const ACCORDION_ALIGN_MARKERS: readonly [
+declare const ALIGN_LABELS: readonly [
     "start",
     "end"
 ];
-export type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
-export type AccordionUpdateEventDetail = {
-    open: boolean;
-};
-/** @deprecated */
-export type AccordionHeadingTag = HeadingTag;
-declare const ACCORDION_SIZES: readonly [
-    "small",
-    "medium"
+export type AlignLabel = (typeof ALIGN_LABELS)[number];
+declare const BUTTON_TYPES: readonly [
+    "button",
+    "submit",
+    "reset"
 ];
-/** @deprecated */
-export type AccordionSize = (typeof ACCORDION_SIZES)[number];
+export type ButtonType = (typeof BUTTON_TYPES)[number];
+declare const LINK_BUTTON_VARIANTS: readonly [
+    "primary",
+    "secondary"
+];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
+export type LinkButtonIconName = IconName | "none";
+export type ButtonVariant = LinkButtonVariant;
+export type LinkVariant = LinkButtonVariant;
+export type PorscheDesignSystem = {
+    [key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
+        prefixes: string[];
+        isReady: () => Promise<void>;
+        readyResolve: () => void;
+    };
+    cdn: {
+        url: string;
+        prefixes: string[];
+    };
+};
+export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
+export type SelectedAriaRole<T> = {
+    role: Extract<AriaRole, T>;
+};
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -831,13 +791,48 @@ declare const BANNER_STATES: readonly [
     "error"
 ];
 export type BannerState = (typeof BANNER_STATES)[number];
-export type BannerHeadingTag = HeadingTag;
+declare const BANNER_HEADING_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export type BannerHeadingTag = (typeof BANNER_HEADING_TAGS)[number];
 export type ButtonIcon = LinkButtonIconName;
 export type ButtonPureType = ButtonType;
 export type ButtonPureIcon = LinkButtonIconName;
 export type ButtonPureAriaAttribute = ButtonAriaAttribute;
 export type ButtonPureAlignLabel = AlignLabel;
-export type ButtonPureSize = TextSize;
+declare const BUTTON_PURE_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large"
+];
+export type ButtonPureSize = (typeof BUTTON_PURE_SIZES)[number];
+declare const BUTTON_PURE_COLORS: readonly [
+    "primary",
+    "contrast-higher",
+    "contrast-high",
+    "contrast-medium",
+    "inherit"
+];
+export type ButtonPureColor = (typeof BUTTON_PURE_COLORS)[number];
 export type ButtonTileAriaAttribute = ButtonAriaAttribute;
 export type ButtonTileIcon = LinkButtonIconName;
 export type ButtonTileType = ButtonType;
@@ -867,7 +862,11 @@ declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "center"
 ];
 export type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
-export type CarouselHeadingSize = Extract<HeadingSize, "x-large" | "xx-large">;
+declare const CAROUSEL_HEADING_SIZES: readonly [
+    "x-large",
+    "xx-large"
+];
+export type CarouselHeadingSize = (typeof CAROUSEL_HEADING_SIZES)[number];
 declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -909,7 +908,13 @@ declare const DISPLAY_COLORS: readonly [
     "inherit"
 ];
 export type DisplayColor = (typeof DISPLAY_COLORS)[number];
-export type DisplayAlign = TypographyAlign;
+declare const DISPLAY_ALIGNS: readonly [
+    "start",
+    "center",
+    "end",
+    "inherit"
+];
+export type DisplayAlign = (typeof DISPLAY_ALIGNS)[number];
 declare const DIVIDER_COLORS: readonly [
     "contrast-lower",
     "contrast-low",
@@ -941,7 +946,27 @@ declare const FLAG_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlagAriaAttribute = (typeof FLAG_ARIA_ATTRIBUTES)[number];
-export type FlagSize = TextSize;
+declare const FLAG_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large",
+    "xx-large"
+];
+export type FlagSize = (typeof FLAG_SIZES)[number];
 declare const BACKDROPS: readonly [
     "blur",
     "shading"
@@ -969,22 +994,96 @@ export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
 export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
 export type FlyoutBackdrop = Backdrop;
+declare const HEADING_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export type HeadingTag = (typeof HEADING_TAGS)[number];
 declare const HEADING_COLORS: readonly [
     "primary",
+    "contrast-higher",
+    "contrast-high",
+    "contrast-medium",
     "inherit"
 ];
 export type HeadingColor = (typeof HEADING_COLORS)[number];
-export type HeadingAlign = TypographyAlign;
+declare const HEADING_WEIGHTS: readonly [
+    "normal",
+    "semibold",
+    "bold",
+    "regular",
+    "semi-bold"
+];
+export type HeadingWeight = (typeof HEADING_WEIGHTS)[number];
+declare const HEADING_ALIGNS: readonly [
+    "start",
+    "center",
+    "end",
+    "inherit"
+];
+export type HeadingAlign = (typeof HEADING_ALIGNS)[number];
+declare const HEADING_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "small",
+    "medium",
+    "large",
+    "x-large",
+    "xx-large"
+];
+export type HeadingSize = (typeof HEADING_SIZES)[number];
+declare const HEADING_HYPHENS: readonly [
+    "none",
+    "manual",
+    "auto",
+    "inherit"
+];
+export type HeadingHyphens = (typeof HEADING_HYPHENS)[number];
 declare const ICON_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type IconAriaAttribute = (typeof ICON_ARIA_ATTRIBUTES)[number];
-export type IconSize = TextSize;
+declare const ICON_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large",
+    "xx-large"
+];
+export type IconSize = (typeof ICON_SIZES)[number];
 declare const ICON_COLORS: readonly [
     "primary",
+    "contrast-higher",
     "contrast-high",
     "contrast-medium",
     "contrast-low",
+    "contrast-lower",
     "success",
     "warning",
     "error",
@@ -1000,7 +1099,15 @@ declare const INLINE_NOTIFICATION_STATES: readonly [
 ];
 export type InlineNotificationState = (typeof INLINE_NOTIFICATION_STATES)[number];
 export type InlineNotificationActionIcon = IconName;
-export type InlineNotificationHeadingTag = HeadingTag;
+declare const INLINE_NOTIFICATION_HEADING_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export type InlineNotificationHeadingTag = (typeof INLINE_NOTIFICATION_HEADING_TAGS)[number];
 export type InputDateState = FormState;
 export type InputDateChangeEventDetail = Event;
 export type InputDateBlurEventDetail = Event;
@@ -1049,8 +1156,35 @@ export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;
 export type LinkPureAlignLabel = AlignLabel;
-export type LinkPureSize = TextSize;
 export type LinkPureTarget = LinkTarget;
+declare const LINK_PURE_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large"
+];
+export type LinkPureSize = (typeof LINK_PURE_SIZES)[number];
+declare const LINK_PURE_COLORS: readonly [
+    "primary",
+    "contrast-higher",
+    "contrast-high",
+    "contrast-medium",
+    "inherit"
+];
+export type LinkPureColor = (typeof LINK_PURE_COLORS)[number];
 export type LinkTileTarget = LinkTarget;
 export type LinkTileAriaAttribute = LinkAriaAttribute;
 export type LinkTileAspectRatio = TileAspectRatio;
@@ -1247,11 +1381,26 @@ declare const SHEET_BACKGROUNDS: readonly [
 export type SheetBackground = (typeof SHEET_BACKGROUNDS)[number];
 export type SheetMotionVisibleEndEventDetail = TransitionEvent;
 export type SheetMotionHiddenEndEventDetail = TransitionEvent;
+declare const SPINNER_COLORS: readonly [
+    "primary",
+    "inherit"
+];
+export type SpinnerColor = (typeof SPINNER_COLORS)[number];
 declare const SPINNER_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
     "small",
     "medium",
-    "large",
-    "inherit"
+    "large"
 ];
 export type SpinnerSize = (typeof SPINNER_SIZES)[number];
 declare const SPINNER_ARIA_ATTRIBUTES: readonly [
@@ -1356,9 +1505,60 @@ declare const TEXT_TAGS: readonly [
     "legend"
 ];
 export type TextTag = (typeof TEXT_TAGS)[number];
-export type TextAlign = TypographyAlign;
-export type TextColor = TypographyTextColor;
-export type TextWeight = TypographyTextWeight;
+declare const TEXT_COLORS: readonly [
+    "primary",
+    "contrast-higher",
+    "contrast-high",
+    "contrast-medium",
+    "success",
+    "warning",
+    "error",
+    "info",
+    "inherit"
+];
+export type TextColor = (typeof TEXT_COLORS)[number];
+declare const TEXT_WEIGHTS: readonly [
+    "normal",
+    "semibold",
+    "bold",
+    "regular",
+    "semi-bold"
+];
+export type TextWeight = (typeof TEXT_WEIGHTS)[number];
+declare const TEXT_ALIGNS: readonly [
+    "start",
+    "center",
+    "end",
+    "inherit"
+];
+export type TextAlign = (typeof TEXT_ALIGNS)[number];
+declare const TEXT_SIZES: readonly [
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "inherit",
+    "xx-small",
+    "x-small",
+    "small",
+    "medium",
+    "large",
+    "x-large"
+];
+export type TextSize = (typeof TEXT_SIZES)[number];
+declare const TEXT_HYPHENS: readonly [
+    "none",
+    "manual",
+    "auto",
+    "inherit"
+];
+export type TextHyphens = (typeof TEXT_HYPHENS)[number];
 declare const TEXT_LIST_TYPES: readonly [
     "unordered",
     "numbered",