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

package/CHANGELOG.md

@@ -14,6 +14,263 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-beta.1] - 2026-03-02
+
+### Added
+
+- `SCSS`, `Emotion`, `Vanilla Extract`: bring back PDS v3 import paths for better DX and backward compatibility.
+- `Accordion`:
+  - Slot `summary` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Slot `summary-before` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Slot `summary-after` ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Prop `background` with values `canvas | surface | frosted | none (default)`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Prop `align-marker` with values `start | end (default)`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-px` to control the horizontal padding
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-py` to control the vertical padding
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - CSS Variable `--p-accordion-summary-top` to control the optional sticky top position
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+
+### Changed
+
+- `Accordion`:
+  - Modernize visual appearance ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+  - Use semantic HTML element `<details>` and `<summary>` internally (instead of divs and buttons) for better
+    accessibility and native behavior
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: `value` sync with the underlying native `<input />` or `<textarea />` element
+- `Checkbox`, `Input-*`, `Multi-Select`, `Pin Code`, `Radio Button Group`, `Segmented-Control`, `Select`, `Textarea`:
+  Slot `label-after` is not affected by `disbaled` states anymore
+  ([#4181](https://github.com/porsche-design-system/porsche-design-system/pull/4181))
+- **Vue:** All component events now emit the full `CustomEvent` instead of just the event detail. The event detail must
+  be accessed via `event.detail`. Props and other component data can be accessed directly via `event.target`.
+
+```diff
+<script setup lang="ts">
+import { type AccordionUpdateEventDetail, PAccordion } from '@porsche-design-system/components-vue';
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+- const onUpdate = (event: AccordionUpdateEventDetail): void => {
++ const onUpdate = (event: CustomEvent<AccordionUpdateEventDetail>): void => {
+-  isOpen1.value = event.open;
++  isOpen1.value = event.detail.open; // You can also access the value from the component itself via e.target, e.g. e.target.open
+};
+</script>
+
+<template>
+  <PAccordion :open="isOpen" @update="onUpdate">
+    ...
+  </PAccordion>
+</template>
+```
+
+### Removed
+
+- `Accordion`:
+  - Prop `tag` use `heading-tag` (deprecated with v4 now) instead or make use of `slot="summary"` for more flexibility
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    - <p-acccordion heading="Some summary" tag="h3">
+        <p-text>Some details</p-text>
+    </p-accordion>
+    + <p-accordion>
+    +   <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+        <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+
+### Deprecated
+
+- `SCSS`: Import path for npm package:
+
+```diff
+- @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;
++ @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *;
+```
+
+- `Emotion`: Import path 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';
+```
+
+- `Vanilla Extract`: Import path for npm package:
+
+```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';
+```
+
+- `Accordion`:
+  - Prop `heading`, `heading-tag` and `size` in favor of `slot="summary"` for more flexibility
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    - <p-acccordion heading="Some summary" heading-tag="h3" size="small">
+        <p-text>Some details</p-text>
+    </p-accordion>
+    + <p-accordion>
+    +   <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+        <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+  - Slot `heading` in favor of `slot="summary"`
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+    ```diff
+    <p-acccordion>
+    - <span slot="heading">Some summary</span>
+      <p-text>Some details</p-text>
+    </p-accordion>
+    <p-accordion>
+    + <p-heading slot="summary" tag="h3" size="small">Some summary</p-heading>
+      <p-text>Some details</p-text>
+    </p-accordion>
+    ```
+  - CSS Variable `--p-accordion-position-sticky-top`, use `--p-accordion-summary-top` instead
+    ([#4201](https://github.com/porsche-design-system/porsche-design-system/pull/4201))
+
+## [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 +285,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 +372,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`:
@@ -262,6 +522,89 @@ and migration steps.
 - `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
   ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
   ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
+- `Multi Select`: trim whitespace of selected options text
+  ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
+
+## [3.32.1] - 2026-02-24
+
+## [3.32.1-rc.0] - 2026-02-20
+
+### Fixed
+
+- `Input Email`, `Input Password`, `Input Tel`, `Pin Code`: optimize input direction and behavior in RTL mode
+  ([#4209](https://github.com/porsche-design-system/porsche-design-system/pull/4209))
+
+## [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
+
+- `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
+    ([#4111](https://github.com/porsche-design-system/porsche-design-system/pull/4111))
+- `Multi Select, Select`:
+  - `filter` slot to allow custom asynchronous filtering
+  - `toggle` event when opening/closing the dropdown
+    ([#4089](https://github.com/porsche-design-system/porsche-design-system/pull/4089))
+- `Segmented Control`: add `state` and `message` props to enable visual validation states
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023)) `Segmented Control`: add `label`,
+- `Segmented Control`: `label`, `desription`, `hideLabel` and `required` props for better form integration
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023))
+- `Textarea`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4102](https://github.com/porsche-design-system/porsche-design-system/pull/4102))
+- `Tag Dismissible`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4114](https://github.com/porsche-design-system/porsche-design-system/pull/4114))
+- Flags: added `AL, BD, RE` flags ([#4128](https://github.com/porsche-design-system/porsche-design-system/pull/4128))
+- `Input Month`, `Input Week`: ([#4126](https://github.com/porsche-design-system/porsche-design-system/pull/4126))
+- `Input Search`: `maxLength` & `minLength` prop to specify the maximum and minimum number of characters the user can
+  enter ([#4131](https://github.com/porsche-design-system/porsche-design-system/pull/4131))
+- `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))
+
+### Fixed
+
+- `Checkbox`: missing deprecation for `CheckboxUpdateEventDetail` event & disabled prop is not mutable
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: disabled prop is not mutable & error when disabled and invalid
+- `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
+  ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
+  ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
+- `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
 

package/cjs/lib/components/accordion.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ react.forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
-    const propsToSync = [compact, heading, headingTag, open, size, sticky];
+    const propsToSync = [alignMarker, background, compact, heading, headingTag, open, size, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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/accordion.wrapper.d.ts

@@ -1,16 +1,24 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
+import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
-     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     * Aligns the marker within the summary section.
+     */
+    alignMarker?: AccordionAlignMarker;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: AccordionBackground;
+    /**
+     * Displays the accordion in compact mode.
      */
     compact?: boolean;
     /**
-     * Defines the heading used in accordion.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -18,29 +26,37 @@ export type PAccordionProps = BaseProps & {
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
-     * Defines if accordion is open.
+     * Controls whether the accordion is open or closed.
      */
     open?: boolean;
     /**
-     * The text size.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     * @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
      */
     sticky?: boolean;
 };
 export declare const PAccordion: 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"> & {
     /**
-     * Displays the Accordion as compact version with thinner border and smaller paddings.
+     * Aligns the marker within the summary section.
+     */
+    alignMarker?: AccordionAlignMarker;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: AccordionBackground;
+    /**
+     * Displays the accordion in compact mode.
      */
     compact?: boolean;
     /**
-     * Defines the heading used in accordion.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -48,15 +64,15 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
-     * Defines if accordion is open.
+     * Controls whether the accordion is open or closed.
      */
     open?: boolean;
     /**
-     * The text size.
+     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     * @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
      */
     sticky?: boolean;
 } & {

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, headingTag, open, size, sticky];
+    const propsToSync = [alignMarker, background, compact, heading, headingTag, open, size, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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;
     /**