@porsche-design-system/components-react 4.6.0 → 4.7.0-beta.0

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

@@ -18,6 +18,10 @@ import { PLinkPure } from '../components/link-pure.wrapper.mjs';
  */
 class DSRCarousel extends Component {
     host;
+    // TODO: this prop seeds the initial slide and is the controlled value at the same time. React splits
+    //  those into defaultValue and value, so a consumer cannot reliably drive it. To be split into
+    //  defaultActiveSlideIndex + activeSlideIndex in v5, see
+    //  https://github.com/porsche-design-system/porsche-design-system/issues/4689
     amountOfPages;
     splide;
     container;
@@ -47,7 +51,7 @@ class DSRCarousel extends Component {
         };
         const headingId = 'heading';
         const style = minifyCss(getComponentCss$13(this.props.gradient, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, this.props.pagination, isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), this.props.alignHeader, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length), this.props.alignControls));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...parseAndGetAriaAttributes(this.props.aria),

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

@@ -36,7 +36,7 @@ class DSRCheckbox extends Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const id = 'x';
         const style = minifyCss(getComponentCss$12(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsxs("div", { className: "input-wrapper", children: [jsx("input", { type: "checkbox", id: id, "aria-describedby": setAriaIDREF(this.props.loading && loadingId, selectMessageId), "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsxs("div", { className: "input-wrapper", children: [jsx("input", { type: "checkbox", id: id, "aria-describedby": setAriaIDREF(this.props.loading && loadingId, selectMessageId), "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -10,7 +10,7 @@ class DSRCrest extends Component {
     render() {
         const picture = (jsxs("picture", { children: [jsx("source", { srcSet: buildCrestSrcSet('webp'), type: "image/webp" }, "webp"), jsx("source", { srcSet: buildCrestSrcSet('png'), type: "image/png" }, "png"), jsx("img", { src: buildCrestImgSrc(), width: width, height: height, alt: "Porsche" })] }));
         const style = minifyCss(getComponentCss$11());
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (picture) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: picture })) })] }) }));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.href === undefined ? (picture) : (jsx("a", { href: this.props.href, target: this.props.target, ...parseAndGetAriaAttributes(this.props.aria), children: picture })) })] }) }));
     }
 }
 

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

@@ -16,7 +16,7 @@ class DSRDisplay extends Component {
         splitChildren(this.props.children);
         const TagType = getDisplayTagType(null, this.props.size, this.props.tag);
         const style = minifyCss(getComponentCss$10(this.props.size, this.props.align, this.props.color, this.props.ellipsis));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -7,7 +7,7 @@ class DSRDivider extends Component {
     host;
     render() {
         const style = minifyCss(getComponentCss$$(this.props.color, this.props.direction));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("hr", {})] }) }));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("hr", {})] }) }));
     }
 }
 

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

@@ -22,7 +22,7 @@ class DSRDrilldownItem extends Component {
         const hasSlottedHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss(getComponentCss$Z(this.props.primary, this.props.secondary, this.props.cascade));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx(PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, children: this.props.label })), jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", hideLabel: { base: true, s: false }, children: this.props.label }), hasSlottedHeader ? jsx("slot", { name: "header" }) : jsx("h2", { children: this.props.label }), jsx("div", { className: "drawer", children: jsx("div", { className: "scroller", children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx(PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, children: this.props.label })), jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", hideLabel: { base: true, s: false }, children: this.props.label }), hasSlottedHeader ? jsx("slot", { name: "header" }) : jsx("h2", { children: this.props.label }), jsx("div", { className: "drawer", children: jsx("div", { className: "scroller", children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -16,7 +16,7 @@ class DSRDrilldownLink extends Component {
         splitChildren(this.props.children);
         const hasSlottedAnchor = this.props.href === undefined;
         const style = minifyCss(getComponentCss$Y(hasSlottedAnchor, this.props.active));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: hasSlottedAnchor ? (jsx("slot", {})) : (jsx("a", { href: this.props.href, target: this.props.target, download: this.props.download, rel: this.props.rel, "aria-current": this.props.active ? 'true' : 'false', ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) })) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: hasSlottedAnchor ? (jsx("slot", {})) : (jsx("a", { href: this.props.href, target: this.props.target, download: this.props.download, rel: this.props.rel, "aria-current": this.props.active ? 'true' : 'false', ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) })) })] }), this.props.children] }));
     }
 }
 

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

