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

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

@@ -3448,7 +3448,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.2"}]` // 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);
@@ -3527,8 +3527,6 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3733,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) => {

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/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/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/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/switch.cjs

@@ -23,7 +23,7 @@ class DSRSwitch extends react.Component {
         const id = 'x';
         const style = minifyCss.minifyCss(stylesEntry.getSwitchCss(this.props.alignLabel, this.props.hideLabel, this.props.stretch, this.props.checked, 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(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ...utilsEntry.getSwitchButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.checked), id: id, type: "button", role: "switch", "aria-labelledby": "label" // only relevant for axe-core because of https://github.com/dequelabs/axe-core/issues/1393
-                                    , "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: jsxRuntime.jsx("span", { className: "toggle", children: this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }) }) }), jsxRuntime.jsx("label", { id: "label", htmlFor: id, children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+                                    , "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: jsxRuntime.jsx("span", { className: "toggle", children: this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", "aria-hidden": "true" }) }) }), jsxRuntime.jsx("label", { id: "label", htmlFor: id, children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }