@porsche-design-system/components-react 3.7.0 → 3.8.0-rc.0

package/CHANGELOG.md

@@ -14,13 +14,119 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### 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 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
+  ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <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 ([#2819](https://github.com/porsche-design-system/porsche-design-system/pull/2819))
+
+```diff
+- <p-carousel align-header="left"></p-carousel>
++ <p-carousel-pure align-header="start"></p-carousel>
+```
+
+#### Fixed
+
+- `Popover` doesn't get cut off when used within the `Table` component
+  ([#2814](https://github.com/porsche-design-system/porsche-design-system/pull/2814))
+- `Flyout` and `Modal` with `open="false"` and nested `Accordion` with `open="true"` containing focusable elements like
+  links can't be focused anymore ([#2818](https://github.com/porsche-design-system/porsche-design-system/pull/2818))
+- Background for open `Flyout` and `Modal` on iOS Mobile Safari with collapsed address bar is no longer scrollable
+  ([#2822](https://github.com/porsche-design-system/porsche-design-system/pull/2822))
+- `Tabs Bar` works with translated page content
+  ([#2847](https://github.com/porsche-design-system/porsche-design-system/pull/2847))
+
 ### [3.7.0] - 2023-10-04
 
 ### [3.7.0-rc.2] - 2023-10-04
 
 #### Added
 
-- Styles: `gridStyles` and `pds-grid` support basic usage inside `Flyout` component
+- Styles: `gridStyles` and `pds-grid()` support basic usage inside `Flyout` component
   ([#2756](https://github.com/porsche-design-system/porsche-design-system/pull/2756))
 
 #### Fixed
@@ -348,7 +454,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Wordmark`, `Crest` and `Model Signature` respect parent width/height
   ([#2479](https://github.com/porsche-design-system/porsche-design-system/pull/2479))
 - `Button Tile`, `Link Tile` and `Link Tile Model Signature` are using correct border radius of
-  `pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
+  `$pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
 - `Text Field Wrapper` with `input type="search"` has better accessibility for clear button
   ([#2476](https://github.com/porsche-design-system/porsche-design-system/pull/2476))
 - `Accordion` layout shift with nested accordions
@@ -360,7 +466,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
-- Styles: `borderRadiusLarge` and `pds-border-radius-large` are exposing correct value
+- Styles: `borderRadiusLarge` and `$pds-border-radius-large` are exposing correct value
   ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2463))
 
 ### [3.0.0-alpha.6] - 2023-04-06
@@ -513,8 +619,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Styles: ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
   - `gridWide`
-  - `gridWideColumnStart` and `pds-grid-wide-column-start`
-  - `gridWideColumnEnd` and `pds-grid-wide-column-end`
+  - `gridWideColumnStart` and `$pds-grid-wide-column-start`
+  - `gridWideColumnEnd` and `$pds-grid-wide-column-end`
   - `gridNarrowOffset`, `gridNarrowOffsetBase`, `gridNarrowOffsetS`, `gridNarrowOffsetXXL` and
     `$pds-grid-narrow-offset-base`, `$pds-grid-narrow-offset-s`, `$pds-grid-narrow-offset-xxl`
   - `gridBasicOffset`, `gridBasicOffsetBase`, `gridBasicOffsetS`, `gridBasicOffsetXXL` and
@@ -540,7 +646,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Changed
 
-- Styles: `gridStyles` and `pds-grid` are supporting an additional column range called `wide`
+- Styles: `gridStyles` and `pds-grid()` are supporting an additional column range called `wide`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 - Styles: SCSS version needs to be imported by `@porsche-design-system/components-js/styles` instead of
   `@porsche-design-system/components-js/styles/scss`
@@ -550,9 +656,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Banner`: CSS variable `--p-banner-position-type`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
-  ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `$pds-grid-safe-zone-base`,
+  `$pds-grid-safe-zone-xxl` ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
+- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `$pds-grid-width-min`, `$pds-grid-width-max`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
@@ -822,11 +928,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Display` supports value `small` for prop `size`
 - Partials: `getInitialStyles` supports multi prefix, e.g.
   `getInitialStyles({ prefix: ['', 'some-prefix', 'another-prefix'] });`
-- Styles: `displaySmallStyle` and `pds-display-small`
-- Styles: `textXXSmallStyle` and `pds-text-xx-small`
+- Styles: `displaySmallStyle` and `$pds-display-small`
+- Styles: `textXXSmallStyle` and `$pds-text-xx-small`
 - Styles: `fontSizeDisplaySmall` and `$pds-font-size-display-small`
 - Styles: `fontSizeTextXXSmall` and `$pds-font-size-text-xx-small`
-- Styles: `getHoverStyle` and `pds-hover`
+- Styles: `getHoverStyle` and `pds-hover()`
 - `Banner` has `heading` and `description` prop as well as `slot="heading"` and deprecated `slot="title"`
 - Custom events have consistent names across components and deprecated old event names
   - `Accordion` emits `change` and deprecated `accordionChange` event
@@ -863,7 +969,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Display` uses font-weight regular and font-style normal
 - Partials: `getInitialStyles` matches new design language
 - Partials: All component related, slotted Light DOM styles have been moved to `getInitialStyles`
-- Styles: `getFocusStyle` and `pds-focus` doesn't need `theme` parameter anymore
+- Styles: `getFocusStyle` and `pds-focus()` doesn't need `theme` parameter anymore
 - Styles: `breakpoint{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 language
@@ -882,7 +988,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Removed
 
 - `Heading`: value `xxx-large` for prop `size`
-- Styles: `headingXXXLargeStyle` and `pds-heading-xxx-large`
+- Styles: `headingXXXLargeStyle` and `$pds-heading-xxx-large`
 - Styles: `fontSizeHeadingXXLarge` and `$pds-font-size-heading-xx-large`
 
 ### [3.0.0-alpha.2] - 2023-02-27
@@ -944,8 +1050,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `Stepper Horizontal` matches new design language
 - Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package
   `@porsche-design-system/components-{js|angular|react|vue}/styles`
-- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid` (SCSS)
-- Styles: `gridStyle` (JS) and `pds-grid` (SCSS) uses optimized grid gap
+- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid()` (SCSS)
+- Styles: `gridStyle` (JS) and `pds-grid()` (SCSS) uses optimized grid gap
 
 ### [3.0.0-alpha.0] - 2023-02-08
 

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-pure');
     const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight];

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

package/cjs/lib/components/display.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PDisplay = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
+const PDisplay = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-display');
     const propsToSync = [align, color, ellipsis, size, tag, theme];

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'right', theme = 'light', className, ...rest }, ref) => {
+const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'end', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-flyout');

package/cjs/lib/components/heading.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PHeading = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
+const PHeading = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-heading');
     const propsToSync = [align, color, ellipsis, size, tag, theme];

package/cjs/lib/components/headline.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-const PHeadline = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+const PHeadline = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme, variant];

package/cjs/lib/components/link-pure.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-pure');
     const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];

package/cjs/lib/components/modal.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/switch.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

package/cjs/lib/components/text.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PText = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme, weight];

package/esm/lib/components/button-pure.wrapper.d.ts

@@ -63,7 +63,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
+    alignLabel?: BreakpointCustomizable<"start" | "end" | "left" | "right"> | undefined;
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/button-pure.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButtonPure = forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-pure');
     const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight];

package/esm/lib/components/carousel.wrapper.d.ts

@@ -71,7 +71,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Alignment of heading and description
      */
-    alignHeader?: "center" | "left" | undefined;
+    alignHeader?: "center" | "start" | "left" | undefined;
     /**
      * Defines the description used in the carousel.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);

package/esm/lib/components/display.wrapper.d.ts

@@ -30,7 +30,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "left" | "right" | undefined;
+    align?: "center" | "start" | "end" | "left" | "right" | undefined;
     /**
      * Basic text color variations depending on theme property.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDisplay = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
+const PDisplay = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-display');
     const propsToSync = [align, color, ellipsis, size, tag, theme];

package/esm/lib/components/flyout.wrapper.d.ts

@@ -38,7 +38,7 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * The position of the flyout
      */
-    position?: "left" | "right" | undefined;
+    position?: "start" | "end" | "left" | "right" | undefined;
     /**
      * Adapts the flyout color depending on the theme.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'right', theme = 'light', className, ...rest }, ref) => {
+const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-flyout');

package/esm/lib/components/heading.wrapper.d.ts

@@ -30,7 +30,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "left" | "right" | undefined;
+    align?: "center" | "start" | "end" | "left" | "right" | undefined;
     /**
      * Basic text color variations depending on theme property.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PHeading = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
+const PHeading = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-heading');
     const propsToSync = [align, color, ellipsis, size, tag, theme];

package/esm/lib/components/headline.wrapper.d.ts

@@ -31,7 +31,7 @@ export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "left" | "right" | undefined;
+    align?: "center" | "start" | "end" | "left" | "right" | undefined;
     /**
      * Basic text color variations depending on theme property.
      */

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

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-const PHeadline = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme, variant];

package/esm/lib/components/link-pure.wrapper.d.ts

@@ -71,7 +71,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
+    alignLabel?: BreakpointCustomizable<"start" | "end" | "left" | "right"> | undefined;
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/link-pure.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkPure = forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-pure');
     const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];

package/esm/lib/components/modal.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable, Theme } from '../types';
 export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -38,6 +38,10 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * If true, the modal is open.
      */
     open: boolean;
+    /**
+     * Adapts the modal color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -77,6 +81,10 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      * If true, the modal is open.
      */
     open: boolean;
+    /**
+     * Adapts the modal color depending on the theme.
+     */
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/switch.wrapper.d.ts

@@ -42,7 +42,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
+    alignLabel?: BreakpointCustomizable<"start" | "end" | "left" | "right"> | undefined;
     /**
      * Visualize the switch with on/off status.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSwitch = forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);

package/esm/lib/components/text.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "left" | "right" | undefined;
+    align?: "center" | "start" | "end" | "left" | "right" | undefined;
     /**
      * Basic text color variations depending on theme property.
      */

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PText = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme, weight];