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

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. */
@@ -621,6 +652,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 +689,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 +696,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 +745,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 +786,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 +857,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 +903,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 +941,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 +989,89 @@ 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 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 +1087,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 +1144,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 +1369,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 +1493,53 @@ 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_LIST_TYPES: readonly [
     "unordered",
     "numbered",

package/global-styles/cn/index.css

@@ -132,13 +132,9 @@ body {
   --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
   --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
   --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
-
-  --p-breakpoint-xs: 480px;
-  --p-breakpoint-sm: 760px;
-  --p-breakpoint-md: 1000px;
-  --p-breakpoint-lg: 1300px;
-  --p-breakpoint-xl: 1760px;
-  --p-breakpoint-2xl: 1920px;
+  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
 
   --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);

package/global-styles/index.css

@@ -132,13 +132,9 @@ body {
   --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
   --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
   --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
-
-  --p-breakpoint-xs: 480px;
-  --p-breakpoint-sm: 760px;
-  --p-breakpoint-md: 1000px;
-  --p-breakpoint-lg: 1300px;
-  --p-breakpoint-xl: 1760px;
-  --p-breakpoint-2xl: 1920px;
+  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
 
   --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);

package/global-styles/variables.css

@@ -121,13 +121,9 @@
   --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
   --p-typescale-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
   --p-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
-
-  --p-breakpoint-xs: 480px;
-  --p-breakpoint-sm: 760px;
-  --p-breakpoint-md: 1000px;
-  --p-breakpoint-lg: 1300px;
-  --p-breakpoint-xl: 1760px;
-  --p-breakpoint-2xl: 1920px;
+  --p-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --p-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --p-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
 
   --p-spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --p-spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.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",
@@ -16,8 +16,12 @@
   "author": "Dr. Ing. h.c. F. Porsche AG",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/porsche-design-system/porsche-design-system"
+  },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.0.0-beta.2"
+    "@porsche-design-system/components-js": "4.0.0-beta.3"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",