@porsche-design-system/components-react 4.0.0-beta.1 → 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,116 +652,6 @@ declare const FLAG_NAMES: readonly [
     "za"
 ];
 export type FlagName = typeof FLAG_NAMES[number];
-declare const breakpoints: readonly [
-    "base",
-    "xs",
-    "s",
-    "m",
-    "l",
-    "xl",
-    "xxl"
-];
-export type Breakpoint = (typeof breakpoints)[number];
-export type BreakpointValues<T> = {
-    [key in Breakpoint]?: 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",
-    "_parent",
-    "_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",
@@ -752,19 +673,29 @@ declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-haspopup"
 ];
 export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
-declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
-    "role"
+declare const breakpoints: readonly [
+    "base",
+    "xs",
+    "s",
+    "m",
+    "l",
+    "xl",
+    "xxl"
 ];
-export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
-export type ScrollerScrollToPosition = {
-    scrollPosition: number;
-    isSmooth?: boolean;
-} | string;
-declare const SCROLL_INDICATOR_POSITIONS: readonly [
-    "top",
-    "center"
+export type Breakpoint = (typeof breakpoints)[number];
+export type BreakpointValues<T> = {
+    [key in Breakpoint]?: T;
+} & {
+    base: T;
+};
+export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+declare const LINK_TARGETS: readonly [
+    "_self",
+    "_blank",
+    "_parent",
+    "_top"
 ];
-export type ScrollerAlignScrollIndicator = (typeof SCROLL_INDICATOR_POSITIONS)[number];
+export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
 export type MultiSelectState = FormState;
 export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
 export type MultiSelectChangeEventDetail = {
@@ -814,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",
@@ -844,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;
@@ -880,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"
 ];
@@ -922,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",
@@ -954,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"
@@ -982,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",
@@ -1013,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;
@@ -1062,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;
@@ -1222,6 +1331,21 @@ export type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
 export type RadioGroupState = FormState;
 export type RadioGroupDirection = GroupDirection;
 export type RadioGroupChangeEventDetail = Event;
+declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
+    "top",
+    "center"
+];
+/** @deprecated */
+export type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
+declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
+    "role"
+];
+export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
+/** @deprecated */
+export type ScrollerScrollToPosition = {
+    scrollPosition: number;
+    isSmooth?: boolean;
+} | string;
 export type SegmentedControlChangeEventDetail = {
     value: string | number;
 };
@@ -1245,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 [
@@ -1291,27 +1430,43 @@ declare const TABS_SIZES: readonly [
     "medium"
 ];
 export type TabsSize = (typeof TABS_SIZES)[number];
+declare const TABS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBackground = (typeof TABS_BACKGROUNDS)[number];
 declare const TABS_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsWeight = (typeof TABS_WEIGHTS)[number];
 export type TabsUpdateEventDetail = {
     activeTabIndex: number;
 };
+declare const TABS_BAR_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBarBackground = (typeof TABS_BAR_BACKGROUNDS)[number];
 declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
 export type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
+export type TabsBarUpdateEventDetail = {
+    activeTabIndex: number;
+};
 declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
-export type TabsBarUpdateEventDetail = {
-    activeTabIndex: number;
-};
 export type TagIcon = IconName | "none";
 declare const TAG_VARIANTS: readonly [
     "primary",
@@ -1338,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);