@porsche-design-system/components-react 3.15.0-rc.4 → 3.15.0-rc.5

package/CHANGELOG.md

@@ -14,6 +14,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.0-rc.5] - 2024-05-16
+
+#### Added
+
+- `Button Pure`: Prop `underline` to show an underline for the label
+  ([#3212](https://github.com/porsche-design-system/porsche-design-system/pull/3212))
+  
+#### Changed
+
+- Banner: Refactor Banner to use native `popover`
+  ([#3196](https://github.com/porsche-design-system/porsche-design-system/pull/3196))
+
+#### Fixed
+
+- `aria` property now supports escaped single quotes inside JSON strings, e.g.
+  `aria="{ 'aria-label': 'You can\'t do that? yes you can!' }"`
+  ([#3217](https://github.com/porsche-design-system/porsche-design-system/pull/3217))
+
 ### [3.15.0-rc.4] - 2024-05-06
 
 #### Added

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

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', value, weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, 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, name, size, stretch, theme || hooks.useTheme(), type, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -53,6 +53,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
@@ -116,6 +120,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Specifies the type of the button.
      */
     type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean | undefined;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.15.0-rc.4",
+  "version": "3.15.0-rc.5",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.15.0-rc.4"
+    "@porsche-design-system/components-js": "3.15.0-rc.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -4232,6 +4232,20 @@ const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
+const getBannerPopoverResetStyles = () => {
+    return {
+        position: 'fixed',
+        margin: 0,
+        padding: 0,
+        width: 'auto', // ua popover reset
+        height: 'auto', // ua popover reset
+        maxWidth: '100%', // If component is wrapped in container with maxWidth
+        border: '0', // ua popover reset
+        outline: '0', // ua popover reset
+        overflow: 'visible', // ua popover reset
+    };
+};
+
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
@@ -4239,48 +4253,53 @@ const topBottomFallback = '56px';
 const getComponentCss$14 = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                position: 'fixed',
-                bottom: `var(${cssVariableBottom},${topBottomFallback})`,
-                left: gridExtendedOffsetBase,
-                right: gridExtendedOffsetBase,
-                margin: 0,
-                padding: 0,
-                width: 'auto',
-                maxWidth: '100%', // If component is wrapped in container with maxWidth
-                zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
-                ...dropShadowHighStyle,
-                borderRadius: borderRadiusSmall, // needed for rounded box-shadow
-                ...(isOpen
-                    ? {
-                        opacity: 1,
-                        visibility: 'inherit',
-                        transform: 'translate3d(0,0,0)',
-                        transition: `transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}`,
-                    }
-                    : {
-                        opacity: 0,
-                        visibility: 'hidden',
-                        transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
-                        '&(.hydrated),&(.ssr)': {
-                            transition: `visibility 0s linear var(${cssVariableAnimationDuration}, ${motionDurationLong}), transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}`,
-                        },
-                    }),
-                [getMediaQueryMin('s')]: {
-                    top: `var(${cssVariableTop},${topBottomFallback})`,
-                    bottom: 'auto',
-                    left: gridExtendedOffsetS,
-                    right: gridExtendedOffsetS,
-                    // space before and after "-" is crucial)
-                    ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
-                },
-                [getMediaQueryMin('xxl')]: {
-                    left: gridExtendedOffsetXXL,
-                    right: gridExtendedOffsetXXL,
-                },
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...getBannerPopoverResetStyles(),
+                    bottom: `var(${cssVariableBottom},${topBottomFallback})`,
+                    left: gridExtendedOffsetBase,
+                    right: gridExtendedOffsetBase,
+                    zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
+                    ...dropShadowHighStyle,
+                    borderRadius: borderRadiusSmall, // needed for rounded box-shadow
+                    ...(isOpen
+                        ? {
+                            opacity: 1,
+                            visibility: 'inherit',
+                            pointerEvents: 'inherit',
+                            transform: 'translate3d(0,0,0)',
+                            transition: `${getTransition('transform', 'moderate', 'in')}, ${getTransition('opacity', 'moderate', 'in')}`,
+                        }
+                        : {
+                            opacity: 0,
+                            visibility: 'hidden',
+                            pointerEvents: 'none',
+                            transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
+                            '&(.hydrated),&(.ssr)': {
+                                transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong}), ${getTransition('transform', 'moderate', 'out')}, ${getTransition('opacity', 'moderate', 'out')}`,
+                                // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
+                                '@supports (transition-behavior: allow-discrete)': {
+                                    transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong}), ${getTransition('transform', 'moderate', 'out')}, ${getTransition('opacity', 'moderate', 'out')}, overlay var(${cssVariableTransitionDuration}, ${motionDurationModerate}) ${motionEasingOut} allow-discrete`,
+                                },
+                            },
+                        }),
+                    [getMediaQueryMin('s')]: {
+                        top: `var(${cssVariableTop},${topBottomFallback})`,
+                        bottom: 'auto',
+                        left: gridExtendedOffsetS,
+                        right: gridExtendedOffsetS,
+                        // space before and after "-" is crucial)
+                        ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
+                    },
+                    [getMediaQueryMin('xxl')]: {
+                        left: gridExtendedOffsetXXL,
+                        right: gridExtendedOffsetXXL,
+                    },
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
         },
     });
 };
