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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -67,6 +67,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getAccordionCss as getComponentCss$Z } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRAccordion extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const buttonId = 'accordion-control';

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

@@ -67,6 +67,9 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getBannerCss as getComponentCss$Y } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRBanner extends Component {
+    host;
+    inlineNotificationElement;
+    closeBtn;
     get hasDismissButton() {
         return this.props.persistent ? false : this.props.dismissButton;
     }

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

@@ -6,6 +6,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getButtonGroupCss as getComponentCss$X } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRButtonGroup extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$X(this.props.direction)));

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

@@ -68,6 +68,7 @@ import { getButtonPureCss as getComponentCss$W } from '../../../../../../compone
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRButtonPure extends Component {
+    host;
     get isDisabledOrLoading() {
         return isDisabledOrLoading(this.props.disabled, this.props.loading);
     }

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

@@ -68,6 +68,7 @@ import { getButtonTileCss as getComponentCss$V } from '../../../../../../compone
 import { isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRButtonTile extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const buttonProps = {

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

@@ -68,6 +68,7 @@ import { getButtonCss as getComponentCss$U } from '../../../../../../components/
 import { getButtonAriaAttributes, getLinkButtonThemeForIcon, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRButton extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$U(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));

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

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

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

@@ -68,10 +68,11 @@ import { getCheckboxWrapperCss as getComponentCss$S } from '../../../../../../co
 import { StateMessage } from './state-message.js';
 
 class DSRCheckboxWrapper extends Component {
+    host;
+    input;
     render() {
-        var _a;
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$S(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(stripFocusAndHoverStyles(getComponentCss$S(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { "aria-disabled": this.props.loading ? 'true' : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {}), this.props.loading && (jsx(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) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }

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

@@ -7,6 +7,7 @@ import { getContentWrapperCss as getComponentCss$R } from '../../../../../../com
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRContentWrapper extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.width)));

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

@@ -7,6 +7,7 @@ import { buildCrestSrcSet, crestCdnBaseUrl, crestInnerManifest, parseAndGetAriaA
 
 const { width, height } = crestSize;
 class DSRCrest extends Component {
+    host;
     render() {
         const picture = (jsxs("picture", { children: [jsx("source", { srcSet: buildCrestSrcSet('webp'), type: "image/webp" }, "webp"), jsx("source", { srcSet: buildCrestSrcSet('png'), type: "image/png" }, "png"), jsx("img", { src: `${crestCdnBaseUrl}/${crestInnerManifest['2x'].png}`, width: width, height: height, alt: "Porsche" })] }));
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q()));

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

@@ -7,6 +7,7 @@ import { getDisplayCss as getComponentCss$P } from '../../../../../../components
 import { getDisplayTagType } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRDisplay extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const TagType = getDisplayTagType(null, this.props.size, this.props.tag);

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

@@ -5,6 +5,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getDividerCss as getComponentCss$O } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRDivider extends Component {
+    host;
     render() {
         const deprecationMap = {
             'neutral-contrast-low': 'contrast-low',

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

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

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

@@ -8,6 +8,7 @@ import { StateMessage } from './state-message.js';
 import { Required } from './required.js';
 
 class DSRFieldset extends Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const messageId = 'message';

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

@@ -7,6 +7,7 @@ import { getFlexItemCss as getComponentCss$L } from '../../../../../../component
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 class DSRFlexItem extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$L(this.props.width, this.props.offset, this.props.alignSelf, this.props.grow, this.props.shrink, this.props.flex)));

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

@@ -7,6 +7,7 @@ import { getFlexCss as getComponentCss$K } from '../../../../../../components/di
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 class DSRFlex extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$K(this.props.inline, this.props.wrap, this.props.direction, this.props.justifyContent, this.props.alignItems, this.props.alignContent)));

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

@@ -68,6 +68,16 @@ import { getFlyoutCss as getComponentCss$J } from '../../../../../../components/
 import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRFlyout extends Component {
+    host;
+    focusedElBeforeOpen;
+    dialog;
+    dismissBtn;
+    header;
+    footer;
+    subFooter;
+    hasHeader;
+    hasFooter;
+    hasSubFooter;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -7,6 +7,7 @@ import { getGridItemCss as getComponentCss$I } from '../../../../../../component
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRGridItem extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$I(this.props.size, this.props.offset)));

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

@@ -7,9 +7,10 @@ import { getGridCss as getComponentCss$H } from '../../../../../../components/di
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 class DSRGrid extends Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = 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(stripFocusAndHoverStyles(getComponentCss$H(this.props.direction, this.props.wrap)));

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

@@ -7,6 +7,7 @@ import { getHeadingCss as getComponentCss$G } from '../../../../../../components
 import { getHeadingTagType } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRHeading extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);

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

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

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

@@ -6,6 +6,7 @@ import { getIconCss as getComponentCss$E } from '../../../../../../components/di
 import { buildIconUrl, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRIcon extends Component {
+    host;
     render() {
         const deprecationMap = {
             brand: 'primary',
@@ -15,9 +16,8 @@ class DSRIcon extends 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(stripFocusAndHoverStyles(getComponentCss$E((deprecationMap[this.props.color] || this.props.color), this.props.size, this.props.theme)));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildIconUrl(this.props.source || this.props.name), ...parseAndGetAriaAttributes(this.props.aria), alt: "" })] }) }));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildIconUrl(this.props.source || this.props.name), width: 24, height: 24, loading: "lazy", alt: parseAndGetAriaAttributes(this.props.aria)?.['aria-label'] ?? '' })] }) }));
     }
 }
 

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

@@ -68,6 +68,7 @@ import { getInlineNotificationCss as getComponentCss$D } from '../../../../../..
 import { getInlineNotificationIconName, getContentAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRInlineNotification extends Component {
+    host;
     get hasDismissButton() {
         return this.props.persistent ? false : this.props.dismissButton;
     }

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

@@ -68,6 +68,7 @@ import { getLinkPureCss as getComponentCss$C } from '../../../../../../component
 import { hasVisibleIcon, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.js';
 
 class DSRLinkPure extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';

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

@@ -69,6 +69,7 @@ import { getLinkButtonThemeForIcon } from '../../../../../../components/dist/uti
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
 class DSRLinkSocial extends Component {
+    host;
     render() {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';

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

@@ -67,6 +67,7 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getLinkTileModelSignatureCss as getComponentCss$A } from '../../../../../../components/dist/styles/esm/styles-entry.js';
 
 class DSRLinkTileModelSignature extends Component {
+    host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         // If we do this earlier than render, there are cases where primaryLink.href is undefined