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

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/radio-button-wrapper.wrapper.js

@@ -23,7 +23,7 @@ const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', m
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(radioButtonWrapper.DSRRadioButtonWrapper, { ...{ hideLabel, label, message, state, theme, children } })),
+                children: (jsxRuntime.jsx(radioButtonWrapper.DSRRadioButtonWrapper, { hideLabel, label, message, state, theme, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/scroller.wrapper.js

@@ -23,7 +23,7 @@ const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gra
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(scroller.DSRScroller, { ...{ alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme, children } })),
+                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/segmented-control-item.wrapper.js

@@ -25,7 +25,7 @@ const PSegmentedControlItem = react.forwardRef((
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(segmentedControlItem.DSRSegmentedControlItem, { ...{ disabled, icon, iconSource, label, value, selected, theme, children } })),
+                children: (jsxRuntime.jsx(segmentedControlItem.DSRSegmentedControlItem, { disabled, icon, iconSource, label, value, selected, theme, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/segmented-control.wrapper.js

@@ -26,7 +26,7 @@ const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedContro
         ...(!process.browser
             ? {
                 ...{ "role": "group" },
-                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { ...{ backgroundColor, theme, value, children } })),
+                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, theme, value, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/select-wrapper-dropdown.wrapper.js

@@ -24,7 +24,7 @@ const PSelectWrapperDropdown = react.forwardRef(({ description, direction = 'aut
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(selectWrapperDropdown.DSRSelectWrapperDropdown, { ...{ description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme } })),
+                children: (jsxRuntime.jsx(selectWrapperDropdown.DSRSelectWrapperDropdown, { description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme })),
             }
             : {
                 suppressHydrationWarning: true,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/select-wrapper.wrapper.js

@@ -23,7 +23,7 @@ const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(selectWrapper.DSRSelectWrapper, { ...{ description, dropdownDirection, filter, hideLabel, label, message, native, state, theme, children } })),
+                children: (jsxRuntime.jsx(selectWrapper.DSRSelectWrapper, { description, dropdownDirection, filter, hideLabel, label, message, native, state, theme, children })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/spinner.wrapper.js

@@ -23,7 +23,7 @@ const PSpinner = react.forwardRef(({ aria, size = 'small', theme = 'light', clas
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(spinner.DSRSpinner, { ...{ aria, size, theme } })),
+                children: (jsxRuntime.jsx(spinner.DSRSpinner, { aria, size, theme })),
             }
             : {
                 suppressHydrationWarning: true,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/stepper-horizontal-item.wrapper.js

@@ -26,7 +26,7 @@ const PStepperHorizontalItem = react.forwardRef((
         ...(!process.browser
             ? {
                 ...{ "role": "listitem" },
-                children: (jsxRuntime.jsx(stepperHorizontalItem.DSRStepperHorizontalItem, { ...{ disabled, state, theme, children } })),
+                children: (jsxRuntime.jsx(stepperHorizontalItem.DSRStepperHorizontalItem, { disabled, state, theme, children })),
             }
             : {
                 children,

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

@@ -25,7 +25,7 @@ const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 's
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { ...{ size, theme, children } })),
+                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { size, theme, children })),
             }
             : {
                 children,

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

@@ -25,7 +25,7 @@ const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disab
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(_switch.DSRSwitch, { ...{ alignLabel, checked, disabled, hideLabel, loading, stretch, theme, children } })),
+                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme, children })),
             }
             : {
                 children,

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

@@ -19,7 +19,7 @@ const PTableBody = react.forwardRef(({ className, children, ...rest }, ref) => {
         ...(!process.browser
             ? {
                 ...{ "role": "rowgroup" },
-                children: (jsxRuntime.jsx(tableBody.DSRTableBody, { ...{ children } })),
+                children: (jsxRuntime.jsx(tableBody.DSRTableBody, { children })),
             }
             : {
                 children,

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

@@ -22,7 +22,7 @@ const PTableCell = react.forwardRef(({ multiline = false, className, children, .
         ...(!process.browser
             ? {
                 ...{ "role": "cell" },
-                children: (jsxRuntime.jsx(tableCell.DSRTableCell, { ...{ multiline, children } })),
+                children: (jsxRuntime.jsx(tableCell.DSRTableCell, { multiline, children })),
             }
             : {
                 children,

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

@@ -24,7 +24,7 @@ const PTableHeadCell = react.forwardRef(({ hideLabel = false, multiline = false,
         ...(!process.browser
             ? {
                 ...{ "scope": "col", "role": "columnheader" },
-                children: (jsxRuntime.jsx(tableHeadCell.DSRTableHeadCell, { ...{ hideLabel, multiline, sort, children } })),
+                children: (jsxRuntime.jsx(tableHeadCell.DSRTableHeadCell, { hideLabel, multiline, sort, children })),
             }
             : {
                 children,

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

@@ -19,7 +19,7 @@ const PTableHeadRow = react.forwardRef(({ className, children, ...rest }, ref) =
         ...(!process.browser
             ? {
                 ...{ "role": "row" },
-                children: (jsxRuntime.jsx(tableHeadRow.DSRTableHeadRow, { ...{ children } })),
+                children: (jsxRuntime.jsx(tableHeadRow.DSRTableHeadRow, { children })),
             }
             : {
                 children,

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

@@ -19,7 +19,7 @@ const PTableHead = react.forwardRef(({ className, children, ...rest }, ref) => {
         ...(!process.browser
             ? {
                 ...{ "role": "rowgroup" },
-                children: (jsxRuntime.jsx(tableHead.DSRTableHead, { ...{ children } })),
+                children: (jsxRuntime.jsx(tableHead.DSRTableHead, { children })),
             }
             : {
                 children,

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

@@ -19,7 +19,7 @@ const PTableRow = react.forwardRef(({ className, children, ...rest }, ref) => {
         ...(!process.browser
             ? {
                 ...{ "role": "row" },
-                children: (jsxRuntime.jsx(tableRow.DSRTableRow, { ...{ children } })),
+                children: (jsxRuntime.jsx(tableRow.DSRTableRow, { children })),
             }
             : {
                 children,

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

@@ -25,7 +25,7 @@ const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = '
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(table.DSRTable, { ...{ caption, theme, children } })),
+                children: (jsxRuntime.jsx(table.DSRTable, { caption, theme, children })),
             }
             : {
                 children,

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

@@ -25,7 +25,7 @@ const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { ...{ activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children } })),
+                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PTabsItem = react.forwardRef((
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsItem.DSRTabsItem, { ...{ label, theme, children } })),
+                children: (jsxRuntime.jsx(tabsItem.DSRTabsItem, { label, theme, children })),
             }
             : {
                 children,

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

@@ -25,7 +25,7 @@ const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'backgroun
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabs.DSRTabs, { ...{ activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children } })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface',
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { ...{ aria, color, label, theme, children } })),
+                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { aria, color, label, theme, children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tag.DSRTag, { ...{ color, icon, iconSource, theme, children } })),
+                children: (jsxRuntime.jsx(tag.DSRTag, { color, icon, iconSource, theme, children })),
             }
             : {
                 children,

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

@@ -24,7 +24,7 @@ const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition, children } })),
+                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition, children })),
             }
             : {
                 children,

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

@@ -19,7 +19,7 @@ const PTextListItem = react.forwardRef(({ className, children, ...rest }, ref) =
         ...(!process.browser
             ? {
                 ...{ "role": "listitem" },
-                children: (jsxRuntime.jsx(textListItem.DSRTextListItem, { ...{ children } })),
+                children: (jsxRuntime.jsx(textListItem.DSRTextListItem, { children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PTextList = react.forwardRef(({ listType, orderType, theme = 'light', type
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textList.DSRTextList, { ...{ listType, orderType, theme, type, children } })),
+                children: (jsxRuntime.jsx(textList.DSRTextList, { listType, orderType, theme, type, children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PText = react.forwardRef(({ align = 'left', color = 'primary', ellipsis =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(text.DSRText, { ...{ align, color, ellipsis, size, tag, theme, weight, children } })),
+                children: (jsxRuntime.jsx(text.DSRText, { align, color, ellipsis, size, tag, theme, weight, children })),
             }
             : {
                 children,

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

@@ -23,7 +23,7 @@ const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textareaWrapper.DSRTextareaWrapper, { ...{ description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, children } })),
+                children: (jsxRuntime.jsx(textareaWrapper.DSRTextareaWrapper, { description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, children })),
             }
             : {
                 children,

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

@@ -21,7 +21,7 @@ const PToast = react.forwardRef(({ theme = 'light', className, ...rest }, ref) =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(toast.DSRToast, { ...{ theme } })),
+                children: (jsxRuntime.jsx(toast.DSRToast, { theme })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -23,7 +23,7 @@ const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_sel
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(wordmark.DSRWordmark, { ...{ aria, href, size, target, theme } })),
+                children: (jsxRuntime.jsx(wordmark.DSRWordmark, { aria, href, size, target, theme })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -69,6 +69,7 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRAccordion extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const buttonId = 'accordion-control';

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

@@ -69,6 +69,9 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRBanner extends react.Component {
+    host;
+    inlineNotificationElement;
+    closeBtn;
     get hasDismissButton() {
         return this.props.persistent ? false : this.props.dismissButton;
     }

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

@@ -8,6 +8,7 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRButtonGroup extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonGroupCss(this.props.direction)));

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

@@ -70,6 +70,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRButtonPure extends react.Component {
+    host;
     get isDisabledOrLoading() {
         return utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading);
     }

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

@@ -70,6 +70,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRButtonTile extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const buttonProps = {

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

@@ -70,6 +70,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRButton extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));

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

@@ -70,12 +70,15 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRCarousel extends react.Component {
-    constructor() {
-        super(...arguments);
-        this.slides = [];
-    }
+    host;
+    amountOfPages;
+    splide;
+    container;
+    btnPrev;
+    btnNext;
+    paginationEl;
+    slides = [];
     render() {
-        var _a;
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const btnProps = {
             className: 'btn',
@@ -92,7 +95,7 @@ class DSRCarousel extends react.Component {
                 : !this.props.disablePagination
             : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), this.props.alignHeader, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [this.props.heading ? jsxRuntime.jsx("h2", { id: "heading", children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
-                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "left", hideLabel: true, "aria-describedby": this.props.heading ? 'heading' : null, children: "Skip carousel entries" })), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", tabIndex: 0, children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (jsxRuntime.jsx("div", { className: "pagination-container", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
+                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "left", hideLabel: true, "aria-describedby": this.props.heading ? 'heading' : null, children: "Skip carousel entries" })), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children, children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (jsxRuntime.jsx("div", { className: "pagination-container", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -70,10 +70,11 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var stateMessage = require('./state-message.js');
 
 class DSRCheckboxWrapper extends react.Component {
+    host;
+    input;
     render() {
-        var _a;
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCheckboxWrapperCss(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled), this.props.loading, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCheckboxWrapperCss(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.loading, this.props.theme)));
         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("label", { "aria-disabled": this.props.loading ? 'true' : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "text", children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), jsxRuntime.jsx("slot", {}), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRContentWrapper extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getContentWrapperCss(this.props.width)));

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/crest.js

@@ -9,6 +9,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 const { width, height } = utilsEntry.crestSize;
 class DSRCrest extends react.Component {
+    host;
     render() {
         const picture = (jsxRuntime.jsxs("picture", { children: [jsxRuntime.jsx("source", { srcSet: utilsEntry.buildCrestSrcSet('webp'), type: "image/webp" }, "webp"), jsxRuntime.jsx("source", { srcSet: utilsEntry.buildCrestSrcSet('png'), type: "image/png" }, "png"), jsxRuntime.jsx("img", { src: `${utilsEntry.crestCdnBaseUrl}/${utilsEntry.crestInnerManifest['2x'].png}`, width: width, height: height, alt: "Porsche" })] }));
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCrestCss()));

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRDisplay extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = utilsEntry.getDisplayTagType(null, this.props.size, this.props.tag);

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/divider.js

@@ -7,6 +7,7 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRDivider extends react.Component {
+    host;
     render() {
         const deprecationMap = {
             'neutral-contrast-low': 'contrast-low',

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

@@ -11,6 +11,7 @@ var required = require('./required.js');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 class DSRFieldsetWrapper extends react.Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const messageId = 'message';

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

@@ -10,6 +10,7 @@ var stateMessage = require('./state-message.js');
 var required = require('./required.js');
 
 class DSRFieldset extends react.Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const messageId = 'message';

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 class DSRFlexItem extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlexItemCss(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 class DSRFlex extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlexCss(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));

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

@@ -70,6 +70,16 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRFlyout extends react.Component {
+    host;
+    focusedElBeforeOpen;
+    dialog;
+    dismissBtn;
+    header;
+    footer;
+    subFooter;
+    hasHeader;
+    hasFooter;
+    hasSubFooter;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRGridItem extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getGridItemCss(this.props.size, this.props.offset)));

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

@@ -9,9 +9,10 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRGrid extends react.Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
+        const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, gutter: this.props.gutter } }
             : child);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getGridCss(this.props.direction, this.props.wrap)));

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

@@ -9,6 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRHeading extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = utilsEntry.getHeadingTagType(null, this.props.size, this.props.tag);

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

@@ -10,6 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 class DSRHeadline extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = utilsEntry.getHeadlineTagType(null, this.props.variant, this.props.tag);

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

@@ -8,6 +8,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRIcon extends react.Component {
+    host;
     render() {
         const deprecationMap = {
             brand: 'primary',
@@ -17,9 +18,8 @@ class DSRIcon extends react.Component {
             'neutral-contrast-high': 'contrast-high',
             'notification-neutral': 'notification-info',
         };
-        // TODO: wouldn't it be better to set alt attribute instead of aria-label?
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getIconCss((deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme)));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("img", { src: utilsEntry.buildIconUrl(this.props.source || this.props.name), ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), alt: "" })] }) }));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("img", { src: utilsEntry.buildIconUrl(this.props.source || this.props.name), width: 24, height: 24, loading: "lazy", alt: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.['aria-label'] ?? '' })] }) }));
     }
 }
 

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

@@ -70,6 +70,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRInlineNotification extends react.Component {
+    host;
     get hasDismissButton() {
         return this.props.persistent ? false : this.props.dismissButton;
     }

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

@@ -70,6 +70,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRLinkPure extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';

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

@@ -71,6 +71,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 class DSRLinkSocial extends react.Component {
+    host;
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';

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

@@ -69,6 +69,7 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRLinkTileModelSignature extends react.Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         // If we do this earlier than render, there are cases where primaryLink.href is undefined