@porsche-design-system/components-react 4.0.0-beta.1 → 4.0.0-beta.3

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3242,8 +3242,6 @@ const parseJSONAttribute = (attribute) => {
         // Convert tmp colon to real colon after all other replacements
         .replace(/__tmp-colon__/g, ':'));
 };
-
-const hasWindow$1 = typeof window !== 'undefined';
 const parseAndGetAriaAttributes = (rawAttributes) => {
     if (rawAttributes) {
         return Object.fromEntries(Object.entries(parseJSONAttribute(rawAttributes)).map(([key, val]) => [
@@ -3254,7 +3252,6 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
     }
     return undefined;
 };
-hasWindow$1 && window.matchMedia?.('(forced-colors: active)').matches;
 
 const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
     return {
@@ -3399,6 +3396,8 @@ supportsConstructableStylesheets();
     }
 })(); // determine it once
 
+const hasWindow$1 = typeof window !== 'undefined';
+
 const attributeMutationMap = new Map();
 hasWindow$1 &&
     new MutationObserver((mutations) => {
@@ -3449,18 +3448,12 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.1"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-beta.3"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
 };
 
-// This class is shared since the popover needs to register a scroll listener to this node in order to hide the popover when the table is scrolled
-const scrollAreaClass = 'scroll-area';
-const isScrollable = (isPrevHidden, isNextHidden) => {
-    return !(isPrevHidden && isNextHidden);
-};
-
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -3534,8 +3527,6 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3740,12 +3731,24 @@ const getFieldsetAriaAttributes = (isRequired, isInvalid, aria) => {
 const buildFlagUrl = (flagName) => {
     return `${getCDNBaseURL()}/flags/${FLAGS_MANIFEST[flagName] || FLAGS_MANIFEST.xx}`;
 };
+
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const headingSizeToTagMap = {
-    small: 'h6',
-    medium: 'h5',
-    large: 'h4',
-    'x-large': 'h3',
-    'xx-large': 'h2',
+    small: 'h6', // deprecated
+    medium: 'h5', // deprecated
+    large: 'h4', // deprecated
+    'x-large': 'h3', // deprecated
+    'xx-large': 'h2', // deprecated
+    '2xs': 'h6',
+    xs: 'h6',
+    sm: 'h6',
+    md: 'h5',
+    lg: 'h4',
+    xl: 'h3',
+    '2xl': 'h2',
+    '3xl': 'h2',
+    '4xl': 'h2',
+    '5xl': 'h2',
     inherit: 'h2',
 };
 const getHeadingTagType = (host, size, tag) => {
@@ -4015,7 +4018,6 @@ exports.isDisabledOrLoading = isDisabledOrLoading;
 exports.isElementOfKind = isElementOfKind;
 exports.isInfinitePagination = isInfinitePagination;
 exports.isListTypeOrdered = isListTypeOrdered;
-exports.isScrollable = isScrollable;
 exports.isSortable = isSortable;
 exports.isStateCompleteOrWarning = isStateCompleteOrWarning;
 exports.isUrl = isUrl;
@@ -4023,7 +4025,6 @@ exports.labelId = labelId;
 exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;
-exports.scrollAreaClass = scrollAreaClass;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
 exports.supportsNativePopover = supportsNativePopover;
 exports.tempDiv = tempDiv;

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var buttonPure = require('../dsr-components/button-pure.cjs');
 
-const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, type = 'submit', underline = false, value, className, children, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, color = 'primary', disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'sm', stretch = false, type = 'submit', underline = false, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value];
+    const propsToSync = [active, alignLabel, aria, color, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'type', 'underline', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'color', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'type', 'underline', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value, children })),
+                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, color, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value, children })),
             }
             : {
                 children,

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

@@ -7,6 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var display = require('../dsr-components/display.cjs');
 
+/** @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead. */
 const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-display');

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var flag = require('../dsr-components/flag.cjs');
 
-const PFlag = /*#__PURE__*/ react.forwardRef(({ aria, name = 'de', size = 'small', className, ...rest }, ref) => {
+const PFlag = /*#__PURE__*/ react.forwardRef(({ aria, name = 'de', size = 'sm', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-flag');
     const propsToSync = [aria, name, size];

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var heading = require('../dsr-components/heading.cjs');
 
-const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, className, children, ...rest }, ref) => {
+const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = '2xl', tag, weight = 'normal', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag];
+    const propsToSync = [align, color, ellipsis, size, tag, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(heading.DSRHeading, { align, color, ellipsis, size, tag, children })),
+                children: (jsxRuntime.jsx(heading.DSRHeading, { align, color, ellipsis, size, tag, weight, children })),
             }
             : {
                 children,

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var icon = require('../dsr-components/icon.cjs');
 
-const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'small', source, className, ...rest }, ref) => {
+const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'sm', source, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, name, size, source];

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var linkPure = require('../dsr-components/link-pure.cjs');
 
-const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', underline = false, className, children, ...rest }, ref) => {
+const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, color = 'primary', download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'sm', stretch = false, target = '_self', underline = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline];
+    const propsToSync = [active, alignLabel, aria, color, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'color', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(linkPure.DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline, children })),
+                children: (jsxRuntime.jsx(linkPure.DSRLinkPure, { active, alignLabel, aria, color, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var scroller = require('../dsr-components/scroller.cjs');
 
-const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, children, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, compact, scrollToPosition, scrollbar = false, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
+    const propsToSync = [alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'compact', 'scrollToPosition', 'scrollbar', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, scrollToPosition, scrollbar, children })),
+                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var spinner = require('../dsr-components/spinner.cjs');
 
-const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', className, ...rest }, ref) => {
+const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', size = 'sm', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-spinner');
-    const propsToSync = [aria, size];
+    const propsToSync = [aria, color, size];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(spinner.DSRSpinner, { aria, size })),
+                children: (jsxRuntime.jsx(spinner.DSRSpinner, { aria, color, size })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var table = require('../dsr-components/table.cjs');
 
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, children, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, compact, layout];
+    const propsToSync = [caption, compact, layout, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, children })),
+                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, sticky, children })),
             }
             : {
                 children,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabsBar = require('../dsr-components/tabs-bar.cjs');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, size, weight, children })),
