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

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

@@ -2,84 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
+require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 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');
+var button_wrapper = require('../components/button.wrapper.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }

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

@@ -1,86 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-var spinner_wrapper = require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 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');
 var loadingMessage = require('./loading-message.cjs');
+var icon_wrapper = require('../components/icon.wrapper.cjs');
+var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 /**
  * @slot {"name": "", "description": "Default slot for the button label." }

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

@@ -1,88 +1,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-var crest_wrapper = require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-var flyout_wrapper = require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
+var crest_wrapper = require('../components/crest.wrapper.cjs');
+var flyout_wrapper = require('../components/flyout.wrapper.cjs');
+var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
 
 /**
- * @slot {"name": "title", "description": "Renders the application name in the header section. In case **sidebar-start slot** is present it will be rendered in the corresponding flyout on mobile view." }
- * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On desktop view, in case **sidebar-start slot** is present and opened it will be rendered within." }
+ * @slot {"name": "title", "description": "Renders the application name in the header section of the sidebar start area." }
+ * @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
  * @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
  * @slot {"name": "", "description": "Default slot for the main content." }
  * @slot {"name": "footer", "description": "Renders a **sticky** footer section underneath the main content." }
@@ -97,31 +29,25 @@ class DSRCanvas extends react.Component {
     isMediaQueryS = false;
     isMediaQueryM = false;
     hasTitle;
-    hasHeaderStart;
-    hasHeaderEnd;
-    hasSidebarStart;
     hasSidebarEnd;
     hasFooter;
     hasBackground;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const hasHeaderStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-start').length > 0;
-        const hasHeaderEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header-end').length > 0;
-        const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
         const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
-        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: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "blur-layers", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && !this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), hasHeaderStart && ((hasSidebarStart && !this.props.sidebarStartOpen) || !hasSidebarStart) && (jsxRuntime.jsx("slot", { name: "header-start" })), hasTitle && ((hasSidebarStart && this.props.isMediaQueryS) || !hasSidebarStart) && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsxs("div", { className: "header", children: [hasHeaderEnd && jsxRuntime.jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("slot", { name: "footer" }) })), hasSidebarStart && this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar-start", 
+        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: "root", children: [jsxRuntime.jsxs("header", { className: "header", children: [jsxRuntime.jsxs("div", { className: "blur", children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "header__crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsx("div", { className: "header__area header__area--end", children: jsxRuntime.jsx("slot", { name: "header-end" }) })] }), jsxRuntime.jsx("main", { className: "main", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("footer", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) })), this.props.isMediaQueryS && (jsxRuntime.jsx("aside", { className: "sidebar 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, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar-header", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasHeaderStart && jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx("slot", { name: "sidebar-start" })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar-end", 
+                                            inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("header", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) })] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar 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, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "scroller", children: [jsxRuntime.jsx("div", { className: "sidebar-header", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }) }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), hasSidebarStart && !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
+                                            inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("header", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,85 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-var linkPure_wrapper = require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 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');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+var linkPure_wrapper = require('../components/link-pure.wrapper.cjs');
 
 /**
  * @slot {"name": "heading", "description": "Renders a heading above the carousel." }

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

@@ -1,87 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-var spinner_wrapper = require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var loadingMessage = require('./loading-message.cjs');
 var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
-var loadingMessage = require('./loading-message.cjs');
+var spinner_wrapper = require('../components/spinner.wrapper.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." }

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

@@ -1,87 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('../components/accordion.wrapper.cjs');
-require('../components/banner.wrapper.cjs');
-require('../components/button.wrapper.cjs');
-require('../components/button-group.wrapper.cjs');
-require('../components/button-pure.wrapper.cjs');
-require('../components/button-tile.wrapper.cjs');
-require('../components/canvas.wrapper.cjs');
-require('../components/carousel.wrapper.cjs');
-require('../components/checkbox.wrapper.cjs');
-require('../components/checkbox-wrapper.wrapper.cjs');
-require('../components/content-wrapper.wrapper.cjs');
-require('../components/crest.wrapper.cjs');
-require('../components/display.wrapper.cjs');
-require('../components/divider.wrapper.cjs');
-require('../components/fieldset.wrapper.cjs');
-require('../components/fieldset-wrapper.wrapper.cjs');
-require('../components/flex.wrapper.cjs');
-require('../components/flex-item.wrapper.cjs');
-require('../components/flyout.wrapper.cjs');
-require('../components/flyout-multilevel.wrapper.cjs');
-require('../components/flyout-multilevel-item.wrapper.cjs');
-require('../components/grid.wrapper.cjs');
-require('../components/grid-item.wrapper.cjs');
-require('../components/heading.wrapper.cjs');
-require('../components/headline.wrapper.cjs');
-require('../components/icon.wrapper.cjs');
-require('../components/inline-notification.wrapper.cjs');
-require('../components/link.wrapper.cjs');
-require('../components/link-pure.wrapper.cjs');
-require('../components/link-social.wrapper.cjs');
-require('../components/link-tile.wrapper.cjs');
-require('../components/link-tile-model-signature.wrapper.cjs');
-require('../components/link-tile-product.wrapper.cjs');
-require('../components/marque.wrapper.cjs');
-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');
-require('../components/radio-button-wrapper.wrapper.cjs');
-require('../components/scroller.wrapper.cjs');
-require('../components/segmented-control.wrapper.cjs');
-require('../components/segmented-control-item.wrapper.cjs');
-require('../components/select.wrapper.cjs');
-require('../components/select-option.wrapper.cjs');
-require('../components/select-wrapper.wrapper.cjs');
-var spinner_wrapper = require('../components/spinner.wrapper.cjs');
-require('../components/stepper-horizontal.wrapper.cjs');
-require('../components/stepper-horizontal-item.wrapper.cjs');
-require('../components/switch.wrapper.cjs');
-require('../components/table.wrapper.cjs');
-require('../components/table-body.wrapper.cjs');
-require('../components/table-cell.wrapper.cjs');
-require('../components/table-head.wrapper.cjs');
-require('../components/table-head-cell.wrapper.cjs');
-require('../components/table-head-row.wrapper.cjs');
-require('../components/table-row.wrapper.cjs');
-require('../components/tabs.wrapper.cjs');
-require('../components/tabs-bar.wrapper.cjs');
-require('../components/tabs-item.wrapper.cjs');
-require('../components/tag.wrapper.cjs');
-require('../components/tag-dismissible.wrapper.cjs');
-require('../components/text.wrapper.cjs');
-require('../components/text-field-wrapper.wrapper.cjs');
-require('../components/text-list.wrapper.cjs');
-require('../components/text-list-item.wrapper.cjs');
-require('../components/textarea.wrapper.cjs');
-require('../components/textarea-wrapper.wrapper.cjs');
-require('../components/toast.wrapper.cjs');
-require('../components/wordmark.wrapper.cjs');
-var splitChildren = require('../../splitChildren.cjs');
 var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var loadingMessage = require('./loading-message.cjs');
 var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
-var loadingMessage = require('./loading-message.cjs');
+var spinner_wrapper = require('../components/spinner.wrapper.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." }