@porsche-design-system/components-react/CHANGELOG.md

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

# Changelog

## Porsche Design System

All notable changes to this project will be documented in this file and published as following npm packages:

- `@porsche-design-system/components-js`
- `@porsche-design-system/components-angular`
- `@porsche-design-system/components-react`
- `@porsche-design-system/components-vue`

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0), and this project adheres to
[Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

## [4.3.0] - 2026-06-24

## [4.3.0-rc.0] - 2026-06-24

### Added

- `Tabs`, `Tabs Bar`: `aria` prop to provide additional context for screen readers
  ([#4538](https://github.com/porsche-design-system/porsche-design-system/pull/4538))

### Changed

- `Angular`: Widen peer dependency to support Angular version 21 + 22
  ([#4546](https://github.com/porsche-design-system/porsche-design-system/pull/4546))

## [4.2.0] - 2026-06-22

## [4.2.0-rc.5] - 2026-06-12

### Added

- `Angular`: Bumped peer dependency to support Angular new major version 22
  ([#4505](https://github.com/porsche-design-system/porsche-design-system/pull/4505))
- `Flyout`: Prop `fullscreen` to stretch the flyout to the full viewport width with squared corners, useful for smaller
  viewports ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))

### Fixed

- `Flyout`, `Modal`, `Sheet` ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498)):
  - Nested dialog elements no longer cause rendering issues in Chromium
  - Keep the dialog element on the `#top-layer` during the fade-out animation in Safari and Firefox, so closing
    (especially nested) dialogs no longer drop behind surrounding content
- `Banner`: Keep the popover on the `#top-layer` during the fade-out animation in Safari and Firefox, so it no longer
  drops behind surrounding content while closing
  ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))

## [4.2.0-rc.4] - 2026-06-10

### Fixed

- `Radio Group`: Prevent clicks on `label-after` slot from bubbling to the host element
  ([#4477](https://github.com/porsche-design-system/porsche-design-system/pull/4477))
- `Flyout`, `Modal`, `Sheet`: Prevent dialog elements from reserving layout space in closed state when placed within a
  new stacking context ([#4494](https://github.com/porsche-design-system/porsche-design-system/pull/4494))

## [4.2.0-rc.3] - 2026-06-09

### Fixed

- `Flyout`, `Modal`, `Sheet`: content no longer disappears in Chromium when many elements with a frosted
  `backdrop-filter` (e.g. `p-tag`) are rendered
  ([#4490](https://github.com/porsche-design-system/porsche-design-system/pull/4490))

## [4.2.0-rc.2] - 2026-06-04

### Added

- `Tailwind CSS`: CJK `font-family` `:lang()` selectors are available in the theme by default to auto-detect Simplified
  Chinese, Traditional Chinese, Japanese, and Korean content
  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `SCSS` ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
  - `$font-porsche-next-zh-hans`, `$font-porsche-next-zh-hant`, `$font-porsche-next-ja`, `$font-porsche-next-ko`: CJK
    `font-family` tokens
  - `cjk-font-family()`: mixin that emits `:lang()` selectors to auto-detect CJK content
- `Emotion`, `Vanilla Extract` ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
  - `fontPorscheNextZhHans`, `fontPorscheNextZhHant`, `fontPorscheNextJa`, `fontPorscheNextKo`: CJK `font-family` tokens
  - `getCJKFontFamilyStyle()`: returns `:lang()` selectors to auto-detect CJK content
- `Accordion`: `indent` prop to indent the slotted content to be vertically aligned with the text of the summary section
  ([#4478](https://github.com/porsche-design-system/porsche-design-system/pull/4478))

### Changed

- Improved CJK `font-family` support with dedicated, OS-specific stacks per language
  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
  - **Simplified Chinese:** PingFang SC (macOS), Microsoft YaHei (Windows), Noto Sans SC (Android, Linux, ChromeOS)
  - **Traditional Chinese:** PingFang TC (macOS), Microsoft JhengHei (Windows), Noto Sans TC (Android, Linux, ChromeOS)
  - **Japanese:** Hiragino Sans (macOS), Yu Gothic (Windows), Noto Sans JP (Android, Linux, ChromeOS)
  - **Korean:** Apple SD Gothic Neo (macOS), Malgun Gothic (Windows), Noto Sans KR (Android, Linux, ChromeOS)
- Text-rendering components now switch to language-specific CJK font stacks via `:lang()` selectors when a matching
  `lang` attribute is set ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `Tailwind CSS` — `.font-porsche-next`, `.prose-heading-*`, `.prose-text-*` now apply `:lang()` selectors to
  auto-detect CJK content ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `SCSS` — `prose-heading-*()`, `prose-text-*()` now apply `:lang()` selectors to auto-detect CJK content
  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `Emotion`, `Vanilla Extract` — `proseHeading*`, `proseText*` now apply `:lang()` selectors to auto-detect CJK content
  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `Input Text`: the global `inputmode` attribute is now passed through to the underlying native `input` element
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Input Text`, `Input Number`: extended types of `value` prop to allow `string | number | null`
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Input Date`, `Input Email`, `Input Password`, `Input Search`, `Input Tel`, `Input Time`, `Input Url`, `Textarea`:
  extended types of `value` prop to allow `string | null`
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Select`, `Select Option`: extended types of `value` prop to allow `string | number | null`
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Multi Select`: extended types of `value` prop to allow `string[] | number[] | null`
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Multi Select Option`: extended types of `value` prop to allow `string | number`
  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
- `Tabs`, `Tabs Bar`, `Link Tile`, `Link Tile Product`, `Button Tile`, `Stepper Horizontal`, `Accordion`, `Popover`,
  `Flyout`, `Modal`, `Sheet`: aligned `border-radius` with the app and car design system for improved visual coherence
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
- `Tabs Bar`: refined active tab background color to improve visual coherence with the app and vehicle design system
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
- `Tabs`, `Tabs Bar`: height now matches `p-button` and `p-link` when `background="none"` is used, so the visual height
  stays stable when combined with buttons or links
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))

### Fixed

- `Tailwind CSS`: Prefixing support ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `Inline Notification`: The action label expands when the heading or content section becomes multiline
  ([#4418](https://github.com/porsche-design-system/porsche-design-system/pull/4418))
- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
  `Input Time`, `Input Url`, `Textarea`: form value, validity and `disabled`/`readOnly` state now stay in sync with the
  internal native control, so native form submission, reset and validation behave correctly when these props change
  dynamically ([4446](https://github.com/porsche-design-system/porsche-design-system/pull/4446))
- `Accordion`: not causing scrollbar on outer scroll container (e.g. flyout) when closed with position:absolute slotted
  content ([#4449](https://github.com/porsche-design-system/porsche-design-system/pull/4449))
- Added `semibold` alias for Arabic Porsche Next, mapped to `bold` as a fallback since the font only provides `regular`
  and `bold` weights. ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
- `Flyout`, `Modal`, `Sheet`: the dismiss button now has a solid background to ensure sufficient contrast and a11y
  compliance when placed above content such as media elements
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
- `Flyout`, `Modal`, `Sheet`: the dialog's rounded corners now clip slotted content (e.g. media elements) so it no
  longer overflows the dialog's `border-radius`
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))

### Removed

- Legacy border-radius stylesheet `@porsche-design-system/components-{js|angular|react|vue}/legacy-radius.css`, since
  visual coherence between web, app and car design system is now achieved
  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))

## [4.2.0-rc.1] - 2026-05-18

### Added

- `Angular`, `Vue`: expose typings for component props (e.g. `PButtonProps`, `PInputProps`, etc.) for better type safety
  and developer experience ([#4403](https://github.com/porsche-design-system/porsche-design-system/pull/4403))

## [4.2.0-rc.0] - 2026-05-12

### Added

- `AG Grid`:
  - custom compact theme ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
  - minor style adjustments ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
- `Ai Tag`: New component to mark AI-generated/AI-modified content
  ([#4400](https://github.com/porsche-design-system/porsche-design-system/pull/4400))

## [4.1.0] - 2026-05-06

## [4.1.0-rc.0] - 2026-05-05

### Added

- `Input Search`: `aria` prop provides additional context for screen reader
  ([#4321](https://github.com/porsche-design-system/porsche-design-system/pull/4321))

### Fixed

- `Tabs Bar`: scrolling page down when below the fold
  ([#4392](https://github.com/porsche-design-system/porsche-design-system/pull/4392))

## [4.0.0] - 2026-04-29

## [4.0.0-rc.2] - 2026-04-28

### Added

- `Tag`: Prop `variants` supports new values:
  `'info-frosted' | 'success-frosted' | 'warning-frosted' | 'error-frosted' |`
  ([#4320](https://github.com/porsche-design-system/porsche-design-system/pull/4320))
- `Carousel`: `--p-carousel-prev-next-color-scheme` CSS variable in order to change the `color-scheme` of the prev/next
  buttons individually ([#4308](https://github.com/porsche-design-system/porsche-design-system/pull/4308))

### Changed

- `Tag`: Slightly adjusted padding for better visual appearance
  ([#4320](https://github.com/porsche-design-system/porsche-design-system/pull/4320))
- `Tokens`, `Tailwind CSS`, `SCSS`, `Emotion`, `Vanilla Extract`: Update notification frosted colors (success, error,
  warning, info) ([#4317](https://github.com/porsche-design-system/porsche-design-system/pull/4317))
- `Banner`, `Inline Notification`: prop or slot `heading` is recommended but not required anymore
  ([#4317](https://github.com/porsche-design-system/porsche-design-system/pull/4317))
- `Banner`, `Inline Notification`, `Toast`: visual alignment and color contrast improvements
  ([#4317](https://github.com/porsche-design-system/porsche-design-system/pull/4317))

### Fixed

- `Multi Select`, `Select`: not correctly updating when options within `p-optgroup` change dynamically
  ([#4278](https://github.com/porsche-design-system/porsche-design-system/pull/4279))
- `Flyout`, `Modal`, `Sheet`: `overflow: clip` causing issues
  ([#4296](https://github.com/porsche-design-system/porsche-design-system/pull/4296))
- `Link Pure`: focus border of slotted anchor
  ([#4285](https://github.com/porsche-design-system/porsche-design-system/pull/4285))
- `Accessibility`: improved internal ARIA attribute handling for various components, e.g. `Banner`,
  `Inline Notification` and `Input` elements.
  ([#4274](https://github.com/porsche-design-system/porsche-design-system/pull/4274))
- Prefixing: custom PDS prefixes allow numbers in the prefix name
  ([#4297](https://github.com/porsche-design-system/porsche-design-system/pull/4297))
- `Tailwind CSS`: Custom tailwind prefixing
  ([#4294](https://github.com/porsche-design-system/porsche-design-system/pull/4294))
- Form components: rendering issues of slotted label if provided as `display: block` element
  ([#4298](https://github.com/porsche-design-system/porsche-design-system/pull/4298))
- `Table`: incorrect cell padding when nested inside `Flyout`, `Modal` or `Sheet`
  ([#4314](https://github.com/porsche-design-system/porsche-design-system/pull/4314))
- `Tabs`, `Tabs Bar`:
  - keyboard navigation in RTL mode ([#4300](https://github.com/porsche-design-system/porsche-design-system/pull/4300))
  - animation flickering ([#4309](https://github.com/porsche-design-system/porsche-design-system/pull/4309))
  - hydration error ([#4309](https://github.com/porsche-design-system/porsche-design-system/pull/4309))
- `Select`, `Multi Select`: Optimize screen reader experience
  ([#4313](https://github.com/porsche-design-system/porsche-design-system/pull/4313))

### Deprecated

- `Banner`:
  - Slot `description` (use default slot instead)
    ([#4317](https://github.com/porsche-design-system/porsche-design-system/pull/4317))

## [4.0.0-rc.1] - 2026-04-07

### Added

- `Banner`:
  - Prop `position` with values: `BreakpointCustomizable<'top' | 'bottom'>` (default: `{ base: 'bottom', s: 'top' }`)
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
  - CSS Variable `--p-banner-top`: Defines the distance from the top of the viewport. Only takes effect when the
    `position` property is set to `top` (at the respective breakpoint).
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
  - CSS Variable `--p-banner-bottom`: Defines the distance from the bottom of the viewport. Only takes effect when the
    `position` property is set to `bottom` (at the respective breakpoint).
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
  - CSS Variable `--p-banner-max-w`: Defines the maximum width of the banner.
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
  - CSS Variable `--p-banner-inset-x`: Defines the horizontal offset of the banner from the edges of the viewport.
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
- `Tailwind CSS`: `--spacing-static-2xs`
  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
- `SCSS`: `$spacing-static-2xs` ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
- `Tokens`, `Emotion`, `Vanilla Extract`: `spacingStatic2xs`
  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))

### Changed

- `Banner`, `Inline Notification`: Improve visual appearance
  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
- `Banner`: `max-width` is now `100ch` by default to increase readability. Use CSS Variable `--p-banner-max-w` and
  `--p-banner-inset-x` to set custom `max-width` and horizontal offset.
  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
- `SCSS`:
  - All `prose-heading-*` and `prose-text-*` mixins set `color` to the primary token by default, overridable via the CSS
    cascade ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
- `Emotion`, `Vanilla Extract`:
  - All `proseHeading*` and `proseText*` style objects set `color` to the primary token by default, overridable in your
    own styles ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))

### Fixed

- `Accordion`: summary overlapping details when custom padding is applied
  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
- `Scroller`: mask not rendering on ios when `scrollbar` set to `true`
  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
- `Modal`, `Sheet`: visual bug in the corner when scrolled
  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
- `Model Signature`: `--p-model-signature-color` not working with gradients
  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
- `Tabs Bar`: flickering of active tab in certain cases
  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
- Global Styles: missing individual export for `color-scheme.css`
  ([#4260](https://github.com/porsche-design-system/porsche-design-system/pull/4260))
- `Table`: double focus outline of sort buttons
  ([#4270](https://github.com/porsche-design-system/porsche-design-system/pull/4270))

### Deprecated

- `Banner`:
  - CSS Variable `--p-banner-position-top` (use `--p-banner-top` instead)
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
  - CSS Variable `--p-banner-position-bottom` (use `--p-banner-bottom` instead)
    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))

## [4.0.0-rc.0] - 2026-03-27

## [4.0.0-beta.4] - 2026-03-25

### Added

- `Heading`:
  - Prop `hyphens` with values: `'none' (default) | 'auto' | 'manual' | 'inherit'`
- `Text`:
  - Prop `hyphens` with values: `'none' | 'auto' | 'manual' | 'inherit' (default)`
- `Icon`: `play-filled`, `arrow-down-left`, `arrow-down-right`, `arrow-up-left`, `arrow-up-right`

### Changed

- `Checkbox`: Improve visual appearance of the checked state
- `Radio Group`: Improve visual appearance of the checked state
- `Icon`: Improve visual appearance of `fast-backward`, `fast-forward`, `new-chat`, `pause`, `play`, `skip-backward`,
  `skip-forward`
- `Tag`: Improve visual appearance of variant `info`, `success`, `variant` and `error`
- `Tokens`: Update value of `typescaleXs`

### Fixed

- `Accordion`: missing `delegatesFocus`
  ([#4238](https://github.com/porsche-design-system/porsche-design-system/pull/4238))

### Removed

- CSS Variable `--p-hyphens`
- Hyphenation style in general: CSS `hyphens` and `overflow-wrap` properties are no longer applied globally across
  components. If you relied on automatic word hyphenation, you can restore the previous behavior by setting these
  inheritable properties on a common ancestor like `body`:

  ```css
  body {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  ```

  Since both properties are inheritable, they will cascade down to all child elements, including content within Shadow
  DOM components.

## [4.0.0-beta.3] - 2026-03-19

### Added

- Storefront: documentation for integrating Porsche Design System with AI coding assistants like GitHub Copilot and
  Cursor to generate accessible code that follows WCAG 2.2 AA standards.
  ([#4147](https://github.com/porsche-design-system/porsche-design-system/pull/4147))
- `Tokens`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Tailwind CSS`: `--text-3xl`, `--text-4xl`, `--text-5xl`, `.prose-heading-3xl`, `.prose-heading-4xl`,
  `.prose-heading-5xl` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `SCSS`: `$typescale-3xl`, `$typescale-4xl`, `$typescale-5xl`, `@mixin prose-heading-3xl()`,
  `@mixin prose-heading-4xl()`, `@mixin prose-heading-5xl()`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Emotion`, `Vanilla Extract`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`, `proseHeading3XlStyle`,
  `proseHeading4XlStyle`, `proseHeading5XlStyle`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Spinner`, `Flag`, `Icon`:
  - Prop `size` supports all typographic scale values:
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234),
    [#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Spinner`:
  - Prop `color` with values: `'primary' | 'inherit'`
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
  - CSS Variable `--p-spinner-size`: Defines the width and height of the spinner. Overrides the `size` property when
    set. ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
  - CSS Variable `--p-spinner-color`: Defines the foreground color. Overrides the `color` property when set.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
  - CSS Variable `--p-spinner-track-color`: Defines the track/background color. Overrides the `color` property when set.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
- `Flag`:
  - CSS Variable `--p-flag-size`: Defines the width and height of the flag. Overrides the `size` property when set.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
- `Icon`:
  - CSS Variable `--p-icon-size`: Defines the width and height of the icon. Overrides the `size` property when set.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
  - CSS Variable `--p-icon-color`: Defines the icon color. Overrides the `color` property when set.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))
  - Prop `color` supports new value `'contrast-higher'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Button Pure`, `Link Pure`:
  - Prop `size` supports new typographic scale values:
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - Prop `color` supports new values `'contrast-higher' | 'contrast-high' | 'contrast-medium'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Text`:
  - Prop `size` supports new typographic scale values:
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - Prop `weight` supports new value `'bold'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - Prop `color` supports new value `'contrast-higher'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Heading`:
  - Prop `size` supports new typographic scale values:
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'inherit'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - Prop `weight` supports new value `'bold'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - Prop `color` supports new values `'contrast-higher' | 'contrast-high' | 'contrast-medium'`
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

### Changed

- `Spinner`, `Flag`, `Icon`:
  - The `size` prop is breakpoint customizable.
    ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234),
    [#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
  - When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against
    the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based
    components. ([#4234](https://github.com/porsche-design-system/porsche-design-system/pull/4234))

    ```diff
    - <p-spinner size="inherit" style="width: 100px; height: 100px;"></p-spinner>
    + <p-spinner style="--p-spinner-size: 100px;"></p-spinner>

    // When using size="inherit" with a defined font-size, the spinner size is calculated from the global line-height (ex-unit) based on that font-size."
    <p-spinner size="inherit" style="font-size: 100px;"></p-spinner>
    ```

    ```diff
    - <p-icon size="inherit" style="width: 100px; height: 100px;"></p-icon>
    + <p-icon style="--p-icon-size: 100px;"></p-icon>

    // When using size="inherit" with a defined font-size, the icon size is calculated from the global line-height (ex-unit) based on that font-size."
    <p-icon size="inherit" style="font-size: 100px;"></p-icon>
    ```

    ```diff
    - <p-flag size="inherit" style="width: 100px; height: 100px;"></p-flag>
    + <p-flag style="--p-flag-size: 100px;"></p-flag>

    // When using size="inherit" with a defined font-size, the flag size is calculated from the global line-height (ex-unit) based on that font-size."
    <p-flag size="inherit" style="font-size: 100px;"></p-flag>
    ```

- `Pagination`: Modernize visual appearance
  ([#4241](https://github.com/porsche-design-system/porsche-design-system/pull/4241))

### Removed

- `Emotion, Vanilla Extract` (added in `v4.0.0-beta.0`): `proseDisplayLgStyle`, `proseDisplayMdStyle`,
  `proseDisplaySmStyle` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `SCSS` (added in `v4.0.0-beta.0`): `@mixin prose-display-lg()`, `@mixin prose-display-md()`,
  `@mixin prose-display-sm()` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
- `Text`: Value `contrast-low` for `color` prop since it's not a11y compliant. Use `contrast-medium` instead.
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

### Deprecated

- `Text`:
  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'` of prop `size` (use
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-text size="xx-small">…</p-text>
    + <p-text size="2xs">…</p-text>

    - <p-text size="x-small">…</p-text>
    + <p-text size="xs">…</p-text>

    - <p-text size="small">…</p-text>
    + <p-text size="sm">…</p-text>

    - <p-text size="medium">…</p-text>
    + <p-text size="md">…</p-text>

    - <p-text size="large">…</p-text>
    + <p-text size="lg">…</p-text>

    - <p-text size="x-large">…</p-text>
    + <p-text size="xl">…</p-text>
    ```

  - Values `'regular' | 'semi-bold'` of prop `weight` (use `'normal' | 'semibold'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-text weight="regular">…</p-text>
    + <p-text weight="normal">…</p-text>

    - <p-text weight="semi-bold">…</p-text>
    + <p-text weight="semibold">…</p-text>
    ```

- `Heading`:
  - Values `'small' | 'medium' | 'large' | 'x-large' | 'xx-large'` of prop `size` (use
    `'sm' | 'md' | 'lg' | 'xl' | '2xl'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-heading size="small">…</p-heading>
    + <p-heading size="sm">…</p-heading>

    - <p-heading size="medium">…</p-heading>
    + <p-heading size="md">…</p-heading>

    - <p-heading size="large">…</p-heading>
    + <p-heading size="lg">…</p-heading>

    - <p-heading size="x-large">…</p-heading>
    + <p-heading size="xl">…</p-heading>

    - <p-heading size="xx-large">…</p-heading>
    + <p-heading size="2xl">…</p-heading>
    ```

  - Values `'regular' | 'semi-bold'` of prop `weight` (use `'normal' | 'semibold'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

- `Icon`:
  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'` of prop `size` (use
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-icon size="xx-small">…</p-icon>
    + <p-icon size="2xs">…</p-icon>

    - <p-icon size="x-small">…</p-icon>
    + <p-icon size="xs">…</p-icon>

    - <p-icon size="small">…</p-icon>
    + <p-icon size="sm">…</p-icon>

    - <p-icon size="medium">…</p-icon>
    + <p-icon size="md">…</p-icon>

    - <p-icon size="large">…</p-icon>
    + <p-icon size="lg">…</p-icon>

    - <p-icon size="x-large">…</p-icon>
    + <p-icon size="xl">…</p-icon>

    - <p-icon size="xx-large">…</p-icon>
    + <p-icon size="2xl">…</p-icon>
    ```

- `Spinner`:
  - Values `'small' | 'medium' | 'large'` of prop `size` (use `'sm' | 'md' | 'lg'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-spinner size="small">…</p-spinner>
    + <p-spinner size="sm">…</p-spinner>

    - <p-spinner size="medium">…</p-spinner>
    + <p-spinner size="md">…</p-spinner>

    - <p-spinner size="large">…</p-spinner>
    + <p-spinner size="lg">…</p-spinner>
    ```

- `Button Pure`, `Link Pure`:
  - Values `'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'` of prop `size` (use
    `'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'` instead)
    ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

    ```diff
    - <p-button-pure size="xx-small">…</p-button-pure>
    + <p-button-pure size="2xs">…</p-button-pure>

    - <p-button-pure size="x-small">…</p-button-pure>
    + <p-button-pure size="xs">…</p-button-pure>

    - <p-button-pure size="small">…</p-button-pure>
    + <p-button-pure size="sm">…</p-button-pure>

    - <p-button-pure size="medium">…</p-button-pure>
    + <p-button-pure size="md">…</p-button-pure>

    - <p-button-pure size="large">…</p-button-pure>
    + <p-button-pure size="lg">…</p-button-pure>

    - <p-button-pure size="x-large">…</p-button-pure>
    + <p-button-pure size="xl">…</p-button-pure>
    ```

- `Display` ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

  ```diff
  - <p-display size="large">…</p-display>
  + <p-heading size="5xl">…</p-heading>

  - <p-display size="medium">…</p-display>
  + <p-heading size="4xl">…</p-heading>

  - <p-display size="small">…</p-display>
  + <p-heading size="3xl">…</p-heading>
  ```

- `Tailwind CSS`: `.prose-display-lg`, `.prose-display-md`, `.prose-display-sm`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

  ```diff
  - <h1 class="prose-display-lg">…</h1>
  + <h1 class="prose-heading-5xl">…</h1>

  - <h1 class="prose-display-md">…</h1>
  + <h1 class="prose-heading-4xl">…</h1>

  - <h1 class="prose-display-sm">…</h1>
  + <h1 class="prose-heading-3xl">…</h1>
  ```

- `SCSS`: `@mixin pds-display-large`, `@mixin pds-display-medium`, `@mixin pds-display-small`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

  ```diff
  - @include pds-display-large;
  + @include prose-heading-5xl;

  - @include pds-display-medium;
  + @include prose-heading-4xl;

  - @include pds-display-small;
  + @include prose-heading-3xl;
  ```

- `Emotion, Vanilla Extract`: `displayLargeStyle`, `displayMediumStyle`, `displaySmallStyle`
  ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))

  ```diff
  - ...displayLargeStyle,
  + ...proseHeading5XlStyle,

  - ...displayMediumStyle,
  + ...proseHeading4XlStyle,

  - ...displaySmallStyle,
  + ...proseHeading3XlStyle,
  ```

## [4.0.0-beta.2] - 2026-03-11

### Added

- `Scroller`:
  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - Prop `sticky`: Makes the indicator sticky at the top or bottom while scrolling depending on the scroll direction.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - CSS Variable `--p-scroller-indicator-top`: Defines the distance from the top of the viewport at which the indicator
    sticks when scrolling down and `sticky` is enabled.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - CSS Variable `--p-scroller-indicator-bottom`: Defines the distance from the bottom of the viewport at which the
    indicator sticks when scrolling up and `sticky` is enabled.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - CSS Variable `--p-scroller-gap`: Defines the gap between slotted nodes.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs Bar`:
  - Prop `background`: Defines the background color. Use `frosted` only on images, videos or gradients.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs`:
  - Prop `background`: Defines the background color. Use `frosted` only on images, videos or gradients.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - Prop `compact`: Displays with reduced spacing and smaller padding for a more condensed layout.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Table`:
  - Prop `sticky`: Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll
    direction. ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - CSS Variable `--p-table-scroll-indicator-top`: Defines the distance from the top of the viewport at which the scroll
    indicator sticks when scrolling down and `sticky` is enabled.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - CSS Variable `--p-table-scroll-indicator-bottom`: Defines the distance from the bottom of the viewport at which the
    scroll indicator sticks when scrolling up and `sticky` is enabled.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))

### Changed

- `Scroller`:
  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs Bar`:
  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs`:
  - Modernize visual appearance ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Table`:
  - Use modernized scroller internally
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Stepper Horizontal`:
  - Use modernized scroller internally
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))

### Deprecated

- `Scroller`:
  - Prop `alignScrollIndicator`: Will be removed with next major release, has no effect anymore.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
  - Prop `scrollToPosition`: Will be removed with next major release, use native `scrollIntoView()` on the slotted
    element itself, e.g.
    `el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', container: 'nearest' })`.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs Bar`:
  - Prop `weight`: Will be removed with next major release, has no effect anymore.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))
- `Tabs`:
  - Prop `weight`: Will be removed with next major release, has no effect anymore.
    ([#4228](https://github.com/porsche-design-system/porsche-design-system/pull/4228))

## [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
and migration steps.

### Added

- Global Styles: mandatory CSS styles (normalize