@porsche-design-system/components-js@porsche-design-system/components-angular@porsche-design-system/components-react@porsche-design-system/components-vue[3.28.0] - 2025-06-02 [3.27.3] - 2025-03-21 [3.27.2] - 2025-03-20 [3.27.1] - 2025-03-05 [3.27.0] - 2025-02-28
Input Number: (Select Wrapper: update of scroll position if dropdown is navigated with keyboard
(Select, Multi Select: replacement of static (english) a11y announcement of active option with dynamic
announcement through ariaActiveDescendantElement
(Styles: theme for tailwindcss including utilities available under
import { … } from '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';
(getInitialStyles removed default styles for h1, h2, h3, h4, h5, h6, p, b and strong
(Multi Select: enable full a11y compliance
(Canvas: stealing focus from Text Field Wrapper
(Drilldown, Drilldown Item: visibility for slotted content (experimental)
(Input Password: (Drilldown, Drilldown Item: CSS variable --p-drilldown-grid-template and --p-drilldown-gap (experimental)
(Drilldown Item: named slot button and header (experimental)
(Drilldown Link: (experimental) (Flyout Multilevel, Flyout Multilevel Item: renamed (experimental) component to Drilldown and
Drilldown Item (Drilldown Item doesn't style slotted <a> tags anymore, instead use Drilldown Link or a
custom link (aria prop now supports a colon inside a value, e.g. aria="{ 'aria-label': 'Always remember: yes you can!' }"
(Table: add border-bottom styles to Table Head to support both, empty and missing Table Body
(Styles: change Gradient color values from rgba to hsla to fix Chrome rendering bug
(Carousel: auto value of slides-per-page prop is breakpoint customizable
(Select, Multi Select, Select Wrapper: remove positioning with native anchor positioning due to a Chrome bug
(Table: compact prop to enable a smaller, space-saving version for compact layouts
(Table: layout prop to render table with table-layout: fixed css for manual control of column widths
(Carousel: align-controls prop to align the controls slot to the left or center (overwrites auto-alignment)
(Select, Multi Select, Select Wrapper:
#top-layer which enables it to be shown correctly even when used e.g. within a scroll container
or overflow context (Select, Select Wrapper:
Carousel: Center layout of Carousel on mobile view
(Carousel: auto value of slides-per-page prop is breakpoint customizable
(AG Grid: error on reload in next.js.
(AG Grid: not accessing cdn base url correctly.
(AG Grid: not resolving dependencies correctly.
(AG Grid: not resolving dependencies correctly.
(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. (vanilla-extract returns getMediaQueryMax, getMediaQueryMin, getMediaQueryMinMax & getSkeletonStyle
in wrong format (@font-face supports Thai language
(getFontLinks supports preloading thai subset
(Popover: gets rendered on #top-layer which enables it to be shown correctly even when used e.g. within a scroll
container (Popover: default styling for slotted anchors
(Switch: compact prop to enable a smaller, space-saving version for compact layouts
(Select: compact prop to enable a smaller, space-saving version for compact layouts
(Canvas: named slot sidebar-end-header
(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 (Carousel: throws error when object-like string is passed by pagination
(Carousel: throws error when object-like string is passed by slides-per-page
(Sheet (Button, Button-Pure: Add form prop to explicitly associate the component with a form, even when it's not
directly nested within it. (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 (Textarea, Textarea Wrapper, Textfield Wrapper: color contrast of unit prop and counter in readonly mode
meets WCAG 2.2 AA standard (vanilla-extract available under
import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';
(>=19.0.0 <20.0.0Select: Slotted image of selected option now visible in combobox
(Flyout: transition bug in Safari (Styles: dart sass deprecation warnings in SCSS variant
(Flyout Multilevel: Secondary scroll area not shown in iOS Safari (iPhone only)
(Flyout Multilevel: Supports infinite layers
(react/jsx-runtime as dependency
(Textfield Wrapper: text alignment of type email and tel values in RTL mode
(Popover:
Modal, Flyout:
aria-label is generated from slotted header contents if aria prop is not providedrole to aria prop of Modal component to support setting alertdialog role
(Pin-Code: Add form prop to explicitly associate the component with a form, even when it's not directly nested
within it. (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.
(>=19.0.0 <20.0.0Pin-Code:
Pin-Code component no longer support native validation due to the removal of the underlying
native <input> element. (Styles: SCSS variant uses @forward/@use internally to replace deprecated @import
(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.
(Select, Multi-Select: Ensure that dynamically changing the disabled property via optgroups persists the
disabled state for individual options within the group.
(Flyout: Prop footerBehavior to always make footer fixed
(Checkbox, Textarea: formDisabledCallback and formStateRestoreCallback from ElementInternals API and sync
validity with form element. (Link, Link Pure, Link Tile: aria-haspopup is now supported for aria prop
(Button, Link: compact prop is breakpoint customizable
(Select, Multi-Select: Add form prop to explicitly associate these components with a specific form when they are
not directly nested within it. (Select, Multi-Select:
Select and Multi-Select components no longer support native validation due to the removal
of the underlying native <select> element.Flyout: overlapping of scrollbar in iOS/iPadOS Safari when sticky header/footer is used
(Carousel: dynamic change in slidesPerPages when using focusOnCenterSlide prop breaks pagination
(Flyout, Modal:
jsdom-polyfill: errors from included polyfill packages
(hidden attribute with value false not working
(@porsche-design-system/components-react
(Icon: sidebar (Canvas: Improve UI and UX behaviour in Safari
(Flyout: transition animation in Chrome Browser if Flyout has scrollable content
(Icon: attachment, dislike, dislike-filled, like, like-filled, new-chat
(Canvas: Improve UI and UX behaviour
(Flyout, Modal: Removed default styling for slotted anchors
(AG Grid: custom theme (Checkbox: Added a compact prop to enable a smaller, space-saving version of the checkbox for compact layouts.
(Text, Display, Heading and Headline: introduce new option inherit to prop align
(Pin Code, Select Wrapper: programmatic focus
(Select Wrapper: native option dropdown has wrong colors in theme dark
(Switch: width/height calculation of the toggle element supports browser based text only zoom
(@deprecated annotations for deprecated components
(apple-mobile-web-app-capable with mobile-web-app-capable in getMetaTagsAndIconLinks
partial. (Carousel: remove gradient styles for carousel if gradientColor is not defined
(Carousel: introduce trimSpace prop
(Checkbox: (Checkbox Wrapper, Radio Button Wrapper: rendering of checked state in Blink based Browsers when component is
rendered in high contrast mode (Canvas: Improve UX (componentsReady(): Introduce optional readyState parameter
(Carousel: introduce focusOnCenterSlide & gradientColor props
(Text Field Wrapper: width calculation of counter and unit element are now CSS based in relation to the number of
characters (jsdom-polyfill: errors from included polyfill packages
(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) (Textarea: (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
(:defined & [data-ssr] to handle visibility of nested elements within Shadow DOM
(Button, Link: spacings adjusted for compact modeBanner, Flyout, Inline Notification, Modal, Scroller, Toast: button style
(Select: added display: block to host in order to be consistent with other form components
(Select, Multi-Select: programmatic focus
(Button Tile, Link Tile, Link Tile Model Signature: correct image position if custom css position: absolute is
used on media element (Button, Link: Safari rendering issue of backdrop-filter on border in variant ghost
(Select, Select Wrapper, Multi Select, Textfield Wrapper: text-overflow has now ellipsis behaviour and
min-width is added to prevent text overlapping
(Optgoup: hydration error in Next.js SSR context
(Select: ensure slotted image width
(Button, Link:
variant extended by value ghost
(compact (Tabs Bar: fixed tabindex issue when Tabs Bar is rendered with the Scroller component
(Link Tile, Link Tile Model Signature, Button Tile:
header (Link Tile, Button Tile: Prop size extended by value large
(Tag:
compact (color extended by value background-frosted
(theme{Light|Dark}BackgroundFrosted and $pds-theme-{light|dark}-background-frosted color
(Optgroup: Usable in combination with Select and Multi Select
(Flyout, Modal: Add custom events motionVisibleEnd and motionHiddenEnd to notify when opening and closing
transitions are complete (Link Tile, Link Tile Model Signature, Button Tile:
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
(- <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
(- <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 lookCarousel: Slides and controls slot are centered if alignHeader prop is set to center and amount of slides is
less than slidesPerPage (Link Pure: Broken with alignLabel="start", hidden label & nested anchor
(Textfield Wrapper, Textarea Wrapper: Conditionally rendered component throws
TypeError: Cannot read properties of undefined (reading 'type')
(Link Tile: Broken word-break & hyphens Safari
(Select Wrapper: optgroup styling and behavior
(og:image and related meta tags to the getMetaTagsAndIconLinks partial. Can be disabled by
setting the ogImage option to false.
(Flyout Navigation, Flyout Navigation Item: Renamed (experimental) component to Flyout Multilevel and
Flyout Multilevel Item (Toast: Renders fully on #top-layer, stacking behaviour has changed and follows W3C standards now, see
- <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>
@porsche-design-system/components-vue typings are not exposed
(jsdom-polyfill Added polyfills for Popover API and ResizeObserver
(Segmented Control: Prop aria added to Segmented Control Item to support ARIA attributes
(>=17.0.0 <19.0.0
(@porsche-design-system/components-react
(Flyout:
--p-flyout-sticky-top (experimental)
(disableBackdropClick (Modal:
--p-modal-width (experimental)
(header (Modal, Flyout:
#top-layer, stacking behaviour has changed and follows W3C standards now, see
Modal: heading prop and slot="heading" are deprecated. Use slot="header" instead.string in types BreakpointCustomizable, SelectedAriaAttributes,
CarouselInternationalization, PaginationInternationalization and ScrollToPositionModal, Flyout: Dynamically react to adding/removing named slots
(Modal: Uses native <dialog /> element to resolve focus issues, focus trap
(aria: Refactor parseJSONAttribute to support Safari < 16.4(
Banner: Fixed position on mobile (Button Pure: Prop underline to show an underline for the label
(globalStyles to getInitialStyles to disable global reset styles.(
Banner: Refactor Banner to use native popover
(getInitialStyles only contain hydration visibility and global styles. All other styles are handled by
constructable stylesheets at component level.
(Table: Removed slotted image style verticalAlign: 'middle' from initialStyles
(Tabs Bar: Removed sibling tabpanel focus style from initialStyles
(Carousel: Accessible name of carousel region wrapper
(aria property now supports escaped single quotes inside JSON strings, e.g.
aria="{ 'aria-label': 'You can\'t do that? yes you can!' }"
(getFontFaceStyles which returns an inline style containing all font-face definitions.(
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. (- getFontFaceStylesheet()
+ getFontFaceStyles()
Pin Code: Fixed several problems with IME keyboards
(Accordion: Add experimental property sticky for a fixed heading
(Inline Notification, Banner: heading hierarchy can now be customized with headingTag prop
(Accordion: tag property is deprecated. Use headingTag property instead to specify heading hierarchy level.
(- <p-accordion tag="h3"></p-accordion>
+ <p-accordion heading-tag="h3"></p-accordion>
Pin Code: Input is entered twice in iOS
(getMetaTagsAndIconLinks, getComponentChunkLinks, getIconLinks and getFontLinks support new format
option js (Model Signature: Enabling the use of hex colors, CSS gradients, CSS image and video masks. In addition, the size was
slightly adjusted. (Modal: Missing box-shadow on sticky footer when slotted content changes
(Select: Hydration error in Next.js when using slotted img
(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.
(Icon: battery-empty-fuel (Icon: battery-empty-co2 and co2-class
(>=17.0.0 <18.0.0
(>=18.0.0 <19.0.0
(Modal: Unexpected scrolling behavior on iOS >= 17.4
(Select, Multi-Select: Cropping issues of select dropdown when used inside Table component
(Flyout, Flyout Navigation: iOS Safari URL bar overlaying
(Icon: battery-empty-co2 and co2-class
(Select (Modal: Prop backdrop (Modal: CSS variables --p-modal-spacing-top and --p-modal-spacing-bottom
(Flyout: Refactor Flyout to use native Dialog element to resolve focus issues
(Accordion: Fix overflow scrollbar issues
(Carousel: Skip link is visible when it receives keyboard focus
(Text Field Wrapper for input type="date" and input type="time" in Safari and alignment in
Mobile Safari (Text Field Wrapper for input type="text" with maxlength
(getMetaTagsAndIconLinks() partial
(Link Tile Product: Prop price-original to be able to visualize sale and original price
(getInitialStyles() partial is temporarily disabled
(Checkbox Wrapper, Radio Button Wrapper: Safari visually reflects input status (checked/unchecked) when used in
another Shadow DOM or changed programmatically
(Icon: logo-x, bookmark-filled and star-filled
(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
(:focus-visible
(inset|inset-inline|inset-block instead of top|bottom|left|right for
better RTL (right-to-left) support (Switch: Improve RTL (right-to-left) mode
(Button, Button Pure, Switch, Checkbox Wrapper, Radio Button Wrapper, Pin Code: optimized announcement of
loading state for assistive technologies
(Carousel: Carousel does not work with single pointer event on smaller touch devices
(Carousel: Each child in a list should have a unique "key" prop warning in Next.js SSR context
(Flyout, Flyout Navigation and Modal is based on body { overflow: hidden; } for all devices
(Toast: Alignment reflects RTL (right-to-left) mode
(Carousel: Pagination can be used for navigation & pagination has more spacing on touch devices
(visibility css property can be overridden on all components, e.g. to make use of visibility: hidden;(
Carousel: Named slot header renamed to controls
(Icon: Auto-flipping icons (certain ones only) in RTL (right-to-left) mode
(Carousel: Prop heading-size, named slot header
(Accordion: support for custom click area for compact variant
(@font-face supports Middle East languages
(getFontLinks supports preloading arabic, pashto and urdu subsets
(Flyout Navigation: Improved validation and activeIdentifier isn't automatically updated anymore
(Carousel: Position and width of heading and description
(Model Signature asset for model="macan"CustomEvent<T> types and deprecated old ones since they are in fact typing the detail: T
property of the event- 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
Pin Code: Focus correct input when clicking on label
(Flyout Navigation: Focus dismiss button after opening
(Accordion: Alignment of slotted heading with custom padding
(Modal: Scrollbar is hidden (Toast: max-width when used in scale mode
(Link Tile Product
(Wordmark, Crest and Marque: custom clickable area
(Flyout Navigation
(submit-button to show/hide a submit button for Text Field Wrapper type="search" if wrapped inside a form
(Accordion: removed border-bottom if used standalone
(display css property can be overridden on all components, e.g. to make use of display: none; within media
queries(
Pagination: Prop maxNumberOfPageLinks is deprecated and has no effect anymore, instead there is responsive
behavior out of the box with full SSR support
(theme: 'light' | 'dark' | 'auto' option to PorscheDesignSystemModule.load() to set theme on all child
components(
theme: 'light' | 'dark' | 'auto' prop to PorscheDesignSystemProvider to set theme on all child
components(
theme: 'light' | 'dark' | 'auto' prop to PorscheDesignSystemProvider to set theme on all child components(
Text Field Wrapper, Textarea Wrapper, Select Wrapper, Multi Select, Pin Code, Checkbox Wrapper and
Radio Button Wrapper have improved visual alignment
(Text Field Wrapper fully supports RTL (right-to-left) mode
(Pin Code: Prop values from 1 to 6 are now supported for length prop
(Model Signature asset for model="macan"
(Select Wrapper: Select dropdown is now visible if it overflows the Table component
(Select Wrapper keyboard and scroll behavior
(Checkbox Wrapper and Radio Button Wrapper border-color/background-color does not reset on hover
(Tabs Bar losing activeTabIndex and underline in certain framework scenarios
(Modal and Flyout body jumping in the background and scrolling back to the top in Next Js and Remix
(Popover and Modal support theme dark and auto
(getSkeletonStyle() and pds-skeleton()
(motionDuration{Short|Moderate|Long|VeryLong}, motionEasing{Base|In|Out}, and
$pds-motion-duration-{short|moderate|long|very-long}, $pds-motion-easing-{base|in|out}
(themeDarkBackgroundShading and $pds-theme-dark-background-shading color
(Spinner animation was optimized to consume less CPU
(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
(- <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
(- <p-button-pure align-label="left"></p-button-pure>
+ <p-button-pure align-label="start"></p-button-pure>
- <p-button-pure align-label="right"></p-button-pure>
+ <p-button-pure align-label="end"></p-button-pure>
- <p-link-pure align-label="left"></p-link-pure>
+ <p-link-pure align-label="start"></p-link-pure>
- <p-link-pure align-label="right"></p-link-pure>
+ <p-link-pure align-label="end"></p-link-pure>
- <p-switch align-label="left"></p-switch>
+ <p-switch align-label="start"></p-switch>
- <p-switch align-label="right"></p-switch>
+ <p-switch align-label="end"></p-switch>
Flyout: Prop values left | right of position prop are deprecated and mapped to new values start | end for
correct RTL (right-to-left) support
(- <p-flyout position="left"></p-flyout>
+ <p-flyout-pure position="start"></p-flyout>
- <p-flyout-pure position="right"></p-flyout>
+ <p-flyout-pure position="end"></p-flyout>
Carousel: Prop value left of align-header prop is deprecated and mapped to new value start for correct RTL
(right-to-left) support (- <p-carousel align-header="left"></p-carousel>
+ <p-carousel-pure align-header="start"></p-carousel>
Popover doesn't get cut off when used within the Table component
(Flyout and Modal with open="false" and nested Accordion with open="true" containing focusable elements like
links can't be focused anymore (Flyout and Modal on iOS Mobile Safari with collapsed address bar is no longer scrollable
(Tabs Bar works with translated page content
(gridStyles and pds-grid() support basic usage inside Flyout component
(Flyout component
(loading for Radio Button Wrapper
(auto for all themeable components, reflecting prefers-color-scheme based on OS system
settings (hyphens CSS property can now be overwritten in Button Tile, Link Tile and Link Tile Model Signature components
({ format: 'sha256' } option for whitelisting in
Pin Code (Carousel can become stucked
(message for Fieldset, Fieldset Wrapper, Text Field Wrapper and Textarea Wrapper in dark theme
(getInitialStyles() partial is required and validated with an exception
(Multi Select (Cdn and Format types are exposed
(Accordion contents when positioned outside of content area
(Tabs Bar losing activeTabIndex and underline
(components-js entrypoint for Vanilla JS integration
(aria-current for aria property for linked components (Link, Link Pure, Link Tile, Crest,
Marque) (cdn: 'auto' | 'cn' option to PorscheDesignSystemModule.load() as alternative to using
window.PORSCHE_DESIGN_SYSTEM_CDN (cdn: 'auto' | 'cn' prop to PorscheDesignSystemProvider as alternative to using
window.PORSCHE_DESIGN_SYSTEM_CDN with SSR support
(cdn: 'auto' | 'cn' prop to PorscheDesignSystemProvider as alternative to using
window.PORSCHE_DESIGN_SYSTEM_CDN (Modal
(window.PORSCHE_DESIGN_SYSTEM_CDN for backwards compatibility based on .cn top level domain
before design system initialization
(Flyout: Overlapping of sticky header/footer if slotted content has different z-index
(aria semantics if either a or button elements are used as slotted content in Tabs Bar
component. (package.json ECMAScript module exports with .mjs and .cjs file extensions for
components-{js|angular|react|vue}
(background property to Button Tile and Link Tile component to adapt the description and link/button theme when
used on light background image (columns to Segmented Control to set the amount of columns
(Icon inside Accordion header
(Select Wrapper dropdown if direction property is set to auto
('use client'; directive is applied on all components for main and ssr sub-package
(observeChildren that affected nested components (e.g. incorrect rendering of nested Tabs).
(Carousel
(Tabs and Tabs Bar support SSR (Tag component can now be wrapped in multiple lines
(Carousel: Possibility to set custom border-radius of slide items
(img tag of Icon
(Stepper Horizontal navigation between 2 pages is not working as expected in angular
(Segmented Control text is not centered / causing unintended line-breaks
(jsdom-polyfill fixes validation errors in unit tests during SSR hydration
(Accordion collapsable content is overflowing when used with multiple prefixes(
Tabs Bar position of underline for fluid font-size with size="medium when resizing
(Button Pure, Link Pure: :hover bug on Firefox
(Carousel: Removed overflow:hidden of slide items
(Icon
(skipLinkTarget property to Carousel component to enhance keyboard functionality
(showLastPage property to Pagination component
(getInitialStyles supports Flyout component
(Popover content can be selected/highlighted
(Carousel pagination now shows 5 "infinite bullets" when using more than 5 slides
(Carousel supports click events on non-active slides and changed keyboard navigation
(>=15.0.0 <17.0.0
(Toast allows line break markups within toast message
(Toast shows always the latest toast message and clears its queue immediately if a new message is added
(Crest updated assets (getMetaTagsAndIconLinks updated assets
(Flyout (Link Tile and Select Wrapper
(Modal scrollable modal does not jump to top on changes within dialog
(showPasswordToggle for Text Field Wrapper with input type="password"
(name for Icon supports heart, heart-filled, copy, fingerprint, tire, roof-open and roof-closed
(Select Wrapper missing border on touch devices
(Tabs Item text content can be selected/highlighted
(Marque now has a variant property, including 75 years variant
(Tabs Bar focus behavior via keyboard navigation
(Wordmark in Safari (dropShadow{Low|Medium|High}Styles use box-shadow instead of filter: drop-shadow() to fix glitches
together with frostedGlassStyle in Firefox
(Accordion
(Checkbox Wrapper Safari visual state change while hovering
(Checkbox Wrapper keyboard arrow navigation
(Modal fix hover state of dismiss button
(Link Pure, Button Pure: adjust offset of :hover and active styles
(Tabs Bar, Tabs (focus state of tabpanelLink Pure and Button Pure in SafariSelect Wrapper multiline option height and scaling behavior
(Tabs, Tabs Bar and Stepper Horizontal to comply with v.4.7.0 of axe-core
(patchRemixRunProcessBrowserGlobalIdentifier binary now supports Remix 1.16.0
(Icon component if lazy prop is used
(aria prop to Scroller component
(name for Icon supports push-pin, push-pin-off, qr, pin-filled, shopping-cart-filled,
shopping-bag-filled, logo-apple-podcast, logo-spotify and user-filled
(loading for Checkbox Wrapper
(Wordmark, Crest and Model Signature respect parent width/height
(Button Tile, Link Tile and Link Tile Model Signature are using correct border radius of
$pds-border-radius-large (Text Field Wrapper with input type="search" has better accessibility for clear button
(Accordion layout shift with nested accordions
(borderRadiusLarge and $pds-border-radius-large are exposing correct value
(xxl breakpoint for all breakpoint customizable component values
(Icon component (Radio Button Wrapper for name value with non-alphanumeric characters
(Banner is a controlled component now and its visibility has to be controlled via the open prop
(- <p-banner></p-banner>
+ <p-banner open="true"></p-banner>
change events to update because of bad event emissions with native change events, e.g. with
nested select or input elementsaccordionChange is deprecated, use update event instead.- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
+ <PAccordion onUpdate={(e: CustomEvent<AccordionUpdateEvent>) => {}} />
persistent is deprecated, use dismissButton instead.- <p-banner persistent="true"></p-banner>
+ <p-banner dismiss-button="false"></p-banner>
carouselChange is deprecated, use update event instead.- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
+ <PCarousel onUpdate={(e: CustomEvent<CarouselUpdateEvent>) => {}} />
persistent is deprecated, use dismissButton instead.- <p-inline-notification persistent="true"></p-inline-notification>
+ <p-inline-notification dismiss-button="false"></p-inline-notification>
pageChange is deprecated, use update event instead.- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
+ <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
segmentedControlChange is deprecated, use update event instead.- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
+ <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
stepChange is deprecated, use update event instead.- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
+ <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
switchChange is deprecated, use update event instead.- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
+ <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
sortingChange is deprecated, use update event instead.- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
+ <PTable onUpdate={(e: CustomEvent<TableUpdateEvent>) => {}} />
tabChange is deprecated, use update event instead.- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
+ <PTabs onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
tabChange is deprecated, use update event instead.- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
+ <PTabsBar onUpdate={(e: CustomEvent<TabsUpdateEvent>) => {}} />
Wordmark (Crest (theme[Light|Dark]ContrastMedium and theme[Light|Dark]Notification[*] color tokens
of Styles subpackage (Table matches new design language
(gridWidegridWideColumnStart and $pds-grid-wide-column-startgridWideColumnEnd and $pds-grid-wide-column-endgridNarrowOffset, gridNarrowOffsetBase, gridNarrowOffsetS, gridNarrowOffsetXXL and
$pds-grid-narrow-offset-base, $pds-grid-narrow-offset-s, $pds-grid-narrow-offset-xxlgridBasicOffset, gridBasicOffsetBase, gridBasicOffsetS, gridBasicOffsetXXL and
$pds-grid-basic-offset-base, $pds-grid-basic-offset-s, $pds-grid-basic-offset-xxlgridExtendedOffset, gridExtendedOffsetBase, gridExtendedOffsetS, gridExtendedOffsetXXL and
$pds-grid-extended-offset-base, $pds-grid-extended-offset-s, $pds-grid-extended-offset-xxlgridWideOffset, gridWideOffsetBase, gridWideOffsetS, gridWideOffsetXXL and $pds-grid-wide-offset-base,
$pds-grid-wide-offset-s, $pds-grid-wide-offset-xxlgridFullOffset and $pds-grid-full-offsetButton Tile (Fieldset (Link Tile Model Signature (activeSlideIndex to Carousel
(slidesPerPage supports value auto of Carousel
(scrollbar for Scroller (theme for Table (Carousel in certain scenariosgridStyles and pds-grid() are supporting an additional column range called wide
(@porsche-design-system/components-js/styles instead of
@porsche-design-system/components-js/styles/scss
(Banner: CSS variable --p-banner-position-type
(gridSafeZone, gridSafeZoneBase, gridSafeZoneXXL and $pds-grid-safe-zone-base,
$pds-grid-safe-zone-xxl (gridWidth, gridWidthMin, gridWidthMax and $pds-grid-width-min, $pds-grid-width-max
(width has no effect anymore, instead the component is aligned with Porsche Grid "extended" by default.
(- <p-marque></p-marque>
+ <p-wordmark></p-wordmark>
- <p-fieldset-wrapper label="Some legend label">
+ <p-fieldset label="Some legend label">
<p-text-field-wrapper label="Some label">
<input type="text" name="some-name" />
</p-text-field-wrapper>
- </p-fieldset-wrapper>
+ </p-fieldset>
accordionChange is deprecated, use change event instead.- <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
+ <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
slot="title" is deprecated, use heading prop or slot="heading" instead.<p-banner>
- <span slot="title">Some heading</span>
+ <span slot="heading">Some heading</span>
<span slot="description">Some notification description.</span>
</p-banner>
-<p-banner>
+<p-banner heading="Some heading" description="Some notification description.">
- <span slot="title">Some heading</span>
- <span slot="description">Some notification description.</span>
</p-banner>
disablePagination is deprecated, use pagination instead.carouselChange is deprecated, use change event instead.- <p-carousel disable-pagination="true"></p-carousel>
+ <p-carousel pagination="false"></p-carousel>
- <PCarousel onCarouselChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
+ <PCarousel onChange={(e: CustomEvent<CarouselChangeEvent>) => {}} />
orientation is deprecated, use direction instead.- <p-divider orientation="horizontal"></p-divider>
+ <p-divider direction="horizontal"></p-divider>
colors's value disabled is removed, use state-disabled instead.- <p-icon color="disabled"></p-icon>
+ <p-icon color="state-disabled"></p-icon>
weight's value semibold is deprecated, use semi-bold instead.- <p-link-tile weight="semibold"></p-link-tile>
+ <p-link-tile weight="semi-bold"></p-link-tile>
disableCloseButton is deprecated, use dismissButton instead.close is deprecated, use dismiss event instead.- <p-modal disable-close-button="true"></p-modal>
+ <p-modal dismiss-button="false"></p-modal>
- <PModal onClose={(e: CustomEvent<void>) => {}} />
+ <PModal onDismiss={(e: CustomEvent<void>) => {}} />
allyLabelNext, allyLabelPage, allyLabelPrev and allyLabel are deprecated.pageChange is deprecated, use change event instead.- <p-pagination ally-label="Paginierung" ally-label-prev="Vorherige Seite" ally-label-next="Nächste Seite" ally-label-page="Seite"></p-pagination>
+ <p-pagination intl="{root: 'Paginierung', prev: 'Vorherige Seite', next: 'Nächste Seite', page: 'Seite'}"></p-pagination>
- <PPagination onPageChange={(e: CustomEvent<PageChangeEvent>) => {}} />
+ <PPagination onChange={(e: CustomEvent<PaginationChangeEvent>) => {}} />
gradientColorScheme is deprecated, use gradientColor instead.scrollIndicatorPosition is deprecated, use alignScrollIndicator instead.- <p-scroller gradient-color-scheme="surface"></p-scroller>
+ <p-scroller gradient-color="background-surface"></p-scroller>
- <p-scroller scroll-indicator-position="top"></p-scroller>
+ <p-scroller align-scroll-indicator="top"></p-scroller>
segmentedControlChange is deprecated, use change event instead.- <PSegmentedControl onSegmentedControlChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
+ <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
stepChange is deprecated, use change event instead.- <PStepperHorizontal onStepChange={(e: CustomEvent<StepChangeEvent>) => {}} />
+ <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
switchChange is deprecated, use change event instead.- <PSwitch onSwitchChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
+ <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
sortingChange is deprecated, use change event instead.- <PTable onSortingChange={(e: CustomEvent<SortingChangeEvent>) => {}} />
+ <PTable onChange={(e: CustomEvent<TableChangeEvent>) => {}} />
gradientColorScheme is deprecated, use gradientColor instead.weight's value semibold is deprecated, use semi-bold instead.tabChange is deprecated, use change event instead.- <p-tabs gradient-color-scheme="surface"></p-tabs>
+ <p-tabs gradient-color="background-surface"></p-tabs>
- <p-tabs weight="semibold"></p-tabs>
+ <p-tabs weight="semi-bold"></p-tabs>
- <PTabs onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
+ <PTabs onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
gradientColorScheme is deprecated, use gradientColor instead.weight's value semibold is deprecated, use semi-bold instead.tabChange is deprecated, use change event instead.- <p-tabs-bar gradient-color-scheme="surface"></p-tabs-bar>
+ <p-tabs-bar gradient-color="background-surface"></p-tabs-bar>
- <p-tabs-bar weight="semibold"></p-tabs>
+ <p-tabs-bar weight="semi-bold"></p-tabs>
- <PTabsBar onTabChange={(e: CustomEvent<TabChangeEvent>) => {}} />
+ <PTabsBar onChange={(e: CustomEvent<TabsChangeEvent>) => {}} />
color's value notification-warning, notification-success and notification-error are deprecated, use
notification-warning-soft, notification-success-soft and notification-error-soft instead.- <p-tag color="notification-warning"></p-tag>
+ <p-tag color="notification-warning-soft"></p-tag>
- <p-tag color="notification-success"></p-tag>
+ <p-tag color="notification-success-soft"></p-tag>
- <p-tag color="notification-error"></p-tag>
+ <p-tag color="notification-error-soft"></p-tag>
showCharacterCount is deprecated, use showCounter instead.- <p-text-field-wrapper show-character-count="false">
+ <p-text-field-wrapper show-counter="false">
<input type="text" maxlength="20" />
</p-text-field-wrapper>
showCharacterCount is deprecated, use showCounter instead.- <p-textarea-wrapper show-character-count="false">
+ <p-textarea-wrapper show-counter="false">
<textarea maxlength="80"></textarea>
</p-textarea-wrapper>
listType and orderType are deprecated, use type instead.- <p-text-list list-type="unordered"></p-text-list>
+ <p-text-list type="unordered"></p-text-list>
- <p-text-list list-type="ordered" order-type="numbered"></p-text-list>
+ <p-text-list type="numbered"></p-text-list>
- <p-text-list list-type="ordered" order-type="alphabetically"></p-text-list>
+ <p-text-list type="alphabetically"></p-text-list>
Text, Icon, Button Pure and Link Pure support value xx-small for prop sizeDisplay supports value small for prop sizegetInitialStyles supports multi prefix, e.g.
getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });displaySmallStyle and $pds-display-smalltextXXSmallStyle and $pds-text-xx-smallfontSizeDisplaySmall and $pds-font-size-display-smallfontSizeTextXXSmall and $pds-font-size-text-xx-smallgetHoverStyle and pds-hover()Banner has heading and description prop as well as slot="heading" and deprecated slot="title"Accordion emits change and deprecated accordionChange eventCarousel emits change and deprecated carouselChange eventModal emits dismiss and deprecated close eventPagination emits change and deprecated pageChange eventSegmented Control emits change and deprecated segmentedControlChange eventStepper Horizontal emits change and deprecated stepChange eventSwitch emits change and deprecated switchChange eventTable emits change and deprecated sortingChange eventTabs emits change and deprecated tabChange eventTabs Bar emits change and deprecated tabChange eventCarousel got pagination prop and deprecated disablePagination propDivider got direction prop and deprecated orientation propModal got dismissButton prop and deprecated disableCloseButton propPagination got intl prop and deprecated allyLabelNext, allyLabelPage, allyLabelPrev and allyLabel propsScroller got gradientColor prop and deprecated gradientColorScheme propScroller got alignScrollIndicator prop and deprecated scrollIndicatorPosition propTabs got gradientColor prop and deprecated gradientColorScheme propTabs Bar got gradientColor prop and deprecated gradientColorScheme propText Field Wrapper got showCounter prop and deprecated showCharacterCount propTextarea Wrapper got showCounter prop and deprecated showCharacterCount propText List got type prop and deprecated listType and orderType propIcon prop color got value state-disabled and removed disabled valueLink Tile prop weight got value semi-bold and deprecated semibold valueTabs Bar and Tabs prop weight got value semi-bold and deprecated semibold valueTag prop color got values notification-info-soft, notification-warning-soft, notification-success-soft,
notification-error-soft and deprecated notification-warning, notification-success, notification-error valuesDisplay uses font-weight regular and font-style normalgetInitialStyles matches new design languagegetInitialStylesgetFocusStyle and pds-focus() doesn't need theme parameter anymorebreakpoint{Base|XS|S|M|L|XL|XXL} and $pds-breakpoint-{base|xs|s|m|l|xl|xxl} are provided as number without
unit (px)Link Tile matches new design languageSwitchAlignLabel, TabsBarGradientColor or
LinkPureIconIcon prop color value disabled is renamed to state-disabledTag prop color value notification-info is renamed to notification-info-softText Field Wrapper calendar and time indicator icons respect color definition in dark themeText Field Wrapper has correct height when type date or time is usedModal scrolling behavior on mouse dragHeading: value xxx-large for prop sizeheadingXXXLargeStyle and $pds-heading-xxx-largefontSizeHeadingXXLarge and $pds-font-size-heading-xx-largewrap-content is deprecated.- <p-carousel wrap-content="true"></p-carousel>
+ <p-carousel></p-carousel>
neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high of color prop are deprecated.- <p-divider color="neutral-contrast-low"></p-divider>
+ <p-divider color="contrast-low"></p-divider>
- <p-divider color="neutral-contrast-medium"></p-divider>
+ <p-divider color="contrast-medium"></p-divider>
- <p-divider color="neutral-contrast-high"></p-divider>
+ <p-divider color="contrast-high"></p-divider>
Divider, Button Group, Carousel and Text List match new design languageScroller's prev and next buttons in dark themewithoutTags option for all partials, please use format: 'jsx' insteadContent Wrapper default value of prop width has changed from basic to extendedModel Signaturealign-header and width for CarouselcreatePorscheDesignSystem and usePorscheDesignSystemPluginRadio Button Wrapper keyboard arrow navigationButton Pure and Link Pure lagging active state background when scrolling on iOScolor of Icon supports disabledpatchRemixRunProcessBrowserGlobalIdentifier binary to support SSR components with RemixStepper Horizontal matches new design language@porsche-design-system/components-{js|angular|react|vue}/stylesgridStyle (JS) and pds-grid() (SCSS)gridStyle (JS) and pds-grid() (SCSS) uses optimized grid gapv3 major release of the Porsche Design Systemv2 to v3, breaking changes were avoided as far as
possible. Nevertheless, there are a few breaking changes and some more deprecations which should receive attention.tabbable.- <p-button tabbable="false">Some label</p-button>
+ <p-button tabindex="-1">Some label</p-button>
icon has changed from arrow-head-right to none. Therefore, the icon property must be
set if the component has the hide-label property.- <p-button hide-label="true">Some label</p-button>
+ <p-button hide-label="true" icon="arrow-right">Some label</p-button>
- <p-button hide-label="{ base: true, m: false }">Some label</p-button>
+ <p-button hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-button>
subline slot (visually not intended anymore).<p-button-pure>
Some label
- <p slot="subline">Some Subline</p>
</p-button-pure>
tabbable.- <p-button-pure tabbable="false">Some label</p-button-pure>
+ <p-button-pure tabindex="-1">Some label</p-button-pure>
inherit for prop color works slightly different to the previous major version. A CSS filter is required to
apply custom coloring to take advantage of using an SVG embedded in an <img/> for better SSR support and loading
performance in general.- <p-icon color="inherit" style="color: white;"></p-icon>
+ <p-icon color="inherit" style="filter: invert(100%);"></p-icon>
name prop isn't supported, please use param case syntax instead (TypeScript typings have been
updated too).- <p-icon name="arrowRight"></p-icon>
+ <p-icon name="arrow-right"></p-icon>
icon has changed from arrow-head-right to none. Therefore, the icon property must be
set if the component has the hide-label property.- <p-link href="#" hide-label="true">Some label</p-link>
+ <p-link href="#" hide-label="true" icon="arrow-right">Some label</p-link>
- <p-link href="#" hide-label="{ base: true, m: false }">Some label</p-link>
+ <p-link href="#" hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-link>
subline slot (visually not intended anymore).<p-link-pure href="#">
Some label
- <p slot="subline">Some Subline</p>
</p-link-pure>
variant property.- <p-marque variant="75-years"></p-marque>
+ <p-marque></p-marque>
// or even better, replace component by wordmark
+ <p-wordmark></p-wordmark>
tabbable.- <p-switch tabbable="false">Some label</p-switch>
+ <p-switch tabindex="-1">Some label</p-switch>
getIconLinks() partial accepts only param-cased icon names.- require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrowRight'] })
+ require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrow-right'] })
- --p-animation-duration__spinner
- --p-animation-duration__banner
+ --p-animation-duration
- <p-headline>The quick brown fox jumps over the lazy dog</p-headline>
+ <p-heading>The quick brown fox jumps over the lazy dog</p-heading>
weight is deprecated, only regular font weight will be applied.- <p-button-pure weight="thin">Some label</p-button-pure>
- <p-button-pure weight="regular">Some label</p-button-pure>
- <p-button-pure weight="semibold">Some label</p-button-pure>
- <p-button-pure weight="bold">Some label</p-button-pure>
+ <p-button-pure>Some label</p-button-pure>
theme and background-color are deprecated.- <p-content-wrapper theme="dark" background-color="default">Some content</p-content-wrapper>
+ <p-content-wrapper>Some content</p-content-wrapper>
gutter property is deprecated and has no effect anymore. Instead, a fluid gutter depending on the viewport width
is used.- <p-grid gutter="16">Some content</p-grid>
- <p-grid gutter="24">Some content</p-grid>
- <p-grid gutter="36">Some content</p-grid>
+ <p-grid>Some content</p-grid>
lazy is deprecated.- <p-icon lazy="true"></p-icon>
+ <p-icon></p-icon>
weight is deprecated, only regular font weight will be applied.- <p-link-pure href="#" weight="thin">Some label</p-link-pure>
- <p-link-pure href="#" weight="regular">Some label</p-link-pure>
- <p-link-pure href="#" weight="semibold">Some label</p-link-pure>
- <p-link-pure href="#" weight="bold">Some label</p-link-pure>
+ <p-link-pure href="#">Some label</p-link-pure>
background-color is deprecated.- <p-segmented-control background-color="background-surface">
<p-segmented-control-item value="xs">XS</p-segmented-control-item>
<p-segmented-control-item value="s">S</p-segmented-control-item>
</p-segmented-control>
+ <p-segmented-control>
<p-segmented-control-item value="xs">XS</p-segmented-control-item>
<p-segmented-control-item value="s">S</p-segmented-control-item>
</p-segmented-control>
fluid of width prop is deprecated.- <p-banner width="fluid"></p-banner>
+ <p-banner></p-banner>
neutral of state prop is deprecated.- <p-banner state="neutral">
<span slot="title">Some banner title</span>
<span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
</p-banner>
+ <p-banner state="info">
<span slot="title">Some banner title</span>
<span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
</p-banner>
fluid of width prop is deprecated.- <p-content-wrapper width="fluid">Some content</p-content-wrapper>
+ <p-content-wrapper>Some content</p-content-wrapper>
brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral of
color prop are deprecated.- <p-icon color="brand"></p-icon>
+ <p-icon color="primary"></p-icon>
- <p-icon color="default"></p-icon>
+ <p-icon color="primary"></p-icon>
- <p-icon color="neutral-contrast-low"></p-icon>
+ <p-icon color="contrast-low"></p-icon>
- <p-icon color="neutral-contrast-medium"></p-icon>
+ <p-icon color="contrast-medium"></p-icon>
- <p-icon color="neutral-contrast-high"></p-icon>
+ <p-icon color="contrast-high"></p-icon>
- <p-icon color="neutral-contrast-neutral"></p-icon>
+ <p-icon color="contrast-info"></p-icon>
neutral of state prop is deprecated.- <p-inline-notification state="neutral"></p-inline-notification>
+ <p-inline-notification state="info"></p-inline-notification>
notification-neutral | neutral-contrast-high | background-default of color prop is deprecated.- <p-tag color="notification-neutral">Color label</p-tag>
+ <p-tag color="notification-info">Color label</p-tag>
- <p-tag color="neutral-contrast-high">Color label</p-tag>
+ <p-tag color="primary">Color label</p-tag>
- <p-tag color="background-default">Color label</p-tag>
+ <p-tag color="background-base">Color label</p-tag>
background-default of color prop is deprecated.- <p-tag-dismissible color="background-default">Color label</p-tag-dismissible>
+ <p-tag-dismissible color="background-base">Color label</p-tag-dismissible>
thin | semibold of weight prop is deprecated.- <p-text weight="thin">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text weight="semibold">Some text</p-text>
+ <p-text weight="semi-bold">Some text</p-text>
brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral of
color prop is deprecated.- <p-text color="brand">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text color="default">Some text</p-text>
+ <p-text>Some text</p-text>
- <p-text color="neutral-contrast-low">Some text</p-text>
+ <p-text color="contrast-low">Some text</p-text>
- <p-text color="neutral-contrast-medium">Some text</p-text>
+ <p-text color="contrast-medium">Some text</p-text>
- <p-text color="neutral-contrast-high">Some text</p-text>
+ <p-text color="contrast-high">Some text</p-text>
- <p-text color="notification-neutral">Some text</p-text>
+ <p-text color="notification-info">Some text</p-text>
neutral of state parameter is deprecated.- …addMessage({ text: `Some message`, state: 'neutral' })
+ …addMessage({ text: `Some message`, state: 'info' })
Display componentHeading componentunderline for Link Puretheme for Checkbox Wrapper, Radio Button Wrapper, Popover, Tag Dismissible, Textarea Wrapper,
Text Field Wrapper and Fieldset Wrappersize for Icon supports x-small and x-largesize for Accordion compact="true" supports mediumSpinner, Icon, Link Pure, Button Pure, Link, Link Social, Button, Checkbox Wrapper,
Radio Button Wrapper, Popover, Modal, Select Wrapper, Tag, Tag Dismissible, Textarea Wrapper,
Inline Notification, Banner, Toast, Grid, Flex, Pagination, Scroller, Accordion, Text,
Text Field Wrapper, Content Wrapper, Segmented Control, Tabs, Tabs Bar, Headline and Fieldset Wrapper
match new design languageIcon supports
primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit
for color propwidth of Banner has changed from basic to extendedaction-icon of Inline Notification has changed from arrow-head-right to arrow-rightname of Icon has changed from arrow-head-right to arrow-rightvariant of Link and Button has changed from secondary to primarygetInitialStyles() partial
instead.applyNormalizeStyles option from getInitialStyles() partial which is applied by default now.applyNormalizeStyles option for getInitialStyles() partial which includes basic css styles for Light DOMjsdom-polyfill subpackage is available at @porsche-design-system/components-{js|angular|react|vue}/jsdom-polyfill
and can be used to have working web components in jsdom based tests (e.g. jest)testing subpackage is available at @porsche-design-system/components-{js|angular|react|vue}/testing to provide
getByRoleShadowed, getByLabelTextShadowed and getByTextShadowed utilities which use @testing-library/dom
queries internally to support Shadow DOMprefix is already reserved by a different version upon initialization of the Porsche Design SystemcomponentsReady() waits for Porsche Design System being initialized before checking components which can happen in
certain test scenarios without partials@porsche-design-system/components-react/ssr where in some cases during SSG an error was thrown when
components render their children conditionallyStepper Horizontal calculation of scroll position when used within any parent that has a margin or padding@porsche-design-system/components-vue packageModal focus cycle when pressing Shift Tab right after it was openedDisclaimer: The Porsche Design System will not inject its initial styles anymore. Please use the
getInitialStyles() partial to reduce flash of unstyled content (FOUC) as described here:
line-height calculation for all components is handled CSS only now by using ex-unit in combination with calc()
which gives the best performance, the easiest possible integration and respects UI best practices in having larger
line-height values for small font-size definitions and smaller line-height values for larger
font-size definitions. The calculated values by CSS slightly differ compared to the ones calculated by JavaScript,
which might result in minor visual changes.Textfield and Textarea in counter modeSelect WrapperCarousel now has a rewind property, better prev/next icons, a max-width for heading and description and
support for slotted descriptionSelect Wrapper height if text is zoomed up to 200%@porsche-design-system/components-react/ssr. To use it simply change your imports.getDSRPonyfill() partial right before your closing </body> tag. More
information can be found here:
- import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react';
+ import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react/ssr';
+ import { getDSRPonyfill } from '@porsche-design-system/components-react/partials';
AccordionLink Pure is stricter (In case slotted <a> is used it must be a direct child of
Link Pure)getFontLinks() partial now has { weights: ['regular', 'semi-bold'] } for a defaultLink TileScroller bug where scrollable content was not fully hidden by the gradient, when zoomed into the page.!important keyword from css property display of Link Pure and Button PureButton Pure and Link Pure error when using size="inherit" and icon="none"Text and Headline componentsPopover where drop-shadow is not shown correctly in Chrome >= 105Carousel and wrap-content="true" where the layout was out of sync with Content Wrapper for
viewports >= 1760px.Select Wrapper with custom dropdown keeps attribute changes of native select options in sync if changed
programmaticallyOptions typing import for CarouselCarouselScrollerStepper Horizontal now has size propertyStepper Horizontal uses improved focus behavior in case it becomes scrollable and scroll indicators are centered
correctly.Tabs Bar uses improved focus behavior in case it becomes scrollable and scroll indicators are centered correctly.Radio Button Wrapper visual selection change bug in Safari >= 15.5@angular to v13 to ensure backwards compatibility of @porsche-design-system/components-angularPopover visual shadow bug in SafariStepper Horizontal Item bug where pseudo styles of the counter element were overridableTabs & Tabs Bar size property when using BreakpointCustomizableModal uses poly fluid sizing for outer spacingBanner uses poly fluid sizing for outer spacingContent Wrapper uses poly fluid sizing for inner spacingModal min-width is slightly updated to perfectly fit into content area of Content Wrapper at 320px viewport widthText Field Wrapper with input type="search" is clearable via Escape key and custom clear button across browsersText Field Wrapper with input type="search" shows a "Locate me" button when actionIcon="locate" is set, emits
the action event on click and can be put into a loading state via actionLoading="true"getBrowserSupportFallbackScript() partial supporting cdn and format options as replacement for
includeOverlay() of @porsche-design-system/browser-notification npm packagegetCookiesFallbackScript() partial supporting cdn and format options as replacement for includeCookieOverlay()
of @porsche-design-system/browser-notification npm packagegetMetaTagsAndIconLinks() partial to return theme-color meta tags with prefers-color-scheme: {light|dark} media
queryStepper Horizontal Item state validationButton and Link with theme="dark" variant="tertiary" and Tag Dismissible bug on Safari < v15.5 where wrong
colors on hover were shownStepper HorizontalSegmented ControlButton, Button Pure and Switch apply aria-disabled="true" instead of disabled attribute to native button
internally in case disabled and/or loading property is setJssStyle typing importTable Head Cell now has a multiline propertyHeadline has no hypens / overflow-wrap style by defaultHeadline, Select Wrapper, Text and Text List when changing theme prop from dark to lightgetInitialStyles() partial now returns .hydrated styles, tooTagTag DismissibleText Field Wrapper now has a showCharacterCount property which can be used to hide the character count when a
maxLength attribute is set on the wrapped input.Textarea Wrapper now has a showCharacterCount property which can be used to hide the character count when a
maxLength attribute is set on the wrapped textarea.Text Field Wrapper supports unit property on input type="text"Marque optional configurable clickable/focusable area by defining padding on host elementTabs Item improved accessibility2.9.2-skeletonsgetInitialStyles partial now accepts a skeletonTagNames array of component names that will
initially have skeleton styles while the Porsche Design System is loadingButton, Button Pure, Checkbox Wrapper, Fieldset Wrapper, Link, Link Pure,
Link Social, Radio Button Wrapper, Select Wrapper, Text Field Wrapper, Textarea Wrapper can now have initial
skeleton styles when passed as skeletonTagNames to the getInitialStyles partialLink Pure are not displayed correctlyhyphen, overflow-wrap and text-size-adjust) across componentsModal scrolling and pinch to zoom on iOSModal initial position if scrollableTable Head Cell sort icon asc + desc<button> in TextModal heading and aria validation happens only when openModal focus trap respecting elements in shadow DOM and dynamically added/removed elements on first levelTabs Item focus outline on click in SafarigetFontFaceStylesheet returns additional <link> tags with rel="preconnect" and rel="dns-prefetch"format to partials getFontFaceStylesheet, getComponentChunkLinks(), getFontLinks(), getIconLinks(),
getInitialStyles(), getLoaderScript() and getMetaTagsAndIconLinks()withoutTags of partials getFontFaceStylesheet, getComponentChunkLinks(), getFontLinks(),
getIconLinks(), getInitialStyles(), getLoaderScript() and getMetaTagsAndIconLinks() is deprecated and will be
removed in v3.0.0. Please use format: 'jsx' instead.- <link rel="stylesheet" href={getFontFaceStylesheet({ withoutTags: true })} crossOrigin="true" />
+ {getFontFaceStylesheet({ format: 'jsx' })}
:focus-visible content of selected Tab in Tabs component gets focus stylingText Field Wrapper and Textarea Wrapper when maxlength attribute is setModal aria propertyModal class for slotted elements to make content full-widthButton Pure and Link Pure removed position: relative imposition, make sure to not override it with
position: staticModal close button styles when no heading is passedgetByRoleShadowed, getByLabelTextShadowed and getByTextShadowed utilities which uses
@testing-library/dom queries internally to support Shadow DOMUnhandledPromiseRejectionWarning when using skipPorscheDesignSystemCDNRequestsDuringTests()Icon component in Windows High Contrast Mode in Chromium Browsertabindex attribute on Button, Button Pure, Switch, Link, Link Pure and Link Social:focus-visible style matches outline color of Button while hoveredtabbable property of Button, Button Pure and Switch is deprecated and will be removed in v3.0.0. Please
use tabindex instead.- <p-button tabbable="false">Some button</p-button>
+ <p-button tabindex="-1">Some button</p-button>
light-electric and dark-electric are just a proof of concept, it's not
accessible regarding its color contrast and might even be removed in an upcoming major release again.light-electric theme for Switchdark-electric theme for Button Pure and Link PureText Field Wrapper and Textarea Wrapper if maxlength is present on input type="text" and
textarea:focus-visible style matches outline color of Switch while hoveredButton PureContent Wrapper regression for !important styleLink, Link Pure and Link SocialSelect Wrapper validation of select element>=12.0.0 <14.0.0offset-bottom prop of Toast (use --p-toast-position-bottom CSS variable instead)Popoverlight-electric is just a proof of concept, it's not accessible regarding its
color contrast and might even be removed in an upcoming major release again.light-electric theme for Accordion, Link, Link Pure, Button, Button Pure, Tabs, Tabs BarAccordion uses MutationObserver fallback when no ResizeObserver is available in older browsersLink and Link Social not adapting slotted anchor to the width of the elementToastBanner animations respect offset correctlyHeadline applies align and ellipsis prop correctlyaria property for ARIA attribute handling for: Button, Button Pure, Icon, Link, Link Pure, Marque,
SpinneruseLayoutEffect in SSR contextResizeObserver, however Accordion still
requires itunit and unitPosition properties to Text Field WrapperHeiti SC (pre-installed on iOS/macOS) and SimHei (pre-installed on Windows) as Chinese fallback fontMarque uses webp images for browsers that support itInline NotificationIcon now supports success for name propertyBanner for dark themeinset property with top, left, right and bottom for browser compatibilityModalSimHei and 黑体 as fallback for all components' font-familyskipPorscheDesignSystemCDNRequestsDuringTestsLink Social and Icon now support kakaotalk, naver, reddit and tiktoklinkedin iconSelect WrapperIcon loading behaviour to non-blocking, components using the Icon will no longer wait for it to loadFieldset Wrapper have now an additional icon representing the validation stateLink PureLink Pure with slotted anchor and hidden labelModal without focusable childrenactive property to Button Pureicon property of Button Pure and Link Pure was extended by none valuealignLabel and stretch property to Button Pure and Link Pure:focus-visible and :hover:focus-visible colors for Link Social and Link<a> coloring in dark theme for Link Social and LinkCheckbox Wrapper, Radio Button Wrapper, Select Wrapper, Textarea Wrapper and
Text Field Wrapper have now an additional icon representing the validation stateModal backdrop behavior to close modal on mouse-down<a> coloring in dark theme for Text, Headline, Text List, Banner, Select Wrapper and Link PureModal's backdrop in SafariAccordion reduce paddings, vertically align carets to the first heading row, adjust border color and hover stylesText Field Wrapper accessibility of type password and searchCheckbox Wrapper, Radio Button Wrapper, Select Wrapper, Textarea Wrapper and Text Field Wrapper now reflect
changes of the required attribute on their child componentmultiline property to Table CellgetLoaderScript() to initialize Porsche Design System as early as possibleTable Head Cell uses semi bold instead of bold as font weightModalAccordionBannerTableButton, Button Pure and Switch are now focusable while in loading stateText and Headline inherits white-space CSS property"strictTemplates": true option in tsconfig.jsonarrow-last and arrow-first in Icon, Button and Link componentsModalTabs Bar within Tabs for Firefox and SafariIcon is not removed after prop change, e.g. on color changeModal on screens larger than 1760pxText inside Button now has the proper size on iOS Safari when changing to and from landscape modeBanner can now be re-opened after closingBanner will not close other Banners on the siteSelect Wrapper value changes are now reflected correctlySelect Wrapper dark theme background color if used with filter propgetIconLinks() to preload Porsche Design System IconsText Field Wrapper spacing in SafarigetMetaTagsAndIconLinks() to simplify cross device fav and meta iconsSwitchText automatically breaks words/strings into new line being too long to fit inside their containerHeadline automatically breaks words/strings into new line being too long to fit inside their containerFieldset Wrapper with labelSize, required, state and message properties. If the Fieldset Wrapper
is set to required only the label of the Fieldset Wrapper gets an asterisk. It is removed from all wrapped child
components, as long as they are Porsche Design System form elements.Pagination, Modal, Tabs, Tabs Bar and Banner componenttypes.d.tsCheckbox Wrapper in iOS SafariText Field Wrapper would throw an error when reattaching to DOM too quicklyText Field Wrapper, Checkbox Wrapper and Textarea WrapperCheckbox Wrapper and Radio Button Wrapper across browsersv2.0.0 there are some important changes
that you should watch out for. To make the migration from v1.5.x to our current v2.0.0 easier, we offer a few
guidelines.@porsche-design-system/components-{js|angular|react} package to ensure all necessary Porsche Design System fonts and
components are fully loaded. If you've used the @porsche-design-system/partials package previously, stop using it and
replace the integration with the partials provided by @porsche-design-system/components-{js|angular|react} package.
Have a look at our - <%= require('@porsche-design-system/partials').getPorscheDesignSystemCoreStyles() %>
+ <%= require('@porsche-design-system/components-{js|angular|react}/partials').getInitialStyles() %>
- <%= require('@porsche-design-system/partials').getFontFaceCSS() %>
+ <%= require('@porsche-design-system/components-{js|angular|react}/partials').getFontFaceStylesheet() %>
- <link rel="preload" href="path/to/webfont/nameOfWebFontFile" as="font" type="font/woff2" crossorigin />
+ <%= require('@porsche-design-system/components-{js|angular|react}/partials').getFontLinks({ weights: ['regular', 'semi-bold'] }) %>
@porsche-design-system/components-{js|angular|react}') packages a reliable helper function componentsReady().
:focus-visible otherwise it will fallback to :focus CSS implementation.currentColor for light/dark theme with an outline of 1px
width/offset. If you have custom components build with the usage of our @porsche-design-system/utilities package then
update it to the latest version.v1.5.x. We offer a Browser Notification package
@porsche-design-system/browser-notification to alert users that these browsers are no longer supported. It supports a
blocking layer (to be used with Porsche Design System v2.x), or a dismissible banner (to be used with Porsche Design
System v1.x). Please refer to our
<button> behavior we've changed the default type of Button and Button Pure
component. Those components will render a button within their Shadow DOM as <button type="submit"> ( previously
<button type="button">).submit: The button submits the form data to the server. This is the default if the attribute is not specified for
buttons associated with a <form>, or if the attribute is an empty or invalid value.button: The button has no default behavior, and does nothing when pressed by default. It can have client-side
scripts listen to the element's events, which are triggered when the events occur.<a href="#">) in our Link, Link Pure and Link Social components as
child, we've removed support for styling the anchor tag (<a>) when it surrounds the component. So we recommend
changing the position of the <a> tag from wrapping the component to a direct slot (child) of it.- <a href="#"><p-link>Some label</p-link></a>
+ <p-link><a href="#">Some label</a></p-link>
- <a href="#"><p-link-pure>Some label</p-link-pure></a>
+ <p-link-pure><a href="#">Some label</a></p-link-pure>
- <a href="#"><p-link-social>Some label</p-link-social></a>
+ <p-link-social><a href="#">Some label</a></p-link-social>
- <p-text-field-wrapper label="Some label *"><input type="text" name="some-name" required /></p-text-field-wrapper>
+ <p-text-field-wrapper label="Some label"><input type="text" name="some-name" required /></p-text-field-wrapper>
- <p-checkbox-wrapper label="Some label *"><input type="checkbox" name="some-name" required /></p-checkbox-wrapper>
+ <p-checkbox-wrapper label="Some label"><input type="checkbox" name="some-name" required /></p-checkbox-wrapper>
- <p-radio-button-wrapper label="Some label *"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
+ <p-radio-button-wrapper label="Some label"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
- <p-radio-button-wrapper label="Some label *"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
+ <p-radio-button-wrapper label="Some label"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
- <p-textarea-wrapper label="Some label *"><textarea name="some-name" required></textarea></p-textarea-wrapper>
+ <p-textarea-wrapper label="Some label"><textarea name="some-name" required></textarea></p-textarea-wrapper>
- <p-select-wrapper label="Some label *"><select name="some-name" required><option>A</option></select></p-select-wrapper>
+ <p-select-wrapper label="Some label"><select name="some-name" required><option>A</option></select></p-select-wrapper>
Flex, Flex Item, Grid and Grid Item now use Shadow DOM, thus you are not able to overwrite styles defined by
these components any longer.PREVENT_WEB_COMPONENTS_REGISTRATION which prevented the
registration of the Porsche Design System components and loading of polyfills. Due to the fact that we no longer provide
/ need poly filling, we have completely removed the token. For advanced usage please
@porsche-design-system/components-react components have initialized the Porsche Design System Loader
automatically as soon as a component was imported. With v2.x you have to import the PorscheDesignSystemProvider once
in your index.tsx which then initializes the Porsche Design System Loader, e.g. like: // index.tsx
import ReactDOM from 'react-dom';
import { PorscheDesignSystemProvider } from '@porsche-design-system/components-react';
import { App } from './App';
ReactDOM.render(
<React.StrictMode>
+ <PorscheDesignSystemProvider>
<App />
+ </PorscheDesignSystemProvider>
</React.StrictMode>,
document.getElementById('root')
);
@porsche-design-system/components-react package) fixing missing implementation of jsdom
which the Porsche Design System relies on. Note: If your test includes Porsche Design System components, make sure
to wrap the component you want to test with a PorscheDesignSystemProvider in order to avoid exceptions. For more
information please v1.x of the Porsche Design System you've had to copy all needed JS files of
@porsche-design-system/components-js into your target directory and include the ES5 and ESM loader snippet. Now you
only need to copy one index.js file and initialize the Porsche Design System like in the example below: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Porsche Design System</title>
- <script nomodule src="PATH/TO/PACKAGE/@porsche-design-system/components-js/dist/porsche-design-system/porsche-design-system.js"></script>
- <script type="module" src="PATH/TO/PACKAGE/@porsche-design-system/components-js/dist/porsche-design-system/porsche-design-system.esm.js"></script>
+ <script src="PATH/TO/PACKAGE/@porsche-design-system/components-js/index.js"></script>
</head>
<body>
+ <script type="text/javascript">
+ porscheDesignSystem.load();
+ </script>
<p-headline variant="headline-1">Some text</p-headline>
</body>
</html>
Tabs and Tabs Bar now respect dynamic additions / removals of p-tabs-item, a and button elements. Make sure
to update the activeTabIndex when mutating elementsText, Button Pure and Link Pure when size is not inheritGrid now has a wrap and gutter propertyGrid Item, Flex Item, Tabs Item and Text List Item) that require a specific parent (Grid,
Flex, Tabs and Text List) will now throw an error if used without that parentCheckbox Wrapper and Radio Button Wrapper reflect the state of the wrapped input elementButton Group componentModal on mobileModalporsche-design-system.v2.x.HASH.js chunk when using getComponentChunkLinks() partialContent Wrapper with flexTabs Bar now supports undefined as activeTabIndexTabs Bar has a new default activeTabIndex, which is undefinedTabs Bar does not work by itself anymore. The activeTabIndex needs to be controlled from the outside
(Select Wrapper in dark theme to meet accessibility criteriaFlex and Grid work in Firefox + SafariGrid and Grid Item use Shadow DOMFlex and Flex Item use Shadow DOMContent Wrapperitalic font-style in Text is now overridden with normalSelect Wrapper within custom elementsSpinner to be displayed in a wrong sizeSelect Wrapper supports substring searchskipCheckForPorscheDesignSystemProviderDuringTestsCheckbox Wrapper, Radio Button Wrapper and Text Field Wrapper when input[type] is boundCheckbox Wrapper, Radio Button Wrapper, Select Wrapper, Text Field Wrapper and
Textarea WrappergetComponentChunkLinks() to preload Porsche Design System Components*) when input, textarea or select have required attribute within form wrapper
componentsgetFontLinks() option from weight to weightsTabs Bar where the nextButton was mistakenly rendered.Icon was not rendered when using lazy property.Text Field Wrapper with input type password where characters would overlap the icon.Marque'responsive' | 'small' | 'medium' for Marqueload() function PorscheDesignSystemModule for custom prefixtype="number" in Firefoxref propertySelect Wrapper if selected and disabled attributes are set on the same optionTabs Bar where scrolling was broken when a tab was selectedTabs Bar where the nextButton was always renderedgetFontLinks() to prevent Flash of Unstyled Text (FOUT)className propertygetInitialStyles() to prevent Flash of Unstyled Content (FOUC)getFontFaceStylesheet() to prevent Flash of Unstyled Text (FOUT)PorscheDesignSystemProvider needs to wrap applicationPorscheDesignSystemProvider is needed while testing componentsgetPrefixedComponents, prefixing is handled by PorscheDesignSystemProviderneutral contrast lownative property to Select Wrapper to force rendering of native Browser select dropdownHeadlineSelect Wrapperfetch errorcomponentsReady()console.warn behaviourModal did not remove overflow=hidden on document body.SelectWrapper from down to autoTabs consistent with Tabs Bar:focus-visible as default and :focus as fallback for focusable elementsSelectWrapper dropdown keeps now in sync with native selection if changed programmaticallySelectWrapper becomes focus stateTabsBarPagination throws console errors if disconnected from dom.type of Button and Button Pure to submitModal componentpageChange event of Pagination componentSelect Wrapper componentSelect Wrapper component* after label when input, textarea or select have required attribute within form wrapper componentsTabs componentTabs Bar componentBanner componentposition: relative; style of Link Pure and Button PureSpinner zooming bug on SafariPORSCHE_DESIGN_SYSTEM_CDN = 'cn';<a> wrapped Link and Link PuretaskQueue from congestionAsync to async for more performant component renderingCheckbox Wrapper and Radio Button WrapperSpinner zooming bug on SafaricomponentDidUnload to disconnectedCallback to fix "selectObserver is
undefined" bug in Select Wrapper and PaginationtaskQueue from congestionAsync to async for more performant component renderingCheckbox Wrapper and Radio Button Wrapperorientation of Divider componentOptgroups and Options on same level in Select Wrapper componentorientation of Divider componentOptgroups and Options on same level in Select Wrapper componentSelect Wrapperngcc to failcolor property of p-text and p-iconFieldset Wrapper componentp-headline and p-text: Added possibility to write semantic HTML tags (e.g. <h1>-<h6> or <p>,
<blockquote>, etc.) directly as slotted content.Link, Link Pure and Link SocialText new weight property semiboldButton Pure label with subline pattern as slotLink Pure label with subline pattern as slotSelect Wrapper is now ready for the catwalk. It is dressed now with a custom drop down list box and gets naked by
default on touch devices.icons and Text FieldText Field with type text for FirefoxButton and Button Pure and their disabled attributeText ListContent WrapperContent Wrapperp-text-field-wrapper, p-textarea-wrapper and p-select-wrapperLink Socialconfigure to configurate (prevents breaking change compared to stable v1.3.0)p-icon loading behaviorsafe-zone property of p-grid (Content Wrapper should be used instead)safe-zone property to p-grid for outer grid margin, max-width and centeringp-textfield-wrapper type searchp-textfield-wrapper and p-textarea-wrapperp-textfield-wrapper to p-text-field-wrapperheadline-5 to p-headlineDividerCheckbox indeterminate stateSelect WrapperCheckbox WrapperRadio Button WrapperTextarea WrapperText Field Wrapper toggle password visibilityText Field WrapperButton and Button PureLink Pure and Button Pure is optionally configurable by defining padding on host elementButton and Button PureText, Link Pure and
Button PurecomponentsReady() which indicates when lazy loaded components fully have loadedIcon and TextHeadlineTextMarqueButtonButton PureSpinnerIconFlexGridLinkLink PurePagination