@porsche-design-system/components-js/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]

## [3.35.0] - 2026-05-06

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

### Added

- `AI-Tag`: New component to mark AI-generated/AI-modified content
  ([#4236](https://github.com/porsche-design-system/porsche-design-system/pull/4236))

### 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))

## [3.34.0] - 2026-04-09

## [3.34.0-rc.0] - 2026-04-01

### Added

- `Segmented Control`: `noWrap` property to render items inline with optional scroller
  ([#4244](https://github.com/porsche-design-system/porsche-design-system/pull/4244))

### Fixed

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

## [3.33.0] - 2026-03-09

## [3.33.0-rc.0] - 2026-03-04

### Added

- `Tag`: new `variant` property to define background colors which complies now with PDS `v4`
  ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))
- `Checkbox`: add warning for Firefox form restore bug

### Changed

- `Tag`: deprecated `color` property, use `variant` property instead to define background colors which complies now with
  PDS `v4` ([#4227](https://github.com/porsche-design-system/porsche-design-system/pull/4227))

## [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))

## [3.31.0] - 2025-11-13

## [3.31.0-rc.0] - 2025-11-11

### Added

- `hyphens` CSS property can be changed by CSS variable `--p-hyphens` in all components containing text content
  ([#4093](https://github.com/porsche-design-system/porsche-design-system/pull/4093))

### Fixed

- `Segmented Control`: restore proportional shrinking of items when container is narrow
  ([#4094](https://github.com/porsche-design-system/porsche-design-system/pull/4094))

## [3.30.0] - 2025-10-31

## [3.30.0-rc.3] - 2025-10-30

### Added

- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
  `Input Time`, `Input Url`: implicit submit on `Enter` key press when used inside a form
  ([#4084](https://github.com/porsche-design-system/porsche-design-system/pull/4084))

## [3.30.0-rc.2] - 2025-10-24

### Added

- `Flag`: added `AD, GI, LI, MC, ME, TW` flags & `XX` for unknown region
  ([#4074](https://github.com/porsche-design-system/porsche-design-system/pull/4074))
- `Segmented Control`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#4020](https://github.com/porsche-design-system/porsche-design-system/pull/4020))
- Vue: export `prefixInjectionKey` ([#4079](https://github.com/porsche-design-system/porsche-design-system/pull/4079))

### Changed

- `Flag`: international flag replaces `DE` flag as fallback for an unknown region
  ([#4074](https://github.com/porsche-design-system/porsche-design-system/pull/4074))

### Fixed

- `Radio Group`: fixed `compact` mode styles
  ([#4073](https://github.com/porsche-design-system/porsche-design-system/pull/4073))

## [3.30.0-rc.1] - 2025-10-21

### Added

- Angular: form components implement ControlValueAccessor interface to support Angular forms out of the box
  ([#4048](https://github.com/porsche-design-system/porsche-design-system/pull/4048))
- Vue: form components support `v-model` with argument `value|checked`. Can be used like this:
  `<PInputText v-model:value="foo" />`
  ([#4066](https://github.com/porsche-design-system/porsche-design-system/pull/4066))
- `Pin Code`, `Segmented Control`:
  - `update` event is deprecated. Use `change` event instead.
  - `blur` event ([#4050](https://github.com/porsche-design-system/porsche-design-system/pull/4050))
- `Select`, `Multi Select`:
  - `update` event is deprecated. Use `change` event instead.
  - `blur` event ([#4046](https://github.com/porsche-design-system/porsche-design-system/pull/4046))
- `Link Tile`, `Button Tile`: added `footer` slot
  ([#4025](https://github.com/porsche-design-system/porsche-design-system/pull/4025))
- `Radio Group`: ([#4042](https://github.com/porsche-design-system/porsche-design-system/pull/4042))
- `Radio Group`: `blur` event ([#4057](https://github.com/porsche-design-system/porsche-design-system/pull/4057))
- `Flyout`: Prop `backdrop` ([#4058](https://github.com/porsche-design-system/porsche-design-system/pull/4058))

### Changed

- `Radio Button Wrapper`: component is deprecated. Use `Radio Group` instead.
  ([#4042](https://github.com/porsche-design-system/porsche-design-system/pull/4042))

### Fixed

- `Textarea`, `Input Password`: `input` event `target` doesn't have updated `value`
  ([#4048](https://github.com/porsche-design-system/porsche-design-system/pull/4048))
- `Select Wrapper`: disabled options in native dropdown not displayed correctly
  ([#4046](https://github.com/porsche-design-system/porsche-design-system/pull/4046))
- `Tailwind`: change `--color-base` to `--color-canvas` to avoid conflicts with `text-base`
  ([#4037](https://github.com/porsche-design-system/porsche-design-system/pull/4037))
- `Button`, `Link`: rendering of `variant="ghost"` in high contrast mode (HCM)
  ([#4032](https://github.com/porsche-design-system/porsche-design-system/pull/4032))

## [3.30.0-rc.0] - 2025-09-10

### Added

- `Icon`: `ai-3d-object`, `ai-code`, `ai-edit`, `ai-image`, `ai-scale`, `ai-sound`, `ai-text`, `ai-video`
  ([#4022](https://github.com/porsche-design-system/porsche-design-system/pull/4022))
- `Model Signature`: `gt3`, `gt3-rs` and `gts`
  ([#4012](https://github.com/porsche-design-system/porsche-design-system/pull/4021))
- `Button`, `Button Pure`, `Button Tile`, `Link`, `Link Pure`, `Link Tile`: `aria-description` is now supported via
  `aria` prop to provide additional context for screen readers.
  ([#3969](https://github.com/porsche-design-system/porsche-design-system/pull/3969))
- `Pin Code`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#4001](https://github.com/porsche-design-system/porsche-design-system/pull/4001))
- `Checkbox`: `update` event is deprecated. Use `change` event instead.
  ([#4010](https://github.com/porsche-design-system/porsche-design-system/pull/4010))

### Fixed

- `Link Tile`, `Button Tile`, `Link Tile Model Signature`: fix overflowing content
  ([#4018](https://github.com/porsche-design-system/porsche-design-system/pull/4018))
- `Select Wrapper`: fix axe-core violation when both `filter` and `description` prop are used
  ([#4011](https://github.com/porsche-design-system/porsche-design-system/pull/4011))

## [3.29.0] - 2025-08-20

## [3.29.0-rc.5] - 2025-08-19

### Changed

- `Checkbox`, `Multi Select`, `Select`, `Pin Code`, `Textarea`: removed slotted anchor styles
  ([#3981](https://github.com/porsche-design-system/porsche-design-system/pull/3981))

### Fixed

- `Popover`: support for custom slotted button & improvements
  ([#3976](https://github.com/porsche-design-system/porsche-design-system/pull/3976))

## [3.29.0-rc.4] - 2025-08-15

### Added

- `Flag`: ([#3964](https://github.com/porsche-design-system/porsche-design-system/pull/3964))
- `Input Url`: ([#3949](https://github.com/porsche-design-system/porsche-design-system/pull/3949))
- `Multi Select`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
- `Fieldset`: ARIA role `radiogroup` is now supported via `aria` prop. Internal ARIA attributes for `aria-invalid` and
  `aria-required`. ([#3957](https://github.com/porsche-design-system/porsche-design-system/pull/3957))
- `Input Date`, `Input Time`: ([#3954](https://github.com/porsche-design-system/porsche-design-system/pull/3954))

### Changed

- `Multi Select`, `Select`: `background` is now transparent to be aligned with other form fields
  ([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
- `Multi Select`, `Select`: improved a11y and highlight of options
  ([#3953](https://github.com/porsche-design-system/porsche-design-system/pull/3953))
- `Multi Select`: aligned filter and keyboard behavior with `Select`
  ([#3943](https://github.com/porsche-design-system/porsche-design-system/pull/3943))
- `Scroller`: Deprecation of prop `gradientColor` because gradient is now managed internally and adapts to all themes
  and background colors automatically.
  ([#3962](https://github.com/porsche-design-system/porsche-design-system/pull/3962))

## [3.29.0-rc.3] - 2025-07-29

### Fixed

- Partials: `topLevelAwait` issue in ESM build
  ([#3947](https://github.com/porsche-design-system/porsche-design-system/pull/3947))

## [3.29.0-rc.2] - 2025-07-28

### Changed

- Partials: provide CJS & ESM build ([#3945](https://github.com/porsche-design-system/porsche-design-system/pull/3945))

## [3.29.0-rc.1] - 2025-07-15

### Added

- `Popover`: support for custom slotted button
  ([#3861](https://github.com/porsche-design-system/porsche-design-system/pull/3861))
- `Icon`: `ai-spark` and `ai-spark-filled`
  ([#3916](https://github.com/porsche-design-system/porsche-design-system/pull/3916))
- `Input Text`: `counter` prop functions independently of `max-length`, allowing character count display even when no
  limit is set ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))
- `Input Email`: ([#3927](https://github.com/porsche-design-system/porsche-design-system/pull/3927))
- `Input Tel`: ([#3928](https://github.com/porsche-design-system/porsche-design-system/pull/3928))

### Changed

- `Input Search`: `indicator` prop now defaults to `false`
  ([#3917](https://github.com/porsche-design-system/porsche-design-system/pull/3917))
- Angular: updated peer dependency to `>=20.0.0 <21.0.0`
- **Breaking Change** `Textarea`:
  - Renamed the `showCounter` prop to `counter`.
  - Changed default behavior: the `counter` is now disabled by default (`false` instead of `true`).

  ```diff
  - <p-textarea name="some-name" showCounter="false"></p-textarea>
  + <p-textarea name="some-name"></p-textarea>
  ```

  To enable the counter explicitly:

  ```diff
  - <p-textarea name="some-name"></p-textarea>
  + <p-textarea name="some-name" counter="true"></p-textarea>
  ```

  ⚠️ This is a breaking change — you must update all instances using `showCounter`.
  ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))

### Fixed

- `Carousel`: component does not work correctly if an invalid `lang` value is provided
  ([#3924](https://github.com/porsche-design-system/porsche-design-system/pull/3924))
- Vue: fixed initial render for `dark` and `auto` themes in `PorscheDesignSystemProvider`
  ([#3898](https://github.com/porsche-design-system/porsche-design-system/pull/3898))

## [3.29.0-rc.0] - 2025-06-27

### Added

- `Input Search`: ([#3874](https://github.com/porsche-design-system/porsche-design-system/pull/3874))
- `Input Number`, `Input Password`: added loading state
  ([#3874](https://github.com/porsche-design-system/porsche-design-system/pull/3874))
- `Input Text`: ([#3897](https://github.com/porsche-design-system/porsche-design-system/pull/3897))
- `Select`: `filter` prop to enable an input in the dropdown to filter options
  ([#3893](https://github.com/porsche-design-system/porsche-design-system/pull/3893))
- `Flyout`: expose `--ref-p-flyout-pt` and `--ref-p-flyout-px` read only CSS variable
  ([#3902](https://github.com/porsche-design-system/porsche-design-system/pull/3902))

## [3.28.0] - 2025-06-02

### Added

- `Input Number`: ([#3855](https://github.com/porsche-design-system/porsche-design-system/pull/3855))

### Fixed

- `Select Wrapper`: update of scroll position if dropdown is navigated with keyboard
  ([#3858](https://github.com/porsche-design-system/porsche-design-system/pull/3858))
- `Select`, `Multi Select`: replacement of static (english) a11y announcement of active `option` with dynamic
  announcement through `ariaActiveDescendantElement`
  ([#3826](https://github.com/porsche-design-system/porsche-design-system/pull/3826))

## [3.28.0-rc.3] - 2025-05-19

### Added

- `Styles`: theme for `tailwindcss` including utilities available under
  `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';`
  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))

### Changed

- Partials: `getInitialStyles` removed default styles for `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `b` and `strong`
  ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))

#### Fixed

- `Multi Select`: enable full a11y compliance
  ([#3819](https://github.com/porsche-design-system/porsche-design-system/pull/3819))
- Accessibility: fix ARIA live announcements of form components status messages
  ([#3796](https://github.com/porsche-design-system/porsche-design-system/pull/3796))

## [3.28.0-rc.2] - 2025-04-23

### Fixed

- `Canvas`: stealing focus from `Text Field Wrapper`
  ([#3843](https://github.com/porsche-design-system/porsche-design-system/pull/3843))

## [3.28.0-rc.1] - 2025-04-14

### Fixed

- `Drilldown`, `Drilldown Item`: visibility for slotted content (experimental)
  ([#3833](https://github.com/porsche-design-system/porsche-design-system/pull/3833))

## [3.28.0-rc.0] - 2025-04-11

### Added

- `Input Password`: ([#3763](https://github.com/porsche-design-system/porsche-design-system/pull/3763))
- `Drilldown`, `Drilldown Item`: CSS variable `--p-drilldown-grid-template` and `--p-drilldown-gap` (experimental)
  ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
- `Drilldown Item`: named slot `button` and `header` (experimental)
  ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
- `Drilldown Link`: (experimental) ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))

### Changed

- **Breaking Change** `Flyout Multilevel`, `Flyout Multilevel Item`: renamed (experimental) component to `Drilldown` and
  `Drilldown Item` ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))
- **Breaking Change** `Drilldown Item` doesn't style slotted `<a>` tags anymore, instead use `Drilldown Link` or a
  custom link ([#3822](https://github.com/porsche-design-system/porsche-design-system/pull/3822))

### Fixed

- `aria` prop now supports a colon inside a value, e.g. `aria="{ 'aria-label': 'Always remember: yes you can!' }"`
  ([#3680](https://github.com/porsche-design-system/porsche-design-system/pull/3680))

## [3.27.3] - 2025-03-21

## [3.27.2] - 2025-03-20

## [3.27.2-rc.0] - 2025-03-18

### Changed

- `Table`: add border-bottom styles to `Table Head` to support both, empty and missing `Table Body`
  ([#3788](https://github.com/porsche-design-system/porsche-design-system/pull/3788))

### Fixed

- `Styles`: change `Gradient` color values from `rgba` to `hsla` to fix Chrome rendering bug
  ([#3793](https://github.com/porsche-design-system/porsche-design-system/pull/3793))

## [3.27.1] - 2025-03-05

## [3.27.1-rc.0] - 2025-03-05

### Fixed

- `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
  ([#3783](https://github.com/porsche-design-system/porsche-design-system/pull/3783))
- `Select`, `Multi Select`, `Select Wrapper`: remove positioning with native anchor positioning due to a Chrome bug
  ([#3780](https://github.com/porsche-design-system/porsche-design-system/pull/3780))

## [3.27.0] - 2025-02-28

## [3.27.0-rc.6] - 2025-02-28

### Added

- `Table`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
- `Table`: `layout` prop to render table with `table-layout: fixed` css for manual control of column widths
  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
- `Carousel`: `align-controls` prop to align the controls slot to the left or center (overwrites auto-alignment)
  ([#3766](https://github.com/porsche-design-system/porsche-design-system/pull/3766))

### Changed

- `Select`, `Multi Select`, `Select Wrapper`:
  - gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container
    or overflow context ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
  - gets positioned by [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
    or [Floating UI](https://floating-ui.com) as fallback for browsers not supporting it yet
    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
  - modernized visual appearance, dynamic max-height based on viewport and fade in animation of option list
    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
- `Select`, `Select Wrapper`:
  - focus outline becomes default focus style when no filter is used
    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
- `Carousel`: Center layout of Carousel on mobile view
  ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765))
- `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
  ([#3771](https://github.com/porsche-design-system/porsche-design-system/pull/3771))

## [3.27.0-rc.5] - 2025-02-20

### Fixed

- `AG Grid`: error on reload in next.js.
  ([#3759](https://github.com/porsche-design-system/porsche-design-system/pull/3759))

## [3.27.0-rc.4] - 2025-02-20

### Fixed

- `AG Grid`: not accessing cdn base url correctly.
  ([#3759](https://github.com/porsche-design-system/porsche-design-system/pull/3759))

## [3.27.0-rc.3] - 2025-02-18

### Fixed

- `AG Grid`: not resolving dependencies correctly.
  ([#3757](https://github.com/porsche-design-system/porsche-design-system/pull/3757))

## [3.27.0-rc.2] - 2025-02-18

### Fixed

- `AG Grid`: not resolving dependencies correctly.
  ([#3756](https://github.com/porsche-design-system/porsche-design-system/pull/3756))

## [3.27.0-rc.1] - 2025-02-17

### Changed

- **Breaking Change** `AG Grid`: Updated from v32 to v33, which introduced a new Theming API. AG Grid migrated from a
  CSS-based theming approach to a JavaScript object-based theming system. As a result, our custom theme also had to be
  adjusted accordingly. ([#3740](https://github.com/porsche-design-system/porsche-design-system/pull/3740))

### Fixed

- Styles: `vanilla-extract` returns `getMediaQueryMax`, `getMediaQueryMin`, `getMediaQueryMinMax` & `getSkeletonStyle`
  in wrong format ([#3753](https://github.com/porsche-design-system/porsche-design-system/pull/3753))

## [3.27.0-rc.0] - 2025-02-13

### Added

- `@font-face` supports Thai language
  ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750))
- Partials: `getFontLinks` supports preloading `thai` subset
  ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750))

### Changed

- `Popover`: gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll
  container ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732))

#### Removed

- `Popover`: default styling for slotted anchors
  ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732))

## [3.26.0] - 2025-02-07

## [3.26.0-rc.0] - 2025-02-06

### Added

- `Switch`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#3728](https://github.com/porsche-design-system/porsche-design-system/pull/3728))
- `Select`: `compact` prop to enable a smaller, space-saving version for compact layouts
  ([#3731](https://github.com/porsche-design-system/porsche-design-system/pull/3731))
- `Canvas`: named slot `sidebar-end-header`
  ([#3736](https://github.com/porsche-design-system/porsche-design-system/pull/3736))
- `Icon`: `4-wheel-drive`, `aggregation`, `arrow-compact-down`, `arrow-compact-left`, `arrow-compact-right`,
  `arrow-compact-up`, `arrows`, `battery-half`, `battery-one-quarter`, `battery-three-quarters`, `brain`, `cabriolet`,
  `charging-network`, `cloud`, `color-picker`, `compass`, `coupe`, `cut`, `door`, `drag`, `ear`, `error`,
  `exclamation-filled`, `fast-backward`, `fast-forward`, `file-csv`, `file-excel`, `flag`, `genuine-parts`,
  `geo-localization`, `grip`, `group`, `hand`, `highway-filled`, `history`, `laptop`, `limousine`, `linked`,
  `logo-apple-carplay`, `logo-apple-music`, `logo-kununu`, `logo-snapchat`, `microphone`, `news`, `north-arrow`,
  `online-search`, `paste`, `pivot`, `price-tag`, `qr-off`, `question-filled`, `radar`, `radio`, `return`, `road`,
  `seat`, `service-technician`, `skip-backward`, `skip-forward`, `stop`, `suv`, `theme`, `turismo`, `trigger-finger`,
  `unlinked` and `weather` ([#3737](https://github.com/porsche-design-system/porsche-design-system/pull/3737))

## [3.25.1] - 2025-01-23

## [3.25.1-rc.0] - 2025-01-23

### Fixed

- `Carousel`: throws error when object-like string is passed by `pagination`
  ([#3715](https://github.com/porsche-design-system/porsche-design-system/pull/3715))

## [3.25.0] - 2025-01-23

## [3.25.0-rc.1] - 2025-01-22

### Fixed

- `Carousel`: throws error when object-like string is passed by `slides-per-page`
  ([#3710](https://github.com/porsche-design-system/porsche-design-system/pull/3710))

## [3.25.0-rc.0] - 2025-01-21

### Added

- `Sheet` ([#3704](https://github.com/porsche-design-system/porsche-design-system/pull/3704))
- `Button`, `Button-Pure`: Add `form` prop to explicitly associate the component with a form, even when it's not
  directly nested within it. ([#3648](https://github.com/porsche-design-system/porsche-design-system/pull/3648))

### Changed

- `Table`: Enable `Table Head Cell` to be used within `Table Row` in addition to `Table Head Row` to further align with
  table structure defined by W3C ([#3701](https://github.com/porsche-design-system/porsche-design-system/pull/3701))

### Fixed

- `Textarea`, `Textarea Wrapper`, `Textfield Wrapper`: color contrast of `unit` prop and counter in `readonly` mode
  meets WCAG 2.2 AA standard ([#3693](https://github.com/porsche-design-system/porsche-design-system/pull/3693))

## [3.24.0] - 2025-01-08

## [3.24.0-rc.1] - 2025-01-08

## [3.24.0-rc.0] - 2025-01-07

### Added

- Styles: support for `vanilla-extract` available under
  `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';`
  ([#3666](https://github.com/porsche-design-system/porsche-design-system/pull/3666))

### Changed

- React: updated peer dependency to `>=19.0.0 <20.0.0`

## [3.23.0] - 2024-12-12

## [3.23.0-rc.0] - 2024-12-12

### Changed

- `Select`: Slotted image of selected option now visible in combobox
  ([#3651](https://github.com/porsche-design-system/porsche-design-system/pull/3651))

### Fixed

- `Flyout`: transition bug in Safari ([3674](https://github.com/porsche-design-system/porsche-design-system/pull/3674))
- `Styles`: dart sass deprecation warnings in `SCSS` variant
  ([3664](https://github.com/porsche-design-system/porsche-design-system/pull/3664))

## [3.22.1] - 2024-12-09

## [3.22.1-rc.0] - 2024-12-09

### Fixed

- `Flyout Multilevel`: Secondary scroll area not shown in iOS Safari (iPhone only)
  ([3663](https://github.com/porsche-design-system/porsche-design-system/pull/3663))

## [3.22.0] - 2024-12-06

## [3.22.0-rc.1] - 2024-12-06

### Added

- `Flyout Multilevel`: Supports infinite layers
  ([3647](https://github.com/porsche-design-system/porsche-design-system/pull/3647))

### Fixed

- Partials: error when using in projects without `react/jsx-runtime` as dependency
  ([#3660](https://github.com/porsche-design-system/porsche-design-system/pull/3660))
- `Textfield Wrapper`: text alignment of type `email` and `tel` values in RTL mode
  ([3655](https://github.com/porsche-design-system/porsche-design-system/pull/3655))
- `Popover`:
  - Rendering bug of drop-shadow in Safari 18.x
    ([3622](https://github.com/porsche-design-system/porsche-design-system/pull/3622))
  - Positioning in RTL mode if rendered inside a table (in #top-layer)
    ([3658](https://github.com/porsche-design-system/porsche-design-system/pull/3658))

## [3.22.0-rc.0] - 2024-11-19

### Added

- `Modal`, `Flyout`:
  - `aria-label` is generated from slotted header contents if `aria` prop is not provided
  - ARIA `role` to `aria` prop of `Modal` component to support setting `alertdialog` role
    ([3618](https://github.com/porsche-design-system/porsche-design-system/pull/3618))
- `Pin-Code`: Add `form` prop to explicitly associate the component with a form, even when it's not directly nested
  within it. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
- `Segmented-Control`: Use ElementInternals API and add `form` prop to explicitly associate the component with a form,
  even when it's not directly nested within it.
  ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614))

### Changed

- Angular: updated peer dependency to `>=19.0.0 <20.0.0`
- `Pin-Code`:
  - Remove native input and use ElementInternals API
  - **Breaking Change**: `Pin-Code` component no longer support native validation due to the removal of the underlying
    native `<input>` element. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
- `Styles`: `SCSS` variant uses `@forward/@use` internally to replace deprecated `@import`
  ([#3623](https://github.com/porsche-design-system/porsche-design-system/pull/3623))

### Fixed

- Partials: removed bundled `react/jsx-runtime` due to React 18/19 incompatibilities. When using `jsx` in the `format`
  option, it is necessary to have `react/jsx-runtime` as a dependency in the project included.
  ([#3613](https://github.com/porsche-design-system/porsche-design-system/pull/3613))
- `Select`, `Multi-Select`: Ensure that dynamically changing the `disabled` property via `optgroups` persists the
  `disabled` state for individual options within the group.
  ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614))

## [3.21.0] - 2024-11-12

## [3.21.0-rc.0] - 2024-11-11

### Added

- `Flyout`: Prop `footerBehavior` to always make footer fixed
  ([3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
- `Checkbox`, `Textarea`: `formDisabledCallback` and `formStateRestoreCallback` from ElementInternals API and sync
  validity with form element. ([#3528](https://github.com/porsche-design-system/porsche-design-system/pull/3528))
- `Link`, `Link Pure`, `Link Tile`: `aria-haspopup` is now supported for `aria` prop
  ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589))
- `Button`, `Link`: `compact` prop is breakpoint customizable
  ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580))
- `Select`, `Multi-Select`: Add `form` prop to explicitly associate these components with a specific form when they are
  not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))

### Changed

- `Select`, `Multi-Select`:
  - Remove native select and use ElementInternals API
    ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
  - **Breaking Change**: `Select` and `Multi-Select` components no longer support native validation due to the removal
    of the underlying native `<select>` element.

### Fixed

- `Flyout`: overlapping of scrollbar in iOS/iPadOS Safari when sticky header/footer is used
  ([#3607](https://github.com/porsche-design-system/porsche-design-system/pull/3607))
- `Carousel`: dynamic change in `slidesPerPages` when using `focusOnCenterSlide` prop breaks pagination
  ([#3592](https://github.com/porsche-design-system/porsche-design-system/pull/3592))
- `Flyout`, `Modal`:
  - transition not working correctly when using conditionally rendered content
    ([#3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
  - dismiss button not sticky in case header slot is not present
    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
  - dismiss button overlaps content area
    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
- `jsdom-polyfill`: errors from included polyfill packages
  ([3543](https://github.com/porsche-design-system/porsche-design-system/pull/3543))
- React: global `hidden` attribute with value `false` not working
  ([#3555](https://github.com/porsche-design-system/porsche-design-system/pull/3555))

## [3.20.0] - 2024-10-24

## [3.20.0-rc.1] - 2024-10-24

### Added

- React: better tree-shaking for `@porsche-design-system/components-react`
  ([#3554](https://github.com/porsche-design-system/porsche-design-system/pull/3554))
- `Icon`: `sidebar` ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))

### Changed

- `Canvas`: Improve UI and UX behaviour in Safari
  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))

### Fixed

- `Flyout`: transition animation in Chrome Browser if `Flyout` has scrollable content
  ([#3550](https://github.com/porsche-design-system/porsche-design-system/pull/3550))

## [3.20.0-rc.0] - 2024-10-18

### Added

- `Icon`: `attachment`, `dislike`, `dislike-filled`, `like`, `like-filled`, `new-chat`
  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))

### Changed

- `Canvas`: Improve UI and UX behaviour
  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))
- `Flyout`, `Modal`: Removed default styling for slotted anchors
  ([#3515](https://github.com/porsche-design-system/porsche-design-system/pull/3515))

## [3.19.0] - 2024-10-14

## [3.19.0-rc.4] - 2024-10-14

### Added

- `AG Grid`: custom theme ([#3517](https://github.com/porsche-design-system/porsche-design-system/pull/3517))
- `Checkbox`: Added a `compact` prop to enable a smaller, space-saving version of the checkbox for compact layouts.
  ([#3504](https://github.com/porsche-design-system/porsche-design-system/pull/3504))
- `Text`, `Display`, `Heading` and `Headline`: introduce new option `inherit` to prop `align`
  ([#3520](https://github.com/porsche-design-system/porsche-design-system/pull/3520))

### Fixed

- `Pin Code`, `Select Wrapper`: programmatic focus
  ([#3527](https://github.com/porsche-design-system/porsche-design-system/pull/3527))
- `Select Wrapper`: native option dropdown has wrong colors in theme dark
  ([#3523](https://github.com/porsche-design-system/porsche-design-system/pull/3523))
- `Switch`: width/height calculation of the toggle element supports browser based text only zoom
  ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
- Angular, React, Vue: missing `@deprecated` annotations for deprecated components
  ([#3525](https://github.com/porsche-design-system/porsche-design-system/pull/3525))
- Partials: Replace meta tag `apple-mobile-web-app-capable` with `mobile-web-app-capable` in `getMetaTagsAndIconLinks`
  partial. ([#3519](https://github.com/porsche-design-system/porsche-design-system/pull/3519))

## [3.19.0-rc.3] - 2024-10-02

### Fixed

- `Carousel`: remove gradient styles for carousel if `gradientColor` is not defined
  ([#3518](https://github.com/porsche-design-system/porsche-design-system/pull/3518))

## [3.19.0-rc.2] - 2024-10-01

### Added

- `Carousel`: introduce `trimSpace` prop
  ([#3496](https://github.com/porsche-design-system/porsche-design-system/pull/3496))
- `Checkbox`: ([#3498](https://github.com/porsche-design-system/porsche-design-system/pull/3498))

### Fixed

- `Checkbox Wrapper`, `Radio Button Wrapper`: rendering of `checked` state in Blink based Browsers when component is
  rendered in high contrast mode ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))

## [3.19.0-rc.1] - 2024-09-06

### Changed

- `Canvas`: Improve UX ([#3494](https://github.com/porsche-design-system/porsche-design-system/pull/3494))

## [3.19.0-rc.0] - 2024-09-03

### Added

- `componentsReady()`: Introduce optional `readyState` parameter
  ([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
- `Carousel`: introduce `focusOnCenterSlide` & `gradientColor` props
  ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))

### Changed

- `Text Field Wrapper`: width calculation of counter and unit element are now CSS based in relation to the number of
  characters ([#3472](https://github.com/porsche-design-system/porsche-design-system/pull/3472))

### Fixed

- `jsdom-polyfill`: errors from included polyfill packages
  ([3481](https://github.com/porsche-design-system/porsche-design-system/pull/3481))

## [3.18.0] - 2024-08-21

## [3.18.0-rc.0] - 2024-08-21

### Added

- `Button Tile`, `Link Tile`, `Link Tile Model Signature`: supports `<video/>` (the tile components automatically check
  for OS reduced motion setting to decide weather the video autoplay should be prevented or not to improve accessibility
  & UX) ([#3454](https://github.com/porsche-design-system/porsche-design-system/pull/3454))
- Extend deprecation console warnings by reference to causing DOM element
  ([#3439](https://github.com/porsche-design-system/porsche-design-system/pull/3439))
- `Textarea`: ([#3443](https://github.com/porsche-design-system/porsche-design-system/pull/3443))

### Changed

- Partials: `getInitialStyles` uses CSS `:defined` to determine the visibility of web components, as well as
  `[data-ssr]` attribute instead of `.ssr` class for Next JS and Remix
  ([#3466](https://github.com/porsche-design-system/porsche-design-system/pull/3466))
- Components: Use `:defined` & `[data-ssr]` to handle visibility of nested elements within Shadow DOM
  ([#3470](https://github.com/porsche-design-system/porsche-design-system/pull/3470))
- `Button`, `Link`: spacings adjusted for `compact` mode
- `Banner`, `Flyout`, `Inline Notification`, `Modal`, `Scroller`, `Toast`: button style
  ([#3435](https://github.com/porsche-design-system/porsche-design-system/pull/3435))
- `Select`: added `display: block` to host in order to be consistent with other form components
  ([#3462](https://github.com/porsche-design-system/porsche-design-system/pull/3462))

### Fixed

- `Select`, `Multi-Select`: programmatic focus
  ([#3462](https://github.com/porsche-design-system/porsche-design-system/pull/3462))
- `Button Tile`, `Link Tile`, `Link Tile Model Signature`: correct image position if custom css `position: absolute` is
  used on media element ([#3446](https://github.com/porsche-design-system/porsche-design-system/pull/3446))
- `Button`, `Link`: Safari rendering issue of `backdrop-filter` on border in variant `ghost`
  ([#3435](https://github.com/porsche-design-system/porsche-design-system/pull/3435))
- `Select`, `Select Wrapper`, `Multi Select`, `Textfield Wrapper`: `text-overflow` has now ellipsis behaviour and
  `min-width` is added to prevent text overlapping
  ([#3465](https://github.com/porsche-design-system/porsche-design-system/pull/3465))

## [3.17.0] - 2024-08-01

## [3.17.0-rc.2] - 2024-08-01

### Fixed

- `Optgoup`: hydration error in Next.js SSR context
  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
- `Select`: ensure slotted image width
  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))

## [3.17.0-rc.1] - 2024-07-31

### Added

- `Button`, `Link`:
  - Prop `variant` extended by value `ghost`
    ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))
  - Prop `compact` ([#3423](https://github.com/porsche-design-system/porsche-design-system/pull/3423))

### Fixed

- `Tabs Bar`: fixed tabindex issue when `Tabs Bar` is rendered with the `Scroller` component
  ([#3421](https://github.com/porsche-design-system/porsche-design-system/pull/3421))

## [3.17.0-rc.0] - 2024-07-29

### Added

- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
  - Named slot `header` ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
- `Link Tile`, `Button Tile`: Prop `size` extended by value `large`
  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
- `Tag`:
  - Prop `compact` ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
  - Prop `color` extended by value `background-frosted`
    ([#3411](https://github.com/porsche-design-system/porsche-design-system/pull/3411))
- Styles: `theme{Light|Dark}BackgroundFrosted` and `$pds-theme-{light|dark}-background-frosted` color
  ([#3409](https://github.com/porsche-design-system/porsche-design-system/pull/3409))
- `Optgroup`: Usable in combination with `Select` and `Multi Select`
  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))
- `Flyout`, `Modal`: Add custom events `motionVisibleEnd` and `motionHiddenEnd` to notify when opening and closing
  transitions are complete ([#3418](https://github.com/porsche-design-system/porsche-design-system/pull/3418))

### Changed

- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
  - Layout behaviour is able to break out of its aspect ratio in case content overflows to be a11y compliant and/or to
    improve visual alignment in CSS Grid context
    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))
  - Values `1:1 | 4:3 | 3:4 | 16:9 | 9:16` of prop `aspect-ratio` are deprecated and mapped to new values
    `1/1 | 4/3 | 3/4 | 16/9 | 9/16` to be aligned with CSS spec
    ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))

```diff
- <p-link-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile>
+ <p-link-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile>

- <p-button-tile aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-button-tile>
+ <p-button-tile aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-button-tile>

- <p-link-tile-model-signature aspect-ratio="1:1 | 4:3 | 3:4 | 16:9 | 9:16"></p-link-tile-model-signature>
+ <p-link-tile-model-signature aspect-ratio="1/1 | 4/3 | 3/4 | 16/9 | 9/16"></p-link-tile-model-signature>
```

- `Link Tile`, `Button Tile`: Value `default` of prop `size` is deprecated and mapped to new value `medium` to be in
  sync with typography sizing definition
  ([#3419](https://github.com/porsche-design-system/porsche-design-system/pull/3419))

```diff
- <p-link-tile size="default"></p-link-tile>
+ <p-link-tile size="medium"></p-link-tile>

- <p-button-tile size="default"></p-button-tile>
+ <p-button-tile size="medium"></p-button-tile>
```

- `Icon`: All icons are up-to-date with the One UI look
- Shorten asset filenames
- `Carousel`: Slides and `controls` slot are centered if `alignHeader` prop is set to `center` and amount of slides is
  less than `slidesPerPage` ([#3372](https://github.com/porsche-design-system/porsche-design-system/pull/3372))

### Fixed

- `Link Pure`: Broken with `alignLabel="start"`, hidden label & nested anchor
  ([#3379](https://github.com/porsche-design-system/porsche-design-system/pull/3379))
- `Textfield Wrapper`, `Textarea Wrapper`: Conditionally rendered component throws
  `TypeError: Cannot read properties of undefined (reading 'type')`
  ([#3383](https://github.com/porsche-design-system/porsche-design-system/pull/3383))
- `Link Tile`: Broken word-break & hyphens Safari
  ([#3397](https://github.com/porsche-design-system/porsche-design-system/pull/3397))
- `Select Wrapper`: `optgroup` styling and behavior
  ([#3410](https://github.com/porsche-design-system/porsche-design-system/pull/3410))

## [3.16.0] - 2024-07-02

## [3.16.0-rc.2] - 2024-07-02

### Added

- Partials: Added default `og:image` and related meta tags to the `getMetaTagsAndIconLinks` partial. Can be disabled by
  setting the `ogImage` option to `false`.
  ([#3357](https://github.com/porsche-design-system/porsche-design-system/pull/3357))

### Changed

- `Flyout Navigation`, `Flyout Navigation Item`: Renamed (experimental) component to `Flyout Multilevel` and
  `Flyout Multilevel Item` ([#3351](https://github.com/porsche-design-system/porsche-design-system/pull/3351))
- `Toast`: Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
  https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
  https://developer.chrome.com/blog/what-is-the-top-layer
  ([#3356](https://github.com/porsche-design-system/porsche-design-system/pull/3356))

```diff
- <p-flyout-navigation><p-flyout-navigation-item></p-flyout-navigation-item></p-flyout-navigation>
+ <p-flyout-multilevel><p-flyout-multilevel-item></p-flyout-multilevel-item></p-flyout-multilevel>
```

### Fixed

- Types: `@porsche-design-system/components-vue` typings are not exposed
  ([#3355](https://github.com/porsche-design-system/porsche-design-system/pull/3355))

## [3.16.0-rc.1] - 2024-06-18

### Added

- `jsdom-polyfill` Added polyfills for `Popover API` and `ResizeObserver`
  ([#3334](https://github.com/porsche-design-system/porsche-design-system/pull/3334))
- `Segmented Control`: Prop `aria` added to `Segmented Control Item` to support ARIA attributes
  ([#3327](https://github.com/porsche-design-system/porsche-design-system/pull/3327))

### Changed

- Angular: updated peer dependency to `>=17.0.0 <19.0.0`
  ([#3346](https://github.com/porsche-design-system/porsche-design-system/pull/3346))
- React: Improve prop typings for all wrappers of `@porsche-design-system/components-react`
  ([#3336](https://github.com/porsche-design-system/porsche-design-system/pull/3336))

## [3.16.0-rc.0] - 2024-06-05

### Added

- `Flyout`:
  - CSS variable `--p-flyout-sticky-top` (experimental)
    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
  - Prop `disableBackdropClick` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
- `Modal`:
  - CSS variable `--p-modal-width` (experimental)
    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
  - Named slot `header` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))

### Changed

- `Modal`, `Flyout`:
  - Sticky dismiss button ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
  - Aligned layout, spacing and UX behaviour
    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
  - Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
    https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
    https://developer.chrome.com/blog/what-is-the-top-layer
    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
- `Modal`: `heading` prop and `slot="heading"` are deprecated. Use `slot="header"` instead.

### Fixed

- Types: Fixed incorrectly allowed type `string` in types `BreakpointCustomizable`, `SelectedAriaAttributes`,
  `CarouselInternationalization`, `PaginationInternationalization` and `ScrollToPosition`
- `Modal`, `Flyout`: Dynamically react to adding/removing named slots
  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
- `Modal`: Uses native `<dialog />` element to resolve focus issues, focus trap
  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))

## [3.15.2] - 2024-05-29

### Fixed

- `aria`: Refactor `parseJSONAttribute` to support Safari < 16.4  
  ([#3314](https://github.com/porsche-design-system/porsche-design-system/pull/3314))

## [3.15.1] - 2024-05-23

### Fixed

- `Banner`: Fixed position on mobile ([#3307](https://github.com/porsche-design-system/porsche-design-system/pull/3307))

## [3.15.0] - 2024-05-16

## [3.15.0-rc.5] - 2024-05-16

### Added

- `Button Pure`: Prop `underline` to show an underline for the label
  ([#3212](https://github.com/porsche-design-system/porsche-design-system/pull/3212))
- Partials: Added new option `globalStyles` to `getInitialStyles` to disable global reset styles.  
  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))

### Changed

- `Banner`: Refactor Banner to use native `popover`
  ([#3196](https://github.com/porsche-design-system/porsche-design-system/pull/3196))
- Partials: `getInitialStyles` only contain hydration visibility and global styles. All other styles are handled by
  constructable stylesheets at component level.
  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
- `Table`: Removed slotted image style `verticalAlign: 'middle'` from initialStyles
  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
- `Tabs Bar`: Removed sibling tabpanel focus style from initialStyles
  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))

### Fixed

- `Carousel`: Accessible name of carousel region wrapper
  ([#3220](https://github.com/porsche-design-system/porsche-design-system/pull/3220))
- `aria` property now supports escaped single quotes in