@porsche-design-system/components-react 3.16.0 → 3.17.0-rc.1

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,10 +74,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFlyoutMultilevelCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFlyoutMultilevelCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
-/** @experimental */
+/**
+ * @slot {"name": "", "description": "Default slot to render p-flyout-multilevel items." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ * @controlled {"props": ["activeIdentifier"], "event": "update"}
+ *
+ * @experimental
+ */
 class DSRFlyoutMultilevel extends Component {
     host;
     // TODO: shouldn't open prop be changed internally too?
@@ -84,7 +92,7 @@ class DSRFlyoutMultilevel extends Component {
     dialog;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("dialog", { 
                             // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                             // eslint-disable-next-line

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,9 +74,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFlyoutCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFlyoutCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
+ * @slot {"name": "sub-footer", "description": "Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
 class DSRFlyout extends Component {
     host;
     dialog;
@@ -94,7 +103,7 @@ class DSRFlyout extends Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
                             // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                             // eslint-disable-next-line

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

@@ -3,14 +3,18 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getGridItemCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getGridItemCss as getComponentCss$P } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+/**
+ * @slot {"name": "", "description": "Default slot to render the content." }
+ *
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead.
+ */
 class DSRGridItem extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.size, this.props.offset)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.size, this.props.offset)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));
     }
 }

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

@@ -3,9 +3,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getGridCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getGridCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+/**
+ * @slot {"name": "", "description": "Default slot to render p-grid-item tags." }
+ *
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead.
+ */
 class DSRGrid extends Component {
     host;
     render() {
@@ -13,7 +17,7 @@ class DSRGrid extends Component {
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, gutter: this.props.gutter } }
             : child);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$N(this.props.direction, this.props.wrap)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$O(this.props.direction, this.props.wrap)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), manipulatedChildren] }));
     }
 }

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

