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

package/CHANGELOG.md

@@ -14,6 +14,37 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.0-rc.2] - 2024-04-22
+
+#### Added
+
+- `Accordion`: Add experimental property `sticky` for a fixed heading
+  ([#3181](https://github.com/porsche-design-system/porsche-design-system/pull/3181))
+- `Inline Notification`, `Banner`: heading hierarchy can now be customized with `headingTag` prop
+  ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168))
+
+#### Changed
+
+- `Accordion`: `tag` property is deprecated. Use `headingTag` property instead to specify heading hierarchy level.
+  ([#3168](https://github.com/porsche-design-system/porsche-design-system/pull/3168))
+
+```diff
+- <p-accordion tag="h3"></p-accordion>
++ <p-accordion heading-tag="h3"></p-accordion>
+```
+
+#### Fixed
+
+- `Pin Code`: Input is entered twice in iOS
+  ([#3192](https://github.com/porsche-design-system/porsche-design-system/pull/3192))
+
+### [3.15.0-rc.1] - 2024-04-17
+
+#### Added
+
+- Partials: `getMetaTagsAndIconLinks`, `getComponentChunkLinks`, `getIconLinks` and `getFontLinks` support new format
+  option `js` ([#3179](https://github.com/porsche-design-system/porsche-design-system/pull/3179))
+
 ### [3.15.0-rc.0] - 2024-04-05
 
 #### Changed
@@ -23,6 +54,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### Fixed
 
+- `Modal`: Missing box-shadow on sticky footer when slotted content changes
+  ([#3154](https://github.com/porsche-design-system/porsche-design-system/pull/3154))
 - `Select`: Hydration error in Next.js when using slotted `img`
   ([#3162](https://github.com/porsche-design-system/porsche-design-system/pull/3162))
 - `Text Field Wrapper`, `Textarea Wrapper`: Dynamic changes of `showCounter` and `maxLength` are reflected. The counter

package/cjs/lib/components/accordion.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...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);
     const props = {
         ...rest,

package/cjs/lib/components/banner.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...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);
     const props = {
         ...rest,

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, ...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, ...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);
     const props = {
         ...rest,

package/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 | undefined;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
      * @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<"small" | "medium"> | undefined;
     /**
-     * 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 | undefined;
+    /**
+     * @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?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**

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

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PAccordion = forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme, className, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...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);
     const props = {
         ...rest,

package/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 | undefined;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
      * Emitted when the close button is clicked.
      */

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
+const PBanner = forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...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);
     const props = {
         ...rest,

package/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<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
-     * 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?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**

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

@@ -18,7 +18,7 @@ export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<HeadingSize>;
     /**
-     * Sets a custom HTML tag depending on the usage of the heading component.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: HeadingTag;
     /**
@@ -44,7 +44,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
      */
     size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large"> | undefined;
     /**
-     * Sets a custom HTML tag depending on the usage of the heading component.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { InlineNotificationActionIcon, InlineNotificationState, Theme } from '../types';
+import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, Theme } from '../types';
 export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Action icon of the inline-notification.
@@ -25,6 +25,10 @@ export type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Heading of the inline-notification.
      */
     heading?: string;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: InlineNotificationHeadingTag;
     /**
      * Emitted when the action button is clicked.
      */
@@ -71,6 +75,10 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
      * Heading of the inline-notification.
      */
     heading?: string | undefined;
+    /**
+     * Sets a heading tag, so it fits correctly within the outline of the page.
+     */
+    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
      * Emitted when the action button is clicked.
      */

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
+const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...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);
     const props = {
         ...rest,

package/esm/lib/components/link-tile-model-signature.wrapper.d.ts

@@ -14,7 +14,7 @@ export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     heading: string;
     /**
-     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: LinkTileModelSignatureHeadingTag;
     /**
@@ -44,7 +44,7 @@ export declare const PLinkTileModelSignature: import("react").ForwardRefExoticCo
      */
     heading: string;
     /**
-     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     headingTag?: "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**

package/esm/lib/types.d.ts

@@ -530,6 +530,15 @@ declare const HEADING_SIZES: readonly [
     "inherit"
 ];
 export type HeadingSize = (typeof HEADING_SIZES)[number];
+declare const HEADING_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export type HeadingTag = typeof HEADING_TAGS[number];
 declare const TEXT_SIZES: readonly [
     "xx-small",
     "x-small",
@@ -587,15 +596,6 @@ declare const BUTTON_TYPES: readonly [
     "reset"
 ];
 export type ButtonType = typeof BUTTON_TYPES[number];
-declare const HEADING_TAGS: readonly [
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6"
-];
-export type HeadingTag = typeof HEADING_TAGS[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
@@ -627,21 +627,34 @@ export type AccordionUpdateEvent = {
     open: boolean;
 };
 export type AccordionUpdateEventDetail = AccordionUpdateEvent;
+/** @deprecated */
 export type AccordionTag = HeadingTag;
+export type AccordionHeadingTag = HeadingTag;
+declare const INLINE_NOTIFICATION_STATES: readonly [
+    "success",
+    "info",
+    "warning",
+    "error",
+    "neutral"
+];
+export type InlineNotificationState = (typeof INLINE_NOTIFICATION_STATES)[number];
+export type InlineNotificationActionIcon = IconName;
+export type InlineNotificationHeadingTag = HeadingTag;
 declare const BANNER_STATES: readonly [
     "info",
     "warning",
     "error",
     "neutral"
 ];
-export type BannerState = typeof BANNER_STATES[number];
+export type BannerState = (typeof BANNER_STATES)[number];
 declare const BANNER_WIDTHS: readonly [
     "extended",
     "basic",
     "fluid"
 ];
 /** @deprecated */
-export type BannerWidth = typeof BANNER_WIDTHS[number];
+export type BannerWidth = (typeof BANNER_WIDTHS)[number];
+export type BannerHeadingTag = InlineNotificationHeadingTag;
 export type ButtonIcon = LinkButtonIconName;
 declare const GROUP_DIRECTIONS: readonly [
     "row",
@@ -959,15 +972,6 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
-declare const INLINE_NOTIFICATION_STATES: readonly [
-    "success",
-    "info",
-    "warning",
-    "error",
-    "neutral"
-];
-export type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
-export type InlineNotificationActionIcon = IconName;
 export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.15.0-rc.0",
+  "version": "3.15.0-rc.2",
   "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.0"
+    "@porsche-design-system/components-js": "3.15.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -42,7 +42,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) {
@@ -4066,6 +4066,8 @@ const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -4079,11 +4081,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': {
@@ -4159,6 +4161,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,
@@ -4180,6 +4191,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',
@@ -5445,21 +5460,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',
     };
 };
 
@@ -5478,9 +5479,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],
@@ -6195,9 +6194,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],
@@ -6461,6 +6458,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': {
@@ -6472,15 +6480,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(),
@@ -10078,9 +10084,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/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -42,7 +42,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) {
@@ -3596,6 +3596,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';
 
@@ -3608,8 +3610,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),