@@ -35,7 +35,7 @@ class DSRDrilldown extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$_(this.props.open, this.primary, this.isSecondaryDrawerVisible));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "drawer", children: [jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", hideLabel: true, children: "Back" }), jsx(PButton, { className: "dismiss-mobile", type: "button", icon: "close", compact: true, variant: "secondary", hideLabel: true, children: "Dismiss drilldown" }), jsx(PButton, { className: "dismiss-desktop", type: "button", icon: "close", variant: "secondary", hideLabel: true, children: "Dismiss drilldown" }), jsx("div", { className: "scroller", children: jsx("slot", {}) })] }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "drawer", children: [jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", hideLabel: true, children: "Back" }), jsx(PButton, { className: "dismiss-mobile", type: "button", icon: "close", compact: true, variant: "secondary", hideLabel: true, children: "Dismiss drilldown" }), jsx(PButton, { className: "dismiss-desktop", type: "button", icon: "close", variant: "secondary", hideLabel: true, children: "Dismiss drilldown" }), jsx("div", { className: "scroller", children: jsx("slot", {}) })] }) })] }), this.props.children] }));
     }
     onDismissButtonClick = () => this.props.dismissDialog('dismiss-button');
 }

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

@@ -18,7 +18,7 @@ class DSRFieldset extends Component {
         const { namedSlotChildren} = splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss(getComponentCss$X(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', this.props.aria), children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { "aria-describedby": hasMessageValue ? messageId : null, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', this.props.aria), children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxs("legend", { children: [this.props.label || jsx("slot", { name: "label" }), this.props.required && jsx(Required, {})] })), jsx("slot", {}), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -8,7 +8,7 @@ class DSRFlag extends Component {
     host;
     render() {
         const style = minifyCss(getComponentCss$W(this.props.size));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildFlagUrl(this.props.name), width: 24, height: 24, loading: "lazy", alt: parseAndGetAriaAttributes(this.props.aria)?.['aria-label'] ?? '' })] }) }));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("img", { src: buildFlagUrl(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/flyout.mjs

@@ -38,7 +38,7 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
                         // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
                         // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
                         // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").

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

@@ -14,7 +14,7 @@ class DSRHeading extends Component {
         splitChildren(this.props.children);
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);
         const style = minifyCss(getComponentCss$U(this.props.size, this.props.weight, this.props.align, this.props.color, this.props.hyphens, this.props.ellipsis));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(TagType, { className: "root", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }
 

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

@@ -8,7 +8,7 @@ class DSRIcon extends Component {
     host;
     render() {
         const style = minifyCss(getComponentCss$T(this.props.name, this.props.source, this.props.color, this.props.size));
-        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'] ?? '' })] }) }));
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", 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.mjs

@@ -21,7 +21,7 @@ class DSRInlineNotification extends Component {
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
         const headingText = this.props.heading ? this.props.heading : namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children;
         const style = minifyCss(getComponentCss$S(this.props.state, !!this.props.actionLabel, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(NotificationBase, { ...getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(NotificationBase, { ...getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
                                 actionLabel: (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })),
                             }), ...(this.props.dismissButton && {
                                 dismissButton: (jsx(FCDismissButton, { label: "Close notification", ariaDescription: headingText || undefined })),

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

@@ -39,7 +39,7 @@ class DSRInputDate extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$R(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-date", name: this.props.name, form: this.props.form, type: "date", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-date", name: this.props.name, form: this.props.form, type: "date", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
                                 end: (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "calendar", disabled: this.props.disabled || this.props.readOnly, children: "Open date picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -38,7 +38,7 @@ class DSRInputEmail extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$Q(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-email", name: this.props.name, form: this.props.form, type: "email", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, multiple: this.props.multiple, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-email", name: this.props.name, form: this.props.form, type: "email", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, multiple: this.props.multiple, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
                                 start: jsx(PIcon, { "aria-hidden": "true", name: "email", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -39,7 +39,7 @@ class DSRInputMonth extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$P(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-month", name: this.props.name, form: this.props.form, type: "month", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-month", name: this.props.name, form: this.props.form, type: "month", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
                                 end: (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "calendar", disabled: this.props.disabled || this.props.readOnly, children: "Open date picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -38,7 +38,7 @@ class DSRInputNumber extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$O(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.controls));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-number" // prevent React default scroll-to-[increment|decrement] on number inputs
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-number" // prevent React default scroll-to-[increment|decrement] on number inputs
                             , name: this.props.name, form: this.props.form, type: "number", required: this.props.required, placeholder: this.props.placeholder, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.controls && {
                                 end: (jsxs(Fragment, { children: [jsxs(PButtonPure, { tabIndex: -1, hideLabel: true, className: "button", type: "button", icon: "minus", disabled: this.props.disabled || this.props.readOnly, children: ["Decrement value by ", this.props.step] }), jsxs(PButtonPure, { tabIndex: -1, hideLabel: true, className: "button", type: "button", icon: "plus", disabled: this.props.disabled || this.props.readOnly, children: ["Increment value by ", this.props.step] })] })),
                             }) })] }), this.props.children] }));

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

@@ -39,7 +39,7 @@ class DSRInputPassword extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$N(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.toggle, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-password", name: this.props.name, form: this.props.form, type: this.props.showPassword ? 'text' : 'password', required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, initialLoading: this.props.initialLoading, end: this.props.toggle && (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: this.props.disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-password", name: this.props.name, form: this.props.form, type: this.props.showPassword ? 'text' : 'password', required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, initialLoading: this.props.initialLoading, end: this.props.toggle && (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: this.props.disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) })] }), this.props.children] }));
     }
 }
 

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