@@ -4348,7 +4367,7 @@ const getVisibilityJssStyle = (hideLabel) => {
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
-const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
+const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const hasIcon = hasVisibleIcon(icon, iconSource);
@@ -4374,6 +4393,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             padding: 0,
             margin: 0, // Removes default button margin on safari 15
             color: isDisabledOrLoading ? disabledColor : primaryColor,
+            textDecoration: underline ? 'underline' : 'none',
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
@@ -4450,9 +4470,9 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
@@ -6501,11 +6521,7 @@ const getComponentCss$J = (state, hasAction, hasClose, theme) => {
 };
 
 const getComponentCss$I = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
-        root: {
-            textDecoration: underline ? 'underline' : 'none',
-        },
-    }, hasSlottedAnchor && {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
                 '&(a)': {

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3193,12 +3193,13 @@ const isDisabledOrLoading = (disabled, loading) => {
 
 const parseJSONAttribute = (attribute) => {
     return typeof attribute === 'string'
-        ? // input is potentially JSON parsable string, e.g. "{ aria-label: 'Some label' }"
+        ? // input is potentially JSON parsable string, e.g. "{ 'aria-label': 'Some label' }"
             JSON.parse(attribute
-                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/(?<!\\)'/g, '"') // convert single quotes to double quotes except the ones which are escaped by backslash
+                .replace(/\\(?!u0027)/g, '') // remove string escapes except the ones followed by unicode u0027
                 .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":') // wrap keys in double quotes
             )
-        : // input is object, e.g. { aria-label: 'Some label' }
+        : // input is object, e.g. { 'aria-label': 'Some label' }
             attribute;
 };
 

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

@@ -25,6 +25,7 @@ const PBanner = react.forwardRef(({ description = '', dismissButton = true, head
         // @ts-ignore
         ...(!process.browser
             ? {
+                ...{ "popover": "manual" },
                 children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, headingTag, open, persistent, state, theme: theme || hooks.useTheme(), width, children })),
             }
             : {

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

@@ -7,13 +7,13 @@ 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 = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', value, 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, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, 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, name, size, stretch, theme || hooks.useTheme(), type, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'end', aria
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || hooks.useTheme(), type, value, weight, children })),
+                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || hooks.useTheme(), type, underline, value, weight, children })),
             }
             : {
                 children,

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

@@ -87,7 +87,7 @@ class DSRBanner extends react.Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getBannerCss(this.props.open)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] })] }), 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.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -92,7 +92,7 @@ class DSRButtonPure extends react.Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme)));
         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", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -4230,6 +4230,20 @@ const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
+const getBannerPopoverResetStyles = () => {
+    return {
+        position: 'fixed',
+        margin: 0,
+        padding: 0,
+        width: 'auto', // ua popover reset
+        height: 'auto', // ua popover reset
+        maxWidth: '100%', // If component is wrapped in container with maxWidth
+        border: '0', // ua popover reset
+        outline: '0', // ua popover reset
+        overflow: 'visible', // ua popover reset
+    };
+};
+
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
@@ -4237,48 +4251,53 @@ const topBottomFallback = '56px';
 const getComponentCss$14 = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                position: 'fixed',