@@ -3,9 +3,12 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getHeadingCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHeadingCss as getComponentCss$N } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getHeadingTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the heading." }
+ */
 class DSRHeading extends Component {
     host;
     render() {
@@ -15,7 +18,7 @@ class DSRHeading extends Component {
             right: 'end',
         };
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$N(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -3,10 +3,14 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getHeadlineCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHeadlineCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getHeadlineTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
+/**
+ * @slot {"name": "", "description": "Default slot to render the headline." }
+ *
+ * @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead.
+ */
 class DSRHeadline extends Component {
     host;
     render() {
@@ -16,7 +20,7 @@ class DSRHeadline extends Component {
             right: 'end',
         };
         const TagType = getHeadlineTagType(null, this.props.variant, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.variant, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.variant, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getIconCss as getComponentCss$K } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getIconCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { buildIconUrl, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRIcon extends Component {
@@ -16,7 +16,7 @@ class DSRIcon extends Component {
             'neutral-contrast-high': 'contrast-high',
             'notification-neutral': 'notification-info',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$K(this.props.name, this.props.source, (deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.name, this.props.source, (deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildIconUrl(this.props.source || this.props.name), width: 24, height: 24, loading: "lazy", alt: parseAndGetAriaAttributes(this.props.aria)?.['aria-label'] ?? '' })] }) }));
     }
 }

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,9 +74,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getInlineNotificationCss as getComponentCss$J } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getInlineNotificationCss as getComponentCss$K } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getInlineNotificationIconName, getContentAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "heading", "description": "Shows a heading. Can be used to render rich markup." }
+ * @slot {"name": "", "description": "Default slot to render a description. Can be used to render rich markup." }
+ */
 class DSRInlineNotification extends Component {
     host;
     get hasDismissButton() {
@@ -87,7 +92,7 @@ class DSRInlineNotification extends Component {
         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)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$K(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) &&
                                             (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/link-pure.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,16 +74,19 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkPureCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkPureCss as getComponentCss$J } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { hasVisibleIcon, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ */
 class DSRLinkPure extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const hasIcon = hasVisibleIcon(this.props.icon, this.props.iconSource);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, this.props.active, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, !this.props.href, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$J(this.props.icon, this.props.iconSource, this.props.active, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, !this.props.href, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,15 +74,19 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkCss as getComponentCss$H } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ *
+ * @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead.
+ */
 class DSRLinkSocial extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$H(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import { PModelSignature } from '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,8 +74,14 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkTileModelSignatureCss as getComponentCss$G } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkTileModelSignatureCss as getComponentCss$H } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ * @slot {"name": "primary", "description": "Renders the primary link. Has to be a p-link tag.", "isRequired": true, "allowedTagNames": ["p-link"] }
+ * @slot {"name": "secondary", "description": "Renders the secondary link. Has to be a p-link tag.", "isRequired": true, "allowedTagNames": ["p-link"] }
+ */
 class DSRLinkTileModelSignature extends Component {
     host;
     render() {
@@ -90,16 +97,15 @@ class DSRLinkTileModelSignature extends Component {
             : (Array.isArray(primaryLink.props.children) ? primaryLink.props.children : [primaryLink.props.children]).find((child) => child.type === 'a' || child.props.href || child.props.to // href and to check is for framework links
             ).props; // support for slotted a tag within p-link
         const overlayLinkProps = {
-            className: 'link-overlay',
             href: linkEl.href || linkEl.to,
             target: linkEl.target || '_self',
-            download: linkEl.download,
-            rel: linkEl.rel,
+            download: linkEl.download || null,
+            rel: linkEl.rel || null,
             tabIndex: -1,
             'aria-hidden': 'true',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$G(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsx("div", { className: "signature", children: jsx(PModelSignature, { theme: "dark", model: this.props.model }) }), jsxs("div", { className: "content", children: [jsx("a", { ...overlayLinkProps }), jsx(this.props.headingTag, { className: "heading", children: this.props.heading }), this.props.description && jsx("p", { className: "description", children: this.props.description }), jsxs("div", { className: "link-group", role: "group", children: [jsx("slot", { name: "primary" }), jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$H(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...overlayLinkProps }), jsxs("div", { className: "header", children: [jsx(PModelSignature, { theme: "dark", model: this.props.model }), jsx("slot", { name: "header" })] }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx(this.props.headingTag, { children: this.props.heading }), this.props.description && jsx("p", { children: this.props.description }), jsxs("div", { className: "link-group", role: "group", children: [jsx("slot", { name: "primary" }), jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,10 +74,18 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkTileProductCss as getComponentCss$F } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkTileProductCss as getComponentCss$G } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { anchorSlot, headerSlot } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
-/** @experimental */
+/**
+ * @slot {"name": "anchor", "description": "Slotted anchor link which can be used instead of the `href` prop. Ensure the named slot is directly on the anchor element, without nesting." }
+ * @slot {"name": "header", "description": "Shows special features about the product like novelty or exclusivity. Although you can pass in anything, it is recommended to use the `p-tag` component." }
+ * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ *
+ * @controlled {"props": ["liked"], "event": "like"}
+ *
+ * @experimental
+ */
 class DSRLinkTileProduct extends Component {
     host;
     render() {
@@ -85,7 +94,7 @@ class DSRLinkTileProduct extends Component {
         const headingId = 'heading';
         const priceId = 'price';
         const descriptionId = 'description';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$F(this.props.likeButton, !this.props.href, !!this.props.priceOriginal, !!this.props.description, this.props.aspectRatio, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$G(this.props.likeButton, !this.props.href, !!this.props.priceOriginal, !!this.props.description, this.props.aspectRatio, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [this.props.heading && (jsx("h3", { id: headingId, className: "heading", children: this.props.heading })), this.props.price && (jsx("p", { id: priceId, className: "price", children: this.props.priceOriginal ? (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: "sale price" }), this.props.price, jsx("span", { className: "sr-only", children: "original price" }), jsx("s", { children: this.props.priceOriginal })] })) : (this.props.price) })), this.props.description && (jsx("p", { id: descriptionId, className: "description", children: this.props.description }))] })] })] }), this.props.children] }));
     }
 }

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

@@ -37,6 +37,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,8 +74,12 @@ import '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkTileCss as getComponentCss$E } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkTileCss as getComponentCss$F } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ */
 class DSRLinkTile extends Component {
     host;
     render() {
@@ -92,9 +97,8 @@ class DSRLinkTile extends Component {
         };
         const link = (createElement(PLink, { ...sharedLinkProps, ...linkProps, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const linkPure = (createElement(PLinkPure, { ...sharedLinkProps, ...linkProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: "arrow-right" }, this.props.label));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$E(this.props.aspectRatio, this.props.size, this.props.weight, // potentially breakpoint customizable, so we can't easily access the deprecation map
-        this.props.background, this.props.align, this.props.compact, this.props.gradient)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: "image-container", children: jsx("slot", {}) }), jsxs("div", { className: "content", children: [jsx("a", { ...sharedLinkProps, className: "link-overlay", tabIndex: -1, "aria-hidden": "true" }), jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$F(this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? linkPure : link) : [linkPure, link]] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,15 +74,18 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getLinkCss as getComponentCss$H } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getLinkCss as getComponentCss$I } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ */
 class DSRLink extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$H(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getMarqueCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getMarqueCss as getComponentCss$E } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getInnerManifest, buildSrcSet, buildImgSrc, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
@@ -22,7 +22,7 @@ class DSRMarque extends Component {
                         jsx("source", { srcSet: buildSrcSet(innerManifest, this.props.size, 'webp'), type: "image/webp" }, "webp"),
                         jsx("source", { srcSet: buildSrcSet(innerManifest, this.props.size, 'png'), type: "image/png" }, "png"),
                     ], jsx("img", { src: buildImgSrc(innerManifest), alt: "Porsche" })] }));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.size)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$E(this.props.size)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (picture) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: picture })) })] }) }));
     }
 }

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

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,9 +74,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getModalCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getModalCss as getComponentCss$D } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "heading", "description": "Renders a heading section above the content area.", "isDeprecated": true }
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
 class DSRModal extends Component {
     host;
     render() {
@@ -85,7 +94,7 @@ class DSRModal extends Component {
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         if (this.props.open) ;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
                             // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                             // eslint-disable-next-line

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

@@ -3,16 +3,19 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getModelSignatureCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getModelSignatureCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getSvgUrl } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for an img or video tag when using the model-signature as a mask." }
+ */
 class DSRModelSignature extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const fetchPriority = this.props.fetchPriority !== 'auto' ? this.props.fetchPriority : null;
         const loading = this.props.lazy === true ? 'lazy' : null;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(this.props.model, this.props.safeZone, this.props.size, this.props.color, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.model, this.props.safeZone, this.props.size, this.props.color, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchpriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.mjs

@@ -36,6 +36,7 @@ import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
+import '../components/optgroup.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
@@ -73,14 +74,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getMultiSelectOptionCss as getComponentCss$A } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getMultiSelectOptionCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the option text." }
+ */
 class DSRMultiSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
         const { theme = 'light', selected, highlighted, hidden, textContent } = this.props;
-        minifyCss(stripFocusAndHoverStyles(getComponentCss$A(theme)));
+        minifyCss(stripFocusAndHoverStyles(getComponentCss$B(theme)));
         return (jsx(Fragment, {}));
     }
 }