@@ -40,7 +40,7 @@ class DSRInputSearch extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$M(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.clear));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-search", name: this.props.name, form: this.props.form, type: "search", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, initialLoading: this.props.initialLoading, aria: this.props.aria, ...(this.props.indicator && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-search", name: this.props.name, form: this.props.form, type: "search", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, initialLoading: this.props.initialLoading, aria: this.props.aria, ...(this.props.indicator && {
                                 start: jsx(PIcon, { "aria-hidden": "true", name: "search", color: "contrast-medium" }),
                             }), ...(this.props.clear && {
                                 end: (jsx(PButtonPure, { tabIndex: -1, hideLabel: true, className: "button", type: "button", icon: "close", hidden: !this.props.isClearable, disabled: this.props.readOnly || this.props.disabled, children: "Clear field" })),

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

@@ -38,7 +38,7 @@ class DSRInputTel extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$L(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-tel", name: this.props.name, form: this.props.form, type: "tel", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-tel", name: this.props.name, form: this.props.form, type: "tel", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
                                 start: jsx(PIcon, { "aria-hidden": "true", name: "phone", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -36,7 +36,7 @@ class DSRInputText extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$K(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly, this.props.counter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text", name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.inputMode !== '' && { inputMode: this.props.inputMode }), ...(this.props.counter && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-text", name: this.props.name, form: this.props.form, type: "text", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, spellCheck: this.props.spellCheck, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(this.props.inputMode !== '' && { inputMode: this.props.inputMode }), ...(this.props.counter && {
                                 end: (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", "aria-live": "polite", children: this.props.maxLength
                                                 ? `You have ${this.props.maxLength - this.parsedValue.length} out of ${this.props.maxLength} characters left`
                                                 : `${this.parsedValue.length} characters entered` }), jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.parsedValue.length}/${this.props.maxLength}` : `${this.parsedValue.length}` })] })),

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

@@ -39,7 +39,7 @@ class DSRInputTime extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$J(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-time", name: this.props.name, form: this.props.form, type: "time", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-time", name: this.props.name, form: this.props.form, type: "time", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
                                 end: (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "clock", disabled: this.props.disabled || this.props.readOnly, children: "Open time picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -38,7 +38,7 @@ class DSRInputUrl extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$I(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-url", name: this.props.name, form: this.props.form, type: "url", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-url", name: this.props.name, form: this.props.form, type: "url", required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, loading: this.props.loading, pattern: this.props.pattern, initialLoading: this.props.initialLoading, ...(this.props.indicator && {
                                 start: jsx(PIcon, { "aria-hidden": "true", name: "linked", color: "contrast-low" }),
                             }) })] }), this.props.children] }));
     }

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

@@ -39,7 +39,7 @@ class DSRInputWeek extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$H(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.readOnly));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-week", name: this.props.name, form: this.props.form, type: "week", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(InputBase, { children: this.props.children, host: null, label: this.props.label, description: this.props.description, id: "input-week", name: this.props.name, form: this.props.form, type: "week", required: this.props.required, max: this.props.max, min: this.props.min, value: this.parsedValue, readOnly: this.props.readOnly, autoComplete: this.props.autoComplete, disabled: this.props.disabled, state: this.props.state, message: this.props.message, step: this.props.step, loading: this.props.loading, initialLoading: this.props.initialLoading, ...(hasShowPickerSupport() && {
                                 end: (jsx(PButtonPure, { tabIndex: this.props.disabled ? -1 : null, hideLabel: true, className: "button", type: "button", icon: "calendar", disabled: this.props.disabled || this.props.readOnly, children: "Open date picker" })),
                             }) })] }), this.props.children] }));
     }

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

@@ -17,7 +17,7 @@ class DSRLinkPure extends Component {
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const hasIcon = hasVisibleIcon(this.props.icon, this.props.iconSource);
         const style = minifyCss(getComponentCss$G(this.props.icon, this.props.iconSource, this.props.active, this.props.stretch, this.props.size, this.props.color, this.props.hideLabel, this.props.alignLabel, this.props.underline, !this.props.href));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,
                                 download: this.props.download,

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

@@ -25,7 +25,7 @@ class DSRLinkTileProduct extends Component {
         const priceId = 'price';
         const descriptionId = 'description';
         const style = minifyCss(getComponentCss$F(this.props.likeButton, !this.props.href, !!this.props.priceOriginal, !!this.props.description, this.props.aspectRatio));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [this.props.heading && (jsx("h3", { id: headingId, className: "heading", children: this.props.heading })), this.props.price && (jsx("p", { id: priceId, className: "price", children: this.props.priceOriginal ? (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: "sale price" }), this.props.price, jsx("span", { className: "sr-only", children: "original price" }), jsx("s", { children: this.props.priceOriginal })] })) : (this.props.price) })), this.props.description && (jsx("p", { id: descriptionId, className: "description", children: this.props.description }))] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [this.props.heading && (jsx("h3", { id: headingId, className: "heading", children: this.props.heading })), this.props.price && (jsx("p", { id: priceId, className: "price", children: this.props.priceOriginal ? (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: "sale price" }), this.props.price, jsx("span", { className: "sr-only", children: "original price" }), jsx("s", { children: this.props.priceOriginal })] })) : (this.props.price) })), this.props.description && (jsx("p", { id: descriptionId, className: "description", children: this.props.description }))] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -31,7 +31,7 @@ class DSRLinkTile extends Component {
         const link = (createElement(PLink, { ...sharedLinkProps, ...linkProps, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const linkCompact = (createElement(PLink, { ...sharedLinkProps, ...linkProps, hideLabel: true, icon: "arrow-right", key: "link-or-button-pure", compact: true, className: "link-or-button-pure" }, this.props.label));
         const style = minifyCss(getComponentCss$E(this.props.aspectRatio, this.props.size, this.props.weight, this.props.align, parsedCompact, this.props.gradient, this.props.hasFooterSlot));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), jsx("slot", { name: "footer" }), typeof parsedCompact === 'boolean' ? (parsedCompact ? linkCompact : link) : [linkCompact, link]] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...sharedLinkProps, tabIndex: -1, "aria-hidden": "true" }), jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), jsx("slot", { name: "footer" }), typeof parsedCompact === 'boolean' ? (parsedCompact ? linkCompact : link) : [linkCompact, link]] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -16,7 +16,7 @@ class DSRLink extends Component {
         splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const style = minifyCss(getComponentCss$D(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, !this.props.href, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,
                                 download: this.props.download,

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

@@ -36,7 +36,7 @@ class DSRModal extends Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss(getComponentCss$C(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
                         // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
                         // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
                         // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").

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

@@ -15,7 +15,7 @@ class DSRModelSignature extends Component {
         const fetchPriority = this.props.fetchPriority !== 'auto' ? this.props.fetchPriority : null;
         const loading = this.props.lazy === true ? 'lazy' : null;
         const style = minifyCss(getComponentCss$B(this.props.model, this.props.safeZone, this.props.size, this.props.color));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchPriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx("slot", {}), jsx("img", { fetchPriority: fetchPriority, loading: loading, src: getSvgUrl(this.props.model), alt: this.props.model })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select-option.mjs

@@ -14,7 +14,7 @@ class DSRMultiSelectOption extends Component {
         const { selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
         const style = minifyCss(getComponentCss$A(isDisabled, isSelected));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } })
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } })
                         // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
                         , "// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259", jsx(Fragment, { children: jsxs("div", { className: Object.entries({
                                     option: true,

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

@@ -76,7 +76,7 @@ class DSRMultiSelect extends Component {
         const selectDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$y(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value?.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsxs(Fragment, { children: [jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() }), jsx(FilterStatusAnnouncer, { message: this.props.filterStatusMessage })] })), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, tabIndex: 0, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, listboxId), disabled: this.props.disabled, onBlur: this.props.onComboBlur, children: [hasCustomSelectedSlot ? (jsx("slot", { name: "selected" })) : (jsx("span", { children: this.selectedOptions.map((option) => (option.textContent ?? '').toString().trim()).join(', ') })), this.props.value?.length > 0 && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, disabled: this.props.disabled, children: "Reset selection" })), jsx(PIcon, { className: "icon", name: "arrow-head-down", color: "primary", "aria-hidden": "true" })] }), jsxs("div", { popover: "manual", tabIndex: 0, children: [hasCustomFilterSlot ? (jsx("slot", { name: "filter" })) : (jsxs(Fragment, { children: [jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, onBlur: (e) => e.stopPropagation() }), jsx(FilterStatusAnnouncer, { message: this.props.filterStatusMessage })] })), jsxs("div", { id: listboxId, className: "options", ...getListboxAriaAttributes(this.props.required, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && labelId, selectMessageId, selectDescriptionId, true), onPointerMove: this.props.onPointerMove, onBlur: (e) => e.stopPropagation(), children: [!this.props.hasFilterResults && jsx(NoResultsOption, {}), jsx("slot", { name: "options-status" }), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null })] })] }), this.props.children] }));
     }
 }
 

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

@@ -14,7 +14,7 @@ class DSROptgroup extends Component {
         const { hidden } = this.props;
         const labelId = 'label';
         const style = minifyCss(getComponentCss$z(this.props.disabled));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": labelId, children: [jsx("span", { id: labelId, role: "presentation", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": labelId, children: [jsx("span", { id: labelId, role: "presentation", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -19,7 +19,7 @@ class DSRPagination extends Component {
             showLastPage: this.props.showLastPage,
         });
         const style = minifyCss(getComponentCss$x(this.props.activePage, pageTotal, this.props.showLastPage));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("nav", { "aria-label": this.props.intl.root, children: jsx("ul", { children: paginationItems.map((pageModel, index) => {
+        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("nav", { "aria-label": this.props.intl.root, children: jsx("ul", { children: paginationItems.map((pageModel, index) => {
                                 const { type, isActive, value, isBeforeCurrent, isAfterCurrent, isBeforeBeforeCurrent, isAfterAfterCurrent, } = pageModel;
                                 const spanProps = {
                                     role: 'button',

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

@@ -47,7 +47,7 @@ class DSRPinCode extends Component {
         const inputDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const inputMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$w(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-describedby": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : null, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", dir: "ltr", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.parsedValue, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": setAriaIDREF(inputLabelId, inputMessageId), "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error'), "aria-describedby": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : null, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", dir: "ltr", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.parsedValue, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": setAriaIDREF(inputLabelId, inputMessageId), "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
                                             , defaultValue: this.parsedValue[index] === ' ' ? null : this.parsedValue[index], disabled: this.props.disabled, required: this.props.required, onBlur: this.props.onInputBlur }, index))), this.props.loading && jsx(PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }

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

@@ -78,7 +78,7 @@ class DSRPopover extends Component {
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const id = 'popover';
         const style = minifyCss(getComponentCss$v(this.props.effectiveOpen, this.props.compact, this.props.isInitialRender).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsx("div", { className: "arrow" }), this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {})] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsx("div", { className: "arrow" }), this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {})] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -26,7 +26,7 @@ class DSRRadioGroupOption extends Component {
         const isLoading = isOptionLoading || this.props.loadingParent;
         const id = 'radio-group-option';
         const style = minifyCss(getComponentCss$u(isDisabled, isLoading, state));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { className: "root", children: [jsxs("div", { className: "wrapper", children: [jsx("input", { id: id, type: "radio", name: name, checked: isSelected, disabled: isDisabled || isLoading, value: this.props.value, onClick: (e) => {
                                                     e.stopPropagation();
                                                 }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : null, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", "aria-hidden": "true" }))] }), jsx(Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), !this.props.loadingParent && (jsx(LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
     }

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

@@ -43,7 +43,7 @@ class DSRRadioGroup extends Component {
         const inputDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? descriptionId : undefined;
         const inputMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const style = minifyCss(getComponentCss$t(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', { role: 'radiogroup' }), "aria-describedby": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : null, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', { role: 'radiogroup' }), "aria-describedby": setAriaIDREF(this.props.loading && loadingId, inputMessageId, inputDescriptionId), "aria-labelledby": (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) ? labelId : null, children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, tag: "div", label: this.props.label, description: this.props.description, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -19,7 +19,7 @@ class DSRScroller extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(getComponentCss$s(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", ...parseAndGetAriaAttributes(this.props.aria), tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootclonable: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", ...parseAndGetAriaAttributes(this.props.aria), tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }