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

package/ssr/esm/lib/dsr-components/display.d.ts

@@ -1,6 +1,8 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the display text." }
+ *
+ * @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead.
  */
 export declare class DSRDisplay extends Component<any> {
     host: HTMLElement;

package/ssr/esm/lib/dsr-components/drilldown-item.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the main content." }
- * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." } *
- * @slot {"name": "header", "description": "Shows a custom header section on mobile view" } *
+ * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." }
+ * @slot {"name": "header", "description": "Shows a custom header section on mobile view." }
  * @experimental
  */
 export declare class DSRDrilldownItem extends Component<any> {

package/ssr/esm/lib/dsr-components/flyout.d.ts

@@ -3,7 +3,7 @@ import { Component } from 'react';
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the main content." }
  * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
- * @slot {"name": "sub-footer", "description": "Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content." }
+ * @slot {"name": "sub-footer", "description": "Renders additional content below the footer, such as legal information or FAQs. It appears when the flyout has enough space or when the user scrolls to the end." }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}
  */

package/ssr/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/tailwindcss/index.css

@@ -143,6 +143,12 @@
   --text-xl--line-height: calc(6px + 2.125ex);
   --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
   --text-2xl--line-height: calc(6px + 2.125ex);
+  --text-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --text-3xl--line-height: calc(6px + 2.125ex);
+  --text-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --text-4xl--line-height: calc(6px + 2.125ex);
+  --text-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
+  --text-5xl--line-height: calc(6px + 2.125ex);
 
   /* Breakpoint */
   --breakpoint-xs: 480px;
@@ -492,7 +498,7 @@
 
 /* Typography: Heading */
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-normal text-sm text-primary;
+  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
 }
 @utility prose-heading-md {
   @apply font-porsche-next not-italic font-normal text-md text-primary;
@@ -506,14 +512,23 @@
 @utility prose-heading-2xl {
   @apply font-porsche-next not-italic font-normal text-2xl text-primary;
 }
+@utility prose-heading-3xl {
+  @apply font-porsche-next not-italic font-normal text-3xl text-primary;
+}
+@utility prose-heading-4xl {
+  @apply font-porsche-next not-italic font-normal text-4xl text-primary;
+}
+@utility prose-heading-5xl {
+  @apply font-porsche-next not-italic font-normal text-5xl text-primary;
+}
 
 /* Typography: Display */
 @utility prose-display-sm {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(1.8rem,2.41vw+1.32rem,4.21rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-3xl;
 }
 @utility prose-display-md {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.03rem,3.58vw+1.31rem,5.61rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-4xl;
 }
 @utility prose-display-lg {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-5xl;
 }