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

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

@@ -3446,7 +3446,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);
@@ -3525,8 +3525,6 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
-
-const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3731,12 +3729,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/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.mjs

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRButtonPure } from '../dsr-components/button-pure.mjs';
 
-const PButtonPure = /*#__PURE__*/ 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__*/ 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 = useRef(undefined);
     const WebComponentTag = 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];
     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: (jsx(DSRButtonPure, { active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value, children })),
+                children: (jsx(DSRButtonPure, { active, alignLabel, aria, color, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value, children })),
             }
             : {
                 children,

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

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

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

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRFlag } from '../dsr-components/flag.mjs';
 
-const PFlag = /*#__PURE__*/ forwardRef(({ aria, name = 'de', size = 'small', className, ...rest }, ref) => {
+const PFlag = /*#__PURE__*/ forwardRef(({ aria, name = 'de', size = 'sm', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-flag');
     const propsToSync = [aria, name, size];

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

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRHeading } from '../dsr-components/heading.mjs';
 
-const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, className, children, ...rest }, ref) => {
+const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = '2xl', tag, weight = 'normal', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag];
+    const propsToSync = [align, color, ellipsis, size, tag, weight];
     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: (jsx(DSRHeading, { align, color, ellipsis, size, tag, children })),
+                children: (jsx(DSRHeading, { align, color, ellipsis, size, tag, weight, children })),
             }
             : {
                 children,

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

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRIcon } from '../dsr-components/icon.mjs';
 
-const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'small', source, className, ...rest }, ref) => {
+const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'sm', source, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-icon');
     const propsToSync = [aria, color, name, size, source];

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

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkPure } from '../dsr-components/link-pure.mjs';
 
-const PLinkPure = /*#__PURE__*/ 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__*/ 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 = useRef(undefined);
     const WebComponentTag = 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];
     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: (jsx(DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline, children })),
+                children: (jsx(DSRLinkPure, { active, alignLabel, aria, color, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline, children })),
             }
             : {
                 children,

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

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRSpinner } from '../dsr-components/spinner.mjs';
 
-const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', className, ...rest }, ref) => {
+const PSpinner = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', size = 'sm', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-spinner');
-    const propsToSync = [aria, size];
+    const propsToSync = [aria, color, size];
     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: (jsx(DSRSpinner, { aria, size })),
