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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRButtonPure } from '../dsr-components/button-pure.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, children, ...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, children, ...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/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRCarousel } from '../dsr-components/carousel.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, children, ...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, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/display.wrapper.mjs

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flyout.wrapper.mjs

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.mjs

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/headline.wrapper.mjs

@@ -6,7 +6,7 @@ import { syncRef } from '../../utils.mjs';
 import { DSRHeadline } from '../dsr-components/headline.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, children, ...rest }, ref) => {
+const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme, variant];

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-pure.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkPure } from '../dsr-components/link-pure.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, children, ...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, children, ...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/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/modal.wrapper.mjs

@@ -5,15 +5,15 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRModal } from '../dsr-components/modal.mjs';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, children, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, children, ...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);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseBut
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, children })),
+                children: (jsx(DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/switch.wrapper.mjs

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.mjs

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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs

@@ -84,6 +84,9 @@ class DSRCarousel extends Component {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const alignHeaderDeprecationMap = {
+            left: 'start',
+        };
         const btnProps = {
             className: 'btn',
             type: 'button',
@@ -97,7 +100,7 @@ class DSRCarousel extends Component {
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, isInfinitePagination(this.props.amountOfPages), this.props.alignHeader, this.props.theme)));
+            : this.props.pagination, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [this.props.heading ? jsx("h2", { id: "heading", children: this.props.heading }) : jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
                                             ((this.props.description && jsx("p", { children: this.props.description })) || jsx("slot", { name: "description" })), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "left", hideLabel: true, "aria-describedby": this.props.heading ? 'heading' : null, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && [
                                                     jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/display.mjs

@@ -10,8 +10,12 @@ class DSRDisplay extends Component {
     host;
     render() {
         splitChildren(this.props.children);
+        const alignDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const TagType = getDisplayTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.size, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.mjs

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '../components/accordion.wrapper.mjs';
 import '../components/banner.wrapper.mjs';
 import '../components/button.wrapper.mjs';
@@ -83,16 +83,22 @@ class DSRFlyout extends Component {
     hasSubFooter;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const positionDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const dismissBtn = (jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.open, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasFooter, hasSubFooter, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", role: "dialog", ...parseAndGetAriaAttributes({
                                     'aria-modal': true,
                                     'aria-hidden': !this.props.open,
                                     ...parseAndGetAriaAttributes(this.props.aria),
-                                }), tabIndex: -1, ...(hasSubFooter && { onScroll: this.props.onScroll }), children: [jsxs("div", { className: "header", children: [dismissBtn, hasHeader && (jsx("div", { className: "header-content", children: jsx("slot", { name: "header" }) }))] }), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) })), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }))] }) })] }), this.props.children] }));
+                                }), tabIndex: -1, 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                /* @ts-ignore */
+                                inert: this.props.open ? null : '', ...(hasSubFooter && { onScroll: this.props.onScroll }), children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" })] }), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) })), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }))] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.mjs

