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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.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,8 +74,15 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getBannerCss as getComponentCss$15 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getBannerCss as getComponentCss$16 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @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 Component {
     host;
     inlineNotificationElement;
@@ -85,7 +93,7 @@ class DSRBanner extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(this.props.open)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$16(this.props.open)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }

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

@@ -3,13 +3,16 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonGroupCss as getComponentCss$14 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonGroupCss as getComponentCss$15 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the buttons to group." }
+ */
 class DSRButtonGroup extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$14(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(this.props.direction)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-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,10 +74,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonPureCss as getComponentCss$13 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonPureCss as getComponentCss$14 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the button label." }
+ */
 class DSRButtonPure extends Component {
     host;
     get isDisabledOrLoading() {
@@ -91,7 +95,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$14(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-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,9 +74,13 @@ import '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonTileCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonTileCss as getComponentCss$13 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-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 DSRButtonTile extends Component {
     host;
     render() {
@@ -91,8 +96,8 @@ class DSRButtonTile extends Component {
         };
         const button = (createElement(PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (createElement(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(stripFocusAndHoverStyles(getComponentCss$12(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 (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("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [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 ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.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 { getButtonCss as getComponentCss$11 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getButtonAriaAttributes, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the button label." }
+ */
 class DSRButton extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...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 ? loadingId : undefined, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(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" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.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,26 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getCanvasCss as getComponentCss$10 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCanvasCss as getComponentCss$11 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @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 Component {
     host;
     isDesktopView = false;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$11(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsx("header", { part: "header", children: jsx("slot", { name: "header" }) }), jsx("main", { part: "main", children: jsx("slot", {}) }), jsx("footer", { part: "footer", children: jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxs(Fragment, { children: [jsxs("aside", { 
                                                     // "part" is not valid in TS
                                                     // eslint-disable-next-line

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.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 { getCarouselCss as getComponentCss$$ } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCarouselCss as getComponentCss$10 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isInfinitePagination, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @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 Component {
     host;
     amountOfPages;
@@ -104,13 +113,13 @@ class DSRCarousel extends Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$$(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
         // flip boolean values of disablePagination since it is the inverse of pagination
         this.props.disablePagination
             ? typeof this.props.disablePagination === 'object'
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
-            : this.props.pagination, isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
+            : this.props.pagination, 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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(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) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.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,18 +74,23 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getCheckboxWrapperCss as getComponentCss$_ } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCheckboxWrapperCss as getComponentCss$$ } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
 import { LoadingMessage } from './loading-message.mjs';
 
+/**
+ * @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 Component {
     host;
     input;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$_(this.props.hideLabel, this.props.state, disabled, this.props.loading, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$$(this.props.hideLabel, this.props.state, disabled, this.props.loading, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: this.props.loading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: false })] })] }), this.props.children] }));
     }
 }

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

@@ -3,14 +3,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getContentWrapperCss as getComponentCss$Z } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getContentWrapperCss as getComponentCss$_ } 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 for main content." }
+ * @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead.
+ */
 class DSRContentWrapper extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Z(this.props.width)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$_(this.props.width)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/crest.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 { getCrestCss as getComponentCss$Y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCrestCss as getComponentCss$Z } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { buildCrestSrcSet, buildCrestImgSrc, parseAndGetAriaAttributes, crestSize } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 const { width, height } = crestSize;
@@ -10,7 +10,7 @@ class DSRCrest extends Component {
     host;
     render() {
         const picture = (jsxs("picture", { children: [jsx("source", { srcSet: buildCrestSrcSet('webp'), type: "image/webp" }, "webp"), jsx("source", { srcSet: buildCrestSrcSet('png'), type: "image/png" }, "png"), jsx("img", { src: buildCrestImgSrc(), width: width, height: height, alt: "Porsche" })] }));
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Y()));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Z()));
         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/display.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 { getDisplayCss as getComponentCss$X } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getDisplayCss as getComponentCss$Y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getDisplayTagType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
+/**
+ * @slot {"name": "", "description": "Default slot for the display text." }
+ */
 class DSRDisplay extends Component {
     host;
     render() {
@@ -15,7 +18,7 @@ class DSRDisplay extends Component {
             right: 'end',
         };
         const TagType = getDisplayTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$X(this.props.size, (alignDeprecationMap[this.props.align] || this.props.align), this.props.color, this.props.ellipsis, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Y(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/divider.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 { getDividerCss as getComponentCss$W } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getDividerCss as getComponentCss$X } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRDivider extends Component {
     host;
@@ -12,7 +12,7 @@ class DSRDivider extends Component {
             'neutral-contrast-medium': 'contrast-medium',
             'neutral-contrast-high': 'contrast-high',
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$W((deprecationMap[this.props.color] || this.props.color), this.props.orientation || this.props.direction, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$X((deprecationMap[this.props.color] || this.props.color), this.props.orientation || this.props.direction, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("hr", {})] }) }));
     }
 }

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

@@ -3,17 +3,23 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFieldsetWrapperCss as getComponentCss$V } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFieldsetWrapperCss as getComponentCss$W } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { Required } from './required.mjs';
 
-/** @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 Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$W(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }

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

@@ -3,16 +3,21 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFieldsetCss as getComponentCss$U } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFieldsetCss as getComponentCss$V } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { Required } from './required.mjs';
 
+/**
+ * @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 Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$U(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$V(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }

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

@@ -3,14 +3,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFlexItemCss as getComponentCss$T } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFlexItemCss as getComponentCss$U } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @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 Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$T(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$U(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));
         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/flex.mjs

@@ -3,14 +3,17 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFlexCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFlexCss as getComponentCss$T } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @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 Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$T(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));
         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/flyout-multilevel-item.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 { getFlyoutMultilevelItemCss as getComponentCss$Q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getFlyoutMultilevelItemCss as getComponentCss$R } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
-/** @experimental */
+/**
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ *
+ * @experimental
+ */
 class DSRFlyoutMultilevelItem extends Component {
     host;
     get theme() {
@@ -86,7 +91,7 @@ class DSRFlyoutMultilevelItem extends Component {
     }
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.open, this.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.open, this.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxs("div", { className: "scroller", 
                                     // "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-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