+                children: (jsx(DSRSpinner, { aria, color, size })),
             }
             : {
                 suppressHydrationWarning: true,

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

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

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

@@ -27,9 +27,10 @@ class DSRButtonPure extends Component {
         const iconProps = {
             className: 'icon',
             size: 'inherit',
+            color: 'inherit',
         };
-        const style = minifyCss(getComponentCss$17(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...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 ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+        const style = minifyCss(getComponentCss$17(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...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 ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), 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/carousel.mjs

@@ -10,8 +10,8 @@ import { PLinkPure } from '../components/link-pure.wrapper.mjs';
 
 /**
  * @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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.mjs

@@ -36,7 +36,7 @@ class DSRCheckbox extends Component {
         const { namedSlotChildren} = splitChildren(this.props.children);
         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": `${descriptionId} ${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 && jsx(PSpinner, { className: "spinner", size: "inherit", "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", 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": `${descriptionId} ${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 && 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/display.mjs

@@ -7,6 +7,8 @@ import { getDisplayTagType } from '../../../../../../components/dist/utils/esm/u
 
 /**
  * @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 Component {
     host;

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

@@ -8,8 +8,8 @@ import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 
 /**
  * @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 Component {

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

@@ -11,7 +11,7 @@ import { PButton } from '../components/button.wrapper.mjs';
  * @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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.mjs

@@ -13,7 +13,7 @@ class DSRHeading extends Component {
     render() {
         splitChildren(this.props.children);
         const TagType = getHeadingTagType(null, this.props.size, this.props.tag);
-        const style = minifyCss(getComponentCss$U(this.props.size, this.props.align, this.props.color, this.props.ellipsis));
+        const style = minifyCss(getComponentCss$U(this.props.size, this.props.weight, 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] }));
     }
 }

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

@@ -20,7 +20,7 @@ id, label, description, loading, initialLoading, required, disabled, state, mess
 start, end, }) => {
     const { namedSlotChildren } = splitChildren(children);
     return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": loading ? loadingId : `${descriptionId} ${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, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+                     }), end, jsx("slot", { name: "end" }), loading && jsx(PSpinner, { "aria-hidden": "true" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, host: null }), jsx(LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 export { InputBase };

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

@@ -16,7 +16,7 @@ class DSRLinkPure extends Component {
         splitChildren(this.props.children);
         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.hideLabel, this.props.alignLabel, this.props.underline, !this.props.href));
+        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' && {
                                 href: this.props.href,
                                 target: this.props.target,

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

@@ -29,7 +29,7 @@ class DSRRadioGroupOption extends Component {
         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) => {
                                                     e.stopPropagation();
-                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": isDisabled || isLoading ? 'true' : null }), isOptionLoading && !this.props.loadingParent && (jsx(PSpinner, { className: "spinner", size: "inherit", "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] }));
+                                                }, onBlur: this.props.onBlur, "aria-describedby": isLoading ? loadingId : `${messageId}`, "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

@@ -37,7 +37,7 @@ class DSRRadioGroup extends Component {
     render() {
         const { namedSlotChildren} = splitChildren(this.props.children);
         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": this.props.loading ? loadingId : `${descriptionId} ${messageId}`, "aria-labelledby": labelId, 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", 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] }));
+        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": this.props.loading ? loadingId : `${descriptionId} ${messageId}`, "aria-labelledby": labelId, 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/spinner.mjs

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

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

@@ -21,7 +21,7 @@ class DSRSwitch extends Component {
         const id = 'x';
         const style = minifyCss(getComponentCss$j(this.props.alignLabel, this.props.hideLabel, this.props.stretch, this.props.checked, 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(Fragment, { children: [jsx("button", { ...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 ? loadingId : undefined, children: jsx("span", { className: "toggle", children: this.props.loading && jsx(PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }) }) }), jsx("label", { id: "label", htmlFor: id, children: jsx("slot", {}) }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
+                                    , "aria-describedby": this.props.loading ? loadingId : undefined, children: jsx("span", { className: "toggle", children: this.props.loading && jsx(PSpinner, { className: "spinner", "aria-hidden": "true" }) }) }), jsx("label", { id: "label", htmlFor: id, children: jsx("slot", {}) }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/components/accordion.wrapper.d.ts

@@ -14,15 +14,15 @@ export type PAccordionProps = BaseProps & {
      */
     compact?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
-     * Emitted when accordion state is changed.
+     * Emitted when the accordion state changes.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
@@ -30,7 +30,7 @@ export type PAccordionProps = BaseProps & {
      */
     open?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
@@ -52,15 +52,15 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     compact?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
      */
     heading?: string;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
      */
     headingTag?: AccordionHeadingTag;
     /**
-     * Emitted when accordion state is changed.
+     * Emitted when the accordion state changes.
      */
     onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
     /**
@@ -68,7 +68,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      */
     open?: boolean;
     /**
-     * @deprecated , will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**

package/ssr/esm/lib/components/button-pure.wrapper.d.ts

@@ -1,8 +1,8 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
+import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureColor, ButtonPureIcon, ButtonPureSize, ButtonPureType } from '../types';
 export type PButtonPureProps = BaseProps & {
     /**
-     * Display button in active state.
+     * Displays the button in its active state.
      */
     active?: boolean;
     /**
@@ -10,9 +10,13 @@ export type PButtonPureProps = BaseProps & {
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
+    /**
+     * The color.
+     */
+    color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -22,7 +26,7 @@ export type PButtonPureProps = BaseProps & {
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -64,7 +68,7 @@ export type PButtonPureProps = BaseProps & {
 };
 export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Display button in active state.
+     * Displays the button in its active state.
      */
     active?: boolean;
     /**
@@ -72,9 +76,13 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
+    /**
+     * The color.
+     */
+    color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -84,7 +92,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**

package/ssr/esm/lib/components/button-tile.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PButtonTileProps = BaseProps & {
      */
     align?: ButtonTileAlign;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
@@ -64,7 +64,7 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
      */
     align?: ButtonTileAlign;
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**

package/ssr/esm/lib/components/button.wrapper.d.ts

@@ -2,11 +2,11 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = BaseProps & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
-     * Displays as compact version.
+     * Displays the button in compact mode.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -18,7 +18,7 @@ export type PButtonProps = BaseProps & {
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -52,11 +52,11 @@ export type PButtonProps = BaseProps & {
 };
 export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
-     * Displays as compact version.
+     * Displays the button in compact mode.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -68,7 +68,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**