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

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

@@ -7,13 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tag = require('../dsr-components/tag.cjs');
 
-const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, children, ...rest }, ref) => {
+const PTag = react.forwardRef(({ color = 'background-surface', compact = false, icon, iconSource, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme || hooks.useTheme()];
+    const propsToSync = [color, compact, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'compact', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tag.DSRTag, { color, icon, iconSource, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(tag.DSRTag, { color, compact, icon, iconSource, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,12 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "heading", "description": "Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup." }
+ * @slot {"name": "", "description": "Default slot for the main content" }
+ *
+ * @controlled {"props": ["open"], "event": "update"}
+ */
 class DSRAccordion extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,13 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "title", "description": "Defines the title used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
 class DSRBanner extends react.Component {
     host;
     inlineNotificationElement;

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

@@ -7,6 +7,9 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ */
 class DSRButtonGroup extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -79,6 +80,9 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the button label." }
+ */
 class DSRButtonPure extends react.Component {
     host;
     get isDisabledOrLoading() {

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

@@ -39,6 +39,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,10 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ */
 class DSRButtonTile extends react.Component {
     host;
     render() {
@@ -94,7 +99,7 @@ class DSRButtonTile extends react.Component {
         const button = (react.createElement(button_wrapper.PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: this.props.icon === 'none' ? 'arrow-right' : this.props.icon }, this.props.label));
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonTileCss(utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.disabled)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "content", children: [jsxRuntime.jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("div", { className: "media", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "footer", children: [jsxRuntime.jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -79,11 +80,14 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the button label." }
+ */
 class DSRButton extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,7 +78,18 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @experimental */
+/**
+ * @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 footer section, flowing under the content area when scrollable." }
+ * @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
+ * @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
+ *
+ * @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
+ * @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
+ *
+ * @experimental
+ */
 class DSRCanvas extends react.Component {
     host;
     isDesktopView = false;

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,14 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "heading", "description": "Renders a heading above the carousel." }
+ * @slot {"name": "description", "description": "Shows a footer section, flowing under the content area when scrollable." }
+ * @slot {"name": "controls", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
+ * @slot {"name": "", "description": "Default slot for the carousel slides." }
+ *
+ * @controlled { "props": ["activeSlideIndex"], "event": "update", "isInternallyMutated": true }
+ */
 class DSRCarousel extends react.Component {
     host;
     amountOfPages;
@@ -112,7 +121,7 @@ class DSRCarousel extends react.Component {
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
+            : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -80,6 +81,11 @@ var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
 var loadingMessage = require('./loading-message.cjs');
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the input." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRCheckboxWrapper extends react.Component {
     host;
     input;

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

@@ -7,7 +7,10 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+/**
+ * @slot {"name": "", "description": "Default slot for main content." }
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead.
+ */
 class DSRContentWrapper extends react.Component {
     host;
     render() {

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

@@ -8,6 +8,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot for the display text." }
+ */
 class DSRDisplay extends react.Component {
     host;
     render() {

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

@@ -9,7 +9,13 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var stateMessage = require('./state-message.cjs');
 var required = require('./required.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ *
+ * @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead.
+ */
 class DSRFieldsetWrapper extends react.Component {
     host;
     render() {

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

@@ -9,6 +9,11 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var stateMessage = require('./state-message.cjs');
 var required = require('./required.cjs');
 
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
 class DSRFieldset extends react.Component {
     host;
     render() {

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

@@ -7,7 +7,10 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
+/**
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead.
+ */
 class DSRFlexItem extends react.Component {
     host;
     render() {

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

@@ -7,7 +7,10 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
+/**
+ * @slot {"name": "", "description": "Default slot for the flex items." }
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead.
+ */
 class DSRFlex extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,7 +78,11 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @experimental */
+/**
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ *
+ * @experimental
+ */
 class DSRFlyoutMultilevelItem extends react.Component {
     host;
     get theme() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,7 +79,14 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
-/** @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 react.Component {
     host;
     // TODO: shouldn't open prop be changed internally too?

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,14 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @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 react.Component {
     host;
     dialog;

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

@@ -7,7 +7,11 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @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 react.Component {
     host;
     render() {

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

@@ -7,7 +7,11 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @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 react.Component {
     host;
     render() {

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

@@ -8,6 +8,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the heading." }
+ */
 class DSRHeading extends react.Component {
     host;
     render() {

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

@@ -8,7 +8,11 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
-/** @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 react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,10 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @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 react.Component {
     host;
     get hasDismissButton() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,6 +79,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
+/**
+ * @slot {"name": "", "description": "Default slot to render the link label." }
+ */
 class DSRLinkPure extends react.Component {
     host;
     render() {

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,13 +78,17 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
-/** @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 react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -77,6 +78,12 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
+/**
+ * @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 react.Component {
     host;
     render() {
@@ -92,16 +99,15 @@ class DSRLinkTileModelSignature extends react.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.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileModelSignatureCss(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: "image-container", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("div", { className: "signature", children: jsxRuntime.jsx(modelSignature_wrapper.PModelSignature, { theme: "dark", model: this.props.model }) }), jsxRuntime.jsxs("div", { className: "content", children: [jsxRuntime.jsx("a", { ...overlayLinkProps }), jsxRuntime.jsx(this.props.headingTag, { className: "heading", children: this.props.heading }), this.props.description && jsxRuntime.jsx("p", { className: "description", children: this.props.description }), jsxRuntime.jsxs("div", { className: "link-group", role: "group", children: [jsxRuntime.jsx("slot", { name: "primary" }), jsxRuntime.jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("a", { ...overlayLinkProps }), jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(modelSignature_wrapper.PModelSignature, { theme: "dark", model: this.props.model }), jsxRuntime.jsx("slot", { name: "header" })] }), jsxRuntime.jsx("div", { className: "media", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "footer", children: [jsxRuntime.jsx(this.props.headingTag, { children: this.props.heading }), this.props.description && jsxRuntime.jsx("p", { children: this.props.description }), jsxRuntime.jsxs("div", { className: "link-group", role: "group", children: [jsxRuntime.jsx("slot", { name: "primary" }), jsxRuntime.jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -38,6 +38,7 @@ require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');
 require('../components/multi-select.wrapper.cjs');
 require('../components/multi-select-option.wrapper.cjs');
+require('../components/optgroup.wrapper.cjs');
 require('../components/pagination.wrapper.cjs');
 require('../components/pin-code.wrapper.cjs');
 require('../components/popover.wrapper.cjs');
@@ -78,7 +79,15 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
-/** @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 react.Component {
     host;
     render() {