+                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabs = require('../dsr-components/tabs.cjs');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, size, weight, children })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var text = require('../dsr-components/text.cjs');
 
-const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', weight = 'regular', className, children, ...rest }, ref) => {
+const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'sm', tag = 'p', weight = 'normal', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, weight];

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

@@ -29,9 +29,10 @@ class DSRButtonPure extends react.Component {
         const iconProps = {
             className: 'icon',
             size: 'inherit',
+            color: 'inherit',
         };
-        const style = minifyCss.minifyCss(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.disabled, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.disabled, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.color, this.props.hideLabel, this.props.alignLabel, this.props.underline));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -12,8 +12,8 @@ var linkPure_wrapper = require('../components/link-pure.wrapper.cjs');
 
 /**
  * @slot {"name": "heading", "description": "Renders a heading above the carousel." }
- * @slot {"name": "description", "description": "Shows a footer section, flowing under the content area when scrollable." }
- * @slot {"name": "controls", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
+ * @slot {"name": "description", "description": "Renders descriptive content below the heading." }
+ * @slot {"name": "controls", "description": "Renders custom controls such as navigation buttons or indicators." }
  * @slot {"name": "", "description": "Default slot for the carousel slides." }
  *
  * @controlled { "props": ["activeSlideIndex"], "event": "update", "isInternallyMutated": true }

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

@@ -38,7 +38,7 @@ class DSRCheckbox extends react.Component {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'x';
         const style = minifyCss.minifyCss(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "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 && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsxRuntime.jsx(label.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 })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "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 && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsxRuntime.jsx(label.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 })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -9,6 +9,8 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 /**
  * @slot {"name": "", "description": "Default slot for the display text." }
+ *
+ * @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead.
  */
 class DSRDisplay extends react.Component {
     host;

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

@@ -10,8 +10,8 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 
 /**
  * @slot {"name": "", "description": "Default slot for the main content." }
- * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." } *
- * @slot {"name": "header", "description": "Shows a custom header section on mobile view" } *
+ * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." }
+ * @slot {"name": "header", "description": "Shows a custom header section on mobile view." }
  * @experimental
  */
 class DSRDrilldownItem extends react.Component {

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

@@ -13,7 +13,7 @@ var button_wrapper = require('../components/button.wrapper.cjs');
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the main content." }
  * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
- * @slot {"name": "sub-footer", "description": "Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content." }
+ * @slot {"name": "sub-footer", "description": "Renders additional content below the footer, such as legal information or FAQs. It appears when the flyout has enough space or when the user scrolls to the end." }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}
  */

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

@@ -15,7 +15,7 @@ class DSRHeading extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const TagType = utilsEntry.getHeadingTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss.minifyCss(stylesEntry.getHeadingCss(this.props.size, this.props.align, this.props.color, this.props.ellipsis));
+        const style = minifyCss.minifyCss(stylesEntry.getHeadingCss(this.props.size, this.props.weight, this.props.align, this.props.color, this.props.ellipsis));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(TagType, { className: "root", children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -22,7 +22,7 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 start, end, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);
     return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder || null, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, defaultValue: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple, dir: "auto" // This overwrites the default: let the browser now decide in which direction the value should be placed.
-                     }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+                     }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 exports.InputBase = InputBase;

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