-                bottom: `var(${cssVariableBottom},${topBottomFallback})`,
-                left: gridExtendedOffsetBase,
-                right: gridExtendedOffsetBase,
-                margin: 0,
-                padding: 0,
-                width: 'auto',
-                maxWidth: '100%', // If component is wrapped in container with maxWidth
-                zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
-                ...dropShadowHighStyle,
-                borderRadius: borderRadiusSmall, // needed for rounded box-shadow
-                ...(isOpen
-                    ? {
-                        opacity: 1,
-                        visibility: 'inherit',
-                        transform: 'translate3d(0,0,0)',
-                        transition: `transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingIn}`,
-                    }
-                    : {
-                        opacity: 0,
-                        visibility: 'hidden',
-                        transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
-                        '&(.hydrated),&(.ssr)': {
-                            transition: `visibility 0s linear var(${cssVariableAnimationDuration}, ${motionDurationLong}), transform var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}, opacity var(${cssVariableAnimationDuration}, ${motionDurationModerate}) ${motionEasingOut}`,
-                        },
-                    }),
-                [getMediaQueryMin('s')]: {
-                    top: `var(${cssVariableTop},${topBottomFallback})`,
-                    bottom: 'auto',
-                    left: gridExtendedOffsetS,
-                    right: gridExtendedOffsetS,
-                    // space before and after "-" is crucial)
-                    ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
-                },
-                [getMediaQueryMin('xxl')]: {
-                    left: gridExtendedOffsetXXL,
-                    right: gridExtendedOffsetXXL,
-                },
-                ...colorSchemeStyles,
-                ...hostHiddenStyles,
-            }),
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...getBannerPopoverResetStyles(),
+                    bottom: `var(${cssVariableBottom},${topBottomFallback})`,
+                    left: gridExtendedOffsetBase,
+                    right: gridExtendedOffsetBase,
+                    zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
+                    ...dropShadowHighStyle,
+                    borderRadius: borderRadiusSmall, // needed for rounded box-shadow
+                    ...(isOpen
+                        ? {
+                            opacity: 1,
+                            visibility: 'inherit',
+                            pointerEvents: 'inherit',
+                            transform: 'translate3d(0,0,0)',
+                            transition: `${getTransition('transform', 'moderate', 'in')}, ${getTransition('opacity', 'moderate', 'in')}`,
+                        }
+                        : {
+                            opacity: 0,
+                            visibility: 'hidden',
+                            pointerEvents: 'none',
+                            transform: `translate3d(0,calc(var(${cssVariableBottom},${topBottomFallback}) + 100%),0)`,
+                            '&(.hydrated),&(.ssr)': {
+                                transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong}), ${getTransition('transform', 'moderate', 'out')}, ${getTransition('opacity', 'moderate', 'out')}`,
+                                // during transition the element will be removed from top-layer immediately, resulting in other elements laying over (as of Mai 2024 only Chrome is fixed by this)
+                                '@supports (transition-behavior: allow-discrete)': {
+                                    transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationLong}), ${getTransition('transform', 'moderate', 'out')}, ${getTransition('opacity', 'moderate', 'out')}, overlay var(${cssVariableTransitionDuration}, ${motionDurationModerate}) ${motionEasingOut} allow-discrete`,
+                                },
+                            },
+                        }),
+                    [getMediaQueryMin('s')]: {
+                        top: `var(${cssVariableTop},${topBottomFallback})`,
+                        bottom: 'auto',
+                        left: gridExtendedOffsetS,
+                        right: gridExtendedOffsetS,
+                        // space before and after "-" is crucial)
+                        ...(!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop},${topBottomFallback})),0)` }),
+                    },
+                    [getMediaQueryMin('xxl')]: {
+                        left: gridExtendedOffsetXXL,
+                        right: gridExtendedOffsetXXL,
+                    },
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
         },
     });
 };
@@ -4346,7 +4365,7 @@ const getVisibilityJssStyle = (hideLabel) => {
 };
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
-const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
+const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const hasIcon = hasVisibleIcon(icon, iconSource);
@@ -4372,6 +4391,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             padding: 0,
             margin: 0, // Removes default button margin on safari 15
             color: isDisabledOrLoading ? disabledColor : primaryColor,
+            textDecoration: underline ? 'underline' : 'none',
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
@@ -4448,9 +4468,9 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
@@ -6499,11 +6519,7 @@ const getComponentCss$J = (state, hasAction, hasClose, theme) => {
 };
 
 const getComponentCss$I = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
-        root: {
-            textDecoration: underline ? 'underline' : 'none',
-        },
-    }, hasSlottedAnchor && {
+    return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
                 '&(a)': {

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3191,12 +3191,13 @@ const isDisabledOrLoading = (disabled, loading) => {
 
 const parseJSONAttribute = (attribute) => {
     return typeof attribute === 'string'
-        ? // input is potentially JSON parsable string, e.g. "{ aria-label: 'Some label' }"
+        ? // input is potentially JSON parsable string, e.g. "{ 'aria-label': 'Some label' }"
             JSON.parse(attribute
-                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/(?<!\\)'/g, '"') // convert single quotes to double quotes except the ones which are escaped by backslash
+                .replace(/\\(?!u0027)/g, '') // remove string escapes except the ones followed by unicode u0027
                 .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":') // wrap keys in double quotes
             )
-        : // input is object, e.g. { aria-label: 'Some label' }
+        : // input is object, e.g. { 'aria-label': 'Some label' }
             attribute;
 };
 

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

@@ -23,6 +23,7 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
         // @ts-ignore
         ...(!process.browser
             ? {
+                ...{ "popover": "manual" },
                 children: (jsx(DSRBanner, { description, dismissButton, heading, headingTag, open, persistent, state, theme: theme || useTheme(), width, children })),
             }
             : {

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

@@ -5,13 +5,13 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 import { DSRButtonPure } from '../dsr-components/button-pure.mjs';
 
-const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', value, weight = 'regular', className, children, ...rest }, ref) => {
+const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, 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, name, size, stretch, theme || useTheme(), type, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disa
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || useTheme(), type, value, weight, children })),
+                children: (jsx(DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || useTheme(), type, underline, value, weight, children })),
             }
             : {
                 children,

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

@@ -85,7 +85,7 @@ class DSRBanner extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$14(this.props.open)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -90,7 +90,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

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

@@ -53,6 +53,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
@@ -116,6 +120,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */

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

@@ -1,8 +0,0 @@
-import { Component } from 'react';
-export declare class DSRBanner extends Component<any> {
-    host: HTMLElement;
-    private inlineNotificationElement;
-    private closeBtn;
-    private get hasDismissButton();
-    render(): JSX.Element;
-}