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

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

@@ -7,15 +7,15 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var accordion = require('../dsr-components/accordion.cjs');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, children, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
-    const propsToSync = [compact, heading, open, size, tag, theme || hooks.useTheme()];
+    const propsToSync = [compact, heading, headingTag, open, size, sticky, tag, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -26,7 +26,7 @@ const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUp
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(accordion.DSRAccordion, { compact, heading, open, size, tag, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(accordion.DSRAccordion, { compact, heading, headingTag, open, size, sticky, tag, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,14 +7,14 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var banner = require('../dsr-components/banner.cjs');
 
-const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme || hooks.useTheme(), width];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || hooks.useTheme(), width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -25,7 +25,7 @@ const PBanner = react.forwardRef(({ description = '', dismissButton = true, head
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, open, persistent, state, theme: theme || hooks.useTheme(), width, children })),
+                children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, headingTag, open, persistent, state, theme: theme || hooks.useTheme(), width, children })),
             }
             : {
                 children,

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

@@ -7,15 +7,15 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inlineNotification = require('../dsr-components/inline-notification.cjs');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
+const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme || hooks.useTheme()];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -26,7 +26,7 @@ const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', acti
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inlineNotification.DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(inlineNotification.DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -82,8 +82,8 @@ class DSRAccordion extends react.Component {
         splitChildren.splitChildren(this.props.children);
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
-        const Heading = this.props.tag;
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        const Heading = this.props.tag || this.props.headingTag;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getAccordionCss(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
         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.jsx(Heading, { className: "heading", children: jsxRuntime.jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }), jsxRuntime.jsx("span", { className: "icon-container", children: jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsxRuntime.jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.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, 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.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/inline-notification.cjs

@@ -87,8 +87,10 @@ class DSRInlineNotification extends react.Component {
         const bannerId = 'banner';
         const labelId = 'label';
         const descriptionId = 'description';
+        const Heading = this.props.headingTag;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, this.hasDismissButton, 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.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsxRuntime.jsx("h5", { id: labelId, children: this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }) }), jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), 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(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
+                                            (this.props.heading ? (jsxRuntime.jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsxRuntime.jsx("slot", { name: "heading" }))), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -79,16 +79,6 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 class DSRModal extends react.Component {
     host;
-    scrollContainerEl; // Necessary to avoid stacking background bug in safari
-    focusedElBeforeOpen;
-    dismissBtn;
-    hasHeader;
-    hasFooter;
-    footer;
-    dialog;
-    get hasDismissButton() {
-        return this.props.disableCloseButton ? false : this.props.dismissButton;
-    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
@@ -101,7 +91,7 @@ class DSRModal extends react.Component {
                                         'aria-label': this.props.heading,
                                         'aria-hidden': !this.props.open,
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, 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] }));
+                                    }), tabIndex: -1, 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" }) }, "heading")), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -40,7 +40,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperties(target, props) {
@@ -4064,6 +4064,8 @@ const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -4077,11 +4079,11 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-const getComponentCss$15 = (size, compact, open, theme) => {
-    const { primaryColor, hoverColor, contrastLowColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+const getComponentCss$15 = (size, compact, open, theme, sticky) => {
+    const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
+    const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
+    const positionStickyTopFallback = '0';
     return getCss({
         '@global': {
             ':host': {
@@ -4157,6 +4159,15 @@ const getComponentCss$15 = (size, compact, open, theme) => {
         },
         heading: {
             margin: 0,
+            ...(sticky && {
+                position: 'sticky',
+                top: `var(${cssVariablePositionStickyTop}, ${positionStickyTopFallback})`,
+                zIndex: 1, // to be on top of the collapsible
+                backgroundColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    backgroundColor: backgroundColorDark,
+                }),
+            }),
         },
         'icon-container': {
             height: fontLineHeight,
@@ -4178,6 +4189,10 @@ const getComponentCss$15 = (size, compact, open, theme) => {
                 color: primaryColorDark,
             }),
             display: 'grid',
+            ...(sticky && {
+                position: 'relative',
+                zIndex: 0, // to be below the heading
+            }),
             ...(open
                 ? {
                     gridTemplateRows: '1fr',
@@ -5443,21 +5458,7 @@ ellipsis, theme) => {
 };
 const getTypographySlottedJssStyle = () => {
     return {
-        margin: 'inherit',
-        padding: 'inherit',
-        fontFamily: 'inherit',
-        fontWeight: 'inherit',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        fontStyle: 'inherit',
-        fontVariant: 'inherit',
-        color: 'inherit',
-        textAlign: 'inherit',
-        overflowWrap: 'inherit',
-        wordWrap: 'inherit',
-        hyphens: 'inherit',
-        whiteSpace: 'inherit',
-        letterSpacing: 'inherit',
+        all: 'unset',
     };
 };
 
@@ -5476,9 +5477,7 @@ const getComponentCss$X = (size, align, color, ellipsis, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            '::slotted': {
-                [DISPLAY_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
-            },
+            [`::slotted(:is(${DISPLAY_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
         },
         root: getTypographyRootJssStyle(displayLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
             fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
@@ -6193,9 +6192,7 @@ const getComponentCss$M = (size, align, color, ellipsis, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            '::slotted': {
-                [HEADING_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
-            },
+            [`::slotted(:is(${HEADING_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
         },
         root: getTypographyRootJssStyle(headingXXLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
             fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$3[sizeValue],
@@ -6459,6 +6456,17 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS$1 = getMediaQueryMax('s');
+const getTextJssStyle = (theme) => ({
+    margin: 0,
+    color: getThemedColors(theme).primaryColor,
+    ...prefersColorSchemeDarkMediaQuery(theme, {
+        color: getThemedColors('dark').primaryColor,
+    }),
+});
+const getHeadingJssStyle = (theme) => ({
+    ...headingSmallStyle,
+    ...getTextJssStyle(theme),
+});
 const getComponentCss$J = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
@@ -6470,15 +6478,13 @@ const getComponentCss$J = (state, hasAction, hasClose, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            h5: headingSmallStyle,
-            p: textSmallStyle,
-            'h5,p': {
-                margin: 0,
-                color: getThemedColors(theme).primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: getThemedColors('dark').primaryColor,
-                }),
-            },
+            [`::slotted(:is(${HEADING_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
+            'slot[name="heading"]': getHeadingJssStyle(theme),
+        },
+        heading: getHeadingJssStyle(theme),
+        description: {
+            ...textSmallStyle,
+            ...getTextJssStyle(theme),
         },
         icon: getNotificationIconJssStyle(),
         content: getNotificationContentJssStyle(),
@@ -10076,9 +10082,7 @@ const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
                     ...hostHiddenStyles,
                 }),
             },
-            '::slotted': {
-                [TEXT_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
-            },
+            [`::slotted(:is(${TEXT_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
         },
         root: getTypographyRootJssStyle(textSmallStyle, buildResponsiveStyles(size, (sizeValue) => ({
             fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap[sizeValue],

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

@@ -40,7 +40,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperties(target, props) {
@@ -3594,6 +3594,8 @@ const hasDocument = typeof document !== 'undefined';
 const isThemeDark = (theme) => {
     return theme === 'dark';
 };
+
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3606,8 +3608,6 @@ const formatObjectOutput = (value) => {
 };
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),

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

@@ -5,15 +5,15 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRAccordion } from '../dsr-components/accordion.mjs';
 
-const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, children, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [compact, heading, open, size, tag, theme || useTheme()];
+    const propsToSync = [compact, heading, headingTag, open, size, sticky, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRAccordion, { compact, heading, open, size, tag, theme: theme || useTheme(), children })),
+                children: (jsx(DSRAccordion, { compact, heading, headingTag, open, size, sticky, tag, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -5,14 +5,14 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRBanner } from '../dsr-components/banner.mjs';
 
-const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
+const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme || useTheme(), width];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || useTheme(), width];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -23,7 +23,7 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRBanner, { description, dismissButton, heading, open, persistent, state, theme: theme || useTheme(), width, children })),
+                children: (jsx(DSRBanner, { description, dismissButton, heading, headingTag, open, persistent, state, theme: theme || useTheme(), width, children })),
             }
             : {
                 children,

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

@@ -5,15 +5,15 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRInlineNotification } from '../dsr-components/inline-notification.mjs';
 
-const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
+const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme || useTheme()];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabe
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme: theme || useTheme(), children })),
+                children: (jsx(DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -80,8 +80,8 @@ class DSRAccordion extends Component {
         splitChildren(this.props.children);
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
-        const Heading = this.props.tag;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(this.props.size, this.props.compact, this.props.open, this.props.theme)));
+        const Heading = this.props.tag || this.props.headingTag;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.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, 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 } }), 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/inline-notification.mjs

@@ -85,8 +85,10 @@ class DSRInlineNotification extends Component {
         const bannerId = 'banner';
         const labelId = 'label';
         const descriptionId = 'description';
+        const Heading = this.props.headingTag;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.state, !!this.props.actionLabel, this.hasDismissButton, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PIcon, { className: "icon", name: getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxs("div", { id: bannerId, className: "content", ...getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsx("h5", { id: labelId, children: this.props.heading || jsx("slot", { name: "heading" }) }), jsx("p", { id: descriptionId, children: this.props.description || jsx("slot", {}) })] }), this.props.actionLabel && (jsx(PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsx(PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PIcon, { className: "icon", name: getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxs("div", { id: bannerId, className: "content", ...getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
+                                            (this.props.heading ? (jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsx("slot", { name: "heading" }))), jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsx("slot", {}) })] }), this.props.actionLabel && (jsx(PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsx(PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -77,16 +77,6 @@ import { parseAndGetAriaAttributes } from '../../../../../../components/dist/uti
 
 class DSRModal extends Component {
     host;
-    scrollContainerEl; // Necessary to avoid stacking background bug in safari
-    focusedElBeforeOpen;
-    dismissBtn;
-    hasHeader;
-    hasFooter;
-    footer;
-    dialog;
-    get hasDismissButton() {
-        return this.props.disableCloseButton ? false : this.props.dismissButton;
-    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
@@ -99,7 +89,7 @@ class DSRModal extends Component {
                                         'aria-label': this.props.heading,
                                         'aria-hidden': !this.props.open,
                                         ...parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, 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] }));
+                                    }), tabIndex: -1, 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" }) }, "heading")), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/components/accordion.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
+import type { AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -9,6 +9,10 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Defines the heading used in accordion.
      */
     heading?: string;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: AccordionHeadingTag;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
      */
@@ -26,7 +30,11 @@ export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * Sets a headline tag, so it fits correctly within the outline of the page.
+     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     */
+    sticky?: boolean;
+    /**
+     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: AccordionTag;
     /**
@@ -43,6 +51,10 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * Defines the heading used in accordion.
      */
     heading?: string;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: AccordionHeadingTag;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
      */
@@ -60,7 +72,11 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
-     * Sets a headline tag, so it fits correctly within the outline of the page.
+     * @experimental Sticks the Accordion heading at the top, fixed while scrolling
+     */
+    sticky?: boolean;
+    /**
+     * @deprecated , will be removed with next major release, use `heading-tag` instead. Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: AccordionTag;
     /**

package/ssr/esm/lib/components/banner.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { BannerState, Theme, BannerWidth } from '../types';
+import type { BannerHeadingTag, BannerState, Theme, BannerWidth } from '../types';
 export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Description of the banner.
@@ -13,6 +13,10 @@ export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Heading of the banner.
      */
     heading?: string;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: BannerHeadingTag;
     /**
      * Emitted when the close button is clicked.
      */
@@ -52,6 +56,10 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
      * Heading of the banner.
      */
     heading?: string;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: BannerHeadingTag;
     /**
      * Emitted when the close button is clicked.
      */

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

@@ -18,7 +18,7 @@ export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**
-     * Sets a custom HTML tag depending on the usage of the display component.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
     /**
@@ -44,7 +44,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HT
      */
     size?: BreakpointCustomizable<DisplaySize>;
     /**
-     * Sets a custom HTML tag depending on the usage of the display component.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
     /**