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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var buttonPure = require('../dsr-components/button-pure.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, children, ...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, children, ...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/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.cjs

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.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, children, ...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, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

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

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

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

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

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

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var linkPure = require('../dsr-components/link-pure.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, children, ...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, children, ...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/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/modal.wrapper.cjs

@@ -7,15 +7,15 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var modal = require('../dsr-components/modal.cjs');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, className, children, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, children, ...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);
     // @ts-ignore
     if (!process.browser) {
@@ -26,7 +26,7 @@ const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCl
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(modal.DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, children })),
+                children: (jsxRuntime.jsx(modal.DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme, children })),
             }
             : {
                 children,

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

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

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

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

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

@@ -86,6 +86,9 @@ class DSRCarousel extends react.Component {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const alignHeaderDeprecationMap = {
+            left: 'start',
+        };
         const btnProps = {
             className: 'btn',
             type: 'button',
@@ -99,7 +102,7 @@ class DSRCarousel extends react.Component {
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), this.props.alignHeader, this.props.theme)));
+            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [this.props.heading ? jsxRuntime.jsx("h2", { id: "heading", children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
                                             ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.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) && [
                                                     jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }),

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

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

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

@@ -85,16 +85,22 @@ class DSRFlyout extends react.Component {
     hasSubFooter;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.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 = (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }));
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasFooter, hasSubFooter, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", role: "dialog", ...utilsEntry.parseAndGetAriaAttributes({
                                     'aria-modal': true,
                                     'aria-hidden': !this.props.open,
                                     ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                }), tabIndex: -1, ...(hasSubFooter && { onScroll: this.props.onScroll }), children: [jsxRuntime.jsxs("div", { className: "header", children: [dismissBtn, hasHeader && (jsxRuntime.jsx("div", { className: "header-content", children: jsxRuntime.jsx("slot", { name: "header" }) }))] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasSubFooter && (jsxRuntime.jsx("div", { className: "sub-footer", children: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" })] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasSubFooter && (jsxRuntime.jsx("div", { className: "sub-footer", children: jsxRuntime.jsx("slot", { name: "sub-footer" }) }))] }) })] }), this.props.children] }));
     }
 }
 

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

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

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

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

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

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

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

@@ -89,13 +89,16 @@ class DSRModal extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModalCss(this.props.open, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModalCss(this.props.open, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", role: "dialog", ...utilsEntry.parseAndGetAriaAttributes({
                                     'aria-modal': true,
                                     'aria-label': this.props.heading,
                                     'aria-hidden': !this.props.open,
                                     ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                }), tabIndex: -1, children: [hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", children: "Dismiss modal" })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) })), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "controls", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) })), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -89,7 +89,7 @@ class DSRPinCode extends react.Component {
         const messageId = 'message';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.isWithinForm, this.props.length, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "label", htmlFor: currentInputId, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { id: labelId, className: "label__text", children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { id: descriptionId, className: "label__text", children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) }))] }), jsxRuntime.jsxs("div", { className: "input-container", children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': 'Loading state' } })), this.props.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.hiddenInputSlotName }), Array.from(Array(this.props.length), (_, index) => (jsxRuntime.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) && (jsxRuntime.jsx(stateMessage.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) && (jsxRuntime.jsx(stateMessage.StateMessage, { id: messageId, state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -70,7 +70,6 @@ var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
 class DSRPopover extends react.Component {
     host;
@@ -78,13 +77,13 @@ class DSRPopover extends react.Component {
     spacer;
     popover;
     button;
+    isNative = false;
+    parentTableElement;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
-                                        ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                        'aria-expanded': this.props.open,
-                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), this.props.open && (jsxRuntime.jsx("div", { className: "spacer", children: jsxRuntime.jsx("div", { className: "popover", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) }) }))] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { type: "button", ...(this.props.isNative ? { popoverTarget: 'spacer' } : { ...(!this.props.isNative && { 'aria-expanded': this.props.open }),
+                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNative) && (jsxRuntime.jsx("div", { className: "spacer", ...(this.props.isNative && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsxRuntime.jsx("div", { className: "popover", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -89,7 +89,7 @@ class DSRScroller extends react.Component {
             return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", "aria-label": direction, children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', theme: this.props.theme }) }) }, direction));
         };
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getScrollerCss(deprecationMap[this.props.gradientColorScheme] || this.props.gradientColor, this.isNextHidden, this.isPrevHidden, this.props.scrollIndicatorPosition || this.props.alignScrollIndicator, this.props.scrollbar, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: "scroll-area", children: jsxRuntime.jsxs("div", { className: "scroll-wrapper", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: utilsEntry.isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("div", { className: "trigger" }), jsxRuntime.jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: utilsEntry.scrollAreaClass, children: jsxRuntime.jsxs("div", { className: "scroll-wrapper", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: utilsEntry.isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("div", { className: "trigger" }), jsxRuntime.jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
     }
 }
 

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

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

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

@@ -24,8 +24,12 @@ class DSRText extends react.Component {
             thin: 'regular',
             semibold: 'semi-bold',
         };
+        const alignDeprecationMap = {
+            left: 'start',
+            right: 'end',
+        };
         const TagType = utilsEntry.getTextTagType(null, this.props.tag);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextCss(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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextCss(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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(TagType, { className: "root", children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }