@porsche-design-system/components-angular

Version:

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.

designsystem.porsche.com

1,113 lines (791 loc) • 152 kB

Markdown

# 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.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 inside JSON strings, e.g. `aria="{ 'aria-label': 'You can\'t do that? yes you can!' }"` ([#3217](https://github.com/porsche-design-system/porsche-design-system/pull/3217)) ### [3.15.0-rc.4] - 2024-05-06 #### Added - Partials: Added new partial `getFontFaceStyles` which returns an inline style containing all font-face definitions. ([#3188](https://github.com/porsche-design-system/porsche-design-system/pull/3188)) #### Changed - Partials: Partial `getFontFaceStylesheet` is deprecated and will be removed with the next major release. Use the `getFontFaceStyles` partial instead, which directly returns a `<style>` tag containing all font-face definitions and can be used in the same way. ([#3188](https://github.com/porsche-design-system/porsche-design-system/pull/3188)) ```diff - getFontFaceStylesheet() + getFontFaceStyles() ``` ### [3.15.0-rc.3] - 2024-04-23 #### Fixed - `Pin Code`: Fixed several problems with IME keyboards ([#3197](https://github.com/porsche-design-system/porsche-design-system/pull/3197)) ### [3.15.0-rc.2] - 2024-04-22 #### Added - `Accordion`: Add experimental property `sticky` for a fixed heading ([#3181](https://github.com/porsche-design-system/porsche-design-system/pull/3181)) - `Inline Notification`, `Banner`: heading hierarchy can now be customized with `headingTag` prop ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168)) #### Changed - `Accordion`: `tag` property is deprecated. Use `headingTag` property instead to specify heading hierarchy level. ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168)) ```diff - <p-accordion tag="h3"></p-accordion> + <p-accordion heading-tag="h3"></p-accordion> ``` #### Fixed - `Pin Code`: Input is entered twice in iOS ([#3192](https://github.com/porsche-design-system/porsche-design-system/pull/3192)) ### [3.15.0-rc.1] - 2024-04-17 #### Added - Partials: `getMetaTagsAndIconLinks`, `getComponentChunkLinks`, `getIconLinks` and `getFontLinks` support new format option `js` ([#3179](https://github.com/porsche-design-system/porsche-design-system/pull/3179)) ### [3.15.0-rc.0] - 2024-04-05 #### Changed - `Model Signature`: Enabling the use of hex colors, CSS gradients, CSS image and video masks. In addition, the size was slightly adjusted. ([#3153](https://github.com/porsche-design-system/porsche-design-system/pull/3153)) #### Fixed - `Modal`: Missing box-shadow on sticky footer when slotted content changes ([#3154](https://github.com/porsche-design-system/porsche-design-system/pull/3154)) - `Select`: Hydration error in Next.js when using slotted `img` ([#3162](https://github.com/porsche-design-system/porsche-design-system/pull/3162)) - `Text Field Wrapper`, `Textarea Wrapper`: Dynamic changes of `showCounter` and `maxLength` are reflected. The counter element dynamically adjusts to changes in the input value accurately. ([#3084](https://github.com/porsche-design-system/porsche-design-system/pull/3084)) ### [3.14.0] - 2024-03-25 ### [3.14.0-rc.0] - 2024-03-25 #### Added - `Icon`: `battery-empty-fuel` ([#3148](https://github.com/porsche-design-system/porsche-design-system/pull/3148)) #### Changed - `Icon`: `battery-empty-co2` and `co2-class` ([#3148](https://github.com/porsche-design-system/porsche-design-system/pull/3148)) - Angular: updated peer dependency to `>=17.0.0 <18.0.0` ([#3125](https://github.com/porsche-design-system/porsche-design-system/pull/3125)) - React: updated peer dependency to `>=18.0.0 <19.0.0` ([#3125](https://github.com/porsche-design-system/porsche-design-system/pull/3125)) ### [3.13.1] - 2024-03-20 #### Fixed - `Modal`: Unexpected scrolling behavior on iOS >= 17.4 ([#3128](https://github.com/porsche-design-system/porsche-design-system/pull/3128)) - `Select`, `Multi-Select`: Cropping issues of select dropdown when used inside `Table` component ([#3114](https://github.com/porsche-design-system/porsche-design-system/pull/3114)) - `Flyout`, `Flyout Navigation`: iOS Safari URL bar overlaying ([#3131](https://github.com/porsche-design-system/porsche-design-system/pull/3131)) ### [3.13.0] - 2024-03-11 ### [3.13.0-rc.2] - 2024-03-11 #### Added - `Icon`: `battery-empty-co2` and `co2-class` ([#3103](https://github.com/porsche-design-system/porsche-design-system/pull/3103)) ### [3.13.0-rc.1] - 2024-03-08 #### Added - `Select` ([#3008](https://github.com/porsche-design-system/porsche-design-system/pull/3008)) - `Modal`: Prop `backdrop` ([#3082](https://github.com/porsche-design-system/porsche-design-system/pull/3082)) - `Modal`: CSS variables `--p-modal-spacing-top` and `--p-modal-spacing-bottom` ([#3082](https://github.com/porsche-design-system/porsche-design-system/pull/3082)) #### Fixed - `Flyout`: Refactor Flyout to use native Dialog element to resolve focus issues ([#2998](https://github.com/porsche-design-system/porsche-design-system/pull/2998)) - `Accordion`: Fix overflow scrollbar issues ([#3042](https://github.com/porsche-design-system/porsche-design-system/pull/3042)) - `Carousel`: Skip link is visible when it receives keyboard focus ([#3055](https://github.com/porsche-design-system/porsche-design-system/pull/3055)) - Placeholder color of `Text Field Wrapper` for `input type="date"` and `input type="time"` in Safari and alignment in Mobile Safari ([#3068](https://github.com/porsche-design-system/porsche-design-system/pull/3068)) - Counter overlap with long initial value in `Text Field Wrapper` for `input type="text"` with `maxlength` ([#3079](https://github.com/porsche-design-system/porsche-design-system/pull/3079)) #### Changed - Updated favicons output via `getMetaTagsAndIconLinks()` partial ([#3081](https://github.com/porsche-design-system/porsche-design-system/pull/3081)) ### [3.13.0-rc.0] - 2024-02-19 #### Added - `Link Tile Product`: Prop `price-original` to be able to visualize sale and original price ([#3040](https://github.com/porsche-design-system/porsche-design-system/pull/3040)) #### Changed - Validation of `getInitialStyles()` partial is temporarily disabled ([#3049](https://github.com/porsche-design-system/porsche-design-system/pull/3049)) ### [3.12.0] - 2024-02-12 ### [3.12.0-rc.1] - 2024-02-08 #### Fixed - `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when used in another Shadow DOM or changed programmatically ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028)) ### [3.12.0-rc.0] - 2024-02-05 #### Added - `Icon`: `logo-x`, `bookmark-filled` and `star-filled` ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025)) #### Changed - `Icon`: Visual appearance of `information-filled`, `information`, `success-filled`, `success`, `bookmark`, `compare`, `configurate`, `heart-filled`, `heart`, `menu-lines`, `success`, `search`, `locate`, `star`, `shopping-bag-filled`, `shopping-bag`, `user-filled` and `user` ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025)) - All components (expect some form elements) have improved focus styling based on `:focus-visible` ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011)) - Several components are using CSS property `inset|inset-inline|inset-block` instead of `top|bottom|left|right` for better RTL (right-to-left) support ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011)) - `Switch`: Improve RTL (right-to-left) mode ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011)) - `Button`, `Button Pure`, `Switch`, `Checkbox Wrapper`, `Radio Button Wrapper`, `Pin Code`: optimized announcement of loading state for assistive technologies ([#3009](https://github.com/porsche-design-system/porsche-design-system/pull/3009)) #### Fixed - All components are supporting focus style in High Contrast Mode correctly ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011)) ### [3.11.0] - 2024-01-30 ### [3.11.0-rc.0] - 2024-01-30 #### Fixed - `Carousel`: Carousel does not work with single pointer event on smaller touch devices ([#3003](https://github.com/porsche-design-system/porsche-design-system/pull/3003)) - `Carousel`: `Each child in a list should have a unique "key" prop` warning in Next.js SSR context ([#3001](https://github.com/porsche-design-system/porsche-design-system/pull/3001)) #### Changed - Scroll-lock used in `Flyout`, `Flyout Navigation` and `Modal` is based on `body { overflow: hidden; }` for all devices ([#3013](https://github.com/porsche-design-system/porsche-design-system/pull/3013)) - `Toast`: Alignment reflects RTL (right-to-left) mode ([#3010](https://github.com/porsche-design-system/porsche-design-system/pull/3010)) - `Carousel`: Pagination can be used for navigation & pagination has more spacing on touch devices ([#3003](https://github.com/porsche-design-system/porsche-design-system/pull/3003)) ### [3.10.0] - 2024-01-17 ### [3.10.0-rc.5] - 2024-01-16 #### Changed - `visibility` css property can be overridden on all components, e.g. to make use of `visibility: hidden;` ([#2988](https://github.com/porsche-design-system/porsche-design-system/pull/2988)) - `Carousel`: Named slot `header` renamed to `controls` ([#2992](https://github.com/porsche-design-system/porsche-design-system/pull/2992)) ### [3.10.0-rc.4] - 2024-01-15 #### Added - `Icon`: Auto-flipping icons (certain ones only) in RTL (right-to-left) mode ([#2957](https://github.com/porsche-design-system/porsche-design-system/pull/2957)) - `Carousel`: Prop `heading-size`, named slot `header` ([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915)) - `Accordion`: support for custom click area for `compact` variant ([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920)) - `@font-face` supports Middle East languages ([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946)) - Partials: `getFontLinks` supports preloading `arabic`, `pashto` and `urdu` subsets ([#2946](https://github.com/porsche-design-system/porsche-design-system/pull/2946)) #### Changed - `Flyout Navigation`: Improved validation and `activeIdentifier` isn't automatically updated anymore ([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935)) - `Carousel`: Position and width of heading and description ([#2915](https://github.com/porsche-design-system/porsche-design-system/pull/2915)) - `Model Signature` asset for `model="macan"` - Aligned naming of all `CustomEvent<T>` types and deprecated old ones since they are in fact typing the `detail: T` property of the event ```diff - AccordionUpdateEvent + AccordionUpdateEventDetail - CarouselUpdateEvent + CarouselUpdateEventDetail - FlyoutNavigationUpdateEvent + FlyoutNavigationUpdateEventDetail - LinkTileProductLikeEvent + LinkTileProductLikeEventDetail - MultiSelectUpdateEvent + MultiSelectUpdateEventDetail - PaginationUpdateEvent + PaginationUpdateEventDetail - PinCodeUpdateEvent + PinCodeUpdateEventDetail - SegmentedControlUpdateEvent + SegmentedControlUpdateEventDetail - StepperHorizontalUpdateEvent + StepperHorizontalUpdateEventDetail - SwitchUpdateEvent + SwitchUpdateEventDetail - TableUpdateEvent + TableUpdateEventDetail - TabsUpdateEvent + TabsUpdateEventDetail - TabsBarUpdateEvent + TabsBarUpdateEventDetail ``` #### Fixed - `Pin Code`: Focus correct input when clicking on label ([#2985](https://github.com/porsche-design-system/porsche-design-system/pull/2985)) - `Flyout Navigation`: Focus dismiss button after opening ([#2935](https://github.com/porsche-design-system/porsche-design-system/pull/2935)) - `Accordion`: Alignment of slotted heading with custom padding ([#2920](https://github.com/porsche-design-system/porsche-design-system/pull/2920)) - `Modal`: Scrollbar is hidden ([#2907](https://github.com/porsche-design-system/porsche-design-system/pull/2907)) - `Toast`: `max-width` when used in scale mode ([#2960](https://github.com/porsche-design-system/porsche-design-system/pull/2960)) ### [3.10.0-rc.3] - 2023-12-12 ### [3.10.0-rc.2] - 2023-12-12 ### [3.10.0-rc.1] - 2023-12-11 #### Added - **[EXPERIMENTAL]** `Link Tile Product` ([#2909](https://github.com/porsche-design-system/porsche-design-system/pull/2909)) #### Fixed - `Wordmark`, `Crest` and `Marque`: custom clickable area ([#2930](https://github.com/porsche-design-system/porsche-design-system/pull/2930)) ### [3.10.0-rc.0] - 2023-12-07 #### Added - **[EXPERIMENTAL]** `Flyout Navigation` ([#2906](https://github.com/porsche-design-system/porsche-design-system/pull/2906)) - Prop `submit-button` to show/hide a submit button for `Text Field Wrapper` `type="search"` if wrapped inside a form ([#2908](https://github.com/porsche-design-system/porsche-design-system/pull/2908)) #### Changed - `Accordion`: removed `border-bottom` if used standalone ([#2911](https://github.com/porsche-design-system/porsche-design-system/pull/2911)) - `display` css property can be overridden on all components, e.g. to make use of `display: none;` within media queries ([#2913](https://github.com/porsche-design-system/porsche-design-system/pull/2913)) - `Pagination`: Prop `maxNumberOfPageLinks` is deprecated and has no effect anymore, instead there is responsive behavior out of the box with full SSR support ([#2898](https://github.com/porsche-design-system/porsche-design-system/pull/2898)) ### [3.9.0] - 2023-11-24 ### [3.9.0-rc.0] - 2023-11-23 #### Added - Angular: `theme: 'light' | 'dark' | 'auto'` option to `PorscheDesignSystemModule.load()` to set `theme` on all child components ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872)) - React: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child components ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872)) - Vue: `theme: 'light' | 'dark' | 'auto'` prop to `PorscheDesignSystemProvider` to set `theme` on all child components ([#2872](https://github.com/porsche-design-system/porsche-design-system/pull/2872)) - Validation for usage of different PDS versions ([#2867](https://github.com/porsche-design-system/porsche-design-system/pull/2867)) #### Changed - `Text Field Wrapper`, `Textarea Wrapper`, `Select Wrapper`, `Multi Select`, `Pin Code`, `Checkbox Wrapper` and `Radio Button Wrapper` have improved visual alignment ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854)) - `Text Field Wrapper` fully supports RTL (right-to-left) mode ([#2854](https://github.com/porsche-design-system/porsche-design-system/pull/2854)) - `Pin Code`: Prop values from `1` to `6` are now supported for `length` prop ([#2859](https://github.com/porsche-design-system/porsche-design-system/pull/2859)) - `Model Signature` asset for `model="macan"` ([#2857](https://github.com/porsche-design-system/porsche-design-system/pull/2857)) - Use motion tokens in all components ([#2834](https://github.com/porsche-design-system/porsche-design-system/pull/2834)) #### Fixed - `Select Wrapper`: Select dropdown is now visible if it overflows the `Table` component ([#2885](https://github.com/porsche-design-system/porsche-design-system/pull/2885)) - `Select Wrapper` keyboard and scroll behavior ([#2864](https://github.com/porsche-design-system/porsche-design-system/pull/2864)) - Safari 15 default margin of button elements in several components ([#2858](https://github.com/porsche-design-system/porsche-design-system/pull/2858)) - `Checkbox Wrapper` and `Radio Button Wrapper` border-color/background-color does not reset on hover ([#2852](https://github.com/porsche-design-system/porsche-design-system/pull/2852)) - `Tabs Bar` losing `activeTabIndex` and underline in certain framework scenarios ([#2896](https://github.com/porsche-design-system/porsche-design-system/pull/2896)) - `Modal` and `Flyout` body jumping in the background and scrolling back to the top in Next Js and Remix ([#2890](https://github.com/porsche-design-system/porsche-design-system/pull/2890)) ### [3.8.0] - 2023-10-24 ### [3.8.0-rc.0] - 2023-10-23 #### Added - RTL (right-to-left) support for all components ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819)) - `Popover` and `Modal` support theme dark and auto ([#2789](https://github.com/porsche-design-system/porsche-design-system/pull/2789)) - Styles: `getSkeletonStyle()` and `pds-skeleton()` ([#2796](https://github.com/porsche-design-system/porsche-design-system/pull/2796)) - Styles: `motionDuration{Short|Moderate|Long|VeryLong}`, `motionEasing{Base|In|Out}`, and `$pds-motion-duration-{short|moderate|long|very-long}`, `$pds-motion-easing-{base|in|out}` ([#2791](https://github.com/porsche-design-system/porsche-design-system/pull/2791)) #### Changed - Styles: `themeDarkBackgroundShading` and `$pds-theme-dark-background-shading` color ([#2789](https://github.com/porsche-design-system/porsche-design-system/pull/2789)) - `Spinner` animation was optimized to consume less CPU ([#2825](https://github.com/porsche-design-system/porsche-design-system/pull/2825)) - `Text`, `Display`, `Heading`, `Headline`: Prop values `left | right` of `align` prop are deprecated and mapped to new values `start | end` for correct RTL (right-to-left) support ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819)) ```diff - <p-text align="left"></p-text> + <p-text align="start"></p-text> - <p-text align="right"></p-text> + <p-text align="end"></p-text> - <p-display align="left"></p-display> + <p-display align="start"></p-display> - <p-display align="right"></p-display> + <p-display align="end"></p-display> - <p-heading align="left"></p-heading> + <p-heading align="start"></p-heading> - <p-heading align="right"></p-heading> + <p-heading align="end"></p-heading> - <p-headline align="left"></p-headline> + <p-headline align="start"></p-headline> - <p-headline align="right"></p-headline> + <p-headline align="end"></p-headline> ``` - `Button Pure`, `Link Pure`, `Switch`: Prop values `left | right` of `align-label` prop are deprecated and mapped to new values `start | end` for correct RTL (right-to-left) support ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819)) ```diff - <p-button-pure alig