@porsche-design-system/components-react 4.0.0-alpha.0 → 4.0.0-beta.0

package/CHANGELOG.md

@@ -14,6 +14,142 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-beta.0] - 2026-02-12
+
+### Added
+
+- `Checkbox` (🧪Experimental): Supports now being wrapped inside a native `label` element to provide more flexibility in
+  positioning a custom label ([#4124](https://github.com/porsche-design-system/porsche-design-system/pull/4124))
+- `Canvas`: prop `background` to set the background color to `canvas | surface`
+- `Carousel`:
+  - `width` prop now supports `wide` and `full` values
+    ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+  - `--p-carousel-px` CSS custom property introduced to control horizontal padding (when used, the `width` prop has no
+    effect anymore) ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+  - `--p-carousel-ps`, `--p-carousel-pe` CSS custom property introduced to control the logical inline start/end padding
+    ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+- `Angular`: Bumped peer dependency to support Angular new major version 21
+  ([#4178](https://github.com/porsche-design-system/porsche-design-system/pull/4178))
+- `AG Grid`:
+  - Bumped peer dependency to support AG Grid new major version 35
+    ([#4143](https://github.com/porsche-design-system/porsche-design-system/issues/4143))
+  - Refreshed visuals to reflect new color tokens
+- `Tailwind CSS`:
+  - `--transition-duration-sm`, `--transition-duration-md`, `--transition-duration-lg`, `--transition-duration-xl`,
+    `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--radius-xs`, `--radius-xl`, `--radius-2xl`, `--radius-3xl`,
+    `--radius-4xl`, `--radius-full`, `--border-width-1`, `--border-width-2`, `--color-frosted-strong`
+- `SCSS`:
+  - Common hint: Previous variables are still available as alias and mapped to the new ones for backward compatibility.
+  - Breakpoint: `$breakpoint-xs`, `$breakpoint-sm`, `$breakpoint-md`, `$breakpoint-lg`, `$breakpoint-xl` and
+    `$breakpoint-2xl`
+  - Blur: `$blur-frosted`
+  - Border: `$radius-xs`, `$radius-sm`, `$radius-md`, `$radius-lg`, `$radius-xl`, `$radius-2xl`, `$radius-3xl`,
+    `$radius-4xl` and `$radius-full`
+  - Color Scheme: `@mixin color-scheme()`
+  - Color: `$color-focus`,`$color-canvas`, `$color-surface`, `$color-frosted`, `$color-frosted-soft`,
+    `$color-frosted-strong`, `$color-backdrop`, `$color-contrast-lower`, `$color-contrast-low`,
+    `$color-contrast-medium`, `$color-contrast-high`, `$color-contrast-higher`, `$color-primary`, `$color-success`,
+    `$color-success-low`, `$color-success-medium`, `$color-success-frosted`, `$color-success-frosted-soft`,
+    `$color-warning`, `$color-warning-low`, `$color-warning-medium`, `$color-warning-frosted`,
+    `$color-warning-frosted-soft`,`$color-error`, `$color-error-low`, `$color-error-medium`,
+    `$color-error-frosted`,`$color-error-frosted-soft`, `$color-info`, `$color-info-low`, `$color-info-medium`,
+    `$color-info-frosted`, `$color-info-frosted-soft`
+  - Focus: `@mixin focus-visible()`
+  - Gradient: `$gradient-stops-fade-dark`
+  - Skeleton: `@mixin skeleton()`
+  - Media Query: `@mixin media-query-min()`, `@mixin media-query-max()` and `@mixin media-query-min-max()`
+  - Motion: `$duration-sm`, `$duration-md`, `$duration-lg`, `$duration-xl`, `$ease-in-out`, `$ease-in` and `$ease-out`
+  - Shadow: `$shadow-sm`, `$shadow-md` and `$shadow-lg`
+  - Spacing: `$spacing-fluid-xs`, `$spacing-fluid-sm`, `$spacing-fluid-md`, `$spacing-fluid-lg`, `$spacing-fluid-xl`,
+    `$spacing-fluid-2xl`, `$spacing-static-xs`, `$spacing-static-sm`, `$spacing-static-md`, `$spacing-static-lg`,
+    `$spacing-static-xl` and `$spacing-static-2xl`
+  - Typography: `@mixin prose-display-lg()`, `@mixin prose-display-md()`, `@mixin prose-display-sm()`,
+    `@mixin prose-heading-2xl()`, `@mixin prose-heading-xl()`, `@mixin prose-heading-lg()`, `@mixin prose-heading-md()`,
+    `@mixin prose-heading-sm()`, `@mixin prose-text-xl()`, `@mixin prose-text-lg()`, `@mixin prose-text-md()`,
+    `@mixin prose-text-sm()`, `@mixin prose-text-xs()` `@mixin prose-text-2xs()`, `$font-porsche-next`,
+    `$leading-normal`, `$typescale-2xs`, `$typescale-xs`, `$typescale-sm`, `$typescale-md`, `$typescale-lg`,
+    `$typescale-xl`, `$typescale-2xl`, `$font-weight-normal`, `$font-weight-semibold` and `$font-weight-bold`
+- Emotion, Vanilla-Extract:
+  - Blur: `blurFrosted`
+  - Border: `radiusXs`, `radiusSm`, `radiusMd`, `radiusLg`, `radiusXl`, `radius2xl`, `radius3xl`, `radius4xl` and
+    `radiusFull`
+  - Color: `colorCanvas`, `colorSurface`, `colorFrosted`, `colorFrostedSoft`, `colorFrostedStrong`,
+    `colorBackdrop`,`colorPrimary`, `colorContrastHigher`, `colorContrastHigh`, `colorContrastMedium`,
+    `colorContrastLow`, `colorContrastLower`, `colorInfo`, `colorInfoMedium`, `colorInfoLow`, `colorInfoFrosted`,
+    `colorInfoFrostedSoft`, `colorSuccess`, `colorSuccessMedium`, `colorSuccessLow`, `colorSuccessFrosted`,
+    `colorSuccessFrostedSoft`, `colorWarning`, `colorWarningMedium`, `colorWarningLow`, `colorWarningFrosted`,
+    `colorWarningFrostedSoft`, `colorError`, `colorErrorMedium`, `colorErrorLow`, `colorErrorFrosted`,
+    `colorErrorFrostedSoft`, `colorFocus`,
+  - Color Scheme: `colorSchemeStyles()`
+  - Focus: `getFocusVisibleStyle()`
+  - Gradient: `gradientStopsFadeDark`,
+  - Motion: `durationSm`, `durationMd`, `durationLg`, `durationXl`, `easeInOut`, `easeIn` and `easeOut`
+  - Shadow: `shadowSm`, `shadowMd` and `shadowLg`
+  - Spacing: `spacingFluidXs`, `spacingFluidSm`, `spacingFluidMd`, `spacingFluidLg`, `spacingFluidXl`,
+    `spacingFluid2xl`, `spacingStaticXs`, `spacingStaticSm`, `spacingStaticMd`, `spacingStaticLg`, `spacingStaticXl` and
+    `spacingStatic2xl`
+  - Typography: `proseDisplayLg()`, `proseDisplayMd()`, `proseDisplaySm()`, `proseHeading2Xl()`, `proseHeadingXl()`,
+    `proseHeadingLg()`, `proseHeadingMd()`, `proseHeadingSm()`, `proseTextXl()`, `proseTextLg()`, `proseTextMd()`,
+    `proseTextSm()`, `proseTextXs()`, `proseText2Xs()`, `fontPorscheNext`, `leadingNormal`, `typescale2Xs`,
+    `typescaleXs`, `typescaleSm`, `typescaleMd`, `typescaleLg`, `typescaleXl`, `typescale2xl`, `fontWeightNormal` and
+    `fontWeightSemibold`
+
+### Changed
+
+- Remove theme prop since it's handled by CSS variables which can be controlled by `.scheme-light`, `.scheme-dark` or
+  `.scheme-light-dark` CSS class, e.g. `<p-button>Some label</p-button>` inside `<div class="scheme-dark">…</div>` will
+  render the dark theme.
+- `Link Tile`, `Button Tile`: uses `color-scheme: dark` by default
+- `Tailwind CSS`:
+  - Reset `--text-*`, `--breakpoint-*`, `--radius-*` and `--shadow-*`
+  - Rename theme CSS classes `.light` to `.scheme-light`, `.dark` to `.scheme-dark` and `.auto` to `.scheme-light-dark`
+- `Canvas`: visual appearance on mobile view
+- `Styles`: Import paths for npm package:
+
+```diff
+- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles';
++ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/emotion';
+```
+
+```diff
+- import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';
++ import { … } from '@porsche-design-system/components-{js|angular|react|vue}/vanilla-extract';
+```
+
+```diff
+- @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;
++ @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;
+```
+
+### Fixed
+
+- `Vanilla Extract`: grid style media query not working
+- `Radio Group Option`: missing `delegatesFocus`
+  ([#4135](https://github.com/porsche-design-system/porsche-design-system/pull/4135))
+
+### Removed
+
+- Styles (SCSS, Emotion, Vanilla-Extract): `getHoverStyle`/`pds-hover`
+
+- Tailwind CSS: `--color-disabled`
+
+- Emotion: `opts` parameter in `getSkeletonStyle()` including `theme` (New skeleton style works with `light-dark()` CSS
+  color function)
+
+```diff
+- getSkeletonStyle({ theme: 'light|dark' })
++ getSkeletonStyle()
+```
+
+- Vanilla Extract: `opts` parameter in `getSkeletonStyle()` including `theme` (New skeleton style works with
+  `light-dark()` CSS color function)
+
+```diff
+const skeletonAnimation = keyframes(skeletonKeyframes);
+- const Skeleton = style(getSkeletonStyle(skeletonAnimation, { theme: 'light|dark' }));
++ const Skeleton = style(getSkeletonStyle(skeletonAnimation));
+```
+
 ## [4.0.0-alpha.0] - 2025-12-12
 
 See the full [migration guide](/news/migration-guide/porsche-design-system/) for a detailed explanation of all changes
@@ -28,7 +164,6 @@ and migration steps.
     `@porsche-design-system/components-{js|angular|react|vue}/legacy-radius.css`
 
 - `Divider`: value `contrast-lower` for prop `color`
-
 - `Multi Select, Select`:
   - `selected` slot for custom selection rendering and enabling complex options
   - `options-status` slot for loading, error and no results states when using custom filtering
@@ -116,6 +251,10 @@ and migration steps.
   - Reset all default Tailwind color tokens
   - Remove -light and -dark color tokens, instead control theming via `.light`, `.dark` or `.auto` CSS class only
 
+- Styles (SCSS, Emotion, Vanilla-Extract)
+  - heading styles use a regular instead of semi-bold font-weight
+  - border-radius large was changed from `12px` to `8px`, since more radius styles are now available
+
 ### Removed
 
 - `Partials`:
@@ -263,6 +402,53 @@ and migration steps.
   ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
   ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
 
+## [3.32.0] - 2026-02-04
+
+## [3.32.0-rc.2] - 2026-02-03
+
+### Added
+
+- `Checkbox`, `Input-*`, `Multi-Select`, `Pin Code`, `Radio Button Group`, `Segmented-Control`, `Select`, `Textarea`:
+  New slot `label-after` to add custom content (e.g. `Popover`) after the `label` element
+  ([#4181](https://github.com/porsche-design-system/porsche-design-system/pull/4181))
+- `Angular`: Bumped peer dependency to support Angular new major version 21
+  ([#4178](https://github.com/porsche-design-system/porsche-design-system/pull/4178))
+- `Carousel`:
+  - `width` prop now supports `wide` and `full` values
+    ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+  - `--p-carousel-px` CSS custom property introduced to control horizontal padding (when used, the `width` prop has no
+    effect anymore) ([#4180](https://github.com/porsche-design-system/porsche-design-system/pull/4180))
+
+## [3.32.0-rc.1] - 2026-01-12
+
+### Added
+
+- `AG Grid`: Bumped peer dependency to support AG Grid new major version 35
+  ([#4143](https://github.com/porsche-design-system/porsche-design-system/issues/4143))
+
+### Fixed
+
+- `Radio Group Option`: missing `delegatesFocus`
+  ([#4135](https://github.com/porsche-design-system/porsche-design-system/pull/4135))
+
+## [3.32.0-rc.0] - 2025-12-16
+
+### Added
+
+- `Textarea`: add CSS Variables for `fieldSizing`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight` to control the
+  intrinsic sizing behavior ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
+- `Canvas`: prop `background` to set the background color to `canvas | surface`
+
+### Fixed
+
+- `Multi Select`: trim whitespace of selected options text
+  ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
+
+### Changed
+
+- `Link Tile`, `Button Tile`: appearance in compact mode
+- `Canvas`: appearance on mobile view
+
 ## [3.31.0] - 2025-11-13
 
 ## [3.31.0-rc.0] - 2025-11-11

package/cjs/lib/components/canvas.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ react.forwardRef(({ background = 'canvas', onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarStartOpen];
+    const propsToSync = [background, sidebarEndOpen, sidebarStartOpen];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['background', 'sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/{styles → emotion}/cjs/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var styles = require('@porsche-design-system/components-js/styles');
+var emotion = require('@porsche-design-system/components-js/emotion');
 
 
 
-Object.keys(styles).forEach(function (k) {
+Object.keys(emotion).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
-		get: function () { return styles[k]; }
+		get: function () { return emotion[k]; }
 	});
 });

package/emotion/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/emotion';

package/emotion/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/emotion';

package/{styles → emotion}/package.json

@@ -8,11 +8,6 @@
       "types": "./esm/index.d.ts",
       "import": "./esm/index.mjs",
       "default": "./cjs/index.cjs"
-    },
-    "./vanilla-extract": {
-      "types": "./vanilla-extract/esm/index.d.ts",
-      "import": "./vanilla-extract/esm/index.mjs",
-      "default": "./vanilla-extract/cjs/index.cjs"
     }
   }
 }

package/esm/lib/components/canvas.wrapper.d.ts

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarStartUpdateEventDetail } from '../types';
+import type { CanvasBackground, CanvasSidebarStartUpdateEventDetail } from '../types';
 export type PCanvasProps = BaseProps & {
+    /**
+     * Defines the background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */
@@ -19,6 +23,10 @@ export type PCanvasProps = BaseProps & {
     sidebarStartOpen?: boolean;
 };
 export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Defines the background color of the main section and auto adjust it for the sidebar
+     */
+    background?: CanvasBackground;
     /**
      * Emitted when the sidebar end requests to be dismissed.
      */

package/esm/lib/components/canvas.wrapper.mjs

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCanvas = /*#__PURE__*/ forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ forwardRef(({ background = 'canvas', onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarStartOpen];
+    const propsToSync = [background, sidebarEndOpen, sidebarStartOpen];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['background', 'sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/display.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PDisplayProps = BaseProps & {
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**
@@ -28,7 +28,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**

package/esm/lib/components/divider.wrapper.d.ts

@@ -2,7 +2,7 @@ import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection } from '../types';
 export type PDividerProps = BaseProps & {
     /**
-     * Defines color depending on theme.
+     * Defines color.
      */
     color?: DividerColor;
     /**
@@ -12,7 +12,7 @@ export type PDividerProps = BaseProps & {
 };
 export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines color depending on theme.
+     * Defines color.
      */
     color?: DividerColor;
     /**

package/esm/lib/components/heading.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PHeadingProps = BaseProps & {
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**
@@ -28,7 +28,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**

package/esm/lib/components/icon.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PIconProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     color?: IconColor;
     /**
@@ -28,7 +28,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     color?: IconColor;
     /**

package/esm/lib/components/radio-group-option.wrapper.d.ts

@@ -34,4 +34,6 @@ export declare const PRadioGroupOption: import("react").ForwardRefExoticComponen
      * The value for the input.
      */
     value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/text.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PTextProps = BaseProps & {
      */
     align?: TextAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: TextColor;
     /**
@@ -32,7 +32,7 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<impor
      */
     align?: TextAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: TextColor;
     /**

package/esm/lib/components/textarea.wrapper.d.ts

@@ -78,7 +78,7 @@ export type PTextareaProps = BaseProps & {
      */
     resize?: TextareaResize;
     /**
-     * The number of rows of the textarea.
+     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
      */
     rows?: number;
     /**
@@ -176,7 +176,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      */
     resize?: TextareaResize;
     /**
-     * The number of rows of the textarea.
+     * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
      */
     rows?: number;
     /**

package/esm/lib/types.d.ts

@@ -847,9 +847,16 @@ export type ButtonTileAlign = TileAlign;
 export type CanvasSidebarStartUpdateEventDetail = {
     open: boolean;
 };
+declare const CANVAS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface"
+];
+export type CanvasBackground = (typeof CANVAS_BACKGROUNDS)[number];
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
-    "extended"
+    "extended",
+    "wide",
+    "full"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];

package/global-styles/cn/font-face.css

@@ -1 +1 @@
-@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}
+@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:"Porsche Next";font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}