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

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

@@ -33,6 +33,7 @@ const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -33,6 +33,7 @@ const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = fa
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -27,6 +27,7 @@ const PTableBody = forwardRef(({ className, children, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -30,6 +30,7 @@ const PTableCell = forwardRef(({ multiline = false, className, children, ...rest
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-cell.wrapper.mjs

@@ -32,6 +32,7 @@ const PTableHeadCell = forwardRef(({ hideLabel = false, multiline = false, sort,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-row.wrapper.mjs

@@ -27,6 +27,7 @@ const PTableHeadRow = forwardRef(({ className, children, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -27,6 +27,7 @@ const PTableHead = forwardRef(({ className, children, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -27,6 +27,7 @@ const PTableRow = forwardRef(({ className, children, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -33,6 +33,7 @@ const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme, classNam
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -33,6 +33,7 @@ const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base'
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PTabsItem = forwardRef((
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -33,6 +33,7 @@ const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -32,6 +32,7 @@ const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, descr
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.mjs

@@ -27,6 +27,7 @@ const PTextListItem = forwardRef(({ className, children, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PTextList = forwardRef(({ listType, orderType, theme, type = 'unordered',
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -31,6 +31,7 @@ const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, labe
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -29,6 +29,7 @@ const PToast = forwardRef(({ theme, className, ...rest }, ref) => {
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -30,6 +30,7 @@ const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', th
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -72,7 +73,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getAccordionCss as getComponentCss$15 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$16 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRAccordion extends Component {
     host;
@@ -81,7 +82,7 @@ class DSRAccordion extends Component {
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$16(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -72,7 +73,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getBannerCss as getComponentCss$14 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getBannerCss as getComponentCss$15 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRBanner extends Component {
     host;
@@ -84,7 +85,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$14(this.props.open)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$15(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,13 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonGroupCss as getComponentCss$13 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonGroupCss as getComponentCss$14 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 class DSRButtonGroup extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$13(this.props.direction)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$14(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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -72,7 +73,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonPureCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonPureCss as getComponentCss$13 } 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';
 
@@ -90,7 +91,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(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$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)));
         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

@@ -6,6 +6,7 @@ import { PButton } from '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -72,7 +73,7 @@ import '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonTileCss as getComponentCss$11 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonTileCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRButtonTile extends Component {
@@ -90,7 +91,7 @@ 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$11(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)));
+        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] }));
     }
 }

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -72,7 +73,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getButtonCss as getComponentCss$10 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonCss as getComponentCss$11 } 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';
 
@@ -80,7 +81,7 @@ class DSRButton extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$10(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$11(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

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../components/accordion.wrapper.mjs';
+import '../components/banner.wrapper.mjs';
+import '../components/button.wrapper.mjs';
+import '../components/button-group.wrapper.mjs';
+import { PButtonPure } from '../components/button-pure.wrapper.mjs';
+import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
+import '../components/carousel.wrapper.mjs';
+import '../components/checkbox-wrapper.wrapper.mjs';
+import '../components/content-wrapper.wrapper.mjs';
+import '../components/crest.wrapper.mjs';
+import '../components/display.wrapper.mjs';
+import '../components/divider.wrapper.mjs';
+import '../components/fieldset.wrapper.mjs';
+import '../components/fieldset-wrapper.wrapper.mjs';
+import '../components/flex.wrapper.mjs';
+import '../components/flex-item.wrapper.mjs';
+import { PFlyout } from '../components/flyout.wrapper.mjs';
+import '../components/flyout-navigation.wrapper.mjs';
+import '../components/flyout-navigation-item.wrapper.mjs';
+import '../components/grid.wrapper.mjs';
+import '../components/grid-item.wrapper.mjs';
+import '../components/heading.wrapper.mjs';
+import '../components/headline.wrapper.mjs';
+import '../components/icon.wrapper.mjs';
+import '../components/inline-notification.wrapper.mjs';
+import '../components/link.wrapper.mjs';
+import '../components/link-pure.wrapper.mjs';
+import '../components/link-social.wrapper.mjs';
+import '../components/link-tile.wrapper.mjs';
+import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
+import '../components/marque.wrapper.mjs';
+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/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
+import '../components/popover.wrapper.mjs';
+import '../components/radio-button-wrapper.wrapper.mjs';
+import '../components/scroller.wrapper.mjs';
+import '../components/segmented-control.wrapper.mjs';
+import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select.wrapper.mjs';
+import '../components/select-option.wrapper.mjs';
+import '../components/select-wrapper.wrapper.mjs';
+import '../components/spinner.wrapper.mjs';
+import '../components/stepper-horizontal.wrapper.mjs';
+import '../components/stepper-horizontal-item.wrapper.mjs';
+import '../components/switch.wrapper.mjs';
+import '../components/table.wrapper.mjs';
+import '../components/table-body.wrapper.mjs';
+import '../components/table-cell.wrapper.mjs';
+import '../components/table-head.wrapper.mjs';
+import '../components/table-head-cell.wrapper.mjs';
+import '../components/table-head-row.wrapper.mjs';
+import '../components/table-row.wrapper.mjs';
+import '../components/tabs.wrapper.mjs';
+import '../components/tabs-bar.wrapper.mjs';
+import '../components/tabs-item.wrapper.mjs';
+import '../components/tag.wrapper.mjs';
+import '../components/tag-dismissible.wrapper.mjs';
+import '../components/text.wrapper.mjs';
+import '../components/text-field-wrapper.wrapper.mjs';
+import '../components/text-list.wrapper.mjs';
+import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea-wrapper.wrapper.mjs';
+import '../components/toast.wrapper.mjs';
+import '../components/wordmark.wrapper.mjs';
+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';
+
+/** @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)));
+        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
+                                                    /* @ts-ignore */
+                                                    part: "sidebar-start", 
+                                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    inert: this.props.sidebarStartOpen ? null : true, children: [jsx(PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsx("slot", { name: "sidebar-start" })] }), jsxs("aside", { 
+                                                    // "part" is not valid in TS
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    part: "sidebar-end", 
+                                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    inert: this.props.sidebarEndOpen ? null : true, children: [jsx(PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsx("slot", { name: "sidebar-end" })] })] }))] }), !this.props.isDesktopView && (jsxs(Fragment, { children: [jsx(PFlyout, { open: this.props.sidebarStartOpen, position: "start", children: jsx("slot", { name: "sidebar-start" }) }), jsx(PFlyout, { open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) })] }))] })] }), this.props.children] }));
+    }
+}
+
+export { DSRCanvas };

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -86,7 +87,11 @@ class DSRFlyoutNavigationItem extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(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: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
+        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
+                                    /* @ts-ignore */
+                                    inert: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -84,7 +85,11 @@ class DSRFlyoutNavigation extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(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: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        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
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';
@@ -78,11 +79,9 @@ import { parseAndGetAriaAttributes } from '../../../../../../components/dist/uti
 class DSRFlyout extends Component {
     host;
     dialog;
-    wrapper;
-    dismissBtn;
+    scroller;
     header;
     footer;
-    subFooter;
     hasHeader;
     hasFooter;
     hasSubFooter;
@@ -95,8 +94,16 @@ 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), hasFooter, hasSubFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "wrapper", ...(hasSubFooter && { onScroll: this.props.updateShadow }), children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" })] }, "header"), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer")), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }, "sub-footer"))] }) })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(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
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-hidden': !this.props.open,
+                                ...parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "flyout", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" }), hasSubFooter && jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';

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

@@ -5,6 +5,7 @@ import '../components/button.wrapper.mjs';
 import '../components/button-group.wrapper.mjs';
 import '../components/button-pure.wrapper.mjs';
 import '../components/button-tile.wrapper.mjs';
+import '../components/canvas.wrapper.mjs';
 import '../components/carousel.wrapper.mjs';
 import '../components/checkbox-wrapper.wrapper.mjs';
 import '../components/content-wrapper.wrapper.mjs';