@@ -10,8 +10,12 @@ class DSRHeading extends Component {
     host;
     render() {
         splitChildren(this.props.children);
+        const alignDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.size, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/headline.mjs

@@ -11,8 +11,12 @@ class DSRHeadline extends Component {
     host;
     render() {
         splitChildren(this.props.children);
+        const alignDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const TagType = getHeadlineTagType(null, this.props.variant, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.variant, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.variant, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-model-signature.mjs

@@ -93,7 +93,7 @@ class DSRLinkTileModelSignature extends Component {
             'aria-hidden': 'true',
         };
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsx(PModelSignature, { className: "model", theme: "dark", model: this.props.model }), jsxs("div", { className: "content", children: [jsx("a", { ...overlayLinkProps }), jsx(this.props.headingTag, { className: "heading", children: this.props.heading }), this.props.description && jsx("p", { className: "description", children: this.props.description }), jsxs("div", { className: "link-group", role: "group", children: [jsx("slot", { name: "primary" }), jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsx("div", { className: "signature", children: jsx(PModelSignature, { theme: "dark", model: this.props.model }) }), jsxs("div", { className: "content", children: [jsx("a", { ...overlayLinkProps }), jsx(this.props.headingTag, { className: "heading", children: this.props.heading }), this.props.description && jsx("p", { className: "description", children: this.props.description }), jsxs("div", { className: "link-group", role: "group", children: [jsx("slot", { name: "primary" }), jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.mjs

@@ -87,13 +87,16 @@ class DSRModal extends Component {
         const hasHeader = !!this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$A(this.props.open, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$A(this.props.open, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", role: "dialog", ...parseAndGetAriaAttributes({
                                     'aria-modal': true,
                                     'aria-label': this.props.heading,
                                     'aria-hidden': !this.props.open,
                                     ...parseAndGetAriaAttributes(this.props.aria),
-                                }), tabIndex: -1, children: [hasDismissButton && (jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", children: "Dismiss modal" })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) })), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }))] }) })] }), this.props.children] }));
+                                }), tabIndex: -1, 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                /* @ts-ignore */
+                                inert: this.props.open ? null : '', children: [hasDismissButton && (jsx("div", { className: "controls", children: jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) })), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }))] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.mjs

@@ -87,7 +87,7 @@ class DSRPinCode extends Component {
         const messageId = 'message';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$v(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.isWithinForm, this.props.length, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", htmlFor: currentInputId, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { id: labelId, className: "label__text", children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { id: descriptionId, className: "label__text", children: this.props.description || jsx("slot", { name: "description" }) }))] }), jsxs("div", { className: "input-container", children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } })), this.props.isWithinForm && jsx("slot", { name: hiddenInputSlotName }), Array.from(Array(this.props.length), (_, index) => (jsx("input", { id: index === this.props.value.length ? currentInputId : null, type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-busy": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
-                                            , value: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required })))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+                                            , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index)))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.mjs

@@ -68,7 +68,6 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getPopoverCss as getComponentCss$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRPopover extends Component {
     host;
@@ -76,13 +75,13 @@ class DSRPopover extends Component {
     spacer;
     popover;
     button;
+    isNative = false;
+    parentTableElement;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$u(this.props.direction, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...parseAndGetAriaAttributes({
-                                        ...parseAndGetAriaAttributes(this.props.aria),
-                                        'aria-expanded': this.props.open,
-                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), this.props.open && (jsx("div", { className: "spacer", children: jsx("div", { className: "popover", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) }) }))] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$u(this.props.direction, this.props.isNative, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...(this.props.isNative ? { popoverTarget: 'spacer' } : { ...(!this.props.isNative && { 'aria-expanded': this.props.open }),
+                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNative) && (jsx("div", { className: "spacer", ...(this.props.isNative && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsx("div", { className: "popover", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) }) }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs

@@ -68,7 +68,7 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getScrollerCss as getComponentCss$s } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes, isScrollable } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { scrollAreaClass, parseAndGetAriaAttributes, isScrollable } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRScroller extends Component {
     host;
@@ -87,7 +87,7 @@ class DSRScroller extends Component {
             return (jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", "aria-label": direction, children: jsx(PIcon, { className: "icon", name: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', theme: this.props.theme }) }) }, direction));
         };
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$s(deprecationMap[this.props.gradientColorScheme] || this.props.gradientColor, this.isNextHidden, this.isPrevHidden, this.props.scrollIndicatorPosition || this.props.alignScrollIndicator, this.props.scrollbar, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "scroll-area", children: jsxs("div", { className: "scroll-wrapper", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsx("slot", {}), jsx("div", { className: "trigger" }), jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: scrollAreaClass, children: jsxs("div", { className: "scroll-wrapper", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsx("slot", {}), jsx("div", { className: "trigger" }), jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.mjs

@@ -10,7 +10,7 @@ class DSRTextListItem extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5()));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("span", { children: jsx("slot", {}) }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.mjs

@@ -22,8 +22,12 @@ class DSRText extends Component {
             thin: 'regular',
             semibold: 'semi-bold',
         };
+        const alignDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const TagType = getTextTagType(null, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), this.props.align, (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(this.props.size, (weightDeprecationMap[this.props.weight] || this.props.weight), (alignDeprecationMap[this.props.align] || this.props.align), (colorDeprecationMap[this.props.color] || this.props.color), this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/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?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/popover.d.ts

@@ -5,5 +5,7 @@ export declare class DSRPopover extends Component<any> {
     private spacer;
     private popover;
     private button;
+    private isNative;
+    private parentTableElement;
     render(): JSX.Element;
 }

package/ssr/esm/lib/types.d.ts

@@ -508,11 +508,21 @@ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "auto"
 ];
 export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
+declare const TYPOGRAPHY_ALIGNS: readonly [
+    "start",
+    "center",
+    "end",
+    "left",
+    "right"
+];
+export type TypographyAlign = (typeof TYPOGRAPHY_ALIGNS)[number];
 declare const ALIGN_LABELS: readonly [
+    "start",
+    "end",
     "left",
     "right"
 ];
-export type AlignLabel = typeof ALIGN_LABELS[number];
+export type AlignLabel = (typeof ALIGN_LABELS)[number];
 declare const BUTTON_TYPES: readonly [
     "button",
     "submit",
@@ -534,12 +544,6 @@ declare const LINK_BUTTON_VARIANTS: readonly [
     "tertiary"
 ];
 export type LinkButtonVariant = typeof LINK_BUTTON_VARIANTS[number];
-declare const TEXT_ALIGNS: readonly [
-    "left",
-    "center",
-    "right"
-];
-export type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
     "primary",
     "contrast-low",
@@ -557,7 +561,7 @@ declare const TEXT_COLORS: readonly [
     "neutral-contrast-high",
     "notification-neutral"
 ];
-export type TextColor = typeof TEXT_COLORS[number];
+export type TextColor = (typeof TEXT_COLORS)[number];
 declare const TEXT_SIZES: readonly [
     "xx-small",
     "x-small",
@@ -567,7 +571,7 @@ declare const TEXT_SIZES: readonly [
     "x-large",
     "inherit"
 ];
-export type TextSize = typeof TEXT_SIZES[number];
+export type TextSize = (typeof TEXT_SIZES)[number];
 declare const TEXT_WEIGHTS: readonly [
     "regular",
     "semi-bold",
@@ -575,7 +579,7 @@ declare const TEXT_WEIGHTS: readonly [
     "thin",
     "semibold"
 ];
-export type TextWeight = typeof TEXT_WEIGHTS[number];
+export type TextWeight = (typeof TEXT_WEIGHTS)[number];
 declare const LINK_TARGETS: readonly [
     "_self",
     "_blank",
@@ -637,8 +641,9 @@ declare const CAROUSEL_WIDTHS: readonly [
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
-    "left",
-    "center"
+    "start",
+    "center",
+    "left"
 ];
 export type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | string;
@@ -683,7 +688,7 @@ declare const DISPLAY_COLORS: readonly [
     "inherit"
 ];
 export type DisplayColor = (typeof DISPLAY_COLORS)[number];
-export type DisplayAlign = TextAlign;
+export type DisplayAlign = TypographyAlign;
 declare const DIVIDER_COLORS: readonly [
     "contrast-low",
     "contrast-medium",
@@ -794,6 +799,8 @@ declare const FLEX_ITEM_FLEXS: readonly [
 ];
 export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
 declare const FLYOUT_POSITIONS: readonly [
+    "start",
+    "end",
     "left",
     "right"
 ];
@@ -864,7 +871,7 @@ declare const HEADING_COLORS: readonly [
     "inherit"
 ];
 export type HeadingColor = (typeof HEADING_COLORS)[number];
-export type HeadingAlign = TextAlign;
+export type HeadingAlign = TypographyAlign;
 declare const HEADLINE_VARIANTS: readonly [
     "large-title",
     "headline-1",
@@ -891,7 +898,7 @@ declare const HEADLINE_COLORS: readonly [
     "inherit"
 ];
 export type HeadlineColor = (typeof HEADLINE_COLORS)[number];
-export type HeadlineAlign = TextAlign;
+export type HeadlineAlign = TypographyAlign;
 declare const ICON_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
@@ -970,6 +977,18 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
 export type LinkTileModelSignatureWeight = TileWeight;
 export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
 export type LinkTileModelSignatureLinkDirection = GroupDirection;
+declare const MODEL_SIGNATURES_MANIFEST: {
+    "718": string;
+    "911": string;
+    boxster: string;
+    cayenne: string;
+    cayman: string;
+    macan: string;
+    panamera: string;
+    taycan: string;
+    "turbo-s": string;
+    turbo: string;
+};
 declare const MARQUE_VARIANTS: readonly [
     "75-years",
     "default"
@@ -987,18 +1006,6 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
-declare const MODEL_SIGNATURES_MANIFEST: {
-    "718": string;
-    "911": string;
-    boxster: string;
-    cayenne: string;
-    cayman: string;
-    macan: string;
-    panamera: string;
-    taycan: string;
-    "turbo-s": string;
-    turbo: string;
-};
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"
@@ -1171,7 +1178,8 @@ declare const TEXT_TAGS: readonly [
     "time",
     "legend"
 ];
-export type TextTag = typeof TEXT_TAGS[number];
+export type TextTag = (typeof TEXT_TAGS)[number];
+export type TextAlign = TypographyAlign;
 declare const UNIT_POSITIONS: readonly [
     "prefix",
     "suffix"