@@ -18,7 +18,7 @@ class DSRLinkPure extends react.Component {
         splitChildren.splitChildren(this.props.children);
         const TagType = this.props.href === undefined ? 'span' : 'a';
         const hasIcon = utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource);
-        const style = minifyCss.minifyCss(stylesEntry.getLinkPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, !this.props.href));
+        const style = minifyCss.minifyCss(stylesEntry.getLinkPureCss(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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -31,7 +31,7 @@ class DSRRadioGroupOption extends react.Component {
         const style = minifyCss.minifyCss(stylesEntry.getRadioGroupOptionCss(isDisabled, isLoading, state));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.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 ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }))] }), jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
+                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingMessage.loadingId : `${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", "aria-hidden": "true" }))] }), jsxRuntime.jsx(label.Label, { hasLabel: this.props.label, hasDescription: false, host: null, label: this.props.label, htmlFor: id, isDisabled: isDisabled, isLoading: isLoading, stopClickPropagation: true }), !this.props.loadingParent && (jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isOptionLoading, initialLoading: this.props.initialLoading }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -39,7 +39,7 @@ class DSRRadioGroup extends react.Component {
     render() {
         const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getRadioGroupCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...utilsEntry.getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', { role: 'radiogroup' }), "aria-describedby": this.props.loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-labelledby": utilsEntry.labelId, children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { className: "root", disabled: this.props.disabled, ...utilsEntry.getFieldsetAriaAttributes(this.props.required, this.props.state === 'error', { role: 'radiogroup' }), "aria-describedby": this.props.loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-labelledby": utilsEntry.labelId, children: [jsxRuntime.jsx(label.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 }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,31 +1,27 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
 
 /**
  * @slot {"name": "", "description": "Default slot for the scroller content." }
  */
 class DSRScroller extends react.Component {
     host;
-    isPrevHidden = true;
-    isNextHidden = true;
+    isIndicatorPrevVisible = false;
+    isIndicatorNextVisible = false;
     intersectionObserver;
-    scrollAreaElement;
+    scrollArea;
+    sentinelLeft;
+    sentinelRight;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const renderPrevNextButton = (direction) => {
-            return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx(button_wrapper.PButton, { className: "action-button", variant: "secondary", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
-                    , children: direction }) }, direction));
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getScrollerCss(this.isNextHidden, this.isPrevHidden, this.props.alignScrollIndicator, this.props.scrollbar));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: utilsEntry.scrollAreaClass, children: jsxRuntime.jsxs("div", { className: "scroll-wrapper", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: utilsEntry.isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("div", { className: "trigger" }), jsxRuntime.jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getScrollerCss(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("span", { className: "prev" }), jsxRuntime.jsx("span", { className: "next" }), jsxRuntime.jsxs("div", { className: "scroll", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsxRuntime.jsx("span", { className: "sentinel" }), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -17,7 +17,7 @@ class DSRSelectOption extends react.Component {
         splitChildren.splitChildren(this.props.children);
         const { selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        const style = minifyCss.minifyCss(stylesEntry.getSelectOptionCss(this.props.disabled));
+        const style = minifyCss.minifyCss(stylesEntry.getSelectOptionCss(isDisabled));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.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", jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: Object.entries({

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

@@ -9,8 +9,8 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 class DSRSpinner extends react.Component {
     host;
     render() {
-        const style = minifyCss.minifyCss(stylesEntry.getSpinnerCss(this.props.size));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("span", { className: "root", role: "alert", "aria-live": "assertive", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: [jsxRuntime.jsx("span", { className: "sr-only", children: "\u00A0" }), jsxRuntime.jsxs("svg", { viewBox: "-16 -16 32 32", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [jsxRuntime.jsx("circle", { r: "9" }), jsxRuntime.jsx("circle", { r: "9" })] })] })] }) }));
+        const style = minifyCss.minifyCss(stylesEntry.getSpinnerCss(this.props.color, this.props.size));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { role: "alert", "aria-live": "assertive", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: [jsxRuntime.jsx("span", { className: "sr-only", children: "\u00A0" }), jsxRuntime.jsxs("svg", { viewBox: "-16 -16 32 32", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", children: [jsxRuntime.jsx("circle", { r: "11" }), jsxRuntime.jsx("circle", { r: "11" })] })] })] }) }));
     }
 }
 

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

@@ -13,9 +13,10 @@ var scroller_wrapper = require('../components/scroller.wrapper.cjs');
  */
 class DSRStepperHorizontal extends react.Component {
     host;
+    scroller;
     stepperHorizontalItems = [];
-    scrollerElement;
-    currentStepIndex;
+    slot;
+    resizeObserver;
     render() {
         const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)